/* =========================================================
   ILLUMINATI AI — DESIGN SYSTEM (refined pass)
   - Tighter spacing on an 8-point grid
   - Calmer Lusion-style motion
   - Sub-heads: Cormorant Garamond 500 regular (non-italic)
========================================================= */
:root {
  /* Palette */
  --black:            #0a0a0a;
  --black-soft:       #0f0f0f;
  --black-card:       #131313;
  --white:            #ffffff;
  --gold:             #D4A437;
  --gold-light:       #E0B958;
  --gold-bright:      #F0CB6A;
  --gold-dim:         #8a6a1f;
  --gold-glow:        rgba(212, 164, 55, 0.4);
  --gold-glow-soft:   rgba(212, 164, 55, 0.15);
  --gold-border:      rgba(212, 164, 55, 0.25);
  --white-muted:      rgba(255, 255, 255, 0.62);
  --white-faint:      rgba(255, 255, 255, 0.32);

  /* Easing — Lusion-style */
  --ease-luxe: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* Gold gradient text fill */
  --gold-grad: linear-gradient(135deg, #D4A437 0%, #F5D17A 50%, #D4A437 100%);

  /* 8-point spacing scale */
  --s-1: 8px;   --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 40px;  --s-6: 48px; --s-7: 64px; --s-8: 80px; --s-9: 96px;
}

/* =========================================================
   RESET & BASE
========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--white);
  background: var(--black);
  overflow-x: hidden;
  cursor: none;
  position: relative;
  min-height: 100vh;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: none; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; outline: none; }
ul { list-style: none; }
::selection { background: var(--gold); color: var(--black); }

/* Film grain removed — feTurbulence repaints every scroll frame and hurts FPS. */

/* =========================================================
   TYPOGRAPHY
========================================================= */
.title-hero {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 4.2vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
}
.title-page {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(1.45rem, 2.6vw, 2.2rem);
  line-height: 1.18;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
}
.title-section {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.005em;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}

.kicker {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--gold-light);
  letter-spacing: 0.06em;
  text-align: center;
  margin: 0 auto var(--s-2);
  text-transform: uppercase;
}

/* Lede paragraphs — premium editorial italic serif. */
.lede {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.2rem, 1.6vw, 1.55rem);
  line-height: 1.75;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

/* ─── ABOUT PAGE — Premium typography hierarchy ─── */

/* Sub-headline directly under the page title. */
.legacy-subheadline {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.4rem, 2vw, 2rem);
  letter-spacing: 0.005em;
  line-height: 1.4;
  color: #D4A437;
  opacity: 0.85;
  max-width: 60ch;
  margin: 0 auto;
  text-align: center;
}

/* Legacy story body — warm narrator (Fraunces). */
.legacy-body {
  margin-top: 32px;
  text-align: center;
}
.legacy-body p {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  letter-spacing: 0.005em;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.92);
  max-width: 65ch;
  margin: 0 auto 1.5rem;
}
.legacy-body p:last-child { margin-bottom: 0; }

/* Word-by-word lift reveal — each word floats in from a small random
   scatter with rotation, blur and overshoot. JS sets per-word
   --lx/--ly/--lrot custom props + a stagger animation-delay. Triggered
   alongside the page hero animation via body.page-anim-go. */
.legacy-body .legacy-word {
  display: inline-block;
  opacity: 0;
  transform:
    translate(var(--lx, 0px), var(--ly, 28px))
    rotateZ(var(--lrot, 0deg))
    scale(0.72);
  filter: blur(8px);
  will-change: transform, opacity, filter;
}
body:not(.home-page).page-anim-go .legacy-body .legacy-word {
  animation: legacyWordRise 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes legacyWordRise {
  0% {
    opacity: 0;
    transform:
      translate(var(--lx, 0px), var(--ly, 28px))
      rotateZ(var(--lrot, 0deg))
      scale(0.72);
    filter: blur(8px);
  }
  55% {
    opacity: 1;
    transform: translate(0, -3px) rotateZ(0) scale(1.05);
    filter: blur(0);
  }
  78% {
    transform: translate(0, 0) rotateZ(0) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotateZ(0) scale(1);
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .legacy-body .legacy-word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* Manifesto / Philosophy paragraphs — Raleway, sized for "one frame"
   on the about page. */
.manifesto-paragraph {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.18rem, 1.6vw, 1.55rem);
  letter-spacing: 0.005em;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.92);
  max-width: 68ch;
  margin: 0 auto 1.6rem;
  text-align: center;
}
.manifesto-paragraph:last-of-type { margin-bottom: 0.8rem; }

/* ─── ABOUT — Philosophy section reveal ───
   Fires only after the user scrolls past the legacy hero. The heading
   tilts down from above with a 3D rotateX + gold flash, then each
   paragraph enters from a different direction:
     P1 — hinges down from the top (rotateX -30deg)
     P2 — slides in from the right with a small skew
     P3 — hinges up from the bottom (rotateX +30deg) */
.philosophy-section {
  perspective: 1400px;
  perspective-origin: 50% 50%;
  padding-top: 24px;
  padding-bottom: 24px;
  margin-top: -80px;            /* pull tight against the legacy block above */
}
.philosophy-section .title-section {
  opacity: 0;
  transform: translateY(-100px) rotateX(-55deg) scale(0.82);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  filter: blur(16px) brightness(2.2);
  will-change: transform, opacity, filter;
  /* Drop the inherited background-clip:text gradient — when the
     element's content-box ends at the baseline, descenders (p, y, g)
     extend below it and get visually clipped. Solid gold colour with
     a generous line-height + padding-bottom renders cleanly. */
  background: none;
  -webkit-text-fill-color: var(--gold);
  color: var(--gold);
  line-height: 1.5;
  padding-bottom: 0.35em;
  margin-bottom: 32px;
  overflow: visible;
}
.philosophy-section .manifesto-paragraph {
  opacity: 0;
  will-change: transform, opacity, filter;
}
.philosophy-section .manifesto-paragraph:nth-of-type(1) {
  transform: rotateX(-32deg) translateY(70px) scale(0.94);
  transform-origin: 50% 0%;
  filter: blur(10px);
}
.philosophy-section .manifesto-paragraph:nth-of-type(2) {
  transform: translateX(160px) skewX(-4deg) scale(0.96);
  filter: blur(8px);
}
.philosophy-section .manifesto-paragraph:nth-of-type(3) {
  transform: rotateX(32deg) translateY(-70px) scale(0.94);
  transform-origin: 50% 100%;
  filter: blur(10px);
}

.philosophy-section.is-revealed .title-section {
  animation: philosophyTitleSlam 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.philosophy-section.is-revealed .manifesto-paragraph:nth-of-type(1) {
  animation: philosophyP1Hinge 1.45s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
}
.philosophy-section.is-revealed .manifesto-paragraph:nth-of-type(2) {
  animation: philosophyP2Slide 1.45s cubic-bezier(0.16, 1, 0.3, 1) 0.75s forwards;
}
.philosophy-section.is-revealed .manifesto-paragraph:nth-of-type(3) {
  animation: philosophyP3Hinge 1.45s cubic-bezier(0.16, 1, 0.3, 1) 1.05s forwards;
}

@keyframes philosophyTitleSlam {
  0% {
    opacity: 0;
    transform: translateY(-100px) rotateX(-55deg) scale(0.82);
    filter: blur(16px) brightness(2.2);
  }
  55% {
    opacity: 1;
    transform: translateY(8px) rotateX(12deg) scale(1.06);
    filter: blur(0) brightness(1.5)
            drop-shadow(0 0 28px rgba(245, 212, 133, 0.85))
            drop-shadow(0 0 56px rgba(212, 164, 55, 0.4));
  }
  78% {
    transform: translateY(0) rotateX(-4deg) scale(0.985);
    filter: blur(0) brightness(1.15)
            drop-shadow(0 0 14px rgba(212, 164, 55, 0.4));
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0) scale(1);
    filter: blur(0) brightness(1) drop-shadow(0 0 0 rgba(212, 164, 55, 0));
  }
}
@keyframes philosophyP1Hinge {
  to { opacity: 1; transform: rotateX(0) translateY(0) scale(1); filter: blur(0); }
}
@keyframes philosophyP2Slide {
  to { opacity: 1; transform: translateX(0) skewX(0) scale(1); filter: blur(0); }
}
@keyframes philosophyP3Hinge {
  to { opacity: 1; transform: rotateX(0) translateY(0) scale(1); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .philosophy-section .title-section,
  .philosophy-section .manifesto-paragraph {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* Path Forward closing paragraph — Raleway, same voice as legacy. */
.path-forward p {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: clamp(1.1rem, 1.3vw, 1.3rem);
  letter-spacing: 0.005em;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.92);
  max-width: 65ch;
  margin: 0 auto 1.5rem;
  text-align: center;
}

/* Pull the section up — tight against the principles grid above. */
body.about-page .path-forward {
  padding-top: 24px;
  margin-top: -24px;
  position: relative;
  overflow: visible;
  perspective: 1400px;
  perspective-origin: 50% 0;
}

/* ─── PATH FORWARD — crazy cinematic reveal ───
   The heading explodes in: each character flies from a random 3D
   scatter with rotation + blur + brightness, snaps to place with
   overshoot, then a gold shimmer sweeps across the line. The
   paragraph words then cascade in from their own random scatter,
   while a vertical gold light-beam descends from above and ignites
   the heading at the moment of impact. */
.path-forward-beam {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 0;
  background: linear-gradient(180deg,
    transparent,
    rgba(245, 212, 133, 0.7) 30%,
    rgba(245, 212, 133, 0.95) 50%,
    rgba(212, 164, 55, 0.5) 75%,
    transparent);
  filter: drop-shadow(0 0 14px rgba(245, 212, 133, 0.85));
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
}
.path-forward.is-revealed .path-forward-beam {
  animation: pathBeamDescend 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes pathBeamDescend {
  0%   { opacity: 0; height: 0; }
  20%  { opacity: 1; }
  60%  { opacity: 1; height: 50%; }
  100% { opacity: 0; height: 65%; }
}

/* Heading — TRAMPOLINE BOUNCE per char with gold flash.
   Each character starts as a thin pancake at the bottom of its line,
   springs upward over-stretching vertically, squashes down on landing,
   then settles. Combined with stagger this reads like piano keys
   being struck in sequence — completely different mechanic from the
   legacy word-scatter. */
.path-forward .title-section {
  position: relative;
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  display: inline-block;
}
.path-forward .pf-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%) scaleY(0.06) scaleX(1.4);
  transform-origin: 50% 100%;
  filter: blur(2px);
  will-change: transform, opacity, filter;
  /* Each char paints its own gold gradient — the parent's
     background-clip:text doesn't inherit through child spans, so
     without this the chars render as transparent. */
  background: linear-gradient(135deg,
    #b88a2c 0%,
    #d4a437 22%,
    #f0cf6e 48%,
    #fae3a8 55%,
    #f0cf6e 62%,
    #d4a437 78%,
    #a87a22 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.path-forward .pf-char.space {
  width: 0.32em;
  -webkit-text-fill-color: transparent;
}
.path-forward.is-revealed .pf-char {
  animation: pathCharBounce 1.05s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes pathCharBounce {
  0% {
    opacity: 0;
    transform: translateY(110%) scaleY(0.06) scaleX(1.4);
    filter: blur(2px) drop-shadow(0 0 0 rgba(245, 212, 133, 0));
  }
  35% {
    opacity: 1;
    transform: translateY(-18%) scaleY(1.45) scaleX(0.78);
    filter: blur(0) drop-shadow(0 0 22px rgba(245, 212, 133, 0.95))
            drop-shadow(0 0 44px rgba(212, 164, 55, 0.5));
  }
  60% {
    transform: translateY(0%) scaleY(0.78) scaleX(1.18);
    filter: blur(0) drop-shadow(0 0 10px rgba(212, 164, 55, 0.55));
  }
  78% {
    transform: translateY(0%) scaleY(1.1) scaleX(0.95);
    filter: blur(0) drop-shadow(0 0 4px rgba(212, 164, 55, 0.25));
  }
  92% {
    transform: translateY(0%) scaleY(0.97) scaleX(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0%) scaleY(1) scaleX(1);
    filter: blur(0) drop-shadow(0 0 0 rgba(212, 164, 55, 0));
  }
}

/* Gold shimmer sweep across the heading after chars settle. */
.path-forward .title-section::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg,
    transparent,
    rgba(255, 245, 220, 0.0) 30%,
    rgba(255, 245, 220, 0.55) 50%,
    rgba(255, 245, 220, 0.0) 70%,
    transparent);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
}
.path-forward.is-revealed .title-section::after {
  animation: pathTitleShimmer 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.6s forwards;
}
@keyframes pathTitleShimmer {
  0%   { left: -120%; opacity: 1; }
  100% { left: 120%;  opacity: 0; }
}

/* Paragraph — TYPEWRITER SLIDE-UP. Each word starts hidden behind
   a clip-path mask at its bottom edge; on reveal the mask peels up to
   show the word, while a brief gold underline streaks beneath it. */
.path-forward .pf-word {
  display: inline-block;
  position: relative;
  opacity: 1;
  clip-path: inset(100% 0 0 0);
  transform: translateY(8px);
  will-change: clip-path, transform;
}
.path-forward .pf-word::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(245, 212, 133, 0) 0%,
    rgba(245, 212, 133, 0.95) 50%,
    rgba(245, 212, 133, 0) 100%);
  filter: drop-shadow(0 0 4px rgba(245, 212, 133, 0.6));
  pointer-events: none;
  opacity: 0;
}
.path-forward.is-revealed .pf-word {
  animation: pathWordReveal 0.42s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.path-forward.is-revealed .pf-word::after {
  animation: pathWordTrail 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--pf-word-delay, 0s);
}
@keyframes pathWordReveal {
  0%   { clip-path: inset(100% 0 0 0); transform: translateY(8px); }
  100% { clip-path: inset(0 0 0 0);    transform: translateY(0);    }
}
@keyframes pathWordTrail {
  0%   { left: 0; right: 100%; opacity: 0; }
  25%  { opacity: 1; }
  60%  { left: 0; right: 0;    opacity: 0.8; }
  100% { left: 100%; right: 0; opacity: 0;   }
}

@media (prefers-reduced-motion: reduce) {
  .path-forward .pf-char,
  .path-forward .pf-word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .path-forward-beam,
  .path-forward .title-section::after { display: none !important; }
}

/* ─── ABOUT — Principles section reveal ───
   Heading slides in from the left, subhead from the right; each of the
   four standard cards flies in from its own corner of the viewport.
   Triggered after the user scrolls past Our Philosophy. */
.principles-section {
  padding-top: 32px !important;
  padding-bottom: 64px !important;
  margin-top: 0;
}
/* Trim everything between the philosophy block's bottom gold hairline
   and the Principles heading so the gap above the heading matches the
   gap below the subhead (≈32px on both sides). */
body.about-page .section--tight .manifesto {
  padding-bottom: 0;
}
body.about-page .section--tight {
  padding-bottom: 0;
}
body.about-page .philosophy-section .hairline {
  margin-bottom: 0;
}
.principles-section .title-section {
  opacity: 0;
  transform: translateX(-100vw);
  filter: blur(10px);
  will-change: transform, opacity, filter;
}
.principles-section .subhead {
  opacity: 0;
  transform: translateX(100vw);
  filter: blur(8px);
  will-change: transform, opacity, filter;
}
.principles-section.is-revealed .title-section {
  animation: heroSlideLeft 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.principles-section.is-revealed .subhead {
  animation: heroSlideRight 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}

/* Each card pre-positioned at its outer-diagonal corner. */
.principles-section .standards-grid .standard-card {
  opacity: 0;
  filter: blur(8px);
  will-change: transform, opacity, filter;
}
.principles-section .standards-grid .standard-card:nth-child(1) {
  /* Architectural Integrity → from upper-left */
  transform: translate(-90vw, -60vh) rotate(-12deg) scale(0.82);
}
.principles-section .standards-grid .standard-card:nth-child(2) {
  /* Operational Sovereignty → from upper-right */
  transform: translate(90vw, -60vh) rotate(12deg) scale(0.82);
}
.principles-section .standards-grid .standard-card:nth-child(3) {
  /* Continuous Calibration → from lower-left */
  transform: translate(-90vw, 60vh) rotate(10deg) scale(0.82);
}
.principles-section .standards-grid .standard-card:nth-child(4) {
  /* Sacred Discretion → from lower-right */
  transform: translate(90vw, 60vh) rotate(-10deg) scale(0.82);
}
.principles-section.is-revealed .standards-grid .standard-card {
  animation: principleCardLand 1.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.principles-section.is-revealed .standards-grid .standard-card:nth-child(1) { animation-delay: 0.55s; }
.principles-section.is-revealed .standards-grid .standard-card:nth-child(2) { animation-delay: 0.7s; }
.principles-section.is-revealed .standards-grid .standard-card:nth-child(3) { animation-delay: 0.85s; }
.principles-section.is-revealed .standards-grid .standard-card:nth-child(4) { animation-delay: 1.0s; }

@keyframes principleCardLand {
  to {
    transform: translate(0, 0) rotate(0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .principles-section .title-section,
  .principles-section .subhead,
  .principles-section .standards-grid .standard-card {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* Sub-heading — Cormorant Garamond 500 regular (non-italic) */
.subhead {
  font-family: 'Raleway', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  letter-spacing: 0.015em;
  line-height: 1.6;
  color: var(--white-muted);
  text-align: center;
  max-width: 820px;
  margin: var(--s-3) auto 0;
}
.body-text {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--white-muted);
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.utility-label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* =========================================================
   LAYOUT
========================================================= */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) { .container { padding: 0 32px; } }
@media (min-width: 1100px) { .container { padding: 0 48px; } }

.page {
  position: relative;
  z-index: 2;
  padding-top: 84px;
}
.section {
  padding: 80px 0;
  position: relative;
}
@media (min-width: 1024px) {
  .section { padding: 96px 0; }
}
.section--center { text-align: center; }
.section--tight { padding: 64px 0; }

/* Home page: tighten top of the first section so the (much larger) logo
   sits up close to the nav. */
body.home-page main > section.section--center:first-of-type {
  padding-top: 16px;
}


/* Page-fade is managed by GSAP — just clear default. */
.page-fade-in { opacity: 1; transform: none; }
.page-leave { display: none; }

/* =========================================================
   HERO LOGO — raster PNG with strictly-circular orbit field.
   The .home-logo-stage holds the canvas (behind) + the PNG (front).
   100–120px clear space below the stage before the headline.
========================================================= */
.home-logo-stage {
  width:  clamp(820px, min(98vh, 98vw), 1380px);
  height: clamp(820px, min(98vh, 98vw), 1380px);
  display: block;
  margin: -64px auto 56px;        /* pulled up; tight gap to headline below */
  position: relative;
  opacity: 0;
  transform: none;
  transition: opacity 0.2s linear;
}
.home-logo-stage.in { opacity: 1; }
@media (max-width: 768px) {
  .home-logo-stage {
    width:  clamp(460px, 100vw, 780px);
    height: clamp(460px, 100vw, 780px);
    margin: -32px auto 40px;
  }
}
.home-logo-stage .brand-logo--hero {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 1px rgba(212,164,55,0.35));
}

/* Magnetic tilt on hover */
.home-logo-stage.tilting .brand-logo--hero {
  transform:
    perspective(900px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    scale(var(--tilt-s, 1.04));
  transition: transform 0.18s ease-out;
}

/* Resting hero logo is stationary — no blink, no float, no tilt. */
.home-logo-stage .hero-eye-blink { display: none !important; }
.home-logo-stage .hero-sparkles  { display: none !important; }
.home-logo-stage .orbit-canvas {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}
/* Allow orbital field to bleed beyond the hero box without scrollbars */
.section--center { overflow-x: clip; overflow-x: hidden; }

/* Nav and footer logo marks: static PNG, sized by the host */
.logo-mark {
  display: inline-flex;
  align-items: center; justify-content: center;
}
.logo-mark .brand-logo {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
/* Nav logo is hidden until the intro completes (or instantly on
   reduced-motion / repeat visit via the .intro-arrived class). */
/* Logo is always visible. The cinematic intro only runs on the home
   page; on every other page (and on repeat visits) the brand mark
   reads immediately at full opacity. */
.nav-brand .logo-mark { opacity: 1; }
body.home-page .nav-brand .logo-mark { opacity: 0; transition: opacity 0.5s var(--ease-luxe); }
body.home-page .nav-brand .logo-mark.intro-arrived { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   REFINED LOGO BLOOM REVEAL
   ═══════════════════════════════════════════════════════════════ */

.bloom-overlay {
  position: fixed;
  inset: 0;
  background: #0a0a0a;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: all;
}

.bloom-overlay.bloom-finished {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}


html.bloom-locked, body.bloom-locked {
  overflow: hidden;
}

body.bloom-locked > *:not(.bloom-overlay):not(.intro-fly-clone):not(.cursor-ring):not(.cursor-dot) {
  visibility: hidden;
}

body.bloom-revealed .nav,
body.bloom-revealed main {
  animation: bloomContentReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes bloomContentReveal {
  0%   { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ─── Phase 2: Slower, softer, more atmospheric bloom ─── */
.bloom-radiance {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(245, 212, 133, 0.85) 0%,
    rgba(232, 201, 109, 0.6) 12%,
    rgba(212, 164, 55, 0.4) 28%,
    rgba(212, 164, 55, 0.18) 48%,
    rgba(212, 164, 55, 0.06) 68%,
    rgba(212, 164, 55, 0) 85%
  );
  transform: translate(-50%, -50%);
  filter: blur(55px);
  opacity: 0;
  pointer-events: none;
  animation: bloomRadianceExpand 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s forwards;
  will-change: width, height, opacity;
}

@keyframes bloomRadianceExpand {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
  }
  25% {
    opacity: 0.7;
  }
  60% {
    width: 1100px;
    height: 1100px;
    opacity: 1;
  }
  100% {
    width: 1500px;
    height: 1500px;
    opacity: 0.55;
  }
}

/* ─── A second deeper bloom layer for atmospheric depth ─── */
.bloom-radiance::before {
  content: '';
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(212, 164, 55, 0.25) 0%,
    rgba(212, 164, 55, 0.08) 50%,
    rgba(212, 164, 55, 0) 80%
  );
  filter: blur(40px);
  opacity: 0.7;
}

/* ─── Decorative orbital ring (subtle, atmospheric) ─── */
.bloom-orbital-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(75vh, 75vw);
  height: min(75vh, 75vw);
  min-width: 540px;
  min-height: 540px;
  max-width: 920px;
  max-height: 920px;
  border: 1px solid rgba(212, 164, 55, 0.14);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.65);
  opacity: 0;
  pointer-events: none;
  animation: bloomOrbitalAppear 1.8s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards;
}

@keyframes bloomOrbitalAppear {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.65);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ─── The logo wrapper (matches resting hero size) ─── */
.bloom-logo-wrapper {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width:  clamp(720px, min(94vh, 94vw), 1240px);
  height: clamp(720px, min(94vh, 94vw), 1240px);
}
@media (max-width: 768px) {
  .bloom-logo-wrapper {
    width:  clamp(420px, 98vw, 720px);
    height: clamp(420px, 98vw, 720px);
  }
}

/* ─── Phase 3: More cinematic logo materialisation ─── */
.bloom-logo {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  position: relative;
  z-index: 12;

  opacity: 0;
  transform: scale(0.55);
  filter: blur(40px) brightness(3.2);

  animation: bloomLogoMaterialise 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) 1.8s forwards;
  will-change: transform, filter, opacity;
}

@keyframes bloomLogoMaterialise {
  0% {
    opacity: 0;
    transform: scale(0.55);
    filter: blur(40px) brightness(3.2);
  }
  35% {
    opacity: 0.85;
    transform: scale(0.78);
    filter: blur(18px) brightness(2.2);
  }
  65% {
    opacity: 1;
    transform: scale(0.94);
    filter: blur(5px) brightness(1.5)
            drop-shadow(0 0 25px rgba(212, 164, 55, 0.5));
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) brightness(1)
            drop-shadow(0 0 35px rgba(245, 212, 133, 0.85))
            drop-shadow(0 0 70px rgba(212, 164, 55, 0.55))
            drop-shadow(0 0 130px rgba(212, 164, 55, 0.32))
            drop-shadow(0 0 220px rgba(212, 164, 55, 0.15));
  }
}

/* ─── Phase 4: Slower, more pronounced breathing ─── */
.bloom-logo.bloom-breathing {
  animation: bloomLogoBreathe 3.6s ease-in-out infinite;
}

@keyframes bloomLogoBreathe {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 35px rgba(245, 212, 133, 0.85))
            drop-shadow(0 0 70px rgba(212, 164, 55, 0.55))
            drop-shadow(0 0 130px rgba(212, 164, 55, 0.32))
            drop-shadow(0 0 220px rgba(212, 164, 55, 0.15));
  }
  50% {
    transform: scale(1.028);
    filter: drop-shadow(0 0 55px rgba(245, 212, 133, 1))
            drop-shadow(0 0 110px rgba(212, 164, 55, 0.8))
            drop-shadow(0 0 190px rgba(212, 164, 55, 0.5))
            drop-shadow(0 0 320px rgba(212, 164, 55, 0.25));
  }
}

/* ═══════════════════════════════════════════════════════════════
   ATMOSPHERIC DEPTH ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════ */

/* ─── Inner dense bloom core for dimensionality ─── */
.bloom-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 235, 175, 0.95) 0%,
    rgba(245, 212, 133, 0.75) 10%,
    rgba(232, 201, 109, 0.45) 25%,
    rgba(212, 164, 55, 0.2) 45%,
    rgba(212, 164, 55, 0) 70%
  );
  transform: translate(-50%, -50%);
  filter: blur(30px);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  animation: bloomCoreExpand 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s forwards;
  will-change: width, height, opacity;
}

@keyframes bloomCoreExpand {
  0%   { width: 0; height: 0; opacity: 0; }
  30%  { opacity: 1; }
  70%  { width: 700px; height: 700px; opacity: 0.95; }
  100% { width: 900px; height: 900px; opacity: 0.6; }
}

/* ─── Outward radiating light rays ─── */
.bloom-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  animation: bloomRaysAppear 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) 1.2s forwards;
}

@keyframes bloomRaysAppear {
  0%   { opacity: 0; }
  50%  { opacity: 0.85; }
  100% { opacity: 0.45; }
}

.bloom-ray {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5px;
  background: linear-gradient(
    to top,
    rgba(212, 164, 55, 0) 0%,
    rgba(212, 164, 55, 0.7) 40%,
    rgba(245, 212, 133, 0.85) 60%,
    rgba(212, 164, 55, 0) 100%
  );
  transform-origin: bottom center;
  filter: blur(1px);
}

.bloom-ray.bloom-ray-pulsing {
  animation: bloomRayBreathe 3.8s ease-in-out infinite;
}

@keyframes bloomRayBreathe {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.85; }
}

/* ─── Shimmering gold particles around the logo ─── */
.bloom-shimmer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(58vh, 58vw);
  height: min(58vh, 58vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 11;
}

.bloom-shimmer-particle {
  position: absolute;
  background: #f5d485;
  border-radius: 50%;
  box-shadow:
    0 0 6px rgba(212, 164, 55, 0.95),
    0 0 12px rgba(212, 164, 55, 0.5);
  opacity: 0;
}

@keyframes bloomShimmerTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  50%      { opacity: 1; transform: scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
  .bloom-core,
  .bloom-rays,
  .bloom-shimmer {
    display: none !important;
  }
}

/* ─── Halo glow with stronger presence ─── */
.bloom-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 165%;
  height: 165%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(245, 212, 133, 0.45) 0%,
    rgba(212, 164, 55, 0.32) 22%,
    rgba(212, 164, 55, 0.15) 45%,
    rgba(212, 164, 55, 0.05) 65%,
    rgba(212, 164, 55, 0) 82%
  );
  filter: blur(45px);
  opacity: 0;
  z-index: 9;
}

.bloom-halo.bloom-halo-active {
  animation: bloomHaloPulse 3.6s ease-in-out infinite;
}

@keyframes bloomHaloPulse {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.18);
  }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .bloom-logo {
    opacity: 1 !important;
    transform: scale(1) !important;
    filter: none !important;
    animation: none !important;
  }
  .bloom-radiance,
  .bloom-orbital-ring,
  .bloom-halo {
    display: none !important;
  }
  .bloom-overlay {
    transition: opacity 0.3s linear;
  }
}

/* Nav-brand mark fades in when intro completes (handled by intro:complete) */
/* Logo is always visible. The cinematic intro only runs on the home
   page; on every other page (and on repeat visits) the brand mark
   reads immediately at full opacity. */
.nav-brand .logo-mark { opacity: 1; }
body.home-page .nav-brand .logo-mark { opacity: 0; transition: opacity 0.5s var(--ease-luxe); }
body.home-page .nav-brand .logo-mark.intro-arrived { opacity: 1; }



/* =========================================================
   AMBIENT FLOATING PARTICLES — z-index BEHIND content boxes
========================================================= */
.ambient-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;            /* drifts behind everything; cards sit at z:10 */
  overflow: hidden;
}
.ambient-particle {
  position: absolute;
  bottom: -10px;
  border-radius: 50%;
  background: #D4A437;
  box-shadow: 0 0 4px rgba(212,164,55,0.55),
              0 0 9px rgba(212,164,55,0.22);
  animation: ambientFloat linear infinite;
  --sway: 0px;
}
@keyframes ambientFloat {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-110vh) translateX(var(--sway)); opacity: 0; }
}
/* All major content surfaces and the nav must paint OPAQUE over the
   ambient particle layer so dust never shows through them. */
.nav, .footer, .service-card, .step, .stat, .audience-card,
.faq-item, .contact-info, .contact-grid > .form, .audience-grid > .audience-card,
.problem-col, .solution-col, .form-success, .trust-badge, .mobile-menu {
  background-color: var(--black-card);
}
.nav { background: rgba(10,10,10,0.85); }
.nav.scrolled { background: rgba(10,10,10,0.94); }
.footer { background: var(--black); }
section { position: relative; z-index: 10; }
main    { position: relative; z-index: 10; }
/* Content cards, panels, form blocks — explicit opaque background + z:10 so
   ambient particles never bleed through them. */
.service-card, .step, .stat, .audience-card, .faq-item,
.contact-info, .contact-grid > .form, .problem-col, .solution-col,
.trust-badge, .form-success, .hero-block, .manifesto, .duality,
.faq-wrap, .closing, .footer, .nav, .mobile-menu {
  position: relative;
  z-index: 10;
  background-color: #0a0a0a;
}
.nav        { z-index: 100; background: rgba(10,10,10,0.85); }
.nav.scrolled { background: rgba(10,10,10,0.94); }
.mobile-menu { z-index: 101; }
.cursor-ring, .cursor-dot { z-index: 200 !important; }
/* Logo reveal overlay owns the topmost layer */
.bloom-overlay { z-index: 99999; }

/* =========================================================
   CUSTOM CURSOR (Lusion-style: simple ring + dot)
========================================================= */
.cursor-ring, .cursor-dot {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
}
.cursor-ring {
  width: 28px; height: 28px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  transition: width 0.35s var(--ease-luxe),
              height 0.35s var(--ease-luxe),
              background 0.35s var(--ease-luxe),
              border-color 0.35s var(--ease-luxe);
}
.cursor-dot {
  width: 4px; height: 4px;
  background: var(--gold);
  border-radius: 50%;
}
body.cursor-link .cursor-ring {
  width: 56px; height: 56px;
  background: rgba(212,164,55,0.06);
}
body.cursor-card .cursor-ring {
  width: 72px; height: 72px;
  background: rgba(212,164,55,0.05);
}

@media (pointer: coarse) {
  body { cursor: auto; }
  .cursor-ring, .cursor-dot { display: none !important; }
  button, a, input, textarea { cursor: auto !important; }
}

/* =========================================================
   NAVIGATION
========================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 9000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  height: 72px;
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: height 0.4s var(--ease-soft), background 0.4s var(--ease-soft), border 0.4s var(--ease-soft);
}
@media (min-width: 768px) { .nav { padding: 0 32px; } }
@media (min-width: 1100px) { .nav { padding: 0 48px; } }
.nav.scrolled {
  background: rgba(10,10,10,0.92);
  border-bottom: 1px solid var(--gold-border);
  height: 64px;
}
.nav-brand {
  display: flex; align-items: center; gap: 12px;
  height: 100%;
}
.nav-brand .logo-mark {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
}
.nav-brand-name {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.32em;
  color: var(--gold);
  text-transform: uppercase;
  line-height: 1;
}
.nav-links {
  display: flex; gap: 32px;
  align-items: center;
  height: 100%;
}
.nav-link {
  position: relative;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  padding: 8px 0;
  transition: color 0.3s var(--ease-soft);
  display: inline-flex;
  align-items: center;
}
.nav-link::after {
  content: '';
  position: absolute; left: 50%; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.4s var(--ease-luxe), left 0.4s var(--ease-luxe);
}
.nav-link:hover { color: var(--gold); }
.nav-link:hover::after { width: 100%; left: 0; }
.nav-link.active { color: var(--gold); }
.nav-link.active::before {
  content: '';
  position: absolute; left: 50%; top: -6px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateX(-50%);
  box-shadow: 0 0 6px var(--gold);
}
.nav-link.active::after { width: 100%; left: 0; }

.nav-cta { display: flex; align-items: center; }
.btn-nav {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--gold);
  padding: 12px 22px;
  transition: color 0.4s var(--ease-soft), background 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft);
}
.btn-nav:hover {
  background: var(--gold);
  color: var(--black);
  box-shadow: 0 0 24px var(--gold-glow-soft);
}

.hamburger {
  display: none;
  flex-direction: column; gap: 6px;
  width: 28px; height: 22px;
  justify-content: center;
}
.hamburger span {
  display: block; height: 2px; width: 100%;
  background: var(--gold);
  transition: transform 0.4s var(--ease-soft), opacity 0.2s ease;
  transform-origin: center;
}
.hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-menu {
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--black);
  border-bottom: 1px solid var(--gold-border);
  transform: translateY(-100%);
  transition: transform 0.55s var(--ease-luxe);
  z-index: 8999;
  padding: 96px 24px 48px;
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu .nav-link {
  display: block;
  font-size: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--gold-border);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease-luxe), transform 0.4s var(--ease-luxe);
}
.mobile-menu.open .nav-link {
  opacity: 1; transform: none;
}
.mobile-menu.open .nav-link:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu.open .nav-link:nth-child(2) { transition-delay: 0.10s; }
.mobile-menu.open .nav-link:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu.open .nav-link:nth-child(4) { transition-delay: 0.20s; }
.mobile-menu.open .nav-link:nth-child(5) { transition-delay: 0.25s; }
.mobile-menu.open .nav-link:nth-child(6) { transition-delay: 0.30s; }

@media (max-width: 980px) {
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
}

/* fadePiece keyframe is still used by the contact form success flash. */
@keyframes fadePiece { to { opacity: 1; } }

/* =========================================================
   HERO
========================================================= */
.hero-block {
  text-align: center;
  padding: 16px 0 24px;
}
.home-logo-stage {
  margin: -32px auto 8px;
  position: relative;
}
@media (max-width: 768px) {
  .home-logo-stage { margin: -16px auto 4px; }
}

.hero-block { padding: 0; }
.hero-block > .title-hero { margin-top: 0; }
.hero-block > .subhead { margin-top: 20px; }
.hero-buttons {
  display: flex; gap: 16px;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  flex-wrap: wrap;
}
.trust-line {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 32px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--white-muted);
  justify-content: center;
}
.trust-line .line {
  height: 1px; width: 40px;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold-glow-soft);
}

/* =========================================================
   BUTTONS — calm, confident
========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 16px 30px;
  min-height: 48px;
  transition: transform 0.45s var(--ease-luxe),
              box-shadow 0.45s var(--ease-luxe),
              background 0.45s var(--ease-luxe),
              color 0.45s var(--ease-luxe),
              border-color 0.45s var(--ease-luxe);
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--gold);
  color: var(--black);
  border: 1px solid var(--gold);
}
.btn-primary:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  box-shadow: 0 0 28px var(--gold-glow-soft);
}
.btn-ghost {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}
.btn-ghost:hover {
  background: rgba(212,164,55,0.08);
  box-shadow: 0 0 24px var(--gold-glow-soft);
}

/* GSAP-managed reveals — keep classes inert for layout only */
.reveal { /* GSAP sets initial state */ }
.split-words { /* GSAP+SplitText handles char/word splitting */ }
.delay-1, .delay-2, .delay-3, .delay-4, .delay-5 {}

/* ─── HOME-PAGE HERO SLIDE-INS ──────────────────────────────
   Headline slides in from the LEFT, subhead from the RIGHT.
   Buttons + trust line fade up after. Triggered by the body
   class .hero-anim-go which is added the instant the
   cinematic intro completes. */
body.home-page .title-hero {
  opacity: 0;
  transform: translateX(-100vw);
  filter: blur(10px);
  will-change: transform, opacity, filter;
}
body.home-page .hero-block .subhead {
  opacity: 0;
  transform: translateX(100vw);
  filter: blur(8px);
  will-change: transform, opacity, filter;
}
body.home-page .hero-buttons .btn:nth-child(1) {
  opacity: 0;
  transform: translateX(-100vw);
  filter: blur(10px);
  will-change: transform, opacity, filter;
}
body.home-page .hero-buttons .btn:nth-child(2) {
  opacity: 0;
  transform: translateX(100vw);
  filter: blur(8px);
  will-change: transform, opacity, filter;
}
body.home-page .trust-line {
  opacity: 0;
  transform: scale(0.94);
  filter: blur(8px) brightness(1.6);
  letter-spacing: 0.55em;
  will-change: transform, opacity, filter, letter-spacing;
}

body.home-page.hero-anim-go .title-hero {
  animation: heroSlideLeft 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
body.home-page.hero-anim-go .hero-block .subhead {
  animation: heroSlideRight 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}

/* Buttons + trust line are gated on a SECOND scroll: the JS adds
   .is-revealed only once the user has scrolled the .hero-buttons
   element into view (after the headline + subhead have already
   played). */
body.home-page .hero-buttons.is-revealed .btn:nth-child(1) {
  animation: heroSlideLeft 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
body.home-page .hero-buttons.is-revealed .btn:nth-child(2) {
  animation: heroSlideRight 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}
body.home-page .trust-line.is-revealed {
  animation: trustReveal 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
}

@keyframes heroSlideLeft {
  to { transform: translateX(0); opacity: 1; filter: blur(0); }
}
@keyframes heroSlideRight {
  to { transform: translateX(0); opacity: 1; filter: blur(0); }
}
@keyframes heroFadeUp {
  to { transform: translateY(0); opacity: 1; }
}
@keyframes trustReveal {
  0%   {
    opacity: 0;
    transform: scale(0.94);
    filter: blur(8px) brightness(1.6);
    letter-spacing: 0.55em;
  }
  60%  {
    opacity: 1;
    filter: blur(0) brightness(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) brightness(1);
    letter-spacing: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .title-hero,
  body.home-page .hero-block .subhead,
  body.home-page .hero-buttons .btn,
  body.home-page .trust-line {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* ─── EVERY-PAGE HERO SLIDE-INS (non-home) ──────────────────
   Same pattern as the home page: pre-positioned off-screen
   left / off-screen right, triggered by body.page-anim-go
   which is added on IO intersection + scroll fallback. */
body:not(.home-page) .title-page {
  opacity: 0;
  transform: translateX(-100vw);
  filter: blur(10px);
  will-change: transform, opacity, filter;
}
body:not(.home-page) main > section:first-of-type .subhead {
  opacity: 0;
  transform: translateX(100vw);
  filter: blur(8px);
  will-change: transform, opacity, filter;
}
body:not(.home-page) main > section:first-of-type .kicker {
  opacity: 0;
  transform: translateY(-220px);
  will-change: transform, opacity;
}

body:not(.home-page).page-anim-go .title-page {
  animation: heroSlideLeft 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
body:not(.home-page).page-anim-go main > section:first-of-type .subhead {
  animation: heroSlideRight 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}
body:not(.home-page).page-anim-go main > section:first-of-type .kicker {
  animation: heroSlideDown 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes heroSlideDown {
  to { transform: translateY(0); opacity: 1; }
}

/* ─── CONTACT PAGE — 3D portal-fly-in for both boxes ───
   The left .contact-info and the right .form lift in from opposite
   diagonals at 3D-skewed angles, settle with overshoot wobble, fire a
   gold halo pulse, and the trust badges stamp themselves in like
   wax seals afterwards. Triggered only after the user scrolls past
   the page hero block. */
body.contact-page .contact-grid {
  perspective: 1400px;
  perspective-origin: 50% 50%;
}
body.contact-page .contact-grid > .contact-info,
body.contact-page .contact-grid > .form {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
}
body.contact-page .contact-grid > .contact-info {
  opacity: 0;
  transform: rotateX(45deg) rotateY(-30deg) translate(-90px, 100px) scale(0.78);
  transform-origin: left center;
  filter: blur(16px) brightness(1.7);
}
body.contact-page .contact-grid > .form {
  opacity: 0;
  transform: rotateX(45deg) rotateY(30deg) translate(90px, 100px) scale(0.78);
  transform-origin: right center;
  filter: blur(16px) brightness(1.7);
}

/* Gold halo ring that pulses around each box at the moment of landing. */
body.contact-page .contact-grid > .contact-info::before,
body.contact-page .contact-grid > .form::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 6px;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(212, 164, 55, 0);
  z-index: 5;
}

body.contact-page.contact-anim-go .contact-grid > .contact-info {
  animation: contactBoxLeftFly 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
body.contact-page.contact-anim-go .contact-grid > .form {
  animation: contactBoxRightFly 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}
body.contact-page.contact-anim-go .contact-grid > .contact-info::before {
  animation: contactHaloPulse 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.85s forwards;
}
body.contact-page.contact-anim-go .contact-grid > .form::before {
  animation: contactHaloPulse 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.05s forwards;
}

@keyframes contactBoxLeftFly {
  0% {
    opacity: 0;
    transform: rotateX(45deg) rotateY(-30deg) translate(-90px, 100px) scale(0.78);
    filter: blur(16px) brightness(1.7);
  }
  50% {
    opacity: 1;
    transform: rotateX(-8deg) rotateY(8deg) translate(0, 0) scale(1.04);
    filter: blur(2px) brightness(1.3);
  }
  72% {
    transform: rotateX(3deg) rotateY(-3deg) scale(0.985);
    filter: blur(0) brightness(1.08);
  }
  88% {
    transform: rotateX(-1deg) rotateY(1.5deg) scale(1.005);
    filter: blur(0) brightness(1.02);
  }
  100% {
    opacity: 1;
    transform: rotateX(0) rotateY(0) translate(0, 0) scale(1);
    filter: blur(0) brightness(1);
  }
}
@keyframes contactBoxRightFly {
  0% {
    opacity: 0;
    transform: rotateX(45deg) rotateY(30deg) translate(90px, 100px) scale(0.78);
    filter: blur(16px) brightness(1.7);
  }
  50% {
    opacity: 1;
    transform: rotateX(-8deg) rotateY(-8deg) translate(0, 0) scale(1.04);
    filter: blur(2px) brightness(1.3);
  }
  72% {
    transform: rotateX(3deg) rotateY(3deg) scale(0.985);
    filter: blur(0) brightness(1.08);
  }
  88% {
    transform: rotateX(-1deg) rotateY(-1.5deg) scale(1.005);
    filter: blur(0) brightness(1.02);
  }
  100% {
    opacity: 1;
    transform: rotateX(0) rotateY(0) translate(0, 0) scale(1);
    filter: blur(0) brightness(1);
  }
}
@keyframes contactHaloPulse {
  0%   { box-shadow: 0 0 0 0 rgba(212, 164, 55, 0), inset 0 0 0 1px rgba(212, 164, 55, 0); }
  35%  { box-shadow: 0 0 36px 4px rgba(212, 164, 55, 0.6), inset 0 0 0 1px rgba(212, 164, 55, 0.55); }
  100% { box-shadow: 0 0 0 0 rgba(212, 164, 55, 0), inset 0 0 0 1px rgba(212, 164, 55, 0); }
}

/* Trust badges stamp themselves into place like wax seals — staggered,
   slightly overshooting on rotation + scale. */
body.contact-page .trust-badge {
  opacity: 0;
  transform: rotate(-30deg) scale(0);
  transform-origin: center;
  will-change: transform, opacity;
}
body.contact-page.contact-anim-go .trust-badge {
  animation: trustBadgeStamp 0.95s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
body.contact-page.contact-anim-go .trust-badge:nth-child(1) { animation-delay: 1.1s; }
body.contact-page.contact-anim-go .trust-badge:nth-child(2) { animation-delay: 1.28s; }
body.contact-page.contact-anim-go .trust-badge:nth-child(3) { animation-delay: 1.46s; }
@keyframes trustBadgeStamp {
  0%   { opacity: 0; transform: rotate(-30deg) scale(0); filter: blur(6px); }
  55%  { opacity: 1; transform: rotate(8deg) scale(1.18); filter: blur(0); }
  78%  { transform: rotate(-3deg) scale(0.96); }
  100% { opacity: 1; transform: rotate(0) scale(1); filter: blur(0); }
}

/* Form fields cascade in after the box lands — line-drawn from left. */
body.contact-page .form .field {
  opacity: 0;
  transform: translateY(14px);
  will-change: transform, opacity;
}
body.contact-page.contact-anim-go .form .field {
  animation: contactFieldRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
body.contact-page.contact-anim-go .form .field:nth-child(1) { animation-delay: 1.20s; }
body.contact-page.contact-anim-go .form .field:nth-child(2) { animation-delay: 1.32s; }
body.contact-page.contact-anim-go .form .field:nth-child(3) { animation-delay: 1.44s; }
body.contact-page.contact-anim-go .form .field:nth-child(4) { animation-delay: 1.56s; }
body.contact-page.contact-anim-go .form .field:nth-child(5) { animation-delay: 1.68s; }
body.contact-page .form .btn-submit {
  opacity: 0;
  transform: rotate(-30deg) scale(0);
  transform-origin: center;
  will-change: transform, opacity;
}
body.contact-page.contact-anim-go .form .btn-submit {
  animation: trustBadgeStamp 0.95s cubic-bezier(0.34, 1.56, 0.64, 1) 1.95s forwards;
}
@keyframes contactFieldRise {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  body.contact-page .contact-grid > .contact-info,
  body.contact-page .contact-grid > .form,
  body.contact-page .trust-badge,
  body.contact-page .form .field,
  body.contact-page .form .btn-submit {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  body.contact-page .contact-grid > .contact-info::before,
  body.contact-page .contact-grid > .form::before { display: none !important; }
}

/* ─── CONTACT CLOSING — "Let's Automate Your Future" reveal ───
   Characters tumble in from a random 3D scatter and snap into place
   with a brief gold flash, then settle into a permanent soft gold
   glow that stays for the rest of the session. */
body.contact-page .closing-text {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  filter: none;
}
body.contact-page .closing-aura,
body.contact-page .closing-divider {
  display: none !important;
}

body.contact-page .closing-text .closing-char {
  display: inline-block;
  opacity: 0;
  transform:
    translate(var(--cx, 0px), var(--cy, 0px))
    rotateZ(var(--crot, 0deg))
    scale(0.25);
  filter: blur(20px) brightness(2.4);
  will-change: transform, opacity, filter;
  /* Override the parent's background-clip:text setup which would
     render each char as transparent. Each char paints its own
     multi-stop warm-gold gradient with a soft inner highlight for a
     more dimensional, premium feel. */
  background:
    linear-gradient(
      135deg,
      #b88a2c 0%,
      #d4a437 22%,
      #f0cf6e 48%,
      #fae3a8 55%,
      #f0cf6e 62%,
      #d4a437 78%,
      #a87a22 100%
    );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body.contact-page .closing-text .closing-char.space {
  width: 0.32em;
  -webkit-text-fill-color: transparent;
}

@keyframes closingCharSnap {
  0% {
    opacity: 0;
    transform:
      translate(var(--cx, 0px), var(--cy, 0px))
      rotateZ(var(--crot, 0deg))
      scale(0.25);
    filter: blur(20px) brightness(2.4);
  }
  55% {
    opacity: 1;
    transform: translate(0, -6px) rotateZ(0) scale(1.18);
    filter: blur(0) brightness(1.3);
  }
  78% {
    transform: translate(0, 0) rotateZ(0) scale(0.96);
    filter: blur(0) brightness(1.08);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotateZ(0) scale(1);
    filter: blur(0) brightness(1);
  }
}

body.contact-page.closing-anim-go .closing-text .closing-char {
  animation: closingCharSnap 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  body.contact-page .closing-text .closing-char {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* ─── HOME — TIER ROWS: cinematic 3D fold-down reveal ───
   Each row unfolds from above like a card being slammed onto a table:
   3D rotateX from edge-on → flat with overshoot wobble, gold light
   sweeps across the row, the number spins + scales in, the arrow
   bounces in from the right. Staggered per row when JS fires
   .tiers-reveal-go on the parent .tier-preview. */
.tier-preview {
  perspective: 1400px;
  perspective-origin: 50% 0;
}
.tier-preview .tier-row {
  opacity: 0;
  transform: rotateX(-95deg) translateY(-30px);
  transform-origin: 50% 0%;
  transform-style: preserve-3d;
  filter: blur(14px) brightness(2);
  will-change: transform, opacity, filter;
  position: relative;
  overflow: hidden;
}
.tier-preview .tier-row .tier-num {
  display: inline-block;
  opacity: 0;
  transform: rotate(-180deg) scale(0.25);
  will-change: transform, opacity;
}
.tier-preview .tier-row .tier-arrow {
  display: inline-block;
  opacity: 0;
  transform: translateX(60px) scale(0.7);
  will-change: transform, opacity;
}
.tier-preview .tier-row::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 164, 55, 0) 35%,
    rgba(245, 212, 133, 0.45) 50%,
    rgba(212, 164, 55, 0) 65%,
    transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.tier-preview .tier-row > * { position: relative; z-index: 1; }

/* JS adds .tiers-reveal-go on the parent → all 5 rows animate in
   with a per-row delay set via nth-child below. */
.tier-preview.tiers-reveal-go .tier-row {
  animation: tierRowFold 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.tier-preview.tiers-reveal-go .tier-row::before {
  animation: tierGoldSweep 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.tier-preview.tiers-reveal-go .tier-row .tier-num {
  animation: tierNumSpin 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.tier-preview.tiers-reveal-go .tier-row .tier-arrow {
  animation: tierArrowFly 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.tier-preview.tiers-reveal-go .tier-row:nth-child(1) { animation-delay: 0s; }
.tier-preview.tiers-reveal-go .tier-row:nth-child(2) { animation-delay: 0.15s; }
.tier-preview.tiers-reveal-go .tier-row:nth-child(3) { animation-delay: 0.30s; }
.tier-preview.tiers-reveal-go .tier-row:nth-child(4) { animation-delay: 0.45s; }
.tier-preview.tiers-reveal-go .tier-row:nth-child(5) { animation-delay: 0.60s; }
.tier-preview.tiers-reveal-go .tier-row:nth-child(6) { animation-delay: 0.75s; }
.tier-preview.tiers-reveal-go .tier-row:nth-child(1)::before { animation-delay: 0.55s; }
.tier-preview.tiers-reveal-go .tier-row:nth-child(2)::before { animation-delay: 0.70s; }
.tier-preview.tiers-reveal-go .tier-row:nth-child(3)::before { animation-delay: 0.85s; }
.tier-preview.tiers-reveal-go .tier-row:nth-child(4)::before { animation-delay: 1.00s; }
.tier-preview.tiers-reveal-go .tier-row:nth-child(5)::before { animation-delay: 1.15s; }
.tier-preview.tiers-reveal-go .tier-row:nth-child(6)::before { animation-delay: 1.30s; }
.tier-preview.tiers-reveal-go .tier-row:nth-child(1) .tier-num { animation-delay: 0.35s; }
.tier-preview.tiers-reveal-go .tier-row:nth-child(2) .tier-num { animation-delay: 0.50s; }
.tier-preview.tiers-reveal-go .tier-row:nth-child(3) .tier-num { animation-delay: 0.65s; }
.tier-preview.tiers-reveal-go .tier-row:nth-child(4) .tier-num { animation-delay: 0.80s; }
.tier-preview.tiers-reveal-go .tier-row:nth-child(5) .tier-num { animation-delay: 0.95s; }
.tier-preview.tiers-reveal-go .tier-row:nth-child(6) .tier-num { animation-delay: 1.10s; }
.tier-preview.tiers-reveal-go .tier-row:nth-child(1) .tier-arrow { animation-delay: 0.7s; }
.tier-preview.tiers-reveal-go .tier-row:nth-child(2) .tier-arrow { animation-delay: 0.85s; }
.tier-preview.tiers-reveal-go .tier-row:nth-child(3) .tier-arrow { animation-delay: 1.00s; }
.tier-preview.tiers-reveal-go .tier-row:nth-child(4) .tier-arrow { animation-delay: 1.15s; }
.tier-preview.tiers-reveal-go .tier-row:nth-child(5) .tier-arrow { animation-delay: 1.30s; }
.tier-preview.tiers-reveal-go .tier-row:nth-child(6) .tier-arrow { animation-delay: 1.45s; }

@keyframes tierRowFold {
  0% {
    opacity: 0;
    transform: rotateX(-95deg) translateY(-30px);
    filter: blur(14px) brightness(2);
  }
  45% {
    opacity: 1;
    transform: rotateX(20deg) translateY(0);
    filter: blur(2px) brightness(1.5);
  }
  68% {
    transform: rotateX(-8deg) translateY(0);
    filter: blur(0) brightness(1.15);
  }
  85% {
    transform: rotateX(3deg) translateY(0);
    filter: blur(0) brightness(1.05);
  }
  100% {
    opacity: 1;
    transform: rotateX(0) translateY(0);
    filter: blur(0) brightness(1);
  }
}
@keyframes tierGoldSweep {
  0%   { left: -100%; }
  100% { left: 100%; }
}
@keyframes tierNumSpin {
  0%   { opacity: 0; transform: rotate(-200deg) scale(0.25); }
  60%  { opacity: 1; transform: rotate(20deg) scale(1.25); }
  82%  { transform: rotate(-6deg) scale(0.96); }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes tierArrowFly {
  0%   { opacity: 0; transform: translateX(60px) scale(0.7); }
  60%  { opacity: 1; transform: translateX(-8px) scale(1.1); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .tier-preview .tier-row,
  .tier-preview .tier-row .tier-num,
  .tier-preview .tier-row .tier-arrow {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .tier-preview .tier-row::before { display: none !important; }
}

/* ─── HOME — "What We Build" tiers section reveal ─── */
.tiers-section { padding: 32px 0 40px !important; }
.tiers-section .hairline { margin: 12px auto !important; }
.tiers-section .hero-buttons { margin-top: 18px !important; }

.tiers-section .kicker {
  opacity: 0;
  transform: translateY(-220px);
  will-change: transform, opacity;
}
.tiers-section .title-section {
  opacity: 0;
  transform: translateX(-100vw);
  filter: blur(10px);
  will-change: transform, opacity, filter;
}
.tiers-section .subhead {
  opacity: 0;
  transform: translateX(100vw);
  filter: blur(8px);
  will-change: transform, opacity, filter;
}
.tiers-section.is-revealed .kicker {
  animation: heroSlideDown 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.tiers-section.is-revealed .title-section {
  animation: heroSlideLeft 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}
.tiers-section.is-revealed .subhead {
  animation: heroSlideRight 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .tiers-section .kicker,
  .tiers-section .title-section,
  .tiers-section .subhead {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* ─── HOW IT WORKS — "Why Choose Illuminati AI" reveal ─── */
.whychoose-section .title-section {
  opacity: 0;
  transform: translateX(-100vw);
  filter: blur(10px);
  will-change: transform, opacity, filter;
}
.whychoose-section .subhead {
  opacity: 0;
  transform: translateX(100vw);
  filter: blur(8px);
  will-change: transform, opacity, filter;
}
.whychoose-section.is-revealed .title-section {
  animation: heroSlideLeft 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.whychoose-section.is-revealed .subhead {
  animation: heroSlideRight 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .whychoose-section .title-section,
  .whychoose-section .subhead {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* ─── SERVICES PAGE: per-card scroll-triggered slide-ins ───
   Cards 1 + 2 drop down from above (after hero anim + first scroll).
   Card 3 slides in from the LEFT, card 4 from the RIGHT, card 5
   slides UP from below — each fires only when the user scrolls
   the card into view. */
.service-card.slide-up-card {
  opacity: 0;
  transform: translateY(-320px);
  filter: blur(6px);
  will-change: transform, opacity, filter;
}
.service-card.slide-up-card.is-revealed {
  animation: cardSlideDown 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.service-card.slide-direction--left {
  opacity: 0;
  transform: translateX(-100vw);
  filter: blur(8px);
  will-change: transform, opacity, filter;
}
.service-card.slide-direction--left.is-revealed {
  animation: cardSlideFromLeft 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.service-card.slide-direction--right {
  opacity: 0;
  transform: translateX(100vw);
  filter: blur(8px);
  will-change: transform, opacity, filter;
}
.service-card.slide-direction--right.is-revealed {
  animation: cardSlideFromRight 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.service-card.slide-direction--up {
  opacity: 0;
  transform: translateY(280px);
  filter: blur(6px);
  will-change: transform, opacity, filter;
}
.service-card.slide-direction--up.is-revealed {
  animation: cardSlideFromBottom 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cardSlideDown {
  to { transform: translateY(0); opacity: 1; filter: blur(0); }
}
@keyframes cardSlideFromLeft {
  to { transform: translateX(0); opacity: 1; filter: blur(0); }
}
@keyframes cardSlideFromRight {
  to { transform: translateX(0); opacity: 1; filter: blur(0); }
}
@keyframes cardSlideFromBottom {
  to { transform: translateY(0); opacity: 1; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .service-card.slide-up-card,
  .service-card.slide-direction--left,
  .service-card.slide-direction--right,
  .service-card.slide-direction--up {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* ─── PRODUCTS PAGE: cards 1 + 2 enter on diagonal trajectories ───
   Triggered by JS adding .is-revealed once the user has scrolled
   past the headline + subhead, with real scroll movement. */
.product-card.diagonal-from-left {
  opacity: 0;
  transform: translate(-90vw, -70vh) rotate(-12deg);
  filter: blur(8px);
  will-change: transform, opacity, filter;
}
.product-card.diagonal-from-left.is-revealed {
  animation: productDiagonalLeft 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.product-card.diagonal-from-right {
  opacity: 0;
  transform: translate(90vw, -70vh) rotate(12deg);
  filter: blur(8px);
  will-change: transform, opacity, filter;
}
.product-card.diagonal-from-right.is-revealed {
  animation: productDiagonalRight 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.18s forwards;
}

/* Future Products card — centered, slides up from below. */
.product-card.slide-from-bottom {
  opacity: 0;
  transform: translateY(300px);
  filter: blur(6px);
  will-change: transform, opacity, filter;
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 640px;
}
.product-card.slide-from-bottom.is-revealed {
  animation: productSlideFromBottom 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes productDiagonalLeft {
  to {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes productDiagonalRight {
  to {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes productSlideFromBottom {
  to { transform: translateY(0); opacity: 1; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .product-card.diagonal-from-left,
  .product-card.diagonal-from-right,
  .product-card.slide-from-bottom {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* ─── PRODUCTS CTA — "Book a Free Session" CRAZY reveal ───
   Slams in from far below with rotation + scale-up overshoot,
   blooms a gold halo, fires a shockwave ring, wobbles twice into
   place, then pulses two idle gold glows. */
.products-cta-btn {
  opacity: 0;
  transform: translateY(220px) scale(0.28) rotate(-32deg);
  filter: blur(18px) brightness(2.6);
  will-change: transform, opacity, filter;
  position: relative;
  z-index: 1;
}
.products-cta-btn.is-revealed {
  animation:
    productsCtaCrazy      1.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    productsCtaIdlePulse  2.4s ease-in-out 1.85s 2;
}
.products-cta-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid rgba(212, 164, 55, 0.9);
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  box-sizing: border-box;
}
.products-cta-btn.is-revealed::after {
  animation: productsCtaShockwave 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.42s forwards;
}

@keyframes productsCtaCrazy {
  0% {
    opacity: 0;
    transform: translateY(220px) scale(0.28) rotate(-32deg);
    filter: blur(18px) brightness(2.6);
  }
  30% {
    opacity: 1;
    transform: translateY(-14px) scale(1.22) rotate(8deg);
    filter: blur(2px) brightness(1.6)
            drop-shadow(0 0 32px rgba(212, 164, 55, 0.95));
  }
  50% {
    transform: translateY(0) scale(0.92) rotate(-4deg);
    filter: blur(0) brightness(1.25)
            drop-shadow(0 0 48px rgba(212, 164, 55, 0.85))
            drop-shadow(0 0 96px rgba(212, 164, 55, 0.45));
  }
  68% {
    transform: translateY(0) scale(1.05) rotate(2deg);
    filter: blur(0) brightness(1.12)
            drop-shadow(0 0 30px rgba(212, 164, 55, 0.6));
  }
  84% {
    transform: translateY(0) scale(0.985) rotate(-0.8deg);
    filter: blur(0) brightness(1.04)
            drop-shadow(0 0 18px rgba(212, 164, 55, 0.35));
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0) brightness(1) drop-shadow(0 0 0 rgba(212, 164, 55, 0));
  }
}

@keyframes productsCtaShockwave {
  0% {
    opacity: 0.95;
    transform: scale(1);
    border-width: 2px;
  }
  60% {
    opacity: 0.5;
    border-width: 1.5px;
  }
  100% {
    opacity: 0;
    transform: scale(2.4);
    border-width: 0;
  }
}

@keyframes productsCtaIdlePulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(212, 164, 55, 0)); }
  50% {
    filter: drop-shadow(0 0 28px rgba(212, 164, 55, 0.7))
            drop-shadow(0 0 56px rgba(212, 164, 55, 0.3));
  }
}

@media (prefers-reduced-motion: reduce) {
  .products-cta-btn {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .products-cta-btn::after { display: none !important; }
}

/* ─── Smooth CTA reveal — used on how-it-works "Start Your AI
   Journey" + faq closing button. Cleaner / quicker than the dramatic
   products slam: rises with a gentle scale overshoot + gold halo
   bloom, settles in <1s. */
.smooth-cta-btn {
  opacity: 0;
  transform: translateY(36px) scale(0.96);
  filter: blur(4px);
  will-change: transform, opacity, filter;
  position: relative;
  z-index: 1;
}
.smooth-cta-btn.is-revealed {
  animation: smoothCtaReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes smoothCtaReveal {
  0% {
    opacity: 0;
    transform: translateY(36px) scale(0.96);
    filter: blur(4px) drop-shadow(0 0 0 rgba(212, 164, 55, 0));
  }
  55% {
    opacity: 1;
    transform: translateY(-2px) scale(1.04);
    filter: blur(0)
            drop-shadow(0 0 24px rgba(212, 164, 55, 0.7))
            drop-shadow(0 0 48px rgba(212, 164, 55, 0.3));
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) drop-shadow(0 0 0 rgba(212, 164, 55, 0));
  }
}
@media (prefers-reduced-motion: reduce) {
  .smooth-cta-btn { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
}

/* ─── Services CTA — "Begin Your Engagement" reveal ───
   Same crazy slam-in + shockwave + idle pulse as the products CTA.
   Triggered by JS once the user has scrolled past the AI Strategy &
   Audit + Website Engineering cards. */
.services-cta-btn {
  opacity: 0;
  transform: translateY(220px) scale(0.28) rotate(-32deg);
  filter: blur(18px) brightness(2.6);
  will-change: transform, opacity, filter;
  position: relative;
  z-index: 1;
}
.services-cta-btn.is-revealed {
  animation:
    productsCtaCrazy      1.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    productsCtaIdlePulse  2.4s ease-in-out 1.85s 2;
}
.services-cta-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid rgba(212, 164, 55, 0.9);
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  box-sizing: border-box;
}
.services-cta-btn.is-revealed::after {
  animation: productsCtaShockwave 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.42s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .services-cta-btn {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .services-cta-btn::after { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.home-page) .title-page,
  body:not(.home-page) main > section:first-of-type .subhead,
  body:not(.home-page) main > section:first-of-type .kicker {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* Split-text wrappers — keep words atomic so chars never break mid-word */
.split-word { display: inline-block; white-space: nowrap; }
.ch         { display: inline-block; will-change: transform, opacity, filter; }

.hairline {
  height: 1px;
  width: 100%;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  margin: 32px auto;
  max-width: 200px;
}

/* Mirror hairline above every page hero headline (matches the .hairline
   element rendered below the subhead). */
.title-hero::before,
.title-page::before {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  max-width: 200px;
  margin: 0 auto 28px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

/* =========================================================
   HOME MANIFESTO
========================================================= */
.manifesto {
  text-align: center;
  padding: 32px 0;
}

/* Hero headline — "A new order of work" */
body.home-page .manifesto .kicker {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(3rem, 6.4vw, 5.4rem);
  line-height: 1.1;
  max-width: 14ch;
  margin: 0 auto;
  text-transform: none;
  letter-spacing: normal;
}

/* Lede — "We craft sacred, intelligent agents that work while you sleep…" */
.manifesto .lede {
  font-family: 'EB Garamond', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  max-width: 980px;
  margin: 32px auto 0;
  letter-spacing: 0.008em;
  padding-bottom: 0.25em;
}

/* =========================================================
   PROBLEM / SOLUTION (About)
========================================================= */
.duality {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
  text-align: left;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px) {
  .duality { grid-template-columns: 1fr; gap: 16px; }
}
.duality .divider { display: none; }

.problem-col,
.solution-col {
  background: var(--black-card);
  border: 1px solid var(--gold-border);
  padding: 32px;
  transition: border-color 0.4s var(--ease-luxe), box-shadow 0.4s var(--ease-luxe);
}
.problem-col:hover,
.solution-col:hover {
  border-color: var(--gold);
  box-shadow: 0 12px 32px var(--gold-glow-soft);
}
@media (max-width: 600px) {
  .problem-col, .solution-col { padding: 24px; }
}
.col-head {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}
.row-item {
  position: relative;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 12px;
  font-size: 0.96rem;
  color: var(--white);
  border-left: 1px solid transparent;
  transition: color 0.35s var(--ease-soft);
}
.row-item::before {
  content: '';
  position: absolute; left: 0; top: 0;
  width: 1px; height: 0;
  background: var(--gold);
  transition: height 0.4s var(--ease-luxe);
}
.row-item:hover::before { height: 100%; }
.row-item:hover { color: var(--gold-light); }
.row-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--gold-border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gold);
  font-size: 11px;
}
.row-icon.check { box-shadow: 0 0 8px var(--gold-glow-soft); }

/* =========================================================
   SERVICES GRID — 4 cards, 2x2 on desktop
========================================================= */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 40px auto 0;
  max-width: 1100px;
}
@media (max-width: 720px) { .services-grid { grid-template-columns: 1fr; } }

.service-card {
  position: relative;
  background: var(--black-card);
  border: 1px solid var(--gold-border);
  padding: 22px 26px;
  text-align: left;
  transition: transform 0.4s var(--ease-luxe), box-shadow 0.4s var(--ease-luxe), border-color 0.4s var(--ease-luxe);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  row-gap: 10px;
  align-items: start;
}
.service-card:hover {
  transform: translateY(-8px);
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold-border), 0 12px 36px var(--gold-glow-soft);
}
.service-card .service-icon {
  width: 40px; height: 40px;
  color: var(--gold);
  margin: 0;
  align-self: center;
  grid-column: 1;
  grid-row: 1;
}
.service-card h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.18rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  line-height: 1.3;
  margin: 0;
  align-self: center;
  justify-self: start;
  text-align: left;
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
}
/* Description, chips, learn-link, pricing and CTA each span both columns
   so they stack below the icon + heading row. */
.service-card p,
.service-card .chips,
.service-card .learn,
.service-card .service-pricing,
.service-card .service-cta-btn {
  grid-column: 1 / -1;
}

.service-card .service-cta-btn {
  justify-self: start;
}

/* Bottom-align the pricing + CTA block across every service card in a row,
   regardless of how tall the description / chip block above is. */
.services-grid--tiers .service-card {
  grid-template-rows: auto auto auto 1fr auto auto;
}
.services-grid--tiers .service-card p             { grid-row: 2; }
.services-grid--tiers .service-card .chips        { grid-row: 3; }
.services-grid--tiers .service-card .service-pricing { grid-row: 5; }
.services-grid--tiers .service-card .service-cta-btn { grid-row: 6; }
.service-card p {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.6;
  letter-spacing: 0.005em;
  margin: 0;
}
.service-card .learn {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.service-card .learn span { transition: transform 0.3s var(--ease-soft); display: inline-block; }
.service-card:hover .learn span { transform: translateX(4px); }

/* =========================================================
   STEPS (How It Works)
========================================================= */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px auto 0;
  max-width: 1100px;
}
@media (max-width: 900px) { .steps-grid { grid-template-columns: 1fr; } }

.step {
  position: relative;
  background: var(--black-card);
  border-top: 2px solid var(--gold);
  padding: 32px;
  text-align: left;
  overflow: hidden;
  transition: transform 0.5s var(--ease-luxe), box-shadow 0.5s var(--ease-luxe);
}
.step:hover { transform: translateY(-6px); box-shadow: 0 12px 32px var(--gold-glow-soft); }
.step .ghost {
  position: absolute;
  top: 8px; right: 16px;
  font-family: 'Italiana', serif;
  font-size: 96px;
  color: rgba(212,164,55,0.07);
  line-height: 1;
  pointer-events: none;
}
.step .step-diamond {
  width: 10px; height: 10px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 8px var(--gold-glow-soft);
  margin-bottom: 16px;
}
.step h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 12px;
}
.step p {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  color: var(--white-muted);
  font-size: 1rem;
  line-height: 1.55;
}

/* ---------------------------------------------------------
   HOW IT WORKS — SCROLL-PINNED STACKING DECK
   Scoped under .how-it-works-pinned so other pages are not
   affected. Three .step-card elements absolutely positioned
   inside .card-stack-area; their transforms + opacity are
   driven entirely by step-stack.js, not CSS transitions.
--------------------------------------------------------- */
/* Tighten the joins so the section sits close to the heading + CTA. */
.steps-intro { padding: 32px 0 0 !important; }
.steps-intro .hairline { margin: 16px auto 0 !important; }
.steps-cta   {
  padding-top: 64px !important;
  padding-bottom: 40px !important;
  margin-top: 0;
  position: relative;
  z-index: 20;            /* above the pinned step-stack (z:5) and ambient particles (z:1) */
  overflow: visible;
  isolation: isolate;
}
.steps-cta .container { overflow: visible; }
.steps-cta .hero-buttons.products-cta-btn { z-index: 30; }

/* =========================================================
   HOW IT WORKS — COMPACT CARD STACK + SPREAD (4-phase)
========================================================= */
.how-it-works-pinned {
  position: relative;
  height: 240vh;                 /* shorter scroll runway — tighter pacing */
  background: var(--black);
  z-index: 5;
  margin: 0;
}
.how-it-works-pinned .pinned-content {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 24px;
}
.how-it-works-pinned .card-stack-container {
  position: relative;
  width: 100%;
  max-width: 1280px;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Compact card */
.how-it-works-pinned .step-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  height: 480px;
  background: #0a0a0a;
  border: 1px solid rgba(212, 164, 55, 0.25);
  border-radius: 4px;
  padding: 40px;
  /* Explicit grid rows so the divider and description always sit at
     the SAME Y position across all three cards, regardless of how
     many lines the heading wraps to. */
  display: grid;
  grid-template-rows:
    auto                 /* PHASE label */
    32px                 /* gap below label */
    108px                /* heading box — 3 lines × 1.2 line-height */
    24px                 /* gap below heading */
    auto                 /* gold divider */
    24px                 /* gap below divider */
    1fr;                 /* description fills remaining space */
  align-items: start;
  justify-items: start;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, calc(-50% + 100vh));
  opacity: 0;
  will-change: transform, opacity;
  transition: none;
  overflow: hidden;
}
/* Empty spacer rows */
.how-it-works-pinned .step-card::before,
.how-it-works-pinned .step-card::after { content: none; }

/* Step label with em-dash prefix */
.how-it-works-pinned .step-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: #D4A437;
  text-transform: uppercase;
  margin: 0;
  opacity: 1;
  transform: none;
  grid-row: 1;
}
.how-it-works-pinned .step-label::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: #D4A437;
}

/* Heading — sits in row 3 of the card's grid; the row is exactly
   108px tall so the divider beneath always lands at the same Y. */
.how-it-works-pinned .step-heading {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  color: #D4A437;
  margin: 0;
  text-align: left;
  display: block !important;
  width: 100%;
  grid-row: 3;
  align-self: start;
}

/* Gold divider — pinned to row 5 of the card's grid so it sits at
   the same Y position in every card. */
.how-it-works-pinned .step-divider {
  width: 40px;
  height: 1.5px;
  background: #D4A437;
  display: block;
  margin: 0;
  box-shadow: 0 0 6px rgba(212, 164, 55, 0.4);
  grid-row: 5;
  align-self: start;
}

/* Description — pinned to row 7 of the card's grid (the `1fr` row
   that fills remaining space). */
.how-it-works-pinned .step-description {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.65;
  color: #ffffff;
  margin: 0;
  text-align: left;
  grid-row: 7;
  align-self: start;
}

/* ---- Reveal: per-element cascade triggered by .is-text-revealed on .step-card ---- */

/* Step label (cascade index 0) */
.how-it-works-pinned .step-card.is-text-revealed .step-label {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

/* Heading char-by-char mask reveal (cascade index 1, +0.15s) */
.how-it-works-pinned .reveal-mask {
  display: inline-block;
}
.how-it-works-pinned .word-wrapper {
  display: inline-block;
  white-space: nowrap;
}
.how-it-works-pinned .char-wrapper {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.2;
}
.how-it-works-pinned .char {
  display: inline-block;
  transform: none;
}

/* Description word-by-word reveal disabled — words always fully visible. */
.how-it-works-pinned .step-description .word {
  display: inline-block;
  opacity: 1;
  transform: none;
  white-space: pre;
}

/* ---- Tablet: narrower cards, still pinned ---- */
@media (max-width: 1023px) and (min-width: 768px) {
  .how-it-works-pinned .step-card {
    width: 320px;
    min-height: 300px;
    padding: 32px;
  }
  .how-it-works-pinned .step-heading { font-size: 26px; }
}

/* ---- Mobile: disable pinning entirely; vertical stack with fade-up ---- */
@media (max-width: 767px) {
  .how-it-works-pinned {
    height: auto;
  }
  .how-it-works-pinned .pinned-content {
    position: relative;
    height: auto;
    padding: 24px 24px 56px;
    overflow: visible;
  }
  .how-it-works-pinned .card-stack-container {
    height: auto;
    flex-direction: column;
    gap: 24px;
  }
  .how-it-works-pinned .step-card {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 380px;
    min-height: auto;
    transform: translate(0, 0) !important;
    opacity: 1 !important;
  }
  .how-it-works-pinned .step-heading { font-size: 24px; }
  .how-it-works-pinned .step-card .step-label,
  .how-it-works-pinned .step-card .step-description .word { opacity: 1; transform: none; }
  .how-it-works-pinned .step-card .step-divider { width: 32px; }
  .how-it-works-pinned .step-card .reveal-mask .char { transform: translateY(0); }
}

/* ---- Reduced motion: full collapse ---- */
@media (prefers-reduced-motion: reduce) {
  .how-it-works-pinned { height: auto; }
  .how-it-works-pinned .pinned-content {
    position: relative;
    height: auto;
    padding: 32px 24px;
    overflow: visible;
  }
  .how-it-works-pinned .card-stack-container {
    height: auto;
    flex-wrap: wrap;
    gap: 32px;
  }
  .how-it-works-pinned .step-card {
    position: relative;
    top: auto;
    left: auto;
    transform: none !important;
    opacity: 1 !important;
  }
  .how-it-works-pinned .step-divider { width: 32px !important; }
  .how-it-works-pinned .step-label { opacity: 1 !important; transform: none !important; }
  .how-it-works-pinned .reveal-mask .char {
    transform: translateY(0) !important;
    transition: none !important;
  }
  .how-it-works-pinned .step-description .word {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* =========================================================
   STATS GRID — 5 cards, 3-2 centered layout
========================================================= */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  margin: 40px auto 0;
  max-width: 1100px;
}
.stats-grid > .stat { grid-column: span 2; }
.stats-grid > .stat:nth-child(4) { grid-column: 2 / span 2; }
.stats-grid > .stat:nth-child(5) { grid-column: 4 / span 2; }
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid > .stat,
  .stats-grid > .stat:nth-child(4),
  .stats-grid > .stat:nth-child(5) { grid-column: span 1; grid-row: auto; }
}
@media (max-width: 600px) {
  .stats-grid { grid-template-columns: 1fr; }
}
.stat {
  background: var(--black-card);
  border-top: 2px solid var(--gold);
  padding: 28px;
  text-align: left;
  transition: transform 0.5s var(--ease-luxe), box-shadow 0.5s var(--ease-luxe);
}
.stat:hover { transform: translateY(-6px); box-shadow: 0 12px 32px var(--gold-glow-soft); }
.stat .stat-emoji { font-size: 22px; margin-bottom: 12px; filter: drop-shadow(0 0 6px var(--gold-glow-soft)); }
.stat .stat-num {
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  font-style: normal;
  letter-spacing: -0.015em;
  font-size: clamp(1.85rem, 3.2vw, 2.65rem);
  line-height: 1;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 14px;
}
.stat h4 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 10px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.stat p {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--white-muted);
  line-height: 1.65;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}
.stat.is-revealed h4 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.55s;
}
.stat.is-revealed p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.72s;
}
@media (prefers-reduced-motion: reduce) {
  .stat h4, .stat p {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   AUDIENCE B2B / B2C
========================================================= */
.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 32px;
  margin: 40px auto 0;
  text-align: left;
  max-width: 1120px;
}
@media (max-width: 980px) {
  .audience-grid { grid-template-columns: 1fr; gap: 24px; }
  .audience-grid .a-divider { display: none; }
}
.a-divider { background: linear-gradient(to bottom, transparent, var(--gold), transparent); }
.audience-card {
  border: 1px solid var(--gold-border);
  padding: 32px;
  background: var(--black-card);
  transition: transform 0.5s var(--ease-luxe), box-shadow 0.5s var(--ease-luxe);
  display: flex; flex-direction: column;
}
.audience-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px var(--gold-glow-soft); }
.audience-card h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 16px;
}
.audience-card p.lead {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--white);
  margin-bottom: 24px;
  line-height: 1.5;
}
.audience-card ul { margin-bottom: 32px; flex: 1; }
.audience-card li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0;
  font-size: 0.95rem;
  color: var(--white-muted);
}
.audience-card li::before {
  content: '✦';
  color: var(--gold);
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 4px;
}

/* =========================================================
   FAQ
========================================================= */
.faq-wrap { max-width: 820px; margin: 40px auto 0; }
.faq-item {
  border: 1px solid rgba(212, 164, 55, 0.28);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.35s var(--ease-soft),
              background 0.35s var(--ease-soft),
              box-shadow 0.35s var(--ease-soft);
}
.faq-item:hover {
  border-color: rgba(212, 164, 55, 0.5);
  background: rgba(212, 164, 55, 0.02);
}
.faq-item.open {
  border-color: rgba(212, 164, 55, 0.65);
  background: rgba(212, 164, 55, 0.025);
  box-shadow: 0 0 0 1px rgba(212, 164, 55, 0.18),
              0 10px 28px rgba(0, 0, 0, 0.45);
}
.faq-q {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 22px 26px;
  position: relative;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 1.35rem;
  color: var(--white);
  text-align: left;
  text-transform: none;
  letter-spacing: 0.005em;
  line-height: 1.4;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.35s var(--ease-soft);
}
.faq-q:hover { color: var(--gold); }
.faq-icon {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 20px;
  color: var(--gold);
  transition: transform 0.45s var(--ease-luxe);
  flex-shrink: 0;
}
.faq-item.open .faq-icon { transform: rotate(135deg); }
/* Gold separator line that appears between question and answer when
   the item opens — anchored to the bottom of the question so the gap
   above the answer text equals the gap below it (both = .faq-a top
   padding). */
.faq-item.open .faq-q {
  box-shadow: inset 0 -1px 0 rgba(212, 164, 55, 0.4);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.55s var(--ease-luxe), padding 0.55s var(--ease-luxe);
  padding: 0 26px;
}
.faq-item.open .faq-a { max-height: 1100px; padding: 22px 26px; }
.faq-a-inner {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 1.32rem;
  line-height: 1.95;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.85);
  transform: translateY(-26px) rotateX(-32deg) scale(0.96);
  transform-origin: top center;
  opacity: 0;
  filter: blur(10px) brightness(1.7);
  transition:
    transform 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s,
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
    filter 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
  text-align: left;
  perspective: 800px;
}
.faq-q { text-align: left; }
.faq-a { text-align: left; perspective: 800px; }
.faq-item.open .faq-a-inner {
  transform: translateY(0) rotateX(0) scale(1);
  opacity: 1;
  filter: blur(0) brightness(1);
}

/* The gold separator + box border replace the older side-bar
   spotlight pseudo-element. */
.faq-page .faq-a-inner { position: relative; }

/* ─── FAQ items entrance — 3D edge-on UNFOLD with gold border pulse ───
   Each card swings open from its outer edge like a hinged sigil page,
   with a brief gold halo border, fired only after the user scrolls
   past the page hero. */
.faq-page .faq-item {
  opacity: 0;
  transform: perspective(1100px) rotateY(-92deg) translateX(-40px) scale(0.85);
  transform-origin: left center;
  filter: blur(14px) brightness(1.9);
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
  position: relative;
}
.faq-page .faq-item:nth-child(even) {
  transform: perspective(1100px) rotateY(92deg) translateX(40px) scale(0.85);
  transform-origin: right center;
}
.faq-page .faq-item.is-revealed {
  animation: faqUnfold 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes faqUnfold {
  0% {
    opacity: 0;
    transform: perspective(1100px) rotateY(-92deg) translateX(-40px) scale(0.85);
    filter: blur(14px) brightness(1.9);
  }
  50% {
    opacity: 1;
    transform: perspective(1100px) rotateY(10deg) translateX(0) scale(1.03);
    filter: blur(2px) brightness(1.35);
  }
  72% {
    transform: perspective(1100px) rotateY(-4deg) scale(0.99);
    filter: blur(0) brightness(1.08);
  }
  88% {
    transform: perspective(1100px) rotateY(1.5deg) scale(1.005);
    filter: blur(0) brightness(1.02);
  }
  100% {
    opacity: 1;
    transform: perspective(1100px) rotateY(0) translateX(0) scale(1);
    filter: blur(0) brightness(1);
  }
}
.faq-page .faq-item:nth-child(even).is-revealed {
  animation: faqUnfoldEven 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes faqUnfoldEven {
  0% {
    opacity: 0;
    transform: perspective(1100px) rotateY(92deg) translateX(40px) scale(0.85);
    filter: blur(14px) brightness(1.9);
  }
  50% {
    opacity: 1;
    transform: perspective(1100px) rotateY(-10deg) translateX(0) scale(1.03);
    filter: blur(2px) brightness(1.35);
  }
  72% {
    transform: perspective(1100px) rotateY(4deg) scale(0.99);
    filter: blur(0) brightness(1.08);
  }
  88% {
    transform: perspective(1100px) rotateY(-1.5deg) scale(1.005);
    filter: blur(0) brightness(1.02);
  }
  100% {
    opacity: 1;
    transform: perspective(1100px) rotateY(0) translateX(0) scale(1);
    filter: blur(0) brightness(1);
  }
}

/* Gold halo border that pulses around each item exactly when it lands. */
.faq-page .faq-item::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(212, 164, 55, 0);
  border-radius: 2px;
  z-index: 0;
}
.faq-page .faq-item.is-revealed::before {
  animation: faqHaloPulse 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
}
@keyframes faqHaloPulse {
  0%   { box-shadow: 0 0 0 0 rgba(212, 164, 55, 0), inset 0 0 0 1px rgba(212, 164, 55, 0); }
  35%  { box-shadow: 0 0 32px 2px rgba(212, 164, 55, 0.55), inset 0 0 0 1px rgba(212, 164, 55, 0.55); }
  100% { box-shadow: 0 0 0 0 rgba(212, 164, 55, 0), inset 0 0 0 1px rgba(212, 164, 55, 0); }
}

/* (The gold separator between question and answer is now drawn by the
   .faq-item.open .faq-q { box-shadow: inset 0 -1px 0 } rule.) */

@media (prefers-reduced-motion: reduce) {
  .faq-page .faq-item {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .faq-page .faq-item::before,
  .faq-page .faq-item .faq-q::after,
  .faq-page .faq-a-inner::before { display: none !important; }
  .faq-a-inner {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* ─── FAQ closing block — symmetric gold rule + tail line + gold rule.
   Cool but subtle: line above, "Still have questions. Let's talk!"
   in the middle, line below, all with balanced spacing. */
.faq-page .faq-tail-block {
  margin: 80px auto 0;
  max-width: 600px;
  text-align: center;
}
.faq-page .faq-tail-rule {
  margin: 28px auto;        /* equal breathing room above + below the text */
  width: 100%;
  max-width: 360px;
}
.faq-page .faq-tail-line {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(4px);
  position: relative;
  display: inline-block;
  margin: 0 auto;
  will-change: opacity, transform, filter;
}
.faq-page .faq-tail-line.is-revealed {
  animation: faqTailReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes faqTailReveal {
  0% {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(4px) drop-shadow(0 0 0 rgba(212, 164, 55, 0));
  }
  55% {
    opacity: 1;
    transform: translateY(-2px);
    filter: blur(0) drop-shadow(0 0 18px rgba(245, 212, 133, 0.55));
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0) drop-shadow(0 0 0 rgba(212, 164, 55, 0));
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-page .faq-tail-line {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* =========================================================
   CONTACT
========================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 40px auto 0;
  text-align: left;
  align-items: stretch;
  max-width: 1120px;
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 16px; }
}
.contact-info,
.contact-grid > .form {
  background: var(--black-card);
  border: 1px solid var(--gold-border);
  padding: 32px;
  transition: border-color 0.4s var(--ease-luxe), box-shadow 0.4s var(--ease-luxe);
}
.contact-info:hover,
.contact-grid > .form:hover {
  border-color: var(--gold);
  box-shadow: 0 12px 32px var(--gold-glow-soft);
}
@media (max-width: 600px) {
  .contact-info, .contact-grid > .form { padding: 24px; }
}
.contact-info p {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  color: var(--white-muted);
  font-size: 1.05rem;
  line-height: 1.55;
  margin-bottom: 32px;
}
.trust-badges { display: flex; flex-direction: column; gap: 12px; }
.trust-badge {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--gold-border);
  padding: 16px 20px;
  background: rgba(212,164,55,0.04);
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--white);
  transition: border-color 0.35s var(--ease-soft), background 0.35s var(--ease-soft);
}
.trust-badge:hover { border-color: var(--gold); background: rgba(212,164,55,0.08); }
.trust-badge svg { color: var(--gold); flex-shrink: 0; }

.form { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.field { position: relative; }
.field input, .field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--gold-border);
  padding: 20px 0 10px;
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: var(--white);
  border-radius: 0;
  transition: border-color 0.35s var(--ease-soft);
}
.field textarea { resize: vertical; min-height: 120px; }
.field label {
  position: absolute;
  left: 0; top: 18px;
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--white-muted);
  pointer-events: none;
  transition: transform 0.4s var(--ease-luxe), color 0.4s var(--ease-soft), font-size 0.4s var(--ease-soft), font-weight 0.4s var(--ease-soft);
}
.field input:focus, .field textarea:focus { border-color: var(--gold); }
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label {
  transform: translateY(-18px);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.field-line {
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold);
  box-shadow: 0 0 6px var(--gold-glow-soft);
  transition: width 0.45s var(--ease-luxe);
}
.field input:focus ~ .field-line,
.field textarea:focus ~ .field-line { width: 100%; }

.btn-submit {
  width: 100%;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 18px;
  margin-top: 16px;
  transition: transform 0.4s var(--ease-luxe), background 0.4s var(--ease-soft), color 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft);
}
.btn-submit:hover {
  transform: translateY(-2px);
  background: var(--gold);
  color: var(--black);
  box-shadow: 0 0 24px var(--gold-glow-soft);
}
.form-success {
  display: none;
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--gold);
  background: rgba(212,164,55,0.06);
  color: var(--gold);
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  text-align: center;
}
.form-success.visible { display: block; animation: fadePiece 0.6s var(--ease-luxe) forwards; }

/* =========================================================
   CLOSING STATEMENT
========================================================= */
.closing {
  text-align: center;
  padding: 120px 0;
  position: relative;
}
.closing-text {
  font-family: 'Italiana', serif;
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 1;
  color: var(--gold);
  letter-spacing: 0.01em;
  position: relative;
  display: inline-block;
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-bright) 50%, var(--gold) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerSweep 7s var(--ease-soft) infinite;
  filter: drop-shadow(0 0 24px var(--gold-glow-soft));
}
@keyframes shimmerSweep {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.closing-aura {
  position: absolute;
  top: 50%; left: 50%;
  width: 70%; height: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, var(--gold-glow-soft) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.closing-divider {
  height: 1px;
  width: 0;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  margin: 40px auto 0;
  max-width: 280px;
  transition: width 1.2s var(--ease-luxe);
  box-shadow: 0 0 8px var(--gold-glow-soft);
}
.closing-divider.in { width: 100%; }

/* =========================================================
   FOOTER
========================================================= */
.footer {
  position: relative;
  padding: 64px 0 0;
  border-top: 1px solid var(--gold-border);
  overflow: hidden;
}
/* .footer-bg-text watermark removed entirely — no display text in footer. */
.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
  text-align: left;
  align-items: start;
}
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; gap: 24px; } }
.footer-brand-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.footer-brand-row .logo-mark { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.footer-brand-name {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.32em;
  color: var(--gold);
  text-transform: uppercase;
}
.footer-tag {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--white-muted);
  margin-bottom: 8px;
  max-width: 280px;
}
.footer-india { font-size: 12px; color: var(--white-muted); }
.socials { display: flex; gap: 8px; margin-top: 16px; }
.social-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--gold-border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gold);
  transition: background 0.35s var(--ease-soft), color 0.35s var(--ease-soft), transform 0.35s var(--ease-luxe);
}
.social-btn:hover { background: var(--gold); color: var(--black); transform: translateY(-2px); }
.footer-h {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  height: 32px;
  display: flex;
  align-items: center;
}
.footer-list { display: flex; flex-direction: column; gap: 8px; }
.footer-list a {
  position: relative;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--white-muted);
  display: inline-block;
  transition: color 0.3s var(--ease-soft);
}
.footer-list a::after {
  content: '';
  position: absolute; left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.3s var(--ease-soft);
}
.footer-list a:hover { color: var(--gold); }
.footer-list a:hover::after { width: 100%; }
.footer-list .footer-location {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.01em;
}

/* ─── Contact page: direct contact block ─── */
.contact-direct {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(212, 164, 55, 0.18);
}
.contact-direct-h {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--gold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.contact-direct-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.contact-direct-list li {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: baseline;
  gap: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}
.contact-direct-label {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(212, 164, 55, 0.85);
}
.contact-direct-list a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 164, 55, 0.25);
  transition: color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft);
}
.contact-direct-list a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.footer-bottom {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--gold-border);
  padding: 16px 0;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  color: var(--white-muted);
}
.footer-bottom .legal { display: flex; gap: 16px; }
.footer-bottom a { color: var(--white-muted); transition: color 0.3s var(--ease-soft); }
.footer-bottom a:hover { color: var(--gold); }

/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  body { cursor: auto; }
  .cursor-ring, .cursor-dot { display: none; }
  .home-logo-stage .orbit-canvas { display: none; }
}

/* =========================================================
   SERVICES — chips on Custom Agents card + sub-meta line
========================================================= */
.services-grid--tiers .service-card .chips {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}
.services-grid--tiers .service-card .chip {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(212, 164, 55, 0.3);
  padding: 8px 14px;
  border-radius: 2px;
  white-space: nowrap;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.services-grid--tiers .service-card:hover .chip {
  border-color: rgba(212, 164, 55, 0.55);
}
.services-grid--tiers .service-card:hover .chip:nth-child(1) { background: rgba(212,164,55,0.10); transition-delay: 0.0s; }
.services-grid--tiers .service-card:hover .chip:nth-child(2) { background: rgba(212,164,55,0.10); transition-delay: 0.1s; }
.services-grid--tiers .service-card:hover .chip:nth-child(3) { background: rgba(212,164,55,0.10); transition-delay: 0.2s; }
.services-grid--tiers .service-card:hover .chip:nth-child(4) { background: rgba(212,164,55,0.10); transition-delay: 0.3s; }
.services-grid--tiers .service-card:hover .chip:nth-child(5) { background: rgba(212,164,55,0.10); transition-delay: 0.4s; }
.services-grid--tiers .service-card:hover .chip:nth-child(6) { background: rgba(212,164,55,0.10); transition-delay: 0.5s; }

.services-grid--tiers .service-card .sub-meta {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(212, 164, 55, 0.85);
  margin: 8px 0 16px;
}

.services-grid--tiers .service-card .card-tagline {
  font-family: 'Raleway', sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--gold);
  margin: 6px 0 14px;
}

@media (min-width: 1024px) {
  .services-grid--tiers .service-card--wide {
    grid-column: span 2;
    max-width: 720px;
    margin: 0 auto;
  }
}

/* =========================================================
   PRODUCTS PAGE — large cards with status badge + features
========================================================= */
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: 48px;
}
@media (max-width: 900px) { .products-grid { grid-template-columns: 1fr; } }

.product-card {
  position: relative;
  background: #0a0a0a;
  border: 1px solid rgba(212, 164, 55, 0.30);
  border-radius: 6px;
  padding: 48px;
  text-align: left;
  transition: transform 0.4s var(--ease-luxe), box-shadow 0.4s var(--ease-luxe), border-color 0.4s var(--ease-luxe);
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 164, 55, 0.55);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55);
}
.product-card--upcoming {
  opacity: 0.78;
  border-color: rgba(212, 164, 55, 0.18);
}
.product-card--upcoming:hover {
  opacity: 1;
  border-color: rgba(212, 164, 55, 0.45);
}
.status-badge {
  position: absolute;
  top: 20px;
  right: 24px;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 2px;
}
.status-badge.status-available {
  background: var(--gold);
  color: #0a0a0a;
}
.status-badge.status-coming {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}
.product-name {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--gold);
  margin: 16px 0 6px;
}
.product-tagline {
  font-family: 'Raleway', sans-serif;
  font-style: italic;
  font-size: 18px;
  color: var(--white-muted);
  margin: 0 0 20px;
}
.product-desc {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--white);
  margin: 0 0 24px;
}
.product-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.product-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--white);
}
.feat-mark {
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.product-card .btn { align-self: flex-start; }

/* =========================================================
   ABOUT — team grid, standards grid, logo wall, achievements
========================================================= */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 1024px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .team-grid { grid-template-columns: 1fr; } }
.team-card {
  background: #0a0a0a;
  border: 1px solid rgba(212, 164, 55, 0.22);
  padding: 28px;
  text-align: center;
  border-radius: 4px;
  transition: transform 0.4s var(--ease-luxe), border-color 0.4s var(--ease-luxe);
}
.team-card:hover { transform: translateY(-4px); border-color: rgba(212,164,55,0.45); }
.team-portrait {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #050505;
  border: 1px solid rgba(212, 164, 55, 0.45);
  box-shadow: inset 0 0 32px rgba(212, 164, 55, 0.12);
  margin-bottom: 18px;
  border-radius: 2px;
}
.team-name {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: var(--gold);
  font-size: 22px;
  margin: 0 0 6px;
}
.team-title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 10px;
}
.team-bio {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--white-muted);
  line-height: 1.55;
  margin: 0 0 16px;
}
.cert-row {
  display: flex; gap: 8px; justify-content: center;
}
.cert-badge {
  width: 22px; height: 22px;
  background: rgba(212, 164, 55, 0.10);
  border: 1px solid rgba(212, 164, 55, 0.45);
  transform: rotate(45deg);
}

.standards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 48px;
  text-align: left;
}
@media (max-width: 768px) { .standards-grid { grid-template-columns: 1fr; } }
.standard-card {
  background: #0a0a0a;
  border: 1px solid rgba(212, 164, 55, 0.22);
  padding: 22px 24px;
  border-radius: 4px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.standard-card .standard-icon {
  display: inline-block;
  width: 18px; height: 18px;
  background: var(--gold);
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-top: 6px;          /* visually align with the heading baseline */
}
.standard-card .standard-body {
  flex: 1;
  min-width: 0;
}
.standard-card h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  color: var(--gold);
  font-size: 18px;
  margin: 0 0 8px;
  line-height: 1.25;
}
.standard-card p {
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  color: var(--white);
  line-height: 1.55;
  margin: 0;
}

.logo-wall {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: 40px;
}
@media (max-width: 1024px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .logo-wall { grid-template-columns: repeat(2, 1fr); } }
.logo-slot {
  height: 80px;
  border: 1px dashed rgba(212, 164, 55, 0.35);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(212, 164, 55, 0.6);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.logo-slot:hover { opacity: 1; }

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}
@media (max-width: 1024px) { .achievements-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .achievements-grid { grid-template-columns: 1fr; } }
.achievement-card {
  background: #0a0a0a;
  border: 1px solid rgba(212, 164, 55, 0.22);
  padding: 24px;
  border-radius: 4px;
  text-align: left;
  position: relative;
}
.achievement-badge {
  display: inline-block;
  width: 24px; height: 24px;
  background: var(--gold);
  margin-bottom: 14px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.achievement-card h4 {
  font-family: 'Playfair Display', serif;
  color: var(--gold);
  font-size: 15px;
  margin: 0 0 8px;
}
.achievement-card p {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--white-muted);
  line-height: 1.55;
  margin: 0 0 12px;
}
.year-stamp {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.20em;
  color: var(--gold);
}

/* =========================================================
   HOMEPAGE — TIER PREVIEW LIST
========================================================= */
.tier-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 760px;
  margin: 20px auto 0;
  text-align: left;
}
.tier-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 20px;
  border-top: 1px solid rgba(212, 164, 55, 0.18);
  text-decoration: none;
  color: inherit;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.tier-row:last-child { border-bottom: 1px solid rgba(212, 164, 55, 0.18); }
.tier-row:hover {
  background: rgba(212, 164, 55, 0.06);
  border-color: rgba(212, 164, 55, 0.45);
  transform: translateX(4px);
}
.tier-num {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  letter-spacing: 0.02em;
  color: #D4A437;
  flex-shrink: 0;
  width: 48px;
}
.tier-text { flex: 1; }
.tier-text h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 19px;
  color: var(--white);
  margin: 0 0 4px;
  line-height: 1.25;
}
.tier-text p {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: var(--white-muted);
  margin: 0;
  line-height: 1.5;
}
.tier-arrow {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: var(--gold);
  transition: transform 0.3s ease;
}
.tier-row:hover .tier-arrow { transform: translateX(6px); }

/* ─── LEGAL PAGES STYLING ─── */
.legal-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 8rem 2rem 6rem;
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Inter', sans-serif;
  line-height: 1.8;
}

.legal-page .legal-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: #D4A437;
  margin-bottom: 0.5rem;
  letter-spacing: 0.005em;
}

.legal-page .legal-subtitle {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1rem;
}

.legal-page .legal-meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: rgba(212, 164, 55, 0.7);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(212, 164, 55, 0.2);
}

.legal-page h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.75rem;
  color: #D4A437;
  margin-top: 3rem;
  margin-bottom: 1rem;
  letter-spacing: 0.005em;
}

.legal-page h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: rgba(212, 164, 55, 0.9);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.legal-page p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 1.25rem;
}

.legal-page ul {
  font-family: 'Inter', sans-serif;
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.5rem;
}

.legal-page ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
}

.legal-page ul li::before {
  content: "\25C6";
  position: absolute;
  left: 0;
  color: #D4A437;
  font-size: 0.7rem;
  top: 0.5rem;
}

.legal-page strong {
  color: #D4A437;
  font-weight: 600;
}

.legal-page a {
  color: #D4A437;
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 164, 55, 0.4);
  transition: border-color 0.3s ease;
}

.legal-page a:hover {
  border-bottom-color: #D4A437;
}

.legal-divider {
  width: 60px;
  height: 1px;
  background: #D4A437;
  margin: 3rem 0 1rem;
  opacity: 0.6;
}

.legal-contact-block {
  background: rgba(212, 164, 55, 0.05);
  border: 1px solid rgba(212, 164, 55, 0.2);
  padding: 2rem;
  margin-top: 3rem;
  border-radius: 4px;
}

.legal-contact-block h3 {
  margin-top: 0;
}

.cookie-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0 2rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
}

.cookie-table th {
  background: rgba(212, 164, 55, 0.1);
  color: #D4A437;
  font-weight: 600;
  text-align: left;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(212, 164, 55, 0.3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.cookie-table td {
  padding: 0.75rem 1rem;
  border: 1px solid rgba(212, 164, 55, 0.15);
  color: rgba(255, 255, 255, 0.85);
  vertical-align: top;
}

.cookie-table td strong {
  color: #D4A437;
}

/* ─── CONTACT PAGE INFO BLOCK ─── */
.contact-info-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin: 6rem 0 0.5rem;
}

/* Tighten the gap between the info-cards and the "Let's Automate Your Future!" closing section */
.contact-page .closing { padding-top: 56px; }

.contact-info-item {
  background: rgba(212, 164, 55, 0.05);
  border: 1px solid rgba(212, 164, 55, 0.2);
  padding: 2rem;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.contact-info-item:hover {
  border-color: #D4A437;
  background: rgba(212, 164, 55, 0.08);
}

.contact-info-item h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: #D4A437;
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.contact-info-item p {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 0.5rem;
}

.contact-info-item a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 164, 55, 0.3);
  transition: border-color 0.3s ease;
}

.contact-info-item a:hover {
  border-bottom-color: #D4A437;
  color: #D4A437;
}

.contact-info-item .response-time {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: rgba(212, 164, 55, 0.7);
  font-style: italic;
  margin-top: 0.5rem;
}

/* ─── COOKIE CONSENT BANNER ─── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(10, 10, 10, 0.98);
  border-top: 1px solid #D4A437;
  padding: 1.5rem 2rem;
  z-index: 9000;
  backdrop-filter: blur(20px);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cookie-banner-close {
  position: absolute;
  top: 0.6rem;
  right: 0.85rem;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid rgba(212, 164, 55, 0.35);
  border-radius: 50%;
  color: rgba(212, 164, 55, 0.85);
  font-family: 'Inter', sans-serif;
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.cookie-banner-close:hover {
  background: #D4A437;
  color: #0a0a0a;
  border-color: #D4A437;
  transform: rotate(90deg);
}

.cookie-banner-content {
  max-width: 760px;
  margin: 0 auto;
}

.cookie-banner-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: #D4A437;
  margin: 0 0 0.55rem;
}

.cookie-banner-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.cookie-banner-text a {
  color: #D4A437;
  border-bottom: 1px solid rgba(212, 164, 55, 0.4);
  text-decoration: none;
}

.cookie-banner-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.btn-cookie-reject {
  background: transparent;
  color: #D4A437;
  border: 1px solid rgba(212, 164, 55, 0.5);
  padding: 0.85rem 2rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.btn-cookie-reject:hover {
  background: rgba(212, 164, 55, 0.08);
  border-color: #D4A437;
}

.btn-cookie-accept {
  background: #D4A437;
  color: #0a0a0a;
  border: 1px solid #D4A437;
  padding: 0.85rem 2rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.btn-cookie-accept:hover {
  background: #E8B847;
  border-color: #E8B847;
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .cookie-banner-actions {
    flex-direction: column;
    gap: 0.75rem;
  }

  .btn-cookie-reject,
  .btn-cookie-accept {
    width: 100%;
    padding: 1rem;
  }
}

/* ─── FOUNDER SECTION ─── */
.founder-section {
  max-width: 1200px;
  margin: 6rem auto;
  padding: 0 2rem;
}

.founder-section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.founder-section-header .section-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(212, 164, 55, 0.7);
  display: block;
  margin-bottom: 1rem;
}

.founder-section-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: #D4A437;
  margin-bottom: 1rem;
  letter-spacing: 0.005em;
}

.founder-section-subtitle {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 600px;
  margin: 0 auto;
}

.founder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 3rem;
  max-width: 900px;
  margin: 0 auto;
}

.founder-card {
  text-align: center;
  padding: 2.5rem 2rem;
  background: rgba(212, 164, 55, 0.03);
  border: 1px solid rgba(212, 164, 55, 0.15);
  border-radius: 4px;
  transition: all 0.4s ease;
}

.founder-card:hover {
  border-color: #D4A437;
  background: rgba(212, 164, 55, 0.06);
  transform: translateY(-5px);
}

.founder-photo {
  width: 220px;
  height: 220px;
  margin: 0 auto 2rem;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #D4A437;
  box-shadow: 0 0 0 1px rgba(212, 164, 55, 0.25);
}

.founder-photo-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(212, 164, 55, 0.2), rgba(212, 164, 55, 0.05));
  border: 2px solid #D4A437;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.founder-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
  transform: scale(1.35);
  transform-origin: center 45%;
}

.founder-initials {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 2.5rem;
  color: #D4A437;
  letter-spacing: 0.05em;
}

.founder-name {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: #D4A437;
  margin-bottom: 0.5rem;
  letter-spacing: 0.005em;
}

.founder-role {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(212, 164, 55, 0.8);
  margin-bottom: 1.5rem;
}

.founder-bio {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1.5rem;
}

.founder-social {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.founder-social-link {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #D4A437;
  text-decoration: none;
  padding: 0.5rem 1.5rem;
  border: 1px solid #D4A437;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.founder-social-link:hover {
  background: #D4A437;
  color: #0a0a0a;
}

@media (max-width: 768px) {
  .founder-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ─── FOOTER (standardized v2) ─── */
.main-footer {
  background: rgba(10, 10, 10, 0.98);
  border-top: 1px solid rgba(212, 164, 55, 0.2);
  padding: 4rem 2rem 2rem;
  margin-top: 6rem;
}

.footer-content {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
  text-align: center;
  justify-items: center;
}

.footer-brand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-footer .footer-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.main-footer .footer-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.main-footer .footer-brand-name {
  font-family: 'Cormorant Upright', serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #D4A437;
}

.footer-tagline {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.footer-contact-block,
.footer-explore-block,
.footer-legal-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-contact-block h4,
.footer-explore-block h4,
.footer-legal-block h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #D4A437;
  margin-bottom: 1.25rem;
}

.footer-contact-block p,
.footer-explore-block a,
.footer-legal-block a {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  margin-bottom: 0.6rem;
  line-height: 1.6;
  transition: color 0.3s ease;
  display: block;
}

.footer-contact-block a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

.footer-contact-block a:hover,
.footer-explore-block a:hover,
.footer-legal-block a:hover {
  color: #D4A437;
}

.main-footer .footer-bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(212, 164, 55, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  text-align: center;
}

.footer-copy {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.footer-tagline-small {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(212, 164, 55, 0.6);
  margin: 0;
}

@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .main-footer .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ─── FOOTER SOCIAL ICONS ─── */
.footer-social-links {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  justify-content: center;
}

.footer-social-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(212, 164, 55, 0.3);
  border-radius: 4px;
  color: #D4A437;
  text-decoration: none;
  transition: all 0.3s ease;
  background: rgba(212, 164, 55, 0.03);
}

.footer-social-icon:hover {
  background: #D4A437;
  color: #0a0a0a;
  border-color: #D4A437;
  transform: translateY(-2px);
}

.footer-social-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

@media (max-width: 768px) {
  .footer-social-links {
    justify-content: flex-start;
    margin-top: 1rem;
  }

  .footer-social-icon {
    width: 44px;
    height: 44px;
  }
}

/* ─── ADDRESS FORMATTING ─── */
.footer-address {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin-top: 0.6rem;
}

@media (max-width: 768px) {
  .footer-address {
    font-size: 0.85rem;
  }
}

.address-link {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 164, 55, 0.3);
  transition: all 0.3s ease;
  display: inline-block;
}

.address-link:hover {
  color: #D4A437;
  border-bottom-color: #D4A437;
}

/* ─── SERVICE PRICING ─── */
.service-pricing {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(212, 164, 55, 0.15);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.pricing-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(212, 164, 55, 0.7);
}

.pricing-amount {
  font-family: 'Bodoni Moda', 'Playfair Display', serif;
  font-weight: 700;
  font-size: 2rem;
  color: #D4A437;
  letter-spacing: 0.005em;
  line-height: 1.1;
}

.service-cta-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.7rem 1.6rem;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #D4A437;
  border: 1px solid #D4A437;
  border-radius: 2px;
  text-decoration: none;
  transition: all 0.3s ease;
  text-align: center;
  width: fit-content;
}

.service-cta-btn:hover {
  background: #D4A437;
  color: #0a0a0a;
}

/* ─── PRICING DISCLAIMER ─── */
.pricing-disclaimer {
  max-width: 900px;
  margin: 6rem auto 4rem;
  padding: 0 2rem;
}

.pricing-disclaimer-content {
  padding: 3rem 2.5rem;
  background: rgba(212, 164, 55, 0.03);
  border: 1px solid rgba(212, 164, 55, 0.15);
  border-radius: 4px;
  text-align: center;
}

.pricing-disclaimer h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: #D4A437;
  margin-bottom: 1.5rem;
}

.pricing-disclaimer p {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.75rem;
}

.pricing-disclaimer p:last-child {
  margin-bottom: 0;
  margin-top: 1.5rem;
}

.pricing-disclaimer strong {
  color: #D4A437;
}

.pricing-disclaimer a {
  color: #D4A437;
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 164, 55, 0.4);
  transition: border-color 0.3s ease;
}

.pricing-disclaimer a:hover {
  border-bottom-color: #D4A437;
}

/* ─── PRODUCT STATUS BADGE (Coming Soon variant) ─── */
.product-card .status-badge {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: rgba(212, 164, 55, 0.1);
  border: 1px solid rgba(212, 164, 55, 0.3);
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #D4A437;
  margin-bottom: 1.5rem;
}

/* ─── EARLY-BIRD OFFER BOX ─── */
.product-early-bird {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(212, 164, 55, 0.05);
  border: 1px solid rgba(212, 164, 55, 0.2);
  border-radius: 4px;
}

/* Pin the early-bird box and the waitlist button to the bottom of every
   product card so both cards in a row align even when their description
   lengths differ. */
.product-card .product-early-bird {
  margin-top: auto;
}

.early-bird-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212, 164, 55, 0.1);
  border-radius: 50%;
  color: #D4A437;
}

.early-bird-icon svg {
  width: 24px;
  height: 24px;
}

.early-bird-text {
  flex: 1;
}

.early-bird-text h4 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1rem;
  color: #D4A437;
  margin: 0 0 0.5rem 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.early-bird-text p {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.early-bird-text strong {
  color: #D4A437;
  font-weight: 600;
}

/* ─── WAITLIST BUTTON ─── */
.product-waitlist-btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  background: #D4A437;
  color: #0a0a0a;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 2px;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-top: 1rem;
}

.product-waitlist-btn:hover {
  background: transparent;
  color: #D4A437;
  outline: 1px solid #D4A437;
}

@media (max-width: 768px) {
  .pricing-amount {
    font-size: 1.75rem;
  }

  .product-early-bird {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .early-bird-text {
    text-align: center;
  }
}

/* ─── CONTACT INFO BLOCK – address typography ─── */
.contact-info-item .address-block {
  margin-bottom: 0.5rem;
}

.contact-info-item .address-line {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  letter-spacing: 0.01em;
}

.contact-info-item .address-line--primary {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.02rem;
  color: #D4A437;
  letter-spacing: 0.02em;
  margin-bottom: 0.15rem;
}

.contact-info-item .address-line--country {
  margin-top: 0.15rem;
  color: rgba(255, 255, 255, 0.68);
  font-style: italic;
  letter-spacing: 0.04em;
}

.contact-info-item .address-link {
  text-align: left;
  border-bottom: none;
}

.contact-info-item .address-link:hover .address-line {
  color: #D4A437;
}

/* ─── CONTACT INFO BLOCK – scroll-triggered reveal ─── */
.contact-info-block.contact-info-block--reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.contact-info-block.contact-info-block--reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.contact-info-block.contact-info-block--reveal .contact-info-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-info-block.contact-info-block--reveal.is-revealed .contact-info-item {
  opacity: 1;
  transform: translateY(0);
}

.contact-info-block.contact-info-block--reveal.is-revealed .contact-info-item:nth-child(1) { transition-delay: 0.15s; }
.contact-info-block.contact-info-block--reveal.is-revealed .contact-info-item:nth-child(2) { transition-delay: 0.28s; }
.contact-info-block.contact-info-block--reveal.is-revealed .contact-info-item:nth-child(3) { transition-delay: 0.41s; }
.contact-info-block.contact-info-block--reveal.is-revealed .contact-info-item:nth-child(4) { transition-delay: 0.54s; }

@media (prefers-reduced-motion: reduce) {
  .contact-info-block.contact-info-block--reveal,
  .contact-info-block.contact-info-block--reveal .contact-info-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ─── CONTACT FORM (Netlify) ─── */
.contact-form-section {
  max-width: 900px;
  margin: 5rem auto;
  padding: 0 2rem;
}

.contact-form-header {
  text-align: center;
  margin-bottom: 4rem;
}

.contact-form-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(212, 164, 55, 0.7);
  display: block;
  margin-bottom: 1rem;
}

.contact-form-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  color: #D4A437;
  margin-bottom: 1rem;
  letter-spacing: 0.005em;
}

.contact-form-subtitle {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 600px;
  margin: 0 auto;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: rgba(212, 164, 55, 0.03);
  border: 1px solid rgba(212, 164, 55, 0.15);
  border-radius: 4px;
  padding: 3rem;
}

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.contact-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-form-field label {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #D4A437;
}

.contact-form-field input,
.contact-form-field select,
.contact-form-field textarea {
  width: 100%;
  padding: 1rem 1.25rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(212, 164, 55, 0.3);
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  border-radius: 2px;
  transition: border-color 0.3s ease, background 0.3s ease;
  box-sizing: border-box;
}

.contact-form-field input:focus,
.contact-form-field select:focus,
.contact-form-field textarea:focus {
  outline: none;
  border-color: #D4A437;
  background: rgba(0, 0, 0, 0.6);
}

.contact-form-field input::placeholder,
.contact-form-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.contact-form-field select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D4A437'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.25rem;
  padding-right: 3rem;
}

.contact-form-field select option {
  background: #0a0a0a;
  color: rgba(255, 255, 255, 0.92);
}

.contact-form-field textarea {
  resize: vertical;
  min-height: 150px;
  font-family: 'Inter', sans-serif;
}

.contact-honeypot {
  display: none;
}

.contact-form-submit-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(212, 164, 55, 0.15);
}

.contact-form-btn {
  padding: 1.25rem 3rem;
  background: #D4A437;
  color: #0a0a0a;
  border: none;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-form-btn:hover {
  background: transparent;
  color: #D4A437;
  outline: 1px solid #D4A437;
}

.contact-form-note {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin: 0;
}

@media (max-width: 768px) {
  .contact-form {
    padding: 2rem 1.5rem;
  }

  .contact-form-row {
    grid-template-columns: 1fr;
  }
}

/* ─── CONTACT FORM SECTION (Google Form embed) ─── */
.contact-form-section {
  max-width: 900px;
  margin: 5rem auto;
  padding: 0 2rem;
}

.contact-form-header {
  text-align: center;
  margin-bottom: 4rem;
}

.contact-form-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(212, 164, 55, 0.7);
  display: block;
  margin-bottom: 1rem;
}

.contact-form-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: #D4A437;
  margin-bottom: 1rem;
  letter-spacing: 0.005em;
}

.contact-form-subtitle {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 600px;
  margin: 0 auto;
}

.contact-alternative {
  text-align: center;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(212, 164, 55, 0.15);
}

.contact-alt-label {
  font-family: 'Inter', sans-serif;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  margin: 0 0 0.75rem 0;
}

.contact-alt-options {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  margin: 0;
}

.contact-alt-options a {
  color: #D4A437;
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 164, 55, 0.3);
  transition: border-color 0.3s ease;
  padding-bottom: 1px;
}

.contact-alt-options a:hover {
  border-bottom-color: #D4A437;
}

.contact-alt-divider {
  color: rgba(212, 164, 55, 0.4);
  margin: 0 0.75rem;
}

@media (max-width: 768px) {
  .contact-form-section {
    margin: 3rem auto;
    padding: 0 1rem;
  }

  .contact-alt-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .contact-alt-divider {
    display: none;
  }
}

/* ─── CONTACT CTA (opens Google Form in new tab) ─── */
.contact-cta-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  margin: 5rem auto 4rem;
  padding: 0 2rem;
}

.contact-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 1.4rem 4rem;
  background: #D4A437;
  color: #0a0a0a;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid #D4A437;
  border-radius: 2px;
  box-shadow: 0 12px 38px rgba(212, 164, 55, 0.18);
  transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.contact-cta-btn:hover {
  background: transparent;
  color: #D4A437;
  transform: translateY(-3px);
  box-shadow: 0 18px 48px rgba(212, 164, 55, 0.28);
}

.contact-cta-arrow {
  display: inline-block;
  font-weight: 400;
  transition: transform 0.35s ease;
}

.contact-cta-btn:hover .contact-cta-arrow {
  transform: translateX(6px);
}

.contact-cta-note {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(212, 164, 55, 0.7);
  margin: 0;
}

@media (max-width: 768px) {
  .contact-cta-btn {
    padding: 1.2rem 2.5rem;
    font-size: 0.95rem;
    letter-spacing: 0.18em;
    width: 100%;
    max-width: 360px;
  }
}

/* ─── NETLIFY CONTACT FORM (native, brand-styled) ─── */
.contact-form-section {
  max-width: 900px;
  margin: 5rem auto;
  padding: 0 2rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: rgba(212, 164, 55, 0.02);
  border: 1px solid rgba(212, 164, 55, 0.15);
  border-radius: 4px;
  padding: 3rem 2.5rem;
  margin-top: 3rem;
}

.contact-form .hidden-field {
  display: none;
}

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.contact-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.contact-form-field label {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(212, 164, 55, 0.9);
}

.contact-form-field input,
.contact-form-field select,
.contact-form-field textarea {
  width: 100%;
  padding: 1rem 1.25rem;
  background: rgba(10, 10, 10, 0.6);
  border: 1px solid rgba(212, 164, 55, 0.25);
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  border-radius: 2px;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box;
}

.contact-form-field input::placeholder,
.contact-form-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-family: 'Playfair Display', serif;
  font-style: italic;
}

.contact-form-field input:focus,
.contact-form-field select:focus,
.contact-form-field textarea:focus {
  outline: none;
  border-color: #D4A437;
  background: rgba(10, 10, 10, 0.8);
  box-shadow: 0 0 0 3px rgba(212, 164, 55, 0.18);
}

.contact-form-field select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D4A437'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.25rem;
  padding-right: 3rem;
}

.contact-form-field select option {
  background: #000000;
  color: #ffffff;
}

.contact-form-field textarea {
  min-height: 150px;
  resize: vertical;
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
}

.contact-form-submit {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 1.25rem 3rem;
  background: #D4A437;
  color: #0a0a0a;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.contact-form-submit-arrow {
  flex-shrink: 0;
  transition: transform 0.35s ease;
}

.contact-form-submit:hover {
  background: #E8B847;
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(212, 164, 55, 0.32);
}

.contact-form-submit:hover .contact-form-submit-arrow {
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .contact-form-section {
    margin: 3rem auto;
    padding: 0 1rem;
  }

  .contact-form {
    padding: 2rem 1.5rem;
    margin-top: 2rem;
  }

  .contact-form-row {
    grid-template-columns: 1fr;
  }

  .contact-form-submit {
    width: 100%;
    padding: 1.15rem 1.5rem;
  }
}

/* ─── THANK-YOU PAGE ─── */
.thank-you-page {
  background: #0a0a0a;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.thank-you-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
}

.thank-you-container {
  max-width: 700px;
  width: 100%;
  text-align: center;
}

@keyframes thank-you-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

.thank-you-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 2.25rem;
  color: #D4A437;
  animation: thank-you-pulse 2s ease-in-out infinite;
}

.thank-you-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.thank-you-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(212, 164, 55, 0.85);
  margin-bottom: 1.25rem;
}

.thank-you-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 1.05;
  color: #D4A437;
  margin: 0 0 1rem;
  letter-spacing: 0.005em;
}

.thank-you-subtitle {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 2.5rem;
}

.thank-you-message {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 auto 1.25rem;
  max-width: 560px;
}

.thank-you-signature {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: rgba(212, 164, 55, 0.7);
  margin-top: 2rem;
  margin-bottom: 3rem;
}

.thank-you-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.thank-you-actions .btn-primary,
.thank-you-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem 2.5rem;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.thank-you-actions .btn-primary {
  background: #D4A437;
  color: #0a0a0a;
  border: 1px solid #D4A437;
}

.thank-you-actions .btn-primary:hover {
  background: #E8B847;
  border-color: #E8B847;
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(212, 164, 55, 0.3);
}

.thank-you-actions .btn-secondary {
  background: transparent;
  color: #D4A437;
  border: 1px solid rgba(212, 164, 55, 0.45);
}

.thank-you-actions .btn-secondary:hover {
  border-color: #D4A437;
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .thank-you-main {
    padding: 3rem 1.25rem;
  }

  .thank-you-actions {
    flex-direction: column;
    gap: 1rem;
  }

  .thank-you-actions .btn-primary,
  .thank-you-actions .btn-secondary {
    width: 100%;
  }
}

/* ─── ABOUT — Founder section scroll-reveal ─── */
.founder-section .founder-section-header,
.founder-section .founder-card {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.founder-section.is-revealed .founder-section-header {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.05s;
}

.founder-section.is-revealed .founder-card {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.22s;
}

.founder-section .founder-photo,
.founder-section .founder-name,
.founder-section .founder-role,
.founder-section .founder-bio,
.founder-section .founder-social {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.founder-section.is-revealed .founder-photo  { opacity: 1; transform: translateY(0); transition-delay: 0.35s; }
.founder-section.is-revealed .founder-name   { opacity: 1; transform: translateY(0); transition-delay: 0.48s; }
.founder-section.is-revealed .founder-role   { opacity: 1; transform: translateY(0); transition-delay: 0.58s; }
.founder-section.is-revealed .founder-bio    { opacity: 1; transform: translateY(0); transition-delay: 0.68s; }
.founder-section.is-revealed .founder-social { opacity: 1; transform: translateY(0); transition-delay: 0.78s; }

@media (prefers-reduced-motion: reduce) {
  .founder-section .founder-section-header,
  .founder-section .founder-card,
  .founder-section .founder-photo,
  .founder-section .founder-name,
  .founder-section .founder-role,
  .founder-section .founder-bio,
  .founder-section .founder-social {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =============================================================
   SAFETY NET — force-reveal hidden content after 2s
   =============================================================
   The site uses GSAP + ScrollTrigger to fade in/scroll-reveal a
   lot of elements. On Netlify, GSAP/ScrollTrigger occasionally
   fails to fire (CDN timing, ScrollTrigger.refresh() not running
   after async asset load, etc.), leaving elements stuck at
   opacity:0 / translated / blurred / letter-spacing-collapsed —
   the content is in the HTML but invisible.

   This rule force-applies the *final* (visible) state of every
   GSAP-hidden selector via a CSS animation that:
     • Has 0.001s duration with a 2s delay
     • Uses animation-fill-mode: forwards so the end state sticks
     • Does NOT use !important — when GSAP fires normally (well
       under 2s), its inline-style transforms win and this CSS
       animation effectively no-ops because GSAP has already
       removed the hidden state. The fallback only becomes visible
       if GSAP fails to settle within 2 seconds.

   Trade-off: when the fallback DOES trigger, letter-spacing
   resets to "normal" (not the designed end-value like 0.06em),
   and elements snap into place rather than animating. Content
   over polish — the page is never permanently broken.
============================================================= */
@keyframes forceReveal {
  to {
    opacity: 1;
    transform: none;
    visibility: visible;
    filter: none;
    letter-spacing: normal;
  }
}

.reveal,
.split-words,
.split-words .char, .split-words .wd, .split-words .word, .split-words .ch,
.reveal-mask, .reveal-mask .char, .reveal-mask .word-wrapper, .reveal-mask .char-wrapper,
.char, .wd, .word, .ch,
.stat, .stat .stat-emoji, .stat .stat-num, .stat h4, .stat p,
.service-card, .step, .audience-card, .audience-card li, .audience-card .icon,
.faq-item, .standard-card, .product-card,
.kicker, .lede,
.hairline,
.legacy-body p,
.form .field, .btn-submit,
.hero-buttons, .trust-line,
.service-card.slide-up-card,
.service-card.slide-direction--left,
.service-card.slide-direction--right,
.service-card.slide-direction--up,
.product-card.diagonal-from-left,
.product-card.diagonal-from-right,
.product-card.slide-from-bottom,
.contact-info-block.contact-info-block--reveal,
.contact-info-block.contact-info-block--reveal .contact-info-item {
  animation: forceReveal 0.001s linear 2s forwards;
}

/* =============================================================
   SAFETY NET — Additional section-specific selectors
   =============================================================
   Covers about-page sections that the broader selector list above
   missed: Our Philosophy heading + body, the entire Led By founder
   block (header, card, photo, name, role, bio, LinkedIn pill), and
   the Principles section's headline (the four standard cards inside
   already render fine via existing reveal CSS).
   Reuses the @keyframes forceReveal defined above.
============================================================= */
.subhead,
.philosophy-section,
.philosophy-section .title-section,
.philosophy-section .lede,
.philosophy-section .kicker,
.philosophy-section *,
.founder-section,
.founder-section-header,
.founder-section-title,
.founder-section-subtitle,
.founder-grid,
.founder-card,
.founder-photo,
.founder-photo-img,
.founder-name,
.founder-role,
.founder-bio,
.founder-social,
.founder-social-link,
.principles-section .title-section,
.principles-section .lede,
.principles-section .kicker {
  animation: forceReveal 0.001s linear 2s forwards;
}