/* ================================================================
   ELITEDEEDS — v4 · Signature Edition
   Light Source · Living Typography · Brand Identity
   ================================================================ */

/* ================================================================
   1. FONTS — Luxury editorial pairing
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');


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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--t-hi);
  line-height: 1.6;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; }


/* ================================================================
   3. DESIGN TOKENS
   ================================================================ */
:root {
  /* Backgrounds — deep indigo-blacks with warm undertone */
  --bg-void:       #09090f;
  --bg-base:       #0c0d16;
  --bg-raised:     #101220;
  --bg-card:       #151728;
  --bg-card-hi:    #191b2e;
  --bg-overlay:    rgba(255,255,255,0.04);
  --bg-overlay-hi: rgba(255,255,255,0.07);

  /* Gold — the soul of the brand */
  --g0:  #fffcf0;
  --g1:  #f8e8b8;
  --g2:  #edcc6a;
  --g3:  #d4a843;
  --g4:  #b88828;
  --g5:  #8c6818;
  --glow-soft:   rgba(212,168,67,0.15);
  --glow-mid:    rgba(212,168,67,0.32);
  --glow-strong: rgba(212,168,67,0.58);
  --glow-ultra:  rgba(212,168,67,0.80);

  /* Text */
  --t-hi:   #f2ede4;
  --t-mid:  #a9a59d;
  --t-low:  #56534f;
  --t-gold: var(--g2);

  /* Borders */
  --b-ghost: 1px solid rgba(255,255,255,0.06);
  --b-dim:   1px solid rgba(255,255,255,0.10);
  --b-mid:   1px solid rgba(255,255,255,0.15);
  --b-gold:  1px solid rgba(212,168,67,0.28);
  --b-gold-hi: 1px solid rgba(212,168,67,0.52);

  /* Shadows */
  --sh-xs:   0 1px 6px rgba(0,0,0,0.35);
  --sh-sm:   0 3px 16px rgba(0,0,0,0.45);
  --sh-md:   0 8px 36px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.3);
  --sh-lg:   0 20px 72px rgba(0,0,0,0.68), 0 4px 18px rgba(0,0,0,0.4);
  --sh-gold: 0 6px 36px rgba(212,168,67,0.22), 0 2px 8px rgba(212,168,67,0.12);
  --sh-gold-hi: 0 12px 56px rgba(212,168,67,0.38), 0 4px 16px rgba(212,168,67,0.18);

  /* Gradients */
  --grad-gold:      linear-gradient(135deg, #b88828 0%, #e8c260 38%, #f5d878 58%, #e0b040 78%, #b88828 100%);
  --grad-gold-text: linear-gradient(110deg, #c49525 0%, #edc968 28%, #f8e898 52%, #edc968 72%, #c49525 100%);
  --grad-card:      linear-gradient(150deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%);
  --grad-hero-bg:   radial-gradient(ellipse 160% 140% at 50% -20%, #1f1a48 0%, #130f28 28%, #0c0d16 58%);

  /* Fonts */
  --font-display: 'Cormorant Garamond', 'Palatino Linotype', Georgia, serif;
  --font-body:    'Jost', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Scale */
  --tx-xxs:  0.625rem;
  --tx-xs:   0.6875rem;
  --tx-sm:   0.8125rem;
  --tx-base: 1rem;
  --tx-md:   1.0625rem;
  --tx-lg:   1.25rem;
  --tx-xl:   1.5rem;
  --tx-2xl:  2rem;
  --tx-3xl:  2.625rem;
  --tx-4xl:  3.5rem;
  --tx-5xl:  4.5rem;
  --tx-6xl:  5.75rem;

  /* Spacing */
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px;
  --sp5:24px; --sp6:32px; --sp7:48px; --sp8:64px;
  --sp9:96px; --sp10:128px;

  /* Radius */
  --rx:4px; --rsm:8px; --rmd:14px; --rlg:20px; --rxl:28px; --rfull:9999px;

  /* Easing */
  --ease:    cubic-bezier(0.16,1,0.3,1);
  --spring:  cubic-bezier(0.34,1.56,0.64,1);
  --smooth:  cubic-bezier(0.65,0,0.35,1);

  --header-h: 68px;
}


/* ================================================================
   4. LAYOUT
   ================================================================ */
.section {
  padding-block: var(--sp10);
  position: relative;
  overflow: hidden;
  background: var(--bg-base); /* explicit — never inherit browser white */
}

.section.light-bg {
  background: var(--bg-raised);
}

.section-title {
  text-align: center;
  margin-bottom: var(--sp8);
}

.section-title h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--tx-2xl), 4vw, var(--tx-3xl));
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 2px;
  margin-bottom: var(--sp3);
  line-height: 1.15;
}

/* Gold shimmer line */
.section-title span {
  display: block;
  width: 48px;
  height: 2px;
  background: var(--grad-gold);
  margin-inline: auto;
  border-radius: var(--rfull);
  position: relative;
  overflow: hidden;
}
.section-title span::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent);
  animation: shimmer 4s ease-in-out infinite 1s;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp5);
  max-width: 1060px;
  margin-inline: auto;
  padding-inline: var(--sp6);
}


/* ================================================================
   5. HEADER
   ================================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--header-h);
  background: rgba(9,9,15,0.76);
  backdrop-filter: blur(28px) saturate(220%);
  -webkit-backdrop-filter: blur(28px) saturate(220%);
  border-bottom: var(--b-ghost);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.site-header.scrolled {
  background: rgba(9,9,15,0.97);
  border-bottom-color: rgba(212,168,67,0.16);
  box-shadow: 0 1px 48px rgba(0,0,0,0.6);
}

.header-container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--sp6);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: var(--font-display);
  font-size: var(--tx-xl);
  font-weight: 500;
  letter-spacing: 4px;
  color: var(--g2);
  text-transform: uppercase;
  position: relative;
  transition: color 0.2s var(--ease);
}
.logo::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 100%; height: 1px;
  background: var(--grad-gold);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.logo:hover { color: var(--g1); }
.logo:hover::after { opacity: 0.75; transform: scaleX(1); }

.main-nav { display: flex; gap: 2px; }
.main-nav a {
  font-family: var(--font-body);
  font-size: var(--tx-xs);
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--t-mid);
  padding: var(--sp2) var(--sp4);
  border-radius: var(--rx);
  text-transform: uppercase;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.main-nav a:hover, .main-nav a.active { color: var(--t-hi); background: var(--bg-overlay-hi); }
.main-nav a.active { color: var(--g2); }

.auth-area { display: flex; }
.header-login-btn {
  font-family: var(--font-body);
  font-size: var(--tx-xs);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--g3);
  padding: var(--sp2) var(--sp5);
  border: var(--b-gold);
  border-radius: var(--rx);
  background: transparent;
  transition: all 0.18s var(--ease);
}
.header-login-btn:hover {
  background: rgba(212,168,67,0.09);
  border-color: var(--g2);
  color: var(--g1);
  box-shadow: 0 0 24px var(--glow-soft);
}
/* ======================================
   HEADER PROFILE
====================================== */

.header-profile {
  position: relative;
}

.profile-trigger {
  background: transparent;
  border: none;
  cursor: pointer;
}

.profile-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(212, 168, 67, 0.12);
  border: 1px solid rgba(212, 168, 67, 0.3);

  color: #d4a843;
  font-weight: 600;
}

.profile-dropdown {
  position: absolute;
  top: 58px;
  right: 0;

  width: 240px;

  background: rgba(15, 15, 25, 0.96);
  backdrop-filter: blur(18px);

  border: 1px solid rgba(212, 168, 67, 0.14);

  border-radius: 18px;

  padding: 14px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);

  transition: all 0.25s ease;

  z-index: 999;
}

.profile-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.profile-info {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.profile-name {
  color: #fff;
  font-weight: 600;
}

.profile-email {
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  margin-top: 4px;
}

.dropdown-link,
.dropdown-logout {
  width: 100%;
  display: flex;
  align-items: center;

  padding: 12px 14px;

  border-radius: 12px;

  text-decoration: none;
  border: none;
  background: transparent;

  color: rgba(255,255,255,0.82);

  cursor: pointer;

  transition: all 0.2s ease;
}

.dropdown-link:hover,
.dropdown-logout:hover {
  background: rgba(212,168,67,0.08);
  color: #d4a843;
}

/* ================================================================
   6. HERO — SIGNATURE MOMENT
   ================================================================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: calc(var(--header-h) + var(--sp9));
  padding-bottom: var(--sp10);
  padding-inline: var(--sp6);
  position: relative;
  text-align: center;
  overflow: hidden;
  background: var(--grad-hero-bg);
}

/* ── Layer 1: Deep ambient colour field ── */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 20% 30%,  rgba(100,80,220,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 70%,  rgba(212,168,67,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 80% 70% at 50%  0%,  rgba(212,168,67,0.18) 0%, transparent 55%);
  pointer-events: none;
  animation: ambientShift 12s ease-in-out infinite alternate;
}

/* ── Layer 2: THE SIGNATURE — sweeping light beam ── */
.hero::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -60%;
  width: 140%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent       0%,
    transparent      42%,
    rgba(212,168,67,0.018) 46%,
    rgba(230,190,80,0.055) 49%,
    rgba(255,215,100,0.03) 51%,
    rgba(212,168,67,0.018) 54%,
    transparent      58%,
    transparent     100%
  );
  pointer-events: none;
  animation: lightBeamSweep 8s ease-in-out infinite;
  transform-origin: center center;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp6);
}

/* ── Floating orb left ── */
.hero-content::before {
  content: '';
  position: absolute;
  left: -220px; top: 0;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(90,70,200,0.07) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  animation: orbFloat 10s ease-in-out infinite;
}

/* ── Floating orb right ── */
.hero-content::after {
  content: '';
  position: absolute;
  right: -200px; bottom: 0;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(212,168,67,0.07) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  animation: orbFloat 13s ease-in-out infinite reverse;
}

/* Badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp2);
  padding: 7px 22px;
  background: rgba(212,168,67,0.07);
  border: 1px solid rgba(212,168,67,0.24);
  border-radius: var(--rfull);
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 600;
  letter-spacing: 2.5px;
  color: var(--g2);
  text-transform: uppercase;
  backdrop-filter: blur(14px);
  animation: fadeDown 0.8s var(--ease) 0.1s both;
  position: relative;
  overflow: hidden;
}
.hero-badge::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
  animation: shimmer 5s ease-in-out infinite 3s;
}
.badge-icon {
  font-size: 0.85rem;
  filter: drop-shadow(0 0 10px rgba(212,168,67,0.85));
}

/* ── HEADLINE — maximum luxury ── */
.hero-content h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, var(--tx-6xl));
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: 1px;
  color: var(--t-hi);
  animation: fadeUp 1s var(--ease) 0.25s both;
  /* Soft text glow — the luxury touch */
  text-shadow:
    0 0 80px rgba(212,168,67,0.12),
    0 4px 40px rgba(0,0,0,0.6);
}

/* Gold italic gradient — the signature phrase */
.gradient-text {
  font-style: italic;
  font-weight: 400;
  background: var(--grad-gold-text);
  background-size: 240% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline;
  animation: gradientPan 6s linear infinite 1.5s;
  /* Depth underneath the text */
  filter: drop-shadow(0 0 20px rgba(212,168,67,0.35));
}

/* Sub-headline */
.hero-content p {
  font-family: var(--font-body);
  font-size: var(--tx-md);
  font-weight: 300;
  color: var(--t-mid);
  max-width: 500px;
  line-height: 1.9;
  letter-spacing: 0.3px;
  animation: fadeUp 1s var(--ease) 0.4s both;
}

.hero-buttons {
  display: flex;
  gap: var(--sp4);
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  animation: fadeUp 1s var(--ease) 0.55s both;
}

/* Trust strip */
.trust-badges {
  display: flex;
  gap: var(--sp7);
  align-items: center;
  justify-content: center;
  padding-top: var(--sp6);
  border-top: 1px solid rgba(255,255,255,0.07);
  width: 100%;
  animation: fadeUp 1s var(--ease) 0.7s both;
}

.trust-item { text-align: center; position: relative; }
.trust-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: calc(var(--sp7) * -0.5);
  top: 50%; transform: translateY(-50%);
  width: 1px; height: 26px;
  background: rgba(255,255,255,0.09);
}

.trust-number {
  font-family: var(--font-display);
  font-size: var(--tx-2xl);
  font-weight: 400;
  color: var(--g2);
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}
.trust-label {
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  color: var(--t-low);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}


/* ================================================================
   7. BUTTONS
   ================================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp2);
  padding: 0.82em 2em;
  background: var(--grad-gold);
  background-size: 200% auto;
  color: #0f0900;
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: var(--rx);
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.18s var(--spring),
    box-shadow 0.28s var(--ease),
    background-position 0.5s var(--ease);
  box-shadow:
    0 4px 24px rgba(212,168,67,0.36),
    0 1px 4px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.24);
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -130%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-18deg);
  transition: left 0.55s var(--ease);
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.025);
  background-position: right center;
  box-shadow:
    0 14px 44px rgba(212,168,67,0.55),
    0 2px 8px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-primary:hover::before { left: 160%; }
.btn-primary:active { transform: translateY(-1px) scale(1.01); }

.btn-large {
  font-size: var(--tx-base);
  padding: 0.95em 2.4em;
  letter-spacing: 1.8px;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.82em 2em;
  background: rgba(255,255,255,0.04);
  color: var(--t-hi);
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: var(--rx);
  border: var(--b-dim);
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition:
    background 0.18s var(--ease),
    border-color 0.18s var(--ease),
    transform 0.18s var(--spring),
    color 0.18s var(--ease),
    box-shadow 0.28s var(--ease);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(212,168,67,0.35);
  color: var(--g1);
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(0,0,0,0.4), 0 0 0 1px rgba(212,168,67,0.12);
}
.btn-secondary.btn-large {
  font-size: var(--tx-base);
  padding: 0.95em 2.4em;
}
/* ================================================================
   8. SERVICE CARDS
   ================================================================ */
.service-card {
  background: var(--grad-card);
  background-color: var(--bg-card);
  border: var(--b-ghost);
  border-radius: var(--rlg);
  padding: var(--sp7) var(--sp6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp4);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s var(--spring),
    box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease),
    background-color 0.3s var(--ease);
  box-shadow:
    var(--sh-md),
    inset 0 1px 0 rgba(255,255,255,0.055),
    inset 0 -1px 0 rgba(0,0,0,0.2);
}

/* Glass top edge */
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 20px; right: 20px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.13) 40%, rgba(255,255,255,0.13) 60%, transparent);
  pointer-events: none;
}

.service-card:hover {
  transform: translateY(-10px) scale(1.018);
  border-color: rgba(212,168,67,0.3);
  background-color: var(--bg-card-hi);
  box-shadow:
    var(--sh-lg),
    0 0 60px rgba(212,168,67,0.10),
    inset 0 1px 0 rgba(255,255,255,0.09),
    inset 0 -1px 0 rgba(0,0,0,0.22);
}

.service-card h3 {
  font-family: var(--font-display);
  font-size: var(--tx-xl);
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.5px;
  line-height: 1.2;
}
.service-card p {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.8;
  flex: 1;
}
.service-card .btn-primary { align-self: flex-start; margin-top: auto; }

/* Popular */
.service-card.popular {
  border-color: rgba(212,168,67,0.40);
  background-color: #171929;
  background-image: linear-gradient(150deg,
    rgba(212,168,67,0.10) 0%,
    rgba(212,168,67,0.04) 40%,
    transparent 100%);
  box-shadow:
    var(--sh-lg),
    var(--sh-gold),
    inset 0 1px 0 rgba(212,168,67,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.22);
  animation: cardGlowPulse 4s ease-in-out infinite;
}
.service-card.popular::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-gold);
  opacity: 0.95;
  border-radius: var(--rlg) var(--rlg) 0 0;
}
.service-card.popular:hover {
  transform: translateY(-12px) scale(1.022);
  border-color: rgba(212,168,67,0.65);
  box-shadow:
    0 28px 80px rgba(0,0,0,0.72),
    var(--sh-gold-hi),
    inset 0 1px 0 rgba(212,168,67,0.24),
    inset 0 -1px 0 rgba(0,0,0,0.22);
}

/* Popular badge — real HTML element */
.popular-badge {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--grad-gold);
  color: #0f0800;
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--rfull);
  box-shadow: 0 2px 16px rgba(212,168,67,0.52), 0 1px 4px rgba(0,0,0,0.3);
  z-index: 3;
  line-height: 1.6;
  white-space: nowrap;
}


/* ================================================================
   9. HOW IT WORKS
   ================================================================ */
.process-timeline {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-width: 860px;
  margin-inline: auto;
  padding-inline: var(--sp6);
  position: relative;
}

/* Full background track */
.process-timeline::before {
  content: '';
  position: absolute;
  top: 26px;
  left: calc(var(--sp6) + 26px);
  right: calc(var(--sp6) + 26px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,168,67,0.22) 10%, rgba(212,168,67,0.22) 90%, transparent);
}

.timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp4);
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 2;
}

/* Radial glow halo */
.timeline-item::before {
  content: '';
  position: absolute;
  top: -15px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 86px;
  background: radial-gradient(circle, rgba(212,168,67,0.12) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  transition: background 0.3s var(--ease);
}
.timeline-item:hover::before {
  background: radial-gradient(circle, rgba(212,168,67,0.28) 0%, transparent 65%);
}

.timeline-number {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--grad-gold);
  color: #0f0800;
  font-family: var(--font-display);
  font-size: var(--tx-xl);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  box-shadow:
    0 0 0 6px rgba(212,168,67,0.10),
    0 0 0 13px rgba(212,168,67,0.05),
    0 6px 28px rgba(212,168,67,0.48),
    0 2px 10px rgba(0,0,0,0.6);
  transition: transform 0.3s var(--spring), box-shadow 0.3s var(--ease);
}
.timeline-item:hover .timeline-number {
  transform: scale(1.14) translateY(-5px);
  box-shadow:
    0 0 0 8px rgba(212,168,67,0.16),
    0 0 0 17px rgba(212,168,67,0.06),
    0 12px 40px rgba(212,168,67,0.65),
    0 4px 14px rgba(0,0,0,0.6);
}

.timeline-item h3 {
  font-family: var(--font-display);
  font-size: var(--tx-lg);
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.5px;
}
.timeline-item p {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.7;
  max-width: 130px;
}

.timeline-connector {
  flex: 0 0 auto;
  width: 48px;
  align-self: flex-start;
  margin-top: 26px;
  position: relative;
  height: 2px;
}
.timeline-connector::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(212,168,67,0.5), rgba(212,168,67,0.15));
}
.timeline-connector::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  background: var(--g2);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--glow-mid);
  animation: dotTravel 3s ease-in-out infinite;
}


/* ================================================================
   10. WHY CHOOSE US — POWERED UP
   ================================================================ */

/* Section-level gold top glow for visual richness */
.section.light-bg::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 600px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(212,168,67,0.35), transparent);
  pointer-events: none;
}

.card {
  background: linear-gradient(150deg, rgba(255,255,255,0.065) 0%, rgba(255,255,255,0.015) 100%);
  background-color: var(--bg-card);
  border: var(--b-dim);
  border-radius: var(--rlg);
  padding: var(--sp6) var(--sp6) var(--sp7);
  display: flex;
  flex-direction: column;
  gap: var(--sp3);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s var(--spring),
    box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease),
    background-color 0.3s var(--ease);
  box-shadow:
    var(--sh-md),
    inset 0 1px 0 rgba(255,255,255,0.07);
}

/* Gold corner accent light */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 80px; height: 80px;
  background: radial-gradient(circle at 0% 0%, rgba(212,168,67,0.09) 0%, transparent 70%);
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

/* Decorative icon glyph */
.card::after {
  content: '⬡';
  position: absolute;
  bottom: var(--sp5); right: var(--sp5);
  font-size: 2.2rem;
  color: var(--g4);
  opacity: 0.12;
  transition: opacity 0.3s var(--ease), transform 0.4s var(--spring);
  line-height: 1;
}

.card:hover {
  transform: translateY(-7px) scale(1.015);
  border-color: rgba(212,168,67,0.28);
  background-color: var(--bg-card-hi);
  box-shadow:
    var(--sh-lg),
    0 0 48px rgba(212,168,67,0.10),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

.card:hover::before {
  opacity: 1.5; /* pump the corner light */
}

.card:hover::after {
  opacity: 0.38;
  transform: rotate(30deg) scale(1.15);
}

/* Gold left-border accent on hover */
.card::before {
  /* reuse for the corner radial — add left bar via outline trick on the element */
  transition: background 0.3s var(--ease);
}

/* Vertical gold bar — left edge */
.card {
  border-left: 2px solid transparent;
  background-clip: padding-box;
  transition:
    transform 0.3s var(--spring),
    box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease),
    border-left-color 0.3s var(--ease),
    background-color 0.3s var(--ease);
}

.card:hover {
  border-left-color: rgba(212,168,67,0.6);
}

.card h3 {
  font-family: var(--font-display);
  font-size: var(--tx-xl);
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.5px;
  line-height: 1.2;
}
.card p {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.8;
}


/* ================================================================
   11. CTA SECTION
   ================================================================ */
.cta-section {
  padding-block: var(--sp10);
  position: relative;
  overflow: hidden;
  background: var(--bg-raised);
}

/* Gold uplift */
.cta-section::before {
  content: '';
  position: absolute;
  bottom: -20%; left: 50%; transform: translateX(-50%);
  width: 1000px; height: 700px;
  background: radial-gradient(ellipse 60% 55% at 50% 90%, rgba(212,168,67,0.18) 0%, transparent 58%);
  pointer-events: none;
}

/* Dot matrix texture */
.cta-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle 1.5px at center, rgba(212,168,67,0.07) 0%, transparent 100%);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 10%, transparent 75%);
  pointer-events: none;
}

.cta-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 580px;
  margin-inline: auto;
  padding-inline: var(--sp6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp5);
}

.cta-content h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--tx-2xl), 5vw, var(--tx-4xl));
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 1px;
  line-height: 1.18;
}
.cta-content p {
  font-family: var(--font-body);
  font-size: var(--tx-md);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.85;
}
.cta-buttons { display: flex; gap: var(--sp4); justify-content: center; flex-wrap: wrap; }


/* ================================================================
   12. FOOTER — PREMIUM UPGRADE
   ================================================================ */
footer {
  background: var(--bg-void);
  position: relative;
  padding-top: var(--sp9);
  padding-bottom: var(--sp5);
  overflow: hidden;
}

/* ── Signature gold gradient top border ── */
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212,168,67,0.08) 10%,
    rgba(212,168,67,0.45) 35%,
    rgba(240,200,90,0.65) 50%,
    rgba(212,168,67,0.45) 65%,
    rgba(212,168,67,0.08) 90%,
    transparent 100%);
}

/* Subtle gold glow underneath the border */
footer::after {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 600px; height: 120px;
  background: radial-gradient(ellipse 80% 100% at 50% 0%,
    rgba(212,168,67,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr;
  gap: var(--sp7);
  max-width: 1060px;
  margin-inline: auto;
  padding-inline: var(--sp6);
  padding-bottom: var(--sp7);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative;
  z-index: 1;
}

/* Gold inner divider glow at bottom */
.footer-grid::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(212,168,67,0.22) 40%,
    rgba(212,168,67,0.22) 60%,
    transparent);
}

/* Brand column */
.footer-grid > div:first-child h4 {
  font-family: var(--font-display);
  font-size: var(--tx-xl);
  font-weight: 500;
  letter-spacing: 4px;
  color: var(--g2);
  text-transform: uppercase;
  margin-bottom: var(--sp4);
}

.footer-grid h4 {
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 600;
  color: var(--g3);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: var(--sp4);
  position: relative;
  padding-bottom: var(--sp3);
}

/* Small gold underline per column heading */
.footer-grid > div:not(:first-child) h4::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 24px; height: 1px;
  background: var(--grad-gold);
  opacity: 0.7;
}

.footer-grid p,
.footer-grid a {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.9;
  display: block;
  margin-bottom: 2px;
  transition: color 0.18s var(--ease);
}
.footer-grid a:hover { color: var(--g2); }

.footer-bottom {
  max-width: 1060px;
  margin-inline: auto;
  padding-inline: var(--sp6);
  padding-top: var(--sp5);
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 300;
  color: var(--t-low);
  letter-spacing: 0.8px;
  position: relative;
  z-index: 1;
}


/* ================================================================
   13. SCROLL REVEAL
   ================================================================ */
[data-anim] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
}
[data-anim].visible { opacity: 1; transform: translateY(0); }

[data-anim-delay="1"] { transition-delay: 0.06s; }
[data-anim-delay="2"] { transition-delay: 0.14s; }
[data-anim-delay="3"] { transition-delay: 0.22s; }
[data-anim-delay="4"] { transition-delay: 0.30s; }


/* ================================================================
   14. KEYFRAMES
   ================================================================ */

/* Hero badge + section underline shimmer */
@keyframes shimmer {
  0%   { left: -120%; }
  50%  { left: 200%; }
  100% { left: 200%; }
}

/* Entrance */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── THE SIGNATURE: sweeping light beam across hero ── */
@keyframes lightBeamSweep {
  0%   { transform: translateX(-30%) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  45%  { transform: translateX(60%)  rotate(0deg); opacity: 1; }
  55%  { opacity: 0; }
  100% { transform: translateX(60%)  rotate(0deg); opacity: 0; }
}

/* Ambient colour field slow breathe */
@keyframes ambientShift {
  0%   { opacity: 0.7; }
  100% { opacity: 1.0; }
}

/* Floating orbs */
@keyframes orbFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(-24px) rotate(5deg); }
  66%      { transform: translateY(12px) rotate(-3deg); }
}

/* Gold gradient text pan */
@keyframes gradientPan {
  0%   { background-position: 0% center; }
  100% { background-position: 240% center; }
}

/* Card popular glow pulse */
@keyframes cardGlowPulse {
  0%,100% {
    box-shadow:
      var(--sh-lg),
      0 0 28px rgba(212,168,67,0.14),
      inset 0 1px 0 rgba(212,168,67,0.18),
      inset 0 -1px 0 rgba(0,0,0,0.22);
  }
  50% {
    box-shadow:
      var(--sh-lg),
      0 0 56px rgba(212,168,67,0.28),
      inset 0 1px 0 rgba(212,168,67,0.24),
      inset 0 -1px 0 rgba(0,0,0,0.22);
  }
}

/* Timeline dot travel */
@keyframes dotTravel {
  0%   { left:0%;   opacity:0; }
  12%  { opacity:1; }
  88%  { opacity:1; }
  100% { left:100%; opacity:0; }
}


/* ================================================================
   15. PERFORMANCE HINTS
   ================================================================ */
.hero::after,
.service-card,
.card,
.timeline-number {
  will-change: transform;
}


/* ================================================================
   16. RESPONSIVE — TABLET
   ================================================================ */
@media (max-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3,1fr); gap: var(--sp4); padding-inline: var(--sp4); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .process-timeline { padding-inline: var(--sp4); }
  .timeline-connector { width: 32px; }
}


/* ================================================================
   17. RESPONSIVE — MOBILE
   ================================================================ */
@media (max-width: 768px) {
  .main-nav{
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;

    display: flex;
    flex-direction: column;
    gap: 0;

    background: rgba(10,10,18,.98);
    backdrop-filter: blur(18px);

    border-top: 1px solid rgba(212,168,67,.15);

    padding: 20px;

    transform: translateY(-20px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: .3s ease;

    z-index: 9999;
}

  .main-nav.nav--open{
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
  .hero { padding-top: calc(var(--header-h) + 56px); padding-bottom: 80px; }
  .hero-content { gap: var(--sp5); }
  .hero-content::before, .hero-content::after { display: none; }
  .hero-buttons { flex-direction: column; width: 100%; max-width: 300px; }
  .btn-large { width: 100%; justify-content: center; }
  .trust-badges { gap: var(--sp5); }
  .card-grid { grid-template-columns: 1fr; gap: var(--sp4); max-width: 420px; margin-inline: auto; }
  .process-timeline { flex-direction: column; align-items: center; gap: 0; }
  .process-timeline::before { display: none; }
  .timeline-connector {
    width: 1px; height: 36px;
    background: linear-gradient(to bottom, rgba(212,168,67,0.45), rgba(212,168,67,0.1));
    margin-top: 0; align-self: center;
  }
  .timeline-connector::after { display: none; }
  .timeline-item { width: 100%; max-width: 240px; padding-block: var(--sp3); }
  .section { padding-block: 72px; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp6); }
  .section-title h2 { font-size: var(--tx-2xl); }
}


/* ================================================================
   18. RESPONSIVE — SMALL MOBILE
   ================================================================ */
@media (max-width: 480px) {
  .hero-content h1 { font-size: 2.5rem; }
  .hero-badge { font-size: 9px; }
  .trust-badges { flex-wrap: wrap; }
  .trust-item:not(:last-child)::after { display: none; }
  .btn-large { font-size: var(--tx-sm); padding: 0.9em 1.75em; }
}


/* ================================================================
   19. ACCESSIBILITY
   ================================================================ */
:focus-visible {
  outline: 2px solid var(--g3);
  outline-offset: 3px;
  border-radius: var(--rx);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-anim] { opacity: 1; transform: none; }
  .gradient-text { animation: none; }
}


/* ================================================================
   20. REQUIRED SCRIPT — paste before </body>

<script>
  // Header scroll
  const hdr = document.querySelector('.site-header');
  window.addEventListener('scroll', () => {
    hdr.classList.toggle('scrolled', window.scrollY > 40);
  }, { passive: true });

  // Scroll reveal
  const els = document.querySelectorAll(
    '.service-card, .card, .timeline-item, .section-title, .trust-item, .cta-content'
  );
  const io = new IntersectionObserver((entries) => {
    entries.forEach((e, i) => {
      if (e.isIntersecting) {
        e.target.setAttribute('data-anim-delay', String(i % 4 + 1));
        e.target.classList.add('visible');
        io.unobserve(e.target);
      }
    });
  }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
  els.forEach(el => { el.setAttribute('data-anim', ''); io.observe(el); });
</script>
   ================================================================ */


/* ================================================================
   20. SERVICES PAGE — Dedicated components
   ================================================================ */

/* ── Page hero (the inline section with padding-top:120px) ── */
.section[style*="padding-top:120px"] {
  padding-top: 160px !important;
  padding-bottom: var(--sp9) !important;
  background: var(--bg-base) !important;
  text-align: center !important;
  position: relative;
  overflow: hidden;
}

/* Overhead gold light — mirrors index hero */
.section[style*="padding-top:120px"]::before {
  content: '';
  position: absolute;
  top: -15%; left: 50%; transform: translateX(-50%);
  width: 700px; height: 500px;
  background: radial-gradient(ellipse 55% 55% at 50% 25%,
    rgba(212,168,67,0.14) 0%,
    rgba(180,130,40,0.05) 48%,
    transparent 72%);
  pointer-events: none;
}

/* Page headline */
.section[style*="padding-top:120px"] h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(var(--tx-3xl), 5.5vw, var(--tx-5xl)) !important;
  font-weight: 300 !important;
  color: var(--t-hi) !important;
  letter-spacing: 1.5px !important;
  line-height: 1.1 !important;
  margin-bottom: var(--sp4);
  position: relative;
  z-index: 1;
  text-shadow: 0 4px 40px rgba(0,0,0,0.5);
}

/* Page sub-line */
.section[style*="padding-top:120px"] p {
  font-family: var(--font-body) !important;
  font-size: var(--tx-md) !important;
  font-weight: 300 !important;
  color: var(--t-mid) !important;
  line-height: 1.85 !important;
  max-width: 480px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}



/* ── Feature list inside service cards ── */
.service-card ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp2);
  width: 100%;
}

.service-card ul li {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-mid);
  padding-left: var(--sp5);
  position: relative;
  line-height: 1.65;
}

/* Gold dot marker */
.service-card ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 5px; height: 5px;
  background: var(--grad-gold);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--glow-mid);
}

/* ── Price tag ── */
.service-card .price {
  font-family: var(--font-display);
  font-size: var(--tx-2xl);
  font-weight: 400;
  letter-spacing: -0.5px;
  background: var(--grad-gold-text);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-top: var(--sp3);
  animation: gradientPan 6s linear infinite;
}

.service-card .price::before {
  content: 'Starting at';
  display: block;
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--t-low);
  -webkit-text-fill-color: var(--t-low);
  margin-bottom: 5px;
}

/* ── Guided "Not Sure" CTA section ── */
.section[style*="text-align:center"] {
  background: var(--bg-raised) !important;
  text-align: center !important;
  position: relative;
  overflow: hidden;
}

.section[style*="text-align:center"]::before {
  content: '';
  position: absolute;
  bottom: -15%; left: 50%; transform: translateX(-50%);
  width: 800px; height: 500px;
  background: radial-gradient(ellipse 60% 55% at 50% 90%,
    rgba(212,168,67,0.16) 0%, transparent 60%);
  pointer-events: none;
}

/* Dot grid texture */
.section[style*="text-align:center"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle 1.5px at center, rgba(212,168,67,0.06) 0%, transparent 100%);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 10%, transparent 80%);
  pointer-events: none;
}

.section[style*="text-align:center"] h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(var(--tx-2xl), 4.5vw, var(--tx-4xl)) !important;
  font-weight: 400 !important;
  color: var(--t-hi) !important;
  letter-spacing: 1px !important;
  line-height: 1.2 !important;
  position: relative;
  z-index: 1;
}

.section[style*="text-align:center"] > div[style] {
  position: relative;
  z-index: 1;
}

/* ── Section top gold hairlines between sections ── */
.section + .section {
  border-top: 1px solid rgba(255,255,255,0.05);
}

.section.light-bg {
  position: relative;
}

.section.light-bg::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 600px; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(212,168,67,0.30) 35%,
    rgba(212,168,67,0.30) 65%,
    transparent);
  pointer-events: none;
  z-index: 1;
}

/* ── Responsive: 2-col on medium screens ── */
@media (max-width: 860px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .card-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .section[style*="padding-top:120px"] {
    padding-top: calc(var(--header-h) + 72px) !important;
  }
}


/* ================================================================
   SERVICES PAGE — Complete Component System
   ================================================================ */

/* ── 1. PAGE HERO — Two-column creative banner ───────────────── */

/* ── Base shell ── */
.svc-hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding-top: var(--header-h);
  padding-inline: var(--sp6);
  gap: 0;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 160% 140% at 50% -15%, #1f1a48 0%, #130f28 28%, #0c0d16 60%);
}

/* Overhead glow */
.svc-hero__glow {
  position: absolute;
  top: -20%; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 700px;
  background: radial-gradient(ellipse 60% 55% at 50% 25%,
    rgba(212,168,67,0.18) 0%,
    rgba(180,130,40,0.06) 48%,
    transparent 70%);
  pointer-events: none;
  animation: heroLightBreathe 7s ease-in-out infinite;
}

/* Diagonal sweep beam */
.svc-hero__beam {
  position: absolute;
  top: -40%; left: -60%;
  width: 140%; height: 200%;
  background: linear-gradient(
    105deg,
    transparent 0%, transparent 42%,
    rgba(212,168,67,0.016) 46%,
    rgba(230,190,80,0.048) 49%,
    rgba(255,215,100,0.025) 51%,
    rgba(212,168,67,0.016) 54%,
    transparent 58%, transparent 100%
  );
  pointer-events: none;
  animation: lightBeamSweep 9s ease-in-out infinite;
}

/* Grid texture */
.svc-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(212,168,67,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,168,67,0.022) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 15%, transparent 80%);
  pointer-events: none;
}

/* Vertical gold divider between columns */
.svc-hero::before {
  content: '';
  position: absolute;
  left: 50%; top: 15%; bottom: 15%;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent,
    rgba(212,168,67,0.18) 30%,
    rgba(212,168,67,0.18) 70%,
    transparent);
  pointer-events: none;
}

/* ── LEFT COLUMN ── */
.svc-hero__left {
  position: relative;
  z-index: 2;
  padding: var(--sp9) var(--sp7) var(--sp9) max(var(--sp6), calc((100vw - 1200px)/2 + var(--sp6)));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp5);
}

.svc-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp2);
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--g2);
  animation: fadeDown 0.8s var(--ease) 0.1s both;
}

.eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--grad-gold);
  box-shadow: 0 0 8px var(--glow-mid);
  flex-shrink: 0;
}

.svc-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 4.2rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: 0.3px;
  color: var(--t-hi);
  text-shadow: 0 4px 40px rgba(0,0,0,0.5);
  animation: fadeUp 1s var(--ease) 0.25s both;
}

/* Typewriter container */
.svc-typewriter-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}

/* Blinking cursor */
.svc-cursor {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--g3);
  font-size: 0.85em;
  animation: cursorBlink 0.9s step-end infinite;
  -webkit-text-fill-color: var(--g3);
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.svc-hero__sub {
  font-family: var(--font-body);
  font-size: var(--tx-md);
  font-weight: 300;
  color: var(--t-mid);
  max-width: 420px;
  line-height: 1.85;
  animation: fadeUp 1s var(--ease) 0.4s both;
}

/* ── PILL SCROLLING STRIP ── */
.svc-pill-track {
  width: 100%;
  max-width: 440px;
  overflow: hidden;
  position: relative;
  animation: fadeUp 1s var(--ease) 0.52s both;
  /* Fade edges */
  mask-image: linear-gradient(90deg,
    transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, black 12%, black 88%, transparent 100%);
}

.svc-pill-inner {
  display: flex;
  gap: var(--sp3);
  animation: pillScroll 28s linear infinite;
  width: max-content;
}

.svc-pill-track:hover .svc-pill-inner {
  animation-play-state: paused;
}

@keyframes pillScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.svc-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp2);
  padding: 7px 14px;
  background: rgba(255,255,255,0.04);
  border: var(--b-ghost);
  border-radius: var(--rfull);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
  flex-shrink: 0;
}

.svc-pill:hover {
  background: rgba(212,168,67,0.10);
  border-color: rgba(212,168,67,0.35);
}

.svc-pill__icon { font-size: 0.85rem; }

.svc-pill__label {
  font-family: var(--font-body);
  font-size: var(--tx-xs);
  font-weight: 400;
  color: var(--t-mid);
  letter-spacing: 0.3px;
}

.svc-pill:hover .svc-pill__label { color: var(--g2); }

/* Stats strip */
.svc-hero__stats {
  display: flex;
  align-items: center;
  gap: var(--sp6);
  padding-top: var(--sp5);
  border-top: 1px solid rgba(255,255,255,0.08);
  width: 100%;
  animation: fadeUp 1s var(--ease) 0.64s both;
}

.svc-stat { text-align: center; }
.svc-stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--tx-2xl);
  font-weight: 400;
  color: var(--g2);
  line-height: 1;
  margin-bottom: 4px;
}
.svc-stat__lbl {
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  color: var(--t-low);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.svc-stat__div {
  width: 1px; height: 30px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}


/* ── RIGHT COLUMN — ORBIT ── */
.svc-hero__right {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hub orb — background glow only, no visible element over cards */
.svc-orbit-hub {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;          /* behind cards */
  pointer-events: none;
}

.svc-orbit-hub__core { display: none; } /* removed — was cluttering the grid */

/* Rings become pure ambient glow — no border visible, just soft radial light */
.svc-orbit-hub__ring {
  position: absolute;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: none;
  background: radial-gradient(circle, rgba(212,168,67,0.06) 0%, transparent 70%);
}

.svc-orbit-hub__ring--1 { width: 200px; height: 200px; }
.svc-orbit-hub__ring--2 { width: 360px; height: 360px; opacity: 0.6; }
.svc-orbit-hub__ring--3 { width: 520px; height: 520px; opacity: 0.3; }

/* Cards container — CSS grid 3 cols */
.svc-orbit-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp3);
  padding: var(--sp6) var(--sp5);   /* less padding now hub is gone */
  width: 100%;
  max-width: 520px;
  position: relative;
  z-index: 4;
  animation: fadeUp 1s var(--ease) 0.3s both;
}

/* Individual orbit card */
.svc-orbit-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: var(--sp4) var(--sp3);
  background: rgba(255,255,255,0.03);
  border: var(--b-ghost);
  border-radius: var(--rmd);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    background 0.25s var(--ease),
    border-color 0.25s var(--ease),
    transform 0.3s var(--spring),
    box-shadow 0.25s var(--ease);
  /* Glass top edge */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.svc-orbit-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.09) 50%, transparent);
}

.svc-orbit-card:hover {
  background: rgba(212,168,67,0.08);
  border-color: rgba(212,168,67,0.32);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.4),
    0 0 20px rgba(212,168,67,0.1),
    inset 0 1px 0 rgba(212,168,67,0.12);
  /* cancel float animation briefly */
  animation-play-state: paused !important;
  transform: translateY(-5px) scale(1.04) !important;
  z-index: 10;
}

.svc-orbit-card__icon {
  font-size: 1.15rem;
  line-height: 1;
}

.svc-orbit-card__name {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--t-hi);
  line-height: 1.3;
  letter-spacing: 0.2px;
}

.svc-orbit-card__cat {
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.8;
}

/* Float animations — two variants for natural feel */
@keyframes orbitFloat {
  from { transform: translateY(0px)   rotate(0deg); }
  to   { transform: translateY(-10px) rotate(0.5deg); }
}

@keyframes orbitFloatB {
  from { transform: translateY(-5px)  rotate(-0.3deg); }
  to   { transform: translateY(8px)   rotate(0.4deg); }
}

/* ── 2. SECTION LAYOUT HELPERS ────────────────────────────────── */
.svc-section {
  background: var(--bg-base);
}

.svc-section__header {
  text-align: center;
  margin-bottom: var(--sp8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp3);
}

.svc-section__title {
  font-family: var(--font-display);
  font-size: clamp(var(--tx-2xl), 4vw, var(--tx-3xl));
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 1.5px;
  line-height: 1.15;
}

.svc-section__sub {
  font-family: var(--font-body);
  font-size: var(--tx-md);
  font-weight: 300;
  color: var(--t-mid);
  max-width: 520px;
  line-height: 1.8;
}

/* Tag / eyebrow pill */
.svc-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp2);
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--t-mid);
  padding: 5px 14px;
  border: var(--b-ghost);
  border-radius: var(--rfull);
  background: rgba(255,255,255,0.03);
}

.svc-tag--gold {
  color: var(--g2);
  border-color: rgba(212,168,67,0.25);
  background: rgba(212,168,67,0.05);
}


/* ── 3. CORE SERVICE CARDS — icon + category ──────────────────── */
.svc-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--rmd);
  background: rgba(255,255,255,0.04);
  border: var(--b-ghost);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g3);
  flex-shrink: 0;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
  margin-bottom: var(--sp2);
}

.service-card:hover .svc-card__icon {
  background: rgba(212,168,67,0.10);
  border-color: rgba(212,168,67,0.30);
  color: var(--g2);
}

.svc-card__cat {
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--t-low);
}

/* Feature list */
.svc-card__features {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp2);
  width: 100%;
}

.svc-card__features li {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-mid);
  padding-left: var(--sp5);
  position: relative;
  line-height: 1.65;
}

.svc-card__features li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 5px; height: 5px;
  background: var(--grad-gold);
  border-radius: 50%;
  box-shadow: 0 0 5px var(--glow-mid);
}

/* Price */
.svc-card__price {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: var(--sp2);
}

.svc-card__price-label {
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--t-low);
}

.svc-card__price-amount {
  font-family: var(--font-display);
  font-size: var(--tx-2xl);
  font-weight: 400;
  background: var(--grad-gold-text);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientPan 6s linear infinite;
  line-height: 1.1;
}

.svc-card__cta {
  margin-top: auto;
  align-self: flex-start;
}

/* Skeleton loader */
.service-card--skeleton {
  pointer-events: none;
}

.skeleton-icon {
  width: 48px; height: 48px;
  border-radius: var(--rmd);
  background: rgba(255,255,255,0.05);
  animation: skeletonPulse 1.6s ease-in-out infinite;
}

.skeleton-line {
  height: 12px;
  border-radius: var(--rfull);
  background: rgba(255,255,255,0.05);
  animation: skeletonPulse 1.6s ease-in-out infinite;
  width: 55%;
}

.skeleton-line--wide  { width: 80%; height: 16px; }
.skeleton-line--short { width: 40%; }

@keyframes skeletonPulse {
  0%,100% { opacity: 0.4; }
  50%      { opacity: 0.8; }
}


/* ── 4. PREMIUM SECTION ───────────────────────────────────────── */
.svc-premium {
  background: var(--bg-raised);
  position: relative;
  overflow: hidden;
}

/* Gold top hairline */
.svc-premium::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 700px; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(212,168,67,0.35) 30%,
    rgba(212,168,67,0.35) 70%,
    transparent);
  pointer-events: none;
}

.svc-premium__glow {
  position: absolute;
  bottom: -20%; left: 50%; transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse 55% 55% at 50% 90%,
    rgba(212,168,67,0.12) 0%, transparent 60%);
  pointer-events: none;
}

/* Premium 3-column grid — centre card elevated */
.premium-grid {
  display: grid;
  grid-template-columns: 1fr 1.12fr 1fr;
  gap: var(--sp5);
  max-width: 1060px;
  margin-inline: auto;
  padding-inline: var(--sp6);
  align-items: start;
  position: relative;
  z-index: 1;
}

/* Premium card */
.premium-card {
  background: var(--grad-card);
  background-color: var(--bg-card);
  border: var(--b-ghost);
  border-radius: var(--rlg);
  padding: var(--sp7) var(--sp6);
  display: flex;
  flex-direction: column;
  gap: var(--sp4);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s var(--spring),
    box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
  box-shadow:
    var(--sh-md),
    inset 0 1px 0 rgba(255,255,255,0.055),
    inset 0 -1px 0 rgba(0,0,0,0.2);
}

/* Glass top edge */
.premium-card::before {
  content: '';
  position: absolute;
  top: 0; left: 20px; right: 20px; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.12) 40%, rgba(255,255,255,0.12) 60%, transparent);
  pointer-events: none;
}

.premium-card:hover {
  transform: translateY(-8px) scale(1.015);
  border-color: rgba(212,168,67,0.22);
  box-shadow:
    var(--sh-lg),
    0 0 48px rgba(212,168,67,0.09),
    inset 0 1px 0 rgba(255,255,255,0.09);
}

/* FEATURED card */
.premium-card--featured {
  border-color: rgba(212,168,67,0.40);
  background-color: #171929;
  background-image: linear-gradient(150deg,
    rgba(212,168,67,0.10) 0%,
    rgba(212,168,67,0.04) 45%,
    transparent 100%);
  box-shadow:
    var(--sh-lg),
    var(--sh-gold),
    inset 0 1px 0 rgba(212,168,67,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.22);
  animation: cardGlowPulse 4s ease-in-out infinite;
}

/* Gold top bar on featured */
.premium-card--featured::before {
  left: 0; right: 0; height: 2px;
  background: var(--grad-gold);
  opacity: 0.95;
  border-radius: var(--rlg) var(--rlg) 0 0;
}

.premium-card--featured:hover {
  transform: translateY(-10px) scale(1.02);
  border-color: rgba(212,168,67,0.65);
  box-shadow:
    0 28px 80px rgba(0,0,0,0.72),
    var(--sh-gold-hi),
    inset 0 1px 0 rgba(212,168,67,0.24);
}

/* Icon in premium card */
.premium-card__icon {
  width: 52px; height: 52px;
  border-radius: var(--rmd);
  background: rgba(255,255,255,0.04);
  border: var(--b-ghost);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t-mid);
  flex-shrink: 0;
  transition: all 0.3s var(--ease);
}

.premium-card:hover .premium-card__icon {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
  color: var(--t-hi);
}

.premium-card__icon--gold {
  background: rgba(212,168,67,0.10);
  border-color: rgba(212,168,67,0.28);
  color: var(--g2);
}

.premium-card--featured:hover .premium-card__icon--gold {
  background: rgba(212,168,67,0.16);
  color: var(--g1);
}

/* Premium card headings */
.premium-card h3 {
  font-family: var(--font-display);
  font-size: var(--tx-xl);
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.premium-card p {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.8;
}

/* Feature list inside premium cards */
.premium-card__features {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp2);
  flex: 1;
}

.premium-card__features li {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-mid);
  padding-left: var(--sp5);
  position: relative;
  line-height: 1.65;
  transition: color 0.2s var(--ease);
}

.premium-card__features li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 5px; height: 5px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.premium-card--featured .premium-card__features li::before {
  background: var(--grad-gold);
  box-shadow: 0 0 6px var(--glow-mid);
}

.premium-card:hover .premium-card__features li {
  color: rgba(169,165,157,0.85);
}

.premium-card__footer {
  margin-top: var(--sp2);
  padding-top: var(--sp4);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.premium-card--featured .premium-card__footer {
  border-top-color: rgba(212,168,67,0.14);
}


/* ── 5. GUIDED CTA SECTION ────────────────────────────────────── */
.svc-guided {
  background: var(--bg-base);
  position: relative;
  overflow: hidden;
}

/* Gold up-light */
.svc-guided__glow {
  position: absolute;
  bottom: -15%; left: 50%; transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse 60% 60% at 50% 90%,
    rgba(212,168,67,0.16) 0%, transparent 62%);
  pointer-events: none;
}

/* Dot matrix */
.svc-guided__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle 1.5px at center,
    rgba(212,168,67,0.06) 0%, transparent 100%);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 10%, transparent 80%);
  pointer-events: none;
}

.svc-guided__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  margin-inline: auto;
  padding-inline: var(--sp6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp5);
}

.svc-guided__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--tx-2xl), 4.5vw, var(--tx-4xl));
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 1px;
  line-height: 1.2;
}

.svc-guided__sub {
  font-family: var(--font-body);
  font-size: var(--tx-md);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.8;
}

/* Choice buttons — 2×2 grid */
.svc-guided__choices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp3);
  width: 100%;
  max-width: 560px;
}

.choice-btn {
  display: flex;
  align-items: center;
  gap: var(--sp3);
  padding: var(--sp4) var(--sp5);
  background: rgba(255,255,255,0.03);
  border: var(--b-dim);
  border-radius: var(--rmd);
  cursor: pointer;
  text-align: left;
  transition:
    background 0.22s var(--ease),
    border-color 0.22s var(--ease),
    transform 0.22s var(--spring),
    box-shadow 0.22s var(--ease);
  position: relative;
  overflow: hidden;
}

.choice-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent,
    rgba(255,255,255,0.08) 50%, transparent);
  pointer-events: none;
}

.choice-btn:hover {
  background: rgba(212,168,67,0.07);
  border-color: rgba(212,168,67,0.35);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 20px rgba(212,168,67,0.08);
}

.choice-btn__icon {
  font-size: 1.3rem;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04);
  border-radius: var(--rsm);
  border: var(--b-ghost);
  flex-shrink: 0;
  transition: background 0.22s var(--ease), border-color 0.22s var(--ease);
}

.choice-btn:hover .choice-btn__icon {
  background: rgba(212,168,67,0.10);
  border-color: rgba(212,168,67,0.25);
}

.choice-btn__label {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 500;
  color: var(--t-hi);
  letter-spacing: 0.3px;
  flex: 1;
}

.choice-btn__arrow {
  font-size: var(--tx-base);
  color: var(--t-low);
  flex-shrink: 0;
  transition: color 0.22s var(--ease), transform 0.22s var(--spring);
}

.choice-btn:hover .choice-btn__arrow {
  color: var(--g3);
  transform: translateX(3px);
}


/* ── 6. RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .premium-grid {
    grid-template-columns: repeat(3, 1fr);
    padding-inline: var(--sp4);
  }
}

@media (max-width: 860px) {
  .premium-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }

  .premium-card--featured {
    order: -1;
  }

  .svc-guided__choices {
    grid-template-columns: 1fr;
    max-width: 380px;
  }
}

@media (max-width: 768px) {
  .svc-hero {
    padding-top: calc(var(--header-h) + var(--sp7));
    padding-bottom: var(--sp8);
    min-height: auto;
  }

  .svc-hero__stats {
    gap: var(--sp5);
    flex-wrap: wrap;
  }

  .svc-stat__div { display: none; }
}

@media (max-width: 560px) {
  .svc-hero__headline { font-size: 2.3rem; }
  .svc-guided__choices { grid-template-columns: 1fr; }
}


/* ================================================================
   HERO v5 — Split Layout with Animated Service Showcase
   Overrides the old hero entirely via .hero-v5 wrapper
   ================================================================ */

/* ── WRAPPER ──────────────────────────────────────────────────── */
.hero-v5 {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding-top: var(--header-h);
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 160% 140% at 50% -20%,
    #1f1a48 0%, #130f28 28%, #0c0d16 60%);
}

/* Beam sweep — unchanged from v4 */
.hero-v5::before {
  content: '';
  position: absolute;
  top: -40%; left: -60%;
  width: 140%; height: 200%;
  background: linear-gradient(105deg,
    transparent 0%, transparent 42%,
    rgba(212,168,67,0.018) 46%,
    rgba(230,190,80,0.055) 49%,
    rgba(255,215,100,0.03) 51%,
    rgba(212,168,67,0.018) 54%,
    transparent 58%, transparent 100%
  );
  pointer-events: none;
  animation: lightBeamSweep 8s ease-in-out infinite;
}

/* Gold grid texture */
.hero-v5::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(212,168,67,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,168,67,0.022) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%,
    black 20%, transparent 85%);
  pointer-events: none;
}

/* ── LEFT PANEL ───────────────────────────────────────────────── */
.hero-v5__left {
  position: relative;
  z-index: 3;
  padding: var(--sp9) var(--sp7) var(--sp9) clamp(var(--sp6), 8vw, 100px);
  display: flex;
  flex-direction: column;
  gap: var(--sp5);
  align-items: flex-start;
}

/* Ambient orb left */
.hero-v5__left::before {
  content: '';
  position: absolute;
  left: -100px; top: 20%;
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(90,70,200,0.09) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  animation: orbFloat 10s ease-in-out infinite;
}

.hero-v5__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp2);
  padding: 6px 20px;
  background: rgba(212,168,67,0.07);
  border: 1px solid rgba(212,168,67,0.22);
  border-radius: var(--rfull);
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 600;
  letter-spacing: 2.5px;
  color: var(--g2);
  text-transform: uppercase;
  animation: fadeDown 0.8s var(--ease) 0.1s both;
  position: relative;
  overflow: hidden;
}
.hero-v5__badge::after {
  content: '';
  position: absolute;
  top: 0; left: -120%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
  animation: shimmer 5s ease-in-out infinite 3s;
}

.hero-v5__badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--grad-gold);
  box-shadow: 0 0 8px var(--glow-mid);
  flex-shrink: 0;
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 6px var(--glow-mid); }
  50%      { box-shadow: 0 0 14px var(--glow-strong); }
}

.hero-v5__headline {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 5rem);
  font-weight: 300;
  line-height: 1.07;
  letter-spacing: 0.5px;
  color: var(--t-hi);
  animation: fadeUp 1s var(--ease) 0.25s both;
  text-shadow: 0 4px 40px rgba(0,0,0,0.5);
}

/* Animated type-cycle within headline */
.hero-v5__cycle-wrap {
  display: block;
  height: 1.15em;
  overflow: hidden;
  position: relative;
}

.hero-v5__cycle {
  display: block;
  font-style: italic;
  font-weight: 400;
  background: var(--grad-gold-text);
  background-size: 240% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientPan 5s linear infinite 1.5s;
  filter: drop-shadow(0 0 20px rgba(212,168,67,0.4));
  /* JS will animate translateY to cycle through service headlines */
  transition: transform 0.6s var(--ease), opacity 0.4s;
}

.hero-v5__sub {
  font-family: var(--font-body);
  font-size: var(--tx-md);
  font-weight: 300;
  color: var(--t-mid);
  max-width: 440px;
  line-height: 1.85;
  letter-spacing: 0.2px;
  animation: fadeUp 1s var(--ease) 0.4s both;
}

/* Service ticker strip under sub */
.hero-v5__ticker {
  display: flex;
  align-items: center;
  gap: var(--sp3);
  animation: fadeUp 1s var(--ease) 0.5s both;
}

.hero-v5__ticker-label {
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--t-low);
  white-space: nowrap;
  flex-shrink: 0;
}

.hero-v5__ticker-track {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

.hero-v5__ticker-inner {
  display: flex;
  gap: var(--sp3);
  /* Width set by JS based on total pill width */
  animation: tickerScroll 28s linear infinite;
  white-space: nowrap;
}

.hero-v5__ticker-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--rfull);
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--t-mid);
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.2s, color 0.2s;
}

.hero-v5__ticker-pill:hover {
  border-color: rgba(212,168,67,0.35);
  color: var(--g2);
}

.hero-v5__ticker-pill-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--g4);
  flex-shrink: 0;
}

@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* CTA row */
.hero-v5__actions {
  display: flex;
  gap: var(--sp4);
  align-items: center;
  flex-wrap: wrap;
  animation: fadeUp 1s var(--ease) 0.6s both;
}

/* Trust stats */
.hero-v5__stats {
  display: flex;
  gap: var(--sp6);
  padding-top: var(--sp5);
  border-top: 1px solid rgba(255,255,255,0.07);
  animation: fadeUp 1s var(--ease) 0.75s both;
}

.hero-v5__stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--tx-2xl);
  font-weight: 400;
  color: var(--g2);
  line-height: 1;
  margin-bottom: 3px;
}
.hero-v5__stat-lbl {
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  color: var(--t-low);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* ── RIGHT PANEL — Service Showcase ───────────────────────────── */
.hero-v5__right {
  position: relative;
  z-index: 3;
  padding: var(--sp9) clamp(var(--sp6), 6vw, 80px) var(--sp9) var(--sp5);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ambient orb right */
.hero-v5__right::before {
  content: '';
  position: absolute;
  right: -80px; bottom: 15%;
  width: 360px; height: 360px;
  background: radial-gradient(circle,
    rgba(212,168,67,0.07) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  animation: orbFloat 12s ease-in-out infinite reverse;
}

/* Service grid container */
.hero-v5__service-grid {
  position: relative;
  width: 100%;
  max-width: 520px;
  animation: fadeUp 1s var(--ease) 0.3s both;
}

/* Central glowing orb behind the grid */
.hero-v5__service-grid::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 320px; height: 320px;
  background: radial-gradient(circle,
    rgba(212,168,67,0.10) 0%,
    rgba(212,168,67,0.04) 40%,
    transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: heroLightBreathe 6s ease-in-out infinite;
}

/* The 3-column service card grid */
.hero-v5__svc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  position: relative;
  z-index: 2;
}

/* Individual service card */
.hero-v5__svc-card {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--rmd);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.28s var(--spring),
    border-color 0.28s var(--ease),
    background 0.28s var(--ease),
    box-shadow 0.28s var(--ease);
  /* Staggered entrance */
  animation: cardEntrance 0.6s var(--ease) both;
}

/* Top glass edge */
.hero-v5__svc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10px; right: 10px; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.1) 50%, transparent);
  pointer-events: none;
}

.hero-v5__svc-card:hover {
  transform: translateY(-4px) scale(1.03);
  border-color: rgba(212,168,67,0.38);
  background: rgba(212,168,67,0.07);
  box-shadow:
    0 12px 36px rgba(0,0,0,0.5),
    0 0 24px rgba(212,168,67,0.10);
}

/* Active / highlighted card */
.hero-v5__svc-card.is-active {
  border-color: rgba(212,168,67,0.5);
  background: rgba(212,168,67,0.09);
  box-shadow:
    0 0 0 1px rgba(212,168,67,0.15),
    0 8px 32px rgba(0,0,0,0.45),
    0 0 28px rgba(212,168,67,0.12);
}

.hero-v5__svc-card.is-active::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-gold);
  border-radius: var(--rmd) var(--rmd) 0 0;
}

/* Card icon */
.hero-v5__svc-icon {
  width: 32px; height: 32px;
  border-radius: var(--rsm);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g3);
  flex-shrink: 0;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}

.hero-v5__svc-card:hover .hero-v5__svc-icon,
.hero-v5__svc-card.is-active .hero-v5__svc-icon {
  background: rgba(212,168,67,0.12);
  border-color: rgba(212,168,67,0.28);
  color: var(--g2);
}

/* Card name */
.hero-v5__svc-name {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--t-mid);
  line-height: 1.35;
  letter-spacing: 0.2px;
  transition: color 0.25s;
}

.hero-v5__svc-card:hover .hero-v5__svc-name,
.hero-v5__svc-card.is-active .hero-v5__svc-name {
  color: var(--t-hi);
}

/* Category tag on card */
.hero-v5__svc-tag {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--t-low);
  transition: color 0.25s;
}

.hero-v5__svc-card.is-active .hero-v5__svc-tag { color: var(--g4); }

/* Staggered entrance animation */
@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Preview bar below the grid */
.hero-v5__preview {
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(212,168,67,0.05);
  border: 1px solid rgba(212,168,67,0.18);
  border-radius: var(--rmd);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  position: relative;
  z-index: 2;
  overflow: hidden;
  transition: background 0.3s, border-color 0.3s;
}

.hero-v5__preview::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(212,168,67,0.35) 50%, transparent);
}

.hero-v5__preview-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}

.hero-v5__preview-text {
  flex: 1;
  min-width: 0;
}

.hero-v5__preview-name {
  font-family: var(--font-display);
  font-size: var(--tx-lg);
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.3px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-v5__preview-desc {
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.4;
  margin-top: 2px;
}

.hero-v5__preview-arrow {
  font-family: var(--font-body);
  font-size: var(--tx-base);
  color: var(--g3);
  flex-shrink: 0;
  transition: transform 0.2s var(--spring);
}

.hero-v5__preview:hover .hero-v5__preview-arrow {
  transform: translateX(4px);
}

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero-v5 {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-v5__left {
    padding: calc(var(--header-h) + 56px) var(--sp6) var(--sp7);
    align-items: center;
    text-align: center;
  }

  .hero-v5__left::before { display: none; }

  .hero-v5__sub { max-width: 100%; }

  .hero-v5__actions { justify-content: center; }

  .hero-v5__stats { justify-content: center; }

  .hero-v5__right {
    padding: 0 var(--sp6) var(--sp9);
  }

  .hero-v5__right::before { display: none; }

  .hero-v5__ticker { display: none; }
}

@media (max-width: 560px) {
  .hero-v5__svc-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-v5__headline {
    font-size: 2.4rem;
  }
}


/* ================================================================
   SERVICES HERO — Responsive overrides
   ================================================================ */
@media (max-width: 1024px) {
  .svc-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-bottom: var(--sp8);
  }

  .svc-hero::before { display: none; }

  .svc-hero__left {
    padding: calc(var(--header-h) + var(--sp8)) var(--sp6) var(--sp5);
    align-items: center;
    text-align: center;
  }

  .svc-hero__sub { max-width: 560px; }

  .svc-pill-track { max-width: 100%; }

  .svc-hero__stats { justify-content: center; }

  .svc-hero__right {
    min-height: auto;
    padding: 0 var(--sp6) var(--sp8);
  }

  .svc-orbit-hub { display: none; }

  .svc-orbit-cards {
    max-width: 660px;
    margin-inline: auto;
    grid-template-columns: repeat(4, 1fr);
    padding: 0;
    gap: var(--sp2);
  }

  .svc-orbit-card {
    animation: none !important;
  }
}

@media (max-width: 640px) {
  .svc-hero__left {
    padding-top: calc(var(--header-h) + var(--sp7));
  }

  .svc-hero__headline { font-size: 2.2rem; }

  .svc-orbit-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 400px) {
  .svc-orbit-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ================================================================
   OTHER SERVICES SECTION
   ================================================================ */

.svc-other {
  background: var(--bg-base);
  position: relative;
}

/* Gold hairline top separator */
.svc-other::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 600px; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(212,168,67,0.22) 35%,
    rgba(212,168,67,0.22) 65%,
    transparent);
  pointer-events: none;
}

/* ── Grid: 3-col, last card full-width ── */
.other-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp5);
  max-width: 1060px;
  margin-inline: auto;
  padding-inline: var(--sp6);
}

/* ── Base other card ── */
.other-card {
  background: linear-gradient(150deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
  background-color: var(--bg-card);
  border: var(--b-ghost);
  border-radius: var(--rlg);
  padding: var(--sp6);
  display: flex;
  flex-direction: column;
  gap: var(--sp3);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s var(--spring),
    box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
  box-shadow: var(--sh-sm), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Glass top edge */
.other-card::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.10) 40%, rgba(255,255,255,0.10) 60%, transparent);
  pointer-events: none;
}

.other-card:hover {
  transform: translateY(-5px) scale(1.012);
  border-color: rgba(212,168,67,0.22);
  box-shadow:
    var(--sh-md),
    0 0 36px rgba(212,168,67,0.07),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Icon */
.other-card__icon {
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 2px;
}

/* Heading */
.other-card h3 {
  font-family: var(--font-display);
  font-size: var(--tx-lg);
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.3px;
  line-height: 1.2;
}

/* Body copy */
.other-card p {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.75;
  flex: 1;
}

/* CTA */
.other-card .btn-secondary {
  align-self: flex-start;
  margin-top: auto;
  padding: 0.6em 1.4em;
  font-size: var(--tx-xs);
}

/* ── On-Demand full-width card ── */
.other-card--demand {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp7);
  background: linear-gradient(135deg,
    rgba(212,168,67,0.08) 0%,
    rgba(212,168,67,0.03) 50%,
    transparent 100%);
  background-color: #171929;
  border-color: rgba(212,168,67,0.28);
  padding: var(--sp7);
  box-shadow: var(--sh-md), var(--sh-gold);
}

/* Gold left accent stripe */
.other-card--demand::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; width: 2px;
  background: var(--grad-gold);
  opacity: 0.7;
  border-radius: var(--rlg) 0 0 var(--rlg);
}

.other-card--demand::before {
  display: none; /* no top line — left stripe is the accent */
}

.other-card--demand:hover {
  transform: translateY(-4px);
  border-color: rgba(212,168,67,0.45);
  box-shadow: var(--sh-lg), var(--sh-gold);
}

/* Left content block */
.other-card--demand .other-card__left {
  flex-shrink: 0;
}

/* On Demand badge */
.other-card__demand-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #0f0800;
  background: var(--grad-gold);
  padding: 3px 12px;
  border-radius: var(--rfull);
  margin-bottom: var(--sp3);
  box-shadow: 0 2px 12px rgba(212,168,67,0.4);
}

/* Icon in demand card */
.other-card--demand .other-card__icon {
  font-size: 2.2rem;
  margin-bottom: var(--sp3);
}

/* Demand card heading */
.other-card--demand h3 {
  font-family: var(--font-display);
  font-size: var(--tx-xl);
  font-weight: 400;
  color: var(--t-hi);
  margin-bottom: var(--sp3);
  line-height: 1.2;
}

/* Demand card body */
.other-card--demand p {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.8;
  margin-bottom: var(--sp5);
  max-width: 480px;
}

/* Bullet points list */
.other-card__points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp2);
  margin-bottom: var(--sp6);
}

.other-card__points li {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-mid);
  padding-left: var(--sp5);
  position: relative;
  line-height: 1.6;
}

.other-card__points li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 5px; height: 5px;
  background: var(--grad-gold);
  border-radius: 50%;
  box-shadow: 0 0 5px var(--glow-mid);
}

/* ── Guided CTA section sub-heading update ── */
.svc-guided__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--tx-2xl), 4.5vw, var(--tx-4xl));
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 1px;
  line-height: 1.2;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .other-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .other-card--demand {
    grid-column: 1 / -1;
    flex-direction: column;
    gap: var(--sp5);
  }
}

@media (max-width: 560px) {
  .other-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }

  .other-card--demand {
    padding: var(--sp5);
  }
}


/* ================================================================
   SERVICES NAV DROPDOWN
   ================================================================ */

/* Wrapper makes the trigger + panel a single hover zone */
.nav-services-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* Trigger — same style as other nav links */
.nav-services-trigger {
  font-family: var(--font-body);
  font-size: var(--tx-xs);
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--t-mid);
  padding: var(--sp2) var(--sp4);
  border-radius: var(--rx);
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
  cursor: pointer;
  white-space: nowrap;
}

.nav-services-trigger:hover,
.nav-services-trigger.active {
  color: var(--t-hi);
  background: var(--bg-overlay-hi);
}

.nav-services-trigger.active { color: var(--g2); }

/* Chevron rotates on hover */
.nav-chevron {
  transition: transform 0.22s var(--ease);
  flex-shrink: 0;
  opacity: 0.6;
}

.nav-services-wrap:hover .nav-chevron,
.nav-services-wrap:focus-within .nav-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* ── Dropdown panel ── */
.nav-services-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--bg-card);
  border: var(--b-dim);
  border-radius: var(--rlg);
  padding: var(--sp5) var(--sp5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp4) var(--sp5);
  min-width: 560px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.22s var(--ease),
    transform 0.22s var(--ease);
  box-shadow:
    var(--sh-lg),
    0 0 0 1px rgba(212,168,67,0.08),
    inset 0 1px 0 rgba(255,255,255,0.06);
  z-index: 990;

  /* Gold top line */
  position: absolute;
}

/* Gold top stripe */
.nav-services-dropdown::before {
  content: '';
  position: absolute;
  top: 0; left: 20px; right: 20px; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(212,168,67,0.4) 40%, rgba(212,168,67,0.4) 60%, transparent);
  border-radius: var(--rfull);
}

/* Show on hover / focus-within */
.nav-services-wrap:hover .nav-services-dropdown,
.nav-services-wrap:focus-within .nav-services-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Category label */
.nav-dropdown__cat {
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--g3);
  margin-bottom: var(--sp3);
  padding-bottom: var(--sp2);
  border-bottom: 1px solid rgba(212,168,67,0.14);
}

/* Column */
.nav-dropdown__col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Individual service link */
.nav-dropdown__col a {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-mid);
  padding: 7px 10px;
  border-radius: var(--rsm);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition:
    background 0.15s var(--ease),
    color 0.15s var(--ease),
    padding-left 0.15s var(--ease);
  letter-spacing: 0.2px;
}

.nav-dropdown__col a:hover {
  background: rgba(212,168,67,0.08);
  color: var(--t-hi);
  padding-left: 14px;
}


/* ================================================================
   CONSULTATION MODAL
   ================================================================ */

/* Overlay */
.consult-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

.consult-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* Modal card */
.consult-modal {
  background: var(--bg-card);
  border: var(--b-dim);
  border-radius: var(--rxl);
  padding: var(--sp7) var(--sp7) var(--sp6);
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,168,67,0.2) transparent;
  position: relative;
  box-shadow: var(--sh-lg), var(--sh-gold);
  transform: translateY(24px) scale(0.97);
  transition: transform 0.35s var(--ease);
}

.consult-overlay.open .consult-modal {
  transform: translateY(0) scale(1);
}

/* Gold top stripe */
.consult-modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-gold);
  opacity: 0.85;
  border-radius: var(--rxl) var(--rxl) 0 0;
}

/* Close button */
.consult-modal__close {
  position: absolute;
  top: var(--sp5);
  right: var(--sp5);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: var(--b-ghost);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t-mid);
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
  flex-shrink: 0;
}

.consult-modal__close:hover {
  background: rgba(220,80,80,0.12);
  color: #e08080;
  border-color: rgba(220,80,80,0.25);
}

/* Header */
.consult-modal__head {
  text-align: center;
  margin-bottom: var(--sp6);
}

.consult-modal__icon {
  font-size: 2.4rem;
  margin-bottom: var(--sp3);
  filter: drop-shadow(0 0 16px rgba(212,168,67,0.55));
  display: block;
}

.consult-modal__title {
  font-family: var(--font-display);
  font-size: var(--tx-3xl);
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.5px;
  margin-bottom: var(--sp3);
  line-height: 1.15;
}

.consult-modal__sub {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.7;
  max-width: 420px;
  margin-inline: auto;
}

/* ── Form fields ── */
.consult-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp5);
}

.consult-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp2);
}

.consult-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp4);
}

.consult-field label {
  font-family: var(--font-body);
  font-size: var(--tx-xs);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--t-mid);
}

.consult-field label span { color: var(--g3); margin-left: 2px; }

/* Inputs */
.consult-field input[type="text"],
.consult-field input[type="email"],
.consult-field input[type="tel"],
.consult-field textarea {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: var(--b-dim);
  border-radius: var(--rsm);
  color: var(--t-hi);
  font-family: var(--font-body);
  font-size: var(--tx-base);
  font-weight: 300;
  padding: 13px 16px;
  outline: none;
  transition:
    border-color 0.2s var(--ease),
    background 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.consult-field input::placeholder,
.consult-field textarea::placeholder { color: var(--t-low); }

.consult-field input:focus,
.consult-field textarea:focus {
  border-color: rgba(212,168,67,0.5);
  background: rgba(212,168,67,0.04);
  box-shadow: 0 0 0 3px rgba(212,168,67,0.10);
}

.consult-field textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.7;
}

/* Phone prefix wrapper */
.consult-phone-wrap {
  display: flex;
  border: var(--b-dim);
  border-radius: var(--rsm);
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.consult-phone-wrap:focus-within {
  border-color: rgba(212,168,67,0.5);
  box-shadow: 0 0 0 3px rgba(212,168,67,0.10);
}

.consult-phone-prefix {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 600;
  color: var(--g3);
  background: rgba(212,168,67,0.07);
  border-right: var(--b-ghost);
  padding: 13px 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.consult-phone-wrap input {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  flex: 1;
}

.consult-phone-wrap input:focus {
  box-shadow: none !important;
  background: transparent !important;
}

/* Char count */
.consult-char-count {
  text-align: right;
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  color: var(--t-low);
  margin-top: var(--sp1);
}

/* Status message */
.consult-status {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 400;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: var(--rsm);
  display: none;
}

.consult-status--error {
  display: block;
  background: rgba(220,80,80,0.10);
  border: 1px solid rgba(220,80,80,0.28);
  color: #e08080;
}

.consult-status--success {
  display: block;
  background: rgba(80,200,120,0.10);
  border: 1px solid rgba(80,200,120,0.28);
  color: #80d8a0;
}

/* Submit */
.consult-modal__submit {
  width: 100%;
  justify-content: center;
  display: flex;
  gap: var(--sp2);
  align-items: center;
  padding: 0.92em 2em;
  font-size: var(--tx-base);
  letter-spacing: 1.2px;
}

.consult-modal__submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

/* Trust note */
.consult-modal__trust {
  margin-top: var(--sp4);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--tx-xs);
  font-weight: 300;
  color: var(--t-low);
  letter-spacing: 0.3px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  /* Dropdown becomes full-width below header */
  .nav-services-dropdown {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    transform: translateY(-4px) !important;
    border-radius: 0 0 var(--rlg) var(--rlg);
    min-width: 0;
    grid-template-columns: 1fr;
  }

  .nav-services-wrap:hover .nav-services-dropdown,
  .nav-services-wrap:focus-within .nav-services-dropdown {
    transform: translateY(0) !important;
  }

  /* Modal */
  .consult-modal { padding: var(--sp6) var(--sp5); border-radius: var(--rlg); }
  .consult-field-row { grid-template-columns: 1fr; }
  .consult-modal__title { font-size: var(--tx-2xl); }
}

@media (max-width: 480px) {
  .consult-overlay { padding: var(--sp3); align-items: flex-end; }
  .consult-modal {
    max-height: 95vh;
    border-radius: var(--rlg) var(--rlg) 0 0;
    padding: var(--sp5) var(--sp4);
  }
}


/* ================================================================
   INDEX HERO — idx-hero
   Full-viewport split: left text · right image with overlays
   ================================================================ */

.idx-hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 150% 130% at 30% -10%,
    #1e1b42 0%, #120e28 30%, #0c0d16 60%);
}

/* ── Diagonal beam — signature ── */
.idx-hero__beam {
  position: absolute;
  top: -40%; left: -60%;
  width: 140%; height: 200%;
  background: linear-gradient(105deg,
    transparent 0%, transparent 42%,
    rgba(212,168,67,0.016) 46%,
    rgba(230,190,80,0.048) 49%,
    rgba(255,215,100,0.025) 51%,
    rgba(212,168,67,0.016) 54%,
    transparent 58%, transparent 100%);
  pointer-events: none;
  animation: lightBeamSweep 9s ease-in-out infinite;
  z-index: 2;
}

/* ── Gold grid texture ── */
.idx-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(212,168,67,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,168,67,0.02) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 60% 80% at 25% 50%, black 15%, transparent 80%);
  pointer-events: none;
  z-index: 1;
}

/* ════════════════
   LEFT PANEL
════════════════ */
.idx-hero__left {
  position: relative;
  z-index: 4;
  padding: calc(var(--header-h) + var(--sp9)) clamp(var(--sp6), 7vw, 96px) var(--sp9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp5);
}

/* Badge */
.idx-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp2);
  padding: 6px 18px;
  background: rgba(212,168,67,0.07);
  border: 1px solid rgba(212,168,67,0.22);
  border-radius: var(--rfull);
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 600;
  letter-spacing: 2.5px;
  color: var(--g2);
  text-transform: uppercase;
  animation: fadeDown 0.8s var(--ease) 0.1s both;
  width: fit-content;
  position: relative;
  overflow: hidden;
}

.idx-hero__badge::after {
  content: '';
  position: absolute;
  top: 0; left: -120%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
  animation: shimmer 5s ease-in-out infinite 3s;
}

.idx-hero__badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--grad-gold);
  box-shadow: 0 0 8px var(--glow-mid);
  flex-shrink: 0;
  animation: dotPulse 2s ease-in-out infinite;
}

/* Headline */
.idx-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5.5vw, 5.25rem);
  font-weight: 300;
  line-height: 1.07;
  letter-spacing: 0.3px;
  color: var(--t-hi);
  animation: fadeUp 1s var(--ease) 0.25s both;
  text-shadow: 0 4px 48px rgba(0,0,0,0.5);
}

.idx-hero__gold-line {
  display: block;
  font-style: italic;
  font-weight: 400;
  background: var(--grad-gold-text);
  background-size: 240% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientPan 5s linear infinite 1.5s;
  filter: drop-shadow(0 0 24px rgba(212,168,67,0.35));
}

/* Sub copy */
.idx-hero__sub {
  font-family: var(--font-body);
  font-size: var(--tx-md);
  font-weight: 300;
  color: var(--t-mid);
  max-width: 420px;
  line-height: 1.85;
  animation: fadeUp 1s var(--ease) 0.4s both;
}

/* CTA row */
.idx-hero__actions {
  display: flex;
  gap: var(--sp4);
  align-items: center;
  flex-wrap: wrap;
  animation: fadeUp 1s var(--ease) 0.55s both;
}

.idx-hero__actions .btn-primary,
.idx-hero__actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp2);
}

/* Stats strip */
.idx-hero__stats {
  display: flex;
  align-items: center;
  gap: var(--sp6);
  padding-top: var(--sp5);
  border-top: 1px solid rgba(255,255,255,0.08);
  width: 100%;
  animation: fadeUp 1s var(--ease) 0.7s both;
  width: fit-content;
}

.idx-hero__stat { text-align: center; }

.idx-hero__stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--tx-2xl);
  font-weight: 400;
  color: var(--g2);
  line-height: 1;
  margin-bottom: 4px;
}

.idx-hero__stat-lbl {
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  color: var(--t-low);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.idx-hero__stat-sep {
  width: 1px; height: 28px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}

/* ════════════════
   RIGHT PANEL
════════════════ */
.idx-hero__right {
  position: relative;
  z-index: 3;
  /* No padding — image fills edge to edge */
}

/* ── Image ── */
.idx-hero__img-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.idx-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  /* Slight desaturation so it feels premium not stock-photo */
  filter: saturate(0.75) brightness(0.7);
  transform: scale(1.04);
  animation: imgKenBurns 18s ease-in-out infinite alternate;
}

@keyframes imgKenBurns {
  from { transform: scale(1.04) translate(0, 0); }
  to   { transform: scale(1.0)  translate(-1%, -1%); }
}

/* Left fade so image blends into the dark left panel */
.idx-hero__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    #0c0d16 0%,
    rgba(12,13,22,0.65) 20%,
    rgba(12,13,22,0.15) 55%,
    rgba(0,0,0,0.4) 100%
  );
}

/* Bottom fade */
.idx-hero__img-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 200px;
  background: linear-gradient(to top, #0c0d16 0%, transparent 100%);
  pointer-events: none;
}

/* ── Floating badge cards ── */
.idx-hero__float {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--sp3);
  padding: var(--sp3) var(--sp4);
  background: rgba(13,14,22,0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: var(--b-dim);
  border-radius: var(--rmd);
  box-shadow: var(--sh-lg);
  min-width: 200px;
  animation: floatIn 0.9s var(--ease) both;
}

.idx-hero__float::before {
  content: '';
  position: absolute;
  top: 0; left: 12px; right: 12px; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.1) 50%, transparent);
}

/* Top-left badge */
.idx-hero__float--tl {
  top: calc(var(--header-h) + var(--sp7));
  left: -60px;
  animation-delay: 0.8s;
  border-color: rgba(80,200,120,0.25);
  box-shadow: var(--sh-lg), 0 0 24px rgba(80,200,120,0.08);
  animation: floatIn 0.9s var(--ease) 0.8s both, cardFloat 6s ease-in-out 2s infinite;
}

/* Top-right badge — sits inside the image */
.idx-hero__float--tr {
  top: calc(var(--header-h) + var(--sp7) + 90px);
  right: var(--sp6);
  animation-delay: 1.1s;
  border-color: rgba(212,168,67,0.3);
  box-shadow: var(--sh-lg), var(--sh-gold);
  animation: floatIn 0.9s var(--ease) 1.1s both, cardFloat 8s ease-in-out 2.5s infinite reverse;
}

@keyframes floatIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cardFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.idx-hero__float-icon {
  width: 36px; height: 36px;
  border-radius: var(--rsm);
  background: rgba(212,168,67,0.1);
  border: var(--b-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  color: var(--g2);
  font-weight: 700;
}

.idx-hero__float--tl .idx-hero__float-icon {
  background: rgba(80,200,120,0.10);
  border-color: rgba(80,200,120,0.25);
  color: #80d0a0;
}

.idx-hero__float-title {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 600;
  color: var(--t-hi);
  margin-bottom: 2px;
  line-height: 1.2;
}

.idx-hero__float-sub {
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.3;
}

/* ── Bottom service list card ── */
.idx-hero__svc-list {
  position: absolute;
  bottom: var(--sp7);
  left: -20px;
  right: var(--sp6);
  z-index: 5;
  background: rgba(13,14,22,0.90);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: var(--b-dim);
  border-radius: var(--rlg);
  padding: var(--sp4) var(--sp5);
  box-shadow: var(--sh-lg), 0 0 0 1px rgba(212,168,67,0.08);
  animation: floatIn 1s var(--ease) 1.4s both;
  /* Gold top stripe */
  position: absolute;
}

.idx-hero__svc-list::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-gold);
  opacity: 0.7;
  border-radius: var(--rlg) var(--rlg) 0 0;
}

.idx-hero__svc-list-label {
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--g3);
  margin-bottom: var(--sp3);
}

.idx-hero__svc-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp1) var(--sp5);
}

.idx-hero__svc-item {
  display: flex;
  align-items: center;
  gap: var(--sp2);
  font-family: var(--font-body);
  font-size: var(--tx-xs);
  font-weight: 400;
  color: var(--t-mid);
  padding: 5px 6px;
  border-radius: var(--rsm);
  text-decoration: none;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
  white-space: nowrap;
}

.idx-hero__svc-item:hover {
  color: var(--t-hi);
  background: rgba(255,255,255,0.05);
}

.idx-hero__svc-item--gold { color: var(--g3); }
.idx-hero__svc-item--gold:hover { color: var(--g2); }


/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 1100px) {
  .idx-hero__float--tl { left: -20px; min-width: 180px; }
}

@media (max-width: 900px) {
  .idx-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .idx-hero__left {
    padding: calc(var(--header-h) + var(--sp8)) var(--sp6) var(--sp7);
    order: 2;
  }

  .idx-hero__right {
    order: 1;
    height: 55vw;
    min-height: 320px;
    max-height: 520px;
  }

  .idx-hero__img-wrap { position: relative; height: 100%; }

  /* On mobile, overlays fill differently */
  .idx-hero__img-overlay {
    background: linear-gradient(
      to bottom,
      rgba(12,13,22,0.0) 0%,
      rgba(12,13,22,0.85) 100%
    );
  }

  .idx-hero__float--tl,
  .idx-hero__float--tr { display: none; }

  .idx-hero__svc-list {
    left: var(--sp4);
    right: var(--sp4);
    bottom: var(--sp4);
  }

  .idx-hero__actions { flex-direction: column; align-items: flex-start; }
  .idx-hero__actions a { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
  .idx-hero__headline { font-size: 2.4rem; }
  .idx-hero__svc-items { grid-template-columns: 1fr; }
  .idx-hero__stats { gap: var(--sp4); flex-wrap: wrap; }
  .idx-hero__stat-sep { display: none; }
}

/* ================================================================
   ELITEDEEDS v5 — Static Consultancy Edition
   New components appended below the existing design system.
   All tokens, animations, header, footer, hero, buttons,
   cards, timeline, modal — preserved above.
================================================================ */


/* ════════════════════════════════════════
   HEADER — new CTA button + burger
════════════════════════════════════════ */
.header-cta-btn {
  font-family: var(--font-body);
  font-size: var(--tx-xs);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #0f0800;
  background: var(--grad-gold);
  background-size: 200% auto;
  padding: 9px var(--sp5);
  border-radius: var(--rx);
  border: none;
  cursor: pointer;
  transition:
    transform 0.18s var(--spring),
    box-shadow 0.22s var(--ease),
    background-position 0.4s var(--ease);
  box-shadow: 0 3px 16px rgba(212,168,67,0.32), inset 0 1px 0 rgba(255,255,255,0.2);
  white-space: nowrap;
}
.header-cta-btn:hover {
  transform: translateY(-2px);
  background-position: right center;
  box-shadow: 0 8px 28px rgba(212,168,67,0.48), inset 0 1px 0 rgba(255,255,255,0.28);
}

/* Mobile burger */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--t-mid);
  border-radius: 2px;
  transition: all 0.3s var(--ease);
}

/* Active burger → X */
.nav-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.nav-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ════════════════════════════════════════
   SECTION SUBTITLE
════════════════════════════════════════ */
.section-sub {
  font-family: var(--font-body);
  font-size: var(--tx-md);
  font-weight: 300;
  color: var(--t-mid);
  max-width: 520px;
  margin: var(--sp3) auto 0;
  line-height: 1.8;
  text-align: center;
}

/* ════════════════════════════════════════
   SCROLL REVEAL
════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}


/* ════════════════════════════════════════
   INDEX HERO — Split layout
   (Extends existing .idx-hero system)
════════════════════════════════════════ */
.idx-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp2);
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--g2);
  animation: fadeDown 0.8s var(--ease) 0.1s both;
}

.eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--grad-gold);
  box-shadow: 0 0 8px var(--glow-mid);
  flex-shrink: 0;
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 6px var(--glow-mid); }
  50%      { box-shadow: 0 0 14px var(--glow-strong); }
}

.idx-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 4.5vw, 5.2rem);
  font-weight: 300;
  line-height: 1.07;
  letter-spacing: 0.5px;
  color: var(--t-hi);
  animation: fadeUp 1s var(--ease) 0.25s both;
  text-shadow: 0 4px 40px rgba(0,0,0,0.5);
}

.idx-hero__sub {
  font-family: var(--font-body);
  font-size: var(--tx-md);
  font-weight: 300;
  color: var(--t-mid);
  max-width: 440px;
  line-height: 1.85;
  animation: fadeUp 1s var(--ease) 0.4s both;
}

.idx-hero__actions {
  display: flex;
  gap: var(--sp4);
  flex-wrap: wrap;
  animation: fadeUp 1s var(--ease) 0.55s both;
}

.idx-hero__stats {
  display: flex;
  gap: var(--sp5);
  align-items: center;
  padding-top: var(--sp5);
  border-top: 1px solid rgba(255,255,255,0.07);
  animation: fadeUp 1s var(--ease) 0.7s both;
}

/* ════════════════════════════════════════
   HOME — WHY US GRID
════════════════════════════════════════ */
.home-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp5);
  max-width: 1060px;
  margin-inline: auto;
  padding-inline: var(--sp6);
}

.why-card {
  background: var(--bg-card);
  border: var(--b-ghost);
  border-radius: var(--rlg);
  padding: var(--sp6);
  display: flex;
  flex-direction: column;
  gap: var(--sp3);
  transition: transform 0.3s var(--spring), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
  box-shadow: var(--sh-sm);
  position: relative;
  overflow: hidden;
}
.why-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08) 50%, transparent);
}
.why-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212,168,67,0.22);
  box-shadow: var(--sh-md), 0 0 36px rgba(212,168,67,0.07);
}
.why-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--rmd);
  background: rgba(212,168,67,0.08);
  border: var(--b-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g3);
  flex-shrink: 0;
  transition: background 0.25s, color 0.25s;
}
.why-card:hover .why-card__icon {
  background: rgba(212,168,67,0.14);
  color: var(--g2);
}
.why-card h3 {
  font-family: var(--font-display);
  font-size: var(--tx-xl);
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.3px;
}
.why-card p {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.75;
}


/* ════════════════════════════════════════
   HOME — SERVICES PREVIEW GRID
════════════════════════════════════════ */
.home-svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp5);
  max-width: 1060px;
  margin-inline: auto;
  padding-inline: var(--sp6);
}

/* Fifth card spans full width */
.home-svc-card:nth-child(5) {
  grid-column: 1 / -1;
}

.home-svc-card {
  background: var(--bg-card);
  border: var(--b-ghost);
  border-radius: var(--rlg);
  padding: var(--sp6) var(--sp7);
  display: flex;
  flex-direction: column;
  gap: var(--sp3);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s var(--spring), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
  box-shadow: var(--sh-sm);
}
.home-svc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07) 50%, transparent);
}
.home-svc-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212,168,67,0.22);
  box-shadow: var(--sh-md), 0 0 40px rgba(212,168,67,0.08);
}
.home-svc-card--gold {
  background: rgba(21,18,34,1);
  border-color: rgba(212,168,67,0.25);
  background-image: linear-gradient(135deg,
    rgba(212,168,67,0.07) 0%, rgba(212,168,67,0.02) 60%, transparent 100%);
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp7);
}
.home-svc-card--gold:hover {
  border-color: rgba(212,168,67,0.42);
}

.home-svc-card__num {
  font-family: var(--font-display);
  font-size: var(--tx-4xl);
  font-weight: 300;
  color: rgba(212,168,67,0.12);
  line-height: 1;
  position: absolute;
  top: var(--sp4);
  right: var(--sp5);
  letter-spacing: -2px;
  pointer-events: none;
}
.home-svc-card__icon {
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: var(--sp1);
}
.home-svc-card h3 {
  font-family: var(--font-display);
  font-size: var(--tx-xl);
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.3px;
  line-height: 1.2;
}
.home-svc-card p {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.75;
  flex: 1;
}
.home-svc-card__link {
  font-family: var(--font-body);
  font-size: var(--tx-xs);
  font-weight: 500;
  color: var(--g3);
  letter-spacing: 0.5px;
  margin-top: auto;
  transition: color 0.18s var(--ease);
}
.home-svc-card:hover .home-svc-card__link { color: var(--g2); }


/* ════════════════════════════════════════
   CTA SECTION — additions
════════════════════════════════════════ */
.cta-eyebrow {
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--g3);
}


/* ════════════════════════════════════════
   SITE FOOTER — new premium version
════════════════════════════════════════ */
.site-footer {
  background: var(--bg-void);
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212,168,67,0.08) 10%,
    rgba(212,168,67,0.45) 35%,
    rgba(240,200,90,0.65) 50%,
    rgba(212,168,67,0.45) 65%,
    rgba(212,168,67,0.08) 90%,
    transparent 100%);
}
.site-footer::after {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 600px; height: 100px;
  background: radial-gradient(ellipse 80% 100% at 50% 0%,
    rgba(212,168,67,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--sp7);
  max-width: 1100px;
  margin-inline: auto;
  padding: var(--sp9) var(--sp6) var(--sp7);
  border-bottom: 1px solid rgba(255,255,255,0.055);
  position: relative;
  z-index: 1;
}

.footer-logo {
  font-family: var(--font-display);
  font-size: var(--tx-xl);
  font-weight: 500;
  letter-spacing: 4px;
  color: var(--g2);
  text-transform: uppercase;
  margin-bottom: var(--sp3);
}

.footer-tagline {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.7;
  margin-bottom: var(--sp4);
}

.footer-trust {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-trust span {
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 400;
  color: var(--t-low);
  letter-spacing: 0.5px;
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--g3);
  margin-bottom: var(--sp4);
  padding-bottom: var(--sp3);
  border-bottom: 1px solid rgba(212,168,67,0.14);
}
.footer-col a,
.footer-col p {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.9;
  display: block;
  margin-bottom: 2px;
  transition: color 0.18s var(--ease);
}
.footer-col a:hover { color: var(--g2); }

.footer-bottom {
  max-width: 1100px;
  margin-inline: auto;
  padding: var(--sp5) var(--sp6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 300;
  color: var(--t-low);
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
}


/* ════════════════════════════════════════
   SERVICES PAGE HERO
════════════════════════════════════════ */
.svc-page-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: calc(var(--header-h) + var(--sp9));
  padding-bottom: var(--sp9);
  padding-inline: var(--sp6);
  text-align: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 160% 140% at 50% -20%,
    #1f1a48 0%, #130f28 28%, #0c0d16 60%);
}

.svc-page-hero__beam {
  position: absolute;
  top: -40%; left: -60%;
  width: 140%; height: 200%;
  background: linear-gradient(105deg,
    transparent 0%, transparent 42%,
    rgba(212,168,67,0.018) 46%,
    rgba(230,190,80,0.05) 49%,
    rgba(255,215,100,0.025) 51%,
    rgba(212,168,67,0.018) 54%,
    transparent 58%, transparent 100%);
  pointer-events: none;
  animation: lightBeamSweep 9s ease-in-out infinite;
}

.svc-page-hero__glow {
  position: absolute;
  top: -10%; left: 50%; transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse 55% 55% at 50% 25%,
    rgba(212,168,67,0.16) 0%, transparent 65%);
  pointer-events: none;
  animation: heroLightBreathe 7s ease-in-out infinite;
}

.svc-page-hero__content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp5);
}

.svc-page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp2);
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--g2);
  animation: fadeDown 0.8s var(--ease) 0.1s both;
}

.svc-page-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.5px;
  color: var(--t-hi);
  text-shadow: 0 4px 40px rgba(0,0,0,0.5);
  animation: fadeUp 1s var(--ease) 0.25s both;
}

.svc-page-hero__sub {
  font-family: var(--font-body);
  font-size: var(--tx-md);
  font-weight: 300;
  color: var(--t-mid);
  max-width: 580px;
  line-height: 1.85;
  animation: fadeUp 1s var(--ease) 0.4s both;
}

/* Jump nav */
.svc-jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp3);
  justify-content: center;
  animation: fadeUp 1s var(--ease) 0.55s both;
}

.svc-jump-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: rgba(255,255,255,0.04);
  border: var(--b-ghost);
  border-radius: var(--rfull);
  font-family: var(--font-body);
  font-size: var(--tx-xs);
  font-weight: 400;
  color: var(--t-mid);
  text-decoration: none;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
  white-space: nowrap;
}
.svc-jump-btn:hover {
  background: rgba(212,168,67,0.09);
  border-color: rgba(212,168,67,0.32);
  color: var(--g2);
}


/* ════════════════════════════════════════
   SERVICES — TRUST ROW
════════════════════════════════════════ */
.svc-trust-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  max-width: 860px;
  margin-inline: auto;
  padding-inline: var(--sp6);
}

.svc-trust-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp2);
  padding: var(--sp6) var(--sp5);
  text-align: center;
  position: relative;
}
.svc-trust-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: rgba(255,255,255,0.07);
}

.svc-trust-item__num {
  font-family: var(--font-display);
  font-size: var(--tx-4xl);
  font-weight: 300;
  color: var(--g2);
  line-height: 1;
  letter-spacing: -1px;
}
.svc-trust-item__label {
  font-family: var(--font-body);
  font-size: var(--tx-xs);
  font-weight: 400;
  color: var(--t-mid);
  letter-spacing: 0.3px;
  line-height: 1.5;
}


/* ════════════════════════════════════════
   SERVICE DETAIL SECTIONS
════════════════════════════════════════ */
.svc-detail {
  padding-block: var(--sp10);
  background: var(--bg-base);
  position: relative;
  overflow: hidden;
}

.svc-detail--alt {
  background: var(--bg-raised);
}

.svc-detail--nri {
  background: var(--bg-base);
  position: relative;
}
.svc-detail--nri::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 800px; height: 1px;
  background: linear-gradient(90deg, transparent,
    rgba(212,168,67,0.35) 30%, rgba(212,168,67,0.35) 70%, transparent);
  pointer-events: none;
}

.svc-detail__inner {
  max-width: 1060px;
  margin-inline: auto;
  padding-inline: var(--sp6);
}

/* Section header */
.svc-detail__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp3);
  margin-bottom: var(--sp8);
  position: relative;
}

.svc-detail__num {
  font-family: var(--font-display);
  font-size: 7rem;
  font-weight: 300;
  color: rgba(212,168,67,0.07);
  line-height: 1;
  position: absolute;
  top: -24px; right: 0;
  letter-spacing: -4px;
  pointer-events: none;
  user-select: none;
}

.svc-detail__icon-wrap {
  width: 56px; height: 56px;
  border-radius: var(--rmd);
  background: rgba(212,168,67,0.08);
  border: var(--b-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g2);
}

.svc-detail__tag {
  display: inline-flex;
  padding: 4px 14px;
  background: rgba(212,168,67,0.07);
  border: 1px solid rgba(212,168,67,0.22);
  border-radius: var(--rfull);
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--g3);
}
.svc-detail__tag--gold {
  background: rgba(212,168,67,0.12);
  border-color: rgba(212,168,67,0.35);
  color: var(--g2);
}

.svc-detail__title {
  font-family: var(--font-display);
  font-size: clamp(var(--tx-2xl), 3.5vw, var(--tx-4xl));
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.5px;
  line-height: 1.12;
}

.svc-detail__tagline {
  font-family: var(--font-body);
  font-size: var(--tx-md);
  font-weight: 300;
  color: var(--t-mid);
  max-width: 560px;
  line-height: 1.75;
  font-style: italic;
}

/* Two-column body */
.svc-detail__body {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--sp8);
  align-items: start;
}

.svc-detail__col--main h3 {
  font-family: var(--font-display);
  font-size: var(--tx-xl);
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.3px;
  margin-bottom: var(--sp3);
  margin-top: var(--sp6);
}
.svc-detail__col--main h3:first-child { margin-top: 0; }

.svc-detail__col--main p {
  font-family: var(--font-body);
  font-size: var(--tx-base);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.85;
  margin-bottom: var(--sp3);
}

.svc-detail__timeline {
  display: flex;
  align-items: center;
  gap: var(--sp2);
  margin-top: var(--sp6);
  padding: var(--sp3) var(--sp4);
  background: rgba(212,168,67,0.05);
  border: 1px solid rgba(212,168,67,0.14);
  border-radius: var(--rsm);
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.5;
}
.svc-detail__timeline svg { color: var(--g3); flex-shrink: 0; }
.svc-detail__timeline strong { color: var(--t-hi); font-weight: 500; }

/* Side column */
.svc-detail__includes {
  background: var(--bg-card);
  border: var(--b-ghost);
  border-radius: var(--rlg);
  padding: var(--sp6);
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.svc-detail__includes::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-gold);
  opacity: 0.6;
  border-radius: var(--rlg) var(--rlg) 0 0;
}

.svc-detail__includes--gold {
  background: rgba(21,18,34,1);
  border-color: rgba(212,168,67,0.22);
  background-image: linear-gradient(135deg,
    rgba(212,168,67,0.07) 0%, transparent 70%);
}
.svc-detail__includes--gold::before { opacity: 0.85; }

.svc-detail__includes h4 {
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--g3);
  margin-bottom: var(--sp4);
  padding-bottom: var(--sp3);
  border-bottom: 1px solid rgba(212,168,67,0.14);
}

.svc-detail__includes ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.svc-detail__includes li {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 400;
  color: var(--t-mid);
  padding-left: var(--sp5);
  position: relative;
  line-height: 1.5;
}
.svc-detail__includes li::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 5px; height: 5px;
  background: var(--grad-gold);
  border-radius: 50%;
  box-shadow: 0 0 5px var(--glow-mid);
}

.svc-detail__trust-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp2);
  margin-top: var(--sp4);
  padding: var(--sp3) var(--sp4);
  background: rgba(255,255,255,0.025);
  border: var(--b-ghost);
  border-radius: var(--rsm);
  font-family: var(--font-body);
  font-size: var(--tx-xs);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.6;
}
.svc-detail__trust-note svg { color: var(--g3); flex-shrink: 0; margin-top: 2px; }
.svc-detail__trust-note--gold {
  background: rgba(212,168,67,0.05);
  border-color: rgba(212,168,67,0.14);
}

.svc-detail__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--sp5);
  width: 100%;
  text-align: center;
}


/* ════════════════════════════════════════
   FAQ
════════════════════════════════════════ */
.faq-list {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--sp6);
  display: flex;
  flex-direction: column;
  gap: var(--sp3);
}

.faq-item {
  background: var(--bg-card);
  border: var(--b-ghost);
  border-radius: var(--rmd);
  overflow: hidden;
  transition: border-color 0.25s var(--ease);
}
.faq-item--open {
  border-color: rgba(212,168,67,0.22);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp4);
  padding: var(--sp5) var(--sp6);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--tx-lg);
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.3px;
  text-align: left;
  transition: color 0.2s var(--ease);
}
.faq-question:hover { color: var(--g1); }
.faq-item--open .faq-question { color: var(--g2); }

.faq-chevron {
  flex-shrink: 0;
  color: var(--t-low);
  transition: transform 0.3s var(--ease), color 0.2s var(--ease);
}
.faq-item--open .faq-chevron {
  transform: rotate(180deg);
  color: var(--g3);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.faq-item--open .faq-answer {
  max-height: 400px;
}
.faq-answer p {
  padding: 0 var(--sp6) var(--sp5);
  font-family: var(--font-body);
  font-size: var(--tx-base);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.8;
}


/* ════════════════════════════════════════
   CONSULTATION PAGE
════════════════════════════════════════ */
.consult-page {
  min-height: calc(100vh - var(--header-h));
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: var(--header-h);
}

.consult-page__left {
  background: radial-gradient(ellipse 160% 140% at 0% 20%,
    #1f1a48 0%, #130f28 30%, #0c0d16 65%);
  position: relative;
  overflow: hidden;
}
.consult-page__left::after {
  content: '';
  position: absolute;
  top: 20%; right: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent, rgba(212,168,67,0.18) 30%, rgba(212,168,67,0.18) 70%, transparent);
}

.consult-page__left-inner {
  padding: calc(var(--header-h) + var(--sp8)) var(--sp8) var(--sp9) clamp(var(--sp6), 6vw, 80px);
  display: flex;
  flex-direction: column;
  gap: var(--sp5);
  height: 100%;
}

.consult-page__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp2);
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--g2);
}

.consult-page__headline {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 4rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.5px;
  color: var(--t-hi);
  text-shadow: 0 4px 40px rgba(0,0,0,0.5);
}

.consult-page__sub {
  font-family: var(--font-body);
  font-size: var(--tx-md);
  font-weight: 300;
  color: var(--t-mid);
  max-width: 400px;
  line-height: 1.85;
}

.consult-page__points {
  display: flex;
  flex-direction: column;
  gap: var(--sp4);
  padding-top: var(--sp3);
}

.consult-page__point {
  display: flex;
  align-items: flex-start;
  gap: var(--sp4);
}
.consult-page__point-icon {
  font-size: 1.3rem;
  width: 40px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.consult-page__point-title {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 600;
  color: var(--t-hi);
  margin-bottom: 3px;
}
.consult-page__point-desc {
  font-family: var(--font-body);
  font-size: var(--tx-xs);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.6;
}

.consult-page__stats {
  display: flex;
  gap: var(--sp5);
  align-items: center;
  padding-top: var(--sp5);
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: auto;
}
.consult-page__stat { text-align: center; }
.consult-page__stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--tx-2xl);
  font-weight: 400;
  color: var(--g2);
  line-height: 1;
  margin-bottom: 4px;
}
.consult-page__stat-lbl {
  font-family: var(--font-body);
  font-size: var(--tx-xxs);
  color: var(--t-low);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.consult-page__stat-sep {
  width: 1px; height: 28px;
  background: rgba(255,255,255,0.09);
}

/* Right — form panel */
.consult-page__right {
  background: var(--bg-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-h) + var(--sp7)) clamp(var(--sp6), 5vw, 64px) var(--sp9);
}

.consult-page__form-card {
  width: 100%;
  max-width: 520px;
  background: var(--bg-card);
  border: var(--b-dim);
  border-radius: var(--rxl);
  padding: var(--sp7);
  box-shadow: var(--sh-lg);
  position: relative;
  overflow: hidden;
}
.consult-page__form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-gold);
  opacity: 0.75;
  border-radius: var(--rxl) var(--rxl) 0 0;
}

.consult-page__form-head {
  margin-bottom: var(--sp6);
}
.consult-page__form-head h2 {
  font-family: var(--font-display);
  font-size: var(--tx-3xl);
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.5px;
  margin-bottom: var(--sp3);
  line-height: 1.15;
}
.consult-page__form-head p {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.7;
}

/* Select input style */
.consult-select {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: var(--b-dim);
  border-radius: var(--rsm);
  color: var(--t-hi);
  font-family: var(--font-body);
  font-size: var(--tx-base);
  font-weight: 300;
  padding: 13px 16px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a9a59d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.consult-select:focus {
  border-color: rgba(212,168,67,0.5);
  box-shadow: 0 0 0 3px rgba(212,168,67,0.10);
}
.consult-select option {
  background: var(--bg-card);
  color: var(--t-hi);
}

/* Success state */
.consult-page__success {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp4);
  padding: var(--sp7) 0;
}
.consult-success__icon {
  font-size: 3.5rem;
  margin-bottom: var(--sp2);
}
.consult-success__title {
  font-family: var(--font-display);
  font-size: var(--tx-3xl);
  font-weight: 400;
  color: var(--t-hi);
  letter-spacing: 0.5px;
}
.consult-success__text {
  font-family: var(--font-body);
  font-size: var(--tx-base);
  font-weight: 300;
  color: var(--t-mid);
  line-height: 1.8;
  max-width: 380px;
}
.consult-success__sub {
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  font-weight: 300;
  color: var(--t-low);
}


/* ════════════════════════════════════════
   RESPONSIVE — Tablet
════════════════════════════════════════ */
@media (max-width: 1024px) {
  .home-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .svc-detail__body {
    grid-template-columns: 1fr;
  }
  .svc-detail__col--side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp4);
    align-items: start;
  }
  .svc-detail__cta { grid-column: 1 / -1; }
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .consult-page {
    grid-template-columns: 1fr;
  }
  .consult-page__left::after { display: none; }
  .consult-page__left-inner {
    padding: calc(var(--header-h) + var(--sp6)) var(--sp6) var(--sp7);
  }
  .consult-page__stats { display: none; }
  .consult-page__right {
    padding: var(--sp7) var(--sp6) var(--sp9);
  }
}


/* ════════════════════════════════════════
   RESPONSIVE — Mobile
════════════════════════════════════════ */
@media (max-width: 768px) {

  .header-cta-btn { display: none; }

  .nav-burger { display: flex; }

  .main-nav {
    display: flex;
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    background: rgba(9,9,15,0.98);
    backdrop-filter: blur(24px);
    border-bottom: var(--b-ghost);
    padding: var(--sp5) var(--sp6) var(--sp7);
    flex-direction: column;
    gap: var(--sp2);
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
    z-index: 800;
  }

  .main-nav.nav--open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .main-nav .nav-link {
    padding: var(--sp3) var(--sp4);
    font-size: var(--tx-sm);
  }

  .nav-services-dropdown {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    min-width: 0;
    width: 100%;
    border-radius: var(--rmd);
    grid-template-columns: 1fr;
    display: none;
  }

  .nav-services-wrap:hover .nav-services-dropdown,
  .nav-services-wrap:focus-within .nav-services-dropdown {
    display: grid;
  }

  .home-why-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .home-svc-grid { grid-template-columns: 1fr; }
  .home-svc-card:nth-child(5) { grid-column: 1; }
  .home-svc-card--gold { flex-direction: column; gap: var(--sp4); }

  .svc-trust-row { flex-wrap: wrap; }
  .svc-trust-item { flex: 0 0 calc(50% - var(--sp3)); }
  .svc-trust-item:not(:last-child)::after { display: none; }

  .svc-detail__col--side { grid-template-columns: 1fr; }

  .svc-page-hero__headline { font-size: 2.4rem; }
  .svc-jump-nav { gap: var(--sp2); }
  .svc-jump-btn { font-size: 0.65rem; padding: 6px 12px; }

  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: var(--sp2); text-align: center; }

  .process-timeline { flex-direction: column; align-items: center; gap: 0; }
  .process-timeline::before { display: none; }
  .timeline-connector {
    width: 1px; height: 32px;
    background: linear-gradient(to bottom, rgba(212,168,67,0.45), rgba(212,168,67,0.1));
    margin-top: 0;
    align-self: center;
  }
  .timeline-connector::after { display: none; }
  .timeline-item { max-width: 240px; }

  .faq-list { padding-inline: var(--sp4); }
  .faq-question { padding: var(--sp4); font-size: var(--tx-base); }

  .consult-page__form-card { padding: var(--sp5); border-radius: var(--rlg); }
  .consult-field-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .idx-hero__headline { font-size: 2.4rem; }
  .svc-trust-item { flex: 0 0 100%; }
  .svc-detail__num { display: none; }
}

/* =================================================================
   SERVICES PAGE — guided legal-services experience
   ================================================================= */
.services-page { background: var(--bg-base); }
.sp-shell { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.sp-section { padding-block: 128px; position: relative; overflow: hidden; }
.sp-kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--g3); font: 600 var(--tx-xxs)/1 var(--font-body); letter-spacing: 2.4px; text-transform: uppercase; }
.sp-kicker span { width: 24px; height: 1px; background: var(--g3); }
.sp-centered { max-width: 680px; text-align: center; margin-inline: auto; }
.sp-centered .sp-kicker { justify-content: center; }
.sp-centered h2, .sp-intro h2, .sp-service h2, .sp-process h2, .sp-faq h2, .sp-cta h2 { font: 400 clamp(2.35rem, 4vw, 4rem)/1.04 var(--font-display); color: var(--t-hi); letter-spacing: -.4px; }
.sp-centered h2 { margin-top: 16px; }
.sp-centered > p:last-child, .sp-process__intro > p:last-child { color: var(--t-mid); font: 300 var(--tx-md)/1.8 var(--font-body); margin-top: 18px; }

/* Hero */
.sp-hero { min-height: 780px; padding: calc(var(--header-h) + 112px) 0 108px; display: grid; align-items: center; position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse 72% 82% at 84% 28%, rgba(212,168,67,.15), transparent 60%), radial-gradient(ellipse 75% 95% at 18% 0%, #201a41 0%, #12142a 42%, var(--bg-base) 82%); }
.sp-hero__grid { position: absolute; inset: 0; opacity: .55; background-image: linear-gradient(rgba(212,168,67,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(212,168,67,.045) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 75% 90% at 56% 40%, #000 8%, transparent 73%); }
.sp-hero__beam { position: absolute; inset: -80% -40%; background: linear-gradient(110deg, transparent 44%, rgba(246,211,119,.055) 48%, rgba(246,211,119,.12) 50%, rgba(246,211,119,.055) 52%, transparent 56%); animation: spBeam 12s ease-in-out infinite; }
.sp-hero__layout { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(320px,.88fr); gap: 72px; align-items: center; position: relative; z-index: 1; }
.sp-hero__copy { max-width: 655px; }
.sp-hero h1 { color: var(--t-hi); font: 400 clamp(3.2rem, 5.6vw, 5.85rem)/.94 var(--font-display); letter-spacing: -1.4px; margin: 22px 0 24px; animation: spEnter .8s var(--ease) .12s both; }
.sp-hero h1 em, .sp-cta h2 em { font-weight: 300; background: var(--grad-gold-text); background-clip: text; -webkit-background-clip: text; color: transparent; }
.sp-hero__lede { max-width: 590px; color: var(--t-mid); font: 300 clamp(1rem, 1.7vw, 1.15rem)/1.85 var(--font-body); animation: spEnter .8s var(--ease) .22s both; }
.sp-hero__stats { display: flex; gap: 0; margin-top: 48px; animation: spEnter .8s var(--ease) .32s both; }
.sp-hero__stats > div { padding: 0 26px; border-left: 1px solid rgba(255,255,255,.12); }
.sp-hero__stats > div:first-child { padding-left: 0; border: 0; }
.sp-hero__stats strong { display: block; color: var(--g2); font: 400 2.1rem/1 var(--font-display); }
.sp-hero__stats span { display: block; margin-top: 8px; color: var(--t-low); font: 500 var(--tx-xxs)/1.35 var(--font-body); letter-spacing: 1px; text-transform: uppercase; }
.sp-hero__art { height: 420px; position: relative; animation: spEnter 1s var(--ease) .15s both; }
.sp-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(212,168,67,.25); border-radius: 50%; transform: translate(-50%,-50%); }
.sp-orbit--one { width: 270px; height: 270px; animation: spFloat 8s ease-in-out infinite; }.sp-orbit--two { width: 400px; height: 400px; opacity: .55; border-style: dashed; animation: spSpin 32s linear infinite; }
.sp-hero__seal { width: 142px; height: 142px; display: grid; place-content: center; gap: 9px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border: 1px solid rgba(237,204,106,.55); border-radius: 50%; color: var(--g2); background: radial-gradient(circle, rgba(212,168,67,.16), rgba(13,14,28,.87) 70%); box-shadow: 0 0 55px rgba(212,168,67,.18), inset 0 0 35px rgba(212,168,67,.1); text-align: center; }
.sp-hero__seal svg { width: 34px; margin: auto; }.sp-hero__seal span { font: 600 .56rem/1.3 var(--font-body); letter-spacing: 1.8px; }
.sp-doc-card { width: 175px; padding: 24px 20px; position: absolute; top: 24px; right: 6px; display: grid; gap: 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(21,23,40,.72); box-shadow: var(--sh-lg); backdrop-filter: blur(12px); transform: rotate(7deg); animation: spFloat 7s ease-in-out infinite 1s; }.sp-doc-card span { height: 1px; width: 100%; background: rgba(255,255,255,.18); }.sp-doc-card .sp-doc-card__line { width: 45%; background: var(--g3); }.sp-doc-card b { margin-top: 4px; color: var(--g2); font: 500 .62rem var(--font-body); letter-spacing: 1.4px; text-transform: uppercase; }
.sp-stamp { width: 72px; height: 72px; display: grid; place-content: center; position: absolute; left: 18px; bottom: 36px; border: 1px solid rgba(237,204,106,.5); border-radius: 50%; color: var(--g2); font: 600 .58rem/1.35 var(--font-body); letter-spacing: 1.6px; text-align: center; transform: rotate(-14deg); animation: spFloat 6s ease-in-out infinite .5s; }
.sp-hero__particles i { width: 3px; height: 3px; position: absolute; border-radius: 50%; background: var(--g2); box-shadow: 0 0 10px var(--g2); opacity: .65; animation: spParticle 7s ease-in-out infinite; }.sp-hero__particles i:nth-child(1){left:10%;top:26%}.sp-hero__particles i:nth-child(2){left:72%;top:15%;animation-delay:1.2s}.sp-hero__particles i:nth-child(3){left:88%;top:66%;animation-delay:2.7s}.sp-hero__particles i:nth-child(4){left:38%;top:78%;animation-delay:3.3s}.sp-hero__particles i:nth-child(5){left:56%;top:10%;animation-delay:4.1s}

/* Intro and service navigation */
.sp-intro { background: var(--bg-base); }.sp-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: start; }.sp-intro h2 { margin-top: 16px; }.sp-intro__copy { padding-top: 30px; }.sp-intro__copy p { color: var(--t-mid); font: 300 var(--tx-md)/1.9 var(--font-body); }.sp-intro__copy p + p { margin-top: 18px; }
.sp-risk-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 76px; }.sp-risk { min-height: 210px; padding: 30px; border: var(--b-ghost); border-radius: var(--rlg); background: linear-gradient(145deg, rgba(255,255,255,.045), transparent); transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease); }.sp-risk:hover { transform: translateY(-7px); border-color: rgba(212,168,67,.32); background: linear-gradient(145deg, rgba(212,168,67,.1), transparent); }.sp-risk span { color: var(--g3); font: 400 1.2rem var(--font-display); }.sp-risk h3 { color: var(--t-hi); font: 400 1.45rem var(--font-display); margin: 26px 0 10px; }.sp-risk p { color: var(--t-mid); font: 300 var(--tx-sm)/1.7 var(--font-body); }
.sp-nav-section { padding: 112px 0; background: var(--bg-raised); position: relative; }.sp-service-nav { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 58px; border: var(--b-ghost); border-radius: var(--rlg); overflow: hidden; background: rgba(255,255,255,.018); }.sp-service-nav__item { min-height: 192px; padding: 28px 18px; display: flex; flex-direction: column; position: relative; border-right: var(--b-ghost); color: var(--t-mid); transition: color .25s, background .25s; }.sp-service-nav__item:last-child { border: 0; }.sp-service-nav__item::after { content: ''; height: 2px; position: absolute; bottom: 0; left: 20px; right: 20px; background: var(--grad-gold); transform: scaleX(0); transition: transform .3s var(--ease); }.sp-service-nav__item:hover,.sp-service-nav__item.is-active { color: var(--t-hi); background: rgba(212,168,67,.07); }.sp-service-nav__item:hover::after,.sp-service-nav__item.is-active::after { transform: scaleX(1); }.sp-service-nav__item b { color: var(--g3); font: 400 .78rem var(--font-display); }.sp-service-nav__item svg { width: 31px; height: 31px; margin: 24px 0 13px; color: var(--g2); }.sp-service-nav__item span { font: 400 1.02rem/1.2 var(--font-display); }

/* Alternating service stories */
.sp-service { padding: 142px 0; position: relative; overflow: hidden; background: var(--bg-base); scroll-margin-top: 68px; }.sp-service--alt { background: var(--bg-raised); }.sp-service--nri { background: radial-gradient(ellipse 90% 100% at 0% 50%, rgba(212,168,67,.1), transparent 58%), var(--bg-base); }.sp-service__layout { display: grid; grid-template-columns: minmax(330px,.86fr) minmax(0,1.14fr); gap: 110px; align-items: center; }.sp-service--alt .sp-service__layout { direction: rtl; }.sp-service--alt .sp-service__layout > * { direction: ltr; }.sp-service__content { max-width: 620px; }.sp-service__number { color: var(--g3); font: 600 var(--tx-xxs)/1 var(--font-body); letter-spacing: 2px; text-transform: uppercase; }.sp-service h2 { margin: 18px 0; }.sp-service__tagline { color: var(--g1); font: 400 1.3rem/1.45 var(--font-display); }.sp-service__content > p:not(.sp-service__number):not(.sp-service__tagline) { margin-top: 22px; color: var(--t-mid); font: 300 var(--tx-base)/1.85 var(--font-body); }.sp-service__details { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; padding-top: 32px; margin-top: 32px; border-top: 1px solid rgba(255,255,255,.1); }.sp-service__details h3 { color: var(--t-hi); font: 500 .66rem var(--font-body); letter-spacing: 1.7px; text-transform: uppercase; margin-bottom: 15px; }.sp-service__details li { position: relative; padding-left: 18px; color: var(--t-mid); font: 300 var(--tx-sm)/1.8 var(--font-body); }.sp-service__details li::before { content: '—'; position: absolute; left: 0; color: var(--g3); }.sp-service__details div:last-child p { color: var(--t-mid); font: 300 var(--tx-sm)/1.75 var(--font-body); }.sp-service__time { display: inline-block; margin-top: 17px; color: var(--g2); font: 500 .66rem/1.4 var(--font-body); letter-spacing: .5px; }
.sp-visual { width: min(100%, 390px); aspect-ratio: 1; margin: auto; position: relative; display: grid; place-items: center; border: 1px solid rgba(212,168,67,.14); border-radius: 50%; background: radial-gradient(circle, rgba(212,168,67,.13), rgba(255,255,255,.018) 52%, transparent 70%); }.sp-visual::before,.sp-visual::after { content: ''; position: absolute; border: 1px solid rgba(212,168,67,.13); border-radius: 50%; }.sp-visual::before { inset: 27px; }.sp-visual::after { inset: -24px; border-style: dashed; animation: spSpin 36s linear infinite; }.sp-visual__glass { width: 164px; height: 164px; display: grid; place-items: center; border: 1px solid rgba(237,204,106,.45); border-radius: 26px; background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(212,168,67,.04)); box-shadow: 0 15px 55px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.16); backdrop-filter: blur(8px); transform: rotate(-8deg); }.sp-visual__glass svg { width: 75px; color: var(--g2); transform: rotate(8deg); }.sp-visual__label { position: absolute; right: -8px; bottom: 48px; color: var(--g2); font: 600 .6rem/1.4 var(--font-body); letter-spacing: 1.8px; text-align: center; text-transform: uppercase; }
.sp-paper { width: 182px; height: 235px; padding: 40px 28px; position: relative; display: grid; align-content: start; gap: 14px; border: 1px solid rgba(237,204,106,.4); border-radius: 5px; background: linear-gradient(135deg, #292534, #151725); box-shadow: 18px 20px 45px rgba(0,0,0,.5); transform: rotate(8deg); }.sp-paper i { height: 1px; background: rgba(255,255,255,.18); }.sp-paper i:nth-child(2) { width: 70%; }.sp-paper i:nth-child(3) { width: 80%; }.sp-paper b { position: absolute; bottom: 30px; color: var(--g2); font: 600 .68rem var(--font-body); letter-spacing: 2.5px; }.sp-pen { width: 178px; height: 8px; position: absolute; right: 35px; bottom: 74px; border-radius: 9px; background: linear-gradient(90deg, var(--g5), var(--g1), var(--g5)); box-shadow: 0 4px 13px rgba(0,0,0,.5); transform: rotate(-40deg); }
.sp-registry { width: 190px; height: 178px; padding: 38px; border: 1px solid rgba(237,204,106,.42); border-radius: 14px 14px 3px 3px; background: linear-gradient(145deg, rgba(212,168,67,.15), rgba(21,23,40,.8)); box-shadow: var(--sh-lg); }.sp-registry svg { width: 100%; color: var(--g2); }.sp-registry__mark { position: absolute; right: 6px; bottom: 73px; padding: 8px 12px; border: 1px solid rgba(237,204,106,.55); border-radius: 3px; color: var(--g2); font: 700 .52rem var(--font-body); letter-spacing: 1.5px; transform: rotate(-10deg); }.sp-advisory__bubble { width: 132px; height: 110px; display: grid; place-items: center; border: 1px solid rgba(237,204,106,.48); border-radius: 50% 50% 50% 10%; color: var(--g2); background: rgba(212,168,67,.1); font: 300 4rem var(--font-display); }.sp-advisory__lines { position: absolute; right: 18px; bottom: 72px; width: 100px; padding: 19px; display: grid; gap: 11px; border: var(--b-ghost); border-radius: 8px; background: var(--bg-card); transform: rotate(6deg); }.sp-advisory__lines i { height: 1px; background: rgba(255,255,255,.2); }.sp-advisory__lines i:first-child { background: var(--g3); width: 55%; }.sp-globe { width: 172px; height: 172px; position: relative; border: 1px solid rgba(237,204,106,.55); border-radius: 50%; background: rgba(212,168,67,.08); }.sp-globe::before,.sp-globe::after,.sp-globe span { content: ''; position: absolute; border: 1px solid rgba(237,204,106,.32); border-radius: 50%; }.sp-globe::before { inset: 18px 52px; }.sp-globe::after { inset: 52px 18px; }.sp-globe span:nth-child(1) { left: 0; right: 0; top: 50%; border-width: 1px 0 0; }.sp-globe span:nth-child(2) { top: 0; bottom: 0; left: 50%; border-width: 0 0 0 1px; }.sp-globe__pin { width: 18px; height: 18px; position: absolute; top: 72px; right: 75px; border: 2px solid var(--g2); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 0 18px var(--g3); }

/* Trust, process, FAQ and CTA */
.sp-trust { background: var(--bg-raised); }.sp-trust__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 58px; }.sp-trust__grid article { min-height: 215px; padding: 30px; border: var(--b-ghost); border-radius: var(--rmd); background: rgba(255,255,255,.018); transition: transform .3s var(--ease), border-color .3s var(--ease); }.sp-trust__grid article:hover { transform: translateY(-5px); border-color: rgba(212,168,67,.3); }.sp-trust__grid svg { width: 31px; color: var(--g3); }.sp-trust__grid h3 { margin: 25px 0 9px; color: var(--t-hi); font: 400 1.3rem var(--font-display); }.sp-trust__grid p { color: var(--t-mid); font: 300 var(--tx-sm)/1.7 var(--font-body); }
.sp-process { background: var(--bg-base); }.sp-process__intro { max-width: 490px; }.sp-process__intro h2 { margin: 16px 0; }.sp-process__timeline { display: grid; grid-template-columns: repeat(6,1fr); gap: 0; margin-top: 76px; position: relative; }.sp-process__timeline::before { content: ''; position: absolute; top: 24px; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(212,168,67,.6), transparent); }.sp-process__timeline li { min-height: 185px; position: relative; padding: 0 15px; text-align: center; }.sp-process__timeline b { width: 49px; height: 49px; display: grid; place-items: center; position: relative; z-index: 1; margin: 0 auto 25px; border: 1px solid rgba(212,168,67,.45); border-radius: 50%; color: var(--g2); background: var(--bg-card); font: 400 .82rem var(--font-display); transition: box-shadow .25s, background .25s; }.sp-process__timeline li:hover b { background: rgba(212,168,67,.14); box-shadow: 0 0 24px rgba(212,168,67,.22); }.sp-process__timeline h3 { color: var(--t-hi); font: 400 1.05rem/1.2 var(--font-display); }.sp-process__timeline p { margin-top: 9px; color: var(--t-low); font: 300 .73rem/1.65 var(--font-body); }
.sp-faq { background: var(--bg-raised); }.sp-faq__shell { display: grid; grid-template-columns: .76fr 1.24fr; gap: 100px; }.sp-faq h2 { margin-top: 16px; }.sp-faq__list { border-top: 1px solid rgba(255,255,255,.11); }.sp-faq__item { border-bottom: 1px solid rgba(255,255,255,.11); }.sp-faq__item button { width: 100%; padding: 23px 2px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--t-hi); text-align: left; font: 400 1.12rem/1.35 var(--font-display); }.sp-faq__item button i { width: 14px; height: 14px; display: block; flex: 0 0 auto; position: relative; }.sp-faq__item button i::before,.sp-faq__item button i::after { content: ''; width: 14px; height: 1px; position: absolute; left: 0; top: 50%; background: var(--g3); transition: transform .25s; }.sp-faq__item button i::after { transform: rotate(90deg); }.sp-faq__item.is-open button { color: var(--g2); }.sp-faq__item.is-open button i::after { transform: rotate(0); }.sp-faq__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }.sp-faq__answer p { min-height: 0; overflow: hidden; color: var(--t-mid); font: 300 var(--tx-sm)/1.8 var(--font-body); }.sp-faq__item.is-open .sp-faq__answer { grid-template-rows: 1fr; }.sp-faq__item.is-open .sp-faq__answer p { padding: 0 26px 23px 0; }
.sp-cta { padding: 142px 0; position: relative; overflow: hidden; text-align: center; background: radial-gradient(ellipse 65% 90% at 50% 100%, rgba(212,168,67,.23), transparent 72%), var(--bg-base); }.sp-cta__light { width: 700px; height: 700px; position: absolute; top: 30%; left: 50%; border: 1px solid rgba(212,168,67,.12); border-radius: 50%; transform: translate(-50%,-50%); }.sp-cta__content { max-width: 720px; position: relative; z-index: 1; }.sp-cta h2 { margin: 20px 0; }.sp-cta__content > p:not(.sp-kicker) { max-width: 510px; margin: auto; color: var(--t-mid); font: 300 var(--tx-md)/1.8 var(--font-body); }.sp-cta__button { margin-top: 36px; display: inline-flex; align-items: center; gap: 10px; }.sp-cta__button:focus-visible,.sp-service-nav__item:focus-visible,.sp-faq__item button:focus-visible { outline: 2px solid var(--g2); outline-offset: 5px; }

/* Service page motion and responsiveness */
[data-sp-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .72s var(--ease), transform .72s var(--ease); }.sp-is-visible { opacity: 1; transform: none; } [data-sp-stagger] > [data-sp-reveal]:nth-child(2){transition-delay:.08s}[data-sp-stagger] > [data-sp-reveal]:nth-child(3){transition-delay:.16s}[data-sp-stagger] > [data-sp-reveal]:nth-child(4){transition-delay:.24s}[data-sp-stagger] > [data-sp-reveal]:nth-child(5){transition-delay:.32s}[data-sp-stagger] > [data-sp-reveal]:nth-child(6){transition-delay:.4s}
@keyframes spEnter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @keyframes spBeam { 0%,100% { transform: translateX(-16%) rotate(0deg); opacity:.35; } 50% { transform: translateX(16%) rotate(2deg); opacity:1; } } @keyframes spSpin { to { transform: rotate(360deg); } } @keyframes spFloat { 0%,100% { translate: 0 -5px; } 50% { translate: 0 8px; } } @keyframes spParticle { 0%,100%{transform:translateY(0);opacity:.2}50%{transform:translateY(-28px);opacity:1} }
@media (max-width: 960px) { .sp-hero { min-height: auto; }.sp-hero__layout { grid-template-columns: 1fr; gap: 48px; }.sp-hero__art { width: 390px; max-width: 90vw; height: 330px; margin: auto; }.sp-intro__grid,.sp-faq__shell { grid-template-columns: 1fr; gap: 36px; }.sp-intro__copy { padding: 0; }.sp-service__layout,.sp-service--alt .sp-service__layout { grid-template-columns: 1fr; gap: 60px; direction: ltr; }.sp-service--alt .sp-visual { order: 0; }.sp-service__content { max-width: none; }.sp-service-nav { grid-template-columns: repeat(3,1fr); }.sp-service-nav__item:nth-child(3) { border-right: 0; }.sp-service-nav__item:nth-child(n+4) { border-top: var(--b-ghost); }.sp-process__timeline { grid-template-columns: repeat(3,1fr); row-gap: 35px; }.sp-process__timeline::before { display: none; } }
@media (max-width: 640px) { .sp-shell { width: min(100% - 40px,1120px); }.sp-section,.sp-service,.sp-cta { padding-block: 84px; }.sp-hero { padding: calc(var(--header-h) + 72px) 0 76px; }.sp-hero h1 { font-size: clamp(2.75rem, 13vw, 4rem); }.sp-hero__stats { margin-top: 35px; flex-wrap: wrap; row-gap: 22px; }.sp-hero__stats > div { width: 50%; padding: 0 14px; }.sp-hero__stats > div:first-child { padding-left: 0; }.sp-hero__stats > div:last-child { border-left: 0; padding-left: 0; }.sp-hero__art { scale: .82; margin: -26px auto -38px; }.sp-risk-grid,.sp-trust__grid { grid-template-columns: 1fr; margin-top: 44px; }.sp-risk { min-height: 0; }.sp-service-nav { grid-template-columns: 1fr 1fr; }.sp-service-nav__item { min-height: 154px; border-bottom: var(--b-ghost); }.sp-service-nav__item:nth-child(2n) { border-right: 0; }.sp-service-nav__item:nth-child(3) { border-right: var(--b-ghost); }.sp-service-nav__item:last-child { border-bottom: 0; }.sp-service__details { grid-template-columns: 1fr; gap: 22px; }.sp-visual { width: 285px; }.sp-visual::before { inset: 18px; }.sp-paper { scale: .76; }.sp-registry { scale: .82; }.sp-process__timeline { grid-template-columns: 1fr 1fr; margin-top: 48px; }.sp-process__timeline li { min-height: 165px; }.sp-faq__shell { gap: 40px; }.sp-faq__item button { font-size: 1.04rem; }.sp-cta h2 { font-size: 2.7rem; } }
@media (prefers-reduced-motion: reduce) { .sp-hero__beam,.sp-orbit--one,.sp-orbit--two,.sp-doc-card,.sp-stamp,.sp-hero__particles i,.sp-visual::after { animation: none; } [data-sp-reveal] { opacity: 1; transform: none; transition: none; } }