/*
  components.css — Phase 1: shared buttons/links used by the shell.
  Ported from the master's button/pill treatments in
  components/layout/{Header,MobileNavigation,LanguageSwitcher}.tsx.
*/

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  padding: 0.75rem 1.25rem;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition:
    background-color var(--duration-base) var(--ease-editorial),
    color var(--duration-base) var(--ease-editorial),
    transform var(--duration-base) var(--ease-editorial);
}

/* Header CTA — matches Header.tsx's ink-on-void pill that inverts
   to accent-on-white with a slight lift on hover. */
.btn--primary {
  background: var(--color-ink);
  color: var(--color-void);
}

.btn--primary:hover {
  background: var(--color-accent);
  color: #fff;
  transform: translateY(-2px);
}

/* Mobile-nav CTA — matches MobileNavigation.tsx's solid accent pill
   (no hover-lift there, since it's a touch context). */
.btn--accent {
  background: var(--color-accent);
  color: #fff;
  padding-inline: 1.5rem;
}

/* Language switcher pill — matches LanguageSwitcher.tsx. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-hairline-strong);
  padding: 0.5rem 1rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-ink);
  transition:
    border-color var(--duration-base) ease,
    color var(--duration-base) ease;
}

.lang-switch:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ---------------------------------------------------------------
   Phase 2: larger button variants used by Hero / Connection CTA
   (HeroClient.tsx, ContactCTA.tsx — px-6/7 py-4 text-[13px], vs.
   the header's smaller px-5 py-3 text-[12px] pill).
   --------------------------------------------------------------- */
.btn--lg {
  padding: 1rem 1.5rem;
  font-size: 13px;
}

.btn--ink {
  background: var(--color-ink);
  color: var(--color-void);
}

.btn--ink:hover {
  background: var(--color-accent);
  color: #fff;
  box-shadow: var(--shadow-cta);
}

.btn--outline {
  border: 1px solid var(--color-hairline-strong);
  color: var(--color-ink);
}

.btn--outline:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn--white {
  background: #fff;
  color: var(--color-void);
}

.btn--white:hover {
  background: var(--color-accent);
  color: #fff;
}

/* ---------------------------------------------------------------
   Shared responsive-visibility utility (mirrors the master's
   `hidden sm:block` pattern used across several homepage sections).
   --------------------------------------------------------------- */
.sm-only {
  display: none;
}

/* ---------------------------------------------------------------
   Magnetic button wrapper (components/motion/MagneticButton.tsx) —
   js/animations.js drives a small rAF spring and writes `transform`
   directly; this just establishes the inline-block wrapper.
   --------------------------------------------------------------- */
.magnetic {
  display: inline-block;
}

/* =================================================================
   HERO (components/home/Hero.tsx + HeroClient.tsx)
   ================================================================= */
.hero {
  position: relative;
  display: flex;
  min-height: 100svh;
  align-items: center;
  overflow: hidden;
  padding-bottom: 5rem;
  padding-top: 8rem;
}

.hero__scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cine__flip {
  position: absolute;
  inset: 0;
}

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

.cine__atmosphere {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 78% 30%, rgba(215, 25, 32, 0.16) 0%, rgba(21, 33, 43, 0.4) 30%, var(--color-void) 62%),
    linear-gradient(180deg, var(--color-void) 0%, var(--color-surface) 100%);
}

.cine__depth-group {
  position: absolute;
  inset: 0;
}

.cine__terrain {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 42%;
  overflow: hidden;
}

.cine__terrain-layer {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  width: 100%;
}

.cine__terrain-far {
  height: 100%;
  opacity: 0.6;
}

.cine__terrain-mid {
  height: 75%;
  opacity: 0.8;
}

.cine__terrain-rim {
  height: 50%;
}

.cine__reflection {
  position: absolute;
  bottom: 0;
  right: 6%;
  height: 18%;
  width: 30%;
  opacity: 0.6;
  background: linear-gradient(to top, rgba(215, 25, 32, 0.16) 0%, rgba(215, 25, 32, 0.05) 45%, transparent 80%);
  filter: blur(6px);
  mask-image: linear-gradient(to top, black, transparent);
  -webkit-mask-image: linear-gradient(to top, black, transparent);
}

.cine__perspective-path {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  opacity: 0.7;
}

.cine__mist {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cine__mist-a,
.cine__mist-b {
  position: absolute;
  border-radius: 100%;
  filter: blur(18px);
}

.cine__mist-a {
  bottom: 8%;
  left: 10%;
  height: 30%;
  width: 55%;
  background: radial-gradient(ellipse, rgba(241, 239, 234, 0.05) 0%, transparent 70%);
}

.cine__mist-b {
  bottom: 4%;
  right: 6%;
  height: 26%;
  width: 46%;
  filter: blur(22px);
  background: radial-gradient(ellipse, rgba(215, 25, 32, 0.06) 0%, transparent 72%);
}

.cine__particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cine__particle {
  position: absolute;
  border-radius: var(--radius-pill);
}

.cine__particle--ink {
  background: var(--color-ink);
}

.cine__particle--accent {
  background: var(--color-accent);
}

/* Hero content */
.hero__content {
  position: relative;
  z-index: 10;
  min-width: 0; /* .hero is display:flex — without this, flexbox's
                   default min-width:auto lets this item grow to its
                   text/buttons' natural width instead of shrinking to
                   the viewport, overflowing on narrow screens. */
  width: 100%;
}

.hero__inner {
  max-width: var(--container-2xl);
}

.hero__eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-accent);
}

.hero__headline {
  margin-top: 1.5rem;
  /* clamp(), not a bare 15vw: caps growth at the same 70px the
     640px breakpoint already uses below, closing off a narrow-
     viewport overflow risk for long words (e.g. "who expect") —
     see Phase 5 QA report. */
  font-size: clamp(32px, 15vw, 70px);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.hero__mask-line {
  display: block;
  overflow: hidden;
  overflow-wrap: break-word;
}

.hero__mask-line--accent {
  color: var(--color-accent);
}

/* Arabic hero headline — glyph-safe mask box (supervisor report
   "العنوان كأنه مقصوص"). Each .hero__mask-line clips its content
   (overflow:hidden + the reveal's clip-path inset) to its own box, and
   at line-height 0.94 Cairo's ink overflows that box: measured 0.13em
   above (ل ك أ) and 0.266em below (ن ي ع descenders + dots). The padding
   below enlarges the clip box past the ink; the equal negative margin
   keeps every baseline — and so the approved composition, size and
   reveal — exactly where it was. Flex column stops the two lines'
   negative margins from collapsing into each other. */
html[lang="ar"] .hero__headline {
  display: flex;
  flex-direction: column;
}

html[lang="ar"] .hero__mask-line {
  padding-block: 0.2em 0.34em;
  margin-block: -0.2em -0.34em;
}

/* English: same mechanism, much smaller overflow (the "p" of "expect",
   measured 0.027em) — a proportionally smaller glyph-safe allowance. */
html[lang="en"] .hero__headline {
  display: flex;
  flex-direction: column;
}

html[lang="en"] .hero__mask-line {
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

/* Below 640px the second line wraps inside its own mask («لمن يتوقع» /
   «أكثر.»), and at 0.94 the hamza of «أكثر» touches the foot of the ل in
   «لمن» directly above it. A slightly larger leading separates the
   wrapped glyphs; 640px+ (no wrap) keeps the approved 0.94. */
@media (max-width: 639px) {
  html[lang="ar"] .hero__headline {
    line-height: 1.1;
  }
}

.hero__lead {
  margin-top: 1.75rem;
  max-width: 520px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-muted);
}

.hero__ctas {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero__micro {
  position: absolute;
  bottom: 6rem;
  inset-inline-end: 2rem;
  z-index: 10;
  display: none;
  transform: rotate(90deg);
  transform-origin: bottom right;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--color-faint);
}

.hero__line {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 10;
  height: 6rem;
  width: 1px;
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom;
  background: linear-gradient(to top, var(--color-accent), transparent);
}

/* Energy portal */
.hero__portal {
  position: absolute;
  right: -8%;
  top: 52%;
  aspect-ratio: 1 / 1;
  width: 75vw;
  max-width: 620px;
  opacity: 0.7;
}

.portal__core {
  position: absolute;
  inset: 18%;
  border-radius: var(--radius-pill);
  background: radial-gradient(circle, rgba(7, 17, 26, 0.95) 0%, rgba(9, 22, 32, 0.5) 55%, transparent 75%);
}

.portal__glow {
  position: absolute;
  inset: 6%;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  filter: blur(60px);
}

.portal__breathe {
  position: absolute;
  inset: 0;
}

.portal__ring-outer {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
}

.portal__ring-technical-svg {
  position: absolute;
  inset: 5%;
  height: 90%;
  width: 90%;
  overflow: visible;
}

.portal__ring-inset {
  position: absolute;
  inset: 9%;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--color-ink) 8%, transparent);
}

.portal__energy-svg {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  overflow: visible;
}

.portal__marker {
  position: absolute;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-ink) 70%, transparent);
  box-shadow: 0 0 10px rgba(241, 239, 234, 0.35);
  transform: translate(-50%, -50%);
}

/* Floating architecture panels */
.floating-panel {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.floating-panel__tilt {
  position: relative;
  height: 100%;
  width: 100%;
}

.floating-panel__anim {
  position: absolute;
}

.floating-panel__body {
  position: absolute;
  inset: 0;
  border-radius: 24px 5px 24px 5px;
  border: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent);
  background: linear-gradient(
    to bottom right,
    color-mix(in srgb, var(--color-surface-3) 80%, transparent),
    color-mix(in srgb, var(--color-surface-2) 60%, transparent),
    color-mix(in srgb, var(--color-surface) 40%, transparent)
  );
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.floating-panel__glow {
  position: absolute;
  inset-block: 4%;
  inset-inline-start: -2%;
  width: 12%;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-accent) 70%, transparent),
    color-mix(in srgb, var(--color-accent) 35%, transparent),
    transparent
  );
  filter: blur(2px);
}

.floating-panel__inset {
  position: absolute;
  inset: 14%;
  border-radius: 16px 4px 16px 4px;
  border: 1px solid color-mix(in srgb, var(--color-ink) 6%, transparent);
}

/* Scroll cue (components/home/ScrollCue.tsx) */
.scroll-cue {
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
  bottom: 2rem;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.scroll-cue__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--color-faint);
}

.scroll-cue__track {
  position: relative;
  height: 3.5rem;
  width: 1px;
  overflow: hidden;
  background: var(--color-hairline-strong);
}

.scroll-cue__marker {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1rem;
  background: var(--color-accent);
}

/* =================================================================
   MANIFESTO (components/home/Manifesto.tsx + ManifestoClient.tsx)
   ================================================================= */
.manifesto {
  position: relative;
  height: 190vh;
}

.manifesto__sticky {
  position: sticky;
  top: 0;
  display: flex;
  height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-inline: 1.5rem;
}

.manifesto__line {
  position: absolute;
  left: 50%;
  top: 0;
  height: 4rem;
  width: 1px;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  background: linear-gradient(to bottom, var(--color-accent), transparent);
}

.manifesto__inner {
  margin-inline: auto;
  width: 100%;
  max-width: var(--container-4xl);
}

.manifesto__eyebrow {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-accent);
}

.manifesto__statement {
  margin-top: 2rem;
  text-align: center;
  font-size: clamp(28px, 5.2vw, 64px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.manifesto__word {
  display: inline-block;
  opacity: 0.28;
  color: #9a9a95;
}

.manifesto__body {
  margin-inline: auto;
  margin-top: 2.5rem;
  max-width: 640px;
  text-align: center;
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-muted);
}

@media (prefers-reduced-motion: reduce) {
  .manifesto__word {
    opacity: 1 !important;
    color: var(--color-ink) !important;
  }
}

/* =================================================================
   CAPABILITY UNIVERSE (components/home/CapabilityUniverse[Client].tsx)
   ================================================================= */
.cap-universe {
  background: var(--color-void);
  padding-block: 6rem;
  color: var(--color-ink);
}

.cap-universe__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

.cap-universe__eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-accent);
}

.cap-universe__title {
  margin-top: 1rem;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.cap-universe__body {
  max-width: var(--container-sm);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.cap-universe__grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 2.5rem;
}

.cap-nav {
  border-top: 1px solid var(--color-hairline);
}

.cap-nav__hint {
  margin-top: 1rem;
  font-size: 12px;
  color: var(--color-faint);
}

.cap-row {
  border-bottom: 1px solid var(--color-hairline);
}

.cap-row__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-block: 1.5rem;
  opacity: 0.7;
  transition: opacity var(--duration-base) ease;
}

.cap-row__link:hover,
.cap-row__link.is-active {
  opacity: 1;
}

.cap-row__number {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-faint);
  transition: color var(--duration-base) ease;
}

.cap-row__link.is-active .cap-row__number {
  color: var(--color-accent);
}

.cap-row__text {
  flex: 1;
}

.cap-row__title {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  transition: color var(--duration-base) ease;
}

.cap-row__link.is-active .cap-row__title {
  color: var(--color-accent);
}

.cap-row__keywords {
  display: none;
  margin-top: 0.25rem;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-faint);
}

.cap-row__arrow {
  font-size: 1.25rem;
  color: var(--color-faint);
  display: inline-block;
  transition: all var(--duration-base) ease;
}

.cap-row__link.is-active .cap-row__arrow {
  transform: translate(4px, -4px);
  color: var(--color-accent);
}

html[dir="rtl"] .cap-row__link.is-active .cap-row__arrow {
  transform: translate(-4px, -4px);
}

.cap-row__preview-panel {
  margin-bottom: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--color-void);
  padding: 0.75rem;
}

.cap-row__preview-visual {
  aspect-ratio: 1 / 1;
  width: 100%;
}

.cap-row__preview-blurb {
  margin-bottom: 1.5rem;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-muted);
}

.cap-stage {
  display: none;
}

.cap-stage__frame {
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--color-void);
  padding: 1rem;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.25);
}

.cap-stage__viewport {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
}

.cap-stage__blurb-wrap {
  position: relative;
  margin-top: 1.5rem;
  max-width: var(--container-md);
  min-height: 3.5em;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-muted);
}

.cap-universe__footer {
  margin-top: 2.5rem;
}

.cap-universe__view-all,
.ecosystem__link {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-hairline-strong);
  text-underline-offset: 8px;
  transition: color var(--duration-base) ease;
}

.cap-universe__view-all:hover,
.ecosystem__link:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

/* =================================================================
   SERVICE VISUALS (components/visuals/*.tsx) — used inside the
   Capability Universe stage and mobile preview panels.
   ================================================================= */
.visual-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-hairline);
  background: linear-gradient(to bottom right, var(--color-surface-2), var(--color-void));
}

.visual-frame__glow {
  pointer-events: none;
  position: absolute;
  right: -25%;
  top: -25%;
  height: 50%;
  width: 50%;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  filter: blur(80px);
}

.visual-frame__content {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.service-visual__svg {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}

.service-visual__node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%);
}

.service-visual__badge {
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--color-accent) 50%, transparent);
  background: var(--color-void);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent);
  box-shadow: 0 0 20px rgba(215, 25, 32, 0.25);
}

.service-visual__badge--outline {
  height: 1.75rem;
  width: 1.75rem;
  border-color: var(--color-hairline-strong);
  color: var(--color-ink);
  box-shadow: none;
}

.service-visual__label {
  margin-top: 0.5rem;
  max-width: 80px;
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-muted);
}

.service-visual__glow {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 10%;
  height: 8rem;
  width: 8rem;
  transform: translateX(-50%);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-accent) 20%, transparent);
  filter: blur(60px);
}

.service-visual__cs {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.service-visual__ring {
  position: absolute;
  border-radius: var(--radius-pill);
  border: 1px solid;
}

.service-visual__core {
  position: relative;
  display: flex;
  height: 16%;
  width: 16%;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  box-shadow: 0 0 40px rgba(215, 25, 32, 0.5);
}

.service-visual__core-mark {
  height: 45%;
  width: 45%;
  border-radius: 2px;
  border: 2px solid rgba(255, 255, 255, 0.7);
}

.service-visual__tag {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-hairline);
  background: color-mix(in srgb, var(--color-void) 80%, transparent);
  padding: 0.25rem 0.625rem;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-muted);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.service-visual__ai-node {
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-hairline-strong);
  background: var(--color-void);
}

.service-visual__ai-node--major {
  height: 4rem;
  width: 4rem;
  border-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  box-shadow: 0 0 30px rgba(215, 25, 32, 0.3);
}

.service-visual__ai-dot {
  height: 0.5rem;
  width: 0.5rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.5);
}

.service-visual__ai-node--major .service-visual__ai-dot {
  background: var(--color-accent);
}

@media (min-width: 640px) {
  .visual-frame__content {
    padding: 3rem;
  }
}

/* =================================================================
   RED INTERLUDE (components/home/RedInterlude.tsx)
   ================================================================= */
.red-interlude {
  position: relative;
  overflow: hidden;
  background: var(--color-accent);
  padding-bottom: 0;
  padding-top: 7rem;
}

.red-interlude__inner {
  position: relative;
  text-align: center;
}

.red-interlude__statement {
  font-size: clamp(38px, 8vw, 110px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: #fff;
}

.red-interlude__line {
  display: block;
}

.red-interlude__shape {
  position: relative;
  margin-top: 4rem;
  height: 7rem;
}

.red-interlude__circle {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 0;
  aspect-ratio: 1 / 1;
  width: 60vw;
  max-width: 480px;
  transform: translateX(-50%) scale(0);
  transform-origin: top;
  border-radius: var(--radius-pill);
  background: var(--color-void);
}

.red-interlude__circle.is-visible {
  transform: translateX(-50%) scale(1);
}

/* =================================================================
   TRANSFORMATION JOURNEY (components/home/TransformationJourney.tsx)
   ================================================================= */
.journey {
  border-top: 1px solid var(--color-hairline);
  background: var(--color-surface);
  padding-block: 6rem;
}

.journey__eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-accent);
}

.journey__title {
  margin-top: 1rem;
  max-width: var(--container-xl);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.journey__body {
  margin-top: 1rem;
  max-width: var(--container-lg);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-muted);
}

.journey__stages {
  position: relative;
  margin-top: 4rem;
}

.journey__connector {
  position: absolute;
  inset-inline: 0;
  top: 1rem;
  display: none;
  height: 1px;
  background: var(--color-hairline-strong);
  transform-origin: left;
}

html[dir="rtl"] .journey__connector {
  transform-origin: right;
}

.journey__grid {
  display: grid;
  gap: 2.5rem;
}

.journey__stage {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.journey__number {
  position: relative;
  z-index: 10;
  display: flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--color-accent) 50%, transparent);
  background: var(--color-surface);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent);
  box-shadow: 0 0 0 6px var(--color-surface);
}

.journey__stage-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.journey__stage-body {
  margin-top: 0.5rem;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-muted);
}

/* =================================================================
   ECOSYSTEM (components/home/EcosystemOrbit.tsx + EcosystemField.tsx)
   ================================================================= */
.ecosystem {
  border-top: 1px solid var(--color-hairline);
  padding-block: 6rem;
}

.ecosystem__grid {
  display: grid;
  gap: 3.5rem;
}

.ecosystem__eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-accent);
}

.ecosystem__title {
  margin-top: 1rem;
  max-width: var(--container-md);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.ecosystem__body {
  margin-top: 1.25rem;
  max-width: var(--container-md);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-muted);
}

.ecosystem__link {
  margin-top: 1.75rem;
  display: inline-block;
}

.ecosystem__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  list-style: none;
}

.ecosystem__list-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.ecosystem__list-domain {
  margin-top: 0.125rem;
  font-size: 11px;
  color: var(--color-faint);
}

.ecosystem__field-wrap {
  display: none;
}

.ecosystem-field {
  position: relative;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 620px;
  /* The node cards are whitespace-nowrap and centered on a left:X%
     anchor, so a card near the field's edge can overhang past the
     field's own box (worse in AR, where label text renders wider) —
     confirmed via Phase 5 QA to push document scrollWidth past the
     viewport at 768/1024/1280px on the AR homepage. Clipping at this
     decorative widget's own boundary contains the overhang without
     touching its layout or motion. */
  overflow: hidden;
}

.ecosystem-field__svg {
  pointer-events: none;
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}

.ecosystem-field__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 3.5rem;
  width: 3.5rem;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-hairline-strong);
  background: var(--color-surface);
  padding: 0.75rem;
  box-shadow: 0 0 40px rgba(215, 25, 32, 0.12);
}

.ecosystem-field__hub img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.ecosystem-field__node {
  position: absolute;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease-out;
}

.ecosystem-field__node-card {
  white-space: nowrap;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-hairline);
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  padding: 0.5rem 0.875rem;
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ecosystem-field__node-name {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.ecosystem-field__node-domain {
  margin-top: 0.125rem;
  font-size: 9.5px;
  color: var(--color-faint);
}

/* =================================================================
   CONNECTION / FINAL CTA (components/home/ContactCTA.tsx)
   ================================================================= */
.connection {
  padding-bottom: 6rem;
}

.connection__panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-accent);
  padding: 4rem 2rem;
}

.connection__watermark {
  pointer-events: none;
  position: absolute;
  bottom: -4rem;
  inset-inline-end: -4%;
  font-size: 220px;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.1);
}

.connection__inner {
  position: relative;
  max-width: var(--container-2xl);
}

.connection__eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.8);
}

.connection__title {
  margin-top: 1.25rem;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
}

.connection__cta {
  margin-top: 2.25rem;
}

/* =================================================================
   PARTNERS MARQUEE (components/home/PartnersMarquee.tsx)
   ================================================================= */
.partners-marquee {
  border-top: 1px solid var(--color-hairline);
  background: var(--color-void);
  padding-bottom: 2.5rem;
  padding-top: 3.5rem;
}

.partners-marquee__heading {
  text-align: center;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.partners-marquee__rows {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.marquee-row {
  overflow: hidden;
}

/* One spacing mechanism: the track gap (cards carry no margins). The
   trailing padding equal to the gap makes each half of the duplicated
   track exactly N x (card + gap), so translating -50% loops without a
   seam jump. */
.marquee-track {
  justify-content: flex-start;
  gap: 10px;
  padding-right: 10px;
}

/* Partner cards: a quiet DAL surface; the logo fills it. Each logo is a
   transparent canvas with the card's own proportion
   (assets/partners/horizontal/*.webp) carrying its own margins, and dark
   marks on a tight light plate. */
.marquee-card {
  display: flex;
  height: 5rem;
  width: 168px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-hairline);
  background: color-mix(in srgb, var(--color-surface-2) 55%, transparent);
  padding: 0.25rem;
  transition:
    border-color var(--duration-base) ease,
    background-color var(--duration-base) ease;
}

.marquee-card:hover {
  border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
  background: color-mix(in srgb, var(--color-surface-3) 70%, transparent);
}

.marquee-card__inner {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}

/* One common fitting rule: the canvas already holds the logo's safety
   margin, so it simply fills the card; contain = never cropped/stretched. */
.marquee-card__inner img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transition: transform var(--duration-slow) var(--ease-editorial);
}

.marquee-card:hover .marquee-card__inner img {
  transform: scale(1.03);
}

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

  .marquee-card:hover .marquee-card__inner img {
    transform: none;
  }
}

/* =================================================================
   PHASE 3 — SERVICE PAGES — SHARED PRIMITIVES

   Ported from the master's genuinely-repeated patterns across
   components/services/**: the small uppercase accent section label,
   the back-to-services link, the eyebrow+number row, and the
   numbered-list/index-grid recipes reused (with different data and
   grid ratios) by several services' Objectives/Frameworks/
   Deliverables sections. Each service's HERO SCENE and SIGNATURE
   INTERACTION are deliberately NOT unified here — those are built
   individually per service, below.
   ================================================================= */
.section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-accent);
}

.section-index {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-faint);
}

.svc-back-link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-muted);
  transition: color var(--duration-base) ease;
}

.svc-back-link:hover {
  color: var(--color-accent);
}

.svc-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.svc-eyebrow-row__number {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-accent);
}

.svc-eyebrow-row__line {
  height: 1px;
  flex: 1;
  max-width: 4rem;
  background: var(--color-hairline-strong);
}

.svc-eyebrow-row__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-muted);
}

.svc-title {
  margin-top: 1.5rem;
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.svc-tagline {
  margin-top: 1.5rem;
  max-width: var(--container-xl);
  font-weight: 500;
  line-height: 1.3;
  color: color-mix(in srgb, var(--color-ink) 80%, transparent);
}

.svc-intro {
  margin-top: 1.5rem;
  max-width: var(--container-xl);
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--color-muted);
}

/* Generic numbered-list recipe — index + divider + text row.
   Modifiers below adjust size/columns per section. */
.numbered-list {
  border-top: 1px solid var(--color-hairline);
}

.numbered-list__row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-bottom: 1px solid var(--color-hairline);
  padding-block: 2rem;
}

.numbered-list__index {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-faint);
}

.numbered-list__text {
  font-family: var(--font-display);
  max-width: var(--container-xl);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

/* Framework index — thin-rule list, used (with different density) by
   several services' Frameworks sections. */
.framework-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  border-bottom: 1px solid var(--color-hairline);
  padding-block: 1rem;
}

.framework-row__dot {
  height: 6px;
  width: 6px;
  flex-shrink: 0;
  background: var(--color-accent);
}

.framework-row__label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--color-ink) 85%, transparent);
}

@media (min-width: 640px) {
  .numbered-list__row {
    flex-direction: row;
    align-items: baseline;
    gap: 2.5rem;
  }
}

/* =================================================================
   SERVICE 01 — DIGITAL TRANSFORMATION
   Signature: THE TRANSFORMATION SCENE (architectural glass planes +
   progression beam) · THE JOURNEY (winding path, per-stage layouts)
   ================================================================= */
.dt-hero {
  position: relative;
  overflow: hidden;
  padding-bottom: 4rem;
  padding-top: 10rem;
}

.dt-hero__bg {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 78% 25%, rgba(123, 13, 18, 0.14) 0%, #0d1720 35%, var(--color-void) 70%);
}

.dt-hero__grid {
  position: relative;
  display: grid;
  align-items: center;
  gap: 3.5rem;
}

.dt-hero__title {
  font-size: clamp(34px, 5.4vw, 64px);
}

/* the progression line that survives into the Journey section below */
.dt-hero__line {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 10;
  height: 5rem;
  width: 1px;
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom;
  background: linear-gradient(to top, color-mix(in srgb, var(--color-accent) 70%, transparent), transparent);
}

/* --- Transformation Scene (glass planes) --- */
.dt-scene {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 560px;
  perspective: 1600px;
}

.dt-scene__floor-glow {
  pointer-events: none;
  position: absolute;
  inset-inline: 6%;
  bottom: 6%;
  height: 18%;
  border-radius: 50%;
  filter: blur(24px);
  background: radial-gradient(closest-side, rgba(215, 25, 32, 0.14), transparent 75%);
}

.dt-scene__stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.4s var(--ease-editorial);
}

.dt-plane {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02), transparent);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(1px);
  animation: dtPlaneBob var(--plane-dur, 8s) ease-in-out infinite;
}

/* --plane-z / --plane-rotate are static per-plane constants set once
   inline at generation time (never updated by JS) — baked into every
   frame of the running animation alongside the animated Y offset, so
   the one running animation can express both the fixed 3D placement
   and the idle bob without conflicting declarations. Pointer parallax
   is applied separately, to the parent .dt-scene__stage, which never
   conflicts with a child's own animated transform. */
@keyframes dtPlaneBob {
  0%,
  100% {
    transform: translateZ(var(--plane-z, 0px)) rotateY(var(--plane-rotate, 0deg)) translateY(0);
  }
  50% {
    transform: translateZ(var(--plane-z, 0px)) rotateY(var(--plane-rotate, 0deg)) translateY(var(--plane-bob, -5px));
  }
}

.dt-plane__index {
  position: absolute;
  bottom: 0.5rem;
  inset-inline-start: 0.5rem;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.25);
}

.dt-scene__svg {
  pointer-events: none;
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  overflow: visible;
}

.dt-scene__signal {
  pointer-events: none;
  position: absolute;
  height: 6px;
  width: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  box-shadow: 0 0 6px var(--color-accent);
  offset-path: var(--signal-path);
  animation: offsetTravel 6.5s ease-in-out infinite;
}

.dt-scene__keywords {
  pointer-events: none;
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dt-scene__keyword {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dt-scene__keyword-dot {
  height: 4px;
  width: 4px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.2);
}

.dt-scene__keyword:first-child .dt-scene__keyword-dot {
  background: var(--color-accent);
}

.dt-scene__keyword-label {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.25);
}

.dt-scene__keyword:first-child .dt-scene__keyword-label {
  color: rgba(255, 255, 255, 0.5);
}

/* --- Journey --- */
.dt-journey {
  position: relative;
  border-top: 1px solid var(--color-hairline);
  background: var(--color-surface);
}

.dt-journey__header {
  padding-top: 5rem;
}

.dt-journey__grid {
  position: relative;
  display: grid;
  gap: 1.5rem;
}

.dt-journey__backbone {
  display: none;
}

.dt-journey__backbone-inner {
  position: sticky;
  top: 7rem;
  height: 70vh;
}

.dt-journey__backbone-svg {
  height: 100%;
  width: 100%;
  overflow: visible;
}

.dt-journey__stages {
  overflow: hidden;
  padding-inline-start: 2rem;
}

.dt-stage {
  position: relative;
  display: flex;
  min-height: 62vh;
  flex-direction: column;
  justify-content: center;
}

.dt-stage__watermark {
  pointer-events: none;
  position: absolute;
  inset-inline-start: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 26vw;
  font-weight: 900;
  line-height: 1;
  color: color-mix(in srgb, var(--color-ink) 3%, transparent);
}

.dt-stage__impact-plane {
  position: absolute;
  inset-block: 2rem;
  inset-inline-end: 0;
  width: 60%;
  background: var(--color-accent);
}

.dt-stage__body {
  position: relative;
  z-index: 1;
}

.dt-stage__body--impact {
  padding-block: 2.5rem;
  padding-inline-start: 1.5rem;
}

.dt-stage__number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-accent);
}

.dt-stage__body--impact .dt-stage__number {
  font-size: 1.5rem;
  color: #fff;
}

.dt-stage__title {
  margin-top: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(22px, 2.8vw, 30px);
  color: var(--color-ink);
}

.dt-stage__body--impact .dt-stage__title {
  font-size: clamp(30px, 4.4vw, 48px);
  color: #fff;
}

.dt-stage__desc {
  margin-top: 1rem;
  max-width: var(--container-md);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-muted);
}

.dt-stage__body--impact .dt-stage__desc {
  color: rgba(255, 255, 255, 0.8);
}

.dt-stage__resolved-rule {
  margin-top: 2rem;
  height: 1px;
  width: 6rem;
  background: var(--color-hairline-strong);
}

/* --- Payoff --- */
.dt-payoff {
  border-top: 1px solid var(--color-hairline);
  background: var(--color-surface);
  padding-top: 4rem;
}

@media (min-width: 640px) {
  .dt-hero {
    padding-top: 12rem;
  }

  .dt-hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .dt-journey__backbone {
    display: block;
  }

  .dt-journey__stages {
    padding-inline-start: 0;
  }

  .dt-journey__grid {
    grid-template-columns: 0.8fr 1.2fr;
  }

  .dt-stage {
    min-height: 78vh;
  }
}

/* =================================================================
   SERVICE 02 — CYBERSECURITY & DATA GOVERNANCE
   Signature: THE GOVERNED GLOBE · CONTROLLED DISCLOSURE
   ================================================================= */
.cs-hero {
  position: relative;
  overflow: hidden;
  padding-bottom: 4rem;
  padding-top: 10rem;
}

.cs-hero__grid {
  display: grid;
  align-items: start;
  gap: 3.5rem;
}

.cs-hero__title {
  font-size: clamp(34px, 5vw, 58px);
}

/* Controlled Reveal — the page's signature interaction: a solid bar
   lifts away on scroll-into-view, revealing the content beneath.
   Content is always in the DOM (never hidden from assistive tech). */
.controlled-reveal {
  position: relative;
  overflow: hidden;
}

/* Hero title wrapper: overflow:hidden (needed to hide the lifted bar)
   was trimming the title's descenders/dots — up to 0.35em in Arabic.
   Font-size matches .cs-hero__title so the em padding scales with it;
   the equal negative margin keeps the layout exactly where it was. */
.controlled-reveal--title {
  font-size: clamp(34px, 5vw, 58px);
  padding-bottom: 0.42em;
  margin-bottom: -0.42em;
}

.controlled-reveal__bar {
  pointer-events: none;
  position: absolute;
  inset: 0;
  transform: translateY(0);
  transition: transform 0.7s cubic-bezier(0.6, 0, 0.2, 1);
}

.controlled-reveal.is-visible .controlled-reveal__bar {
  transform: translateY(-100%);
}

.controlled-reveal__bar--void {
  background: var(--color-void);
}

.controlled-reveal__bar--accent {
  background: var(--color-accent);
}

.controlled-reveal__bar--surface3 {
  background: var(--color-surface-3);
}

@media (prefers-reduced-motion: reduce) {
  .controlled-reveal__bar {
    display: none;
  }
}

/* --- Globe scene --- */
.cs-globe-scene {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 440px;
}

.cs-globe-scene__dais {
  position: absolute;
  inset-inline: 6%;
  top: 68%;
  height: 16%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.04), transparent);
}

.cs-globe-scene__ring {
  position: absolute;
  inset-inline: 10%;
  top: 71%;
  height: 11%;
  border-radius: 50%;
  border: 1px solid rgba(215, 25, 32, 0.2);
  animation: slowSpin 220s linear infinite;
}

.cs-globe-scene__shadow {
  position: absolute;
  inset-inline: 16%;
  top: 74%;
  height: 7%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  filter: blur(6px);
}

.cs-globe {
  position: absolute;
  inset-inline: 10%;
  top: 4%;
  height: 62%;
  width: 62%;
  overflow: hidden;
  border-radius: var(--radius-pill);
}

.cs-globe__surface {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  background: radial-gradient(circle at 35% 30%, #1c2b33 0%, #0e161c 55%, #05080a 100%);
  box-shadow: inset -22px -22px 60px rgba(0, 0, 0, 0.65), inset 10px 10px 30px rgba(255, 255, 255, 0.04);
}

.cs-globe__texture {
  position: absolute;
  inset: -15%;
  border-radius: var(--radius-pill);
  opacity: 0.7;
  background-image: repeating-radial-gradient(
    circle at 30% 40%,
    rgba(255, 255, 255, 0.05) 0px,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px,
    transparent 10px
  );
  background-size: 14px 14px;
  animation: slowSpin 130s linear infinite;
}

.cs-globe__region {
  position: absolute;
  border-radius: var(--radius-pill);
  filter: blur(6px);
  background: radial-gradient(circle, rgba(215, 25, 32, 0.9), transparent 70%);
  animation: ringPulse 5s ease-in-out infinite;
}

.cs-globe__rim {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.cs-globe-scene__orbits {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.cs-orbit-dot {
  pointer-events: none;
  position: absolute;
  height: 5px;
  width: 5px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  box-shadow: 0 0 5px var(--color-accent);
  offset-path: var(--orbit-path);
  animation: offsetTravel var(--orbit-dur, 12s) linear infinite;
}

.cs-glass-plane {
  position: absolute;
  bottom: 6%;
  inset-inline-end: 0;
  height: 46%;
  width: 34%;
  max-width: 150px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02), transparent);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(1px);
}

.cs-glass-plane__corner {
  position: absolute;
  height: 1rem;
  width: 1rem;
  border-color: color-mix(in srgb, var(--color-accent) 70%, transparent);
}

.cs-glass-plane__corner--tl {
  inset-inline-start: -1px;
  top: -1px;
  border-inline-start: 2px solid;
  border-top: 2px solid;
  border-color: color-mix(in srgb, var(--color-accent) 70%, transparent);
}

.cs-glass-plane__corner--br {
  inset-inline-end: -1px;
  bottom: -1px;
  border-inline-end: 2px solid;
  border-bottom: 2px solid;
  border-color: color-mix(in srgb, var(--color-accent) 70%, transparent);
}

.cs-glass-plane__marker {
  position: absolute;
  bottom: 0.75rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  height: 10px;
  width: 10px;
  background: var(--color-accent);
  filter: drop-shadow(0 0 3px var(--color-accent));
  animation: ringPulse 3s ease-in-out infinite;
}

/* --- Methodology index (5-col) --- */
.cs-methodology {
  display: grid;
  border-top: 1px solid var(--color-hairline);
}

.cs-methodology__item {
  border-bottom: 1px solid var(--color-hairline);
  padding-block: 1.75rem;
  padding-inline-end: 1.5rem;
}

.cs-methodology__title {
  margin-top: 0.75rem;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.cs-methodology__desc {
  margin-top: 0.5rem;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-muted);
}

/* --- Offensive Security (tile grid) --- */
.cs-tile-grid {
  display: grid;
  gap: 1px;
  overflow: hidden;
  background: var(--color-hairline);
}

.cs-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  background: var(--color-surface);
  padding: 1.5rem;
}

.cs-tile__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cs-tile__index {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-faint);
}

.cs-tile__label {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

/* --- Threat & Response (paired statement) --- */
.cs-threat {
  position: relative;
  display: grid;
  align-items: center;
  gap: 2.5rem;
}

.cs-threat__statement {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.cs-threat__connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 1.5rem;
}

.cs-threat__connector-line {
  height: 1px;
  width: 3.5rem;
  background: var(--color-hairline-strong);
}

.cs-threat__connector-mark {
  margin-inline: 0.5rem;
  height: 1rem;
  width: 0.5rem;
  flex-shrink: 0;
  background: var(--color-accent);
}

/* --- Security Governance (REF list, on-light) --- */
.cs-governance {
  border-top: 1px solid var(--color-hairline);
  max-width: var(--container-3xl);
}

.cs-governance__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-bottom: 1px solid var(--color-hairline);
  padding-block: 2rem;
}

.cs-governance__label {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.cs-governance__ref {
  font-family: var(--font-display);
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-faint);
}

/* --- Security Architecture (4 distinct layer treatments) --- */
.cs-layer {
  padding-block: 2.5rem;
}

.cs-layer + .cs-layer {
  border-top: 1px solid var(--color-hairline);
}

.cs-layer__title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

/* Network — boundary line + waypoints */
.cs-layer--network .cs-layer__line {
  height: 1px;
  width: 100%;
  transform-origin: left;
  background: var(--color-hairline-strong);
  margin-top: 2rem;
}

html[dir="rtl"] .cs-layer--network .cs-layer__line {
  transform-origin: right;
}

.cs-layer--network .cs-layer__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
  padding-top: 1.5rem;
}

.cs-waypoint {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: -1.5rem;
}

.cs-waypoint__tick {
  height: 0.75rem;
  width: 1px;
  background: var(--color-accent);
}

.cs-waypoint__label {
  font-size: 13.5px;
  font-weight: 500;
  color: color-mix(in srgb, var(--color-ink) 85%, transparent);
}

/* Endpoint — tight typographic row */
.cs-layer--endpoint .cs-layer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin-top: 1.5rem;
}

.cs-endpoint-item {
  font-family: var(--font-display);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.cs-endpoint-item__index {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-faint);
}

/* Identity — controlled reveal reappears here */
.cs-layer--identity .cs-layer__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1.5rem;
}

.cs-identity-item {
  font-size: 14px;
  font-weight: 500;
  color: color-mix(in srgb, var(--color-ink) 85%, transparent);
}

/* Monitoring — precise still index, CCTV folded in with a frame-corner motif */
.cs-layer--monitoring .cs-layer__grid {
  display: grid;
  gap: 0 2.5rem;
  margin-top: 1.5rem;
}

.cs-monitor-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--color-hairline);
  padding-block: 0.75rem;
}

.cs-monitor-row__dot {
  height: 6px;
  width: 6px;
  flex-shrink: 0;
  background: var(--color-faint);
}

.cs-monitor-row__frame {
  position: relative;
  height: 12px;
  width: 12px;
  flex-shrink: 0;
}

.cs-monitor-row__frame span {
  position: absolute;
  height: 6px;
  width: 6px;
  border-color: var(--color-accent);
}

.cs-monitor-row__frame span:first-child {
  top: 0;
  inset-inline-start: 0;
  border-inline-start: 1px solid;
  border-top: 1px solid;
}

.cs-monitor-row__frame span:last-child {
  bottom: 0;
  inset-inline-end: 0;
  border-inline-end: 1px solid;
  border-bottom: 1px solid;
}

.cs-monitor-row__label {
  font-size: 13.5px;
  color: color-mix(in srgb, var(--color-ink) 85%, transparent);
}

@media (min-width: 640px) {
  .cs-hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .cs-methodology {
    grid-template-columns: repeat(5, 1fr);
  }

  .cs-methodology__item {
    border-bottom: 0;
    border-inline-end: 1px solid var(--color-hairline);
  }

  .cs-tile-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cs-threat {
    grid-template-columns: 1fr auto 1fr;
  }

  .cs-threat__statement--first {
    text-align: end;
  }

  .cs-layer--network .cs-layer__grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .cs-layer--identity .cs-layer__grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .cs-layer--monitoring .cs-layer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* =================================================================
   SERVICE 03 — AI & DATA ANALYTICS
   Signature: THE AI MODEL CHAMBER · Intelligence Pipeline
   ================================================================= */
.ai-hero {
  position: relative;
  overflow: hidden;
  padding-bottom: 4rem;
  padding-top: 10rem;
}

.ai-hero__grid {
  display: grid;
  align-items: center;
  gap: 3.5rem;
}

.ai-hero__title {
  font-size: clamp(34px, 5.4vw, 60px);
}

.ai-chamber {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 620px;
}

.ai-chamber__ambient {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 38%, rgba(123, 13, 18, 0.1) 0%, transparent 55%);
}

.ai-chamber__floor-glow {
  pointer-events: none;
  position: absolute;
  inset-inline: 10%;
  bottom: 6%;
  height: 16%;
  border-radius: 50%;
  filter: blur(24px);
  background: radial-gradient(closest-side, rgba(215, 25, 32, 0.16), transparent 75%);
}

.ai-chamber__sources {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: flex;
  width: 16%;
  flex-direction: column;
  justify-content: space-between;
  padding-block: 10%;
}

.ai-source {
  display: flex;
  aspect-ratio: 4 / 5;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), transparent);
  color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(1px);
  animation: ringPulse 6s ease-in-out infinite;
}

.ai-chamber__svg {
  pointer-events: none;
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  overflow: visible;
}

.ai-stream-signal {
  pointer-events: none;
  position: absolute;
  height: 5px;
  width: 5px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  offset-path: var(--stream-path);
  animation: offsetTravel var(--stream-dur, 6s) linear infinite;
}

.ai-chamber__box {
  position: absolute;
  inset-inline: 26%;
  top: 8%;
  height: 84%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), transparent, rgba(255, 255, 255, 0.02));
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(1px);
  animation: aiChamberBreathe 30s ease-in-out infinite;
}

@keyframes aiChamberBreathe {
  0%,
  100% {
    transform: rotate(-3deg) scale(1);
  }
  50% {
    transform: rotate(3deg) scale(1.015);
  }
}

.ai-chamber__edge {
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: color-mix(in srgb, var(--color-accent) 70%, transparent);
  box-shadow: 0 0 8px var(--color-accent);
}

.ai-chamber__edge--top {
  top: 0;
}

.ai-chamber__edge--bottom {
  bottom: 0;
}

.ai-model-svg {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  overflow: visible;
}

.ai-model-core {
  animation: ringPulse 8s ease-in-out infinite;
}

.ai-chamber__labels {
  position: absolute;
  bottom: 1rem;
  inset-inline-start: 50%;
  display: flex;
  transform: translateX(-50%);
  gap: 0.75rem;
}

html[dir="rtl"] .ai-chamber__labels {
  transform: translateX(50%);
}

.ai-chamber__label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ai-chamber__label-dot {
  height: 4px;
  width: 4px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.25);
}

.ai-chamber__label:first-child .ai-chamber__label-dot {
  background: var(--color-accent);
}

.ai-chamber__label-text {
  font-family: var(--font-display);
  white-space: nowrap;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.4);
}

.ai-chamber__outputs {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: flex;
  width: 20%;
  flex-direction: column;
  justify-content: center;
  gap: 8%;
}

.ai-output {
  display: flex;
  aspect-ratio: 4 / 5;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), transparent);
  padding: 0.5rem;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(1px);
  animation: ringPulse 5s ease-in-out infinite;
}

.ai-output__icon {
  height: 1.5rem;
  width: 100%;
  color: rgba(255, 255, 255, 0.5);
}

.ai-output__label {
  font-family: var(--font-display);
  font-size: 7.5px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.45);
}

/* --- Capabilities (3 distinct treatments) --- */
.ai-capability {
  display: grid;
  align-items: center;
  gap: 2rem;
}

.ai-capability__index {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-faint);
}

.ai-capability__title {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.ai-capability--end {
  text-align: end;
}

.ai-capability__mark {
  height: 7rem;
  width: 100%;
  max-width: 220px;
}

.ai-nlp-words {
  margin-top: 2rem;
  max-width: var(--container-3xl);
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.ai-nlp-word {
  color: color-mix(in srgb, var(--color-ink) 60%, transparent);
}

.ai-nlp-word--accent {
  color: var(--color-accent);
}

.ai-nlp-sep {
  color: color-mix(in srgb, var(--color-ink) 30%, transparent);
}

/* --- Intelligence Pipeline --- */
.ai-pipeline {
  border-top: 1px solid var(--color-hairline);
  background: var(--color-surface-2);
}

.ai-pipeline__strip {
  position: relative;
  display: none;
  margin-top: 3.5rem;
}

.ai-pipeline__strip-line {
  position: absolute;
  inset-inline: 0;
  top: 7px;
  height: 1px;
  background: var(--color-hairline);
}

.ai-pipeline__marker {
  position: absolute;
  top: 0;
  height: 15px;
  width: 3px;
  transform: translateX(-50%);
  background: var(--color-accent);
  left: 0%;
}

.ai-pipeline__ticks {
  display: flex;
}

.ai-pipeline__tick {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.ai-pipeline__tick-line {
  height: 0.5rem;
  width: 1px;
  background: var(--color-hairline-strong);
}

.ai-pipeline__tick-index {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-faint);
}

.ai-pipeline__content {
  display: grid;
  gap: 2.5rem 2.5rem;
  border-top: 1px solid var(--color-hairline);
  padding-top: 2.5rem;
  margin-top: 3.5rem;
}

.ai-pipeline__step-number {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent);
}

.ai-pipeline__step-title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.ai-pipeline__step-desc {
  margin-top: 0.5rem;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-muted);
}

/* --- Frameworks (inline row) --- */
.ai-frameworks {
  border-top: 1px solid var(--color-hairline);
  background: var(--color-surface-2);
}

.ai-frameworks__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem 1rem;
}

.ai-frameworks__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
}

.ai-frameworks__item {
  font-size: 13.5px;
  font-weight: 500;
  color: color-mix(in srgb, var(--color-ink) 75%, transparent);
}

@media (min-width: 640px) {
  .ai-hero__grid {
    grid-template-columns: 0.95fr 1.05fr;
  }

  .ai-capability--pattern {
    grid-template-columns: auto 1fr;
    gap: 4rem;
  }

  .ai-capability--synthesis {
    grid-template-columns: 1fr auto;
    gap: 4rem;
  }

  .ai-pipeline__strip {
    display: block;
  }

  .ai-pipeline__content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .ai-pipeline__content {
    grid-template-columns: repeat(3, 1fr);
  }

  .ai-pipeline__content > :nth-child(3n + 2) {
    margin-top: 2.5rem;
  }
}

/* =================================================================
   SERVICE 04 — CONFERENCES & CELEBRATIONS
   Signature: THE EMPTY STAGE + THE REVEAL · live auditorium environment
   reused across Hero/Experience · CONCEPT -> EXPERIENCE -> PRODUCTION
   -> EXECUTION journey
   ================================================================= */
.ce-hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: var(--color-void);
}

.ce-hero__stage-wrap {
  position: absolute;
  inset: 0;
}

.ce-hero__horizon {
  position: absolute;
  inset-inline: 0;
  top: 63%;
  height: 1px;
  background: var(--color-hairline-strong);
}

.ce-hero__glow {
  position: absolute;
  left: 50%;
  top: 63%;
  height: 300px;
  width: 300px;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-pill);
  background: var(--color-accent-glow);
  filter: blur(48px);
  opacity: 0.55;
  animation: ceGlowReveal 1.4s var(--ease-editorial) forwards;
}

@keyframes ceGlowReveal {
  to {
    opacity: 1;
  }
}

.ce-hero__beam {
  position: absolute;
  left: 50%;
  top: 63%;
  height: 5rem;
  width: 1px;
  transform: translate(-50%, -50%);
  background: color-mix(in srgb, var(--color-accent) 70%, transparent);
}

.ce-hero__mask {
  position: absolute;
  inset-inline: 0;
  height: 37%;
  background: var(--color-void);
  transition: transform 1.1s var(--ease-editorial);
}

.ce-hero__mask--top {
  top: 0;
  transform: translateY(0);
}

.ce-hero__mask--bottom {
  bottom: 0;
  transform: translateY(0);
}

.ce-hero.is-revealed .ce-hero__mask--top {
  transform: translateY(-100%);
}

.ce-hero.is-revealed .ce-hero__mask--bottom {
  transform: translateY(100%);
}

@media (prefers-reduced-motion: reduce) {
  .ce-hero__mask {
    display: none;
  }
}

.ce-hero__content {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  padding-top: 6rem;
}

.ce-hero__title {
  margin-top: 1.5rem;
  max-width: var(--container-3xl);
  font-size: clamp(38px, 7vw, 84px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

/* --- Auditorium scene (reused wide/close) --- */
.ce-auditorium {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 1400px;
  background: linear-gradient(180deg, #07111a 0%, #0b1721 55%, #0d1a24 100%);
}

.ce-auditorium__ambient {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 45% at 50% 30%, rgba(123, 13, 18, 0.14) 0%, transparent 70%);
}

.ce-auditorium__floor-glow {
  pointer-events: none;
  position: absolute;
  inset-inline: 8%;
  bottom: 4%;
  height: 20%;
  border-radius: 50%;
  filter: blur(24px);
  background: radial-gradient(closest-side, rgba(215, 25, 32, 0.16), transparent 75%);
}

.ce-rig {
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 34%;
  overflow: visible;
}

.ce-rig__arc {
  animation: ceArcTravel 26s linear infinite;
  filter: drop-shadow(0 0 3px var(--color-accent));
}

@keyframes ceArcTravel {
  to {
    stroke-dashoffset: -130;
  }
}

.ce-rig__spot {
  animation: ringPulse 8s ease-in-out infinite;
}

.ce-stage-planes {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.ce-plane {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02), transparent);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(1px);
}

.ce-plane__texture {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image: radial-gradient(rgba(241, 239, 234, 0.5) 0.5px, transparent 0.5px);
  background-size: 6px 6px;
  mask-image: radial-gradient(120% 90% at 50% 30%, black 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, black 40%, transparent 85%);
}

.ce-plane__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 20%, rgba(215, 25, 32, 0.35), transparent 70%);
  animation: ringPulse 9s ease-in-out infinite;
}

.ce-plane__edge {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: color-mix(in srgb, var(--color-accent) 60%, transparent);
  box-shadow: 0 0 6px var(--color-accent);
}

.ce-red-path-signal {
  pointer-events: none;
  position: absolute;
  height: 6px;
  width: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  offset-path: var(--red-path);
  animation: offsetTravel 9s ease-in-out infinite;
}

.ce-seating {
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 26%;
  overflow: hidden;
}

.ce-seating__row {
  position: absolute;
  inset-inline: 0;
  display: flex;
  justify-content: center;
  gap: 1.4%;
}

.ce-seat {
  height: 0.5rem;
  width: 2.4%;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.1);
}

/* --- Journey chapters --- */
.ce-concept {
  position: relative;
  border-top: 1px solid var(--color-hairline);
  background: var(--color-void);
  padding-block: 7rem;
}

.ce-concept__marker {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ce-concept__dot {
  height: 8px;
  width: 8px;
  flex-shrink: 0;
  background: var(--color-accent);
}

.ce-concept__title {
  margin-top: 2rem;
  max-width: var(--container-2xl);
  font-size: clamp(40px, 6.5vw, 84px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.ce-concept__rule {
  margin-top: 2.5rem;
  height: 1px;
  width: 7rem;
  background: var(--color-hairline-strong);
}

.ce-concept__desc {
  margin-top: 2rem;
  max-width: var(--container-md);
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-muted);
}

.ce-experience {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--color-hairline);
  background: var(--color-void);
  padding-block: 7rem;
}

.ce-experience__watermark {
  pointer-events: none;
  position: absolute;
  inset-inline-start: -1rem;
  top: 2.5rem;
  font-size: 30vw;
  font-weight: 900;
  line-height: 1;
  color: color-mix(in srgb, var(--color-ink) 3%, transparent);
}

.ce-experience__grid {
  position: relative;
  display: grid;
  align-items: center;
  gap: 3.5rem;
}

.ce-experience__title {
  margin-top: 1rem;
  max-width: var(--container-md);
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.ce-experience__desc {
  margin-top: 1.5rem;
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-muted);
}

.ce-stage-detail {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  border: 1px solid var(--color-hairline-strong);
}

.ce-production {
  padding-block: 6rem;
}

.ce-production__desc {
  margin-top: 2rem;
  max-width: var(--container-xl);
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-muted);
}

.ce-production__list {
  margin-top: 3rem;
  max-width: var(--container-2xl);
  border-top: 1px solid var(--color-hairline);
}

.ce-production__row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  border-bottom: 1px solid var(--color-hairline);
  padding-block: 1.75rem;
}

.ce-production__dot {
  height: 6px;
  width: 6px;
  flex-shrink: 0;
  background: var(--color-accent);
}

.ce-production__label {
  flex: 1;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.ce-production__ref {
  font-family: var(--font-display);
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-faint);
}

/* --- Execution: the one full-bleed red chapter --- */
.ce-execution {
  position: relative;
  overflow: hidden;
  background: var(--color-accent);
  padding-block: 7rem;
}

.ce-execution__inner {
  position: relative;
  padding-inline: 1.5rem;
}

.ce-execution__number {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}

.ce-execution__title {
  margin-top: 1.5rem;
  max-width: var(--container-5xl);
  font-size: clamp(48px, 9vw, 120px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: #fff;
}

.ce-execution__desc {
  margin-top: 2rem;
  max-width: var(--container-xl);
  font-size: 16px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.8);
}

.ce-execution__list {
  margin-top: 3.5rem;
  display: grid;
  max-width: var(--container-2xl);
  gap: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 2.5rem;
}

.ce-execution__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.ce-execution__item-index {
  font-family: var(--font-display);
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
}

.ce-execution__item-label {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
}

/* --- Capabilities (full deliverables, chapter-tagged) --- */
.ce-capabilities-list {
  border-top: 1px solid var(--color-hairline);
}

.ce-capability-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-bottom: 1px solid var(--color-hairline);
  padding-block: 2rem;
}

.ce-capability-row--reversed {
  align-items: flex-end;
  text-align: end;
}

.ce-capability-row__index {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-faint);
}

.ce-capability-row__label {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.ce-capability-row__chapter {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-faint);
}

@media (min-width: 640px) {
  .ce-hero {
    height: 112vh;
  }

  .ce-production__row,
  .ce-execution__item,
  .ce-capability-row {
    flex-direction: row;
    align-items: center;
  }

  .ce-capability-row {
    gap: 2.5rem;
  }

  .ce-capability-row--reversed {
    flex-direction: row-reverse;
  }

  .ce-experience__grid {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .ce-execution__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .ce-execution__inner {
    padding-inline: 5rem;
  }
}

/* =================================================================
   SERVICE PAGES — remaining shared primitives (generic section
   wrapper, framework grid, numbered-list size/column modifiers,
   objectives layout variants, and the shared closing CTA banner
   used by all six services).
   ================================================================= */
.svc-section {
  border-top: 1px solid var(--color-hairline);
  padding-block: 5rem;
}

.svc-section--surface {
  background: var(--color-surface);
}

.framework-grid {
  border-top: 1px solid var(--color-hairline);
}

.framework-grid--3col {
  column-count: 1;
}

.numbered-list__row--lg {
  padding-block: 1.75rem;
}

.numbered-list__index--lg {
  font-size: 1.75rem;
}

.numbered-list__text--body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--color-ink) 90%, transparent);
}

.numbered-list__text--sm {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--color-ink) 90%, transparent);
  max-width: var(--container-sm);
}

.numbered-list__text--lead {
  font-size: clamp(24px, 3.6vw, 40px);
  font-weight: 600;
  line-height: 1.2;
}

.numbered-list__text--muted {
  font-size: clamp(17px, 2vw, 20px);
  color: color-mix(in srgb, var(--color-ink) 80%, transparent);
}

.numbered-list__row--span2 {
  grid-column: 1 / -1;
}

.numbered-list__row--offset {
  padding-inline-start: 0;
}

.numbered-list--2col {
  display: grid;
  border-top: 1px solid var(--color-hairline);
}

.numbered-list--2col .numbered-list__row {
  border-top: none;
}

.objectives-grid-2col {
  display: grid;
  gap: 2rem;
}

.objectives-stack {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: var(--container-3xl);
}

.ai-capability-stack {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.cs-data-grid {
  display: grid;
  gap: 2rem 3rem;
}

.cs-inspection-mark {
  height: 1rem;
  width: 1rem;
}

/* --- Shared closing CTA (ServiceCTA.tsx) --- */
.svc-cta {
  padding-block: 5rem;
}

.svc-cta__panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-accent);
  padding: 3.5rem 2rem;
}

.svc-cta__watermark {
  pointer-events: none;
  position: absolute;
  bottom: -3.5rem;
  inset-inline-end: -2%;
  font-family: var(--font-display);
  font-size: 180px;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.1);
}

.svc-cta__inner {
  position: relative;
  max-width: var(--container-xl);
}

.svc-cta__title {
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
}

.svc-cta__button {
  margin-top: 2rem;
}

.svc-cta__next {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-hairline);
  padding-top: 2rem;
  transition: color var(--duration-base) ease;
}

.svc-cta__next-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-faint);
}

.svc-cta__next-title {
  margin-top: 0.5rem;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  transition: color var(--duration-base) ease;
}

.svc-cta__next:hover .svc-cta__next-title {
  color: var(--color-accent);
}

.svc-cta__next-arrow {
  font-size: 1.5rem;
  color: var(--color-faint);
  transition: all var(--duration-base) ease;
}

.svc-cta__next:hover .svc-cta__next-arrow {
  color: var(--color-accent);
  transform: translate(4px, -4px);
}

html[dir="rtl"] .svc-cta__next:hover .svc-cta__next-arrow {
  transform: translate(-4px, -4px);
}

@media (min-width: 640px) {
  .svc-section {
    padding-block: 6.5rem;
  }

  .svc-cta__panel {
    padding: 4rem 3.5rem;
  }

  .framework-grid--3col {
    column-count: 2;
  }

  .numbered-list--2col {
    grid-template-columns: repeat(2, 1fr);
  }

  .numbered-list--2col .numbered-list__row--offset {
    padding-inline-start: 2.5rem;
  }

  .objectives-grid-2col {
    grid-template-columns: repeat(2, 1fr);
  }

  .cs-data-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .framework-grid--3col {
    column-count: 3;
  }

  .cs-data-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =================================================================
   PHASE 4 — CORPORATE PAGES (About / Services Index / Partners /
   Contact). Ported from app/[locale]/{about,services,partners,
   contact}/page.tsx + components/contact/ContactForm.tsx.
   ================================================================= */

/* Shared simple hero (About / Services Index / Partners / Contact
   all use a lighter version of the service-hero pattern: eyebrow +
   title, no cinematic scene). */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-bottom: 4rem;
  padding-top: 10rem;
}

.page-hero__bg {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.page-hero__eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-accent);
}

.page-hero__title {
  margin-top: 1.25rem;
  max-width: var(--container-3xl);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.page-hero__body {
  margin-top: 1.5rem;
  max-width: var(--container-xl);
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--color-muted);
}

/* --- About ---
   V2 Phase 3 (supervisor refinement): chapter rhythm and readability.
   --about-chapter replaces the former flat 5rem section padding with
   a responsive value (5.5rem on phones -> ~7.3rem at 1440px), and
   --about-inner widens heading-to-content spacing in step. Text uses
   a 4-tier hierarchy: primary (ink), secondary body (ink ~80%),
   quiet-but-readable meta (muted, >=7:1), decorative-only (faint). */
.about-hero,
.about-triple,
.about-approach,
.about-pillars,
.about-context {
  --about-chapter: clamp(5.5rem, 3.25rem + 4.5vw, 8.5rem);
  --about-inner: clamp(2.5rem, 2rem + 1.25vw, 3.5rem);
}

.about-hero {
  padding-bottom: clamp(4rem, 2.5rem + 3vw, 5.5rem);
}

.about-hero__bg {
  background: radial-gradient(circle at 20% 25%, rgba(123, 13, 18, 0.24) 0%, #121212 35%, #080808 70%);
}

.about-triple {
  border-top: 1px solid var(--color-hairline);
  /* top stays compact: the section rule + grid rule would otherwise
     frame an empty band; the added breathing room goes below, where
     the chapter hands over to How We Work */
  padding-top: clamp(3rem, 2.25rem + 2vw, 4.5rem);
  padding-bottom: var(--about-chapter);
}

.about-triple__grid {
  display: grid;
  gap: var(--about-inner);
  border-top: 1px solid var(--color-hairline);
  padding-top: var(--about-inner);
}

.about-triple__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-accent);
}

.about-triple__body {
  margin-top: 1rem;
  font-size: 16px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--color-ink) 85%, transparent);
}

.about-approach {
  border-top: 1px solid var(--color-hairline);
  background: var(--color-surface);
  padding-block: var(--about-chapter);
}

.about-approach__grid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 1.5vw, 3rem);
}

.about-approach__title {
  max-width: var(--container-sm);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.about-approach__body {
  max-width: var(--container-2xl);
  font-size: 17px;
  line-height: 1.85;
  color: color-mix(in srgb, var(--color-ink) 82%, transparent);
}

.about-pillars {
  border-top: 1px solid var(--color-hairline);
  padding-block: var(--about-chapter);
}

.about-pillars__title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.about-pillars__grid {
  margin-top: var(--about-inner);
  display: grid;
  gap: var(--about-inner);
  border-top: 1px solid var(--color-hairline);
  padding-top: var(--about-inner);
}

.about-pillar__index {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-muted);
}

.about-pillar__title {
  margin-top: 1rem;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.about-pillar__body {
  margin-top: 0.75rem;
  font-size: 15px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--color-ink) 74%, transparent);
}

.about-context {
  border-top: 1px solid var(--color-hairline);
  background: var(--color-surface);
  padding-block: var(--about-chapter);
}

.about-context__title {
  max-width: var(--container-2xl);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.about-context__body {
  margin-top: 1.25rem;
  max-width: var(--container-2xl);
  font-size: 16px;
  line-height: 1.85;
  color: color-mix(in srgb, var(--color-ink) 78%, transparent);
}

.about-context__legal {
  margin-top: 1.5rem;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-muted);
}

/* Arabic: Cairo glyphs join, so the Latin micro-label tracking/uppercase
   is removed and sizes/weights are raised for clarity. */
html[lang="ar"] .about-hero .page-hero__eyebrow,
html[lang="ar"] .about-triple__label {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

html[lang="ar"] .about-triple__body,
html[lang="ar"] .about-pillar__body,
html[lang="ar"] .about-context__body {
  font-weight: 500;
  line-height: 1.9;
}

html[lang="ar"] .about-approach__body {
  font-size: 17.5px;
  font-weight: 500;
  line-height: 2;
}

html[lang="ar"] .about-approach__title,
html[lang="ar"] .about-pillars__title,
html[lang="ar"] .about-context__title {
  letter-spacing: 0;
  line-height: 1.35;
}

@media (min-width: 640px) {
  .about-triple__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .about-pillars__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .about-approach__grid {
    grid-template-columns: 0.6fr 1.4fr;
  }
}

/* --- Services Index --- */
.services-index-list {
  margin-top: 4rem;
  border-top: 1px solid var(--color-hairline);
}

.services-index-row {
  position: relative;
  display: grid;
  grid-template-columns: 50px 1fr 28px;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
  border-bottom: 1px solid var(--color-hairline);
  padding-block: 2rem;
  transition: padding var(--duration-base) ease;
}

.services-index-row:hover {
  padding-inline: 1rem;
}

.services-index-row__bar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  transform: translateX(-100%);
  background: var(--color-accent);
  transition: transform var(--duration-base) ease;
}

html[dir="rtl"] .services-index-row__bar {
  transform: translateX(100%);
}

.services-index-row:hover .services-index-row__bar {
  transform: translateX(0);
}

.services-index-row__number {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-faint);
}

.services-index-row__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  transition: color var(--duration-base) ease;
}

.services-index-row:hover .services-index-row__title {
  color: var(--color-accent);
}

.services-index-row__keywords {
  margin-top: 0.5rem;
  max-width: var(--container-lg);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-faint);
  transition: color var(--duration-base) ease;
}

.services-index-row:hover .services-index-row__keywords {
  color: var(--color-muted);
}

.services-index-row__keywords--inline {
  display: none;
}

.services-index-row__arrow {
  justify-self: end;
  font-size: 1.5rem;
  color: var(--color-faint);
  transition: all var(--duration-base) ease;
}

.services-index-row:hover .services-index-row__arrow {
  color: var(--color-accent);
  transform: translate(4px, -4px);
}

html[dir="rtl"] .services-index-row:hover .services-index-row__arrow {
  transform: translate(-4px, -4px);
}

@media (min-width: 640px) {
  .services-index-row {
    grid-template-columns: 70px 1fr 1fr 32px;
    gap: 1.5rem;
  }

  .services-index-row__keywords {
    display: none;
  }

  .services-index-row__keywords--inline {
    display: block;
    margin-top: 0;
  }
}

/* --- Partners --- */
.partners-grid {
  margin-top: 0;
  display: grid;
  gap: 1px;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-hairline);
  background: var(--color-hairline);
}

.partner-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  background: var(--color-surface);
  padding: 1.75rem;
}

.partner-card__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-faint);
}

.partner-card__name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.partner-card__domain {
  margin-top: 0.5rem;
  font-size: 12.5px;
  color: var(--color-muted);
}

.partners-note {
  margin-top: 2rem;
  font-size: 12px;
  color: var(--color-faint);
}

@media (min-width: 640px) {
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* --- Contact --- */
.contact-layout {
  display: grid;
  gap: 4rem;
}

.contact-info {
  margin-top: 3rem;
  border-top: 1px solid var(--color-hairline);
  padding-top: 2rem;
}

.contact-info__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-faint);
}

.contact-info__value {
  margin-top: 0.75rem;
  font-size: 15px;
  color: color-mix(in srgb, var(--color-ink) 85%, transparent);
}

.contact-form-panel {
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-hairline);
  background: var(--color-surface);
  padding: 2rem;
}

.contact-form__row {
  display: grid;
  gap: 1.5rem;
}

.contact-form__row + .contact-form__row,
.contact-form__field + .contact-form__field {
  margin-top: 1.5rem;
}

.contact-form__label {
  margin-bottom: 0.5rem;
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}

.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-hairline-strong);
  background: var(--color-surface);
  padding: 0.875rem 1rem;
  font-size: 14px;
  color: var(--color-ink);
  outline: none;
  transition: border-color var(--duration-base) ease;
}

.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
  border-color: var(--color-accent);
}

.contact-form__input[aria-invalid="true"],
.contact-form__select[aria-invalid="true"],
.contact-form__textarea[aria-invalid="true"] {
  border-color: var(--color-accent);
}

.contact-form__textarea {
  resize: none;
}

.contact-form__error {
  margin-top: 0.375rem;
  font-size: 12px;
  color: var(--color-accent);
  display: none;
}

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

.contact-form__honeypot {
  position: absolute;
  height: 0;
  width: 0;
  overflow: hidden;
  inset-inline-start: -9999px;
}

.contact-form__status {
  font-size: 13.5px;
  display: none;
}

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

.contact-form__status--error {
  color: var(--color-accent);
}

.contact-form__status--success {
  color: #34d399;
}

.contact-form__submit {
  margin-top: 1.5rem;
}

@media (min-width: 640px) {
  .contact-form__row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .contact-layout {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

/* --- Contact · Location (V2 Phase 4) ---
   Verified Google Maps embed (built only from the place query Google
   itself returns for the client-supplied link — no coordinates are
   authored here) inside a DAL midnight frame. The abstract grid/pin
   panel underneath shows while the map loads, and remains if it
   cannot load; the supplied Maps link stays the canonical CTA. */
.contact-location {
  border-top: 1px solid var(--color-hairline);
  padding-block: clamp(4.5rem, 3rem + 4vw, 7.5rem);
}

.contact-location__grid {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.contact-location__title {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}

.contact-location__value {
  margin-top: 1.5rem;
  border-top: 1px solid var(--color-hairline);
  padding-top: 1.5rem;
  font-size: 17px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-ink) 88%, transparent);
}

.contact-location__cta {
  margin-top: 2rem;
  min-height: 48px;
  gap: 0.6rem;
}

.contact-location__cta-icon {
  display: inline-block;
  transition: transform var(--duration-base) var(--ease-editorial);
}

.contact-location__cta:hover .contact-location__cta-icon {
  transform: translate(2px, -2px);
}

.contact-map {
  position: relative;
  margin: 0;
  isolation: isolate;
  aspect-ratio: 4 / 3;
}

/* the clipped map surface; registration marks sit outside it so they
   never cover Google's controls or attribution */
.contact-map__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-xl);
  background: var(--color-surface-2);
  box-shadow: var(--shadow-panel);
}

/* keyboard focus inside the map iframe (the iframe itself cannot show
   :focus-visible) — same red ring language as the global focus style */
.contact-map__viewport:focus-within {
  box-shadow:
    0 0 0 2px var(--color-accent),
    var(--shadow-panel);
}

/* inner edge: a hairline + soft midnight vignette so the map sits
   inside the frame rather than on top of it */
.contact-map__viewport::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 0 70px rgba(7, 17, 26, 0.45);
}

.contact-map__frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
  border: 0;
  filter: grayscale(0.3) contrast(1.02) brightness(0.96);
  transition: opacity 0.9s var(--ease-editorial);
}

.contact-map.is-pending .contact-map__frame {
  opacity: 0;
}

.contact-map.is-unavailable .contact-map__frame {
  visibility: hidden;
}

/* abstract location field (loading / fallback state) */
.contact-map__fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(215, 25, 32, 0.12) 0%, transparent 38%),
    repeating-linear-gradient(0deg, rgba(241, 239, 234, 0.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(241, 239, 234, 0.05) 0 1px, transparent 1px 40px),
    var(--color-surface-2);
}

.contact-map__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 10px;
  width: 10px;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(215, 25, 32, 0.18);
}

.contact-map__pin::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: inherit;
  border: 1px solid rgba(215, 25, 32, 0.45);
  opacity: 0;
}

/* slow marker pulse only while the map is loading — no idle loop once
   the embed is showing */
.contact-map.is-pending .contact-map__pin::before {
  animation: contactPinPulse 3.2s ease-out infinite;
}

@keyframes contactPinPulse {
  0% { opacity: 0.8; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* DAL-red architectural registration marks */
.contact-map__mark {
  pointer-events: none;
  position: absolute;
  z-index: 3;
  height: 18px;
  width: 18px;
  border: 0 solid var(--color-accent);
}

.contact-map__mark--start {
  top: -9px;
  inset-inline-start: -9px;
  border-top-width: 1.5px;
  border-inline-start-width: 1.5px;
}

.contact-map__mark--end {
  bottom: -9px;
  inset-inline-end: -9px;
  border-bottom-width: 1.5px;
  border-inline-end-width: 1.5px;
}

html[lang="ar"] .contact-location__title {
  letter-spacing: 0;
  line-height: 1.35;
}

html[lang="ar"] .contact-location__value {
  font-weight: 500;
}

@media (min-width: 640px) {
  .contact-map {
    aspect-ratio: 16 / 10;
  }
}

@media (min-width: 1024px) {
  .contact-location__grid {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
    gap: 4rem;
  }

  /* explicit height instead of a ratio here, so the frame never
     forces its column wider than the grid track */
  .contact-map {
    aspect-ratio: auto;
    height: clamp(400px, 34vw, 520px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-map.is-pending .contact-map__pin::before {
    animation: none;
  }

  .contact-map__frame,
  .contact-location__cta-icon {
    transition: none;
  }
}