/* ─── Section stacking (Phase 3.6) ─── */
#hero,
#spotlight,
#spaces,
#roadmap,
#programs,
#closing,
#register {
  position: relative;
  z-index: 1;
}

/* ─── Hero Section (Phase 2) ─── */
/* ═══════════════════════════════════════════════
   HERO — Luxury Cinematic Editorial
   Coordinated with spaces: teal + champagne accents
   ═══════════════════════════════════════════════ */

.hero {
  position: relative;
  height: 100vh;
  min-height: 740px;
  overflow: hidden;
  background: #0B0908;
}

.hero__bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ── Layer 1: Rich warm gradient ── */
.hero__warm-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 70% 25%, rgba(78, 50, 28, 0.5) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 15% 85%, rgba(13, 91, 90, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 90%, rgba(184, 148, 95, 0.1) 0%, transparent 65%),
    linear-gradient(140deg, #181410 0%, #1C1612 45%, #0F0C0A 100%);
}

/* ── Layer 2: Glow blobs ── */
.hero__bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  will-change: transform;
  mix-blend-mode: screen;
  z-index: 1;
}
.hero__bg-glow--terra {
  top: -12%;
  right: -8%;
  width: 58vw;
  height: 58vw;
  background: radial-gradient(circle, rgba(196, 106, 54, 0.32) 0%, transparent 65%);
  opacity: 0.7;
  animation: heroGlowDrift1 24s ease-in-out infinite;
}
.hero__bg-glow--teal {
  bottom: -18%;
  left: -10%;
  width: 64vw;
  height: 64vw;
  background: radial-gradient(circle, rgba(13, 91, 90, 0.4) 0%, transparent 65%);
  opacity: 0.6;
  animation: heroGlowDrift2 30s ease-in-out infinite;
}
.hero__bg-glow--amber {
  top: 28%;
  left: 32%;
  width: 38vw;
  height: 38vw;
  background: radial-gradient(circle, rgba(184, 148, 95, 0.22) 0%, transparent 65%);
  opacity: 0.5;
  animation: heroGlowDrift3 34s ease-in-out infinite;
}
@keyframes heroGlowDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-30px, 25px) scale(1.1); }
}
@keyframes heroGlowDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, -30px) scale(1.15); }
}
@keyframes heroGlowDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-25px, -20px) scale(0.92); }
}

/* ── Layer 3: Cinematic photo ── */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  will-change: transform;
}

.hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;

  opacity: 0.42;
  filter: brightness(0.55) contrast(1.18) saturate(1.08) sepia(0.08) blur(0.5px);
  mix-blend-mode: luminosity;

  transform: scale(1.08);
  animation: heroPhotoBreathe 26s ease-in-out infinite;
}

@keyframes heroPhotoBreathe {
  0%, 100% { transform: scale(1.08) translate(0, 0); }
  50%      { transform: scale(1.13) translate(-14px, -8px); }
}

.hero__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      135deg,
      rgba(11, 9, 8, 0.4) 0%,
      rgba(184, 148, 95, 0.04) 50%,
      rgba(11, 9, 8, 0.6) 100%
    );
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ── Layer 4: Particles ── */
.hero__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.hero__particles .particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}
@keyframes heroParticleFloat {
  0%, 100% { transform: translate(0, 0);      opacity: var(--p-op, 0.4); }
  25%      { transform: translate(20px, -30px); opacity: 0.8; }
  50%      { transform: translate(-15px, -60px); opacity: 0.6; }
  75%      { transform: translate(10px, -40px);  opacity: 0.9; }
}

/* ── Layer 5: Refined vignette ── */
.hero__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background:
    radial-gradient(
      ellipse 70% 65% at 65% 50%,
      transparent 22%,
      rgba(11, 9, 8, 0.5) 60%,
      rgba(11, 9, 8, 0.94) 100%
    );
}

/* ── Layer 6: Decorative ornaments ── */
.hero__ornaments {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.hero-corner {
  position: absolute;
  width: 86px;
  height: 86px;
}
.hero-corner--tl {
  top: 110px;
  left: 56px;
  border-top: 1px solid rgba(184, 148, 95, 0.4);
  border-left: 1px solid rgba(184, 148, 95, 0.4);
  border-top-left-radius: 18px;
}
.hero-corner--tr {
  top: 110px;
  right: 56px;
  border-top: 1px solid rgba(13, 91, 90, 0.5);
  border-right: 1px solid rgba(13, 91, 90, 0.5);
  border-top-right-radius: 18px;
}
.hero-corner--bl {
  bottom: 110px;
  left: 56px;
  border-bottom: 1px solid rgba(13, 91, 90, 0.5);
  border-left: 1px solid rgba(13, 91, 90, 0.5);
  border-bottom-left-radius: 18px;
}
.hero-corner--br {
  bottom: 110px;
  right: 56px;
  border-bottom: 1px solid rgba(184, 148, 95, 0.4);
  border-right: 1px solid rgba(184, 148, 95, 0.4);
  border-bottom-right-radius: 18px;
}

.hero-flourish {
  position: absolute;
  width: 320px;
  height: 50px;
  opacity: 0.85;
}
.hero-flourish--top {
  top: 92px;
  left: 50%;
  transform: translateX(-50%);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .hero__bg-glow {
    animation: none !important;
  }
  .hero__photo img {
    animation: none !important;
    transform: scale(1.05);
  }
}

/* ═══════════════════════════════════════════════
   HERO CONTENT
   ═══════════════════════════════════════════════ */

.hero__content {
  position: absolute;
  top: 50%;
  right: 8%;
  transform: translateY(-50%);
  max-width: 640px;
  z-index: 10;
  will-change: transform;
  isolation: isolate;
}

.hero__content::before {
  content: '';
  position: absolute;
  inset: -42px -52px -36px -52px;
  z-index: -1;
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 70% 44%, rgba(11, 9, 8, 0.62) 0%, rgba(11, 9, 8, 0.38) 48%, transparent 76%),
    linear-gradient(90deg, rgba(11, 9, 8, 0.58), rgba(11, 9, 8, 0.16) 70%, transparent);
  opacity: 0.92;
  pointer-events: none;
}

/* Subtle gold hairline frame around content */
.hero__content::after {
  content: '';
  position: absolute;
  inset: -30px -38px -24px -38px;
  z-index: -1;
  border-radius: 22px;
  border: 1px solid rgba(184, 148, 95, 0.14);
  pointer-events: none;
}

.hero__content .eyebrow {
  margin-bottom: 28px;
  opacity: 0;
}
.hero__content .eyebrow__text {
  color: rgba(216, 188, 145, 0.95);
}
.hero__content .eyebrow__line {
  background: linear-gradient(90deg, rgba(184, 148, 95, 0.6), transparent);
}
.hero__content .eyebrow__dot {
  background: #B89460;
  box-shadow: 0 0 0 4px rgba(184, 148, 95, 0.18), 0 0 12px rgba(184, 148, 95, 0.5);
}

/* Headline */
.hero__headline {
  font: 800 clamp(42px, 5.8vw, 82px)/1.28 var(--font-display);
  color: #F4EBD8;
  margin: 0 0 8px;
  letter-spacing: -0.015em;
  text-shadow:
    0 0 60px rgba(13, 91, 90, 0.28),
    0 4px 22px rgba(0, 0, 0, 0.92),
    0 1px 2px rgba(0, 0, 0, 0.95);
  padding-top: 14px;
  white-space: nowrap;
  overflow: visible;
}

.hero__line {
  display: inline-block;
  white-space: nowrap;
}

.hero__word {
  display: inline-block;
  overflow: hidden;
  margin: 0 2px;
  padding-top: 0.18em;
  padding-bottom: 0.08em;
  vertical-align: top;
}

.hero__word-inner {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}

/* Brand light teal on last word — matching identity */
.hero__word--accent .hero__word-inner {
  color: #5FB3B1;
  -webkit-text-fill-color: #5FB3B1;
}

/* Divider — gradient line with center dot */
.hero__divider {
  position: relative;
  width: 84px;
  height: 1px;
  margin: 24px 0;
  background: linear-gradient(
    90deg,
    #B89460 0%,
    var(--teal-signature) 60%,
    transparent 100%
  );
  transform: scaleX(0);
  transform-origin: right center;
}
.hero__divider-dot {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E8C786, var(--teal-signature));
  box-shadow:
    0 0 0 3px rgba(184, 148, 95, 0.16),
    0 0 12px rgba(184, 148, 95, 0.5);
}

.hero__sub-ar {
  font-family: var(--font-ar);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
  color: #D8BC91;
  margin-bottom: 26px;
  opacity: 0;
  letter-spacing: 0.01em;
}

.hero__sub-sep {
  color: var(--teal-signature);
  margin: 0 14px;
  opacity: 0.9;
  font-weight: 300;
}

.hero__body {
  font-family: var(--font-ar);
  font-weight: 300;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.95;
  color: rgba(232, 220, 198, 0.78);
  max-width: 490px;
  padding-right: 18px;
  border-right: 1px solid;
  border-image: linear-gradient(180deg,
    rgba(184, 148, 95, 0.6) 0%,
    rgba(13, 91, 90, 0.45) 60%,
    transparent 100%) 1;
  opacity: 0;
}

.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
  opacity: 0;
}

/* Quote — refined with double bars */
.hero__quote {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  opacity: 0;
}

.hero__quote-bar {
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, var(--teal-signature), #B89460);
  flex-shrink: 0;
}
.hero__quote-bar--end {
  background: linear-gradient(90deg, #B89460, var(--teal-signature));
}

.hero__quote-text {
  font-family: var(--font-ar);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: rgba(216, 188, 145, 0.7);
}

/* ═══════════════════════════════════════════════
   HERO SCROLL INDICATOR — Premium
   ═══════════════════════════════════════════════ */

.hero__scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
}

.hero__scroll-label {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(216, 188, 145, 0.6);
}

.hero__scroll-line {
  position: relative;
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg,
    rgba(184, 148, 95, 0.6) 0%,
    var(--teal-signature) 50%,
    transparent 100%);
  overflow: hidden;
}

.hero__scroll-tip {
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  height: 8px;
  margin-left: -1.5px;
  background: linear-gradient(180deg, #E8C786, var(--teal-signature));
  border-radius: 2px;
  animation: scrollDot 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(184, 148, 95, 0.6));
}

@keyframes scrollDot {
  0%   { top: 0;    opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ═══════════════════════════════════════════════
   HERO — Responsive
   ═══════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .hero-corner {
    width: 60px;
    height: 60px;
  }
  .hero-corner--tl, .hero-corner--tr { top: 96px; }
  .hero-corner--bl, .hero-corner--br { bottom: 96px; }
  .hero-corner--tl, .hero-corner--bl { left: 36px; }
  .hero-corner--tr, .hero-corner--br { right: 36px; }
  .hero-flourish { width: 240px; }
}

@media (max-width: 768px) {
  .hero__content {
    top: 50%;
    right: 5%;
    left: 5%;
    max-width: 100%;
    padding: 0 5%;
  }
  .hero__content::before {
    inset: -28px -10px -24px -10px;
  }
  .hero__content::after {
    inset: -20px -6px -16px -6px;
  }
  .hero__cta-row {
    flex-direction: column;
  }
  .hero__cta-row .btn-primary,
  .hero__cta-row .btn-secondary {
    width: 100%;
    text-align: center;
  }
  .hero__photo img {
    opacity: 0.32;
    object-position: center center;
  }
  .hero__vignette {
    background: radial-gradient(
      ellipse 90% 80% at center,
      transparent 25%,
      rgba(11, 9, 8, 0.74) 70%,
      rgba(11, 9, 8, 0.94) 100%
    );
  }
  .hero-corner {
    display: none;
  }
  .hero-flourish {
    width: 200px;
    top: 76px;
  }
}

@media (max-width: 600px) {
  .hero__headline {
    font-size: clamp(32px, 9vw, 48px);
    white-space: normal;
  }
  .hero__line {
    white-space: normal;
  }
}

/* Hide scroll indicator on short screens OR narrow mobile widths
   (prevents the vertical line from bleeding into the next section) */
@media (max-height: 600px), (max-width: 768px) {
  .hero__scroll-indicator {
    display: none;
  }
}

/* ═══════════════════════════════════════════════
   SPOTLIGHT — Luxury Tagline + 4 Premium Cards
   Warm dark base · champagne + light teal accents
   ═══════════════════════════════════════════════ */

.spotlight {
  position: relative;
  padding: 100px 6% 110px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(78, 50, 28, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(13, 91, 90, 0.12) 0%, transparent 65%),
    linear-gradient(180deg, #0F0C0A 0%, #14110D 50%, #0F0C0A 100%);
}

.spotlight__container {
  position: relative;
  z-index: 4;
  max-width: 1320px;
  margin: 0 auto;
  text-align: center;
}

/* ── Ambient luxury layers — replaces hard borders ── */
.spotlight__ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Overhead spotlight cone — gives the section a literal "spotlight" feel */
.sl-spotlight {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 80%;
  background:
    radial-gradient(ellipse 50% 70% at 50% 0%,
      rgba(255, 235, 200, 0.06) 0%,
      rgba(184, 148, 95, 0.03) 30%,
      transparent 65%);
  filter: blur(20px);
}

/* Soft side hazes */
.sl-haze {
  position: absolute;
  width: 38vw;
  height: 70%;
  top: 15%;
  filter: blur(80px);
  opacity: 0.55;
}
.sl-haze--left {
  left: -10%;
  background: radial-gradient(ellipse, rgba(184, 148, 95, 0.12) 0%, transparent 65%);
  animation: hazeDrift 30s ease-in-out infinite;
}
.sl-haze--right {
  right: -10%;
  background: radial-gradient(ellipse, rgba(95, 179, 177, 0.14) 0%, transparent 65%);
  animation: hazeDrift 36s ease-in-out infinite reverse;
}
@keyframes hazeDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(20px, -30px) scale(1.08); }
}

/* Fine grain texture for tactile luxury */
.sl-grain {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* ── Existing decor layer kept (rings/rays) but softened ── */
.decor-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140vw;
  height: 140vw;
  max-width: 1600px;
  max-height: 1600px;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(184, 148, 95, 0.04) 30deg,
    transparent 60deg,
    transparent 150deg,
    rgba(13, 91, 90, 0.05) 180deg,
    transparent 210deg,
    transparent 330deg
  );
  animation: raysRotate 120s linear infinite;
  pointer-events: none;
}
@keyframes raysRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ─── Tagline — single line ─── */
.spotlight__tagline {
  font: 800 clamp(28px, 4vw, 56px)/1.3 var(--font-display);
  color: #F4EBD8;
  margin: 0 auto 0;
  letter-spacing: -0.01em;
  padding-top: 12px;
  text-shadow:
    0 0 60px rgba(13, 91, 90, 0.25),
    0 2px 8px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  overflow: visible;
}
.spotlight__line {
  display: inline-block;
  vertical-align: top;
}
.spotlight__line--accent {
  margin-right: 16px;
}
.spotlight__line--accent .spotlight__word-inner {
  color: #5FB3B1;
}
.spotlight__word {
  display: inline-block;
  overflow: hidden;
  margin: 0 3px;
  padding-top: 0.18em;
  padding-bottom: 0.08em;
  vertical-align: top;
}
.spotlight__word-inner {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}

/* ─── Features Grid — 4 columns ─── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 72px;
  perspective: 1400px;
}

/* ─── Luxury feature card — atelier style ─── */
.feature-3d {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  isolation: isolate;
}

.feature-3d__glow {
  position: absolute;
  inset: -28px;
  background: radial-gradient(ellipse at center, var(--card-glow) 0%, transparent 65%);
  opacity: 0.35;
  filter: blur(38px);
  transition: opacity 0.6s ease;
  z-index: -1;
  pointer-events: none;
}

.feature-3d__surface {
  position: relative;
  background:
    linear-gradient(165deg,
      rgba(28, 24, 22, 0.62) 0%,
      rgba(16, 14, 14, 0.78) 100%);
  border: 1px solid color-mix(in srgb, var(--card-color) 18%, rgba(184, 148, 95, 0.14));
  border-radius: 22px;
  padding: 32px 24px 28px;
  min-height: 310px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 200, 0.05),
    0 14px 36px rgba(0, 0, 0, 0.45);
  isolation: isolate;
}

/* Corner glow — soft accent radiance at the upper-right corner */
.feature-3d__surface::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 80%;
  height: 80%;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--card-color) 28%, transparent) 0%,
    transparent 60%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
  transition: opacity 0.5s ease;
}

/* Counter-corner glow — bottom-left for asymmetric premium feel */
.feature-3d__surface::after {
  content: '';
  position: absolute;
  bottom: -35%;
  left: -25%;
  width: 75%;
  height: 75%;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--card-color) 20%, transparent) 0%,
    transparent 65%);
  filter: blur(22px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  transition: opacity 0.5s ease;
}

/* ─── Icon Badge (top, circular) ─── */
.feature-3d__visual {
  position: relative;
  width: 108px;
  height: 108px;
  margin: 8px 0 22px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--card-color) 32%, rgba(184, 148, 95, 0.16));
  background:
    radial-gradient(circle at center,
      color-mix(in srgb, var(--card-color) 8%, transparent) 0%,
      rgba(10, 8, 8, 0.45) 70%);
  color: var(--card-color);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow:
    inset 0 0 24px color-mix(in srgb, var(--card-color) 10%, transparent),
    0 0 32px color-mix(in srgb, var(--card-color) 14%, transparent);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s ease,
              border-color 0.5s ease;
}

.feature-3d__icon {
  width: 58%;
  height: 58%;
  opacity: 0.95;
  filter:
    drop-shadow(0 0 6px color-mix(in srgb, var(--card-color) 45%, transparent))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}

/* ─── Text body (centered, below badge) ─── */
.feature-3d__body {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
}

.feature-3d__title {
  font: 700 clamp(18px, 1.35vw, 22px)/1.35 var(--font-ar);
  color: #F4EBD8;
  margin: 0 0 10px;
  transition: color 0.4s;
  letter-spacing: -0.005em;
}
.feature-3d__desc {
  font: 400 clamp(13px, 0.95vw, 15px)/1.7 var(--font-ar);
  color: rgba(232, 220, 198, 0.65);
  margin: 0;
}

/* ─── Bottom accent rule (centered, pushed to bottom) ─── */
.feature-3d__rule {
  display: block;
  width: 44px;
  height: 1.5px;
  margin: 22px auto 0;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--card-color) 85%, transparent) 50%,
    transparent);
  border-radius: 2px;
  position: relative;
  z-index: 2;
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Hover ─── */
.feature-3d:hover {
  transform: translateY(-6px);
}
.feature-3d:hover .feature-3d__glow {
  opacity: 0.7;
}
.feature-3d:hover .feature-3d__surface {
  border-color: color-mix(in srgb, var(--card-color) 42%, rgba(184, 148, 95, 0.2));
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 200, 0.07),
    0 22px 50px rgba(0, 0, 0, 0.5),
    0 0 60px color-mix(in srgb, var(--card-color) 14%, transparent);
}
.feature-3d:hover .feature-3d__surface::before,
.feature-3d:hover .feature-3d__surface::after {
  opacity: 1;
}
.feature-3d:hover .feature-3d__visual {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--card-color) 55%, transparent);
  box-shadow:
    inset 0 0 28px color-mix(in srgb, var(--card-color) 14%, transparent),
    0 0 48px color-mix(in srgb, var(--card-color) 24%, transparent);
}
.feature-3d:hover .feature-3d__icon {
  filter:
    drop-shadow(0 0 10px color-mix(in srgb, var(--card-color) 65%, transparent))
    drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
}
.feature-3d:hover .feature-3d__rule {
  width: 64px;
}

/* ─── Tablet ─── */
@media (max-width: 1100px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

/* ─── Mid-range — allow wrap to avoid overflow on narrow desktops/tablets ─── */
@media (max-width: 960px) {
  .spotlight__tagline {
    white-space: normal;
  }
  .spotlight__line {
    display: inline;
  }
}

/* ─── Mobile ─── */
@media (max-width: 720px) {
  .spotlight__tagline {
    font-size: clamp(22px, 6vw, 34px);
    white-space: normal;
  }
  .spotlight__line {
    display: inline;
  }
  .spotlight__line--accent {
    margin-right: 6px;
  }
}

@media (max-width: 600px) {
  .spotlight { padding: 96px 5% 110px; }
  .features-grid { margin-top: 48px; grid-template-columns: 1fr; gap: 16px; }
  .feature-3d__surface { padding: 28px 22px 26px; border-radius: 20px; min-height: 270px; }
  .feature-3d__visual { width: 94px; height: 94px; margin: 4px 0 18px; }
  .feature-3d__title { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .feature-3d, .feature-3d__ring, .decor-hexagons, .decor-rings, .decor-rays, .sl-haze {
    animation: none !important;
    transition: opacity 0.3s, color 0.3s !important;
  }
  .feature-3d:hover { transform: none; }
}

/* ═══════════════════════════════════════════════
   SPACES SECTION — Apple-style Light Panel
   ═══════════════════════════════════════════════ */

.spaces {
  position: relative;
  padding: 130px 0 130px;
  overflow: visible;
}

.spaces__container {
  position: relative;
  z-index: 2;
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 4%;
}

/* ═══════════════════════════════════════════════
   SPACES — Luxury Light-Mode Editorial Showcase
   Palette: ivory / champagne / teal signature
   ═══════════════════════════════════════════════ */

.spaces-band {
  position: relative;
  background:
    radial-gradient(ellipse 70% 50% at 18% 0%, rgba(255, 255, 255, 0.95) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 82% 100%, rgba(13, 91, 90, 0.05) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(184, 148, 95, 0.04) 0%, transparent 70%),
    linear-gradient(168deg, #F8F4EB 0%, #F2EDDF 55%, #EDE6D2 100%);
  border-radius: 40px;
  padding: 120px 80px 110px;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 -1px 0 rgba(120, 90, 50, 0.06) inset,
    0 1px 2px rgba(120, 90, 50, 0.04),
    0 30px 60px rgba(40, 30, 15, 0.18),
    0 60px 120px rgba(20, 15, 10, 0.18);
}

/* Refined inner border — gives the panel a "framed art" feel */
.spaces-band::before {
  content: '';
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(184, 148, 95, 0.18);
  border-radius: 28px;
  pointer-events: none;
  z-index: 1;
}

/* ── Decorative ornaments layer ── */
.spaces-band__ornaments {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.sb-ornament {
  position: absolute;
  width: 50%;
  height: 80px;
  opacity: 0.7;
}
.sb-ornament--top {
  top: 60px;
  left: 25%;
}
.sb-ornament--bottom {
  bottom: 60px;
  left: 25%;
  transform: scaleY(-1);
}

.sb-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
}
.sb-blob--1 {
  top: -8%;
  right: -6%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(13, 91, 90, 0.18) 0%, transparent 70%);
}
.sb-blob--2 {
  bottom: -10%;
  left: -8%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(184, 148, 95, 0.22) 0%, transparent 70%);
}
.sb-blob--3 {
  top: 38%;
  left: 42%;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(255, 240, 215, 0.6) 0%, transparent 70%);
}

.sb-corner {
  position: absolute;
  width: 86px;
  height: 86px;
  pointer-events: none;
}
.sb-corner--tr {
  top: 40px;
  right: 40px;
  border-top: 1px solid rgba(13, 91, 90, 0.3);
  border-right: 1px solid rgba(13, 91, 90, 0.3);
  border-top-right-radius: 18px;
}
.sb-corner--bl {
  bottom: 40px;
  left: 40px;
  border-bottom: 1px solid rgba(184, 148, 95, 0.35);
  border-left: 1px solid rgba(184, 148, 95, 0.35);
  border-bottom-left-radius: 18px;
}

.spaces-band__inner {
  position: relative;
  z-index: 3;
  max-width: 1380px;
  margin: 0 auto;
}

/* ─── Header: editorial asymmetric layout ─── */
.spaces-band__header {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: end;
  gap: 64px;
  margin: 0 0 56px;
}

.spaces-band__header-text {
  text-align: right;
}

.spaces-band__header-meta {
  text-align: left;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.spaces__accent-line {
  display: block;
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg,
    var(--teal-signature) 0%,
    rgba(184, 148, 95, 0.6) 100%);
  border-radius: 2px;
}

.spaces__title {
  font: 800 clamp(46px, 6.6vw, 86px)/1.05 var(--font-display);
  color: #14110D;
  margin: 0;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.spaces__title em {
  font-style: normal;
  font-weight: 900;
  color: var(--teal-signature);
  -webkit-text-fill-color: var(--teal-signature);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.spaces__sub {
  font: 400 clamp(15px, 1.25vw, 19px)/1.7 var(--font-ar);
  color: #4A4338;
  margin: 0;
  max-width: 520px;
}

/* ─── Decorative center divider ─── */
.spaces-band__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 72px;
}
.sb-divider-line {
  flex: 1;
  max-width: 320px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(184, 148, 95, 0.4) 40%,
    rgba(13, 91, 90, 0.35) 60%,
    transparent 100%);
}
.sb-divider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-signature), #B89460);
  box-shadow:
    0 0 0 4px rgba(13, 91, 90, 0.08),
    0 0 0 10px rgba(13, 91, 90, 0.04);
}

/* ─── Cards grid ─── */
.spaces-band__tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* ─── Luxury card ─── */
.space-card {
  position: relative;
  background: linear-gradient(168deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(252, 247, 235, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 24px;
  padding: 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 1px 3px rgba(80, 60, 30, 0.06),
    0 14px 30px rgba(80, 60, 30, 0.08),
    0 30px 50px rgba(40, 30, 15, 0.06);
  transition:
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.6s ease;
}

/* Subtle inner glow on top-right (warm) and bottom-left (teal) */
.space-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(184, 148, 95, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(13, 91, 90, 0.06) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.space-card > * {
  position: relative;
  z-index: 2;
}

.space-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3.2;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
}

.space-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.96) saturate(1.05);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.6s ease;
}

/* Light shine sweep on media */
.space-card__shine {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.22) 0%,
      transparent 35%),
    linear-gradient(0deg,
      rgba(20, 17, 13, 0.08) 0%,
      transparent 40%);
  pointer-events: none;
  z-index: 1;
}

.space-card__body {
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: right;
}

.space-card__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 2px;
}

.space-card__index {
  display: none;
}

.space-card__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(13, 91, 90, 0.3) 0%,
    rgba(184, 148, 95, 0.25) 50%,
    transparent 100%);
}

.space-card__title {
  font: 800 clamp(18px, 1.35vw, 23px)/1.3 var(--font-ar);
  color: #14110D;
  margin: 0;
  letter-spacing: -0.005em;
}

.space-card__desc {
  font: 400 clamp(13px, 0.95vw, 15px)/1.75 var(--font-ar);
  color: #5A5247;
  margin: 0;
}

/* ─── Hover state ─── */
.space-card:hover {
  transform: translateY(-10px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 4px 8px rgba(80, 60, 30, 0.08),
    0 24px 50px rgba(80, 60, 30, 0.12),
    0 50px 80px rgba(40, 30, 15, 0.12);
}
.space-card:hover .space-card__media img {
  transform: scale(1.06);
  filter: brightness(1) saturate(1.1);
}

/* ═══════════════════════════════════════════════
   IMMERSIVE PANEL HOVER — whole spaces-band becomes image
   ═══════════════════════════════════════════════ */

.spaces-band__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.spaces-band__bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  filter: brightness(0.78) saturate(1.06) blur(8px);
  transition:
    opacity 0.7s cubic-bezier(0.65, 0, 0.35, 1),
    transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.8s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: opacity, transform, filter;
}

.spaces-band__bg-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(8, 6, 5, 0.42) 0%,
      rgba(8, 6, 5, 0.25) 35%,
      rgba(8, 6, 5, 0.55) 100%),
    radial-gradient(ellipse 50% 40% at 20% 20%, rgba(184, 148, 95, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(13, 91, 90, 0.18) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Active state — JS toggles .is-immersive and data-active="N" on the band */
.spaces-band.is-immersive[data-active="1"] .spaces-band__bg-image[data-bg="1"],
.spaces-band.is-immersive[data-active="2"] .spaces-band__bg-image[data-bg="2"],
.spaces-band.is-immersive[data-active="3"] .spaces-band__bg-image[data-bg="3"],
.spaces-band.is-immersive[data-active="4"] .spaces-band__bg-image[data-bg="4"] {
  opacity: 1;
  transform: scale(1);
  filter: brightness(0.78) saturate(1.06) blur(0);
}

.spaces-band.is-immersive .spaces-band__bg-veil {
  opacity: 1;
}

/* ─── Smooth transitions on all hover-affected elements ─── */
.spaces-band__ornaments,
.spaces-band::before,
.spaces__title,
.spaces__title em,
.spaces__sub,
.spaces__accent-line,
.space-card,
.space-card::before,
.space-card__media,
.space-card__title,
.space-card__desc,
.space-card__rule {
  transition-duration: 0.55s;
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}

.space-card {
  transition-property: background, border-color, box-shadow, transform;
}
.space-card::before { transition-property: opacity; }
.space-card__media { transition-property: opacity; }
.space-card__title,
.space-card__desc,
.spaces__title,
.spaces__sub { transition-property: color, text-shadow; }
.space-card__rule,
.spaces__accent-line { transition-property: background; }
.spaces__title em { transition-property: color, text-shadow, -webkit-text-fill-color; }
.spaces-band__ornaments { transition-property: opacity; }
.spaces-band::before { transition-property: border-color; }

/* ── Immersive active state — driven by JS class .is-immersive ── */
.spaces-band.is-immersive::before {
  border-color: rgba(255, 255, 255, 0.18);
}
.spaces-band.is-immersive .spaces-band__ornaments {
  opacity: 0.4;
}

.spaces-band.is-immersive .spaces__title {
  color: #F8F2E3;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.spaces-band.is-immersive .spaces__title em {
  -webkit-text-fill-color: #6FC9C5;
  color: #6FC9C5;
  background: none;
  text-shadow: 0 2px 12px rgba(13, 91, 90, 0.5);
}
.spaces-band.is-immersive .spaces__sub {
  color: rgba(244, 235, 216, 0.85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.spaces-band.is-immersive .spaces__accent-line {
  background: linear-gradient(90deg, #6FC9C5 0%, #E8C786 100%);
}

.spaces-band.is-immersive .space-card {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.spaces-band.is-immersive .space-card::before {
  opacity: 0;
}
.spaces-band.is-immersive .space-card__media {
  opacity: 0;
}
.spaces-band.is-immersive .space-card__title {
  color: #FFFFFF;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.spaces-band.is-immersive .space-card__desc {
  color: rgba(244, 235, 216, 0.85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.spaces-band.is-immersive .space-card__rule {
  background: linear-gradient(90deg,
    rgba(111, 201, 197, 0.6) 0%,
    rgba(232, 199, 134, 0.4) 50%,
    transparent 100%);
}


/* Backdrop sits at z-index 0 — ornaments stay at 1, inner stays at 3 (already set) */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .spaces-band__bg-image,
  .spaces-band__bg-veil {
    transition: opacity 0.3s ease !important;
    transform: none !important;
  }
}

/* ─── Tablet ─── */
@media (max-width: 1100px) {
  .spaces {
    padding: 120px 0 120px;
  }
  .spaces-band {
    padding: 80px 50px 72px;
    border-radius: 32px;
  }
  .spaces-band::before {
    inset: 14px;
    border-radius: 22px;
  }
  .spaces-band__header {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: right;
  }
  .spaces-band__header-meta {
    text-align: right;
    align-items: flex-end;
  }
  .spaces__sub {
    max-width: none;
    text-align: right;
  }
  .spaces-band__tiles {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  .sb-corner {
    width: 60px;
    height: 60px;
  }
}

/* ─── Mobile ─── */
@media (max-width: 600px) {
  .spaces {
    padding: 90px 0 100px;
  }
  .spaces-band {
    padding: 56px 24px 48px;
    border-radius: 26px;
  }
  .spaces-band::before {
    inset: 10px;
    border-radius: 18px;
  }
  .spaces-band__header {
    margin-bottom: 36px;
  }
  .spaces-band__divider {
    margin-bottom: 48px;
  }
  .spaces-band__tiles {
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 440px;
    margin: 0 auto;
  }
  .space-card {
    border-radius: 20px;
  }
  .space-card__media {
    aspect-ratio: 16 / 11;
    border-radius: 20px 20px 0 0;
  }
  .space-card__body {
    padding: 0 22px;
  }
  .sb-corner {
    display: none;
  }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .space-card,
  .space-card__media img {
    transition: none !important;
  }
  .space-card:hover {
    transform: none;
  }
  .space-card:hover .space-card__media img {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════
   PROGRAMS SECTION — Type, Icons, Internal Depth
   ═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   PROGRAMS — Editorial Bento Grid
   ═══════════════════════════════════════════════ */

.programs {
  position: relative;
  padding: 100px 6% 110px;
  overflow: hidden;
  isolation: isolate;
}

/* ── Atmospheric layers ── */
.programs__atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.prog-haze {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.45;
}
.prog-haze--left {
  top: 5%;
  left: -10%;
  width: 38vw;
  height: 38vw;
  background: radial-gradient(circle, rgba(95, 179, 177, 0.12) 0%, transparent 65%);
}
.prog-haze--right {
  bottom: 5%;
  right: -10%;
  width: 40vw;
  height: 40vw;
  background: radial-gradient(circle, rgba(184, 148, 95, 0.14) 0%, transparent 65%);
}
.prog-grain {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* ── Header ── */
.programs__intro {
  max-width: 920px;
  margin: 0 auto 70px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.programs__title {
  font: 800 clamp(34px, 4.8vw, 62px)/1.2 var(--font-display);
  color: #F4EBD8;
  margin: 0 0 20px;
  letter-spacing: -0.01em;
  padding-top: 12px;
  text-shadow:
    0 0 70px rgba(13, 91, 90, 0.2),
    0 2px 10px rgba(0, 0, 0, 0.55);
}
.programs__title em {
  font-style: normal;
  font-weight: 900;
  color: #E8C786;
  -webkit-text-fill-color: #E8C786;
  text-shadow:
    0 0 28px rgba(184, 148, 95, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.5);
}
.programs__subtitle {
  font: 400 clamp(14px, 1.1vw, 17px)/1.75 var(--font-ar);
  color: rgba(216, 188, 145, 0.7);
  max-width: 720px;
  margin: 0 auto;
}

/* ─── Bento Grid: 4 cols × 2 rows, premium asymmetric masonry ───
   NOTE: page is dir="rtl", but the grid itself must stay LTR so the
   visual composition is fixed (01 far-left, 03/06 far-right).
   Each card restores direction: rtl so its Arabic text reads correctly. */
.programs__bento {
  display: grid;
  direction: ltr;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 270px;
  grid-template-areas:
    "card01 card02 card02 card03"
    "card01 card04 card05 card06";
  gap: 22px;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Named-area placements — composition is locked, RTL cannot flip it */
.prog-card[data-step="1"] { grid-area: card01; min-height: 560px; }
.prog-card[data-step="2"] { grid-area: card02; min-height: 270px; }
.prog-card[data-step="3"] { grid-area: card03; min-height: 270px; }
.prog-card[data-step="4"] { grid-area: card04; min-height: 270px; }
.prog-card[data-step="5"] { grid-area: card05; min-height: 270px; }
.prog-card[data-step="6"] { grid-area: card06; min-height: 270px; }

/* ─── Card base — frame removed; each image carries its own border art ─── */
.prog-card {
  position: relative;
  direction: rtl;
  background: rgba(10, 14, 18, 0.5);
  border: none;
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  color: var(--accent);
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: none;
}

/* Dark bottom overlay — lets image show clearly, darkens only where text sits */
.prog-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg,
      transparent 0%,
      transparent 40%,
      rgba(8, 10, 12, 0.55) 70%,
      rgba(8, 10, 12, 0.92) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Card 02 (wide) — horizontal overlay darkening RIGHT side where centered text sits */
.prog-card--wide::after {
  background:
    linear-gradient(270deg,
      rgba(8, 10, 12, 0.84) 0%,
      rgba(8, 10, 12, 0.56) 32%,
      rgba(8, 10, 12, 0.18) 62%,
      rgba(8, 10, 12, 0.06) 100%);
}

/* Cards 04, 05, 06 — focal visuals occupy only ~30% of each image (rest is near-black).
   Overlay must be tiny + targeted to avoid erasing the lit areas. */
.prog-card[data-step="4"]::after,
.prog-card[data-step="5"]::after,
.prog-card[data-step="6"]::after {
  background:
    /* Small focused patch directly under the text glyphs only */
    radial-gradient(ellipse 55% 28% at 78% 92%,
      rgba(8, 10, 12, 0.72) 0%,
      rgba(8, 10, 12, 0.30) 55%,
      transparent 85%),
    /* Very gentle vignette so the card edge doesn't look flat */
    linear-gradient(180deg,
      transparent 75%,
      rgba(8, 10, 12, 0.18) 100%);
}

/* Stronger text legibility on softer-overlay cards — relies on shadow not band */
.prog-card[data-step="4"] .prog-card__name,
.prog-card[data-step="5"] .prog-card__name,
.prog-card[data-step="6"] .prog-card__name {
  text-shadow:
    0 2px 16px rgba(0, 0, 0, 0.95),
    0 1px 4px rgba(0, 0, 0, 0.9);
}
.prog-card[data-step="4"] .prog-card__desc,
.prog-card[data-step="5"] .prog-card__desc,
.prog-card[data-step="6"] .prog-card__desc {
  text-shadow:
    0 1px 10px rgba(0, 0, 0, 0.92),
    0 1px 3px rgba(0, 0, 0, 0.85);
}

/* Corner icon — visually TOP-RIGHT in RTL (logical start of card) for cards 02-06 */
.prog-card__corner-icon {
  position: absolute;
  top: 24px;
  inset-inline-start: 24px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, rgba(217, 205, 184, 0.16));
  background: rgba(12, 16, 20, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  z-index: 6;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.5);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease,
              box-shadow 0.4s ease;
}

/* Card 01 hero — icon positioned at BOTTOM-LEFT visually in RTL (logical end) */
.prog-card--hero .prog-card__corner-icon {
  top: auto;
  inset-inline-start: auto;
  inset-inline-end: 24px;
  bottom: 24px;
}
.prog-card__corner-icon svg {
  width: 54%;
  height: 54%;
  filter: drop-shadow(0 1px 4px color-mix(in srgb, var(--accent) 50%, transparent));
}

/* Text content — anchored at bottom with brief-spec padding */
.prog-card__content {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 32px;
  z-index: 3;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* in RTL, flex-start = right side */
}

.prog-card__name {
  font: 700 26px/1.25 var(--font-ar);
  color: #F7F5F1;
  margin: 0 0 12px;
  letter-spacing: -0.005em;
  transition: color 0.4s ease;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.78);
}

.prog-card__desc {
  font: 400 15.5px/1.8 var(--font-ar);
  color: rgba(247, 245, 241, 0.74);
  margin: 0;
  max-width: 340px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

/* Hero card (01) — larger title for the tall card */
.prog-card--hero .prog-card__name {
  font-size: 32px;
}
.prog-card--hero .prog-card__desc {
  font-size: 17px;
  max-width: 320px;
}
.prog-card--hero .prog-card__content {
  padding: 34px;
}

/* Wide card (02) — text vertically centered on the right (per brief) */
.prog-card--wide .prog-card__content {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  padding: 38px;
}
.prog-card--wide .prog-card__name {
  font-size: 28px;
}
.prog-card--wide .prog-card__desc {
  font-size: 16px;
  max-width: 360px;
}

/* ─── Background image containers — fill entire card ─── */
.prog-card__hero-visual,
.prog-card__bg-scene,
.prog-card__bg-pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.prog-card__hero-visual img,
.prog-card__bg-scene img,
.prog-card__bg-pattern img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Permanent slight zoom — crops the dark vignette baked into each source image
     so the card edge meets live image content, no black frame around the art. */
  transform: scale(1.08);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.5s ease;
}

/* Per-card background positioning — focal point of each themed visual */
.prog-card[data-step="1"] img { object-position: center 32%; }   /* lightbulb upper-center, dark space below for text */
.prog-card[data-step="2"] img { object-position: left center; }  /* boardroom anchored to left half */
.prog-card[data-step="3"] img { object-position: right top; }    /* pin + contour lines on right */
.prog-card[data-step="4"] img { object-position: right bottom; }  /* auditorium seats anchored at their natural lower-right position */
.prog-card[data-step="5"] img { object-position: center 65%; }    /* holographic podium centered, slightly lower */
.prog-card[data-step="6"] img { object-position: right center; }  /* network constellation full visible on right side */

/* ─── Hover — lift + accent glow only (image stays at its permanent scale) ─── */
.prog-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.35),
    0 0 70px var(--accent-soft);
}
.prog-card:hover .prog-card__hero-visual img,
.prog-card:hover .prog-card__bg-scene img,
.prog-card:hover .prog-card__bg-pattern img {
  filter: brightness(1.06) saturate(1.04);
}
.prog-card:hover .prog-card__corner-icon {
  transform: scale(1.06);
  border-color: var(--accent);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.55),
    0 0 18px var(--accent-soft);
}

/* ═══ Tablet ═══ */
@media (max-width: 1024px) {
  .programs__bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-auto-rows: auto;
    grid-template-areas: none;
    gap: 18px;
  }
  .prog-card[data-step="1"] { grid-area: auto / span 2; min-height: 360px; }
  .prog-card[data-step="2"] { grid-area: auto / span 2; min-height: 280px; }
  .prog-card[data-step="3"] { grid-area: auto / auto; min-height: 280px; }
  .prog-card[data-step="4"] { grid-area: auto / auto; min-height: 280px; }
  .prog-card[data-step="5"] { grid-area: auto / auto; min-height: 280px; }
  .prog-card[data-step="6"] { grid-area: auto / auto; min-height: 280px; }
}

/* ═══ Mobile ═══ */
@media (max-width: 600px) {
  .programs { padding: 70px 5% 80px; }
  .programs__intro { margin-bottom: 44px; }
  .programs__title { font-size: clamp(26px, 7vw, 36px); }
  .programs__subtitle { font-size: 14.5px; line-height: 1.7; }
  .programs__bento {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    grid-auto-rows: auto;
    gap: 14px;
  }
  /* All cards same min-height on mobile — no special tall hero */
  .prog-card[data-step] { grid-area: auto / auto; min-height: 290px; }
  .prog-card[data-step="1"] { min-height: 330px; }
  .prog-card {
    border-radius: 16px;
  }
  .prog-card__content {
    padding: 22px;
  }
  .prog-card__name {
    font-size: 23px;
  }
  .prog-card__desc {
    font-size: 14px;
    max-width: 100%;
  }
  .prog-card--hero .prog-card__name { font-size: 25px; }
  .prog-card--hero .prog-card__desc { font-size: 14.5px; }
  /* Card 02 wide also gets bottom-anchored text on mobile */
  .prog-card--wide .prog-card__content {
    top: auto;
    bottom: 0;
    transform: none;
    padding: 22px;
  }
  .prog-card__corner-icon {
    width: 36px;
    height: 36px;
    top: 16px;
    inset-inline-start: 16px;
  }
  .prog-card--hero .prog-card__corner-icon {
    top: auto;
    inset-inline-start: auto;
    inset-inline-end: 18px;
    bottom: 18px;
  }
  .prog-card--wide .prog-card__content {
    top: auto;
    bottom: 0;
    transform: none;
    padding: 24px;
  }
  .prog-card--wide .prog-card__name { font-size: 24px; }
  .prog-card--wide .prog-card__desc { font-size: 14.5px; }
  .prog-card--wide::after {
    background:
      linear-gradient(180deg,
        transparent 0%,
        transparent 40%,
        rgba(8, 10, 12, 0.55) 70%,
        rgba(8, 10, 12, 0.92) 100%);
  }
}

/* ═══ Reduced motion ═══ */
@media (prefers-reduced-motion: reduce) {
  .prog-card, .prog-card__corner-icon {
    transition: none !important;
  }
  .prog-card:hover { transform: none; }
  .prog-card:hover .prog-card__corner-icon { transform: none; }
}

/* ═══════════════════════════════════════════════
   CLOSING CTA — Cream Luxury Editorial
   Building aerial photo as faint warm texture beneath a
   limestone wash, editorial frame, copper-gradient accents.
   ═══════════════════════════════════════════════ */

.closing {
  position: relative;
  min-height: 100vh;
  padding: clamp(90px, 12vh, 160px) 6%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

/* ─── Layered background: building photo + warm cream wash ─── */
.closing__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.closing__photo {
  position: absolute;
  inset: 0;
}
.closing__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: blur(6px) saturate(1.18) brightness(0.94);
  transform: scale(1.08);
}

/* Cream wash — building shows through as a barely-there warm texture */
.closing__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 95% 75% at center 42%,
      rgba(247, 245, 241, 0.74) 0%,
      rgba(228, 220, 201, 0.86) 55%,
      rgba(194, 180, 154, 0.93) 100%),
    linear-gradient(180deg,
      rgba(247, 245, 241, 0.30) 0%,
      transparent 35%,
      transparent 65%,
      rgba(196, 106, 54, 0.08) 100%);
}

/* Edge vignette — warm cinematic framing */
.closing__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 95% 88% at center 50%,
      transparent 35%,
      rgba(74, 48, 26, 0.18) 78%,
      rgba(48, 30, 16, 0.36) 100%);
}

/* Tactile grain — paper/parchment feel */
.closing__grain {
  position: absolute;
  inset: 0;
  opacity: 0.10;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px;
}

/* ─── Editorial frame ─── */
.closing__frame {
  position: relative;
  z-index: 5;
  max-width: 900px;
  width: 100%;
  text-align: center;
  padding: 82px clamp(28px, 5vw, 80px) 68px;
  isolation: isolate;
}

/* Decorative corner ticks — luxury editorial frame, scaled for full-screen */
.closing__frame::before,
.closing__frame::after {
  content: '';
  position: absolute;
  width: 56px;
  height: 56px;
  border: 0 solid rgba(168, 85, 37, 0.55);
  pointer-events: none;
}
.closing__frame::before {
  top: 8px;
  inset-inline-start: 8px;
  border-top-width: 1px;
  border-inline-start-width: 1px;
}
.closing__frame::after {
  bottom: 8px;
  inset-inline-end: 8px;
  border-bottom-width: 1px;
  border-inline-end-width: 1px;
}

/* ─── Ornament above title ─── */
.closing__ornament {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.closing__ornament-bar {
  display: inline-block;
  width: clamp(36px, 7vw, 56px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--terracotta-dark), transparent);
}
.closing__ornament-diamond {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1px solid var(--terracotta);
  transform: rotate(45deg);
  background: rgba(196, 106, 54, 0.18);
}

/* ─── Title — dark on cream luxury, single line on desktop ─── */
.closing__title {
  font: 700 clamp(34px, 5vw, 72px)/1.2 var(--font-display);
  color: #1A1410;
  margin: 0 auto 28px;
  letter-spacing: -0.012em;
  padding-top: 6px;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(247, 245, 241, 0.55);
}

.closing__word {
  display: inline-block;
  overflow: hidden;
  margin: 0 6px;
  padding-top: 0.18em;
  padding-bottom: 0.08em;
  vertical-align: top;
}
.closing__word-inner {
  display: inline-block;
  will-change: transform;
}

.closing__word--accent {
  font-weight: 800;
  color: #A85525;
  text-shadow:
    0 1px 0 rgba(247, 245, 241, 0.45),
    0 2px 14px rgba(168, 85, 37, 0.18);
}

/* Hair rule below title */
.closing__rule {
  width: 84px;
  height: 1px;
  margin: 0 auto 32px;
  background: linear-gradient(90deg, transparent, rgba(168, 85, 37, 0.7), transparent);
}

/* ─── Body ─── */
.closing__body {
  font: 400 clamp(15px, 1.4vw, 18px)/1.85 var(--font-ar);
  color: rgba(26, 20, 16, 0.74);
  max-width: 640px;
  margin: 0 auto 44px;
}

/* ─── CTA wrap ─── */
.closing__cta-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}

.btn-primary--lg {
  padding: 20px 48px;
  font-size: 16px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* Closing-specific CTA — premium copper for cream context */
.closing__cta {
  background: linear-gradient(135deg, #C46A36 0%, #A85525 100%);
  color: #F7F5F1;
  border: 1px solid rgba(168, 85, 37, 0.5);
  box-shadow:
    0 18px 44px rgba(168, 85, 37, 0.32),
    inset 0 1px 0 rgba(247, 245, 241, 0.22);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.35s ease;
}
.closing__cta:hover {
  background: linear-gradient(135deg, #D4844F 0%, #C46A36 100%);
  transform: translateY(-2px);
  box-shadow:
    0 22px 54px rgba(168, 85, 37, 0.42),
    inset 0 1px 0 rgba(247, 245, 241, 0.28);
}

/* ─── Divider ─── */
.closing__divider {
  width: 60px;
  height: 1px;
  margin: 0 auto 30px;
  background: linear-gradient(90deg, transparent, rgba(26, 20, 16, 0.32), transparent);
}

/* ─── Audience ─── */
.closing__audience {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}

.closing__audience-item {
  font: 500 15.5px var(--font-ar);
  color: rgba(26, 20, 16, 0.62);
  letter-spacing: 0.06em;
  transition: color 0.3s ease;
}
.closing__audience-item:hover {
  color: var(--terracotta-dark);
}

.closing__audience-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--terracotta);
  box-shadow: 0 0 8px rgba(196, 106, 54, 0.55);
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .closing {
    padding: 110px 5%;
  }
  .closing__title {
    font-size: clamp(24px, 6vw, 46px);
    white-space: normal;
  }
  .closing__frame {
    padding: 64px 24px 56px;
  }
}
@media (max-width: 600px) {
  .closing__title {
    white-space: normal;
    font-size: clamp(24px, 7.5vw, 40px);
  }
}
@media (max-width: 600px) {
  .closing {
    padding: 92px 5%;
    min-height: auto;
  }
  .closing__frame {
    padding: 54px 20px 48px;
  }
  .closing__frame::before,
  .closing__frame::after {
    width: 22px;
    height: 22px;
  }
  .closing__ornament-bar { width: 40px; }
  .closing__body { margin-bottom: 36px; }
  .closing__cta-wrap { margin-bottom: 40px; }
  .closing__audience {
    gap: 14px;
  }
  .closing__audience-item {
    font-size: 13.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .closing__photo img {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════
   REGISTRATION — Concierge Intake (premium dark)
   Glass card with corner ticks, copper-teal stepper,
   underline luxury form fields.
   ═══════════════════════════════════════════════ */

.register {
  position: relative;
  padding: clamp(80px, 12vh, 130px) 6%;
  background: var(--bg-deepest);
  overflow: hidden;
  isolation: isolate;
}

/* ─── Atmospheric background ─── */
.register__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.register__haze {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.4;
}
.register__haze--left {
  top: -8%;
  left: -10%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(196, 106, 54, 0.13) 0%, transparent 65%);
}
.register__haze--right {
  bottom: -12%;
  right: -10%;
  width: 55vw;
  height: 55vw;
  background: radial-gradient(circle, rgba(13, 91, 90, 0.16) 0%, transparent 65%);
}
.register__grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(217, 205, 184, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 205, 184, 0.025) 1px, transparent 1px);
  background-size: 84px 84px;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at center, black 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 60% at center, black 0%, transparent 78%);
}
.register__grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px;
}

.register__container {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 0 auto;
}

/* ─── Header ─── */
.register__header {
  text-align: center;
  margin-bottom: 56px;
}
.register__header .eyebrow {
  justify-content: center;
}

.register__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.18;
  color: #F7F5F1;
  margin: 22px 0 18px;
  letter-spacing: -0.01em;
}
.register__title em {
  font-style: normal;
  font-weight: 800;
  color: var(--teal-light);
}

.register__subtitle {
  font-family: var(--font-ar);
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.8;
  color: rgba(247, 245, 241, 0.62);
  max-width: 640px;
  margin: 0 auto;
}

/* ─── Form panel — Glass concierge card ─── */
.register__form-wrap {
  position: relative;
  background:
    linear-gradient(160deg, rgba(28, 33, 41, 0.62) 0%, rgba(16, 20, 26, 0.78) 100%);
  border: 1px solid rgba(217, 205, 184, 0.13);
  border-radius: 22px;
  padding: 52px clamp(24px, 4vw, 56px) 46px;
  max-width: 820px;
  margin: 0 auto;
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  box-shadow:
    inset 0 1px 0 rgba(247, 245, 241, 0.05),
    0 30px 70px rgba(0, 0, 0, 0.45);
  isolation: isolate;
}

/* Decorative corner ticks — luxury frame */
.register__form-wrap::before,
.register__form-wrap::after {
  content: '';
  position: absolute;
  width: 38px;
  height: 38px;
  border: 0 solid rgba(196, 106, 54, 0.45);
  pointer-events: none;
}
.register__form-wrap::before {
  top: 14px;
  inset-inline-start: 14px;
  border-top-width: 1px;
  border-inline-start-width: 1px;
}
.register__form-wrap::after {
  bottom: 14px;
  inset-inline-end: 14px;
  border-bottom-width: 1px;
  border-inline-end-width: 1px;
}

/* ─── Premium stepper progress ─── */
.register__progress {
  margin-bottom: 44px;
  position: relative;
}

/* Line sits between the outermost circles, not behind them.
   Each step is 1/3 of the width with the circle centered → circle center at 1/6.
   Add circle radius (19px) + a 6px breathing gap so the line clears the circle. */
.register__progress-bar {
  position: absolute;
  top: 18px;
  inset-inline-start: calc(100% / 6 + 25px);
  inset-inline-end: calc(100% / 6 + 25px);
  height: 1px;
  background: rgba(217, 205, 184, 0.16);
  overflow: hidden;
  z-index: 0;
}
.register__progress-fill {
  height: 100%;
  background: linear-gradient(90deg,
    var(--teal-light) 0%,
    var(--teal-signature) 45%,
    var(--terracotta) 100%);
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 12px rgba(196, 106, 54, 0.35);
}

.register__progress-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  gap: 12px;
}

.register__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: all 0.4s ease;
  font: 500 13px var(--font-ar);
}

.register__step-circle {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(16, 20, 26, 0.95);
  border: 1.5px solid rgba(217, 205, 184, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 14px var(--font-ar);
  color: rgba(247, 245, 241, 0.55);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.register__step-num {
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: block;
}

.register__step-check {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  color: var(--teal-light);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.register__step-label {
  font: 500 13px var(--font-ar);
  color: rgba(247, 245, 241, 0.45);
  letter-spacing: 0.04em;
  transition: color 0.4s ease;
}

/* Active step — copper highlight */
.register__step.is-active .register__step-circle {
  background: rgba(196, 106, 54, 0.12);
  border-color: var(--terracotta);
  color: var(--terracotta);
  box-shadow:
    0 0 0 4px rgba(196, 106, 54, 0.12),
    0 4px 16px rgba(196, 106, 54, 0.3);
  transform: scale(1.06);
}
.register__step.is-active .register__step-label {
  color: var(--terracotta);
  font-weight: 600;
}

/* Done step — teal check */
.register__step.is-done .register__step-circle {
  background: rgba(74, 139, 142, 0.14);
  border-color: var(--teal-light);
  color: var(--teal-light);
}
.register__step.is-done .register__step-num {
  opacity: 0;
  transform: scale(0.4);
}
.register__step.is-done .register__step-check {
  opacity: 1;
  transform: scale(1);
}
.register__step.is-done .register__step-label {
  color: rgba(74, 139, 142, 0.95);
}

/* ─── Step panels ─── */
.register__step-panel {
  border: none;
  padding: 0;
  margin: 0;
  display: none;
  animation: regStepEnter 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.register__step-panel.is-active {
  display: block;
}
@keyframes regStepEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.register__step-title {
  font: 700 clamp(20px, 2.5vw, 26px) var(--font-ar);
  color: #F7F5F1;
  margin-bottom: 6px;
  padding: 0;
  letter-spacing: -0.005em;
}

.register__step-hint {
  font: 400 14px var(--font-ar);
  color: rgba(247, 245, 241, 0.5);
  margin-bottom: 32px;
}

/* ─── Role cards — premium pick ─── */
.register__role-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 36px;
}

.role-row {
  position: relative;
  display: block;
  cursor: pointer;
}
.role-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.role-row__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: rgba(15, 18, 24, 0.55);
  border: 1px solid rgba(217, 205, 184, 0.10);
  border-radius: 14px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Accent rail at logical start edge (right in RTL) */
.role-row__inner::before {
  content: '';
  position: absolute;
  top: 16px;
  bottom: 16px;
  inset-inline-start: 0;
  width: 2px;
  background: transparent;
  border-radius: 2px;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

.role-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(74, 139, 142, 0.08);
  border: 1px solid rgba(74, 139, 142, 0.25);
  border-radius: 12px;
  color: var(--teal-light);
  transition: all 0.35s ease;
  flex-shrink: 0;
}

.role-row__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.role-row__name {
  font: 700 17px var(--font-ar);
  color: #F7F5F1;
  transition: color 0.3s;
}
.role-row__desc {
  font: 400 13.5px/1.55 var(--font-ar);
  color: rgba(247, 245, 241, 0.55);
  transition: color 0.3s;
}

.role-row__check {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(217, 205, 184, 0.18);
  border-radius: 50%;
  color: transparent;
  background: rgba(11, 13, 16, 0.6);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.role-row:hover .role-row__inner {
  border-color: rgba(217, 205, 184, 0.22);
  background: rgba(20, 24, 31, 0.7);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.role-row:hover .role-row__inner::before {
  background: rgba(74, 139, 142, 0.45);
}
.role-row:hover .role-row__icon {
  border-color: rgba(74, 139, 142, 0.5);
}

.role-row input:checked + .role-row__inner {
  border-color: rgba(196, 106, 54, 0.85);
  background: rgba(196, 106, 54, 0.06);
  box-shadow:
    0 0 0 1px rgba(196, 106, 54, 0.45),
    0 12px 36px rgba(196, 106, 54, 0.15),
    0 0 24px rgba(196, 106, 54, 0.12);
  transform: translateY(-2px);
}
.role-row input:checked + .role-row__inner::before {
  background: var(--terracotta);
  box-shadow: 0 0 10px rgba(196, 106, 54, 0.6);
}
.role-row input:checked + .role-row__inner .role-row__icon {
  background: rgba(196, 106, 54, 0.15);
  border-color: var(--terracotta);
  color: var(--terracotta);
}
.role-row input:checked + .role-row__inner .role-row__check {
  border-color: var(--terracotta);
  background: var(--terracotta);
  color: #F7F5F1;
}

/* ─── Interest chips ─── */
.register__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.reg-chip {
  position: relative;
  cursor: pointer;
}
.reg-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.reg-chip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: rgba(15, 18, 24, 0.55);
  border: 1px solid rgba(217, 205, 184, 0.10);
  border-radius: 100px;
  font: 500 14px var(--font-ar);
  color: rgba(247, 245, 241, 0.78);
  transition: all 0.3s ease;
}

.reg-chip span::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(217, 205, 184, 0.3);
  transition: all 0.3s ease;
}

.reg-chip:hover span {
  border-color: rgba(217, 205, 184, 0.22);
  background: rgba(20, 24, 31, 0.7);
  color: #F7F5F1;
}

.reg-chip input:checked + span {
  background: rgba(196, 106, 54, 0.12);
  border-color: var(--terracotta);
  color: var(--terracotta);
  box-shadow: 0 0 18px rgba(196, 106, 54, 0.25);
}
.reg-chip input:checked + span::before {
  background: var(--terracotta);
  border-color: var(--terracotta);
  box-shadow: 0 0 8px rgba(196, 106, 54, 0.6);
}

/* ─── Form fields — underline luxury ─── */
.register__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 24px;
  margin-bottom: 40px;
}

.reg-field {
  display: flex;
  flex-direction: column;
  position: relative;
}

.reg-field:nth-child(1),
.reg-field:nth-child(2) {
  grid-column: span 2;
}

.reg-field__label {
  font: 500 12.5px var(--font-ar);
  color: rgba(247, 245, 241, 0.62);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.04em;
}

.reg-field__optional {
  font: 400 11px var(--font-ar);
  color: rgba(247, 245, 241, 0.32);
}

.reg-field__input {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(217, 205, 184, 0.22);
  border-radius: 0;
  padding: 12px 4px 14px;
  font: 500 16px var(--font-ar);
  color: #F7F5F1;
  cursor: auto;
  transition: border-color 0.3s ease, background 0.3s ease;
  width: 100%;
}

.reg-field__input:focus {
  outline: none;
  border-bottom-color: var(--terracotta);
  background: linear-gradient(to top, rgba(196, 106, 54, 0.05), transparent 60%);
}

.reg-field__input::placeholder {
  color: rgba(247, 245, 241, 0.28);
  font-weight: 400;
}

.reg-field__error {
  font: 400 12px var(--font-ar);
  color: #E44966;
  min-height: 18px;
  margin-top: 6px;
  opacity: 0;
  transition: opacity 0.3s;
}

.reg-field.has-error .reg-field__error {
  opacity: 1;
}

.reg-field.has-error .reg-field__input {
  border-bottom-color: #E44966;
}

/* ─── Actions ─── */
.register__actions {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.register__actions .btn-primary[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.register__step-panel[data-panel="1"] .register__actions {
  justify-content: flex-end;
}

/* ─── Success state ─── */
.register__success {
  display: none;
  text-align: center;
  padding: 32px 16px;
  animation: regStepEnter 0.65s ease;
}
.register__success.is-active {
  display: block;
}

.register__success-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
  animation: successPop 0.7s cubic-bezier(0.16, 1.4, 0.3, 1);
}

@keyframes successPop {
  0%   { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.register__success-title {
  font: 700 clamp(24px, 3vw, 36px) var(--font-display);
  color: #F7F5F1;
  margin-bottom: 14px;
}

.register__success-body {
  font: 400 clamp(14px, 1.3vw, 16px)/1.85 var(--font-ar);
  color: rgba(247, 245, 241, 0.65);
  max-width: 480px;
  margin: 0 auto 16px;
}

.register__success-meta {
  font: 400 12.5px var(--font-ar);
  color: rgba(247, 245, 241, 0.4);
  letter-spacing: 0.05em;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .register { padding: 80px 5% 70px; }
  .register__form-wrap {
    padding: 40px 22px 36px;
    border-radius: 18px;
  }
  .register__form-wrap::before,
  .register__form-wrap::after {
    width: 26px;
    height: 26px;
  }
  .register__progress-bar {
    inset-inline-start: calc(100% / 6 + 22px);
    inset-inline-end: calc(100% / 6 + 22px);
  }
  .register__step-label {
    font-size: 11.5px;
  }
  .register__step-circle {
    width: 34px;
    height: 34px;
  }
  .role-row__inner { padding: 16px 18px; gap: 14px; }
  .role-row__icon { width: 44px; height: 44px; }
  .role-row__name { font-size: 15.5px; }
  .role-row__desc { font-size: 12.5px; }
}

@media (max-width: 600px) {
  .register__fields { grid-template-columns: 1fr; gap: 22px; }
  .reg-field:nth-child(n) { grid-column: span 1; }
  .register__progress-steps {
    gap: 6px;
  }
  /* Smaller inset so progress bar isn't squeezed to nothing on narrow phones */
  .register__progress-bar {
    inset-inline-start: calc(100% / 6 + 16px);
    inset-inline-end: calc(100% / 6 + 16px);
  }
  .register__step-label {
    font-size: 11px;
    letter-spacing: 0.02em;
  }
  .register__step-circle {
    width: 32px;
    height: 32px;
  }
  .register__progress-bar {
    top: 16px;
  }
}

/* ─── Footer (Phase 5) ─── */
.footer {
  position: relative;
  background: var(--bg-deepest);
  border-top: 1px solid var(--ink-06);
  padding: 80px 6% 32px;
  z-index: 1;
}

.footer__main {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--ink-06);
}

.footer__col-title {
  font-family: var(--font-ar);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-100);
  margin-bottom: 24px;
  letter-spacing: 0.05em;
}

.footer__col--brand .footer__logo img {
  height: 36px;
  width: auto;
  margin-bottom: 16px;
}

.footer__tagline {
  font-family: var(--font-ar);
  font-weight: 400;
  font-size: 14px;
  color: var(--ink-80);
  margin-bottom: 12px;
}

.footer__address {
  font-family: var(--font-ar);
  font-weight: 300;
  font-size: 13px;
  color: var(--ink-40);
}

.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__list a {
  font-family: var(--font-ar);
  font-weight: 400;
  font-size: 14px;
  color: var(--ink-60);
  text-decoration: none;
  transition: color 0.3s;
}

.footer__list a:hover {
  color: var(--teal-signature);
}

.footer__social {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.footer__social-link {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink-12);
  border-radius: 100px;
  color: var(--ink-60);
  text-decoration: none;
  transition: all 0.3s;
}

.footer__social-link:hover {
  border-color: var(--teal-signature);
  color: var(--teal-signature);
  background: rgba(13, 91, 90, 0.06);
}

.footer__bottom {
  max-width: 1320px;
  margin: 0 auto;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer__copy,
.footer__evc {
  font-family: var(--font-ar);
  font-weight: 300;
  font-size: 12px;
  color: var(--ink-40);
}

.footer__evc span {
  color: var(--ink-60);
  font-weight: 500;
}

.footer__admin-link {
  display: inline-block;
  margin-inline-start: 14px;
  padding: 4px 12px;
  font: 500 11px var(--font-ar);
  color: rgba(247, 245, 241, 0.45);
  border: 1px solid rgba(217, 205, 184, 0.14);
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: all 0.3s ease;
}
.footer__admin-link:hover {
  color: var(--terracotta);
  border-color: var(--terracotta);
  background: rgba(196, 106, 54, 0.06);
}

@media (max-width: 768px) {
  .footer { padding: 60px 5% 24px; }
  .footer__main {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 40px;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    text-align: right;
  }
}

/* ═══════════════════════════════════════════════
   ROADMAP — Four-Stage Journey Diagram
   Flowing ribbon path with circular stations
   ═══════════════════════════════════════════════ */

.rm-section {
  position: relative;
  padding: 100px 6% 110px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(78, 50, 28, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, #0F0C0A 0%, #14110D 50%, #0F0C0A 100%);
}

.rm-section__atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.rm-haze {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.5;
}
.rm-haze--left {
  top: 10%;
  left: -14%;
  width: 44vw;
  height: 44vw;
  background: radial-gradient(circle, rgba(95, 179, 177, 0.13) 0%, transparent 65%);
  animation: rmHazeDrift 36s ease-in-out infinite;
}
.rm-haze--right {
  bottom: 5%;
  right: -12%;
  width: 42vw;
  height: 42vw;
  background: radial-gradient(circle, rgba(184, 148, 95, 0.14) 0%, transparent 65%);
  animation: rmHazeDrift 40s ease-in-out infinite reverse;
}
@keyframes rmHazeDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(30px, -25px) scale(1.06); }
}

.rm-grain {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* ─── Section Header ─── */
.rm-section__header {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto 70px;
}

.rm-section__title {
  font: 800 clamp(34px, 4.8vw, 62px)/1.2 var(--font-display);
  color: #F4EBD8;
  margin: 0;
  letter-spacing: -0.01em;
  padding-top: 12px;
  white-space: nowrap;
  text-shadow:
    0 0 70px rgba(13, 91, 90, 0.2),
    0 2px 10px rgba(0, 0, 0, 0.55);
}
.rm-section__title em {
  font-style: normal;
  font-weight: 900;
  color: #E8C786;
  -webkit-text-fill-color: #E8C786;
  text-shadow:
    0 0 28px rgba(184, 148, 95, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ─── Journey container — 3-row grid for predictable alignment ─── */
.rm-journey {
  position: relative;
  z-index: 3;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: minmax(150px, 1fr) 200px minmax(150px, 1fr);
  column-gap: 20px;
  align-items: stretch;
}

/* The SVG ribbon — anchored to the middle (wave) row, spanning all 4 columns */
.rm-journey__ribbon {
  grid-row: 2;
  grid-column: 1 / -1;
  position: relative;
  width: 100%;
  height: 200px;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.4));
}

/* ─── Station Circles ─── */
.rm-circle {
  grid-row: 2;
  width: 124px;
  height: 124px;
  justify-self: center;
  z-index: 3;
  isolation: isolate;
  cursor: pointer;
  pointer-events: auto;
}

/* High circles (steps 2, 4) sit at top of wave row.
   Low circles (steps 1, 3) sit at bottom of wave row. */
.rm-circle[data-step="1"] { grid-column: 1; align-self: end; }
.rm-circle[data-step="2"] { grid-column: 2; align-self: start; }
.rm-circle[data-step="3"] { grid-column: 3; align-self: end; }
.rm-circle[data-step="4"] { grid-column: 4; align-self: start; }

.rm-circle__halo {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 65%);
  filter: blur(16px);
  opacity: 0.7;
  z-index: 0;
  transition: opacity 0.5s ease, inset 0.5s ease;
}

.rm-circle__inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 235, 200, 0.08) 0%, transparent 60%),
    linear-gradient(160deg, rgba(34, 28, 22, 0.95) 0%, rgba(18, 14, 10, 0.98) 100%);
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, rgba(184, 148, 95, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  z-index: 1;
  box-shadow:
    0 1px 0 rgba(255, 235, 200, 0.08) inset,
    0 10px 28px rgba(0, 0, 0, 0.55),
    0 0 24px color-mix(in srgb, var(--accent) 18%, transparent);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.5s ease,
              box-shadow 0.5s ease;
}

.rm-circle__inner svg {
  width: 50%;
  height: 50%;
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--accent) 40%, transparent));
}

/* Inner subtle dashed ring (cartographic detail) */
.rm-circle__inner::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--accent) 25%, transparent);
  pointer-events: none;
}

/* Hover */
.rm-circle:hover .rm-circle__halo {
  opacity: 1;
  inset: -22px;
}
.rm-circle:hover .rm-circle__inner {
  transform: scale(1.06);
  border-color: var(--accent);
  box-shadow:
    0 1px 0 rgba(255, 235, 200, 0.12) inset,
    0 14px 36px rgba(0, 0, 0, 0.6),
    0 0 50px color-mix(in srgb, var(--accent) 32%, transparent);
}

/* ─── Labels ─── */
.rm-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 12px;
  z-index: 2;
}

/* Low labels (steps 1, 3) → row 3 (below the wave) */
.rm-label--low {
  grid-row: 3;
  justify-content: flex-start;
}
.rm-label[data-step="1"] { grid-column: 1; }
.rm-label[data-step="3"] { grid-column: 3; }

/* High labels (steps 2, 4) → row 1 (above the wave) */
.rm-label--high {
  grid-row: 1;
  justify-content: flex-end;
}
.rm-label[data-step="2"] { grid-column: 2; }
.rm-label[data-step="4"] { grid-column: 4; }

/* Connector — vertical line bridging label to circle */
.rm-label__connector {
  display: block;
  width: 1px;
  height: 24px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 60%, transparent) 0%,
    transparent 100%);
}
.rm-label--low .rm-label__connector {
  margin-bottom: 10px;
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--accent) 60%, transparent) 0%,
    transparent 100%);
}
.rm-label--high .rm-label__connector {
  margin-top: 10px;
}

/* Number badge */
.rm-label__num {
  display: inline-block;
  font: 700 13px var(--font-en);
  letter-spacing: 0.22em;
  color: var(--accent);
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: 2px;
  margin-bottom: 12px;
}
.rm-label--high .rm-label__num {
  margin-top: 0;
  margin-bottom: 0;
  order: 2;
  margin-top: 8px;
}

.rm-label__title {
  font: 800 clamp(20px, 1.5vw, 24px)/1.3 var(--font-ar);
  color: #F4EBD8;
  margin: 0 0 10px;
  letter-spacing: -0.005em;
  transition: color 0.4s ease;
}

.rm-label__desc {
  font: 400 clamp(13px, 0.95vw, 15px)/1.7 var(--font-ar);
  color: rgba(232, 220, 198, 0.7);
  margin: 0;
}

/* Hover sync between circle and label (via JS or sibling combinator if possible) */
.rm-circle:hover ~ .rm-label[data-step="1"] .rm-label__title,
.rm-circle:hover ~ .rm-label[data-step="2"] .rm-label__title,
.rm-circle:hover ~ .rm-label[data-step="3"] .rm-label__title,
.rm-circle:hover ~ .rm-label[data-step="4"] .rm-label__title {
  /* matched via JS for precision */
}

/* ═══ Title responsive: allow wrap on smaller screens ═══ */
@media (max-width: 720px) {
  .rm-section__title { white-space: normal; }
}

/* ═══ Tablet (≤ 1024px) — collapse to single-column stations ═══ */
@media (max-width: 1024px) {
  .rm-section { padding: 110px 5% 120px; }
  .rm-journey {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    max-width: 720px;
    gap: 48px 24px;
  }
  .rm-journey__ribbon { display: none; }
  .rm-circle {
    grid-row: auto !important;
    grid-column: auto !important;
    align-self: auto !important;
    width: 110px;
    height: 110px;
    margin-bottom: -32px;
    order: 0;
  }
  .rm-label {
    grid-row: auto !important;
    grid-column: auto !important;
    order: 1;
    padding-top: 32px;
  }
  .rm-label__connector { display: none; }
  /* Pair each circle with its label using a wrapping flow */
  .rm-circle[data-step="1"], .rm-label[data-step="1"] { display: contents; }
}

/* ═══ Mobile (≤ 600px) — Vertical timeline: small circle + side-by-side label ═══ */
@media (max-width: 600px) {
  .rm-section { padding: 80px 5% 90px; }
  .rm-section__header { margin-bottom: 48px; }
  .rm-section__title {
    font-size: clamp(26px, 7vw, 38px);
    line-height: 1.25;
  }

  /* Two-column layout: circle (right in RTL) + label text (left, flowing to right) */
  .rm-journey {
    position: relative;
    grid-template-columns: 84px 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
    max-width: 100%;
    column-gap: 18px;
    row-gap: 24px;
    align-items: center;
  }
  .rm-journey__ribbon { display: none !important; }

  /* Reset all explicit grid placements — !important required to defeat
     the more-specific desktop rules like .rm-label--low + data-step="1" */
  /* Defeat the tablet rule (.rm-circle[data-step="1"], .rm-label[data-step="1"]
     { display: contents }) which promotes station 1's children as grid items */
  .rm-circle[data-step="1"] { display: block !important; }
  .rm-label[data-step="1"] { display: flex !important; flex-direction: column !important; }

  .rm-circle,
  .rm-circle--low,
  .rm-circle--high,
  .rm-circle[data-step] {
    grid-row: auto !important;
    grid-column: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 74px !important;
    height: 74px !important;
    margin: 0 !important;
  }
  .rm-circle__halo { inset: -10px; filter: blur(12px); }
  .rm-circle__inner::after { inset: 8px; }
  .rm-circle__inner svg { width: 46%; height: 46%; }

  .rm-label,
  .rm-label--low,
  .rm-label--high {
    grid-row: auto !important;
    grid-column: 2 !important;
    order: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: right !important;
    padding: 0 !important;
    justify-self: stretch !important;
  }
  .rm-label__connector { display: none !important; }
  .rm-label__num {
    margin: 0 0 6px !important;
    padding: 2px 8px;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    order: 0 !important;
    align-self: flex-start !important;
  }
  .rm-label__title {
    width: 100%;
    font-size: 19px;
    margin: 0 0 5px;
    line-height: 1.3;
  }
  .rm-label__desc {
    width: 100%;
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(232, 220, 198, 0.72);
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* Subtle vertical accent line connecting circles (RTL: right edge) */
  .rm-journey::before {
    content: '';
    position: absolute;
    top: 40px;
    bottom: 40px;
    inset-inline-start: 42px;
    width: 1px;
    background: linear-gradient(180deg,
      transparent,
      rgba(184, 148, 95, 0.22) 12%,
      rgba(184, 148, 95, 0.22) 88%,
      transparent);
    z-index: 0;
    pointer-events: none;
  }
}

/* ═══ Reduced motion ═══ */
@media (prefers-reduced-motion: reduce) {
  .rm-haze, .rm-circle__halo, .rm-circle__inner {
    animation: none !important;
    transition: none !important;
  }
  .rm-circle:hover .rm-circle__inner { transform: none; }
}

/* ─── Section Transition Bridges ─── */
#spotlight,
#spaces,
#roadmap,
#programs,
#closing,
#register {
  position: relative;
  isolation: isolate;
}

#spotlight {
  --bridge-before-height: 160px;
  --bridge-before: linear-gradient(180deg, rgba(11, 13, 16, 0.92) 0%, rgba(11, 13, 16, 0.4) 55%, transparent 100%);
  --bridge-after-height: 140px;
  --bridge-after: linear-gradient(0deg, rgba(11, 13, 16, 0.85) 0%, rgba(11, 13, 16, 0.3) 60%, transparent 100%);
}

#spaces {
  --bridge-before-height: 140px;
  --bridge-before: linear-gradient(180deg, rgba(11, 13, 16, 0.9) 0%, rgba(11, 13, 16, 0.35) 55%, transparent 100%);
  --bridge-after-height: 140px;
  --bridge-after: linear-gradient(0deg, rgba(11, 13, 16, 0.9) 0%, rgba(11, 13, 16, 0.35) 55%, transparent 100%);
}

#roadmap {
  --bridge-before-height: 140px;
  --bridge-before: linear-gradient(180deg, rgba(11, 13, 16, 0.85) 0%, rgba(11, 13, 16, 0.3) 55%, transparent 100%);
  --bridge-after-height: 140px;
  --bridge-after: linear-gradient(0deg, rgba(11, 13, 16, 0.85) 0%, rgba(11, 13, 16, 0.3) 55%, transparent 100%);
}

#programs {
  --bridge-before-height: 140px;
  --bridge-before: linear-gradient(180deg, rgba(11, 13, 16, 0.85) 0%, rgba(11, 13, 16, 0.3) 55%, transparent 100%);
  --bridge-after-height: 140px;
  --bridge-after: linear-gradient(0deg, rgba(11, 13, 16, 0.85) 0%, rgba(11, 13, 16, 0.3) 55%, transparent 100%);
}

#closing {
  --bridge-before-height: 90px;
  --bridge-before: linear-gradient(180deg, rgba(11, 13, 16, 0.55) 0%, rgba(11, 13, 16, 0.15) 60%, transparent 100%);
  --bridge-after-height: 90px;
  --bridge-after: linear-gradient(0deg, rgba(11, 13, 16, 0.55) 0%, rgba(11, 13, 16, 0.15) 60%, transparent 100%);
}

#register {
  --bridge-before-height: 140px;
  --bridge-before: linear-gradient(180deg, rgba(11, 13, 16, 0.85) 0%, rgba(11, 13, 16, 0.3) 55%, transparent 100%);
  --bridge-after-height: 140px;
  --bridge-after: linear-gradient(0deg, rgba(11, 13, 16, 0.85) 0%, rgba(11, 13, 16, 0.3) 55%, transparent 100%);
}

#spotlight::before,
#spaces::before,
#roadmap::before,
#programs::before,
#closing::before,
#register::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bridge-before-height, 200px);
  background: var(--bridge-before, linear-gradient(
    180deg,
    var(--bg-deepest) 0%,
    rgba(14, 17, 23, 0.6) 40%,
    transparent 100%
  ));
  pointer-events: none;
  z-index: 3;
}

#spotlight::after,
#spaces::after,
#roadmap::after,
#programs::after,
#closing::after,
#register::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bridge-after-height, 200px);
  background: var(--bridge-after, linear-gradient(
    0deg,
    var(--bg-deepest) 0%,
    rgba(14, 17, 23, 0.6) 40%,
    transparent 100%
  ));
  pointer-events: none;
  z-index: 3;
}

/* Spaces uses its own rounded cream panel edge instead of section fade overlays. */

/* ═══════════════════════════════════════════════
   MOBILE POLISH — comprehensive fit & finish for ≤600px phones
   ═══════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Hero — tighter padding + smaller flourish to free space for content */
  .hero__content {
    padding-top: 12vh;
    padding-bottom: 12vh;
  }
  .hero__sub-ar { font-size: 15px; }
  .hero__body { font-size: 14.5px; line-height: 1.75; }
  .hero__quote-text { font-size: 13px; }

  /* Spotlight tagline — single line on mobile, font scales to fit */
  .spotlight__tagline {
    font-size: clamp(16px, 4.8vw, 26px) !important;
    white-space: nowrap !important;
    line-height: 1.3;
    letter-spacing: -0.005em;
  }
  .spotlight__line {
    display: inline !important;
    white-space: nowrap !important;
  }
  .spotlight__line--accent {
    margin-right: 6px;
  }

  /* Spotlight cards — slightly tighter */
  .feature-3d__desc { font-size: 13.5px; line-height: 1.7; }

  /* Spaces — clean card stack, smaller padding */
  .spaces { padding: 70px 4% 80px; }
  .spaces-band { padding: 32px 18px 36px; border-radius: 24px; }
  .spaces-band__tiles {
    gap: 28px !important;
  }
  .spaces__title { font-size: clamp(28px, 7.5vw, 38px); }
  .spaces__sub { font-size: 14px; line-height: 1.75; }
  .space-card { border-radius: 18px; }
  .space-card__title { font-size: 19px; }
  .space-card__desc { font-size: 13.5px; line-height: 1.7; }

  /* Closing — compact framed luxury */
  .closing { min-height: 80vh; padding: 70px 5%; }
  .closing__frame { padding: 44px 18px 40px; }
  .closing__frame::before,
  .closing__frame::after {
    width: 20px; height: 20px;
    top: 8px; bottom: 8px;
    inset-inline-start: 8px; inset-inline-end: 8px;
  }
  .closing__ornament { margin-bottom: 22px; gap: 10px; }
  .closing__body { font-size: 14.5px; margin-bottom: 32px; }
  .closing__cta { padding: 16px 32px !important; font-size: 14.5px !important; }
  .closing__divider { margin-bottom: 24px; }

  /* Register — fully compact form */
  .register { padding: 70px 4% 70px; }
  .register__header { margin-bottom: 42px; }
  .register__title { font-size: clamp(26px, 7vw, 38px); margin: 18px 0 14px; }
  .register__subtitle { font-size: 14px; line-height: 1.7; }
  .register__form-wrap {
    padding: 32px 16px 28px;
    border-radius: 16px;
  }
  .register__progress { margin-bottom: 36px; }
  .register__step-title { font-size: 20px; }
  .register__step-hint { font-size: 13px; margin-bottom: 24px; }
  .role-row__inner { padding: 14px 14px; gap: 12px; border-radius: 12px; }
  .role-row__icon { width: 40px; height: 40px; border-radius: 10px; }
  .role-row__name { font-size: 15px; }
  .role-row__desc { font-size: 12.5px; line-height: 1.5; }
  .role-row__check { width: 24px; height: 24px; }
  .reg-chip span { padding: 10px 16px; font-size: 13px; }
  .reg-field__input { font-size: 15px; padding: 10px 4px 12px; }
  .reg-field__label { font-size: 12px; }
  .register__actions { gap: 10px; }
  .register__actions .btn-primary,
  .register__actions .btn-secondary {
    flex: 1;
    min-width: 0;
    padding: 14px 18px;
    font-size: 14px;
  }

  /* Register success state */
  .register__success-title { font-size: 24px; }
  .register__success-body { font-size: 14px; }

  /* Footer — full center stack */
  .footer { padding: 50px 5% 24px; }
  .footer__main { text-align: center; }
  .footer__col--brand .footer__logo img { margin-left: auto; margin-right: auto; }
  .footer__list { align-items: center; }
  .footer__social { justify-content: center; }
  .footer__bottom {
    align-items: center !important;
    text-align: center !important;
  }

  /* Nav hamburger should be visible (already wired in components.css if present) */
  .nav__links, .nav__divider, .nav__cta { display: none; }
  .nav__hamburger { display: flex; }
}

/* ═══════════════════════════════════════════════
   IMAGE PROTECTION — prevent iOS Safari's native image preview /
   long-press "Save Image" menu / accidental pinch-zoom on photos
   ═══════════════════════════════════════════════ */
.space-card__media img,
.prog-card__hero-visual img,
.prog-card__bg-scene img,
.prog-card__bg-pattern img,
.hero__photo img,
.closing__photo img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ═══════════════════════════════════════════════
   TOUCH DEVICE OVERRIDES
   On phones/tablets (no real hover), make cards
   look "alive" by default and skip lift/glow effects
   that depend on hover state.
   ═══════════════════════════════════════════════ */
@media (hover: none) {
  /* Programs cards — keep static, no lift */
  .prog-card:hover {
    transform: none;
    box-shadow: none;
  }
  .prog-card:hover .prog-card__hero-visual img,
  .prog-card:hover .prog-card__bg-scene img,
  .prog-card:hover .prog-card__bg-pattern img {
    filter: none;
  }
  .prog-card:hover .prog-card__corner-icon {
    transform: none;
    border-color: color-mix(in srgb, var(--accent) 35%, rgba(217, 205, 184, 0.16));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  }

  /* Spotlight feature cards — keep static */
  .feature-3d:hover {
    transform: none;
  }
  .feature-3d:hover .feature-3d__glow {
    opacity: 0.35;
  }
  .feature-3d:hover .feature-3d__visual {
    transform: none;
    border-color: color-mix(in srgb, var(--card-color) 32%, rgba(184, 148, 95, 0.16));
    box-shadow:
      inset 0 0 24px color-mix(in srgb, var(--card-color) 10%, transparent),
      0 0 32px color-mix(in srgb, var(--card-color) 14%, transparent);
  }
  .feature-3d:hover .feature-3d__icon {
    filter:
      drop-shadow(0 0 6px color-mix(in srgb, var(--card-color) 45%, transparent))
      drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  }
  .feature-3d:hover .feature-3d__rule {
    width: 44px;
  }

  /* CTA buttons — keep static glow */
  .closing__cta:hover {
    transform: none;
  }

  /* Audience tag colors stay default (no hover color swap) */
  .closing__audience-item:hover {
    color: rgba(26, 20, 16, 0.62);
  }

  /* Footer social links — keep readable default */
  .footer__social-link:hover {
    border-color: var(--ink-12);
    color: var(--ink-60);
    background: transparent;
  }

  /* Footer list link colors — keep default */
  .footer__list a:hover {
    color: var(--ink-60);
  }
}