/*
Theme Name: Mahima Numiro
Theme URI: https://mahimanumiro.com
Author: Mahima Numiro
Description: The finalized Mahima Numiro design, converted to a WordPress theme. Visual source of truth is the approved Claude design; no colours, spacing, typography, graphics, animations or layout were altered during conversion.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: Proprietary - all rights reserved
Text Domain: mahima-numiro
*/

/* ---------------------------------------------------------------------------
   Baseline reset, carried over VERBATIM from the approved design preview.
   The finalized design was built and signed off with these rules applied, so
   they are preserved exactly to guarantee identical rendering.
   --------------------------------------------------------------------------- */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* ===========================================================================
   Finalized Mahima Numiro stylesheet - transferred unchanged.
   =========================================================================== */

:root {
  --bg: #d9a53e;
  --bg-alt: #c98a2e;
  --surface: #f5e3ad;
  --ink: #2a1408;
  --ink-soft: #551a25;
  --maroon: #7c0f2e;
  --maroon-deep: #4a0916;
  --maroon-ink: #f8ecd2;
  --gold: #b8860b;
  --gold-light: #e8c766;
  --gold-deep: #7a5606;
  --gold-pale: #e9d5a0;
  --gold-pale-soft: rgba(184, 134, 11, 0.22);
  --sky: #b8722e;
  --sky-soft: rgba(184, 114, 46, 0.24);
  --indigo: #6a1f42;
  --indigo-soft: rgba(106, 31, 66, 0.18);
  --line: rgba(43, 23, 16, 0.20);
  --line-gold: rgba(138, 101, 8, 0.5);
  --star: rgba(184, 134, 11, 0.7);
  --star-blue: rgba(184, 114, 46, 0.6);
  --hero-orb-a: #f7ecc8;
  --hero-orb-b: #d9a83e;
  --hero-orb-c: #8a6508;
  --band-bg-a: #4a0916;
  --band-bg-b: #2c040d;
  --nebula-gold: rgba(232, 199, 102, 0.55);
  --nebula-blue: rgba(184, 114, 46, 0.32);
  --nebula-purple: rgba(122, 16, 48, 0.24);
  --shadow-soft: 0 18px 46px rgba(43, 23, 16, 0.32);
  --shadow-card: 0 8px 24px rgba(43, 23, 16, 0.22);
  --shadow-glow: 0 0 0 1px var(--line-gold), 0 12px 34px rgba(154, 110, 10, 0.32);
  --btn-wine-a: #8a1435;
  --btn-wine-b: #560c22;
  --btn-wine-border: #3a0616;
  --wine-glow: rgba(122, 16, 48, 0.32);
  --footer-ink: #ecd9a0;
  --om-red: #c31c3f;
  --om-red-deep: #7a0f28;
  --om-red-glow: rgba(195, 28, 63, 0.42);
  --wine-pale-soft: rgba(124, 15, 46, 0.18);
  --card-grad: linear-gradient(160deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 82%, var(--gold-pale)) 100%);
  --metal-1: #fff6da;
  --metal-2: #f0d789;
  --metal-3: #d4af37;
  --metal-4: #a17a10;
  --metal-text: #3a1108;

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Jost', 'Segoe UI', Tahoma, sans-serif;
  --container: 1160px;
  --radius: 6px;
  --radius-lg: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  position: relative;
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(ellipse 900px 640px at 88% -8%, var(--nebula-gold), transparent 62%),
    radial-gradient(ellipse 760px 560px at -10% 16%, var(--nebula-blue), transparent 58%),
    radial-gradient(ellipse 700px 520px at 50% 96%, var(--nebula-purple), transparent 64%),
    radial-gradient(ellipse 620px 900px at 105% 40%, rgba(255, 246, 218, 0.35), transparent 55%),
    linear-gradient(165deg, #f3daa0 0%, #e3bb5c 22%, var(--bg) 46%, var(--bg-alt) 72%, #a86f1f 100%);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.8;
  background-image:
    radial-gradient(2.2px 2.2px at 6% 12%, var(--metal-1) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 18% 48%, var(--gold-light) 50%, transparent 51%),
    radial-gradient(2.4px 2.4px at 32% 8%, var(--metal-1) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 46% 62%, var(--sky) 50%, transparent 51%),
    radial-gradient(2.6px 2.6px at 61% 24%, var(--metal-1) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 74% 52%, var(--gold-light) 50%, transparent 51%),
    radial-gradient(2.2px 2.2px at 87% 14%, var(--metal-1) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 94% 70%, var(--sky) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 12% 82%, var(--gold-light) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 55% 90%, var(--metal-1) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 27% 34%, var(--gold) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 69% 78%, var(--gold) 50%, transparent 51%);
  background-repeat: repeat;
  background-size: 420px 420px;
  animation: twinkle 4.5s ease-in-out infinite, dust-drift 60s linear infinite;
}
body::after {
  content: "";
  position: fixed;
  inset: -10% -10%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background: linear-gradient(115deg, transparent 30%, var(--gold-light) 47%, var(--gold-light) 50%, transparent 66%);
  background-size: 260% 260%;
  animation: sheen-sweep 10s ease-in-out infinite;
}
@keyframes sheen-sweep {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 60%; }
}
.container { position: relative; z-index: 1; }
@keyframes twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.75; } }
@keyframes twinkle-strong { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes dust-drift { from { background-position: 0 0; } to { background-position: 420px 420px; } }
@keyframes slow-spin { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } }
@keyframes ring-spin-cw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ring-spin-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes num-drift {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(14px, -20px) rotate(3deg); }
  100% { transform: translate(-10px, 14px) rotate(-2deg); }
}
@keyframes orb-pulse {
  0%, 100% { box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-gold), 0 0 40px var(--sky-soft); }
  50% { box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-gold), 0 0 78px var(--sky-soft); }
}

.numeral-field { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.numeral-field span {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 700;
  animation: num-drift 20s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.numeral-field span.n-gold {
  color: var(--metal-3);
  opacity: 0.30;
  -webkit-text-stroke: 1px rgba(255, 246, 218, 0.5);
  text-shadow: 0 0 22px rgba(212, 175, 55, 0.55), 0 2px 2px rgba(58, 17, 8, 0.25);
  animation-name: num-drift, num-fade;
}
.numeral-field span.n-wine {
  color: var(--maroon-deep);
  opacity: 0.24;
  -webkit-text-stroke: 1px rgba(232, 199, 102, 0.55);
  text-shadow: 0 0 18px rgba(122, 16, 48, 0.35);
  animation-name: num-drift, num-fade;
}
.numeral-field span.n-far { opacity: 0.14; filter: blur(0.4px); }
@keyframes num-fade { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } }

.particle-field { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.particle-field span {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, var(--metal-1) 0%, var(--metal-3) 55%, transparent 78%);
  box-shadow: 0 0 10px 2px var(--gold-pale-soft);
  animation: particle-float 14s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes particle-float {
  0% { transform: translate(0, 0) scale(0.8); opacity: 0; }
  12% { opacity: 0.85; }
  50% { transform: translate(var(--pf-x, 30px), var(--pf-y, -60px)) scale(1.1); opacity: 0.65; }
  88% { opacity: 0.8; }
  100% { transform: translate(calc(var(--pf-x, 30px) * 1.8), calc(var(--pf-y, -60px) * 1.8)) scale(0.7); opacity: 0; }
}

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-stagger.in-view { transition-delay: calc(var(--stagger, 0) * 90ms); }

.sparkle { position: absolute; pointer-events: none; color: var(--gold-light); opacity: 0; animation: sparkle-twinkle 2.2s ease-in-out infinite; z-index: 2; }
.sparkle svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 4px var(--gold-pale-soft)); }
@keyframes sparkle-twinkle { 0%, 100% { opacity: 0; transform: scale(0.6) rotate(0deg); } 50% { opacity: 0.9; transform: scale(1) rotate(20deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--maroon-deep); line-height: 1.15; margin: 0 0 0.5em; font-weight: 700; text-wrap: balance; letter-spacing: 0.005em; }
h1, h2 { text-shadow: 0 1px 0 rgba(255,246,218,0.65), 0 0 34px var(--wine-glow); }
h1 { font-size: clamp(2.6rem, 5.6vw, 4rem); letter-spacing: 0.01em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: 0.01em; }
p { margin: 0 0 1em; color: var(--ink-soft); }
p strong, li strong { color: var(--gold-deep); font-weight: 700; letter-spacing: 0.01em; }
.section-maroon p strong { color: var(--gold-light); }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
img { max-width: 100%; display: block; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.eyebrow { display: inline-block; font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.76rem; color: var(--gold-deep); font-weight: 700; margin-bottom: 14px; }
.section-maroon .eyebrow { color: var(--gold-light); }
.section { padding: 80px 0; scroll-margin-top: 76px; }
.section-alt {
  position: relative;
  background:
    radial-gradient(ellipse 700px 460px at 90% 0%, var(--nebula-gold), transparent 60%),
    linear-gradient(175deg, color-mix(in srgb, var(--bg-alt) 92%, var(--metal-1)) 0%, var(--bg-alt) 55%, color-mix(in srgb, var(--bg-alt) 88%, var(--maroon-deep)) 100%);
}
.section-royal {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 620px 420px at 8% 0%, rgba(255, 246, 218, 0.28), transparent 58%),
    radial-gradient(ellipse 700px 520px at 100% 100%, var(--nebula-purple), transparent 62%),
    linear-gradient(165deg, #c9922f 0%, var(--bg) 40%, #b47f22 70%, #8a6212 100%);
}
.section-royal h2 { text-shadow: 0 1px 0 rgba(255,246,218,0.55), 0 0 30px rgba(122,16,48,0.4); }
.section-textured { position: relative; overflow: hidden; background: var(--bg-alt); }
.section-textured::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%238a6508' stroke-width='1'%3E%3Ccircle cx='90' cy='90' r='70'/%3E%3Ccircle cx='90' cy='90' r='40'/%3E%3Crect x='50' y='50' width='80' height='80' transform='rotate(45 90 90)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.section-textured .container { position: relative; z-index: 1; }
.section-royal .container, #courses .container, #consultations .container { position: relative; z-index: 1; }
.section-watermark { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.section-watermark svg { position: absolute; }
.section-maroon { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--band-bg-a) 0%, var(--band-bg-b) 100%); }
.section-maroon::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 22%, var(--star) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 22% 68%, var(--star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 38% 12%, var(--star) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 52% 55%, var(--star) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 66% 30%, var(--star) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 78% 78%, var(--star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 90% 18%, var(--star) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 12% 88%, var(--star) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 95% 60%, var(--star) 50%, transparent 51%);
  background-repeat: repeat;
  background-size: 340px 340px;
  animation: twinkle-strong 3.8s ease-in-out infinite;
  pointer-events: none;
}
.section-maroon .container { position: relative; z-index: 1; }
.section-maroon h2, .section-maroon p, .section-maroon .devanagari { color: #fbe9df; }
.section-maroon h2 { color: #ffffff; text-shadow: 0 0 30px rgba(232, 199, 102, 0.4); }
.center { text-align: center; }
.lede { font-size: 1.12rem; max-width: 640px; }
.lede.center { margin-left: auto; margin-right: auto; }
.max-md { max-width: 780px; margin-left: auto; margin-right: auto; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 30px; border-radius: 999px; font-family: var(--font-body); font-weight: 600; font-size: 0.94rem; letter-spacing: 0.03em; border: 1px solid transparent; cursor: pointer; position: relative; overflow: hidden; isolation: isolate; transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, background 0.35s ease; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.5) 48%, rgba(255,255,255,0.5) 52%, transparent 70%);
  background-size: 220% 220%; background-position: -40% -40%;
  transition: background-position 0.7s ease;
}
.btn:hover::after { background-position: 140% 140%; }
.btn:hover { transform: translateY(-3px); }
.btn-gold {
  background: linear-gradient(135deg, var(--metal-2) 0%, var(--metal-3) 28%, var(--metal-1) 50%, var(--metal-3) 72%, var(--metal-4) 100%);
  color: var(--metal-text); font-weight: 700; text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  box-shadow: var(--shadow-soft), 0 0 0 1px var(--metal-4) inset, 0 1px 0 rgba(255,255,255,0.6) inset;
  border-color: var(--metal-4);
}
.btn-gold:hover { box-shadow: var(--shadow-soft), 0 0 0 1px var(--metal-1) inset, 0 0 30px var(--gold-pale-soft), 0 1px 0 rgba(255,255,255,0.7) inset; }
.btn-outline {
  background: linear-gradient(135deg, var(--btn-wine-a) 0%, var(--btn-wine-b) 100%);
  border-color: var(--gold); color: var(--gold-light);
  box-shadow: var(--shadow-card), 0 0 0 1px var(--btn-wine-border) inset;
}
.btn-outline:hover { box-shadow: var(--shadow-soft), 0 0 0 1px var(--gold-light) inset, 0 0 26px var(--wine-glow); }
.btn-whatsapp { background: var(--surface); color: var(--maroon-deep); border-color: var(--gold-pale); box-shadow: var(--shadow-card); }
.btn-whatsapp:hover { box-shadow: 0 0 0 1px var(--gold), 0 8px 22px var(--gold-pale-soft); }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(120deg, color-mix(in srgb, var(--bg) 96%, #fff6da) 0%, var(--bg) 45%, var(--bg-alt) 100%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(184,134,11,0.35);
  box-shadow: 0 2px 18px rgba(58,17,8,0.14);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 15px 28px; max-width: var(--container); margin: 0 auto; gap: 18px; }
.brand { display: flex; align-items: center; gap: 12px; line-height: 1.1; }
.brand-logo { width: 46px; height: 46px; flex-shrink: 0; display: block; filter: drop-shadow(0 2px 6px rgba(58,17,8,0.35)) drop-shadow(0 0 9px rgba(232,199,102,0.55)); transition: transform 0.4s cubic-bezier(.2,.8,.2,1), filter 0.4s ease; }
.brand:hover .brand-logo { transform: scale(1.07) rotate(-2deg); filter: drop-shadow(0 2px 8px rgba(58,17,8,0.4)) drop-shadow(0 0 15px rgba(232,199,102,0.8)); }
.brand-text { display: flex; flex-direction: column; }
.brand .brandname { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--maroon-deep); letter-spacing: 0.01em; }
.brand .tag { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-top: 3px; }
nav.primary-nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
nav.primary-nav a { position: relative; font-size: 0.9rem; font-weight: 500; color: var(--ink); padding: 6px 0; border-bottom: 2px solid transparent; transition: color 0.25s ease; white-space: nowrap; }
nav.primary-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transition: width 0.3s cubic-bezier(.2,.8,.2,1);
}
nav.primary-nav a:hover { color: var(--maroon); }
nav.primary-nav a:hover::after, nav.primary-nav a:focus-visible::after { width: 100%; }
.nav-actions .header-cta { box-shadow: var(--shadow-card), 0 0 0 1px var(--metal-4) inset, 0 0 16px var(--gold-pale-soft); }
.nav-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 12px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--maroon-deep); display: block; }

.hero {
  padding: 56px 0 70px; position: relative; overflow: hidden; scroll-margin-top: 0;
  /* sampled directly off the reference: luminous cream-gold core, warm gold vignette */
  background:
    radial-gradient(ellipse 72% 64% at 50% 33%, #fdf4bb 0%, rgba(253,240,172,0.78) 44%, transparent 74%),
    radial-gradient(ellipse 40% 48% at 1% 24%, rgba(233,196,100,0.60), transparent 64%),
    radial-gradient(ellipse 42% 50% at 99% 28%, rgba(230,190,84,0.62), transparent 64%),
    radial-gradient(ellipse 44% 52% at 3% 97%, rgba(226,183,86,0.72), transparent 64%),
    radial-gradient(ellipse 46% 54% at 97% 95%, rgba(217,180,88,0.70), transparent 64%),
    radial-gradient(ellipse 62% 40% at 50% 104%, rgba(245,222,125,0.55), transparent 66%),
    linear-gradient(168deg, #fdf2ae 0%, #fbe899 28%, #f7de88 52%, #efce74 76%, #e3bc58 100%);
}
.hero::before {
  content: "";
  position: absolute;
  top: 50%; right: -160px;
  width: 720px; height: 720px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23a17a10' stroke-width='1.3'%3E%3Ccircle cx='200' cy='200' r='188'/%3E%3Ccircle cx='200' cy='200' r='150'/%3E%3Ccircle cx='200' cy='200' r='55'/%3E%3Crect x='90' y='90' width='220' height='220'/%3E%3Crect x='90' y='90' width='220' height='220' transform='rotate(45 200 200)'/%3E%3Ccircle cx='200' cy='60' r='4'/%3E%3Ccircle cx='200' cy='340' r='4'/%3E%3Ccircle cx='60' cy='200' r='4'/%3E%3Ccircle cx='340' cy='200' r='4'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
  animation: slow-spin 80s linear infinite;
  transform-origin: center;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 15% 20%, var(--gold) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 28% 55%, var(--sky) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 45% 15%, var(--sky) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 60% 70%, var(--gold) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 78% 35%, var(--gold) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 85% 75%, var(--sky) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 95% 20%, var(--gold) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 8% 80%, var(--sky) 50%, transparent 51%);
  animation: twinkle-strong 3.2s ease-in-out infinite;
}
.hero .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.16fr 0.84fr; gap: 48px; align-items: center; }
.hero h1 { margin-bottom: 18px; font-size: clamp(2.45rem, 4.9vw, 4.75rem); }
.hero .container { max-width: 1340px; }
/* Surgical positioning fix: nudge the hero text column right on desktop only,
   so the left-corner flowers/leaves no longer sit over the eyebrow/stat text.
   A pure transform (no width/margin change) so nothing reflows and every
   child keeps its exact spacing, sizing and typography. Desktop-only
   (matches the >920px breakpoint where .hero-grid is still two columns) so
   tablet/mobile stacked layout is completely untouched. */
@media (min-width: 921px) {
  .hero-grid > div:first-child { transform: translateX(56px); }
}
/* wheel geometry locked to the reference: medallion 62% of the orb box and the
   number ring at 45% of it, so the proportion holds at every screen size */
@media (min-width: 921px) { .hero .om-vibration { max-width: 432px; margin-inline: auto; } }
/* hero-only bokeh: larger, warmer orbs to match the reference's soft glow.
   Scoped to .hero-atmosphere so the Books section's bokeh is untouched. */
.hero-atmosphere .hero-bokeh.hbk1 { top: 7%;  left: 16%;  width: 132px; height: 132px; --bk-op: 0.60; }
.hero-atmosphere .hero-bokeh.hbk2 { top: 58%; left: 5%;   width: 104px; height: 104px; --bk-op: 0.54; }
.hero-atmosphere .hero-bokeh.hbk3 { top: 15%; right: 20%; width: 150px; height: 150px; --bk-op: 0.50; }
.hero-atmosphere .hero-bokeh.hbk4 { bottom: 12%; right: 30%; width: 118px; height: 118px; --bk-op: 0.56; }
.hero-atmosphere .hero-bokeh.hbk5 { top: 40%; left: 38%;  width: 86px; height: 86px; --bk-op: 0.44; animation-duration: 10.5s; animation-delay: -6s; }
.hero-atmosphere .hero-bokeh.hbk6 { bottom: 26%; left: 26%; width: 70px; height: 70px; --bk-op: 0.42; animation-duration: 9.6s; animation-delay: -1s; }
.hero .devanagari { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--gold-deep); margin-bottom: 16px; }
.accent { position: relative; background: linear-gradient(100deg, var(--maroon-deep) 0%, var(--metal-3) 24%, var(--gold-light) 45%, var(--maroon-deep) 70%, var(--metal-3) 92%); background-size: 240% auto; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1px var(--maroon-deep); animation: accent-shimmer 3.8s ease-in-out infinite; text-shadow: none; filter: drop-shadow(0 2px 2px rgba(58,17,8,0.3)); }
@keyframes accent-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.orb-wrap { position: relative; }
.om-vibration { --om-r: clamp(100px, calc(19.8vw - 20.6px), 194px); position: relative; z-index: 1; width: 100%; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
.om-vibration::before {
  content: ""; position: absolute; inset: -16%; border-radius: 50%; pointer-events: none; z-index: 0;
  background: repeating-conic-gradient(from 0deg, rgba(184,134,11,0.40) 0deg 0.3deg, transparent 0.3deg 7.5deg);
  opacity: 0.32;
  -webkit-mask-image: radial-gradient(circle, transparent 0 48%, #000 55%, #000 68%, transparent 74%);
  mask-image: radial-gradient(circle, transparent 0 48%, #000 55%, #000 68%, transparent 74%);
  animation: ring-spin-cw 130s linear infinite;
}
.om-waves { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 1; }
.om-wave {
  position: absolute; width: 68%; aspect-ratio: 1/1; border-radius: 50%;
  border: 1.5px solid rgba(198,150,42,0.55); opacity: 0;
  box-shadow: 0 0 14px 1px rgba(232,199,102,0.32);
  animation: om-wave-pulse 4.2s cubic-bezier(.25,.7,.4,1) infinite;
}
.om-wave:nth-child(2) { border-color: rgba(212,175,55,0.5); box-shadow: 0 0 14px 1px rgba(212, 175, 55, 0.3); animation-delay: 1.05s; }
.om-wave:nth-child(3) { animation-delay: 2.1s; }
.om-wave:nth-child(4) { border-color: rgba(212,175,55,0.5); box-shadow: 0 0 14px 1px rgba(212, 175, 55, 0.3); animation-delay: 3.15s; }
@keyframes om-wave-pulse {
  0% { transform: scale(1); opacity: 0.85; }
  50% { opacity: 0.5; }
  100% { transform: scale(1.55); opacity: 0; }
}
.om-ring-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 2; }
.om-ring { position: relative; width: 0; height: 0; }
.om-static-ring { border-radius: 50%; pointer-events: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.om-static-ring.ring-a { width: calc(2 * var(--om-r) + 36px); height: calc(2 * var(--om-r) + 36px); border: 1px solid rgba(184,134,11,0.5); box-shadow: 0 0 0 1px rgba(255,246,218,0.22) inset; }
.om-static-ring.ring-b { width: calc(2 * var(--om-r) - 8px); height: calc(2 * var(--om-r) - 8px); border: 1px solid rgba(184,134,11,0.3); }
.om-ring-dots { animation: none; }
.ring-dot {
  position: absolute; top: 0; left: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: radial-gradient(circle, #fff6da 0%, var(--gold) 62%, transparent 100%);
  box-shadow: 0 0 9px 2px rgba(184,134,11,0.5);
  animation: sparkle-twinkle 4.2s ease-in-out infinite;
}
.om-ring-numbers { animation: ring-spin-cw 30s linear infinite; }
.om-ring-numbers .slot {
  position: absolute; top: 0; left: 0; transform-origin: 0 0; display: flex; align-items: center; justify-content: center;
}
.om-ring-numbers .num {
  display: inline-block; animation: ring-spin-ccw 30s linear infinite;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 3vw, 1.7rem);
  color: #7d1226; opacity: 0.92; line-height: 1;
  text-shadow: 0 1px 1px rgba(255,250,230,0.65);
}
.om-core {
  position: relative; z-index: 3; aspect-ratio: 1/1; width: 62%;
  border-radius: 50%; overflow: hidden;
  /* reference medallion: near-white highlight upper-left falling to warm gold */
  background: radial-gradient(circle at 34% 29%, #fffdf3 0%, #fdf3c8 20%, #fae391 46%, #f2cc69 72%, #e3ac42 100%);
  border: 4px solid #ecc266; display: flex; align-items: center; justify-content: center;
  animation: orb-pulse 3.2s ease-in-out infinite;
  box-shadow: var(--shadow-soft), 0 0 0 1px rgba(138,101,8,0.5), 0 0 58px rgba(255,214,120,0.5), 0 2px 12px rgba(255,255,255,0.75) inset;
}
.om-core::after {
  content: ""; position: absolute; top: -18%; left: -10%; width: 90%; height: 60%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.55) 0%, transparent 68%);
  transform: rotate(-18deg); pointer-events: none; z-index: 1;
}
.om-core .glyph {
  position: relative; z-index: 2;
  /* Hind Bold renders the traditional "3 + crescent + bindu" Om form with mature, smooth calligraphic strokes -- matching the reference medallion far more closely than a decorative display serif. */
  font-family: 'Hind', 'Noto Sans Devanagari', var(--font-display); font-size: clamp(5.2rem, 10.2vw, 7.8rem); font-weight: 700;
  color: #c40000; opacity: 1; display: inline-block;
  text-shadow: 0 2px 3px rgba(0,0,0,0.15), 0 0 22px var(--om-red-glow);
  animation: om-breathe 6.5s ease-in-out infinite;
}
/* True depth pulse: perspective + translateZ moves the Om along the Z axis, so it
   recedes into the medallion and returns toward the viewer with real perspective
   falloff rather than a flat zoom. Range is equivalent to scale 0.93 -> 1.21
   (2x the previous 1.00 -> 1.14 travel) and is centred on the old mean of ~1.07,
   so the Om's average on-screen size is unchanged. Paired keyframe stops hold
   briefly at each end for the natural pause between breaths. Scale only --
   no rotation, no x/y offset, so it stays perfectly centred and cannot shift layout. */
@keyframes om-breathe {
  0%,  7%   { transform: perspective(620px) translateZ(-36px); }
  46%, 55%  { transform: perspective(620px) translateZ(114px); }
  94%, 100% { transform: perspective(620px) translateZ(-36px); }
}
.hero-visual { position: relative; z-index: 1; aspect-ratio: 1/1; border-radius: 50% 50% 46% 46% / 55% 55% 45% 45%; overflow: hidden; background: linear-gradient(155deg, var(--hero-orb-a) 0%, var(--hero-orb-b) 40%, var(--sky) 72%, var(--indigo) 100%); border: 6px solid var(--surface); display: flex; align-items: center; justify-content: center; animation: orb-pulse 3.2s ease-in-out infinite; }
.hero-visual .glyph { font-family: var(--font-display); font-size: 8.5rem; color: var(--maroon-ink); opacity: 0.9; text-shadow: 0 1px 0 rgba(255,255,255,0.25); }
.hero-visual.tall { aspect-ratio: 4/5; border-radius: var(--radius-lg); }
.hero-visual.tall .glyph { font-size: 5.5rem; }
.stat-row { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.stat-row .stat { display: flex; align-items: center; gap: 7px; padding-left: 0; }
.stat-row .stat + .stat { border-left: 1px solid rgba(124,15,46,0.18); padding-left: 12px; }
.stat-row .stat-icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--gold-deep); opacity: 0.9; }
.stat-row .stat-icon svg { width: 100%; height: 100%; display: block; }
.stat-row .stat-body { display: flex; flex-direction: column; max-width: 118px; }
.stat-row .stat strong { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--maroon); font-variant-numeric: tabular-nums; line-height: 1.05; }
.stat-row .stat-label { font-size: 0.65rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.25; }

/* ================= Hero atmosphere: a few botanical accents + pink flowers + soft bokeh + falling petals ================= */
.hero-atmosphere {
  --hero-leaf-1: #5c9a3e;
  --hero-leaf-2: #3f7a2c;
  --hero-leaf-deep: #2a5219;
  --hero-rose: #e85f96;
  --hero-rose-soft: #f4a8c4;
  --hero-coral: #ff9a76;
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}

/* -- soft warm bokeh glows -- */
.hero-bokeh {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 218, 0.8) 0%, rgba(232, 199, 102, 0.28) 55%, transparent 78%);
  filter: blur(2px);
  animation-name: hero-bokeh-pulse; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
@keyframes hero-bokeh-pulse {
  0%, 100% { transform: scale(1); opacity: var(--bk-op, 0.5); }
  50% { transform: scale(1.16); opacity: calc(var(--bk-op, 0.5) * 1.35); }
}
.hero-bokeh.hbk1 { top: 8%; left: 14%; width: 90px; height: 90px; --bk-op: 0.45; animation-duration: 7s; }
.hero-bokeh.hbk2 { top: 62%; left: 4%; width: 70px; height: 70px; --bk-op: 0.4; animation-duration: 8.5s; animation-delay: -3s; }
.hero-bokeh.hbk3 { top: 18%; right: 8%; width: 110px; height: 110px; --bk-op: 0.4; animation-duration: 9s; animation-delay: -5s; }
.hero-bokeh.hbk4 { bottom: 10%; right: 22%; width: 80px; height: 80px; --bk-op: 0.42; animation-duration: 7.8s; animation-delay: -2s; }

/* -- premium layered floral clusters framing the four hero corners -- */
.hero-bloom-cluster { position: absolute; width: 200px; height: 200px; pointer-events: none; z-index: 2; filter: drop-shadow(0 8px 16px rgba(58,20,10,0.16)); }
.hero-bloom-cluster svg { position: absolute; display: block; overflow: visible; }
.hero-bloom-cluster .hb-leaf { width: 100%; height: 100%; top: 0; left: 0; transform-origin: center; }
.hero-bloom-cluster.corner-tr .hb-leaf { transform: scaleX(-1); }
.hero-bloom-cluster.corner-bl .hb-leaf { transform: scaleY(-1); }
.hero-bloom-cluster.corner-br .hb-leaf { transform: scale(-1, -1); }
.hero-bloom-cluster .hb-flower { animation-name: about-num-float; animation-timing-function: ease-in-out; animation-iteration-count: infinite; will-change: transform; }
.hero-bloom-cluster.corner-tl { top: -8px; left: -32px; width: 210px; height: 210px; }
.hero-bloom-cluster.corner-tr { top: -8px; right: -30px; width: 190px; height: 190px; }
.hero-bloom-cluster.corner-bl { bottom: -20px; left: -28px; width: 200px; height: 200px; }
.hero-bloom-cluster.corner-br { bottom: -22px; right: -26px; width: 230px; height: 230px; }
@media (max-width: 1100px) {
  .hero-bloom-cluster.corner-tl { width: 160px; height: 160px; }
  .hero-bloom-cluster.corner-tr { width: 148px; height: 148px; }
  .hero-bloom-cluster.corner-bl { width: 154px; height: 154px; }
  .hero-bloom-cluster.corner-br { width: 174px; height: 174px; }
}
@media (max-width: 780px) {
  .hero-bloom-cluster.corner-tl, .hero-bloom-cluster.corner-tr { width: 112px; height: 112px; top: -4px; }
  .hero-bloom-cluster.corner-bl, .hero-bloom-cluster.corner-br { width: 118px; height: 118px; bottom: -10px; }
}
@media (max-width: 480px) {
  .hero-bloom-cluster.corner-bl, .hero-bloom-cluster.corner-br { width: 88px; height: 88px; }
  .hero-bloom-cluster.corner-tl, .hero-bloom-cluster.corner-tr { width: 86px; height: 86px; }
  .om-vibration { --om-r: min(171px, calc(45vw - 25.2px)); }
}

/* -- tiny gold sparkles -- */
.hero-sparkle {
  position: absolute;
  background: var(--metal-1);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  filter: drop-shadow(0 0 5px rgba(232,199,102,0.6));
  animation: sparkle-twinkle 3s ease-in-out infinite;
}
.hero-sparkle.hsp1 { top: 12%; left: 24%; width: 7px; height: 7px; animation-delay: 0s; }
.hero-sparkle.hsp2 { top: 20%; right: 16%; width: 6px; height: 6px; animation-delay: 1s; }
.hero-sparkle.hsp3 { bottom: 16%; left: 30%; width: 6px; height: 6px; animation-delay: 1.8s; }
.hero-sparkle.hsp4 { bottom: 26%; right: 30%; width: 8px; height: 8px; animation-delay: 0.6s; }
.hero-sparkle.hsp5 { top: 46%; left: 3%; width: 6px; height: 6px; animation-delay: 2.3s; }

/* -- slow, elegant falling pink petals (reuses the proven photo-showcase petal-fall motion) -- */
.hero-petal { position: absolute; top: -8%; z-index: 1; animation-name: pms-petal-fall; animation-timing-function: ease-in-out; animation-iteration-count: infinite; will-change: transform, opacity; }
.hero-petal svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 5px rgba(232,95,150,0.32)) drop-shadow(0 2px 3px rgba(58,20,30,0.08)); }

.hero-swoosh { position: absolute; left: 0; bottom: 0; width: 100%; height: 22%; min-height: 90px; pointer-events: none; z-index: 1; opacity: 0.95; }
.hero-swoosh-path { animation: rel-wave-shift 11s ease-in-out infinite; }
.hero-swoosh-path.p2 { animation-duration: 14s; animation-delay: -5s; }
@media (max-width: 640px) { .hero-swoosh { height: 14%; min-height: 50px; opacity: 0.55; } }

@media (max-width: 640px) {
  .hero-branch.hb3, .hero-leaf.hl1, .hero-leaf.hl2, .hero-bokeh.hbk3, .hero-bokeh.hbk4, .hero-sparkle.hsp2, .hero-sparkle.hsp4 { display: none; }
}


/* ================= Hero botanicals — artwork taken directly from the approved
   reference image, keyed to alpha, so the flowers/leaves/petals/Om are the
   reference's own art rather than redrawn shapes. Hero-only class names:
   the shared .hero-bloom-cluster / #hbBlossom system stays untouched for the
   Books section. ================= */
.hero-bloom-img {
  position: absolute; pointer-events: none; z-index: 2;
  background-repeat: no-repeat; background-size: 100% 100%;
  will-change: transform;
  animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
@keyframes hb-drift-a {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  50%      { transform: translate3d(3px,-5px,0) rotate(0.7deg); }
}
@keyframes hb-drift-b {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  50%      { transform: translate3d(-4px,4px,0) rotate(-0.6deg); }
}
.hero-bloom-img.bi-tl {
  top: 0; left: 0; width: clamp(132px, 18vw, 330px); aspect-ratio: 0.8824;
  transform-origin: left top;  background-image: url("images/hero-bloom-tl.webp");
  animation-name: hb-drift-a; animation-duration: 15s;
}
.hero-bloom-img.bi-tr {
  top: 0; right: 0; width: clamp(108px, 14.5vw, 266px); aspect-ratio: 0.7333;
  transform-origin: right top; background-image: url("images/hero-bloom-tr.webp");
  animation-name: hb-drift-b; animation-duration: 17s; animation-delay: -4s;
}
.hero-bloom-img.bi-bl {
  bottom: 0; left: 0; width: clamp(132px, 18vw, 330px); aspect-ratio: 0.8427;
  transform-origin: left bottom; background-image: url("images/hero-bloom-bl.webp");
  animation-name: hb-drift-b; animation-duration: 16s; animation-delay: -7s;
}
.hero-bloom-img.bi-mr {
  top: 20%; right: 0; width: clamp(56px, 7.6vw, 140px); aspect-ratio: 0.3342;
  transform-origin: right center; background-image: url("images/hero-bloom-mr.webp");
  animation-name: hb-drift-b; animation-duration: 19s; animation-delay: -3s;
}
.hero .stat-row .stat-body { max-width: 152px; }
.hero-bloom-img.bi-br {
  bottom: 0; right: 0; width: clamp(152px, 20.5vw, 376px); aspect-ratio: 0.7844;
  transform-origin: right bottom; background-image: url("images/hero-bloom-br.webp");
  animation-name: hb-drift-a; animation-duration: 18s; animation-delay: -9s;
}
/* soft realistic drifting petals, lifted from the reference */
.hero-petal-img {
  position: absolute; top: -10%; z-index: 1; pointer-events: none;
  background-repeat: no-repeat; background-size: 100% 100%;
  animation-name: pms-petal-fall; animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; will-change: transform, opacity;
}
.hero-petal-img.pa { background-image: url("images/hero-petal-a.webp"); aspect-ratio: 1.8387; }
.hero-petal-img.pb { background-image: url("images/hero-petal-b.webp"); aspect-ratio: 1.5455; }
/* the reference's own Om glyph, as artwork rather than a system font */
.om-core .glyph.om-art {
  width: 72%; height: 72%; font-size: 0; color: transparent;
  background: url("images/om-art.webp") center/contain no-repeat;
  text-shadow: none;
  filter: drop-shadow(0 2px 3px rgba(90,10,10,0.22)) drop-shadow(0 0 18px var(--om-red-glow));
}
@media (max-width: 640px) {
  .hero-bloom-img.bi-tl, .hero-bloom-img.bi-tr { opacity: 0.92; }
}

.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--card-grad); border: 1px solid var(--line-gold); border-radius: var(--radius-lg);
  padding: 32px 26px; box-shadow: var(--shadow-card), 0 1px 0 rgba(255,246,218,0.6) inset; position: relative; overflow: hidden;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.4s ease;
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--metal-3), var(--metal-1), var(--metal-3), transparent);
  opacity: 0.55; transform: scaleX(0.7); transition: opacity 0.4s ease, transform 0.4s ease;
}
.card:hover { transform: translateY(-9px); box-shadow: var(--shadow-soft), var(--shadow-glow), 0 1px 0 rgba(255,246,218,0.6) inset; border-color: var(--gold); }
.card:hover::before { opacity: 1; transform: scaleX(1); }
.card .icon, .fc-modal .icon, .svc-modal .icon {
  position: relative; width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.5), transparent 55%), var(--gold-pale-soft);
  color: var(--gold-deep);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
  border: 1px solid var(--line-gold); box-shadow: 0 4px 14px rgba(58,17,8,0.18), 0 0 0 1px rgba(255,246,218,0.5) inset;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, color 0.35s ease;
  animation: icon-float 3.4s ease-in-out infinite, icon-glow 3.4s ease-in-out infinite;
}
.card .icon::before, .card .icon::after {
  content: ""; position: absolute; width: 11px; height: 11px; pointer-events: none;
  background: var(--metal-2);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  animation: sparkle-twinkle 2.6s ease-in-out infinite;
  filter: drop-shadow(0 0 3px var(--gold-pale-soft));
}
.card .icon::before { top: -4px; right: -3px; animation-delay: 0.2s; }
.card .icon::after { bottom: -3px; left: -4px; width: 8px; height: 8px; animation-delay: 1.3s; }
.card .icon svg, .fc-modal .icon svg, .svc-modal .icon svg { width: 28px; height: 28px; position: relative; z-index: 1; }
.grid .card:nth-child(2) .icon { animation-delay: -0.4s, -0.4s; }
.grid .card:nth-child(3) .icon { animation-delay: -0.8s, -0.8s; }
.grid .card:nth-child(4) .icon { animation-delay: -1.2s, -1.2s; }
.grid .card:nth-child(5) .icon { animation-delay: -1.6s, -1.6s; }
.grid .card:nth-child(6) .icon { animation-delay: -2.0s, -2.0s; }
.grid .card:nth-child(7) .icon { animation-delay: -2.4s, -2.4s; }
.grid .card:nth-child(8) .icon { animation-delay: -2.8s, -2.8s; }
.card:hover .icon { animation-play-state: paused; transform: scale(1.16) translateY(-4px) rotate(-6deg); box-shadow: 0 0 26px 5px var(--gold-pale-soft), 0 0 0 1px rgba(255,246,218,0.6) inset; color: var(--maroon); }
.card:hover .icon::before, .card:hover .icon::after { animation-duration: 1.1s; filter: drop-shadow(0 0 6px var(--gold-pale-soft)); }
.card::after {
  content: ""; position: absolute; inset: -20% -20% auto auto; width: 70%; height: 70%; pointer-events: none;
  background: radial-gradient(circle, var(--gold-pale-soft), transparent 70%);
  opacity: 0; transition: opacity 0.5s ease; z-index: 0;
}
.card:hover::after { opacity: 0.65; }
.card > * { position: relative; z-index: 1; }
@keyframes icon-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes icon-glow { 0%, 100% { box-shadow: 0 4px 14px rgba(58,17,8,0.18), 0 0 0 1px var(--line-gold); } 50% { box-shadow: 0 4px 14px rgba(58,17,8,0.18), 0 0 18px 3px var(--gold-pale-soft); } }
.card .icon.indigo, .fc-modal .icon.indigo, .svc-modal .icon.indigo { background: var(--indigo-soft); border-color: var(--indigo); color: var(--indigo); }
.card .icon.sky, .fc-modal .icon.sky, .svc-modal .icon.sky { background: var(--sky-soft); border-color: var(--sky); color: var(--sky); }
.card h3 { margin-bottom: 8px; }
.card p { margin-bottom: 0; font-size: 0.95rem; }

.section-head { max-width: 680px; margin: 0 auto 44px; text-align: center; }
.ornament { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; }
.ornament span { width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-deep)); }
.ornament span.r { background: linear-gradient(90deg, var(--gold-deep), transparent); }
.ornament .glyph-star { color: var(--gold-deep); font-size: 0.85rem; }
.ornament .glyph-lotus { color: var(--gold-deep); font-size: 0.95rem; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.step .num { width: 42px; height: 42px; border-radius: 50%; background: var(--maroon); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 14px; }

.cta-band .devanagari { font-family: var(--font-display); font-style: italic; color: var(--gold-light); font-size: 1.15rem; margin-bottom: 8px; }

footer.site-footer { background: var(--band-bg-b); color: var(--footer-ink); padding: 60px 0 24px; }
footer.site-footer h4 { color: #ffffff; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; }
footer.site-footer a { color: var(--footer-ink); opacity: 0.9; }
footer.site-footer a:hover { color: #ffffff; opacity: 1; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 28px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.14); }
.footer-grid .brandname { color: #ffffff; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; }
.footer-brand-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.footer-logo { width: 38px; height: 38px; flex-shrink: 0; display: block; filter: drop-shadow(0 0 8px rgba(232,199,102,0.5)); }
.footer-grid p.tagline { color: var(--footer-ink); opacity: 0.85; font-size: 0.88rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; font-size: 0.9rem; }
.social-row { display: flex; gap: 12px; margin-top: 14px; }
.social-row a {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(232,199,102,0.35);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.social-row a svg { width: 21px; height: 21px; display: block; position: relative; z-index: 1; }
.social-row a::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.4) 48%, rgba(255,255,255,0.4) 52%, transparent 70%);
  background-size: 220% 220%; background-position: -40% -40%;
  transition: background-position 0.7s ease; opacity: 0;
}
.social-row a:hover { transform: translateY(-3px) scale(1.07); border-color: var(--gold-light); background: rgba(255,255,255,0.1); box-shadow: 0 10px 24px rgba(0,0,0,0.35), 0 0 18px 2px rgba(232,199,102,0.35); }
.social-row a:hover::after { opacity: 1; background-position: 140% 140%; }
.footer-bottom { padding-top: 20px; text-align: center; font-size: 0.8rem; opacity: 0.75; }

.blog-card { display: flex; flex-direction: column; }
.blog-card .cat { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); font-weight: 700; margin-bottom: 10px; }
.blog-card details summary { cursor: pointer; font-weight: 600; color: var(--maroon); font-size: 0.88rem; list-style: none; margin-top: auto; padding-top: 12px; }
.blog-card details summary::-webkit-details-marker { display: none; }
.blog-card details[open] summary { margin-bottom: 10px; }
.blog-card details .full { font-size: 0.92rem; }

.tool-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.tool-card .tool-info { flex: 1; min-width: 240px; }

.calc-panel { background: var(--card-grad); border: 1px solid var(--line-gold); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-card), 0 1px 0 rgba(255,246,218,0.6) inset; transition: box-shadow 0.4s ease, border-color 0.4s ease; }
.calc-panel:hover { box-shadow: var(--shadow-soft), var(--shadow-glow); border-color: var(--gold); }
.calc-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; align-items: end; margin-bottom: 22px; }
.field label { display: block; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-bottom: 6px; font-weight: 600; }
.field input, .field select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-body); font-size: 0.94rem; background: var(--bg); color: var(--ink); }
.field input:focus, .field select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }

.loshu-grid { display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 64px); gap: 6px; margin: 16px 0; }
.loshu-cell { border: 1px solid var(--line); background: var(--bg-alt); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.15rem; color: var(--ink-soft); border-radius: var(--radius); padding: 4px; text-align: center; font-variant-numeric: tabular-nums; }
.loshu-cell.has-num { background: var(--gold-pale-soft); color: var(--maroon-deep); font-weight: 700; }

.result-line { display: flex; gap: 10px; align-items: baseline; margin-bottom: 9px; flex-wrap: wrap; }
.result-line .label { font-size: 0.84rem; color: var(--ink-soft); min-width: 165px; }
.result-line .value { font-family: var(--font-display); font-size: 1.35rem; color: var(--maroon); font-weight: 700; font-variant-numeric: tabular-nums; }

.review-card { text-align: center; }
.stars { color: var(--gold); font-size: 1.15rem; letter-spacing: 3px; margin-bottom: 10px; }
.small { font-size: 0.85rem; color: var(--ink-soft); }
.divider-word { text-align: center; font-family: var(--font-display); font-style: italic; color: var(--gold-deep); font-size: 1.05rem; margin-bottom: 10px; }

/* ===== Relationship & Compatibility Numerology ===== */
a.card { display: block; }
.card .icon.wine { background: var(--wine-pale-soft); border-color: var(--btn-wine-border); color: var(--maroon); }

.rel-section { position: relative; overflow: hidden; background: color-mix(in srgb, var(--bg-alt) 94%, var(--maroon) 6%); }
.rel-section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 620px 420px at 8% 0%, var(--nebula-purple), transparent 60%),
    radial-gradient(ellipse 560px 460px at 96% 100%, var(--gold-pale-soft), transparent 62%);
}
.rel-section .container { position: relative; z-index: 1; }

.rel-intro { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 52px; align-items: center; margin-bottom: 0; position: relative; z-index: 1; }

/* ===== Relationship Hero — dedicated romantic/premium panel ===== */
.rel-hero {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: calc(var(--radius-lg) + 14px);
  border: 1px solid var(--line-gold);
  box-shadow: 0 30px 70px rgba(20,4,10,0.4), 0 0 0 1px var(--line-gold) inset, 0 0 60px var(--wine-pale-soft);
  background:
    radial-gradient(ellipse 620px 420px at 8% 4%, var(--gold-pale-soft), transparent 58%),
    radial-gradient(ellipse 560px 460px at 96% 12%, var(--nebula-purple), transparent 60%),
    radial-gradient(ellipse 720px 580px at 50% 108%, var(--wine-pale-soft), transparent 62%),
    linear-gradient(160deg, var(--btn-wine-a) 0%, var(--band-bg-a) 46%, var(--band-bg-b) 100%);
  padding: 72px 56px 60px; margin-bottom: 58px;
}
.rel-hero .eyebrow, .rel-hero .lede, .rel-hero h3, .rel-hero p, .rel-hero .rel-hero-title { color: #fbe9df; }
.rel-hero .eyebrow { color: var(--gold-light); }
.rel-hero .ornament span { background: linear-gradient(90deg, transparent, var(--gold-light)); }
.rel-hero .ornament .glyph-star { color: var(--gold-light); }
.rel-hero-head { position: relative; z-index: 1; margin-bottom: 54px; }
.rel-hero-title { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.3; font-weight: 600; margin-bottom: 0; }
.rel-hero-highlight {
  display: inline-block; margin-top: 8px;
  font-size: clamp(2.3rem, 6.2vw, 4.1rem); font-weight: 700; letter-spacing: 0.015em;
  background: linear-gradient(100deg, var(--gold-light) 0%, var(--metal-1) 22%, var(--gold-light) 46%, color-mix(in srgb, var(--gold-light) 55%, var(--maroon) 45%) 70%, var(--gold-light) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px var(--gold-pale-soft));
  animation: rel-title-shimmer 7s ease-in-out infinite;
}
@keyframes rel-title-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.rel-hero-atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.rel-heart-watermark { position: absolute; width: 240px; height: auto; opacity: 0.1; animation: rel-heart-drift 24s ease-in-out infinite; }
.rel-heart-watermark.hw1 { top: -8%; left: -5%; }
.rel-heart-watermark.hw2 { bottom: -22%; right: -10%; width: 280px; animation-duration: 29s; animation-delay: -9s; }
@keyframes rel-heart-drift { 0%, 100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(10px,-14px) rotate(2deg); } }
.rel-wave-svg { position: absolute; top: 38%; left: 0; width: 100%; height: 130px; opacity: 0.16; }
.rel-wave-path { animation: rel-wave-shift 10s ease-in-out infinite; }
@keyframes rel-wave-shift { 0%, 100% { transform: translateX(0); opacity: 0.5; } 50% { transform: translateX(16px); opacity: 0.85; } }
.rel-hero-num {
  position: absolute; font-family: var(--font-display); font-weight: 700; color: var(--gold-light);
  opacity: 0.18; text-shadow: 0 0 14px var(--gold-pale-soft);
  animation-name: about-num-float; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
.rel-hero-num.hn1 { top: 10%; left: 5%; font-size: 2rem; animation-duration: 22s; --ax: 12px; --ay: -16px; --ar: 3deg; }
.rel-hero-num.hn2 { top: 84%; left: 9%; font-size: 1.6rem; animation-duration: 19s; animation-delay: -6s; --ax: -10px; --ay: -14px; --ar: -3deg; }
.rel-hero-num.hn3 { top: 12%; left: 92%; font-size: 1.8rem; animation-duration: 25s; animation-delay: -10s; --ax: -12px; --ay: 14px; --ar: 3deg; }
.rel-hero-num.hn4 { top: 55%; left: 16%; font-size: 1.5rem; animation-duration: 21s; animation-delay: -3s; --ax: 10px; --ay: -12px; --ar: -2deg; }
.rel-hero-sparkle {
  position: absolute; width: 6px; height: 6px;
  background: var(--metal-1); clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  filter: drop-shadow(0 0 5px var(--gold-pale-soft));
  animation: sparkle-twinkle 3.6s ease-in-out infinite;
}
.rel-hero-sparkle.hs1 { top: 5%; left: 15%; animation-delay: 0s; }
.rel-hero-sparkle.hs2 { top: 68%; left: 14%; animation-delay: 1.1s; }
.rel-hero-sparkle.hs3 { top: 6%; left: 85%; animation-delay: 2.2s; }
.rel-hero-sparkle.hs4 { top: 34%; left: 88%; animation-delay: 0.6s; }
.rel-hero-sparkle.hs5 { top: 5%; left: 45%; animation-delay: 1.6s; }
.rel-hero-sparkle.hs6 { top: 4%; left: 65%; animation-delay: 2.8s; }
.rel-hero-sparkle.hs7 { top: 94%; left: 10%; animation-delay: 0.3s; }
.rel-hero-sparkle.hs8 { top: 60%; left: 5%; animation-delay: 1.9s; }
.rel-hero-sparkle.hs9 { top: 45%; left: 8%; animation-delay: 2.4s; }
.rel-hero-sparkle.hs10 { top: 36%; left: 92%; animation-delay: 0.9s; }

.rel-light-trail {
  position: absolute; width: 130px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--metal-1) 45%, var(--gold-light) 55%, transparent);
  filter: drop-shadow(0 0 6px var(--gold-pale-soft));
  opacity: 0; pointer-events: none;
  animation: rel-trail-sweep 9s ease-in-out infinite;
}
@keyframes rel-trail-sweep {
  0% { opacity: 0; transform: translateX(-18px) scaleX(0.5); }
  12% { opacity: 0.6; }
  48% { opacity: 0.75; transform: translateX(40px) scaleX(1); }
  75% { opacity: 0; transform: translateX(85px) scaleX(0.5); }
  100% { opacity: 0; transform: translateX(85px) scaleX(0.5); }
}
.rel-light-trail.lt1 { top: 3%; left: 8%; animation-duration: 10s; animation-delay: 0s; }
.rel-light-trail.lt2 { top: 6%; left: 55%; width: 100px; animation-duration: 12s; animation-delay: -4s; }
.rel-light-trail.lt3 { top: 95%; left: 6%; animation-duration: 11s; animation-delay: -2s; }
.rel-light-trail.lt4 { top: 98%; left: 4%; width: 90px; animation-duration: 13.5s; animation-delay: -7s; }

/* -- Two-energy relationship visual -- */
.rel-visual-v2 { position: relative; width: 100%; max-width: 420px; margin: 0 auto; min-height: 300px; }
.rel-energy-field { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; padding: 34px 0; }
.rel-energy-orb {
  position: relative; width: 42%; aspect-ratio: 1/1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 20px 46px rgba(20,4,10,0.45), 0 0 0 1px var(--line-gold) inset, 0 0 36px var(--gold-pale-soft);
  animation: rel-orb-float 5.5s ease-in-out infinite;
}
.rel-energy-orb.a {
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.4), transparent 55%), linear-gradient(150deg, var(--gold-light) 0%, var(--metal-4) 100%);
  margin-right: -7%; z-index: 2;
}
.rel-energy-orb.b {
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.22), transparent 55%), linear-gradient(150deg, var(--btn-wine-a) 0%, var(--btn-wine-b) 100%);
  margin-left: -7%; z-index: 1; animation-delay: -2.7s;
}
@keyframes rel-orb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.rel-orb-icon { position: relative; z-index: 1; width: 56%; height: 56%; display: flex; align-items: center; justify-content: center; }
.rel-orb-icon svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rel-energy-orb.a .rel-orb-icon { color: var(--maroon-deep); filter: drop-shadow(0 1px 0 rgba(255,255,255,0.4)); }
.rel-energy-orb.b .rel-orb-icon { color: var(--metal-1); filter: drop-shadow(0 0 8px rgba(0,0,0,0.3)); }
.rel-vibe-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--gold-pale-soft); animation: rel-vibe-pulse 4.5s ease-out infinite; }
.rel-vibe-ring.r2 { animation-delay: 2.2s; }
@keyframes rel-vibe-pulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.55); opacity: 0; } }
.rel-connect { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; display: flex; align-items: center; justify-content: center; }
.rel-connect-line {
  position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; z-index: -1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,246,218,0.55), transparent 70%);
  filter: blur(7px); animation: rel-heart-pulse 2.6s ease-in-out infinite;
}
.rel-heart-spark { font-size: 1.5rem; color: var(--metal-1); text-shadow: 0 0 12px var(--gold-pale-soft), 0 0 22px rgba(255,255,255,0.5); animation: rel-heart-pulse 2.6s ease-in-out infinite; }
@keyframes rel-heart-pulse { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.2); opacity: 1; } }

.rel-bg-heart {
  position: absolute; top: 50%; left: 50%; z-index: -1;
  width: 74%; max-width: 300px; color: var(--metal-1); opacity: 0.16;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 26px var(--gold-pale-soft));
  animation: rel-heartbeat 4.6s ease-in-out infinite; pointer-events: none;
}
.rel-bg-heart svg { width: 100%; height: auto; display: block; }
@keyframes rel-heartbeat {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.14; }
  14% { transform: translate(-50%, -50%) scale(1.07); opacity: 0.22; }
  28% { transform: translate(-50%, -50%) scale(1); opacity: 0.14; }
  42% { transform: translate(-50%, -50%) scale(1.11); opacity: 0.25; }
  58% { transform: translate(-50%, -50%) scale(1); opacity: 0.14; }
}
.rel-drift { position: absolute; inset: -6% -4%; z-index: 0; pointer-events: none; }
.rel-drift-num {
  position: absolute; font-family: var(--font-display); font-weight: 700; color: var(--gold-light);
  opacity: 0.3; text-shadow: 0 0 12px var(--gold-pale-soft);
  animation-name: about-num-float; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
.rel-drift-num.d1 { top: 4%; left: 8%; font-size: 1.6rem; animation-duration: 16s; --ax: 10px; --ay: -14px; --ar: 3deg; }
.rel-drift-num.d2 { top: 80%; left: 4%; font-size: 1.3rem; animation-duration: 19s; animation-delay: -5s; --ax: -8px; --ay: -12px; --ar: -3deg; }
.rel-drift-num.d3 { top: 8%; left: 88%; font-size: 1.4rem; animation-duration: 17s; animation-delay: -9s; --ax: -10px; --ay: 12px; --ar: 3deg; }
.rel-drift-num.d4 { top: 82%; left: 92%; font-size: 1.3rem; animation-duration: 20s; animation-delay: -12s; --ax: -10px; --ay: -12px; --ar: -3deg; }
.rel-drift-num.d5 { top: 44%; left: 97%; font-size: 1.2rem; animation-duration: 18s; animation-delay: -3s; --ax: 8px; --ay: 10px; --ar: 2deg; }
.rel-drift-heart { position: absolute; color: var(--metal-1); opacity: 0.4; font-size: 1.1rem; text-shadow: 0 0 10px var(--gold-pale-soft); animation-name: about-num-float; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.rel-drift-heart.dh1 { top: 66%; left: 86%; font-size: 1rem; animation-duration: 15s; --ax: -8px; --ay: -10px; --ar: 0deg; }
.rel-drift-heart.dh2 { top: 16%; left: 46%; font-size: 0.85rem; opacity: 0.3; animation-duration: 18s; animation-delay: -6s; --ax: 6px; --ay: 10px; --ar: 0deg; }
.rel-drift-sparkle {
  position: absolute; width: 6px; height: 6px;
  background: var(--metal-1); clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  filter: drop-shadow(0 0 5px var(--gold-pale-soft));
  animation: sparkle-twinkle 3.2s ease-in-out infinite;
}
.rel-drift-sparkle.ds1 { top: 2%; left: 42%; animation-delay: 0s; }
.rel-drift-sparkle.ds2 { top: 88%; left: 58%; animation-delay: 1.2s; }
.rel-drift-sparkle.ds3 { top: 44%; left: 2%; animation-delay: 2.1s; }
.rel-drift-sparkle.ds4 { top: 12%; left: 60%; animation-delay: 1.6s; }

.rel-intro-content .btn { margin-top: 8px; }

.rel-checker {
  position: relative; overflow: hidden; margin-bottom: 60px;
  background: linear-gradient(160deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 84%, var(--maroon)) 100%);
  border: 1px solid var(--line-gold); box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-gold);
}
.rel-checker::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--btn-wine-a), var(--gold), var(--btn-wine-a));
}
.rel-checker-head { max-width: 560px; margin: 0 auto 28px; text-align: center; }
.rel-checker-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: center; margin-bottom: 24px; }
.rel-person h4 { font-family: var(--font-display); color: var(--maroon-deep); font-size: 1.08rem; margin: 0 0 12px; }
.rel-person .field { margin-bottom: 14px; }
.rel-person .field:last-child { margin-bottom: 0; }
.rel-checker .field input { padding: 13px 14px; font-size: 1rem; }
.rel-connector { display: flex; align-items: center; justify-content: center; color: var(--gold-deep); font-size: 1.6rem; font-family: var(--font-display); }
.rel-check-btn { display: block; width: 100%; max-width: 360px; margin: 4px auto 14px; justify-content: center; }
.rel-disclaimer { text-align: center; max-width: 560px; margin: 0 auto; font-style: italic; }

.rel-result { margin-top: 34px; padding-top: 30px; border-top: 1px dashed var(--line-gold); text-align: center; }
.rel-meter { position: relative; width: 176px; height: 176px; margin: 0 auto 18px; }
.rel-meter svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rel-meter .meter-track { fill: none; stroke: var(--gold-pale-soft); stroke-width: 10; }
.rel-meter .meter-fill { fill: none; stroke: url(#relMeterGrad); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1); }
.rel-meter .meter-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rel-meter .meter-score { font-family: var(--font-display); font-size: 2.3rem; font-weight: 700; color: var(--maroon-deep); line-height: 1; font-variant-numeric: tabular-nums; }
.rel-meter .meter-tag { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-top: 4px; }
.rel-tier { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--maroon-deep); margin: 0 0 18px; letter-spacing: 0.01em; }
.rel-numbers { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 0 0 22px; }
.rel-numbers .rn-person { font-size: 0.86rem; color: var(--ink-soft); background: rgba(255,255,255,0.14); border: 1px solid rgba(124,15,46,0.10); border-radius: 12px; padding: 12px 20px; min-width: 168px; text-align: left; }
.rel-numbers .rn-person strong { display: block; font-family: var(--font-display); color: var(--maroon-deep); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; font-weight: 700; text-align: center; }
.rel-numbers .rn-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 3px 0; }
.rel-numbers .rn-label { font-size: 0.78rem; color: var(--ink-soft); }
.rel-numbers .rn-val { font-family: var(--font-display); font-weight: 700; color: var(--maroon); font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.rel-insight { max-width: 560px; margin: 0 auto 22px; font-size: 1.02rem; }
.rel-insight strong { color: var(--maroon); }
.rel-personal-cta { margin-bottom: 26px; }
.rel-personal-cta p { font-family: var(--font-display); font-size: 1.15rem; color: var(--maroon-deep); margin-bottom: 14px; }
.rel-share p { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 12px; }
.rel-share-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.rel-share-row .btn { font-size: 0.86rem; padding: 11px 22px; }
.rel-copy-note { display: inline-block; margin-left: 10px; font-size: 0.82rem; color: var(--gold-deep); font-weight: 600; opacity: 0; transition: opacity 0.3s ease; }
.rel-copy-note.show { opacity: 1; }

/* ---- Compatibility Tool: premium relationship redesign ---- */
#rel-checker {
  position: relative;
  isolation: isolate;
  padding: 46px 38px 42px;
  border-radius: 24px;
  background:
    radial-gradient(ellipse 58% 55% at 10% 6%, rgba(232, 150, 175, 0.18), transparent 65%),
    radial-gradient(ellipse 52% 50% at 94% 10%, rgba(184, 57, 90, 0.14), transparent 62%),
    radial-gradient(ellipse 58% 52% at 90% 98%, rgba(122, 16, 48, 0.12), transparent 60%),
    radial-gradient(ellipse 46% 40% at 4% 96%, rgba(232, 199, 102, 0.20), transparent 60%),
    linear-gradient(160deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 80%, var(--maroon)) 100%);
  box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-gold), 0 0 70px rgba(184, 57, 90, 0.10);
}
#rel-checker::before { height: 3px; opacity: 0.9; }

.relc-atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.rel-checker-head, #rel-form, #rel-result { position: relative; z-index: 1; }

.relc-glow { position: absolute; border-radius: 50%; filter: blur(1px); }
.relc-glow.g1 { width: 230px; height: 230px; top: -80px; left: -70px; background: radial-gradient(circle, rgba(232,150,175,0.24), transparent 70%); animation: glow-pulse 8s ease-in-out infinite; }
.relc-glow.g2 { width: 260px; height: 260px; bottom: -95px; right: -75px; background: radial-gradient(circle, rgba(184,134,11,0.22), transparent 70%); animation: glow-pulse 9.5s ease-in-out infinite; animation-delay: -3.5s; }

.relc-orbit-ring { position: absolute; top: 50%; left: 50%; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%; border: 1px solid rgba(124,15,46,0.12); animation: ring-spin-cw 160s linear infinite; }

.relc-line-svg { position: absolute; top: 8%; left: 8%; width: 84%; height: 26%; opacity: 0.10; }
.relc-line-svg path { stroke-dasharray: 4 9; animation: svc-line-flow 22s linear infinite; }

.relc-num { position: absolute; font-family: var(--font-display); font-weight: 700; opacity: 0.15; animation-name: about-num-float; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.relc-num.n1 { top: 9%; left: 4%; font-size: 1.5rem; color: var(--gold-deep); animation-duration: 9s; --ax: 10px; --ay: -14px; }
.relc-num.n2 { top: 13%; right: 4.5%; font-size: 1.15rem; color: var(--maroon); animation-duration: 11s; animation-delay: -3s; --ax: -8px; --ay: -12px; }
.relc-num.n3 { bottom: 11%; left: 5%; font-size: 1.25rem; color: var(--maroon); animation-duration: 10s; animation-delay: -5s; --ax: 8px; --ay: 12px; }
.relc-num.n4 { bottom: 9%; right: 5%; font-size: 1.55rem; color: var(--gold-deep); animation-duration: 12s; animation-delay: -1.5s; --ax: -10px; --ay: 14px; }

.relc-speck { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 8px 2px rgba(232,150,175,0.5); animation: sparkle-twinkle 5s ease-in-out infinite; }
.relc-speck.s1 { top: 22%; left: 47%; animation-delay: 0s; }
.relc-speck.s2 { top: 68%; left: 53%; animation-delay: 1.4s; }
.relc-speck.s3 { top: 42%; left: 3%; animation-delay: 2.3s; }
.relc-speck.s4 { top: 58%; left: 96%; animation-delay: 0.8s; }

.rel-checker-head .eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--maroon); }
.rel-checker-head .eyebrow::before, .rel-checker-head .eyebrow::after { content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-deep)); }
.rel-checker-head .eyebrow::after { background: linear-gradient(90deg, var(--gold-deep), transparent); }
.rel-checker-head h2 { color: var(--maroon-deep); }
.rel-checker-head h2::after { content: ""; display: block; width: 46px; height: 2px; margin: 14px auto 0; background: linear-gradient(90deg, transparent, var(--btn-wine-a), var(--gold), transparent); opacity: 0.75; }
.rel-checker-head .small { color: var(--ink-soft); }

.rel-person { padding: 18px 18px 6px; border-radius: 16px; background: rgba(255,255,255,0.10); border: 1px solid rgba(124,15,46,0.08); transition: border-color 0.35s ease, background 0.35s ease; }
.rel-person:hover { border-color: rgba(124,15,46,0.18); background: rgba(255,255,255,0.16); }
.rel-person h4 { display: flex; align-items: center; gap: 9px; }
.rel-person h4::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.rel-person:first-child h4::before { background: radial-gradient(circle at 35% 30%, #fff, var(--gold-light) 55%, var(--gold-deep)); box-shadow: 0 0 8px rgba(232,199,102,0.6); }
.rel-person:last-child h4::before { background: radial-gradient(circle at 35% 30%, #fff, var(--maroon) 55%, var(--maroon-deep)); box-shadow: 0 0 8px rgba(124,15,46,0.5); }

.relc-connect { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.relc-connect-orb { width: 13px; height: 13px; border-radius: 50%; flex: none; animation: rel-orb-float 4.2s ease-in-out infinite; }
.relc-connect-orb.a { background: radial-gradient(circle at 35% 30%, #fff, var(--gold-light) 55%, var(--gold-deep)); box-shadow: 0 0 10px rgba(232,199,102,0.55); }
.relc-connect-orb.b { background: radial-gradient(circle at 35% 30%, #fff, var(--maroon) 55%, var(--maroon-deep)); box-shadow: 0 0 10px rgba(124,15,46,0.45); animation-delay: -2.1s; }
.relc-connect-line-seg { width: 1px; height: 24px; }
.relc-connect-line-seg.top { background: linear-gradient(180deg, var(--gold-deep), transparent); }
.relc-connect-line-seg.bottom { background: linear-gradient(180deg, transparent, var(--maroon)); }
.relc-connect-spark { font-size: 1.35rem; line-height: 1; color: var(--metal-1); text-shadow: 0 0 10px var(--gold-pale-soft), 0 0 18px rgba(184,57,90,0.4); animation: rel-heart-pulse 2.8s ease-in-out infinite; }

#rel-checker .field input {
  border: 1px solid var(--line-gold);
  border-radius: 10px;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 2px 8px rgba(43,23,16,0.08);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
#rel-checker .field input:hover { border-color: var(--gold); }
#rel-checker .field input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184,57,90,0.22), 0 0 16px rgba(184,134,11,0.26), 0 1px 0 rgba(255,255,255,0.35) inset;
}

.rel-check-btn {
  background: linear-gradient(135deg, #f6ddd0 0%, var(--metal-2) 30%, var(--gold-light) 55%, #e8a9bb 80%, var(--metal-4) 100%);
  box-shadow: var(--shadow-soft), 0 0 0 1px var(--metal-4) inset, 0 0 26px rgba(184,57,90,0.22), 0 1px 0 rgba(255,255,255,0.6) inset;
  font-size: 1.02rem;
}
.rel-check-btn:hover { box-shadow: var(--shadow-soft), 0 0 0 1px var(--metal-1) inset, 0 0 34px rgba(184,57,90,0.3), 0 1px 0 rgba(255,255,255,0.7) inset; }
.rel-check-btn:active { transform: translateY(-1px) scale(0.98); }
.rel-check-btn::before {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; z-index: 1; pointer-events: none;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg); animation: about-cta-shimmer 5s ease-in-out infinite;
}

.rel-disclaimer {
  margin-top: 18px; padding: 10px 20px; border-radius: 14px;
  background: rgba(124,15,46,0.06); border: 1px solid rgba(124,15,46,0.12);
  font-size: 0.82rem;
}
.rel-disclaimer::before { content: "✦  "; color: var(--gold-deep); font-style: normal; }

.rel-name-note {
  text-align: center; max-width: 560px; margin: 0 auto 18px; font-size: 0.82rem;
  color: var(--maroon-deep); opacity: 0.85;
}
.rel-name-note::before { content: "✎  "; color: var(--gold-deep); font-style: normal; }

.rel-validation-msg {
  margin-top: 18px; padding: 10px 20px; border-radius: 14px;
  background: rgba(184,57,90,0.08); border: 1px solid rgba(184,57,90,0.24);
  font-size: 0.86rem; text-align: center; color: var(--maroon-deep); font-weight: 600;
}
.rel-validation-msg::before { content: "⚠  "; color: var(--maroon); font-style: normal; }

@keyframes relc-result-reveal {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
#rel-result { animation: relc-result-reveal 0.7s cubic-bezier(.2,.8,.2,1) both; }

/* ===== Consultations & Pricing: celestial numerology redesign ===== */
.consult-section {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 60% 50% at 14% 8%, rgba(122, 16, 48, 0.28), transparent 62%),
    radial-gradient(ellipse 55% 55% at 88% 14%, rgba(232, 199, 102, 0.12), transparent 62%),
    radial-gradient(ellipse 65% 55% at 50% 102%, rgba(90, 40, 120, 0.24), transparent 65%),
    linear-gradient(165deg, #0c0e29 0%, #1a1140 30%, #2c1240 56%, #3a0e22 82%, #1a0812 100%);
}
.consult-section .container { position: relative; z-index: 1; }
.consult-section .section-head .eyebrow { color: var(--gold-light); }
.consult-section .ornament span { background: linear-gradient(90deg, transparent, var(--gold-light)); }
.consult-section .ornament span.r { background: linear-gradient(90deg, var(--gold-light), transparent); }
.consult-section .ornament .glyph-star { color: var(--gold-light); }
.consult-section .section-head h2 { color: #fdeedd; text-shadow: 0 0 28px rgba(232,199,102,0.35); }
.consult-section .lede { color: #e7d9ec; }
.consult-section .consult-steps .step h3 { color: #fdeedd; }
.consult-section .consult-steps .step p { color: #c9b8d6; }
.consult-info { text-align: center; color: #d8c3a5; font-size: 0.92rem; max-width: 56ch; margin: 26px auto 0; }

.consult-atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.consult-nebula { position: absolute; border-radius: 50%; filter: blur(2px); }
.consult-nebula.n1 { width: 380px; height: 380px; top: -140px; left: -120px; background: radial-gradient(circle, rgba(122,16,48,0.35), transparent 70%); animation: glow-pulse 11s ease-in-out infinite; }
.consult-nebula.n2 { width: 420px; height: 420px; bottom: -160px; right: -140px; background: radial-gradient(circle, rgba(90,40,120,0.30), transparent 70%); animation: glow-pulse 13s ease-in-out infinite; animation-delay: -5s; }

.consult-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(232,199,102,0.14); }
.consult-orbit.o1 { width: 480px; height: 480px; top: 50%; left: 18%; margin: -240px 0 0 -240px; animation: ring-spin-cw 200s linear infinite; }
.consult-orbit.o2 { width: 360px; height: 360px; top: 50%; right: 10%; margin-top: -180px; border-color: rgba(199,150,220,0.14); animation: ring-spin-ccw 170s linear infinite; }

.consult-star { position: absolute; color: var(--gold-light); font-size: 0.72rem; opacity: 0; animation: sparkle-twinkle 5s ease-in-out infinite; }
.consult-star.s1 { top: 8%; left: 1.5%; animation-delay: 0s; }
.consult-star.s2 { top: 14%; right: 1.5%; animation-delay: 1.1s; font-size: 0.5rem; }
.consult-star.s3 { top: 22%; right: 1.8%; animation-delay: 2.2s; }
.consult-star.s4 { top: 40%; left: 1.5%; animation-delay: 3.1s; font-size: 0.55rem; }
.consult-star.s5 { top: 60%; right: 1.5%; animation-delay: 0.7s; }
.consult-star.s6 { bottom: 14%; left: 1.8%; animation-delay: 1.8s; font-size: 0.55rem; }
.consult-star.s7 { bottom: 10%; right: 1.5%; animation-delay: 2.6s; }
.consult-star.s8 { top: 30%; left: 1.8%; animation-delay: 3.6s; font-size: 0.5rem; }

.consult-particle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 8px 2px rgba(232,199,102,0.5); animation: sparkle-twinkle 6s ease-in-out infinite; }
.consult-particle.p1 { top: 22%; right: 1.6%; animation-delay: 0.4s; }
.consult-particle.p2 { top: 50%; left: 1.5%; animation-delay: 2.1s; }
.consult-particle.p3 { top: 74%; right: 1.8%; animation-delay: 3.4s; }
.consult-particle.p4 { top: 18%; left: 1.8%; animation-delay: 1.6s; }

.consult-num { position: absolute; font-family: var(--font-display); font-weight: 700; opacity: 0.14; color: var(--gold-light); animation-name: about-num-float; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.consult-num.num1 { top: 10%; left: 1.5%; font-size: 1.6rem; animation-duration: 10s; --ax: 10px; --ay: -14px; }
.consult-num.num2 { top: 16%; right: 1.5%; font-size: 1.3rem; animation-duration: 12s; animation-delay: -4s; --ax: -9px; --ay: -10px; color: #d9a9c9; }
.consult-num.num3 { bottom: 12%; left: 1.5%; font-size: 1.4rem; animation-duration: 11s; animation-delay: -6s; --ax: 8px; --ay: 12px; }
.consult-num.num4 { bottom: 16%; right: 1.5%; font-size: 1.7rem; animation-duration: 13s; animation-delay: -2s; --ax: -10px; --ay: 14px; color: #d9a9c9; }

.consult-trail { position: absolute; width: 1px; height: 90px; background: linear-gradient(180deg, transparent, rgba(232,199,102,0.4), transparent); opacity: 0.5; animation: sparkle-twinkle 8s ease-in-out infinite; }
.consult-trail.t1 { top: 4%; left: 55%; transform: rotate(18deg); animation-delay: 1s; }
.consult-trail.t2 { bottom: 6%; right: 22%; transform: rotate(-14deg); animation-delay: 3.5s; }

.consult-grid { display: grid; grid-template-columns: 0.86fr 1.12fr 1fr; gap: 22px; align-items: stretch; }
.consult-card {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(165deg, #fff8ec 0%, #f3e2b8 100%);
  border: 1px solid rgba(232,199,102,0.55); border-radius: 18px; padding: 28px 22px;
  box-shadow: 0 18px 40px rgba(8,4,26,0.4), 0 0 0 1px rgba(255,255,255,0.4) inset;
  color: #3a1f10; transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.consult-card::before {
  content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--tier-a1, #e8c766), var(--tier-a2, #b8860b));
}
.consult-card:hover { transform: translateY(-8px); box-shadow: 0 26px 54px rgba(8,4,26,0.5), 0 0 0 1px rgba(255,255,255,0.5) inset, 0 0 34px rgba(232,199,102,0.28); border-color: var(--gold-light); }
.consult-card h3 { color: #4a0916; font-size: 1.18rem; margin-bottom: 2px; }
.consult-card .consult-amount { font-family: var(--font-display); font-weight: 700; font-size: 2.5rem; color: #7c0f2e; margin: 8px 0 2px; font-variant-numeric: tabular-nums; line-height: 1; }
.consult-card .consult-period { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: #8a6a52; margin-bottom: 14px; }
.consult-card .consult-desc { font-size: 0.9rem; color: #5a4432; margin-bottom: 16px; }
.consult-card ul { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.consult-card li { padding: 7px 0; border-bottom: 1px dashed rgba(124,15,46,0.18); font-size: 0.88rem; display: flex; gap: 8px; color: #4a3020; }
.consult-card li:last-child { border-bottom: none; }
.consult-card li::before { content: "✦"; color: var(--gold-deep); flex-shrink: 0; }
.consult-card .btn { justify-content: center; margin-top: auto; }

.consult-card.tier-ask { --tier-a1: #e8a9bb; --tier-a2: #e8c766; padding: 24px 20px; }
.consult-card.tier-ask h3 { font-size: 1.05rem; }
.consult-card.tier-ask .consult-amount { font-size: 1.85rem; color: #8a2444; }
.consult-card.tier-standard { --tier-a1: #b8860b; --tier-a2: #8a2444; border-width: 1.5px; box-shadow: 0 22px 48px rgba(8,4,26,0.45), 0 0 0 1px rgba(255,255,255,0.45) inset, 0 0 30px rgba(232,199,102,0.22); }
.consult-card.tier-standard .consult-amount { color: #6e1530; }
.consult-card.tier-standard:hover { transform: translateY(-10px); }
.consult-card.tier-premium { --tier-a1: #7c0f2e; --tier-a2: #e8c766; background: linear-gradient(165deg, #fdf3de 0%, #ecd3a0 100%); }
.consult-card.tier-premium .consult-amount { color: #5c1128; }

.consult-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--btn-wine-a), var(--btn-wine-b)); color: var(--gold-light);
  border: 1px solid var(--gold-deep); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 5px 14px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}

.consult-card .consult-btn { position: relative; overflow: hidden; isolation: isolate; }
.consult-card .consult-btn::before {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; z-index: 1; pointer-events: none;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg); animation: about-cta-shimmer 6s ease-in-out infinite;
}

.consult-notsure {
  margin: 40px auto 0; max-width: 560px; text-align: center; padding: 24px 30px;
  border-radius: 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(232,199,102,0.25);
}
.consult-notsure-title { font-family: var(--font-display); font-size: 1.15rem; color: #fdeedd; margin-bottom: 6px; }
.consult-notsure-sub { font-size: 0.9rem; color: #d8c3a5; margin-bottom: 18px; }
.consult-notsure-btn {
  background: rgba(124,15,46,0.35); border-color: rgba(232,199,102,0.5); color: #fdeedd;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.consult-notsure-btn:hover { box-shadow: 0 0 0 1px rgba(232,199,102,0.4) inset, 0 0 22px rgba(232,150,175,0.22); border-color: var(--gold-light); }

@media (max-width: 920px) {
  .consult-grid { grid-template-columns: repeat(2, 1fr); }
  .consult-card.tier-standard { order: -1; grid-column: span 2; }
}
@media (max-width: 780px) {
  .consult-grid { grid-template-columns: 1fr; }
  .consult-card.tier-standard { grid-column: auto; order: 0; }
  .consult-orbit, .consult-trail, .consult-num, .consult-star, .consult-particle { display: none; }
  .consult-nebula.n1 { width: 220px; height: 220px; }
  .consult-nebula.n2 { width: 240px; height: 240px; }
}

/* ===== Masters Numerology Course: premium celestial-academy redesign ===== */
.mnc-section {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 58% 48% at 88% 8%, rgba(90, 40, 120, 0.24), transparent 62%),
    radial-gradient(ellipse 50% 50% at 6% 12%, rgba(232, 199, 102, 0.10), transparent 58%),
    radial-gradient(ellipse 60% 50% at 50% 104%, rgba(122, 16, 48, 0.16), transparent 65%),
    linear-gradient(165deg, #070a22 0%, #0f1640 26%, #1a2456 50%, #241a48 76%, #150b26 100%);
}
.mnc-section .container { position: relative; z-index: 1; }
.mnc-section .section-head .eyebrow { color: var(--gold-light); }
.mnc-section .ornament span { background: linear-gradient(90deg, transparent, var(--gold-light)); }
.mnc-section .ornament span.r { background: linear-gradient(90deg, var(--gold-light), transparent); }
.mnc-section .ornament .glyph-star { color: var(--gold-light); }
.mnc-section .section-head h2 { color: #fdeedd; text-shadow: 0 0 28px rgba(232,199,102,0.32); }
.mnc-section .lede { color: #d9d3ec; }

.mnc-atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.mnc-nebula { position: absolute; border-radius: 50%; filter: blur(2px); }
.mnc-nebula.n1 { width: 400px; height: 400px; top: -150px; right: -110px; background: radial-gradient(circle, rgba(90,40,120,0.32), transparent 70%); animation: glow-pulse 12s ease-in-out infinite; }
.mnc-nebula.n2 { width: 360px; height: 360px; bottom: -140px; left: -120px; background: radial-gradient(circle, rgba(122,16,48,0.22), transparent 70%); animation: glow-pulse 14s ease-in-out infinite; animation-delay: -6s; }

.mnc-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(232,199,102,0.13); }
.mnc-orbit.o1 { width: 500px; height: 500px; top: 8%; right: 6%; animation: ring-spin-cw 210s linear infinite; }
.mnc-orbit.o2 { width: 320px; height: 320px; bottom: 4%; left: 8%; border-color: rgba(199,150,220,0.13); animation: ring-spin-ccw 175s linear infinite; }

.mnc-constellation { position: absolute; top: 6%; left: 2%; width: 220px; height: 220px; opacity: 0.4; }
.mnc-constellation.right { left: auto; right: 2%; top: auto; bottom: 6%; }

.mnc-star { position: absolute; color: var(--gold-light); font-size: 0.7rem; opacity: 0; animation: sparkle-twinkle 5s ease-in-out infinite; }
.mnc-star.s1 { top: 10%; left: 1.5%; animation-delay: 0s; }
.mnc-star.s2 { top: 18%; right: 1.6%; animation-delay: 1.2s; font-size: 0.5rem; }
.mnc-star.s3 { top: 34%; right: 1.8%; animation-delay: 2.4s; }
.mnc-star.s4 { top: 50%; left: 1.5%; animation-delay: 3.2s; font-size: 0.55rem; }
.mnc-star.s5 { bottom: 26%; right: 1.5%; animation-delay: 0.8s; }
.mnc-star.s6 { bottom: 16%; left: 1.8%; animation-delay: 1.9s; font-size: 0.55rem; }
.mnc-star.s7 { bottom: 8%; right: 1.6%; animation-delay: 2.8s; }
.mnc-star.s8 { top: 66%; left: 1.6%; animation-delay: 3.7s; font-size: 0.5rem; }

.mnc-particle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 8px 2px rgba(232,199,102,0.5); animation: sparkle-twinkle 6.2s ease-in-out infinite; }
.mnc-particle.p1 { top: 24%; left: 1.7%; animation-delay: 0.5s; }
.mnc-particle.p2 { top: 58%; right: 1.6%; animation-delay: 2.3s; }
.mnc-particle.p3 { bottom: 20%; left: 1.6%; animation-delay: 3.6s; }
.mnc-particle.p4 { top: 14%; right: 1.8%; animation-delay: 1.7s; }

.mnc-num { position: absolute; font-family: var(--font-display); font-weight: 700; opacity: 0.13; color: var(--gold-light); animation-name: about-num-float; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.mnc-num.num1 { top: 8%; left: 1.5%; font-size: 1.6rem; animation-duration: 10s; --ax: 10px; --ay: -14px; }
.mnc-num.num2 { top: 14%; right: 1.5%; font-size: 1.3rem; animation-duration: 12s; animation-delay: -4s; --ax: -9px; --ay: -10px; color: #c9a9d9; }
.mnc-num.num3 { bottom: 10%; left: 1.5%; font-size: 1.4rem; animation-duration: 11s; animation-delay: -6s; --ax: 8px; --ay: 12px; }
.mnc-num.num4 { bottom: 14%; right: 1.5%; font-size: 1.7rem; animation-duration: 13s; animation-delay: -2s; --ax: -10px; --ay: 14px; color: #c9a9d9; }

.mnc-trail { position: absolute; width: 1px; height: 90px; background: linear-gradient(180deg, transparent, rgba(232,199,102,0.4), transparent); opacity: 0.5; animation: sparkle-twinkle 8s ease-in-out infinite; }
.mnc-trail.t1 { top: 5%; left: 50%; transform: rotate(16deg); animation-delay: 1s; }
.mnc-trail.t2 { bottom: 8%; right: 44%; transform: rotate(-14deg); animation-delay: 3.2s; }

.mnc-page { position: absolute; width: 22px; height: 28px; border: 1px solid rgba(232,199,102,0.22); border-radius: 2px; opacity: 0.3; animation: glow-pulse 9s ease-in-out infinite; }
.mnc-page::before { content: ""; position: absolute; inset: 4px 5px; border-top: 1px solid rgba(232,199,102,0.22); border-bottom: 1px solid rgba(232,199,102,0.22); }
.mnc-page.pg1 { top: 12%; left: 46%; animation-delay: -3s; }
.mnc-page.pg2 { bottom: 30%; right: 3%; animation-delay: -6s; }

.mnc-featured { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 54px; align-items: center; margin-top: 46px; }

.mnc-visual { position: relative; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
.mnc-wheel-glow {
  position: absolute; inset: 6%; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,199,102,0.16) 0%, transparent 68%);
  animation: glow-pulse 7s ease-in-out infinite;
}
.mnc-wheel-ring-outer {
  position: absolute; inset: 2%; border-radius: 50%;
  border: 1px solid rgba(232,199,102,0.22);
  animation: ring-spin-ccw 90s linear infinite;
}
.mnc-wheel-ring-outer::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px dashed rgba(199,150,220,0.2); }
.mnc-master { position: absolute; font-family: var(--font-display); font-weight: 700; font-size: clamp(0.85rem, 1.4vw, 1.05rem); color: var(--gold-light); opacity: 0.7; text-shadow: 0 0 10px rgba(232,199,102,0.4); }
.mnc-master.m11 { top: 4%; left: 50%; transform: translateX(-50%); }
.mnc-master.m22 { bottom: 12%; right: 6%; }
.mnc-master.m33 { bottom: 12%; left: 6%; }

.mnc-wheel { position: relative; width: 0; height: 0; animation: ring-spin-cw 110s linear infinite; }
.mnc-wheel .slot { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.mnc-wheel .num {
  display: inline-block; animation: ring-spin-ccw 110s linear infinite;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 1.7vw, 1.2rem);
  color: #fdeedd; opacity: 0.85; line-height: 1;
  text-shadow: 0 0 12px rgba(232,199,102,0.5);
}
.mnc-wheel-core {
  position: relative; z-index: 2; width: 44%; aspect-ratio: 1/1; border-radius: 50%;
  background: linear-gradient(155deg, #2a1f52 0%, #1a2456 55%, #150b26 100%);
  border: 2px solid var(--gold-light);
  box-shadow: 0 0 0 1px rgba(232,199,102,0.2), 0 0 44px rgba(232,199,102,0.28), 0 18px 40px rgba(8,4,26,0.5);
  display: flex; align-items: center; justify-content: center;
  animation: mnc-core-breathe 4.5s ease-in-out infinite;
}
@keyframes mnc-core-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(232,199,102,0.2), 0 0 34px rgba(232,199,102,0.24), 0 18px 40px rgba(8,4,26,0.5); }
  50% { box-shadow: 0 0 0 1px rgba(232,199,102,0.32), 0 0 52px rgba(232,199,102,0.38), 0 18px 40px rgba(8,4,26,0.5); }
}
.mnc-book-icon { width: 46%; height: 46%; }
.mnc-book-icon path { fill: none; stroke: var(--gold-light); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mnc-book-icon .spine { stroke: var(--gold-light); opacity: 0.6; }

.mnc-card {
  position: relative; background: linear-gradient(165deg, #fff8ec 0%, #f3e2b8 100%);
  border: 1px solid rgba(232,199,102,0.55); border-radius: 22px; padding: 40px 40px 36px;
  box-shadow: 0 24px 54px rgba(8,4,26,0.45), 0 0 0 1px rgba(255,255,255,0.4) inset, 0 0 40px rgba(232,199,102,0.14);
  color: #3a1f10;
}
.mnc-card::before {
  content: ""; position: absolute; top: 0; left: 32px; right: 32px; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #e8c766, #7c0f2e, #e8c766);
}
.mnc-kicker {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-deep); background: rgba(184,134,11,0.12); border: 1px solid rgba(184,134,11,0.3);
  padding: 4px 12px; border-radius: 999px; margin-bottom: 14px;
}
.mnc-title { font-size: clamp(2rem, 3vw, 2.6rem); color: #4a0916; line-height: 1.05; margin-bottom: 2px; }
.mnc-subtitle { font-size: 1.02rem; color: #8a1435; font-style: italic; font-family: var(--font-display); margin-bottom: 20px; }

.mnc-price-block { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.mnc-price { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.3rem, 4vw, 3rem); color: #7c0f2e; line-height: 1; }
.mnc-emi-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: #fdeedd; background: linear-gradient(135deg, var(--btn-wine-a), var(--btn-wine-b)); border: 1px solid var(--gold-deep);
  padding: 6px 13px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,0.22);
}
.mnc-meta { font-size: 0.9rem; color: #6b4a2e; text-transform: uppercase; letter-spacing: 0.05em; margin: 10px 0 20px; }

.mnc-desc { font-size: 0.98rem; color: #4a3020; margin-bottom: 8px; line-height: 1.55; }
.mnc-desc-sub { font-size: 0.88rem; color: #7a5b40; margin-bottom: 22px; line-height: 1.5; }

.mnc-benefits { list-style: none; padding: 0; margin: 0 0 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.mnc-benefits li { padding: 6px 0; font-size: 0.88rem; display: flex; gap: 8px; color: #4a3020; }
.mnc-benefits li::before { content: "✓"; color: #7c0f2e; font-weight: 700; flex-shrink: 0; }

.mnc-included { border-top: 1px dashed rgba(124,15,46,0.22); padding-top: 20px; margin-bottom: 26px; }
.mnc-inc-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8a6a52; margin-bottom: 14px; }
.mnc-inc-row { display: flex; gap: 22px; flex-wrap: wrap; }
.mnc-inc-item { display: flex; align-items: center; gap: 9px; font-size: 0.85rem; color: #4a3020; font-weight: 600; }
.mnc-inc-item svg { width: 22px; height: 22px; flex-shrink: 0; }
.mnc-inc-item svg path, .mnc-inc-item svg circle, .mnc-inc-item svg rect { stroke: #7c0f2e; }

.mnc-cta { width: 100%; justify-content: center; font-size: 1rem; padding: 16px 30px; position: relative; overflow: hidden; isolation: isolate; }
.mnc-cta::before {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; z-index: 1; pointer-events: none;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg); animation: about-cta-shimmer 6s ease-in-out infinite;
}
.mnc-cta:hover .cta-arrow { transform: translateX(5px); }
.mnc-cta-sub { text-align: center; font-size: 0.8rem; color: #8a6a52; margin-top: 10px; }

@media (max-width: 1024px) {
  .mnc-featured { grid-template-columns: 1fr; }
  .mnc-visual { display: none; }
}
@media (max-width: 780px) {
  .mnc-card { padding: 30px 22px 28px; }
  .mnc-benefits { grid-template-columns: 1fr; }
  .mnc-inc-row { flex-direction: column; gap: 12px; }
  .mnc-orbit, .mnc-trail, .mnc-num, .mnc-star, .mnc-particle, .mnc-page, .mnc-constellation { display: none; }
  .mnc-nebula.n1 { width: 220px; height: 220px; }
  .mnc-nebula.n2 { width: 220px; height: 220px; }
}

/* ============================================================
   Masters Numerology Books — luxury editorial showcase
   ============================================================ */
.mnb-section{
  --mnb-ink:#4c1119;
  --mnb-ink-soft:#6d4a33;
  --mnb-gold:#a8791b;
  --mnb-gold-deep:#7c560b;
  --mnb-gold-light:#d9b355;
  --mnb-line:rgba(168,121,27,0.32);
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(64px,7vw,100px) 0 clamp(60px,6.5vw,92px);
  background:
    radial-gradient(ellipse 1180px 640px at 50% 24%, #fffef9 0%, rgba(255,252,241,0.86) 40%, rgba(255,250,235,0) 72%),
    radial-gradient(ellipse 780px 540px at 90% 2%, rgba(255,238,200,0.9), transparent 64%),
    radial-gradient(ellipse 720px 520px at 4% 98%, rgba(255,233,197,0.88), transparent 64%),
    radial-gradient(ellipse 640px 460px at 98% 94%, rgba(253,224,196,0.78), transparent 64%),
    radial-gradient(ellipse 560px 420px at 2% 6%, rgba(255,243,214,0.8), transparent 62%),
    linear-gradient(168deg,#fffdf6 0%,#fdf7e9 24%,#fbf0da 50%,#f8e7cb 76%,#f4ddbb 100%);
}
.mnb-section .container{position:relative;z-index:2}

/* ---------- atmosphere ---------- */
.mnb-atmos{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.mnb-lightbloom{position:absolute;border-radius:50%;filter:blur(3px);
  background:radial-gradient(circle,rgba(255,250,226,0.9) 0%,rgba(255,240,199,0.42) 44%,transparent 72%);
  animation:mnb-bloom-pulse 11s ease-in-out infinite}
.mnb-lightbloom.lb1{width:520px;height:520px;top:6%;left:50%;margin-left:-260px}
.mnb-lightbloom.lb2{width:300px;height:300px;top:-90px;right:-60px;animation-duration:13s;animation-delay:-4s}
.mnb-lightbloom.lb3{width:280px;height:280px;bottom:-80px;left:-60px;animation-duration:14s;animation-delay:-8s}
@keyframes mnb-bloom-pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.85;transform:scale(1.07)}}

/* numerology dial */
.mnb-dial{position:absolute;top:-30px;left:-56px;width:330px;height:330px;opacity:.5}
.mnb-dial .spin-a{transform-origin:150px 150px;animation:mnb-spin-cw 170s linear infinite}
.mnb-dial .spin-b{transform-origin:150px 150px;animation:mnb-spin-ccw 210s linear infinite}
.mnb-dial-2{position:absolute;bottom:-70px;right:-70px;width:250px;height:250px;opacity:.36}
@keyframes mnb-spin-cw{to{transform:rotate(360deg)}}
@keyframes mnb-spin-ccw{to{transform:rotate(-360deg)}}

.mnb-figure{position:absolute;font-family:var(--font-display);font-weight:700;color:#b98d2a;opacity:.17;
  animation:mnb-figure-drift 16s ease-in-out infinite;will-change:transform}
.mnb-figure.f1{top:16%;left:3.5%;font-size:2.1rem}
.mnb-figure.f2{top:58%;left:1.8%;font-size:1.5rem;animation-duration:19s;animation-delay:-6s}
.mnb-figure.f3{top:11%;right:5%;font-size:1.7rem;animation-duration:18s;animation-delay:-3s}
.mnb-figure.f4{bottom:26%;right:2.4%;font-size:2.2rem;animation-duration:21s;animation-delay:-11s}
.mnb-figure.f5{top:40%;right:9%;font-size:1.2rem;animation-duration:17s;animation-delay:-8s}
.mnb-figure.f6{bottom:14%;left:8%;font-size:1.35rem;animation-duration:20s;animation-delay:-14s}
@keyframes mnb-figure-drift{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(7px,-13px,0) rotate(3deg)}}

.mnb-constel{position:absolute;opacity:.4}
.mnb-constel.c1{top:8%;right:16%;width:180px;height:140px}
.mnb-constel.c2{bottom:12%;left:14%;width:160px;height:120px}

.mnb-spark{position:absolute;width:9px;height:9px;background:#f4dc9a;
  clip-path:polygon(50% 0%,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0% 50%,40% 40%);
  filter:drop-shadow(0 0 5px rgba(232,199,102,.8));opacity:0;animation:mnb-spark 4.6s ease-in-out infinite}
.mnb-spark.k1{top:20%;left:22%}
.mnb-spark.k2{top:13%;right:26%;animation-delay:1.1s;width:7px;height:7px}
.mnb-spark.k3{bottom:30%;left:12%;animation-delay:2.2s;width:8px;height:8px}
.mnb-spark.k4{bottom:22%;right:18%;animation-delay:3.1s}
.mnb-spark.k5{top:46%;left:6%;animation-delay:1.7s;width:6px;height:6px}
.mnb-spark.k6{top:52%;right:5%;animation-delay:2.8s;width:7px;height:7px}
@keyframes mnb-spark{0%,100%{opacity:0;transform:scale(.5) rotate(0)}50%{opacity:.95;transform:scale(1) rotate(35deg)}}

/* corner botanicals */
.mnb-flora{position:absolute;pointer-events:none;filter:drop-shadow(0 8px 13px rgba(104,60,26,.16))}
.mnb-flora svg{position:absolute;display:block;overflow:visible}
.mnb-flora .drift{animation:mnb-drift 13s ease-in-out infinite;will-change:transform}
.mnb-flora .drift.d2{animation-duration:16s;animation-delay:-5s}
.mnb-flora .drift.d3{animation-duration:11s;animation-delay:-8s}
@keyframes mnb-drift{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(-4px,5px,0) rotate(-1.6deg)}}

.mnb-flora.fl-tr{top:-26px;right:-40px;width:clamp(170px,22vw,330px);aspect-ratio:1/0.92}
.mnb-flora.fl-tl{top:-16px;left:-50px;width:clamp(120px,15vw,225px);aspect-ratio:1/0.9}
.mnb-flora.fl-bl{bottom:-34px;left:-44px;width:clamp(150px,19vw,290px);aspect-ratio:1/0.88}
.mnb-flora.fl-br{bottom:-30px;right:-38px;width:clamp(140px,18vw,270px);aspect-ratio:1/0.88}

/* falling petals — travel distance is a variable so every breakpoint is fully covered */
.mnb-atmos{--mnb-fall:1700px}
.mnb-petal{position:absolute;top:-70px;opacity:0;animation:mnb-petal-fall linear infinite;
  will-change:transform,opacity}
.mnb-petal svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 2px rgba(120,60,80,.18))}
@keyframes mnb-petal-fall{
  0%{transform:translate3d(0,0,0) rotate(0);opacity:0}
  7%{opacity:var(--po,.6)}
  50%{transform:translate3d(var(--sway,18px),calc(var(--mnb-fall) * .5),0) rotate(150deg);opacity:var(--po,.6)}
  90%{opacity:var(--po,.6)}
  100%{transform:translate3d(calc(var(--sway,18px) * -0.6),var(--mnb-fall),0) rotate(320deg);opacity:0}
}
.mnb-petal.p1{left:8%;width:13px;height:18px;--sway:24px;--po:.62;animation-duration:26s;animation-delay:-4s}
.mnb-petal.p2{left:19%;width:10px;height:14px;--sway:-20px;--po:.55;animation-duration:31s;animation-delay:-13s}
.mnb-petal.p3{left:31%;width:15px;height:21px;--sway:28px;--po:.5;animation-duration:29s;animation-delay:-21s}
.mnb-petal.p4{left:44%;width:11px;height:15px;--sway:-24px;--po:.6;animation-duration:34s;animation-delay:-8s}
.mnb-petal.p5{left:56%;width:14px;height:19px;--sway:22px;--po:.52;animation-duration:27s;animation-delay:-17s}
.mnb-petal.p6{left:67%;width:9px;height:13px;--sway:-18px;--po:.62;animation-duration:32s;animation-delay:-2s}
.mnb-petal.p7{left:78%;width:13px;height:18px;--sway:26px;--po:.55;animation-duration:28s;animation-delay:-24s}
.mnb-petal.p8{left:88%;width:11px;height:15px;--sway:-22px;--po:.58;animation-duration:30s;animation-delay:-11s}
.mnb-petal.p9{left:96%;width:9px;height:13px;--sway:-16px;--po:.5;animation-duration:33s;animation-delay:-19s}

.mnb-swirl{position:absolute;left:0;bottom:0;width:100%;height:120px;opacity:.55}
.mnb-swirl path{animation:mnb-swirl-shift 15s ease-in-out infinite}
.mnb-swirl path.s2{animation-duration:19s;animation-delay:-6s}
@keyframes mnb-swirl-shift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-14px,-5px,0)}}

/* ---------- heading ---------- */
.mnb-head{text-align:center;position:relative}
.mnb-label{display:inline-flex;align-items:center;justify-content:center;gap:14px;
  font-family:var(--font-body);font-size:clamp(.66rem,1.1vw,.79rem);font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--mnb-gold-deep);margin-bottom:clamp(14px,2vw,20px)}
.mnb-label i{font-style:normal;color:var(--mnb-gold);font-size:.9em;opacity:.9}
.mnb-label .rule{display:block;width:clamp(26px,5vw,56px);height:1px;
  background:linear-gradient(90deg,transparent,var(--mnb-line),transparent)}

.mnb-title{font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:clamp(2.15rem,5.4vw,4.05rem);line-height:1.08;color:var(--mnb-ink);
  margin:0 0 clamp(14px,2vw,20px);letter-spacing:-.005em;text-wrap:balance;
  text-shadow:0 1px 0 rgba(255,252,240,.85)}
.mnb-title .scr{font-family:'Great Vibes','Segoe Script',cursive;font-weight:400;
  font-size:1.16em;line-height:0.8;color:#8d2438;padding:0 .06em;
  display:inline-block;transform:translateY(.06em)}

.mnb-lede{font-family:var(--font-display);font-size:clamp(1.02rem,1.75vw,1.32rem);
  line-height:1.62;color:var(--mnb-ink-soft);max-width:62ch;margin:0 auto;font-weight:500}

.mnb-orn{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:clamp(18px,2.4vw,26px)}
.mnb-orn .rule{display:block;width:clamp(48px,9vw,120px);height:1px;
  background:linear-gradient(90deg,transparent,var(--mnb-line) 45%,var(--mnb-line) 55%,transparent)}
.mnb-orn svg{width:26px;height:26px;display:block;opacity:.9}

/* ---------- books ---------- */
.mnb-shelf{position:relative;margin-top:clamp(34px,4.6vw,58px)}
.mnb-shelf::before{content:"";position:absolute;z-index:0;left:50%;bottom:18px;
  width:min(96%,1020px);height:78px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,rgba(255,251,234,.95) 0%,rgba(255,243,214,.5) 44%,transparent 72%)}
.mnb-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,2.8vw,44px);align-items:end}
.mnb-book{text-align:center;position:relative}

.mnb-stage{position:relative;display:flex;align-items:flex-end;justify-content:center;
  padding:0 3% 18px;min-height:1px}
.mnb-halo{position:absolute;z-index:0;left:50%;top:44%;width:126%;aspect-ratio:1/1;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,247,219,.92) 0%,rgba(255,238,192,.5) 38%,rgba(255,235,185,0) 68%);
  animation:mnb-bloom-pulse 9s ease-in-out infinite}
.mnb-book:nth-child(2) .mnb-halo{animation-delay:-3s}
.mnb-book:nth-child(3) .mnb-halo{animation-delay:-6s}

/* wide ambient shadow + tight contact shadow so each book really sits on the surface */
.mnb-ground{position:absolute;z-index:1;left:50%;bottom:12px;width:86%;height:26px;border-radius:50%;
  transform:translateX(-50%);pointer-events:none;filter:blur(8px);
  background:radial-gradient(ellipse at center,rgba(112,64,26,.30) 0%,rgba(112,64,26,.13) 48%,transparent 74%);
  animation:mnb-ground 7s ease-in-out infinite}
.mnb-ground::after{content:"";position:absolute;left:50%;top:50%;width:64%;height:34%;
  transform:translate(-50%,-50%);border-radius:50%;filter:blur(2.5px);
  background:radial-gradient(ellipse at center,rgba(88,48,18,.5) 0%,rgba(88,48,18,.2) 52%,transparent 78%)}
@keyframes mnb-ground{0%,100%{transform:translateX(-50%) scaleX(1);opacity:1}
  50%{transform:translateX(-50%) scaleX(.93);opacity:.74}}

.mnb-cover-wrap{position:relative;z-index:3;display:flex;justify-content:center;width:100%;
  transition:transform .55s cubic-bezier(.2,.8,.2,1)}
/* sized by HEIGHT so all three volumes stand exactly the same height regardless of cover width */
.mnb-cover{display:block;width:auto;max-width:100%;height:clamp(232px,25.5vw,344px);
  filter:drop-shadow(0 18px 22px rgba(96,52,20,.24)) drop-shadow(0 5px 9px rgba(96,52,20,.14));
  animation:mnb-breathe 7s ease-in-out infinite;will-change:transform}
@keyframes mnb-breathe{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-6px,0)}}
.mnb-book:nth-child(2) .mnb-cover,.mnb-book:nth-child(2) .mnb-ground{animation-delay:-2.3s}
.mnb-book:nth-child(3) .mnb-cover,.mnb-book:nth-child(3) .mnb-ground{animation-delay:-4.6s}
.mnb-book:nth-child(2) .mnb-cover{height:clamp(250px,27.6vw,372px)}

.mnb-glint{position:absolute;z-index:4;top:5%;bottom:5%;left:0;width:36%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.62),rgba(255,255,255,0) 66%);
  mix-blend-mode:soft-light;opacity:0;animation:mnb-glint 11s ease-in-out infinite}
.mnb-book:nth-child(2) .mnb-glint{animation-delay:-3.6s}
.mnb-book:nth-child(3) .mnb-glint{animation-delay:-7.2s}
@keyframes mnb-glint{
  0%,62%,100%{transform:translate3d(-40%,0,0);opacity:0}
  68%{opacity:.85}
  84%{opacity:.85}
  92%{transform:translate3d(215%,0,0);opacity:0}
}

.mnb-book:hover .mnb-cover-wrap{transform:translateY(-10px) rotate(-1.2deg) scale(1.02)}

.mnb-base-flora{position:absolute;bottom:10px;pointer-events:none;
  filter:drop-shadow(0 5px 8px rgba(104,60,26,.18))}
.mnb-base-flora svg{position:absolute;display:block;overflow:visible}
.mnb-base-flora.bf-l{left:-6%;width:46%;aspect-ratio:1/0.62;z-index:4}
.mnb-base-flora.bf-r{right:-6%;width:44%;aspect-ratio:1/0.6;z-index:4}
.mnb-base-flora.bf-back{left:50%;transform:translateX(-50%);width:106%;aspect-ratio:1/0.3;z-index:2;bottom:20px;opacity:.8}

.mnb-bt{font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:clamp(1.18rem,2.05vw,1.62rem);color:var(--mnb-ink);margin:clamp(18px,2.4vw,28px) 0 9px;
  line-height:1.2;letter-spacing:-.004em}
.mnb-bv{display:flex;align-items:center;justify-content:center;gap:11px;
  font-family:var(--font-body);font-weight:600;font-size:clamp(.73rem,1.22vw,.9rem);
  letter-spacing:.21em;text-transform:uppercase;color:var(--mnb-gold-deep);margin:0 0 4px}
.mnb-bv .rule{display:block;width:clamp(16px,3vw,34px);height:1px;
  background:linear-gradient(90deg,transparent,var(--mnb-line),transparent)}
.mnb-ba{font-family:'Great Vibes','Segoe Script',cursive;font-weight:400;
  font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.15;color:var(--mnb-gold);margin:0}

/* ---------- bottom banner ---------- */
.mnb-banner{position:relative;max-width:820px;margin:clamp(46px,6vw,76px) auto 0;
  display:flex;align-items:center;gap:clamp(14px,2.4vw,26px);
  padding:clamp(14px,2vw,20px) clamp(18px,3vw,34px);border-radius:999px;
  border:1px solid var(--mnb-line);
  background:linear-gradient(100deg,rgba(255,253,245,.9) 0%,rgba(255,247,227,.74) 52%,rgba(255,250,236,.88) 100%);
  box-shadow:0 12px 32px rgba(150,100,40,.10),inset 0 1px 0 rgba(255,255,255,.85)}
.mnb-banner::before{content:"";position:absolute;inset:4px;border-radius:999px;
  border:1px solid rgba(168,121,27,.15);pointer-events:none}
.mnb-medal{flex-shrink:0;width:clamp(40px,5vw,54px);height:clamp(40px,5vw,54px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#8e6512,#b98b23 46%,#7d560c);
  box-shadow:0 4px 12px rgba(125,86,12,.34),inset 0 1px 0 rgba(255,240,196,.5)}
.mnb-medal svg{width:52%;height:52%;display:block}
.mnb-banner p{margin:0;flex:1;text-align:center;font-family:var(--font-display);font-weight:500;
  font-size:clamp(.96rem,1.55vw,1.16rem);line-height:1.55;color:var(--mnb-ink-soft)}

@media (max-width:920px){
  .mnb-grid{gap:14px}
  .mnb-constel{display:none}
  .mnb-base-flora.bf-l{width:40%;left:-2%}
  .mnb-base-flora.bf-r{width:38%;right:-2%}
  .mnb-base-flora.bf-back{display:none}
}
@media (max-width:760px){
  .mnb-grid{grid-template-columns:1fr;gap:clamp(30px,6.4vw,50px);justify-items:center;max-width:390px;margin-inline:auto}
  .mnb-book{width:100%}
  .mnb-cover,.mnb-book:nth-child(2) .mnb-cover{height:clamp(250px,58vw,330px)}
  .mnb-base-flora.bf-l{left:6%;width:40%}
  .mnb-base-flora.bf-r{right:6%;width:38%}
  .mnb-shelf::before{display:none}
  .mnb-atmos{--mnb-fall:2600px}
  .mnb-dial{width:210px;height:210px;top:-16px;left:-46px}
  .mnb-dial-2{display:none}
  .mnb-banner{flex-wrap:wrap;justify-content:center;gap:10px 14px;border-radius:26px;padding:18px 22px 20px}
  .mnb-banner::before{border-radius:22px}
  .mnb-banner p{flex:0 0 100%;order:2}
  .mnb-medal{order:1}
  .mnb-figure.f5,.mnb-figure.f2{display:none}
}
@media (max-width:480px){
  .mnb-cover,.mnb-book:nth-child(2) .mnb-cover{height:clamp(212px,62vw,270px)}
  .mnb-flora.fl-tr{width:135px;right:-26px}
  .mnb-flora.fl-tl{width:96px;left:-30px}
  .mnb-flora.fl-bl{width:118px;left:-28px}
  .mnb-flora.fl-br{width:112px;right:-24px}
  .mnb-swirl{height:70px;opacity:.4}
  .mnb-atmos{--mnb-fall:2400px}
}
@media (prefers-reduced-motion:reduce){
  .mnb-section *{animation:none !important}
}

/* ===== Numerology Calculators: Lo Shu redesign ===== */
.numcalc-section {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 55% 45% at 90% 4%, rgba(90,40,120,0.16), transparent 60%),
    radial-gradient(ellipse 50% 45% at 4% 96%, rgba(20,90,90,0.14), transparent 60%),
    linear-gradient(160deg, #3a1c0e 0%, #6a3410 22%, #a8621e 46%, #c98a2e 68%, #8a3a2a 100%);
}
.numcalc-section .container { position: relative; z-index: 1; }
.numcalc-section .section-head h2 { color: #fff6e2; text-shadow: 0 0 24px rgba(232,199,102,0.4); }
.numcalc-section .lede { color: #f3ddc0; }
.numcalc-section .eyebrow { color: var(--gold-light); }

.numcalc-atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.numcalc-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(255,246,218,0.14); }
.numcalc-orbit.o1 { width: 460px; height: 460px; top: -160px; right: -120px; animation: ring-spin-cw 190s linear infinite; }
.numcalc-orbit.o2 { width: 340px; height: 340px; bottom: -140px; left: -100px; border-color: rgba(90,40,120,0.18); animation: ring-spin-ccw 160s linear infinite; }
.numcalc-star { position: absolute; color: #fff6e2; font-size: 0.7rem; opacity: 0; animation: sparkle-twinkle 5s ease-in-out infinite; }
.numcalc-star.s1 { top: 9%; left: 1.6%; animation-delay: 0s; }
.numcalc-star.s2 { top: 22%; right: 1.6%; animation-delay: 1.3s; font-size: 0.55rem; }
.numcalc-star.s3 { bottom: 30%; left: 1.8%; animation-delay: 2.5s; }
.numcalc-star.s4 { bottom: 12%; right: 1.7%; animation-delay: 3.4s; font-size: 0.55rem; }
.numcalc-num { position: absolute; font-family: var(--font-display); font-weight: 700; opacity: 0.14; color: #fff6e2; animation-name: about-num-float; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.numcalc-num.num1 { top: 10%; left: 1.5%; font-size: 1.6rem; animation-duration: 10s; --ax: 8px; --ay: -12px; }
.numcalc-num.num2 { bottom: 14%; right: 1.5%; font-size: 1.7rem; animation-duration: 12s; animation-delay: -5s; --ax: -8px; --ay: 12px; }

.numcalc-note {
  max-width: 780px; margin: 34px auto 0; padding: 18px 24px; border-radius: 14px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,246,218,0.35);
  backdrop-filter: blur(2px);
}
.numcalc-note p { font-size: 0.88rem; color: #fff6e2; margin: 0; }
.numcalc-note p + p { margin-top: 8px; }
.numcalc-note strong { color: var(--gold-light); }

.numcalc-panel {
  position: relative; max-width: 980px; margin: 40px auto 0; padding: 36px 38px 40px;
  background: linear-gradient(165deg, #fff8ec 0%, #f3e2b8 100%);
  border: 1px solid rgba(232,199,102,0.6); border-radius: 22px;
  box-shadow: 0 26px 54px rgba(28,10,4,0.42), 0 0 0 1px rgba(255,255,255,0.4) inset;
  color: #3a1f10;
}
.numcalc-panel::before {
  content: ""; position: absolute; top: 0; left: 34px; right: 34px; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #e8c766, #7c0f2e, #e8c766);
}
.numcalc-panel h3 { font-size: 1.35rem; color: var(--maroon-deep); margin-bottom: 4px; }
.numcalc-panel .numcalc-sub { font-size: 0.9rem; color: #6b4a2e; margin-bottom: 22px; }

.numcalc-form { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 16px; align-items: end; margin-bottom: 6px; }
.numcalc-field label { display: block; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: #8a6a52; margin-bottom: 7px; font-weight: 700; }
.numcalc-field .hint { display: block; font-size: 0.74rem; color: #a3826a; margin-top: 5px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.numcalc-field input {
  width: 100%; padding: 12px 14px; border: 1px solid rgba(124,15,46,0.22); border-radius: 10px;
  font-family: var(--font-body); font-size: 0.98rem; background: #fffdf6; color: #3a1f10;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.numcalc-field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,134,11,0.18); }
.numcalc-submit { padding: 13px 22px; white-space: nowrap; }
.numcalc-error { color: #8a1435; font-size: 0.84rem; margin: 10px 0 0; min-height: 1.2em; }

.numcalc-results { margin-top: 34px; }
.numcalc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 30px; }
.numcalc-stat {
  text-align: center; padding: 20px 14px; border-radius: 14px;
  background: rgba(184,134,11,0.08); border: 1px solid rgba(184,134,11,0.25);
  opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease;
}
.numcalc-stat.in-view { opacity: 1; transform: translateY(0); }
.numcalc-stat .stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #8a6a52; font-weight: 700; margin-bottom: 8px; }
.numcalc-stat .stat-value { font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; color: #7c0f2e; line-height: 1; font-variant-numeric: tabular-nums; }
.numcalc-breakdown { text-align: center; font-size: 0.84rem; color: #6b4a2e; margin: -14px 0 30px; letter-spacing: 0.01em; }
.numcalc-breakdown b { color: var(--maroon-deep); }

.numcalc-grid-head { text-align: center; margin-bottom: 18px; }
.numcalc-grid-head h4 { font-size: 1.15rem; color: var(--maroon-deep); margin-bottom: 2px; }
.numcalc-grid-head p { font-size: 0.82rem; color: #8a6a52; }

.numcalc-grid-wrap { display: flex; flex-wrap: wrap; gap: 36px; justify-content: center; align-items: flex-start; }
.numcalc-grid { display: grid; grid-template-columns: repeat(3, 84px); grid-template-rows: repeat(3, 84px); gap: 8px; }
.numcalc-cell {
  position: relative; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, #f3e2b8, #e5c98a); border: 1px solid rgba(124,15,46,0.18);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
  opacity: 0; transform: scale(0.85);
  transition: opacity 0.45s ease, transform 0.45s ease, box-shadow 0.35s ease;
}
.numcalc-cell.in-view { opacity: 1; transform: scale(1); transition-delay: calc(var(--cell-i, 0) * 90ms); }
.numcalc-cell .cell-digit { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: #b89468; font-variant-numeric: tabular-nums; }
.numcalc-cell.has-num {
  background: linear-gradient(155deg, #2c1240 0%, #1a2456 55%, #150b26 100%);
  border-color: var(--gold-light);
  box-shadow: 0 0 0 1px rgba(232,199,102,0.25), 0 0 22px rgba(232,199,102,0.35), 0 1px 0 rgba(255,255,255,0.15) inset;
}
.numcalc-cell.has-num .cell-digit { color: #fdeedd; text-shadow: 0 0 14px rgba(232,199,102,0.6); }
.numcalc-cell .cell-count {
  position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: linear-gradient(135deg, var(--btn-wine-a), var(--btn-wine-b));
  border: 1px solid var(--gold-light); color: #fdeedd; font-size: 0.65rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}
.numcalc-legend { display: flex; flex-direction: column; gap: 10px; min-width: 220px; }
.numcalc-legend .result-line .label { min-width: 130px; font-size: 0.82rem; }
.numcalc-legend .result-line .value { font-size: 1.15rem; }

/* Full-width Vedic variant of the calculator panel */
.vedic-section {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 55% 45% at 8% 6%, rgba(232,199,102,0.10), transparent 58%),
    radial-gradient(ellipse 55% 50% at 92% 100%, rgba(122,16,48,0.16), transparent 62%),
    linear-gradient(160deg, #0c1a2e 0%, #123048 30%, #123a3a 58%, #1a2456 82%, #150b26 100%);
}
.vedic-section .container { position: relative; z-index: 1; }
.vedic-section .section-head h2 { color: #fdeedd; text-shadow: 0 0 24px rgba(120,220,210,0.28); }
.vedic-section .lede { color: #cfe6e2; }
.vedic-section .eyebrow { color: #8fd9c9; }
.vedic-atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.vedic-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(143,217,201,0.16); }
.vedic-orbit.o1 { width: 420px; height: 420px; top: -140px; left: -110px; animation: ring-spin-ccw 180s linear infinite; }
.vedic-orbit.o2 { width: 320px; height: 320px; bottom: -120px; right: -100px; border-color: rgba(232,199,102,0.14); animation: ring-spin-cw 150s linear infinite; }
.vedic-star { position: absolute; color: #8fd9c9; font-size: 0.68rem; opacity: 0; animation: sparkle-twinkle 5.4s ease-in-out infinite; }
.vedic-star.s1 { top: 12%; left: 1.6%; animation-delay: 0.3s; }
.vedic-star.s2 { bottom: 16%; right: 1.7%; animation-delay: 2.1s; }

.vedic-panel { position: relative; max-width: 980px; margin: 40px auto 0; padding: 36px 38px 40px;
  background: linear-gradient(165deg, #fff8ec 0%, #eee0cf 100%);
  border: 1px solid rgba(143,217,201,0.55); border-radius: 22px;
  box-shadow: 0 26px 54px rgba(4,12,16,0.4), 0 0 0 1px rgba(255,255,255,0.4) inset;
  color: #17303a;
}
.vedic-panel::before { content: ""; position: absolute; top: 0; left: 34px; right: 34px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, #8fd9c9, #123a48, #8fd9c9); }
.vedic-panel h3 { font-size: 1.35rem; color: #123a48; margin-bottom: 4px; }
.vedic-panel .numcalc-sub { font-size: 0.9rem; color: #4a6a68; margin-bottom: 22px; }
.vedic-panel .numcalc-field input:focus { border-color: #4fae96; box-shadow: 0 0 0 3px rgba(79,174,150,0.18); }
.vedic-panel .numcalc-stat { background: rgba(20,120,105,0.08); border-color: rgba(20,120,105,0.22); }
.vedic-panel .numcalc-stat .stat-value { color: #12604f; }
.vedic-panel .numcalc-cell { background: linear-gradient(155deg, #eee0cf, #d9c6a5); border-color: rgba(18,58,72,0.18); }
.vedic-panel .numcalc-cell .cell-digit { color: #a89372; }
.vedic-panel .numcalc-cell.has-num { background: linear-gradient(155deg, #0c2830 0%, #123a48 55%, #0a1c26 100%); border-color: #8fd9c9; box-shadow: 0 0 0 1px rgba(143,217,201,0.3), 0 0 22px rgba(143,217,201,0.32), 0 1px 0 rgba(255,255,255,0.15) inset; }
.vedic-panel .numcalc-cell.has-num .cell-digit { color: #ecfffb; text-shadow: 0 0 14px rgba(143,217,201,0.6); }
.vedic-panel .numcalc-cell .cell-count { background: linear-gradient(135deg, #12604f, #0a3a30); border-color: #8fd9c9; }
.vedic-panel .numcalc-submit.btn-gold { background: linear-gradient(135deg, #8fd9c9, #4fae96); color: #0a2420; box-shadow: 0 10px 24px rgba(20,120,105,0.28), 0 1px 0 rgba(255,255,255,0.5) inset; }
.vedic-panel .numcalc-submit.btn-gold:hover { box-shadow: 0 14px 30px rgba(20,120,105,0.36), 0 1px 0 rgba(255,255,255,0.6) inset; }
.vedic-panel .numcalc-form { grid-template-columns: 1.4fr auto; }
.vedic-panel .numcalc-stats { grid-template-columns: repeat(2, 1fr); max-width: 460px; margin-left: auto; margin-right: auto; }

@media (max-width: 780px) {
  .numcalc-form, .vedic-panel .numcalc-form { grid-template-columns: 1fr; }
  .numcalc-panel, .vedic-panel { padding: 26px 20px 28px; }
  .numcalc-stats { grid-template-columns: 1fr; }
  .numcalc-grid-wrap { flex-direction: column; align-items: center; }
  .numcalc-grid { grid-template-columns: repeat(3, 74px); grid-template-rows: repeat(3, 74px); }
  .numcalc-orbit, .numcalc-star, .numcalc-num, .vedic-orbit, .vedic-star { display: none; }
}

/* ===== FAQ: mystical golden-bronze accordion section ===== */
.faq-section {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 55% 45% at 10% 8%, rgba(232,199,102,0.14), transparent 60%),
    radial-gradient(ellipse 55% 50% at 92% 14%, rgba(184,134,11,0.10), transparent 58%),
    radial-gradient(ellipse 60% 55% at 85% 95%, rgba(122,16,48,0.26), transparent 62%),
    linear-gradient(160deg, #2a0f08 0%, #4a1810 20%, #6b2812 40%, #7c0f2e 64%, #4a0916 86%, #260a11 100%);
}
.faq-section .container { position: relative; z-index: 1; }
.faq-section .section-head h2 { color: #fff6e2; text-shadow: 0 0 26px rgba(232,199,102,0.4); }
.faq-section .lede { color: #f0dcc0; }
.faq-section .eyebrow { color: var(--gold-light); }

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

.faq-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(255,246,218,0.12); }
.faq-orbit.o1 { width: 480px; height: 480px; top: -180px; left: -130px; animation: ring-spin-ccw 220s linear infinite; }
.faq-orbit.o2 { width: 340px; height: 340px; bottom: -140px; right: -100px; border-color: rgba(232,199,102,0.14); animation: ring-spin-cw 180s linear infinite; }

.faq-wheel { position: absolute; bottom: -60px; right: -60px; width: 320px; height: 320px; opacity: 0.13; animation: mandala-spin 260s linear infinite; }
.faq-wheel svg { width: 100%; height: 100%; }

.faq-star { position: absolute; color: #fff6e2; font-size: 0.7rem; opacity: 0; animation: sparkle-twinkle 5.2s ease-in-out infinite; }
.faq-star.s1 { top: 10%; left: 1.6%; animation-delay: 0s; }
.faq-star.s2 { top: 26%; right: 1.7%; animation-delay: 1.4s; font-size: 0.55rem; }
.faq-star.s3 { bottom: 34%; left: 1.8%; animation-delay: 2.6s; }
.faq-star.s4 { bottom: 16%; right: 1.6%; animation-delay: 3.5s; font-size: 0.55rem; }
.faq-star.s5 { top: 48%; left: 1.5%; animation-delay: 1.9s; font-size: 0.5rem; }

.faq-particle { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-light); opacity: 0; box-shadow: 0 0 8px 2px rgba(232,199,102,0.55); animation: particle-float linear infinite; }
.faq-particle.p1 { top: 16%; left: 3%; --pf-x: 22px; --pf-y: -46px; animation-duration: 9s; }
.faq-particle.p2 { top: 62%; right: 3.5%; --pf-x: -18px; --pf-y: -40px; animation-duration: 11s; animation-delay: 2s; }
.faq-particle.p3 { bottom: 12%; left: 4.5%; --pf-x: 16px; --pf-y: -36px; animation-duration: 8s; animation-delay: 4s; }

.faq-num { position: absolute; font-family: var(--font-display); font-weight: 700; opacity: 0.13; color: #fff6e2; animation-name: about-num-float; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.faq-num.n1 { top: 8%; right: 8%; font-size: 3.4rem; animation-duration: 13s; --ax: 10px; --ay: -14px; }
.faq-num.n2 { bottom: 10%; left: 6%; font-size: 2.6rem; animation-duration: 11s; animation-delay: -4s; --ax: -8px; --ay: 12px; }
.faq-num.n3 { top: 42%; right: 2%; font-size: 2rem; animation-duration: 15s; animation-delay: -7s; --ax: 6px; --ay: -10px; }

.faq-qmark { position: absolute; font-family: var(--font-display); font-weight: 700; color: var(--gold-light); opacity: 0.4; text-shadow: 0 0 12px rgba(232,199,102,0.5); animation: faq-qmark-float ease-in-out infinite; }
.faq-qmark.q1 { top: 14%; left: 8%; font-size: 1.6rem; animation-duration: 8s; }
.faq-qmark.q2 { bottom: 22%; right: 9%; font-size: 1.3rem; animation-duration: 10s; animation-delay: -3s; }
.faq-qmark.q3 { top: 60%; left: 2.5%; font-size: 1.1rem; animation-duration: 7s; animation-delay: -1.5s; }
.faq-qmark.q4 { bottom: 6%; right: 3%; font-size: 1.8rem; animation-duration: 9.5s; animation-delay: -5s; }
@keyframes faq-qmark-float {
  0%, 100% { transform: translateY(0); opacity: 0.3; }
  50% { transform: translateY(-16px); opacity: 0.55; }
}

.faq-moon { position: absolute; top: 54%; left: 5%; width: 60px; height: 60px; border-radius: 50%; opacity: 0.3; animation: glow-pulse 8s ease-in-out infinite; }
.faq-moon::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, rgba(232,199,102,0.6), rgba(232,199,102,0.1)); }
.faq-moon::after { content: ""; position: absolute; top: -6px; left: 16px; width: 60px; height: 60px; border-radius: 50%; background: #33110d; }

.faq-constellation { position: absolute; top: 6%; left: 4%; width: 220px; height: 180px; opacity: 0.16; animation: sanskrit-breathe 7s ease-in-out infinite; }

.faq-hero-q { position: absolute; top: 7%; right: 3%; width: 148px; height: 148px; animation: faq-hero-float 7s ease-in-out infinite; }
.faq-hero-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(232,199,102,0.3); box-shadow: 0 0 40px rgba(232,199,102,0.16) inset; }
.faq-hero-ring::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; border: 1px solid rgba(232,199,102,0.18); }
.faq-hero-glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 3.4rem; color: var(--gold-light); opacity: 0.55; text-shadow: 0 0 30px rgba(232,199,102,0.55), 0 0 60px rgba(232,199,102,0.25); animation: glow-pulse 5s ease-in-out infinite; }
@keyframes faq-hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.faq-list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin: 46px auto 0; }
.faq-card {
  border-radius: 16px; background: linear-gradient(160deg, #fff8ec 0%, #f0dfc0 100%);
  border: 1px solid rgba(232,199,102,0.4); box-shadow: 0 10px 26px rgba(20,6,4,0.28);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
.faq-card:hover { border-color: rgba(232,199,102,0.65); box-shadow: 0 14px 32px rgba(20,6,4,0.32), 0 0 22px rgba(232,199,102,0.14); }
.faq-card.open {
  background: linear-gradient(160deg, #fffdf6 0%, #f7e7c4 100%);
  border-color: var(--gold-light);
  box-shadow: 0 20px 42px rgba(20,6,4,0.36), 0 0 0 1px rgba(232,199,102,0.3), 0 0 30px rgba(232,199,102,0.2);
  transform: translateY(-2px);
}
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 24px; background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; color: var(--maroon-deep);
}
.faq-q .q-text { transition: color 0.3s ease, letter-spacing 0.3s ease; }
.faq-card:hover .faq-q .q-text { letter-spacing: 0.01em; }

.faq-icon { position: relative; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid rgba(184,134,11,0.35); background: rgba(184,134,11,0.06); transition: transform 0.4s cubic-bezier(.4,0,.2,1), border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--gold); border-radius: 2px; }
.faq-icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.faq-icon::after { width: 2px; height: 14px; transform: translate(-50%, -50%); transition: transform 0.4s cubic-bezier(.4,0,.2,1), opacity 0.3s ease; }
.faq-card:hover .faq-icon { box-shadow: 0 0 14px rgba(232,199,102,0.3); border-color: var(--gold-light); }
.faq-card.open .faq-icon { transform: rotate(180deg); border-color: var(--gold-light); background: rgba(184,134,11,0.14); box-shadow: 0 0 16px rgba(232,199,102,0.35); }
.faq-card.open .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); opacity: 0; }

.faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s cubic-bezier(.4,0,.2,1); }
.faq-card.open .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; min-height: 0; }
.faq-a-inner .faq-a {
  margin: 0; padding: 0 24px 22px; max-width: 660px; color: #5a3420; line-height: 1.7; font-size: 0.98rem;
  opacity: 0; transform: translateY(-6px); transition: opacity 0.45s ease 0.05s, transform 0.45s ease 0.05s;
}
.faq-card.open .faq-a-inner .faq-a { opacity: 1; transform: translateY(0); }

@media (max-width: 780px) {
  .faq-orbit, .faq-wheel, .faq-star, .faq-particle, .faq-num, .faq-qmark, .faq-moon, .faq-constellation, .faq-hero-q { display: none; }
  .faq-q { padding: 18px 18px; font-size: 1rem; gap: 12px; }
  .faq-a-inner .faq-a { padding: 0 18px 18px; }
  .faq-icon { width: 30px; height: 30px; }
}

/* ===== The Numiro Journal: golden editorial journal ===== */
.njl-section {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 46% 36% at 50% 2%, rgba(124,15,46,0.10), transparent 62%),
    radial-gradient(ellipse 60% 50% at 8% 4%, rgba(255,248,220,0.55), transparent 62%),
    radial-gradient(ellipse 56% 48% at 95% 8%, rgba(232,199,102,0.42), transparent 60%),
    radial-gradient(ellipse 58% 52% at 92% 100%, rgba(214,164,58,0.36), transparent 62%),
    radial-gradient(ellipse 48% 42% at 2% 98%, rgba(222,178,74,0.32), transparent 60%),
    linear-gradient(172deg, #fdf0cf 0%, #fbe6ae 18%, #f6d989 38%, #eec766 60%, #e3b34e 82%, #d59e3c 100%);
}
.njl-section .container { position: relative; z-index: 2; }
.njl-section .section-head h2 { color: var(--maroon-deep); }
.njl-section .eyebrow { color: var(--gold-deep); }

/* -- atmosphere: golden depth, edge numerals, celestial rings, book watermark, lotus corners -- */
.njl-atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

.njl-geo { position: absolute; border-radius: 50%; border: 1px solid rgba(124,15,46,0.12); }
.njl-geo.g1 { width: 440px; height: 440px; top: -170px; right: -130px; animation: ring-spin-ccw 210s linear infinite; }
.njl-geo.g2 { width: 280px; height: 280px; bottom: -115px; left: -85px; border-color: rgba(184,134,11,0.16); animation: ring-spin-cw 170s linear infinite; }
.njl-head-ring {
  position: absolute; top: 18px; left: 50%; width: 560px; height: 560px;
  transform: translateX(-50%); border-radius: 50%; border: 1px solid rgba(124,15,46,0.09);
  animation: ring-spin-cw 260s linear infinite;
}
.njl-head-ring::before {
  content: ""; position: absolute; inset: 26px; border-radius: 50%; border: 1px solid rgba(184,134,11,0.08);
}

.njl-num { position: absolute; font-family: var(--font-display); font-weight: 700; color: var(--gold-deep); opacity: 0.10; animation-name: about-num-float; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.njl-num.n1 { top: 6%; left: 2.2%; font-size: 2.1rem; animation-duration: 14s; --ax: 7px; --ay: -10px; }
.njl-num.n2 { top: 18%; right: 2%; font-size: 1.7rem; animation-duration: 16s; animation-delay: -5s; --ax: -6px; --ay: 9px; }
.njl-num.n3 { top: 40%; left: 1.6%; font-size: 2.6rem; animation-duration: 15s; animation-delay: -2s; --ax: 6px; --ay: -9px; opacity: 0.08; }
.njl-num.n4 { top: 58%; right: 1.8%; font-size: 2.2rem; animation-duration: 17s; animation-delay: -8s; --ax: -7px; --ay: 8px; }
.njl-num.n5 { bottom: 20%; left: 3%; font-size: 1.8rem; animation-duration: 13s; animation-delay: -4s; --ax: 5px; --ay: -8px; }
.njl-num.n6 { bottom: 8%; right: 3.4%; font-size: 3rem; animation-duration: 18s; animation-delay: -10s; --ax: -6px; --ay: 9px; opacity: 0.08; }
.njl-num.n7 { top: 82%; left: 1.4%; font-size: 1.5rem; animation-duration: 12s; animation-delay: -6s; --ax: 5px; --ay: -7px; }
.njl-num.n8 { top: 2%; right: 22%; font-size: 1.3rem; animation-duration: 14.5s; animation-delay: -3s; --ax: -4px; --ay: 6px; opacity: 0.07; }
.njl-num.n9 { bottom: 2%; left: 24%; font-size: 1.3rem; animation-duration: 15.5s; animation-delay: -7s; --ax: 4px; --ay: -6px; opacity: 0.07; }

.njl-star { position: absolute; color: var(--gold-deep); font-size: 0.62rem; opacity: 0; animation: sparkle-twinkle 5.6s ease-in-out infinite; }
.njl-star.s1 { top: 8%; right: 6%; animation-delay: 0.4s; }
.njl-star.s2 { top: 46%; left: 1.8%; animation-delay: 2s; font-size: 0.48rem; }
.njl-star.s3 { bottom: 16%; right: 3%; animation-delay: 3.2s; }
.njl-star.s4 { bottom: 40%; left: 4%; animation-delay: 1.4s; font-size: 0.5rem; }
.njl-star.s5 { top: 30%; left: 9%; animation-delay: 2.6s; font-size: 0.5rem; }

.njl-particle { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: 0; box-shadow: 0 0 8px 2px var(--gold-pale-soft); animation: particle-float linear infinite; }
.njl-particle.p1 { top: 20%; right: 3%; --pf-x: -16px; --pf-y: -32px; animation-duration: 10s; animation-delay: 2s; }
.njl-particle.p2 { bottom: 20%; left: 3%; --pf-x: 15px; --pf-y: -28px; animation-duration: 11s; animation-delay: 4.5s; }
.njl-particle.p3 { top: 64%; right: 6%; --pf-x: -12px; --pf-y: -26px; animation-duration: 12s; animation-delay: 6s; }

.njl-line { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, rgba(124,15,46,0.28), transparent); }
.njl-line.ln1 { top: 18%; right: 7%; width: 200px; transform: rotate(-8deg); }
.njl-line.ln2 { bottom: 20%; right: 8%; width: 180px; transform: rotate(6deg); }

.njl-lotus { position: absolute; width: 118px; height: 118px; opacity: 0.09; animation: wbn-lotus-breathe 9.5s ease-in-out infinite; }
.njl-lotus.l1 { top: -26px; right: -26px; }
.njl-lotus.l2 { bottom: -30px; left: -26px; animation-delay: -4.5s; }

.njl-corner { position: absolute; width: 46px; height: 46px; opacity: 0.28; pointer-events: none; }
.njl-corner svg { width: 100%; height: 100%; display: block; }
.njl-corner.tl { top: 22px; left: 22px; }
.njl-corner.tr { top: 22px; right: 22px; transform: scaleX(-1); }

.njl-book { position: absolute; bottom: -6%; right: -3%; width: 360px; height: 360px; opacity: 0.07; pointer-events: none; }
.njl-book svg { width: 100%; height: 100%; display: block; }

/* -- masthead crest: small monogram ring above the ornament -- */
.njl-crest { display: flex; justify-content: center; margin-bottom: 6px; position: relative; z-index: 1; }
.njl-crest-ring {
  position: relative; width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid var(--line-gold); display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(255,250,232,0.65), transparent 72%);
  animation: glow-pulse 7s ease-in-out infinite;
}
.njl-crest-ring::before {
  content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(124,15,46,0.18);
  animation: ring-spin-ccw 90s linear infinite;
}
.njl-crest-ring .njl-crest-n { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--maroon-deep); line-height: 1; }

.njl-scribble { position: absolute; font-family: var(--font-display); font-style: italic; font-weight: 600; color: var(--maroon); opacity: 0.16; pointer-events: none; }
.njl-scribble.sc1 { top: -2px; left: 16%; font-size: 1.1rem; transform: rotate(-8deg); }
.njl-scribble.sc2 { bottom: 6px; right: 15%; font-size: 1rem; transform: rotate(6deg); }

/* -- editorial cards -- */
.njl-grid { margin-top: 50px; }
.njl-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--card-grad); border: 1px solid var(--line-gold); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), 0 1px 0 rgba(255,246,218,0.6) inset;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.4s ease;
}
.njl-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: multiply; }
.njl-card:nth-child(2)::after { background: linear-gradient(155deg, rgba(184,134,11,0.05) 0%, rgba(124,15,46,0.05) 100%); }
.njl-card:nth-child(3)::after { background: linear-gradient(155deg, rgba(214,164,58,0.08) 0%, transparent 100%); }
.njl-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-soft), var(--shadow-glow), 0 1px 0 rgba(255,246,218,0.6) inset; border-color: var(--gold); }

.njl-visual { position: relative; height: 176px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--line-gold); }
.njl-visual::before { content: ""; position: absolute; inset: 0; }
.njl-visual svg { width: 116px; height: 116px; position: relative; z-index: 1; }
.njl-visual-numbers::before { background: radial-gradient(ellipse 90% 90% at 50% 40%, rgba(232,199,102,0.38), transparent 70%), linear-gradient(160deg, #fbe6c8 0%, #edc077 100%); }
.njl-visual-name::before { background: radial-gradient(ellipse 90% 90% at 50% 40%, rgba(124,15,46,0.18), transparent 70%), linear-gradient(160deg, #f6e2c2 0%, #e6b877 100%); }
.njl-visual-relationships::before { background: radial-gradient(ellipse 90% 90% at 50% 40%, rgba(184,134,11,0.26), transparent 70%), linear-gradient(160deg, #f7e6c4 0%, #e3ba77 100%); }
.njl-visual-glow { position: absolute; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.55), transparent 70%); opacity: 0.6; animation: glow-pulse 6s ease-in-out infinite; }

.njl-body { position: relative; padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.njl-cat { font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); display: inline-flex; align-items: center; gap: 7px; }
.njl-cat::before { content: ""; width: 16px; height: 1px; background: var(--gold); display: inline-block; }
.njl-card h3 { font-size: 1.14rem; margin: 2px 0 0; color: var(--maroon-deep); line-height: 1.32; }
.njl-card p { font-size: 0.88rem; margin: 0; color: var(--ink-soft); line-height: 1.55; }
.njl-meta { font-size: 0.7rem; letter-spacing: 0.03em; color: var(--gold-deep); font-weight: 600; text-transform: uppercase; opacity: 0.8; font-style: italic; margin-top: 2px; }
.njl-link { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; color: var(--gold-deep); transition: color 0.3s ease; }
.njl-link .arrow { display: inline-block; transition: transform 0.35s ease; }
.njl-card:hover .njl-link { color: var(--maroon); }
.njl-card:hover .njl-link .arrow { transform: translateX(5px); }

/* -- bottom divider + CTA -- */
.njl-bottom { margin-top: 46px; text-align: center; }
.njl-bottom .ornament { margin-bottom: 26px; }
.njl-cta-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 30px; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.03em;
  background: linear-gradient(135deg, rgba(255,248,224,0.55), rgba(232,199,102,0.24));
  border: 1.5px solid var(--gold); color: var(--maroon-deep);
  box-shadow: 0 0 0 1px rgba(184,134,11,0.12), 0 6px 16px rgba(184,134,11,0.14);
  transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, transform 0.3s ease;
}
.njl-cta-btn:hover { background: var(--gold-pale-soft); box-shadow: 0 0 0 1px var(--gold), 0 10px 26px rgba(184,134,11,0.26); transform: translateY(-3px); color: var(--maroon); }
.njl-cta-btn .arrow { transition: transform 0.35s ease; }
.njl-cta-btn:hover .arrow { transform: translateX(4px); }

@media (max-width: 780px) {
  .njl-grid { margin-top: 36px; }
  .njl-geo, .njl-num, .njl-lotus, .njl-line, .njl-head-ring, .njl-book, .njl-corner, .njl-scribble { display: none; }
  .njl-visual { height: 150px; }
  .njl-visual svg { width: 96px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .njl-geo, .njl-num, .njl-star, .njl-particle, .njl-lotus, .njl-visual-glow, .njl-head-ring, .njl-head-ring::before, .njl-crest-ring, .njl-crest-ring::before { animation: none !important; }
}

/* ===== Feature Card Detail Modal ===== */
.feature-card { cursor: pointer; }
.feature-card .card-more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold-deep); opacity: 0; transform: translateY(4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.feature-card .card-more .arrow { transition: transform 0.35s ease; }
.feature-card:hover .card-more, .feature-card:focus-visible .card-more { opacity: 1; transform: translateY(0); }
.feature-card:hover .card-more .arrow, .feature-card:focus-visible .card-more .arrow { transform: translateX(4px); }
.feature-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

@keyframes sanskrit-breathe { 0%, 100% { opacity: 0.06; } 50% { opacity: 0.13; } }
@keyframes mandala-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes glow-pulse { 0%, 100% { opacity: 0.55; transform: scale(0.94); } 50% { opacity: 0.9; transform: scale(1.05); } }

/* ===== Service Card Detail Modal ===== */
.svc-modal-overlay {
  position: fixed; inset: 0; z-index: 550;
  background: color-mix(in srgb, #1a0d08 72%, transparent);
  backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.svc-modal-overlay.open { opacity: 1; visibility: visible; transition: opacity 0.4s ease, visibility 0s linear 0s; }
.svc-modal {
  position: relative; width: 100%; max-width: 580px; max-height: 88vh; overflow-y: auto; overflow-x: hidden;
  border-radius: calc(var(--radius-lg) + 10px);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 34px 90px rgba(15,8,6,0.5), 0 0 0 1px rgba(255,255,255,0.05) inset;
  transform: translateY(24px) scale(0.95); opacity: 0;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1), opacity 0.45s ease, background 0.5s ease;
  --svc-text: var(--ink); --svc-text-soft: var(--ink-soft); --svc-heading: var(--maroon-deep);
}
.svc-modal-overlay.open .svc-modal { transform: translateY(0) scale(1); opacity: 1; }
.svc-modal::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--metal-3), var(--metal-1), var(--metal-3), transparent);
}
.svc-modal-close {
  position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; z-index: 4;
  color: var(--svc-heading); background: color-mix(in srgb, currentColor 14%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
  font-size: 1.3rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  font-family: var(--font-body); backdrop-filter: blur(3px);
}
.svc-modal-close:hover, .svc-modal-close:focus-visible {
  transform: rotate(90deg);
  box-shadow: 0 0 20px 3px color-mix(in srgb, var(--gold) 45%, transparent);
  background: color-mix(in srgb, currentColor 24%, transparent);
}
.svc-modal-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.svc-bg-consultation, .svc-bg-namecorrection, .svc-bg-babyname, .svc-bg-businessname, .svc-bg-mobile, .svc-bg-career, .svc-bg-lucky {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.55s ease;
}
.svc-modal-corner { position: absolute; width: 30px; height: 30px; z-index: 2; pointer-events: none; opacity: 0.8; }
.svc-modal-corner svg { width: 100%; height: 100%; display: block; }
.svc-modal-corner.tl { top: 10px; left: 10px; }
.svc-modal-corner.bl { bottom: 10px; left: 10px; transform: scaleY(-1); }
.svc-modal-corner.br { bottom: 10px; right: 10px; transform: scale(-1,-1); }

.svc-modal-content { position: relative; z-index: 1; padding: 48px 42px 40px; }
.svc-modal-content .icon {
  margin: 0 auto 20px; opacity: 0; transform: scale(0.6) rotate(-14deg);
  animation: svc-icon-intro 0.7s cubic-bezier(.2,.8,.2,1) 0.15s forwards !important;
}
@keyframes svc-icon-intro { to { opacity: 1; transform: scale(1) rotate(0deg); } }
.svc-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--svc-heading); opacity: 0.85; margin-bottom: 10px; text-align: center;
}
.svc-eyebrow::before, .svc-eyebrow::after { content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.5; }
.svc-modal-content h3 { font-size: clamp(1.7rem, 4vw, 2.3rem); text-align: center; color: var(--svc-heading); margin-bottom: 18px; }
.svc-intro { font-size: 1.08rem; line-height: 1.7; color: var(--svc-text-soft); text-align: center; max-width: 46ch; margin: 0 auto 26px; }
.svc-divider { width: 70px; height: 2px; margin: 0 auto 26px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.85; }
.svc-section-heading {
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--svc-heading); text-align: center; margin-bottom: 20px; opacity: 0.92;
}
.svc-list { list-style: none; padding: 0; margin: 0 auto 30px; display: grid; gap: 14px; max-width: 440px; }
.svc-list li { position: relative; padding-left: 32px; font-size: 1rem; line-height: 1.55; color: var(--svc-text); }
.svc-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0.05em; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 0.66rem; font-weight: 700;
  background: linear-gradient(145deg, var(--metal-2), var(--metal-4)); color: var(--maroon-ink);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent);
}
.svc-closing { font-family: var(--font-display); font-style: italic; font-size: 1.18rem; text-align: center; color: var(--svc-heading); margin: 0 0 28px; }
.svc-cta-row { display: flex; justify-content: center; }
.svc-cta { position: relative; overflow: hidden; }
.svc-cta::before {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; z-index: 1; pointer-events: none;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg); animation: about-cta-shimmer 6.5s ease-in-out infinite;
}
.svc-cta .cta-arrow { display: inline-block; transition: transform 0.35s ease; margin-left: 2px; }
.svc-cta:hover .cta-arrow, .svc-cta:focus-visible .cta-arrow { transform: translateX(5px); }

/* -- Shared decorative primitives -- */
.svc-dust {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, var(--metal-1) 0%, var(--metal-3) 55%, transparent 78%);
  box-shadow: 0 0 9px 2px rgba(232,196,106,0.45);
  animation: particle-float 13s ease-in-out infinite;
}
.svc-glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(232,196,106,0.32) 0%, transparent 70%);
  animation: glow-pulse 7s ease-in-out infinite;
}
.svc-ring-svg { position: absolute; opacity: 0.5; animation: mandala-spin 110s linear infinite; }
.svc-grid {
  position: absolute; inset: -20%; opacity: 0.1;
  background-image: linear-gradient(rgba(232,196,106,0.9) 1px, transparent 1px), linear-gradient(90deg, rgba(232,196,106,0.9) 1px, transparent 1px);
  background-size: 42px 42px;
  animation: dust-drift 34s linear infinite;
}
.svc-star {
  position: absolute; color: var(--gold-deep); font-size: 0.8rem; opacity: 0;
  animation: sparkle-twinkle 4.5s ease-in-out infinite;
}
.svc-lines-svg { position: absolute; opacity: 0.55; }
.svc-glyph {
  position: absolute; font-family: var(--font-display); font-weight: 700; color: var(--gold-deep);
  opacity: 0.16; line-height: 1; animation: particle-float 14s ease-in-out infinite;
}
.svc-flow-path { stroke-dasharray: 5 9; animation: svc-line-flow 7s linear infinite; }
@keyframes svc-line-flow { to { stroke-dashoffset: -140; } }
.svc-bars-svg { position: absolute; opacity: 0.16; animation: glow-pulse 8s ease-in-out infinite; }

/* -- Theme 1: Numerology Consultation — deep burgundy + antique gold -- */
.svc-modal.theme-consultation {
  background:
    radial-gradient(ellipse 340px 280px at 14% 6%, rgba(232,196,106,0.16), transparent 62%),
    radial-gradient(ellipse 300px 260px at 90% 96%, rgba(120,20,30,0.55), transparent 64%),
    linear-gradient(160deg, #33101a 0%, #4d1620 42%, #2a0d12 100%);
  --svc-text: #f3e3d3; --svc-text-soft: #e7cdb8; --svc-heading: #f3d9a8;
}
.svc-modal.theme-consultation .svc-bg-consultation { opacity: 1; }

/* -- Theme 2: Name Correction — deep emerald + muted gold -- */
.svc-modal.theme-namecorrection {
  background:
    radial-gradient(circle 260px at 8% 96%, rgba(232,196,106,0.14), transparent 64%),
    radial-gradient(circle 300px at 96% 6%, rgba(20,90,70,0.55), transparent 62%),
    linear-gradient(155deg, #0a3327 0%, #12523f 48%, #082820 100%);
  --svc-text: #eaf3ee; --svc-text-soft: #cfe4da; --svc-heading: #eccf94;
}
.svc-modal.theme-namecorrection .svc-bg-namecorrection { opacity: 1; }

/* -- Theme 3: Baby Name Selection — soft sage / ivory / peach + warm gold -- */
.svc-modal.theme-babyname {
  background:
    radial-gradient(circle 280px at 12% 10%, rgba(255,255,255,0.55), transparent 62%),
    radial-gradient(circle 320px at 92% 92%, rgba(244,201,169,0.5), transparent 64%),
    linear-gradient(155deg, #f6f2e6 0%, #fbeadb 55%, #eef1e2 100%);
  --svc-text: #4a3324; --svc-text-soft: #6b4d38; --svc-heading: #7a2438;
}
.svc-modal.theme-babyname .svc-bg-babyname { opacity: 1; }

/* -- Theme 4: Business Name — deep forest / teal + gold -- */
.svc-modal.theme-businessname {
  background:
    radial-gradient(circle 260px at 92% 10%, rgba(232,196,106,0.14), transparent 60%),
    radial-gradient(circle 320px at 6% 94%, rgba(10,70,64,0.55), transparent 64%),
    linear-gradient(160deg, #07231f 0%, #0e3f38 48%, #061e1b 100%);
  --svc-text: #e8f2ef; --svc-text-soft: #c9ddd7; --svc-heading: #efd396;
}
.svc-modal.theme-businessname .svc-bg-businessname { opacity: 1; }

/* -- Theme 5: Mobile Number Analysis — deep indigo / navy + gold -- */
.svc-modal.theme-mobile {
  background:
    radial-gradient(circle 260px at 90% 8%, rgba(232,196,106,0.14), transparent 60%),
    radial-gradient(circle 300px at 8% 96%, rgba(30,48,110,0.55), transparent 64%),
    linear-gradient(160deg, #0c1730 0%, #182a58 48%, #0a1226 100%);
  --svc-text: #e9edf7; --svc-text-soft: #c9d1e8; --svc-heading: #eed69c;
}
.svc-modal.theme-mobile .svc-bg-mobile { opacity: 1; }

/* -- Theme 6: Career & Finance — bronze / charcoal + gold -- */
.svc-modal.theme-career {
  background:
    radial-gradient(circle 260px at 10% 8%, rgba(232,196,106,0.16), transparent 60%),
    radial-gradient(circle 320px at 94% 94%, rgba(90,58,20,0.5), transparent 64%),
    linear-gradient(160deg, #1c140d 0%, #34220f 48%, #17110b 100%);
  --svc-text: #f2e9dd; --svc-text-soft: #d9c7ae; --svc-heading: #f0d59a;
}
.svc-modal.theme-career .svc-bg-career { opacity: 1; }

/* -- Theme 7: Lucky Number & Dates — deep plum / maroon + antique gold -- */
.svc-modal.theme-lucky {
  background:
    radial-gradient(circle 280px at 90% 94%, rgba(232,196,106,0.15), transparent 62%),
    radial-gradient(circle 300px at 8% 6%, rgba(110,25,90,0.5), transparent 64%),
    linear-gradient(160deg, #2c0f26 0%, #481a3d 48%, #260d20 100%);
  --svc-text: #f4e6f0; --svc-text-soft: #ddc3d6; --svc-heading: #f2d79e;
}
.svc-modal.theme-lucky .svc-bg-lucky { opacity: 1; }

/* -- Per-theme decorative placement -- */
.svc-bg-consultation .svc-ring-svg { top: -60px; right: -60px; width: 240px; height: 240px; }
.svc-bg-consultation .svc-glow { top: 45%; left: 50%; width: 240px; height: 240px; margin: -120px 0 0 -120px; }
.svc-bg-namecorrection .svc-lines-svg { inset: 0; width: 100%; height: 100%; }
.svc-bg-namecorrection .svc-ring-svg { bottom: -70px; left: -70px; width: 220px; height: 220px; animation-duration: 130s; }
.svc-bg-babyname .svc-glow { top: 20%; left: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; animation-duration: 9s; }
.svc-bg-businessname .svc-grid { transform: rotate(-4deg) scale(1.2); }
.svc-bg-businessname .svc-ring-svg { top: -50px; left: -50px; width: 200px; height: 200px; opacity: 0.3; }
.svc-bg-mobile .svc-lines-svg { inset: 0; width: 100%; height: 100%; }
.svc-bg-career .svc-grid { transform: rotate(3deg) scale(1.2); }
.svc-bg-career .svc-glow { bottom: -60px; right: -40px; width: 220px; height: 220px; }
.svc-bg-lucky .svc-ring-svg { bottom: -70px; right: -70px; width: 240px; height: 240px; }
.svc-bg-lucky .svc-glow { top: 12%; left: 14%; width: 180px; height: 180px; animation-duration: 8s; }

@media (max-width: 780px) {
  .svc-modal-content { padding: 40px 26px 32px; }
  .svc-modal-content h3 { font-size: 1.55rem; }
  .svc-intro { font-size: 1rem; }
  .svc-list { gap: 12px; }
  .svc-ring-svg, .svc-grid, .svc-lines-svg { opacity: 0.35; }
}
@media (max-width: 480px) {
  .svc-modal-content { padding: 34px 20px 28px; }
  .svc-ring-svg { width: 160px !important; height: 160px !important; }
}

/* ===== ₹25 Quick Question Modal ===== */
.qq-modal-overlay {
  position: fixed; inset: 0; z-index: 570;
  background: color-mix(in srgb, #1a0d08 72%, transparent);
  backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.qq-modal-overlay.open { opacity: 1; visibility: visible; transition: opacity 0.4s ease, visibility 0s linear 0s; }
.qq-modal {
  position: relative; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; overflow-x: hidden;
  border-radius: calc(var(--radius-lg) + 10px);
  background: var(--card-grad);
  border: 1px solid var(--line-gold);
  box-shadow: 0 34px 90px rgba(15,8,6,0.5), 0 0 0 1px rgba(255,255,255,0.05) inset;
  transform: translateY(24px) scale(0.95); opacity: 0;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1), opacity 0.45s ease;
}
.qq-modal-overlay.open .qq-modal { transform: translateY(0) scale(1); opacity: 1; }
.qq-modal::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--metal-3), var(--metal-1), var(--metal-3), transparent);
}
.qq-modal-close {
  position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; z-index: 5;
  color: var(--maroon-deep); background: color-mix(in srgb, currentColor 12%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  font-size: 1.25rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  font-family: var(--font-body);
}
.qq-modal-close:hover, .qq-modal-close:focus-visible {
  transform: rotate(90deg);
  box-shadow: 0 0 18px 3px color-mix(in srgb, var(--gold) 45%, transparent);
}
.qq-modal-content { position: relative; z-index: 1; padding: 40px 34px 34px; }
@media (max-width: 560px) { .qq-modal-content { padding: 56px 22px 28px; } }

.qq-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 8px; text-align: center;
}
.qq-eyebrow::before, .qq-eyebrow::after { content: ""; width: 20px; height: 1px; background: currentColor; opacity: 0.5; }
.qq-modal-content h3 { font-size: clamp(1.5rem, 3.6vw, 1.9rem); text-align: center; color: var(--maroon-deep); margin-bottom: 20px; }

.qq-progress { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 26px; }
.qq-progress .dot {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--line); font-family: var(--font-body); font-size: 0.72rem; font-weight: 700;
  color: var(--ink-soft); opacity: 0.6; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.qq-progress .dot.active { opacity: 1; background: linear-gradient(145deg, var(--metal-2), var(--metal-4)); border-color: var(--gold); color: var(--maroon-ink); }
.qq-progress .bar { width: 22px; height: 1.5px; background: var(--line); opacity: 0.7; }

.qq-step .field { margin-bottom: 16px; }
.qq-step .field:last-of-type { margin-bottom: 0; }
.qq-error { min-height: 1.1em; font-size: 0.84rem; color: var(--om-red); margin: 12px 0 0; text-align: center; }

.qq-section-label { font-size: 0.8rem; font-weight: 600; color: var(--maroon-deep); margin: 0 0 12px; letter-spacing: 0.01em; }
.qq-req { color: var(--om-red); }

.qq-question-grid { display: grid; gap: 9px; margin-bottom: 4px; }
.qq-question-card {
  position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  padding: 12px 15px; border-radius: var(--radius); border: 1.5px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.qq-question-card:hover { border-color: var(--gold); transform: translateY(-1px); }
.qq-question-card input { position: absolute; opacity: 0; pointer-events: none; }
.qq-q-mark {
  flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  border: 1.5px solid var(--line-gold); position: relative; transition: border-color 0.25s ease;
}
.qq-q-mark::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold);
  transform: scale(0); transition: transform 0.22s cubic-bezier(.2,.8,.2,1);
}
.qq-question-card input:checked ~ .qq-q-mark { border-color: var(--gold); }
.qq-question-card input:checked ~ .qq-q-mark::after { transform: scale(1); }
.qq-question-card.selected { border-color: var(--gold); background: var(--gold-pale-soft); box-shadow: 0 0 0 1px var(--gold-pale-soft); }
.qq-q-text { font-size: 0.9rem; line-height: 1.42; color: var(--ink); }

.qq-note-field { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.qq-note-field label {
  display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-soft); margin-bottom: 6px; font-weight: 600;
}
.qq-note-field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font-body); font-size: 0.86rem; background: var(--bg); color: var(--ink);
  resize: vertical; min-height: 60px;
}
.qq-note-field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.qq-note-help { font-size: 0.74rem; color: var(--ink-soft); opacity: 0.85; margin: 6px 0 0; }

.qq-review-list { display: grid; gap: 10px; margin-bottom: 20px; }
.qq-review-row { display: grid; grid-template-columns: 118px 1fr; gap: 10px; font-size: 0.88rem; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.qq-review-row:last-child { border-bottom: none; }
.qq-review-row .qq-rlabel { font-weight: 700; color: var(--gold-deep); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 2px; }
.qq-review-row .qq-rval { color: var(--ink); line-height: 1.5; }
.qq-review-row .qq-rval.qq-review-empty { color: var(--ink-soft); font-style: italic; opacity: 0.85; }
.qq-review-fee { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: var(--radius); background: var(--gold-pale-soft); margin-bottom: 22px; }
.qq-review-fee strong { color: var(--maroon-deep); font-family: var(--font-display); font-size: 1.2rem; }

.qq-step-actions { display: flex; gap: 12px; margin-top: 22px; justify-content: space-between; }
.qq-step-actions .btn { flex: 1; justify-content: center; }
.qq-step-actions.single { justify-content: center; }
.qq-step-actions.single .btn { flex: none; }

.qq-confirm-panel { text-align: center; padding: 4px 0 0; }
.qq-confirm-icon {
  width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%;
  background: linear-gradient(145deg, var(--metal-2), var(--metal-4)); color: var(--maroon-ink);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  box-shadow: 0 0 0 1px var(--gold-pale-soft), 0 10px 24px rgba(184,134,11,0.28);
}
.qq-confirm-panel h4 { font-family: var(--font-display); color: var(--maroon-deep); font-size: 1.35rem; margin: 0 0 10px; }
.qq-confirm-panel p { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6; }
.qq-confirm-question { font-style: italic; color: var(--maroon-deep); }
.qq-confirm-reqid {
  display: inline-block; margin: 12px 0 16px; padding: 7px 16px; border-radius: 999px;
  border: 1px dashed var(--line-gold); font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  color: var(--gold-deep); letter-spacing: 0.03em;
}
.qq-confirm-note-row { margin: 14px 0; padding: 12px 14px; border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid var(--line); text-align: left; }
.qq-confirm-note-row .qq-rlabel { display: block; font-weight: 700; color: var(--gold-deep); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.qq-confirm-note { color: var(--ink); font-style: italic; }

/* -- intro / service-boundary copy -- */
.qq-intro { font-size: 0.88rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 18px; padding: 12px 14px; border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--line); }
.qq-intro strong { color: var(--maroon-deep); }
.qq-disclaimer { font-size: 0.72rem; line-height: 1.5; color: var(--ink-soft); opacity: 0.8; margin: 8px 0 0; }

/* -- field helper text -- */
.qq-field-help { font-size: 0.72rem; color: var(--ink-soft); opacity: 0.85; margin: 5px 0 0; line-height: 1.4; }

/* -- mobile number: fixed +91 prefix -- */
.qq-mobile-wrap { display: flex; align-items: stretch; gap: 0; }
.qq-mobile-prefix {
  display: flex; align-items: center; justify-content: center; padding: 0 12px;
  border: 1px solid var(--line); border-right: none; border-radius: var(--radius) 0 0 var(--radius);
  background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--ink-soft);
  font-family: var(--font-body); font-size: 0.94rem; font-weight: 600; flex-shrink: 0;
}
.qq-mobile-wrap input { border-radius: 0 var(--radius) var(--radius) 0 !important; flex: 1 1 auto; width: auto !important; min-width: 0; }

/* -- privacy consent note -- */
.qq-privacy-note { font-size: 0.76rem; line-height: 1.55; color: var(--ink-soft); opacity: 0.9; margin: 4px 0 18px; padding: 10px 12px; border-left: 2px solid var(--line-gold); }

/* -- payment panel -- */
.qq-payment-panel { text-align: center; padding: 4px 0 0; }
.qq-status-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px;
  font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--gold-pale-soft); color: var(--gold-deep); border: 1px solid var(--line-gold); margin-bottom: 14px;
}
.qq-status-pill.is-reported { background: color-mix(in srgb, #4a8f4a 16%, transparent); color: #2f6b2f; border-color: color-mix(in srgb, #4a8f4a 45%, transparent); }
.qq-status-pill.is-failed { background: color-mix(in srgb, var(--om-red) 14%, transparent); color: var(--om-red); border-color: color-mix(in srgb, var(--om-red) 40%, transparent); }
.qq-payment-panel h4 { font-family: var(--font-display); color: var(--maroon-deep); font-size: 1.35rem; margin: 0 0 8px; }
.qq-payment-panel > p { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.6; margin: 0 0 18px; }
.qq-qr-wrap {
  width: 176px; height: 176px; margin: 0 auto 14px; padding: 10px; border-radius: var(--radius);
  background: #fdf6e3; border: 1px solid var(--line-gold); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
}
.qq-qr-wrap img, .qq-qr-wrap canvas, .qq-qr-wrap table { display: block; max-width: 100%; }
.qq-qr-caption { font-size: 0.72rem; color: var(--ink-soft); opacity: 0.85; margin: 0 0 18px; }
.qq-upi-id { font-size: 0.82rem; color: var(--ink-soft); margin: 0 0 16px; }
.qq-upi-id strong { color: var(--maroon-deep); font-family: var(--font-body); letter-spacing: 0.01em; }
.qq-pay-note { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.55; margin: 16px 0; }
.qq-pay-amount { font-family: var(--font-display); font-size: 2rem; color: var(--maroon-deep); margin: 0 0 14px; }

@media (max-width: 480px) {
  .qq-review-row { grid-template-columns: 1fr; gap: 3px; }
  .qq-step-actions { flex-direction: column; }
  .qq-mobile-prefix { padding: 0 9px; font-size: 0.88rem; }
}

/* ===== Webinars: Previous, Live & Upcoming grid ===== */
.webinars-section {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 60% 50% at 12% -6%, rgba(255,250,232,0.9), transparent 62%),
    radial-gradient(ellipse 55% 48% at 92% 4%, rgba(232,199,102,0.32), transparent 60%),
    radial-gradient(ellipse 58% 50% at 88% 100%, rgba(230,190,84,0.26), transparent 62%),
    radial-gradient(ellipse 46% 40% at 4% 96%, rgba(233,196,100,0.24), transparent 60%),
    linear-gradient(172deg, #fffaf0 0%, #fdf3da 22%, #f8e9c2 48%, #f3ddab 72%, #ecd08f 100%);
}
.webinars-section .container { position: relative; z-index: 2; }
.webinars-section .section-head h2 { color: var(--maroon-deep); }
.webinars-section .eyebrow { color: var(--gold-deep); }

/* -- atmosphere: subtle geometry, numbers, sparkles, particles, lotus corners -- */
.wbn-atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

.wbn-geo { position: absolute; border-radius: 50%; border: 1px solid rgba(184,134,11,0.14); }
.wbn-geo.g1 { width: 460px; height: 460px; top: -170px; left: -130px; animation: ring-spin-cw 220s linear infinite; }
.wbn-geo.g2 { width: 320px; height: 320px; bottom: -130px; right: -95px; border-color: rgba(122,16,48,0.10); animation: ring-spin-ccw 180s linear infinite; }
.wbn-geo.g3 { width: 200px; height: 200px; top: 14%; right: 8%; border-color: rgba(184,134,11,0.10); animation: ring-spin-cw 140s linear infinite; }

.wbn-num { position: absolute; font-family: var(--font-display); font-weight: 700; color: var(--gold-deep); opacity: 0.10; animation-name: about-num-float; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.wbn-num.n1 { top: 8%; left: 3%; font-size: 2.6rem; animation-duration: 13s; --ax: 8px; --ay: -12px; }
.wbn-num.n2 { top: 60%; right: 2.6%; font-size: 3.2rem; animation-duration: 15s; animation-delay: -5s; --ax: -8px; --ay: 10px; }
.wbn-num.n3 { bottom: 6%; left: 6%; font-size: 2.1rem; animation-duration: 12s; animation-delay: -3s; --ax: 6px; --ay: -9px; }
.wbn-num.n4 { top: 30%; right: 4.5%; font-size: 1.7rem; animation-duration: 14s; animation-delay: -7s; --ax: -6px; --ay: 11px; }
.wbn-num.n5 { bottom: 24%; right: 1.8%; font-size: 2.3rem; animation-duration: 16s; animation-delay: -2s; --ax: 7px; --ay: -8px; }

.wbn-star { position: absolute; color: var(--gold-deep); font-size: 0.68rem; opacity: 0; animation: sparkle-twinkle 5.4s ease-in-out infinite; }
.wbn-star.s1 { top: 10%; left: 1.8%; animation-delay: 0s; }
.wbn-star.s2 { top: 42%; right: 1.6%; animation-delay: 1.6s; font-size: 0.5rem; }
.wbn-star.s3 { bottom: 18%; left: 2%; animation-delay: 2.8s; }
.wbn-star.s4 { bottom: 44%; right: 2.4%; animation-delay: 3.6s; font-size: 0.5rem; }
.wbn-star.s5 { top: 68%; left: 4%; animation-delay: 2s; font-size: 0.55rem; }

.wbn-particle { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: 0; box-shadow: 0 0 8px 2px var(--gold-pale-soft); animation: particle-float linear infinite; }
.wbn-particle.p1 { top: 18%; left: 4%; --pf-x: 18px; --pf-y: -34px; animation-duration: 10s; }
.wbn-particle.p2 { bottom: 16%; right: 5%; --pf-x: -16px; --pf-y: -30px; animation-duration: 9s; animation-delay: 3s; }
.wbn-particle.p3 { top: 50%; left: 2%; --pf-x: 14px; --pf-y: -28px; animation-duration: 11s; animation-delay: 5s; }

.wbn-line { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, rgba(184,134,11,0.35), transparent); }
.wbn-line.ln1 { top: 22%; left: 6%; width: 220px; transform: rotate(-8deg); }
.wbn-line.ln2 { bottom: 20%; right: 8%; width: 180px; transform: rotate(6deg); }

.wbn-lotus { position: absolute; width: 130px; height: 130px; opacity: 0.09; animation: wbn-lotus-breathe 9s ease-in-out infinite; }
.wbn-lotus.l1 { top: -30px; left: -30px; }
.wbn-lotus.l2 { bottom: -34px; right: -30px; animation-delay: -4s; }
@keyframes wbn-lotus-breathe {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.08; }
  50% { transform: scale(1.06) rotate(3deg); opacity: 0.15; }
}

/* -- section head extras -- */
.wbn-tagline { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--gold-deep); margin: 2px 0 14px; letter-spacing: 0.02em; }
.wbn-tagline .wbn-dot { color: var(--gold); opacity: 0.75; margin: 0 7px; font-style: normal; }

/* -- webinar cards -- */
.webinars-grid { margin-top: 50px; }
.wbn-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--card-grad); border: 1px solid var(--line-gold); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), 0 1px 0 rgba(255,246,218,0.6) inset;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.4s ease;
}
.wbn-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-soft), var(--shadow-glow), 0 1px 0 rgba(255,246,218,0.6) inset; border-color: var(--gold); }

.wbn-visual { position: relative; height: 158px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--line-gold); }
.wbn-visual::before { content: ""; position: absolute; inset: 0; }
.wbn-visual svg { width: 108px; height: 108px; position: relative; z-index: 1; }
.wbn-visual-numbers::before { background: radial-gradient(ellipse 90% 90% at 50% 40%, rgba(232,199,102,0.32), transparent 70%), linear-gradient(160deg, #fbead0 0%, #f3d9a4 100%); }
.wbn-visual-hearts::before { background: radial-gradient(ellipse 90% 90% at 50% 40%, rgba(230,150,110,0.28), transparent 70%), linear-gradient(160deg, #fbe3d6 0%, #f0c9ae 100%); }
.wbn-visual-lotus::before { background: radial-gradient(ellipse 90% 90% at 50% 40%, rgba(150,90,190,0.22), transparent 70%), linear-gradient(160deg, #f3e6da 0%, #e6cdb0 100%); }
.wbn-visual-glow { position: absolute; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.55), transparent 70%); opacity: 0.6; animation: glow-pulse 6s ease-in-out infinite; }

.wbn-body { position: relative; padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.wbn-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line-gold); color: var(--gold-deep); background: var(--gold-pale-soft); }
.wbn-badge.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--maroon); box-shadow: 0 0 6px rgba(124,15,46,0.5); animation: sparkle-twinkle 2.4s ease-in-out infinite; }
.wbn-badge.demand { color: var(--gold-deep); border-color: var(--line-gold); background: rgba(184,134,11,0.06); }

.wbn-card h3 { font-size: 1.12rem; margin: 2px 0 0; color: var(--maroon-deep); }
.wbn-card p { font-size: 0.88rem; margin: 0; color: var(--ink-soft); line-height: 1.55; }
.wbn-meta { font-size: 0.7rem; letter-spacing: 0.03em; color: var(--gold-deep); font-weight: 600; text-transform: uppercase; opacity: 0.85; margin-top: 2px; }
.wbn-link { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; color: var(--gold-deep); transition: color 0.3s ease; }
.wbn-link .arrow { display: inline-block; transition: transform 0.35s ease; }
.wbn-card:hover .wbn-link { color: var(--maroon); }
.wbn-card:hover .wbn-link .arrow { transform: translateX(5px); }

/* -- bottom divider + CTA -- */
.wbn-bottom { margin-top: 46px; text-align: center; }
.wbn-bottom .ornament { margin-bottom: 26px; }
.wbn-cta-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 30px; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.03em;
  background: transparent; border: 1.5px solid var(--gold); color: var(--maroon-deep);
  transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, transform 0.3s ease;
}
.wbn-cta-btn:hover { background: var(--gold-pale-soft); box-shadow: 0 8px 22px rgba(184,134,11,0.18); transform: translateY(-3px); color: var(--maroon); }
.wbn-cta-btn .arrow { transition: transform 0.35s ease; }
.wbn-cta-btn:hover .arrow { transform: translateX(4px); }

@media (max-width: 780px) {
  .webinars-grid { margin-top: 36px; }
  .wbn-geo, .wbn-num, .wbn-lotus, .wbn-line { display: none; }
  .wbn-visual { height: 138px; }
  .wbn-visual svg { width: 92px; height: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .wbn-geo, .wbn-num, .wbn-star, .wbn-particle, .wbn-lotus, .wbn-visual-glow, .wbn-badge.live::before { animation: none !important; }
}

/* ===== About / Meet Your Guide — Premium Upgrade ===== */
.about-section { position: relative; overflow: hidden; }
.about-grid { grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 54px; position: relative; z-index: 1; }

.about-atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.about-atmosphere::before {
  content: ""; position: absolute; inset: -10%;
  background: radial-gradient(ellipse 520px 380px at 22% 30%, var(--gold-pale-soft), transparent 60%),
              radial-gradient(ellipse 460px 360px at 82% 76%, var(--wine-pale-soft), transparent 62%);
  opacity: 0.9; animation: about-light-drift 16s ease-in-out infinite;
}
.about-atmosphere::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 45%, transparent 55%, rgba(43,23,16,0.12) 100%);
}
.about-halo {
  position: absolute; top: 50%; left: 50%; width: min(920px, 92%); height: min(640px, 78%);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, var(--gold-pale-soft), transparent 68%);
  opacity: 0.55; animation: about-halo-pulse 9s ease-in-out infinite;
}
@keyframes about-halo-pulse { 0%, 100% { opacity: 0.42; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.62; transform: translate(-50%, -50%) scale(1.06); } }
.about-num {
  position: absolute; font-family: var(--font-display); font-weight: 700; color: var(--gold-deep);
  opacity: 0.3; line-height: 1; will-change: transform;
  text-shadow: 0 0 16px var(--gold-pale-soft), 0 0 5px rgba(43,23,16,0.3);
  animation-name: about-num-float; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
.about-num.n1 { top: 10%; left: 6%; font-size: 2.4rem; opacity: 0.34; animation-duration: 24s; --ax: 16px; --ay: -24px; --ar: 4deg; }
.about-num.n2 { top: 68%; left: 4%; font-size: 1.7rem; opacity: 0.27; filter: blur(0.5px); animation-duration: 20s; animation-delay: -3s; --ax: -14px; --ay: -18px; --ar: -3deg; }
.about-num.n3 { top: 22%; left: 88%; font-size: 3.2rem; opacity: 0.37; color: var(--maroon); text-shadow: 0 0 20px var(--wine-pale-soft), 0 0 5px rgba(43,23,16,0.3); animation-duration: 27s; animation-delay: -8s; --ax: -18px; --ay: 20px; --ar: 3deg; }
.about-num.n4 { top: 78%; left: 90%; font-size: 1.9rem; opacity: 0.26; filter: blur(0.4px); animation-duration: 21s; animation-delay: -5s; --ax: 14px; --ay: -16px; --ar: -4deg; }
.about-num.n5 { top: 4%; left: 46%; font-size: 1.5rem; opacity: 0.25; color: var(--metal-1); animation-duration: 19s; animation-delay: -10s; --ax: 10px; --ay: 18px; --ar: 2deg; }
.about-num.n6 { top: 88%; left: 42%; font-size: 2.1rem; opacity: 0.34; color: var(--maroon); text-shadow: 0 0 20px var(--wine-pale-soft), 0 0 5px rgba(43,23,16,0.3); animation-duration: 25s; animation-delay: -14s; --ax: -12px; --ay: -14px; --ar: -2deg; }
.about-num.n7 { top: 40%; left: 12%; font-size: 1.4rem; opacity: 0.25; filter: blur(0.6px); animation-duration: 23s; animation-delay: -6s; --ax: 12px; --ay: 14px; --ar: 3deg; }
.about-num.n8 { top: 50%; left: 92%; font-size: 1.6rem; opacity: 0.27; animation-duration: 26s; animation-delay: -12s; --ax: -10px; --ay: 16px; --ar: -3deg; }
.about-num.n9 { top: 8%; left: 70%; font-size: 1.8rem; opacity: 0.29; filter: blur(0.4px); animation-duration: 22s; animation-delay: -9s; --ax: 14px; --ay: -12px; --ar: 2deg; }
.about-num.n10 { top: 6%; left: 30%; font-size: 1.3rem; opacity: 0.22; color: var(--metal-1); filter: blur(0.5px); animation-duration: 28s; animation-delay: -4s; --ax: 12px; --ay: -16px; --ar: 5deg; }
.about-num.n11 { top: 94%; left: 66%; font-size: 1.6rem; opacity: 0.24; animation-duration: 24s; animation-delay: -17s; --ax: -14px; --ay: 12px; --ar: -5deg; }
.about-num.n12 { top: 3%; left: 82%; font-size: 1.1rem; opacity: 0.2; filter: blur(0.6px); animation-duration: 30s; animation-delay: -20s; --ax: 8px; --ay: -10px; --ar: 3deg; }
.about-num.n13 { top: 92%; left: 34%; font-size: 1.35rem; opacity: 0.23; color: var(--maroon); animation-duration: 26s; animation-delay: -2s; --ax: -10px; --ay: -14px; --ar: -4deg; }
@keyframes about-num-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(var(--ax, 14px), var(--ay, -18px)) rotate(var(--ar, 3deg)); }
}
@keyframes about-light-drift { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.85; } 50% { transform: translate(2%, -2%) scale(1.05); opacity: 1; } }
.about-dust {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, var(--metal-1) 0%, var(--metal-3) 55%, transparent 78%);
  box-shadow: 0 0 10px 2px var(--gold-pale-soft);
  animation: particle-float 15s ease-in-out infinite;
}
.about-dust.d1 { top: 18%; left: 30%; --pf-x: 20px; --pf-y: -26px; animation-delay: 0s; }
.about-dust.d2 { top: 62%; left: 20%; --pf-x: -18px; --pf-y: -20px; animation-delay: 3s; }
.about-dust.d3 { top: 30%; left: 80%; --pf-x: -16px; --pf-y: 22px; animation-delay: 6s; }
.about-dust.d4 { top: 74%; left: 78%; --pf-x: 16px; --pf-y: -18px; animation-delay: 9s; }
.about-dust.d5 { top: 46%; left: 55%; --pf-x: 10px; --pf-y: -24px; animation-delay: 12s; }
.about-sparkle {
  position: absolute; width: 7px; height: 7px; pointer-events: none;
  background: var(--metal-1);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  filter: drop-shadow(0 0 5px var(--gold-pale-soft));
  animation: sparkle-twinkle 3.4s ease-in-out infinite;
}
.about-sparkle.s1 { top: 14%; left: 22%; animation-delay: 0s; }
.about-sparkle.s2 { top: 64%; left: 12%; animation-delay: 0.9s; }
.about-sparkle.s3 { top: 26%; left: 76%; animation-delay: 1.8s; }
.about-sparkle.s4 { top: 72%; left: 68%; animation-delay: 2.6s; }
.about-sparkle.s5 { top: 46%; left: 40%; width: 5px; height: 5px; animation-delay: 1.3s; }
.about-sparkle.s6 { top: 90%; left: 48%; animation-delay: 2.1s; }

.about-photo-col { position: relative; display: flex; align-items: center; justify-content: center; }
.about-numring-wrap { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.about-numring-circle {
  position: absolute; border-radius: 50%;
  width: calc(var(--about-ring-r, 160px) * 2 + 44px); height: calc(var(--about-ring-r, 160px) * 2 + 44px);
  border: 1.5px solid var(--line-gold);
  box-shadow: 0 0 0 1px var(--wine-pale-soft) inset, 0 0 34px var(--gold-pale-soft);
  opacity: 0.72;
  animation: about-ring-glow 7s ease-in-out infinite;
}
.about-numring-circle::before {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  border: 1px solid var(--gold-pale-soft);
  opacity: 0.6;
}
@keyframes about-ring-glow {
  0%, 100% { box-shadow: 0 0 0 1px var(--wine-pale-soft) inset, 0 0 30px var(--gold-pale-soft); }
  50% { box-shadow: 0 0 0 1px var(--wine-pale-soft) inset, 0 0 48px var(--gold-pale-soft); }
}
.about-numring { position: relative; width: 0; height: 0; animation: ring-spin-cw 100s linear infinite; }
.about-numring .slot { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.about-numring .num {
  display: inline-block; animation: ring-spin-ccw 100s linear infinite;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  color: var(--gold-deep); opacity: 0.62; line-height: 1;
  text-shadow: 0 0 12px var(--gold-pale-soft), 0 0 4px rgba(43,23,16,0.3);
}
.about-photo-frame {
  position: relative; z-index: 1; padding: 9px; border-radius: calc(var(--radius-lg) + 8px);
  background: linear-gradient(145deg, var(--metal-2) 0%, var(--metal-3) 45%, var(--metal-4) 100%);
  box-shadow: var(--shadow-soft), 0 0 40px var(--gold-pale-soft);
  max-width: 380px; margin: 0 auto; width: 100%;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), box-shadow 0.5s ease;
}
.about-photo-frame::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,0.85) 6deg, transparent 16deg, transparent 360deg);
  opacity: 0.5; animation: about-frame-sweep 10s linear infinite;
}
.about-photo-frame .hero-visual.tall { position: relative; z-index: 2; margin: 0; border-color: var(--metal-3); }
.about-photo-frame .hero-visual.tall img { transition: transform 0.6s cubic-bezier(.2,.8,.2,1); }
.about-photo-frame:hover { box-shadow: var(--shadow-soft), 0 0 54px var(--gold-pale-soft); }
.about-photo-frame:hover .hero-visual.tall img { transform: scale(1.05); }
@keyframes about-frame-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.about-content { position: relative; z-index: 1; }
.about-eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.about-eyebrow .eyebrow-line { width: 30px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-deep)); display: inline-block; }
.about-eyebrow .eyebrow-star { color: var(--maroon); font-size: 0.7rem; }
.about-heading { font-size: clamp(2.4rem, 5vw, 3.6rem); letter-spacing: 0.01em; margin-bottom: 0.35em; }
.about-content p { font-size: 1.1rem; line-height: 1.7; max-width: 60ch; }
.about-list { list-style: none; padding: 0; margin: 4px 0 26px; max-width: 60ch; }
.about-list li { position: relative; padding-left: 28px; margin-bottom: 13px; font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); }
.about-list li::before { content: "✦"; position: absolute; left: 0; top: 1px; color: var(--gold-deep); font-size: 0.82rem; }
.about-cta {
  position: relative;
  transition: opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.5s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, background 0.35s ease;
}
.about-cta::before {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; z-index: 1; pointer-events: none;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.32), transparent);
  transform: skewX(-20deg); animation: about-cta-shimmer 6s ease-in-out infinite;
}
.about-cta .cta-arrow { display: inline-block; transition: transform 0.35s ease; margin-left: 2px; }
.about-cta:hover { transform: translateY(-3px) scale(1.03); }
.about-cta:hover .cta-arrow { transform: translateX(5px); }
.about-cta.stagger-settled { transition-delay: 0s; }
@keyframes about-cta-shimmer { 0%, 25% { left: -60%; } 55%, 100% { left: 130%; } }

@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 380px; }
  .orb-wrap { width: 100%; max-width: 380px; justify-self: center; margin: 0 auto; }
  .om-vibration { --om-r: min(171px, calc(45vw - 25.2px)); }
  .grid-3, .grid-4, .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .rel-intro { grid-template-columns: 1fr; gap: 40px; }
  .rel-hero-num, .rel-hero-sparkle, .rel-light-trail { display: none; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-photo-col { max-width: 420px; margin: 0 auto; }
  .about-content p, .about-list { max-width: 100%; }
}
@media (max-width: 1150px) {
  nav.primary-nav { position: fixed; top: 66px; left: 0; right: 0; background: var(--bg); flex-direction: column; align-items: flex-start; padding: 18px 28px; gap: 14px; border-bottom: 1px solid var(--line); display: none; max-height: calc(100vh - 66px); overflow-y: auto; }
  nav.primary-nav.open { display: flex; }
  .nav-toggle { display: flex; }
  .nav-actions .btn-gold.header-cta { display: none; }
}
@media (max-width: 780px) {
  .header-inner { padding: 12px 16px; gap: 10px; }
  .brand { gap: 8px; }
  .brand-logo { width: 36px; height: 36px; }
  .brand .brandname { font-size: 1.22rem; }
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
  .rel-checker-grid { grid-template-columns: 1fr; }
  .rel-checker .field input { padding: 15px 14px; font-size: 1.05rem; }
  #rel-checker { padding: 34px 22px 30px; border-radius: 20px; }
  .relc-orbit-ring, .relc-line-svg, .relc-num, .relc-speck { display: none; }
  .relc-connect { flex-direction: row; gap: 10px; margin: 6px 0 16px; }
  .relc-connect-line-seg { width: 26px; height: 1px; }
  .relc-connect-line-seg.top { background: linear-gradient(90deg, var(--gold-deep), transparent); }
  .relc-connect-line-seg.bottom { background: linear-gradient(90deg, transparent, var(--maroon)); }
  .rel-person { padding: 16px 16px 4px; }
  .about-numring-wrap, .about-numring-circle { display: none; }
  .about-num.n3, .about-num.n4, .about-num.n6, .about-num.n7, .about-num.n8, .about-num.n10, .about-num.n11, .about-num.n12, .about-num.n13 { display: none; }
  .about-sparkle.s3, .about-sparkle.s4, .about-sparkle.s6 { display: none; }
  .about-halo { width: 140%; height: 60%; opacity: 0.4; }
  .about-heading { font-size: clamp(2rem, 8vw, 2.6rem); }
  .about-photo-frame { max-width: 260px; }
  .rel-hero { padding: 46px 24px 38px; margin-bottom: 40px; }
  .rel-hero-head { margin-bottom: 34px; }
  .rel-hero-title { font-size: clamp(1.1rem, 4.6vw, 1.3rem); }
  .rel-hero-highlight { font-size: clamp(1.5rem, 8vw, 2.1rem); margin-top: 6px; }
  .rel-visual-v2 { max-width: 280px; min-height: 220px; }
  .rel-hero-num.hn1, .rel-hero-num.hn3 { font-size: 1.3rem; }
  .rel-hero-num.hn2, .rel-hero-num.hn4 { font-size: 1.1rem; }
  .rel-heart-watermark.hw1 { width: 140px; top: -14%; left: -8%; }
  .rel-heart-watermark.hw2 { width: 190px; }
}

/* ================= Photo Moments Showcase (Events / Clients / Work) ================= */
.pms-section {
  --pm-cream: #fbf7ec;
  --pm-cream-deep: #f1e8cf;
  --pm-sage: #7c9a5e;
  --pm-sage-deep: #4f6a3a;
  --pm-sage-pale: #e7efdb;
  --pm-gold: #8f6410;
  --pm-gold-mid: #b8890f;
  --pm-gold-light: #e2bf62;
  --pm-plum: #6b2a44;
  --pm-blush: #f2c9d6;
  --pm-peach: #f6ddb8;
  --pm-ink: #4a1620;
  --pm-ink-soft: #5c5137;
  --pm-card-shadow: 0 20px 40px rgba(46,62,22,0.20), 0 5px 14px rgba(46,62,22,0.13);
  /* Botanical decoration palette — greens/pinks/gold used only by the background and the
     .pms-atmosphere layer below, never by text or photo-card chrome. */
  --pm-leaf-1: #5c9a3e;
  --pm-leaf-2: #3f7a2c;
  --pm-leaf-3: #6ba545;
  --pm-leaf-4: #4d8c46;
  --pm-leaf-5: #5c9a3c;
  --pm-leaf-deep: #2a5219;
  --pm-rose: #e85f96;
  --pm-rose-soft: #f4a8c4;
  --pm-coral: #ff9a76;
  --pm-flower-glow: #fff3e6;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 48px 0;
  /* Same green family and intensity as before, now with a luminous core behind the
     heading, warm golden light at the corners and a deeper green vignette at the edges. */
  background:
    radial-gradient(ellipse 1120px 620px at 50% 10%, rgba(249,255,229,0.92) 0%, rgba(228,247,192,0.52) 40%, rgba(226,246,190,0) 72%),
    radial-gradient(ellipse 980px 620px at 44% 62%, rgba(246,255,224,0.62) 0%, rgba(228,247,192,0.30) 44%, rgba(226,246,190,0) 74%),
    radial-gradient(ellipse 760px 520px at 93% 4%, rgba(255,241,192,0.40), transparent 62%),
    radial-gradient(ellipse 720px 540px at 5% 94%, rgba(255,238,182,0.34), transparent 62%),
    radial-gradient(ellipse 640px 480px at 100% 0%, rgba(232,95,150,0.16), transparent 58%),
    radial-gradient(ellipse 780px 600px at -6% 0%, rgba(92,156,50,0.52), transparent 62%),
    radial-gradient(ellipse 800px 620px at 104% 98%, rgba(88,150,48,0.48), transparent 62%),
    radial-gradient(ellipse 700px 560px at 102% 46%, rgba(100,164,58,0.32), transparent 62%),
    radial-gradient(ellipse 660px 540px at -2% 52%, rgba(100,164,58,0.30), transparent 62%),
    linear-gradient(162deg, #cdeaa0 0%, #b6de7d 20%, #a4d566 44%, #afd971 66%, #c9e89d 100%);
}
.pms-section .container { position: relative; z-index: 2; }

/* ---------------- atmosphere ---------------- */
.pms-atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pms-atmosphere::before {
  content: ""; position: absolute; inset: -10%;
  background: radial-gradient(ellipse 620px 440px at 16% 10%, rgba(82,146,50,0.34), transparent 58%),
              radial-gradient(ellipse 600px 480px at 96% 52%, rgba(96,160,64,0.22), transparent 60%),
              radial-gradient(ellipse 540px 420px at 90% 16%, rgba(255,236,180,0.26), transparent 60%),
              radial-gradient(ellipse 580px 460px at 78% 90%, rgba(255,226,170,0.20), transparent 60%),
              radial-gradient(ellipse 520px 420px at 10% 92%, rgba(226,191,98,0.20), transparent 60%);
  opacity: 0.95; animation: about-light-drift 18s ease-in-out infinite;
}
/* fine golden sparkle field */
.pms-atmosphere::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 14%, rgba(255,246,206,0.95) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 27% 62%, rgba(255,240,186,0.85) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 41% 22%, rgba(255,250,220,0.9) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 58% 74%, rgba(255,240,186,0.8) 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 71% 32%, rgba(255,248,214,0.9) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 86% 66%, rgba(255,240,186,0.82) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 94% 18%, rgba(255,248,214,0.88) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 6% 82%, rgba(255,240,186,0.8) 50%, transparent 51%);
  background-repeat: repeat;
  background-size: 460px 380px;
  animation: pmb-twinkle 5.2s ease-in-out infinite;
}
@keyframes pmb-twinkle { 0%,100% { opacity: 0.32; } 50% { opacity: 0.72; } }

/* ---------------- botanical clusters ---------------- */
.pmb-cluster { position: absolute; pointer-events: none; filter: drop-shadow(0 10px 16px rgba(32,58,14,0.24)) drop-shadow(0 2px 3px rgba(255,255,230,0.30)); }
.pmb-cluster svg { position: absolute; display: block; overflow: visible; }
.pmb-cluster .sway { animation: pmb-sway 14s ease-in-out infinite; will-change: transform; }
.pmb-cluster .sway.s2 { animation-duration: 18s; animation-delay: -6s; }
.pmb-cluster .sway.s3 { animation-duration: 11.5s; animation-delay: -9s; }
.pmb-cluster .sway.s4 { animation-duration: 16s; animation-delay: -3s; }
@keyframes pmb-sway {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
  50%     { transform: translate3d(-4px,5px,0) rotate(-1.7deg); }
}

/* Corner clusters are anchored to the real corners of the section, so on this tall
   section the lower pair sits right down at the bottom edge rather than riding up
   under the first row of content. */
.pmb-cluster.c-tl { top: -30px;  left: -26px;  width: clamp(172px, 26.5vw, 430px); aspect-ratio: 1 / 0.92; }
.pmb-cluster.c-tr { top: -34px;  right: -28px; width: clamp(182px, 28vw, 452px); aspect-ratio: 1 / 0.92; }
.pmb-cluster.c-bl { bottom: -34px; left: -24px;  width: clamp(172px, 26vw, 420px); aspect-ratio: 1 / 0.9; }
.pmb-cluster.c-br { bottom: -38px; right: -22px; width: clamp(180px, 27vw, 440px); aspect-ratio: 1 / 0.9; }
/* quiet edge accents, spaced down the taller middle of the section so it never reads bare */
.pmb-cluster.c-ml  { top: 34%; left: -40px;  width: clamp(96px, 13vw, 210px); aspect-ratio: 1 / 1.05; opacity: 0.94; }
.pmb-cluster.c-mr  { top: 27%; right: -36px; width: clamp(92px, 12.4vw, 198px); aspect-ratio: 1 / 1.05; opacity: 0.94; }
.pmb-cluster.c-ml2 { top: 68%; left: -44px;  width: clamp(84px, 11.2vw, 178px); aspect-ratio: 1 / 1.05; opacity: 0.88; }
.pmb-cluster.c-mr2 { top: 58%; right: -40px; width: clamp(80px, 10.6vw, 168px); aspect-ratio: 1 / 1.05; opacity: 0.88; }

/* ---------------- floating petals ---------------- */
/* NOTE: @keyframes pms-petal-fall is shared with the hero section — do not rename or remove. */
.pms-petal { position: absolute; top: -8%; z-index: 1; animation-name: pms-petal-fall; animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform, opacity; }
.pms-petal svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 6px rgba(232,95,150,0.35)) drop-shadow(0 2px 3px rgba(58,20,30,0.08)); }
@keyframes pms-petal-fall {
  0%   { top: -8%; opacity: 0; transform: translateX(0) rotate(0deg); }
  8%   { opacity: var(--peak-opacity, 0.85); }
  50%  { transform: translateX(var(--sway, 22px)) rotate(170deg); }
  92%  { opacity: calc(var(--peak-opacity, 0.85) * 0.82); }
  100% { top: 106%; opacity: 0; transform: translateX(calc(var(--sway, 22px) * -0.2)) rotate(340deg); }
}

/* ---------------- glowing motes ---------------- */
.pmb-mote { position: absolute; border-radius: 50%; width: 5px; height: 5px;
  background: radial-gradient(circle, #fffceb 0%, var(--pm-gold-light) 52%, transparent 78%);
  box-shadow: 0 0 10px 2px rgba(226,191,98,0.55);
  animation: pmb-mote-float 16s ease-in-out infinite; will-change: transform, opacity; }
@keyframes pmb-mote-float {
  0%   { transform: translate3d(0,0,0) scale(0.7); opacity: 0; }
  14%  { opacity: 0.85; }
  50%  { transform: translate3d(var(--mx, 22px), var(--my, -60px), 0) scale(1.05); opacity: 0.7; }
  86%  { opacity: 0.75; }
  100% { transform: translate3d(calc(var(--mx, 22px) * 1.9), calc(var(--my, -60px) * 1.9), 0) scale(0.6); opacity: 0; }
}
.pmb-mote.m1 { top: 18%; left: 18%; --mx: 24px;  --my: -64px; animation-delay: 0s; }
.pmb-mote.m2 { top: 46%; left: 9%;  --mx: -18px; --my: -54px; animation-delay: -4s; width: 4px; height: 4px; }
.pmb-mote.m3 { top: 28%; left: 82%; --mx: -22px; --my: 58px;  animation-delay: -8s; }
.pmb-mote.m4 { top: 68%; left: 78%; --mx: 20px;  --my: -50px; animation-delay: -12s; width: 4px; height: 4px; }
.pmb-mote.m5 { top: 58%; left: 44%; --mx: 16px;  --my: -70px; animation-delay: -6s; width: 4px; height: 4px; }
.pmb-mote.m6 { top: 84%; left: 30%; --mx: -20px; --my: -58px; animation-delay: -14s; }
.pmb-mote.m7 { top: 76%; left: 62%; --mx: 18px;  --my: -62px; animation-delay: -10s; width: 4px; height: 4px; }

/* ---------------- section heading ---------------- */
.pms-head { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.pms-head .ornament span { background: linear-gradient(90deg, transparent, var(--pm-gold-mid)); }
.pms-head .ornament span.r { background: linear-gradient(90deg, var(--pm-gold-mid), transparent); }
.pms-glyph { color: var(--pm-sage-deep) !important; }

.pmb-crest { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; }
.pmb-crest .rule { display: block; width: clamp(34px, 7vw, 86px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143,100,16,0.5) 50%, transparent); }
.pmb-crest svg { width: clamp(24px, 3vw, 32px); height: clamp(24px, 3vw, 32px); display: block; color: var(--pm-gold-mid); }

.pms-eyebrow-main {
  color: var(--pm-gold) !important;
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(0.68rem, 1.1vw, 0.8rem);
  letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 10px;
}
.pms-title-main {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: clamp(1.95rem, 4.4vw, 3.3rem);
  line-height: 1.1; letter-spacing: -0.006em;
  color: var(--pm-ink);
  text-shadow: 0 1px 0 rgba(255,255,240,0.5);
  margin: 0 0 14px;
}
.pmb-flourish { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto 18px; }
.pmb-flourish .rule { display: block; width: clamp(48px, 10vw, 132px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143,100,16,0.55) 55%, transparent); }
.pmb-flourish svg { width: clamp(44px, 6vw, 64px); height: 16px; display: block; color: var(--pm-gold-mid); }

.pms-lede-main {
  color: var(--pm-ink-soft) !important;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 500; line-height: 1.6;
  max-width: 62ch;
}

/* ---------------- staggered editorial composition ---------------- */
.pms-stagger-grid { display: flex; flex-direction: column; gap: 34px; }

.pms-block { position: relative; }
.pms-block-head { max-width: 460px; margin: 0 auto 16px; text-align: center; }
.pms-block-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  text-transform: uppercase; letter-spacing: 0.22em;
  font-size: clamp(0.64rem, 1vw, 0.74rem); font-weight: 600;
  color: var(--pm-gold); margin-bottom: 9px;
}
.pms-block-eyebrow::before, .pms-block-eyebrow::after {
  content: ""; display: block; width: clamp(12px, 2.2vw, 22px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143,100,16,0.5), transparent);
}
.pms-block-heading {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: clamp(1.34rem, 2.2vw, 1.7rem);
  color: var(--pm-ink); margin-bottom: 8px; text-shadow: none; line-height: 1.22;
  letter-spacing: -0.004em;
}
.pms-block-lede {
  color: var(--pm-ink-soft); font-family: var(--font-display); font-weight: 500;
  font-size: clamp(0.94rem, 1.25vw, 1.04rem);
  max-width: 420px; margin: 0 auto; line-height: 1.56;
}

/* Carousel: compact, adaptive -- the frame shrink-wraps to the photo, never the reverse */
.pms-carousel {
  --pms-maxw: 240px;
  --pms-maxh: 300px;
  position: relative;
  width: 100%;
  max-width: var(--pms-maxw);
  margin: 0 auto;
  outline: none;
}
.pms-carousel:focus-visible { outline: 2px solid var(--pm-gold-mid); outline-offset: 6px; border-radius: 18px; }

.pms-stage { position: relative; }
.pms-track-wrap { position: relative; overflow: visible; }
/* Stable, pre-reserved height (never JS-driven) so the page never reflows when the slide changes -- only the photo inside this fixed box changes. */
.pms-track { position: relative; width: 100%; height: var(--pms-maxh); touch-action: pan-y; }

.pms-slide {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; justify-content: center; align-items: center;
  padding: 3px; box-sizing: border-box;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition: opacity 0.65s cubic-bezier(.22,.8,.2,1), transform 0.65s cubic-bezier(.22,.8,.2,1);
  pointer-events: none;
}
.pms-slide.is-active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; z-index: 2; }

/* Elegant thin gilt frame: a real gold gradient edge, soft premium shadow and a whisper of glow. */
.pms-frame {
  position: relative;
  display: inline-block;
  line-height: 0;
  border-radius: 13px;
  overflow: hidden;
  border: 3px solid transparent;
  background:
    linear-gradient(var(--pm-cream), var(--pm-cream)) padding-box,
    linear-gradient(145deg, #f3dfa4 0%, #c79a24 26%, #8f6410 50%, #d9b355 74%, #f5e6b8 100%) border-box;
  box-shadow: var(--pm-card-shadow), 0 0 22px rgba(226,191,98,0.24);
  max-width: 100%;
}
.pms-frame::after {
  content: ""; position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,250,228,0.55);
}
.pms-frame img {
  display: block;
  width: auto; height: auto;
  max-width: 100%;
  max-height: var(--pms-maxh);
  object-fit: contain;
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.pms-frame:hover img { transform: scale(1.03); }
.pms-slide.is-active .pms-frame { box-shadow: var(--pm-card-shadow), 0 0 28px rgba(226,191,98,0.36); }

.pms-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; min-width: 36px; border-radius: 50%;
  border: 1px solid rgba(143,100,16,0.45);
  background: linear-gradient(150deg, #fffdf4 0%, #fbf3dd 100%); color: var(--pm-gold);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 8px 20px rgba(46,62,22,0.20), inset 0 1px 0 rgba(255,255,255,0.9);
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  z-index: 3; padding: 0;
}
.pms-arrow:hover {
  background: linear-gradient(150deg, #e8c87a 0%, #b8890f 100%); color: #fffdf2;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 10px 24px rgba(46,62,22,0.26), inset 0 1px 0 rgba(255,255,255,0.5);
}
.pms-arrow svg { width: 15px; height: 15px; }
.pms-prev { left: -10px; }
.pms-next { right: -10px; }

.pms-dots { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0; margin-top: 6px; padding: 0 24px; }
.pms-dot { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; border: none; padding: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pms-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(79,106,58,0.42); transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; display: block; }
.pms-dot.active::before { background: linear-gradient(140deg, #e8c87a, #b8890f); transform: scale(1.35); box-shadow: 0 0 8px rgba(184,137,15,0.5); }
.pms-dot:hover::before { background: var(--pm-gold-mid); }

/* ~phablet: still stacked, just a touch larger */
@media (min-width: 480px) {
  .pms-head { margin-bottom: 40px; }
  .pms-stagger-grid { gap: 40px; }
  .pms-carousel { --pms-maxw: 300px; --pms-maxh: 340px; }
  .pms-prev { left: -14px; }
  .pms-next { right: -14px; }
}

/* Staggered editorial composition begins: Events upper-left, Clients right (spans both rows), Work lower-left */
@media (min-width: 760px) {
  .pms-section { padding: 64px 0; }
  .pms-head { margin-bottom: 44px; }
  .pms-stagger-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "events clients" "work clients";
    gap: 34px 44px;
    align-items: start;
  }
  .pms-block[data-pms-block="events"] { grid-area: events; }
  .pms-block[data-pms-block="clients"] { grid-area: clients; align-self: center; }
  .pms-block[data-pms-block="work"] { grid-area: work; }
  .pms-carousel { --pms-maxw: 280px; --pms-maxh: 320px; }
}

@media (min-width: 1024px) {
  .pms-section { padding: 76px 0; }
  .pms-head { margin-bottom: 52px; }
  .pms-stagger-grid { gap: 44px 60px; }
  .pms-carousel { --pms-maxw: 330px; --pms-maxh: 370px; }
  .pms-block-head { max-width: 520px; }
  .pms-block-lede { max-width: 460px; }
  .pms-arrow { width: 38px; height: 38px; }
  .pms-arrow svg { width: 16px; height: 16px; }
  .pms-prev { left: -20px; }
  .pms-next { right: -20px; }
}

@media (min-width: 1280px) {
  .pms-stagger-grid { gap: 48px 72px; }
  .pms-carousel { --pms-maxw: 370px; --pms-maxh: 410px; }
}

@media (max-width: 760px) {
  .pmb-cluster.c-ml, .pmb-cluster.c-mr, .pmb-cluster.c-ml2, .pmb-cluster.c-mr2 { display: none; }
}

@media (max-width: 480px) {
  .pms-section { padding: 40px 0; }
  .pms-head { margin-bottom: 28px; }
  .pms-stagger-grid { gap: 30px; }
  .pms-arrow svg { width: 14px; height: 14px; }
  .pms-petal { max-width: 22px; max-height: 22px; }
  .pmb-cluster.c-tl { width: 124px; left: -30px; top: -14px; }
  .pmb-cluster.c-tr { width: 132px; right: -30px; top: -16px; }
  .pmb-cluster.c-bl { width: 124px; left: -28px; bottom: -16px; }
  .pmb-cluster.c-br { width: 130px; right: -26px; bottom: -18px; }
  .pmb-mote.m5, .pmb-mote.m7 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pms-atmosphere *, .pms-atmosphere::before, .pms-atmosphere::after { animation: none !important; }
}

/* ===========================================================================
   ADDITIVE ONLY - templates the finalized homepage design did not cover.
   ---------------------------------------------------------------------------
   Every rule below uses a new class name (mn-*) or targets an element that
   only exists on blog / page / shop templates. Nothing here overrides or
   alters any rule in the finalized design above, so the approved homepage
   renders byte-for-byte as signed off.
   =========================================================================== */

.mn-archive .section-head,
.mn-single .section-head { margin-bottom: 34px; }

.mn-post-grid { margin-top: 42px; }
.mn-post-card h3 a { color: inherit; }
.mn-post-card h3 a:hover { color: var(--maroon); }
.mn-post-thumb { display: block; padding: 0; height: 200px; }
.mn-post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mn-pagination { margin-top: 44px; text-align: center; }
.mn-pagination .nav-links { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mn-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line-gold); color: var(--maroon-deep);
  background: var(--card-grad); font-weight: 600; font-size: 0.9rem;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.mn-pagination .page-numbers:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.mn-pagination .page-numbers.current { background: var(--gold-pale-soft); border-color: var(--gold); }

.mn-entry { position: relative; z-index: 1; }
.mn-entry-meta { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; }
.mn-entry-thumb { margin: 0 0 32px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-gold); box-shadow: var(--shadow-card); }
.mn-entry-thumb img { width: 100%; height: auto; display: block; }

.mn-entry-content { font-size: 1.02rem; color: var(--ink-soft); }
.mn-entry-content > * + * { margin-top: 1.1em; }
.mn-entry-content h2 { font-size: 1.7rem; margin: 1.6em 0 0.5em; }
.mn-entry-content h3 { font-size: 1.3rem; margin: 1.4em 0 0.45em; }
.mn-entry-content a { color: var(--maroon); text-decoration: underline; text-underline-offset: 3px; }
.mn-entry-content a:hover { color: var(--gold-deep); }
.mn-entry-content ul, .mn-entry-content ol { padding-left: 1.3em; }
.mn-entry-content li + li { margin-top: 0.45em; }
.mn-entry-content img { border-radius: var(--radius); margin-inline: auto; }
.mn-entry-content blockquote {
  margin: 1.5em 0; padding: 16px 22px; border-left: 3px solid var(--gold);
  background: rgba(255, 246, 218, 0.45); border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--maroon-deep);
}
.mn-entry-content table { width: 100%; border-collapse: collapse; }
.mn-entry-content th, .mn-entry-content td { border: 1px solid var(--line-gold); padding: 9px 12px; text-align: left; }
.mn-entry-content pre { overflow-x: auto; padding: 14px; border-radius: var(--radius); background: rgba(74, 9, 22, 0.06); }

.mn-entry-foot { margin-top: 46px; text-align: center; }
.mn-comments { margin-top: 56px; }

/* WooCommerce keeps its own templates and behaviour; this only gives its
   pages the same page framing, readable text colour and button styling. */
.mn-woocommerce { position: relative; z-index: 1; }
.mn-woocommerce .woocommerce-products-header__title,
.mn-woocommerce .product_title { font-family: var(--font-display); color: var(--maroon-deep); }
.mn-woocommerce .price { color: var(--maroon); font-weight: 600; }
.mn-woocommerce a.button,
.mn-woocommerce button.button,
.mn-woocommerce input.button,
.mn-woocommerce .woocommerce-message a.button {
  background: linear-gradient(135deg, var(--metal-2) 0%, var(--metal-3) 28%, var(--metal-1) 50%, var(--metal-3) 72%, var(--metal-4) 100%);
  color: var(--metal-text); border: 1px solid var(--metal-4); border-radius: 999px;
  font-family: var(--font-body); font-weight: 700; padding: 12px 26px;
}
.mn-woocommerce a.button:hover,
.mn-woocommerce button.button:hover,
.mn-woocommerce input.button:hover { box-shadow: var(--shadow-card), 0 0 22px var(--gold-pale-soft); }

/* Optional uploaded artwork on a webinar card. Only applies when a picture
   has been uploaded in the admin; the designed SVG artwork is used otherwise. */
.wbn-visual-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

@media (max-width: 780px) {
  .mn-post-thumb { height: 168px; }
  .mn-entry-content { font-size: 0.98rem; }
}

/* Journal card titles become links once real posts drive the section. */
.njl-card h3 a { color: inherit; }
.njl-card h3 a:hover { color: var(--maroon); }