/* ============================================
   ORYN — Design Tokens
   ============================================ */
:root {
  --color-primary: #111111;
  --color-secondary: #0c091e;
  --color-accent: #cf4520;
  --color-cream: #f2f2e7;
  --color-white: #ffffff;
  --color-gray-100: #e5e5e0;
  --color-gray-200: #c9c9c0;
  --color-gray-300: #a3a39a;
  --color-gray-500: #6b6b63;
  --color-gray-700: #3a3a35;
  --color-gray-900: #1a1a17;

  --font-heading: 'Bodoni Moda', 'Georgia', serif;
  --font-body: 'Jost', 'Helvetica Neue', sans-serif;

  --z-preloader: 9999;
  --z-cursor: 9995;
  --z-navbar: 100;
  --z-mobile-menu: 90;
  --z-hero-content: 10;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  --navbar-height: 80px;
  --section-padding: clamp(80px, 12vw, 160px);
  --container-width: 1280px;
  --container-padding: clamp(20px, 5vw, 60px);
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* NO scroll-behavior:smooth here — smoothing is Lenis's/JS's job. CSS
     smooth makes even the load-time scroll-to-top glide asynchronously,
     so ScrollTrigger measures its pins mid-glide and every pin corrupts.
     The JS anchor fallback passes behavior:'smooth' explicitly instead. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-cream);
  background-color: var(--color-primary);
  overflow-x: hidden;
}

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

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

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

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

/* ============================================
   SHARED / UTILITY
   ============================================ */
.section-eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 20px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-cream);
  letter-spacing: -0.02em;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 36px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.4s var(--ease-out-expo);
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-white);
  border: 1px solid var(--color-accent);
}

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

.btn--outline {
  background: transparent;
  color: var(--color-cream);
  border: 1px solid var(--color-gray-500);
}

.btn--outline:hover {
  border-color: var(--color-cream);
  color: var(--color-white);
}

.btn--large {
  padding: 20px 52px;
  font-size: 15px;
}

/* ============================================
   PRELOADER
   ============================================ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  background: var(--color-primary);
  transition: opacity 0.6s var(--ease-out-expo), visibility 0.6s;
}

.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__logo {
  width: 140px;
}

.preloader__img {
  width: 100%;
  opacity: 0.9;
}

.preloader__bar {
  width: 160px;
  height: 1px;
  background: var(--color-gray-700);
  overflow: hidden;
}

.preloader__progress {
  width: 0%;
  height: 100%;
  background: var(--color-accent);
  transition: width 0.3s ease;
}

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-navbar);
  height: var(--navbar-height);
  transition: background 0.4s ease, backdrop-filter 0.4s ease;
}

/* Navbar stays fully transparent even when scrolled — the owner didn't want
   the dark bar ("black strip") fading in from the top on scroll. The nav is
   legible without it: links live in their own pill and the logo carries a dark
   drop-shadow halo, all over a uniformly dark site. (This also removes the
   full-width per-frame backdrop re-blur that used to be a scroll-jank source.)
   The .is-scrolled class is kept only to drop the pill's blur once you've
   scrolled past the hero. */
.navbar.is-scrolled .navbar__links {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(242, 242, 231, 0.06);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.navbar__logo {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.navbar__logo-img {
  height: 30px;
  width: auto;
  /* Soft dark halo so the thin cream strokes stay legible over the
     bright hero frames showing through the transparent navbar. */
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55));
  transition: opacity 0.3s ease;
}

.navbar__logo:hover .navbar__logo-img {
  opacity: 0.82;
}

/* Tubelight pill nav — glass capsule with a glowing "lamp" indicator
   that slides to the active section (scroll-spy driven in main.js). */
.navbar__links {
  position: relative;
  display: flex;
  align-items: center;
  list-style: none;
  gap: 2px;
  padding: 5px;
  background: rgba(242, 242, 231, 0.04);
  border: 1px solid rgba(242, 242, 231, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 999px;
}

.navbar__link {
  position: relative;
  z-index: 2;
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-gray-300);
  padding: 9px 22px;
  border-radius: 999px;
  transition: color 0.35s ease;
  cursor: pointer;
}

.navbar__link:hover {
  color: var(--color-cream);
}

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

/* The sliding lamp: a soft pill highlight with a glowing bar on top. */
.navbar__lamp {
  position: absolute;
  top: 5px;
  left: 0;
  height: calc(100% - 10px);
  border-radius: 999px;
  background: rgba(207, 69, 32, 0.08);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: left 0.5s var(--ease-out-expo),
              width 0.5s var(--ease-out-expo),
              opacity 0.3s ease;
}

.navbar__lamp.is-visible {
  opacity: 1;
}

.navbar__lamp::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  background: var(--color-accent);
  border-radius: 0 0 8px 8px;
  box-shadow:
    0 0 16px 3px rgba(207, 69, 32, 0.7),
    0 0 30px 8px rgba(207, 69, 32, 0.45),
    0 0 48px 14px rgba(207, 69, 32, 0.25);
}

.navbar__cta {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 10px 24px;
  border: 1px solid var(--color-gray-500);
  color: var(--color-cream);
  transition: all 0.3s ease;
  cursor: pointer;
}

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

/* --- Language toggle --- */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border: 1px solid var(--color-gray-700);
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--color-gray-500);
  transition: border-color 0.3s ease;
}

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

.lang-toggle__divider {
  color: var(--color-gray-700);
}

.lang-toggle__option {
  transition: color 0.3s ease;
}

/* English active (default): left option lit */
.lang-toggle:not(.is-ar) .lang-toggle__option[data-lang="en"] { color: var(--color-cream); }
.lang-toggle.is-ar .lang-toggle__option[data-lang="ar"] { color: var(--color-accent); }

.lang-toggle--mobile {
  margin: 28px auto 0;
}

.navbar__burger {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  cursor: pointer;
}

.navbar__burger span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--color-cream);
  transition: transform 0.4s var(--ease-out-expo), opacity 0.3s ease;
}

.navbar__burger.is-active span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.navbar__burger.is-active span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* ============================================
   MOBILE MENU
   ============================================ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-menu);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-out-expo), visibility 0.5s;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu__links {
  list-style: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.mobile-menu__link {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 400;
  color: var(--color-cream);
  opacity: 0.7;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.mobile-menu__link:hover {
  opacity: 1;
}

.mobile-menu__link--cta {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: 20px;
}

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__canvas-wrap {
  position: absolute;
  inset: 0;
}

.hero__canvas-wrap canvas {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* Canvas becomes visible once frame 0 is drawn */
.hero.is-ready .hero__canvas-wrap canvas {
  opacity: 1;
}

/* Desktop scroll-scrubbed video (all-intra H.264). Mirrors the canvas: covers
   the wrap, hidden until the video can render, revealed via .is-ready. When the
   video path is active (.hero--video, set in JS on desktop) the canvas is
   dropped so its undrawn (solid-black, alpha:false) buffer can't cover the
   video. On mobile the video is display:none and its src is never set, so the
   14MB file is never fetched there — mobile keeps the canvas frame-sequence. */
.hero__video {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero--video .hero__video {
  display: block;
}

.hero--video .hero__canvas-wrap canvas {
  display: none;
}

.hero--video.is-ready .hero__video {
  opacity: 1;
}

@media (max-width: 768px) {
  .hero__video { display: none !important; }
}

.hero__fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(207, 69, 32, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 30%, rgba(12, 9, 30, 0.6) 0%, transparent 50%),
    linear-gradient(160deg, var(--color-secondary) 0%, var(--color-primary) 40%, #0a0a0a 100%);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  /* Horizontal edge vignette (first layer) feathers the frame's side edges
     into pure black so the source footage's blue nebulae at the far left/
     right don't read as stray artifacts; vertical layer (second) keeps the
     original top/bottom scrim. Sits below the logo/text, so only the video
     edges darken. */
  background:
    linear-gradient(
      to right,
      rgba(6, 5, 11, 0.95) 0%,
      rgba(6, 5, 11, 0) 15%,
      rgba(6, 5, 11, 0) 85%,
      rgba(6, 5, 11, 0.95) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(6, 5, 11, 0.55) 0%,
      rgba(6, 5, 11, 0) 26%,
      rgba(17, 17, 17, 0) 60%,
      rgba(17, 17, 17, 0.8) 100%
    );
  z-index: 2;
}

/* End-state vignette: the source footage has a blue milky-way band baked
   along the top edge that becomes obvious in the bright final frames, on
   wide viewports especially. This extra edge darkening fades in with the
   logo formation (--reveal is set on .hero by JS), hiding the blue band
   exactly when it shows — and tightening focus on the mark. */
.hero__overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: var(--reveal, 0);
  background:
    linear-gradient(to bottom, rgba(6, 5, 11, 0.85) 0%, rgba(6, 5, 11, 0) 30%),
    linear-gradient(to right, rgba(6, 5, 11, 0.7) 0%, rgba(6, 5, 11, 0) 22%),
    linear-gradient(to left, rgba(6, 5, 11, 0.7) 0%, rgba(6, 5, 11, 0) 22%);
}

.hero__content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-hero-content);
  text-align: center;
  width: 100%;
  max-width: 800px;
  padding: 0 var(--container-padding);
}

/* Intro sits slightly above centre (in the darker sky); outro sits lower
   so it never collides with the formed ØRYN logo in the final frames. */
.hero__intro {
  top: 46%;
  transform: translate(-50%, -50%);
}

.hero__outro {
  bottom: 9%;
  opacity: 0;
  /* Owner wants the hero to end on the pure brand film (July 13) — no
     subtitle, no CTAs. Markup + i18n keys kept so this is one line to
     restore. First CTAs a visitor meets are in the sections below. */
  display: none;
}

/* Logo reveal: the ØRYN wordmark forms out of the scene's light near the
   end of the scroll sequence. All motion is JS-driven via custom properties
   (--reveal 0→1, --bloom ignite pulse, --sheen sweep position, --logo-scale)
   set in initHeroSequence, so it scrubs cleanly in both directions. */
.hero__logo-reveal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-hero-content);
  width: min(600px, 62vw);
  opacity: 0;
  pointer-events: none;
}

/* Optical alignment: in the final frames the planet sits a touch left of
   center with its dawn flare on the left limb, so a dead-centered logo
   reads right-shifted. Nudge it left to sit on the planet's visual center.
   Desktop only — the mobile portrait crop is symmetric. */
@media (min-width: 769px) {
  .hero__logo-reveal {
    left: 48.6%;
  }
}

/* Soft radial scrim so the mark has room to breathe over Earth's detail. */
.hero__logo-reveal::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 260%;
  height: 440%;
  z-index: -1;
  pointer-events: none;
  opacity: var(--reveal, 0);
  background: radial-gradient(
    ellipse at center,
    rgba(9, 6, 4, 0.72) 0%,
    rgba(9, 6, 4, 0.34) 44%,
    transparent 72%
  );
}

.hero__logo-reveal-inner {
  position: relative;
  transform: scale(var(--logo-scale, 1.12));
  will-change: transform, filter;
}

/* Focus-in from blur + a gold glow that ignites (--bloom) then settles.
   PERFORMANCE: the filters below are STATIC — each layer rasterizes once
   and only its opacity animates (compositor-only). Never put var()-driven
   values inside blur()/drop-shadow() here: that re-rasterizes the bitmap
   on every scroll tick and visibly stutters the end of the sequence. */
.hero__logo-reveal-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Soft-focus copy on top — fades OUT as the mark resolves (focus-in). */
.hero__logo-blur {
  position: absolute;
  inset: 0;
  filter: blur(12px);
  opacity: calc(1 - var(--reveal, 0));
}

/* Glow copy underneath — the ignite pulse, riding --bloom. */
.hero__logo-glow {
  position: absolute;
  inset: 0;
  filter: blur(18px) saturate(1.6) brightness(1.35);
  opacity: calc(var(--bloom, 0) * 0.9);
}

/* Specular light-sweep travelling along the letterforms — masked to the
   glyphs so the highlight only rides the mark, echoing the orbital streak. */
.hero__logo-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--reveal, 0);
  mix-blend-mode: screen;
  background: linear-gradient(
    105deg,
    transparent 42%,
    rgba(255, 244, 214, 0.9) 50%,
    transparent 58%
  );
  background-repeat: no-repeat;
  background-size: 60% 100%;
  background-position: var(--sheen, 160%) 0;
  -webkit-mask: url('assets/images/oryn-wordmark-icono.png') center / contain no-repeat;
  mask: url('assets/images/oryn-wordmark-icono.png') center / contain no-repeat;
}

/* Readability scrims — soft, feathered darkening behind each text block.
   Attached to the block so they fade with it (the bright logo climax keeps
   its glow because the scrim is gone by then). z-index:-1 keeps them above
   the canvas/image but behind the text. */
.hero__intro::before,
.hero__outro::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}

.hero__intro::before {
  top: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
  height: 240%;
  background: radial-gradient(
    ellipse at center,
    rgba(8, 6, 16, 0.62) 0%,
    rgba(8, 6, 16, 0.28) 45%,
    transparent 72%
  );
}

.hero__outro::before {
  bottom: -40%;
  width: 150%;
  height: 360%;
  background: linear-gradient(
    to top,
    rgba(8, 6, 16, 0.9) 0%,
    rgba(8, 6, 16, 0.5) 38%,
    transparent 82%
  );
}

/* Eyebrow: was flat burnt-orange on the dark hero (barely legible). Now a
   warm gold→cream shimmer with a soft glow, flanked by pulsing accent dots
   so it reads clearly and feels alive above the title. */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
}

.hero__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 10px 2px rgba(207, 69, 32, 0.75);
  animation: heroEyebrowPulse 2.6s ease-in-out infinite;
}
.hero__eyebrow-dot:last-child { animation-delay: 1.3s; }

.hero__eyebrow-text {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  background: linear-gradient(100deg,
    #e8b55e 0%, #f2f2e7 40%, #f2f2e7 60%, #e8b55e 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 1px 10px rgba(232, 181, 94, 0.4)) drop-shadow(0 2px 14px rgba(0, 0, 0, 0.6));
  animation: heroEyebrowShimmer 5s linear infinite;
}

@keyframes heroEyebrowPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; box-shadow: 0 0 8px 1px rgba(207, 69, 32, 0.6); }
  50% { transform: scale(1.5); opacity: 1; box-shadow: 0 0 14px 4px rgba(207, 69, 32, 0.9); }
}
@keyframes heroEyebrowShimmer {
  to { background-position: 220% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow-dot { animation: none; }
  .hero__eyebrow-text {
    animation: none;
    background: none;
    -webkit-text-fill-color: #ecc987;
    color: #ecc987;
  }
}

/* Micro-captions during the frame scrub — single words that surface and
   dissolve in the lower third while the scene plays. Opacity + drift are
   driven per-caption from main.js (scroll progress), not CSS animation. */
.hero__captions {
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  z-index: var(--z-hero-content);
  width: 100%;
  text-align: center;
  pointer-events: none;
}

.hero__caption {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--color-cream);
  opacity: 0;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.75);
  will-change: opacity, transform;
}

@media (max-width: 768px) {
  .hero__captions { display: none; } /* mobile hero is a static image — no scrub */
}

.hero__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(44px, 8vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-cream);
  margin-bottom: 28px;
  text-shadow: 0 2px 34px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.5);
}

.hero__title-line {
  display: block;
}

.hero__title-line--accent {
  font-style: italic;
  color: var(--color-accent);
}

.hero__subtitle {
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 400;
  line-height: 1.8;
  color: var(--color-gray-100);
  max-width: 560px;
  margin: 0 auto 44px;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.7);
}

.hero__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero__scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-hero-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.hero__scroll-text {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-gray-300);
}

.hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--color-accent), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* ============================================
   ABOUT
   ============================================ */
.about {
  padding: var(--section-padding) 0;
  background: var(--color-primary);
}

.about__container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

.about__left {
  position: relative;
}

/* Thin accent rule under the title for structure/hierarchy. */
.about__left .section-title::after {
  content: '';
  display: block;
  width: 64px;
  height: 2px;
  margin-top: 32px;
  background: var(--color-accent);
}

.about__right {
  padding-top: 8px;
}

.about__text {
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 400;
  color: var(--color-gray-200);
  margin-bottom: 24px;
  line-height: 1.85;
}

/* Lead paragraph — larger and brighter to pull the reader in. */
.about__text:first-of-type {
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-cream);
  margin-bottom: 28px;
}

.about__stats {
  display: flex;
  gap: 48px;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--color-gray-700);
}

.about__stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.about__stat-number {
  font-family: var(--font-heading);
  font-size: clamp(44px, 5vw, 56px);
  font-weight: 400;
  color: var(--color-cream);
  line-height: 1;
  transition: color 0.4s var(--ease-out-quart);
}

.about__stat:hover .about__stat-number {
  color: var(--color-accent);
}

.about__stat-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-gray-300);
}

/* ============================================
   SERVICES
   ============================================ */
.services {
  padding: var(--section-padding) 0;
  background: var(--color-gray-900);
}

.services__container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.services__header {
  margin-bottom: clamp(48px, 6vw, 80px);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.service-card {
  position: relative;
  background: rgba(242, 242, 231, 0.025);
  border: 1px solid rgba(242, 242, 231, 0.08);
  border-radius: 16px;
  padding: clamp(26px, 2.6vw, 40px);
  display: flex;
  flex-direction: column;
  min-height: 280px;
  cursor: pointer;
  transition: transform 0.5s var(--ease-out-expo),
              border-color 0.4s ease,
              background 0.4s ease,
              box-shadow 0.5s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  background: rgba(242, 242, 231, 0.045);
  border-color: rgba(207, 69, 32, 0.45);
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.7),
              0 0 30px -8px rgba(207, 69, 32, 0.25);
}

.service-card:hover .service-card__line {
  width: 100%;
  background: var(--color-accent);
}

.service-card:hover .service-card__number {
  color: var(--color-accent);
}

.service-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

/* Icon chip — desaturated by default, blooms into the accent on hover
   (the display-card "grayscale → color" reveal, applied to the icon). */
.service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(242, 242, 231, 0.06);
  border: 1px solid rgba(242, 242, 231, 0.1);
  color: var(--color-gray-300);
  filter: grayscale(1);
  transition: color 0.4s ease, background 0.4s ease,
              border-color 0.4s ease, filter 0.4s ease;
}

.service-card__icon svg {
  width: 22px;
  height: 22px;
}

.service-card:hover .service-card__icon {
  color: var(--color-accent);
  background: rgba(207, 69, 32, 0.12);
  border-color: rgba(207, 69, 32, 0.4);
  filter: grayscale(0);
}

.service-card__number {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-300);
  letter-spacing: 2px;
  transition: color 0.3s ease;
}

.service-card__title {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 400;
  color: var(--color-cream);
  margin-bottom: 16px;
  line-height: 1.3;
}

.service-card__desc {
  font-size: 15px;
  color: var(--color-gray-200);
  line-height: 1.75;
  margin-top: auto;
  flex: 1;
}

.service-card__line {
  width: 40px;
  height: 1px;
  background: var(--color-gray-700);
  margin-top: 24px;
  transition: width 0.6s var(--ease-out-expo), background 0.3s ease;
}

/* Concrete deliverables under each service description — the "what you
   actually get" list that grounds the card's abstract promise.
   (padding-inline / inset-inline flip automatically under RTL.) */
.service-card__list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.service-card__list li {
  position: relative;
  font-size: 13.5px;
  color: var(--color-gray-200);
  opacity: 0.85;
  line-height: 1.6;
  padding-inline-start: 18px;
  margin-bottom: 7px;
}

.service-card__list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.72em;
  width: 8px;
  height: 1px;
  background: var(--color-accent);
  opacity: 0.75;
}

/* ============================================
   ECOSYSTEM
   ============================================ */
.ecosystem {
  padding: var(--section-padding) 0;
  background: var(--color-primary);
}

.ecosystem__container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.ecosystem__header {
  text-align: center;
  margin-bottom: clamp(60px, 8vw, 100px);
}

.ecosystem__content {
  display: grid;
  grid-template-columns: minmax(260px, 400px) 1fr;
  gap: clamp(48px, 7vw, 110px);
  align-items: center;
}

/* --- Orbit diagram: 3 concentric rings, each with a slowly circling node --- */
.ecosystem__orbit {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1;
  margin: 0 auto;
}

.ecosystem__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid var(--color-gray-700);
  transform: translate(-50%, -50%);
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
}

.ecosystem__ring--1 { width: 36%; height: 36%; }
.ecosystem__ring--2 { width: 68%; height: 68%; }
.ecosystem__ring--3 { width: 100%; height: 100%; }

.ecosystem__ring.is-active {
  border-color: var(--color-accent);
  box-shadow: 0 0 36px rgba(207, 69, 32, 0.22);
}

.ecosystem__orbit-spin {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: ecosystem-spin linear infinite;
  /* Paused until the section is actually in view (toggled in main.js via
     IntersectionObserver) — no reason to keep spinning off-screen. */
  animation-play-state: paused;
}

.ecosystem.in-view .ecosystem__orbit-spin {
  animation-play-state: running;
}

.ecosystem__ring--1 .ecosystem__orbit-spin { animation-duration: 11s; }
.ecosystem__ring--2 .ecosystem__orbit-spin { animation-duration: 19s; animation-direction: reverse; }
.ecosystem__ring--3 .ecosystem__orbit-spin { animation-duration: 28s; }

@keyframes ecosystem-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.ecosystem__orbit-dot {
  position: absolute;
  top: -3.5px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-gray-300);
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(242, 242, 231, 0.35);
  transition: background 0.5s ease, box-shadow 0.5s ease;
}

.ecosystem__ring.is-active .ecosystem__orbit-dot {
  background: var(--color-accent);
  box-shadow: 0 0 8px rgba(207, 69, 32, 0.9), 0 0 18px rgba(207, 69, 32, 0.6);
}

.ecosystem__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(207, 69, 32, 0.22), transparent 70%);
}

.ecosystem__core-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* The source PNG has generous transparent padding, so a larger box makes
     the actual mark read at a comparable size to the old glyph. */
  filter: drop-shadow(0 0 14px rgba(207, 69, 32, 0.35));
}

/* --- Layer list --- */
.ecosystem__list {
  display: flex;
  flex-direction: column;
}

.ecosystem__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding: clamp(26px, 4vw, 38px) 0;
  border-bottom: 1px solid var(--color-gray-700);
  transition: padding-left 0.5s var(--ease-out-expo);
}

.ecosystem__item:first-child {
  border-top: 1px solid var(--color-gray-700);
}

/* Marker column: themed motion icon stacked above the layer number. */
.ecosystem__item-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.ecosystem__item-icon {
  width: 40px;
  height: 40px;
  color: var(--color-gray-500);
  transition: color 0.4s ease, transform 0.4s var(--ease-out-expo);
}

.ecosystem__item-icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ecosystem__item.is-active .ecosystem__item-icon,
.ecosystem__item:hover .ecosystem__item-icon {
  color: var(--color-accent);
  transform: scale(1.12);
}

/* Presence — sonar rings pulse outward from a steady core (being seen). */
.eco-wave {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: eco-sonar 2.6s ease-out infinite;
}
.eco-wave--2 { animation-delay: 1.3s; }
@keyframes eco-sonar {
  0% { transform: scale(0.35); opacity: 0.85; }
  80% { opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Connection — three nodes fire in sequence, a signal circling the network. */
.eco-node {
  transform-box: fill-box;
  transform-origin: center;
  animation: eco-node 2.1s ease-in-out infinite;
}
.eco-node--2 { animation-delay: 0.7s; }
.eco-node--3 { animation-delay: 1.4s; }
@keyframes eco-node {
  0%, 100% { transform: scale(0.7); opacity: 0.45; }
  30% { transform: scale(1.28); opacity: 1; }
}

/* Momentum — chevrons rise and fade in a continuous upward flow. */
.eco-chev {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: eco-rise 1.9s ease-in-out infinite;
}
.eco-chev--2 { animation-delay: 0.63s; }
.eco-chev--3 { animation-delay: 1.26s; }
@keyframes eco-rise {
  0% { transform: translateY(5px); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(-6px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .eco-wave, .eco-node, .eco-chev { animation: none; }
  .eco-wave { opacity: 0.5; }
  .eco-chev--1 { opacity: 1; }
}

.ecosystem__item-num {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 400;
  color: var(--color-gray-700);
  transition: color 0.4s ease;
}

.ecosystem__item.is-active,
.ecosystem__item:hover {
  padding-left: 14px;
}

.ecosystem__item.is-active .ecosystem__item-num,
.ecosystem__item:hover .ecosystem__item-num {
  color: var(--color-accent);
}

.ecosystem__item-title {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 400;
  color: var(--color-cream);
  margin-bottom: 10px;
  transition: color 0.4s ease;
}

.ecosystem__item-desc {
  font-size: 15px;
  color: var(--color-gray-200);
  line-height: 1.7;
  max-width: 480px;
}

/* ============================================
   PROCESS
   ============================================ */
.process {
  padding: var(--section-padding) 0;
  background: var(--color-secondary);
}

.process__container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.process__header {
  margin-bottom: clamp(48px, 6vw, 80px);
}

.process__content {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 300px);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

.process__timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* --- Display panel: large glowing icon for whichever step is active --- */
.process__display {
  position: sticky;
  top: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding-top: clamp(28px, 4vw, 48px);
}

.process__display-ring {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid var(--color-gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
}

.process__display-ring.is-active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 8px rgba(207, 69, 32, 0.08), 0 0 50px rgba(207, 69, 32, 0.28);
  animation: process-pulse 2.2s ease-out infinite;
}

.process__display-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  opacity: 0;
  transform: scale(0.7) rotate(-12deg);
  transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo), color 0.5s ease;
}

.process__display-icon.is-shown {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  color: var(--color-cream);
}

.process__display-icon svg {
  width: 68px;
  height: 68px;
}

.process__display-label {
  font-family: var(--font-heading);
  font-size: 24px;
  color: var(--color-cream);
  transition: opacity 0.3s ease;
}

.process__display-counter {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--color-gray-500);
}

.process__display-counter-current {
  color: var(--color-accent);
}

.process__step {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 40px;
  align-items: stretch;
}

.process__step-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.process__step-line {
  width: 1px;
  flex: 1 1 auto;
  min-height: 24px;
  background: var(--color-gray-700);
  transition: background 0.7s ease;
}

.process__step:first-child .process__step-line--top,
.process__step:last-child .process__step-line--bottom {
  visibility: hidden;
}

.process__step-node {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  margin: 14px 0;
  border-radius: 50%;
  border: 1px solid var(--color-gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.6s ease, box-shadow 0.6s ease, background 0.6s ease;
}

.process__step-icon {
  width: 24px;
  height: 24px;
  color: var(--color-gray-300);
  transition: color 0.5s ease, transform 0.3s ease;
}

.process__step.is-passed .process__step-line--top,
.process__step.is-passed .process__step-line--bottom,
.process__step.is-active .process__step-line--top {
  background: var(--color-accent);
}

.process__step.is-passed .process__step-node {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.process__step.is-passed .process__step-icon,
.process__step.is-active .process__step-icon {
  color: var(--color-white);
}

.process__step.is-active .process__step-node {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 6px rgba(207, 69, 32, 0.14), 0 0 28px rgba(207, 69, 32, 0.4);
  animation: process-pulse 1.8s ease-out infinite;
}

@keyframes process-pulse {
  0% { box-shadow: 0 0 0 0 rgba(207, 69, 32, 0.35), 0 0 24px rgba(207, 69, 32, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(207, 69, 32, 0), 0 0 24px rgba(207, 69, 32, 0.4); }
  100% { box-shadow: 0 0 0 0 rgba(207, 69, 32, 0), 0 0 24px rgba(207, 69, 32, 0.4); }
}

.process__step-content {
  padding: clamp(28px, 4vw, 48px) 0;
}

.process__step-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-gray-500);
  display: block;
  margin-bottom: 10px;
  transition: color 0.4s ease;
}

.process__step.is-active .process__step-label,
.process__step.is-passed .process__step-label {
  color: var(--color-accent);
}

.process__step-title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 400;
  color: var(--color-gray-300);
  margin-bottom: 8px;
  transition: color 0.5s ease;
}

.process__step.is-active .process__step-title,
.process__step.is-passed .process__step-title {
  color: var(--color-cream);
}

.process__step-desc {
  font-size: 15px;
  color: var(--color-gray-500);
  line-height: 1.7;
  max-width: 500px;
  transition: color 0.5s ease;
}

.process__step.is-active .process__step-desc,
.process__step.is-passed .process__step-desc {
  color: var(--color-gray-200);
}

/* ============================================
   QUOTE
   ============================================ */
.quote-section {
  position: relative;
  padding: clamp(100px, 15vw, 200px) 0;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.quote-section__container {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
  text-align: center;
}

.quote-section__mark {
  display: block;
  width: clamp(48px, 6vw, 72px);
  margin: 0 auto clamp(20px, 3vw, 32px);
  color: var(--color-accent);
  opacity: 0.4;
}

.quote-section__mark svg {
  width: 100%;
  height: auto;
  display: block;
}

.quote-section__text {
  font-family: var(--font-heading);
  font-size: clamp(32px, 5.5vw, 72px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-cream);
}

/* Each line is a clipping mask; its inner span rises up into view once
   when the section enters the viewport (see main.js) — a clean one-time
   entrance rather than a scroll-scrubbed word-by-word reveal. */
.quote-section__line {
  display: block;
  overflow: hidden;
  padding: 0.08em 0;
}

.quote-section__reveal {
  display: inline-block;
  will-change: transform;
}

.quote-section__text em {
  font-style: italic;
  color: var(--color-gray-300);
}

.quote-section__accent {
  color: var(--color-accent) !important;
  text-shadow: 0 0 30px rgba(207, 69, 32, 0.45);
  animation: quote-accent-glow 3.2s ease-in-out infinite;
  animation-play-state: paused;
}

.quote-section.in-view .quote-section__accent {
  animation-play-state: running;
}

@keyframes quote-accent-glow {
  0%, 100% { text-shadow: 0 0 22px rgba(207, 69, 32, 0.35); }
  50% { text-shadow: 0 0 40px rgba(207, 69, 32, 0.7); }
}

/* ============================================
   WHY ORYN
   ============================================ */
.why-oryn {
  padding: var(--section-padding) 0;
  background: var(--color-gray-900);
}

.why-oryn__container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.why-oryn__header {
  margin-bottom: clamp(48px, 6vw, 80px);
}

.why-oryn__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.why-oryn__card {
  background: rgba(242, 242, 231, 0.025);
  border: 1px solid rgba(242, 242, 231, 0.08);
  border-radius: 16px;
  padding: clamp(30px, 3.4vw, 50px);
  cursor: pointer;
  transition: transform 0.5s var(--ease-out-expo),
              border-color 0.4s ease,
              background 0.4s ease,
              box-shadow 0.5s ease;
}

.why-oryn__card:hover {
  transform: translateY(-8px);
  background: rgba(242, 242, 231, 0.045);
  border-color: rgba(207, 69, 32, 0.45);
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.7),
              0 0 30px -8px rgba(207, 69, 32, 0.25);
}

.why-oryn__card--wide {
  grid-column: 1 / -1;
}

.why-oryn__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.why-oryn__card-icon {
  width: 30px;
  height: 30px;
  color: var(--color-gray-300);
  transition: color 0.4s ease;
}

.why-oryn__card-icon svg {
  width: 100%;
  height: 100%;
}

.why-oryn__card:hover .why-oryn__card-icon {
  color: var(--color-accent);
}

.why-oryn__card-num {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--color-gray-300);
  filter: grayscale(1);
  display: block;
  transition: color 0.4s ease, filter 0.4s ease;
}

.why-oryn__card:hover .why-oryn__card-num {
  color: var(--color-accent);
  filter: grayscale(0);
}

.why-oryn__card-title {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 400;
  color: var(--color-cream);
  margin-bottom: 14px;
}

.why-oryn__card-desc {
  font-size: 15px;
  color: var(--color-gray-200);
  line-height: 1.8;
  max-width: 480px;
}

/* ============================================
   TYPE MARQUEE (infinite outlined-type band)
   ============================================ */
.marquee {
  overflow: hidden;
  padding: clamp(28px, 4vw, 56px) 0;
  /* Geometry stays LTR even under dir="rtl" so the -50% loop math holds;
     the Arabic words inside the spans still shape correctly. */
  direction: ltr;
}

.marquee__track {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-scroll 48s linear infinite;
  /* Runs only while on screen — pauseOffscreenDecor() toggles .in-view. */
  animation-play-state: paused;
}

.marquee.in-view .marquee__track {
  animation-play-state: running;
}

.marquee__group {
  display: inline-flex;
  align-items: center;
}

.marquee__word {
  font-family: var(--font-heading);
  font-size: clamp(44px, 7vw, 110px);
  font-weight: 400;
  line-height: 1.1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 242, 231, 0.32);
}

/* Tajawal's strokes are heavier — outline-only Arabic reads muddy, so give
   the Arabic band a faint fill instead. */
html.lang-ar .marquee__word {
  color: rgba(242, 242, 231, 0.2);
  -webkit-text-stroke: 0;
}

.marquee__sep {
  font-size: clamp(10px, 1vw, 16px);
  color: var(--color-accent);
  opacity: 0.8;
  margin: 0 clamp(24px, 3vw, 56px);
}

@keyframes marquee-scroll {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track,
  .marquee.in-view .marquee__track {
    animation: none;
  }
}

/* ============================================
   CTA SECTION (adapted from Claude Design)
   Brand fonts (Bodoni headline / Jost body), site palette via vars, no local
   cursor (global one handles it). Kept mid-page tall-but-not-full-viewport so
   the sections after it don't read as an afterthought.
   ============================================ */
@keyframes orynTwinkle {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.3); }
}
@keyframes orynOrbit {
  from { transform: rotate(0deg) translateX(160px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(160px) rotate(-360deg); }
}

.oryn-cta {
  position: relative;
  width: 100%;
  min-height: min(78vh, 760px);
  background:
    radial-gradient(1600px 900px at 80% 100%, rgba(207, 69, 32, 0.10), transparent 55%),
    linear-gradient(160deg, var(--color-secondary) 0%, var(--color-primary) 60%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(90px, 12vw, 150px) 24px;
  text-align: center;
}

.oryn-starfield { position: absolute; inset: 0; pointer-events: none; }
.oryn-star {
  position: absolute;
  border-radius: 50%;
  background: var(--color-cream);
  animation: orynTwinkle ease-in-out infinite;
}

/* The CTA is the LAST section, so its decorative motion (stars, orbiting
   planet, eyebrow dot) would otherwise run the whole time you're anywhere
   up-page. Pause it until the section is on screen — pauseOffscreenDecor()
   toggles .in-view (same pattern as the marquee/ecosystem). */
.oryn-star,
.oryn-orbit-deco .planet,
.oryn-eyebrow .dot { animation-play-state: paused; }
.oryn-cta.in-view .oryn-star,
.oryn-cta.in-view .oryn-orbit-deco .planet,
.oryn-cta.in-view .oryn-eyebrow .dot { animation-play-state: running; }

.oryn-orbit-deco {
  position: absolute;
  top: 14%;
  right: 8%;
  width: 1px;
  height: 1px;
  pointer-events: none;
  opacity: 0.6;
}
.oryn-orbit-deco .ring {
  position: absolute;
  width: 320px;
  height: 320px;
  margin-left: -160px;
  margin-top: -160px;
  border: 1px solid rgba(242, 242, 231, 0.12);
  border-radius: 50%;
}
.oryn-orbit-deco .planet {
  position: absolute;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: -3px;
  border-radius: 50%;
  background: #e8b55e;
  box-shadow: 0 0 12px 3px rgba(232, 181, 94, 0.7);
  animation: orynOrbit 14s linear infinite;
}

.oryn-eyebrow {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.oryn-eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 10px 3px rgba(207, 69, 32, 0.6);
  animation: orynTwinkle 2s ease-in-out infinite;
}
.oryn-eyebrow .label {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gray-200);
  font-weight: 500;
}

.oryn-headline {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(38px, 6.4vw, 84px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-cream);
  max-width: 1140px;
}
.oryn-headline .word {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(24px);
  transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s ease;
}
/* Staggered reveal driven purely by nth-child so it survives the i18n
   innerHTML swap (no per-word JS delay to be wiped out). */
.oryn-headline .word:nth-child(1) { transition-delay: 0s; }
.oryn-headline .word:nth-child(2) { transition-delay: 0.08s; }
.oryn-headline .word:nth-child(3) { transition-delay: 0.16s; }
.oryn-headline .word:nth-child(4) { transition-delay: 0.24s; }
.oryn-headline .word:nth-child(5) { transition-delay: 0.32s; }
.oryn-headline .word:nth-child(6) { transition-delay: 0.40s; }
.oryn-headline .word:nth-child(7) { transition-delay: 0.48s; }
.oryn-headline .word:nth-child(8) { transition-delay: 0.56s; }

.oryn-sub {
  position: relative;
  z-index: 2;
  margin: 28px 0 0;
  max-width: 600px;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.6;
  color: var(--color-gray-200);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease 0.15s, transform 0.8s ease 0.15s;
}

.oryn-process {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  opacity: 0;
  transition: opacity 0.8s ease 0.22s;
  flex-wrap: wrap;
  justify-content: center;
}
.oryn-process .step-wrap { display: flex; align-items: center; gap: 10px; }
.oryn-process .step {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a7a72;
  cursor: default;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
.oryn-process .step--last { color: #e8b55e; }
.oryn-process .step:hover { color: #e8b55e; text-shadow: 0 0 14px rgba(232, 181, 94, 0.8); }
.oryn-process .arrow { color: #4a4a44; font-size: 12px; }

.oryn-cta-btn-wrap {
  position: relative;
  z-index: 2;
  margin-top: 52px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}
.oryn-cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 20px 44px;
  border-radius: 100px;
  background: var(--color-accent);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(242, 242, 231, 0.08), 0 20px 60px -10px rgba(207, 69, 32, 0.55);
  transition: transform 0.15s ease-out, box-shadow 0.3s ease;
  will-change: transform;
}
.oryn-cta-btn:hover { box-shadow: 0 0 0 1px rgba(242, 242, 231, 0.16), 0 24px 70px -8px rgba(232, 181, 94, 0.55); }
.oryn-cta-btn .arrow-icon { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; }
.oryn-cta-btn .arrow-icon svg { transition: transform 0.2s ease; }

.oryn-email-line {
  position: relative;
  z-index: 2;
  margin-top: 24px;
  opacity: 0;
  transition: opacity 0.8s ease 0.4s;
  font-family: var(--font-body);
}
.oryn-email-line span { font-size: 14px; color: #8a8a82; }
.oryn-email-line a {
  font-size: 14px;
  color: #e8b55e;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.oryn-email-line a:hover { color: var(--color-cream); }

.oryn-cta.oryn-revealed .oryn-eyebrow,
.oryn-cta.oryn-revealed .oryn-sub,
.oryn-cta.oryn-revealed .oryn-process,
.oryn-cta.oryn-revealed .oryn-cta-btn-wrap,
.oryn-cta.oryn-revealed .oryn-email-line { opacity: 1; transform: translateY(0); }
.oryn-cta.oryn-revealed .oryn-headline .word { opacity: 1; filter: blur(0); transform: translateY(0); }

/* Reduced motion: no twinkle/orbit, no blur-rise — everything just shows. */
@media (prefers-reduced-motion: reduce) {
  .oryn-star, .oryn-orbit-deco .planet, .oryn-eyebrow .dot { animation: none; }
  .oryn-headline .word { filter: none; transform: none; opacity: 1; transition: none; }
}

/* ============================================
   CLIENTS (placeholder strip)
   ============================================ */
.clients {
  padding: clamp(40px, 5vw, 64px) 0;
}

.clients__container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  text-align: center;
}

.clients__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 20px);
  margin-bottom: 40px;
}

/* Flanking rules — grow outward from the label on reveal. */
.clients__heading-line {
  height: 1px;
  width: clamp(24px, 6vw, 64px);
  transform: scaleX(0);
  transition: transform 0.9s var(--ease-out-expo);
}
.clients__heading-line--l {
  transform-origin: right center;
  background: linear-gradient(to left, rgba(207, 69, 32, 0.75), transparent);
}
.clients__heading-line--r {
  transform-origin: left center;
  background: linear-gradient(to right, rgba(207, 69, 32, 0.75), transparent);
}

.clients__label {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  white-space: nowrap;
  /* Readable base (light gray) with a cream highlight band clipped to the
     text — the band sweeps across once on reveal for a soft shimmer. */
  background: linear-gradient(100deg,
    var(--color-gray-200) 30%, var(--color-cream) 50%, var(--color-gray-200) 70%);
  background-size: 220% 100%;
  background-position: 130% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s ease,
              transform 0.7s var(--ease-out-expo),
              background-position 1.5s ease 0.35s;
}

.clients__heading.is-revealed .clients__heading-line { transform: scaleX(1); }
.clients__heading.is-revealed .clients__label {
  opacity: 1;
  transform: translateY(0);
  background-position: -30% 0; /* one-shot shimmer sweep */
}

@media (prefers-reduced-motion: reduce) {
  .clients__heading-line { transition: none; }
  .clients__label {
    transition: opacity 0.3s ease;
    background: none;
    -webkit-text-fill-color: var(--color-gray-200);
    color: var(--color-gray-200);
  }
  .clients__heading.is-revealed .clients__heading-line { transform: scaleX(1); }
}

/* Interactive client cards — same motion language as the service cards.
   At rest the logos sit muted (grayscale + dimmed) so the strip stays calm;
   hover restores full brand colour, lifts the card, and warms the border.
   GSAP staggers them in on scroll; motion-fx.js adds the pointer tilt. */
.clients-cards {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 24px);
}

.client-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  min-height: 120px;
  padding: 26px 34px;
  border: 1px solid rgba(242, 242, 231, 0.08);
  border-radius: 16px;
  background: rgba(242, 242, 231, 0.02);
  transition: border-color 0.4s ease, background 0.4s ease,
              box-shadow 0.4s ease, transform 0.4s var(--ease-out-expo);
}

.client-card img {
  display: block;
  height: 64px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.client-card:hover {
  border-color: rgba(207, 69, 32, 0.45);
  background: rgba(242, 242, 231, 0.04);
  box-shadow: 0 18px 44px -14px rgba(207, 69, 32, 0.25);
}

.client-card:hover img {
  opacity: 1;
}

/* La Vista's dark-green mark is designed for white — a cream plate keeps it
   legible on the dark card in both rest and hover states. */
.client-card__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--color-cream);
}

.client-card__plate img {
  height: 44px;
}

@media (max-width: 768px) {
  .clients-cards {
    gap: 12px;
  }

  .client-card {
    min-width: 44%;
    min-height: 96px;
    padding: 18px 20px;
  }

  .client-card img {
    height: 48px;
    max-width: 150px;
  }

  .client-card__plate img {
    height: 34px;
  }
}

/* ============================================
   VALUES
   ============================================ */
.values {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--color-primary);
  border-top: 1px solid var(--color-gray-700);
  border-bottom: 1px solid var(--color-gray-700);
}

.values__container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.values__grid {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.values__item {
  text-align: center;
  flex: 1;
  min-width: 160px;
  transition: transform 0.4s var(--ease-out-expo);
}

.values__item:hover {
  transform: translateY(-4px);
}

.values__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: 0 auto 16px;
  color: var(--color-gray-300);
  transition: color 0.4s ease;
}

.values__icon svg {
  width: 100%;
  height: 100%;
}

.values__item:hover .values__icon {
  color: var(--color-accent);
}

/* ---- Per-icon hover animations ---- */
/* The svg inherits a transition so each effect eases in/out smoothly. */
.values__icon svg {
  transition: transform 0.5s var(--ease-out-expo), fill 0.35s ease,
    stroke 0.35s ease, filter 0.35s ease;
  transform-origin: 50% 50%;
}

/* Precision Driven — the crosshair calibrates: a quarter turn + lock-in. */
.values__item:hover .values__icon--target svg {
  transform: rotate(90deg) scale(1.08);
}

/* Human Connection — the heart fills red with a live heartbeat. */
.values__icon--heart svg { color: var(--color-gray-300); }
.values__item:hover .values__icon--heart {
  color: #e5484d;
}
.values__item:hover .values__icon--heart svg {
  fill: #e5484d;
  stroke: #e5484d;
  animation: values-heartbeat 0.9s ease-in-out;
}
@keyframes values-heartbeat {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.22); }
  38% { transform: scale(0.98); }
  56% { transform: scale(1.14); }
  74% { transform: scale(1); }
}

/* Strategic Creativity — the bulb lights up: warm fill + radiant glow. */
.values__item:hover .values__icon--bulb {
  color: #ffd166;
}
.values__item:hover .values__icon--bulb .values__bulb-glass {
  fill: rgba(255, 209, 102, 0.85);
  stroke: #ffd166;
}
.values__item:hover .values__icon--bulb svg {
  filter: drop-shadow(0 0 8px rgba(255, 209, 102, 0.75));
}

/* Continuous Momentum — the refresh arrow spins a full rotation. */
.values__icon--momentum svg {
  transition: transform 0.8s cubic-bezier(0.5, 0, 0.2, 1), color 0.35s ease;
}
.values__item:hover .values__icon--momentum svg {
  transform: rotate(360deg);
}

/* Purpose Beyond Profit — the gem turns and catches the light. */
.values__item:hover .values__icon--purpose svg {
  transform: rotate(90deg);
}
.values__item:hover .values__icon--purpose .values__gem {
  fill: rgba(207, 69, 32, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .values__icon svg,
  .values__icon--momentum svg { transition: none; }
  .values__item:hover .values__icon--target svg,
  .values__item:hover .values__icon--momentum svg,
  .values__item:hover .values__icon--purpose svg { transform: none; }
  .values__item:hover .values__icon--heart svg { animation: none; }
}

.values__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 400;
  color: var(--color-cream);
  margin-bottom: 8px;
}

.values__desc {
  font-size: 14px;
  color: var(--color-gray-200);
  line-height: 1.65;
}

/* ============================================
   CONTACT
   ============================================ */
.contact {
  position: relative;
  overflow: hidden;
  padding: clamp(100px, 15vw, 200px) 0;
  background: var(--color-primary);
}

/* --- Ambient orbit background: a flourish behind the eyebrow/headline
   only. Pinned to the TOP of .contact__container and height-capped —
   previously this stretched inset:0 across the whole (tall) container,
   which includes the description, form card, and contact links, so the
   rings centered on the middle of that entire block and only a cropped
   arc ever showed on screen, slicing weirdly through the form. --- */
.contact__orbit-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(320px, 34vw, 460px);
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.contact__glow {
  position: absolute;
  width: min(38vw, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(207, 69, 32, 0.2), transparent 70%);
  animation: contact-glow-pulse 6s ease-in-out infinite;
  animation-play-state: paused;
}

.contact.in-view .contact__glow,
.contact.in-view .contact__ring {
  animation-play-state: running;
}

@keyframes contact-glow-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

.contact__ring {
  position: absolute;
  border: 1px solid rgba(242, 242, 231, 0.07);
  border-radius: 50%;
  animation: ecosystem-spin linear infinite;
  animation-play-state: paused;
}

.contact__ring--1 {
  width: min(34vw, 380px);
  height: min(34vw, 380px);
  animation-duration: 70s;
}

.contact__ring--2 {
  width: min(24vw, 260px);
  height: min(24vw, 260px);
  border-color: rgba(207, 69, 32, 0.14);
  animation-duration: 45s;
  animation-direction: reverse;
}

/* --- Comet flight intro --- */
.contact__comet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto clamp(48px, 7vw, 96px);
  aspect-ratio: 1000 / 460;
}

/* A quiet vignette instead of a competing glow — keeps the comet's own
   trail as the only light source in this band, so it reads clearly. */
.contact__comet::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(207, 69, 32, 0.06), transparent 65%);
  pointer-events: none;
}

.comet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The trail is revealed behind the comet head as it flies (dashoffset
   scrubbed by scroll), fading from faint cream at the origin to bright
   accent near the head — like a real comet tail. */
.comet__trail {
  stroke: url(#cometTrailGrad);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 7px rgba(207, 69, 32, 0.45));
}

.comet__head {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.comet__head.is-active {
  opacity: 1;
}

.comet__head-core {
  fill: var(--color-cream);
  filter: drop-shadow(0 0 10px rgba(242, 242, 231, 0.9));
}

.comet__head-glow {
  fill: rgba(207, 69, 32, 0.28);
}

/* Arrival: the comet settles at journey's end and pulses softly. */
.comet__head.is-arrived .comet__head-glow {
  animation: comet-arrive-pulse 2s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes comet-arrive-pulse {
  0% { transform: scale(1); opacity: 1; }
  70% { transform: scale(1.7); opacity: 0.15; }
  100% { transform: scale(1.7); opacity: 0; }
}

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

/* Phrases are positioned along the flight path by JS (data-at = progress
   along the curve). Each lights up as the comet passes and STAYS, so the
   full message assembles piece by piece. */
.contact__phrase {
  position: absolute;
  transform: translate(-50%, -50%) translateY(8px);
  font-family: var(--font-heading);
  font-size: clamp(13px, 1.8vw, 22px);
  font-weight: 400;
  font-style: italic;
  color: var(--color-cream);
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.45s var(--ease-out-expo);
  will-change: transform, opacity;
}

/* Vertical lanes: up-phrases lift, down-phrases drop. The offset is large
   enough (±66) that adjacent phrases on the curve never share a row and
   collide — at ±34 "Connection over noise" and "Momentum that lasts" ended
   up in the same band and touched on ~1366-wide screens. Smaller on mobile
   where the band is shorter. */
.contact__phrase[data-side="up"] { margin-top: -66px; }
.contact__phrase[data-side="down"] { margin-top: 66px; }

@media (max-width: 768px) {
  .contact__phrase[data-side="up"] { margin-top: -44px; }
  .contact__phrase[data-side="down"] { margin-top: 44px; }
}

.contact__phrase.is-lit {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}

.contact__container {
  position: relative;
  z-index: 1;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.contact__content {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.contact__title {
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-cream);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.contact__title-accent {
  font-style: italic;
  color: var(--color-accent);
}

.contact__desc {
  font-size: 16px;
  color: var(--color-gray-200);
  line-height: 1.8;
  margin-bottom: 44px;
}

.contact__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* --- Contact form --- */
/* Grounds the form in its own panel rather than floating directly on the
   section background — a subtle glass card, the way most agency sites
   frame their contact forms. */
.contact-form__card {
  margin: clamp(36px, 5vw, 52px) auto 0;
  max-width: 620px;
  padding: clamp(28px, 4vw, 44px);
  background: rgba(242, 242, 231, 0.03);
  border: 1px solid rgba(242, 242, 231, 0.09);
  border-radius: 20px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
}

.contact-form {
  text-align: left;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.contact-form__field {
  position: relative;
  margin-bottom: 18px;
}

.contact-form__field input,
.contact-form__field textarea {
  width: 100%;
  padding: 18px 16px 8px;
  background: rgba(242, 242, 231, 0.03);
  border: 1px solid var(--color-gray-700);
  border-radius: 10px;
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.contact-form__field textarea {
  resize: vertical;
  min-height: 110px;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  background: rgba(242, 242, 231, 0.05);
}

/* Floating label: sits as a placeholder, then shrinks up on focus/fill. */
.contact-form__field label {
  position: absolute;
  left: 16px;
  top: 15px;
  color: var(--color-gray-300);
  font-size: 15px;
  pointer-events: none;
  transition: transform 0.2s ease, color 0.2s ease, font-size 0.2s ease;
}

.contact-form__field input:focus + label,
.contact-form__field input:not(:placeholder-shown) + label,
.contact-form__field textarea:focus + label,
.contact-form__field textarea:not(:placeholder-shown) + label {
  transform: translateY(-11px);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Honeypot — kept out of view and out of the tab order. */
.contact-form__hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

.contact-form__submit {
  width: 100%;
  margin-top: 6px;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}

.contact-form.is-sending .contact-form__submit {
  opacity: 0.7;
  pointer-events: none;
}

.contact-form__status {
  margin-top: 14px;
  font-size: 14px;
  text-align: center;
  min-height: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.contact-form__status.is-shown { opacity: 1; }
.contact-form__status.is-success { color: #4caf7d; }
.contact-form__status.is-error { color: var(--color-accent); }

/* --- Direct-contact fallback beneath the form --- */
/* ============================================
   FLOATING WHATSAPP BUTTON
   ============================================ */
.wa-float {
  position: fixed;
  right: clamp(18px, 3vw, 34px);
  bottom: clamp(18px, 3vw, 34px);
  z-index: 400;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25d366;
  color: #ffffff;
  box-shadow: 0 10px 30px -8px rgba(37, 211, 102, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease;
}

.wa-float:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 16px 40px -8px rgba(37, 211, 102, 0.75), 0 6px 16px rgba(0, 0, 0, 0.45);
}

.wa-float__icon {
  /* The official glyph fills its viewBox edge-to-edge, so it needs a bit
     of breathing room inside the 58px circle. */
  width: 28px;
  height: 28px;
  position: relative;
  z-index: 1;
}

/* Expanding ring to draw the eye, kept subtle. */
.wa-float__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25d366;
  z-index: 0;
  animation: wa-pulse 2.4s ease-out infinite;
}

@keyframes wa-pulse {
  0% { transform: scale(1); opacity: 0.5; }
  70% { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  padding: 60px 0 40px;
  background: var(--color-primary);
  border-top: 1px solid var(--color-gray-700);
}

.footer__container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--color-gray-700);
  margin-bottom: 32px;
}

.footer__logo {
  height: 68px;
  margin-bottom: 18px;
  opacity: 0.9;
}

.footer__tagline {
  font-family: var(--font-heading);
  font-size: 17px;
  color: var(--color-gray-200);
  font-style: italic;
}

.footer__links {
  display: flex;
  gap: 80px;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__col-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-gray-300);
  margin-bottom: 4px;
}

.footer__link {
  font-size: 14px;
  color: var(--color-gray-200);
  transition: color 0.3s ease;
  cursor: pointer;
}

.footer__link:hover {
  color: var(--color-white);
}

.footer__link--social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.footer__link--social svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-gray-300);
  transition: color 0.3s ease;
}

.footer__link--social:hover svg {
  color: var(--color-accent);
}

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

.footer__copy,
.footer__credit {
  font-size: 12px;
  color: var(--color-gray-300);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .contact-form__row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .wa-float {
    width: 52px;
    height: 52px;
  }

  .wa-float__icon {
    width: 24px;
    height: 24px;
  }

  .navbar__links,
  .navbar__cta,
  .lang-toggle:not(.lang-toggle--mobile) {
    display: none;
  }

  .navbar__burger {
    display: flex;
  }

  .navbar.is-scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: transparent;
  }

  .hero__subtitle {
    max-width: 400px;
  }

  /* Mobile hero, poster mode (default / reduced-motion): no canvas, single
     optimised image on the fallback layer, all text visible at once. */
  .hero__canvas-wrap canvas {
    display: none;
  }

  .hero__fallback {
    background-image:
      linear-gradient(to bottom, rgba(17,17,17,0.25) 0%, rgba(17,17,17,0) 40%, rgba(17,17,17,0.85) 100%),
      url('assets/hero-mobile.webp');
    background-size: cover;
    background-position: center;
    will-change: transform;
  }

  /* In poster mode both content blocks are visible from the start. */
  .hero__outro {
    opacity: 1;
    bottom: 10%;
  }

  /* Mobile scrub mode — JS adds .hero--scrub when the portrait frame
     sequence activates (assets/frames-mobile/). Canvas returns, and the
     outro/captions go back to being scroll-driven. The fallback poster
     stays underneath as the loading/error state. */
  .hero--scrub {
    height: 100vh;
    height: 100svh; /* stable against the URL-bar show/hide resize */
  }

  .hero--scrub .hero__canvas-wrap canvas {
    display: block;
  }

  .hero--scrub .hero__outro {
    opacity: 0;
  }

  .hero--scrub .hero__captions {
    display: block;
  }

  .about__container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about__stats {
    gap: 32px;
  }

  .services__grid {
    grid-template-columns: 1fr;
  }

  .ecosystem__content {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ecosystem__orbit {
    max-width: 260px;
  }

  .ecosystem__item-desc {
    max-width: 100%;
  }

  .process__content {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .process__display {
    position: static;
    padding-top: 0;
  }

  .process__display-ring {
    width: 140px;
    height: 140px;
  }

  .process__display-icon svg {
    width: 48px;
    height: 48px;
  }

  .process__step {
    grid-template-columns: 48px 1fr;
    gap: 20px;
  }

  .process__step-node {
    width: 40px;
    height: 40px;
    margin: 10px 0;
  }

  .process__step-icon {
    width: 18px;
    height: 18px;
  }

  .why-oryn__grid {
    grid-template-columns: 1fr;
  }

  .values__grid {
    flex-direction: column;
    gap: 32px;
  }

  .footer__top {
    flex-direction: column;
    gap: 40px;
  }

  .footer__links {
    gap: 48px;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .hero__scroll-hint {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero__actions {
    flex-direction: column;
    align-items: center;
  }

  .btn {
    width: 100%;
    max-width: 280px;
  }

  .about__stats {
    flex-direction: column;
    gap: 24px;
  }
}

/* ============================================
   ORBIT CURSOR — dot + trailing ring, echoes
   the ecosystem section's orbit-ring motif.
   ============================================ */
html.has-custom-cursor,
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor * {
  cursor: none;
}

/* Outer wrappers only ever have their transform driven by x/y (position).
   Scale lives on the inner element instead, so a hover-triggered scale
   animation never has to share the `transform` property on this element
   with the position animation that's also constantly running as the
   pointer moves — see cursor.js for why that conflict caused jitter. */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out-expo);
}

.cursor-dot {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
}

.cursor-dot__inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color-cream);
}

.cursor-ring {
  width: 34px;
  height: 34px;
  margin: -13.5px 0 0 -13.5px;
}

.cursor-ring__inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--color-gray-300);
  transition: border-color 0.3s ease, background 0.3s ease;
}

.cursor-ring.is-active .cursor-ring__inner {
  border-color: var(--color-accent);
  background: rgba(207, 69, 32, 0.1);
}

.has-custom-cursor .cursor-dot.is-visible,
.has-custom-cursor .cursor-ring.is-visible {
  opacity: 1;
}

/* ============================================
   MOTION FX (magnetic buttons / card tilt)
   ============================================ */
.btn,
.navbar__cta {
  will-change: transform;
}

.service-card,
.why-oryn__card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ============================================
   COSMIC BACKGROUND — site-wide orbit field
   A single fixed layer behind all content (z-index:-1). Built entirely
   from the brand palette (near-black / cream / rust — no blue or violet),
   and from the site's own signature motif: a twinkling starfield drifting
   slowly behind large, faint concentric orbit rings, echoing the
   ecosystem/CTA orbit diagrams instead of a generic "space" look.
   Transform + opacity only, so it stays GPU-composited and cheap.
   ============================================ */
.cosmic-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* --- Starfield: generated procedurally in main.js as box-shadow dots on
   one element per layer — the standard lightweight CSS-stars technique
   (no canvas, no per-star DOM nodes). Each layer drifts + twinkles at a
   different speed for a subtle sense of depth. --- */
.cosmic-stars__layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
  will-change: transform, opacity;
}

.cosmic-stars__layer--sm {
  animation: cosmic-star-drift 140s linear infinite, cosmic-star-twinkle 5s ease-in-out infinite;
  opacity: 0.5;
}

.cosmic-stars__layer--md {
  animation: cosmic-star-drift 100s linear infinite reverse, cosmic-star-twinkle 7s ease-in-out infinite;
  opacity: 0.7;
  animation-delay: 0s, -2s;
}

.cosmic-stars__layer--lg {
  animation: cosmic-star-drift 70s linear infinite, cosmic-star-twinkle 4.5s ease-in-out infinite;
  opacity: 0.85;
  animation-delay: 0s, -1s;
}

@keyframes cosmic-star-drift {
  from { transform: translate(0, 0); }
  to { transform: translate(-4vw, -6vh); }
}

@keyframes cosmic-star-twinkle {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* --- Warm ambient glows: rust + cream only --- */
.cosmic-bg__glow {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.cosmic-bg__glow--1 {
  width: 62vw;
  height: 62vw;
  top: -14%;
  left: -10%;
  background: radial-gradient(circle, rgba(207, 69, 32, 0.14), transparent 68%);
  animation: cosmic-drift-1 30s ease-in-out infinite;
}

.cosmic-bg__glow--2 {
  width: 50vw;
  height: 50vw;
  bottom: -14%;
  right: -8%;
  background: radial-gradient(circle, rgba(207, 69, 32, 0.09), transparent 70%);
  animation: cosmic-drift-2 38s ease-in-out infinite;
}

.cosmic-bg__glow--3 {
  width: 46vw;
  height: 46vw;
  top: 38%;
  left: 44%;
  background: radial-gradient(circle, rgba(242, 242, 231, 0.045), transparent 72%);
  animation: cosmic-drift-3 46s ease-in-out infinite;
}

@keyframes cosmic-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6vw, 5vh) scale(1.08); }
}

@keyframes cosmic-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-7vw, -4vh) scale(1.1); }
}

@keyframes cosmic-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
  50% { transform: translate(-4vw, 6vh) scale(1.12); opacity: 0.6; }
}

/* --- Large, faint orbit rings: the site's own signature motif, drifting
   slowly sitewide — the same language as the ecosystem/CTA diagrams. --- */
.cosmic-bg__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(242, 242, 231, 0.05);
  will-change: transform;
}

.cosmic-bg__ring--1 {
  width: 90vmax;
  height: 90vmax;
  top: 50%;
  left: 50%;
  margin: -45vmax 0 0 -45vmax;
  animation: cosmic-ring-spin-1 240s linear infinite;
}

.cosmic-bg__ring--2 {
  width: 62vmax;
  height: 62vmax;
  top: 50%;
  left: 50%;
  margin: -31vmax 0 0 -31vmax;
  border-color: rgba(207, 69, 32, 0.08);
  animation: cosmic-ring-spin-2 170s linear infinite reverse;
}

@keyframes cosmic-ring-spin-1 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes cosmic-ring-spin-2 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Let the cosmic layer show through — these sections drop their solid
   fills. Hero (own canvas) and preloader keep their own looks. The contact
   section and footer keep their own solid backgrounds (declared earlier)
   rather than the sitewide nebula — the comet flight already has its own
   deliberate glow/rings/trail, and layering the sitewide nebula behind it
   too just competed for attention and muddied the comet's own atmosphere. */
.about,
.services,
.ecosystem,
.process,
.quote-section,
.why-oryn,
.values {
  background: transparent;
}

/* ============================================
   ARABIC / RTL SUPPORT
   Switching html[dir="rtl"] + .lang-ar handles most of the layout
   automatically (native block flow, text-align, and flexbox row direction
   all flip on their own under dir="rtl"). The rules below only cover the
   handful of spots that use explicit left/right positioning or an
   LTR-assuming icon+text order, which don't flip on their own. Bespoke
   motion graphics (orbit rings, comet flight path, process timeline) are
   intentionally left as-is — they're abstract visuals, not directional
   text content, so mirroring them isn't meaningfully "more correct" and
   risks new visual bugs for no real benefit.
   ============================================ */
html.lang-ar {
  --font-heading: 'Tajawal', 'Jost', sans-serif;
  --font-body: 'Tajawal', 'Jost', sans-serif;
}

/* Bodoni Moda's italic accent styling doesn't apply to Arabic script —
   keep Arabic headings upright rather than (non-existent) faux-italic. */
html.lang-ar .contact__title-accent,
html.lang-ar .quote-section__text em,
html.lang-ar .hero__title-line--accent {
  font-style: normal;
}

[dir="rtl"] .contact-form__field label {
  left: auto;
  right: 16px;
}

[dir="rtl"] .contact-form__field input,
[dir="rtl"] .contact-form__field textarea {
  text-align: right;
}

[dir="rtl"] .footer__link--social {
  flex-direction: row-reverse;
}

[dir="rtl"] .wa-float {
  right: auto;
  left: clamp(18px, 3vw, 34px);
}

@media (max-width: 768px) {
  [dir="rtl"] .wa-float {
    left: clamp(18px, 3vw, 34px);
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .hero__scroll-line {
    animation: none;
  }
}