/* ════════════════════════════════════════════════════════════════════════
 * BUNYAN — HERO ELEVATED (v1)
 *
 * Replaces the legacy WebGL/photo hero with a pure-CSS+SVG Diriyah scene.
 * Zero external image requests, GPU-friendly, prints crisp at any size.
 *
 * Performance budget:
 *   - 0 photo downloads (was: 3× ~330 KB Unsplash photos = ~1 MB)
 *   - 0 Three.js / WebGL canvas (saved ~600 KB + GPU work)
 *   - 1 idle CSS animation (the sun glow, GPU-accelerated transform)
 *   - All other ornaments are STATIC
 *
 * Mobile fail-safes:
 *   - `prefers-reduced-motion` disables all motion
 *   - Backdrop-filter is removed on narrow viewports (heavy on mobile GPUs)
 *   - `content-visibility: auto` on below-fold sections
 * ════════════════════════════════════════════════════════════════════════ */

/* ── The hero stage ───────────────────────────────────────────────────── */
.hero-elevated {
  position: relative;
  isolation: isolate;
  min-height: clamp(620px, 92vh, 900px);
  overflow: hidden;
  /* Sand mesh-gradient: 3 stops, mostly bright in middle, warm at edges */
  background:
    radial-gradient(ellipse 60% 50% at 80% 18%, rgba(248, 220, 152, .35) 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 18% 100%, rgba(107, 85, 48, .12) 0%, transparent 60%),
    linear-gradient(180deg, #fefcf6 0%, #faf3e0 55%, #f1e8cd 100%) !important;
}

/* ── Canvas layer that holds all SVG ornaments ───────────────────────── */
.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ── Sun glow — animated only when motion is OK ──────────────────────── */
.hero-sun {
  position: absolute;
  top: -8%; right: 8%;
  width: clamp(280px, 32vw, 520px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 220, 140, .55) 0%,
      rgba(255, 210, 120, .28) 25%,
      rgba(201, 164, 90, .12) 50%,
      transparent 70%);
  filter: blur(.5px);
  /* GPU layer hint */
  transform: translateZ(0);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-sun { animation: hero-sun-breath 9s ease-in-out infinite; }
}
@keyframes hero-sun-breath {
  0%, 100% { transform: translateZ(0) scale(1);    opacity: 1; }
  50%      { transform: translateZ(0) scale(1.06); opacity: .92; }
}

/* ── Mashrabiya stars (corner ornaments) ─────────────────────────────── */
.hero-mashrabiya {
  position: absolute;
  color: var(--bn-gold-400);
  pointer-events: none;
}
.hero-mashrabiya--tr {
  top: -90px; right: -90px;
  width: clamp(280px, 28vw, 460px);
  aspect-ratio: 1 / 1;
  opacity: .22;
}
.hero-mashrabiya--bl {
  bottom: -60px; left: -40px;
  width: clamp(200px, 18vw, 320px);
  aspect-ratio: 1 / 1;
  opacity: .10;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-mashrabiya--tr { animation: mashrabiya-rotate 240s linear infinite; }
}
@keyframes mashrabiya-rotate {
  to { transform: rotate(360deg); }
}

/* ── Diriyah skyline at the bottom of the hero ───────────────────────── */
.hero-skyline {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  width: 100%;
  height: clamp(110px, 18vh, 220px);
  pointer-events: none;
  display: block;
}

/* ── Palm tree silhouettes — far decorative ──────────────────────────── */
.hero-palm {
  position: absolute;
  color: var(--bn-stone-700);
  opacity: .12;
  pointer-events: none;
  width: clamp(100px, 12vw, 200px);
  aspect-ratio: 120 / 280;
}
.hero-palm--right { bottom: 80px; right: 6vw; transform: rotate(2deg); }
.hero-palm--left  { bottom: 110px; left: 10vw; opacity: .08; transform: rotate(-3deg); }

/* ── Diriyah triangles along the bottom edge ─────────────────────────── */
.hero-triangles {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 14px;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14'><path d='M0 14 L7 0 L14 14 Z M14 14 L21 0 L28 14 Z' fill='%23c9a45a' opacity='0.65'/></svg>");
  background-size: 14px 14px;
  background-repeat: repeat-x;
  background-position: bottom;
  z-index: 2;
}

/* ── Promote hero-content above canvas; refine spacing ───────────────── */
.hero-elevated .hero-content {
  position: relative;
  z-index: 5;
  padding-block: clamp(64px, 8vh, 120px) clamp(120px, 16vh, 200px);
}

/* Refine the editorial label rule for cream bg */
.hero-elevated .label-rule {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--bn-gold-500) !important;
  letter-spacing: 0.5em;
  font-size: clamp(.7rem, .65rem + .25vw, .82rem);
}
.hero-elevated .label-rule::before {
  background: linear-gradient(90deg, transparent, var(--bn-gold-500));
  height: 1px;
  width: 48px;
  opacity: .8;
}

/* Hero h1 — refined monumental display */
.hero-elevated h1 {
  font-family: 'Reem Kufi', 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: clamp(3.2rem, 9.5vw, 8.6rem) !important;
  font-weight: 700 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.035em !important;
  color: var(--bn-ink-strong) !important;
  margin: clamp(1.4rem, 3vh, 2.6rem) 0 clamp(1rem, 2vh, 1.8rem) !important;
  text-wrap: balance;
}
.hero-elevated h1 .word-bunyan {
  display: inline-block;
  background: linear-gradient(135deg,
    #b08840 0%,
    #c9a45a 22%,
    #f4d77a 42%,
    #fbe6a5 50%,
    #f4d77a 58%,
    #c9a45a 78%,
    #b08840 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  color: transparent !important;
  filter: drop-shadow(0 6px 22px rgba(201, 164, 90, .25));
}
@media (prefers-reduced-motion: no-preference) {
  .hero-elevated h1 .word-bunyan { animation: bunyan-gold-leaf 9s linear infinite; }
}
@keyframes bunyan-gold-leaf {
  to { background-position: 200% center; }
}
.hero-elevated h1 .punctuation {
  color: var(--bn-gold-500) !important;
  font-style: italic;
  -webkit-text-fill-color: var(--bn-gold-500);
}

/* Tagline — editorial italic */
.hero-elevated .hero-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.65rem) !important;
  line-height: 1.55 !important;
  color: var(--bn-ink-soft) !important;
  max-width: 42ch;
  margin-bottom: clamp(1rem, 2vh, 1.8rem) !important;
}
.hero-elevated .hero-tagline em {
  color: var(--bn-gold-500) !important;
  font-style: normal;
  font-weight: 600;
  border-bottom: 1px solid rgba(201, 164, 90, .35);
}

/* Lead paragraph */
.hero-elevated .hero-lead {
  font-size: clamp(.95rem, 1.05vw, 1.12rem) !important;
  line-height: 1.85 !important;
  color: var(--bn-ink) !important;
  max-width: 56ch;
  margin-bottom: clamp(1.6rem, 3vh, 2.4rem) !important;
  opacity: .92;
}

/* CTAs — refined */
.hero-elevated .cta-row {
  display: flex; flex-wrap: wrap; gap: clamp(.8rem, 1.4vw, 1.2rem);
  margin-bottom: clamp(2.4rem, 4vh, 3.6rem);
}
.hero-elevated .btn-primary,
.hero-elevated .btn-primary.lg {
  background: linear-gradient(135deg, #3a2d18 0%, #4d3c20 50%, #5b3a1e 100%) !important;
  color: #faf3e0 !important;
  font-family: 'Reem Kufi', 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 700 !important;
  padding: 1.05rem 2.4rem !important;
  font-size: clamp(.95rem, 1vw, 1.1rem) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(201, 164, 90, .25) !important;
  letter-spacing: .03em;
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 180, .15),
    0 16px 38px rgba(36, 26, 14, .22),
    0 2px 6px rgba(36, 26, 14, .14) !important;
  transition: transform var(--dur-base) var(--ease-out-soft),
              box-shadow var(--dur-base) var(--ease-out-soft) !important;
}
.hero-elevated .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 180, .25),
    0 22px 50px rgba(36, 26, 14, .28),
    0 4px 10px rgba(36, 26, 14, .16) !important;
}
.hero-elevated .btn-demo-hero {
  background: transparent;
  color: var(--bn-stone-700);
  border: 1px solid var(--bn-stone-300);
  padding: 1.05rem 2.2rem;
  border-radius: 999px;
  font-family: 'Reem Kufi', sans-serif;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out-soft);
}
.hero-elevated .btn-demo-hero:hover {
  border-color: var(--bn-gold-400);
  background: rgba(255, 255, 255, .5);
  color: var(--bn-ink-strong);
  transform: translateY(-2px);
}

/* Stats strip — refined editorial */
.hero-elevated .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  padding-top: clamp(1.6rem, 3vh, 2.4rem);
  border-top: 1px solid rgba(107, 85, 48, .18);
}
.hero-elevated .stat {
  text-align: center;
  padding-block: var(--space-2);
}
.hero-elevated .stat strong {
  display: block;
  font-family: 'Reem Kufi', sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem) !important;
  font-weight: 700;
  color: var(--bn-gold-500) !important;
  letter-spacing: -.02em;
  margin-bottom: .25rem;
}
.hero-elevated .stat span {
  font-size: clamp(.78rem, .85vw, .92rem) !important;
  color: var(--bn-stone-600) !important;
  font-weight: 500;
  opacity: 1 !important;
}

/* Hero-meta refined */
.hero-elevated .hero-meta {
  padding-bottom: clamp(1.4rem, 2.4vh, 2rem) !important;
  border-bottom: 1px solid rgba(107, 85, 48, .15) !important;
  font-family: 'Cormorant Garamond', serif;
}
.hero-elevated .hero-meta * {
  color: var(--bn-stone-600) !important;
  font-style: italic;
  font-size: clamp(.78rem, .9vw, .92rem);
}
.hero-elevated .hero-meta strong {
  color: var(--bn-gold-500) !important;
  font-style: normal;
  font-weight: 600;
}

/* Scroll hint at the bottom */
.hero-elevated .scroll-hint {
  position: absolute;
  bottom: clamp(28px, 4vh, 56px);
  left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: .35rem;
  z-index: 6;
  color: var(--bn-stone-600);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: .82rem;
  opacity: .75;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-elevated .scroll-hint { animation: scroll-hint-float 2.6s ease-in-out infinite; }
}
@keyframes scroll-hint-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}

/* ── Performance: lighten mobile rendering ───────────────────────────── */
@media (max-width: 720px) {
  /* Backdrop-filter is GPU-heavy on mobile. Replace with solid surfaces. */
  .nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
         background: rgba(254, 252, 246, .96) !important; }
  /* Reduce ornament intensity */
  .hero-mashrabiya--tr { opacity: .14; width: clamp(180px, 56vw, 280px); }
  .hero-mashrabiya--bl { display: none; }
  .hero-palm           { display: none; }
  /* Disable parallax/breath animations on mobile to save battery */
  .hero-sun { animation: none !important; }
  .hero-mashrabiya--tr { animation: none !important; }
}

/* ── Below-fold sections: deferred render via content-visibility ──────
 * NOTE: `content-visibility: auto` applies `contain: layout style paint`,
 * which would clip absolutely-positioned modals if they were descendants.
 * We confine it to the marketing sections that are pure flow content and
 * SKIP it on mobile where the rendering benefit is small and risk higher.
 * Also reduced intrinsic-size so the placeholder gap is less jarring. */
@media (min-width: 900px) {
  .how, .features {
    content-visibility: auto;
    contain-intrinsic-size: 1px 600px;
  }
}

/* ── Section heads refined for cream bg ──────────────────────────────── */
.section-head { margin-bottom: clamp(2.4rem, 5vh, 4rem); }
.section-head .eyebrow {
  display: inline-block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: .92rem;
  color: var(--bn-gold-500);
  letter-spacing: .18em;
  margin-bottom: .5rem;
}
.section-head h2 {
  font-family: 'Reem Kufi', 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: clamp(2rem, 4.5vw, 3.6rem) !important;
  font-weight: 700;
  line-height: 1.1;
  color: var(--bn-ink-strong) !important;
}
.section-head p {
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  color: var(--bn-ink-soft) !important;
  max-width: 60ch;
  line-height: 1.75;
  margin-inline: auto;
  opacity: 1 !important;
}

/* ── Step cards (How it works) refined ───────────────────────────────── */
.step-card {
  background: var(--color-surface-raised) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  padding: clamp(1.6rem, 2.4vw, 2.4rem) !important;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out-soft),
              transform var(--dur-base) var(--ease-out-soft),
              border-color var(--dur-base) var(--ease-out-soft);
  position: relative;
}
.step-card::before {
  /* Gold corner accent */
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 24px; height: 24px;
  border-top: 2px solid var(--bn-gold-400);
  border-right: 2px solid var(--bn-gold-400);
  border-top-right-radius: var(--radius-xl);
  opacity: .55;
  transition: opacity var(--dur-base) var(--ease-out-soft);
}
.step-card:hover {
  border-color: var(--bn-stone-300) !important;
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.step-card:hover::before { opacity: 1; }
.step-num {
  font-family: 'Reem Kufi', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: var(--bn-gold-400);
  opacity: .35;
  line-height: 1;
  margin-bottom: var(--space-3);
}
.step-card h3 {
  color: var(--bn-ink-strong) !important;
  font-size: var(--text-xl) !important;
  margin-bottom: var(--space-2) !important;
}
.step-card p { color: var(--bn-ink-soft) !important; opacity: 1 !important; }

/* ── Removed disclaimer text safety net ──────────────────────────────── */
.hero-demo-disclaimer { display: none !important; }