/* ===================================================================
   ram-bala.com — Theme v3 "Midnight Champagne" (premium re-skin layer)
   Loads AFTER style.css / executive-upgrade.css / review-fixes.css and
   re-skins the existing markup through the site's CSS variables plus a
   small set of targeted rules. Three palettes via html[data-palette].
   All motion is GPU-only (transform/opacity) and off under reduced-motion.
   =================================================================== */

/* ---------- 1. Palettes (60 base / 30 surface / 10 accent) ---------- */
:root,
html[data-palette="midnight"]{
  --bg:#070A12; --bg2:#0A0F1C; --bg3:#0F162A;
  --card:rgba(17,24,43,.78); --card2:rgba(22,31,54,.9); --card-blur:blur(18px) saturate(140%);
  --glass:rgba(17,24,43,.78); --glass-border:rgba(255,255,255,.10);
  --cream:#F4F1EA; --white:#FFFFFF; --body:#CBD0DB; --muted:#95A0B5; --muted2:#AEB7C7;
  --bdr:rgba(255,255,255,.14); --bdr2:rgba(255,255,255,.22); --bdr-soft:rgba(255,255,255,.08);
  --gold:#D8B86A; --gold-dim:rgba(216,184,106,.12); --gold-glow:rgba(216,184,106,.28);
  --champagne:#E7CB85; --champagne-dim:rgba(231,203,133,.12);
  --accent-gold:#D8B86A; --accent-gold-dim:rgba(216,184,106,.12);
  --v3-link:#8FBFFF; --v3-ink-on-accent:#13100A;
  --v3-aurora-1:rgba(216,184,106,.16); --v3-aurora-2:rgba(63,111,206,.22); --v3-aurora-3:rgba(142,116,255,.12);
  --v3-glow:0 0 0 1px rgba(216,184,106,.22), 0 20px 60px -20px rgba(216,184,106,.35);
  --rl:18px; --r:12px;
  --v3-ease:cubic-bezier(.16,1,.3,1); --v3-dur:.7s;
  color-scheme:dark;
}
html[data-palette="emerald"]{
  --bg:#060A0A; --bg2:#091110; --bg3:#0D1816;
  --card:rgba(14,24,22,.8); --card2:rgba(18,31,28,.92); --glass:rgba(14,24,22,.8);
  --cream:#EEF4F1; --body:#C5D1CB; --muted:#8FA39A; --muted2:#A9B9B1;
  --gold:#3CC79A; --gold-dim:rgba(60,199,154,.12); --gold-glow:rgba(60,199,154,.3);
  --champagne:#8EE3C3; --champagne-dim:rgba(142,227,195,.12);
  --accent-gold:#3CC79A; --accent-gold-dim:rgba(60,199,154,.12);
  --v3-link:#8EE3C3; --v3-ink-on-accent:#06110D;
  --v3-aurora-1:rgba(60,199,154,.16); --v3-aurora-2:rgba(36,99,120,.24); --v3-aurora-3:rgba(142,227,195,.10);
  --v3-glow:0 0 0 1px rgba(60,199,154,.22), 0 20px 60px -20px rgba(60,199,154,.35);
}
html[data-palette="ivory"]{
  --bg:#F6F3EC; --bg2:#F1EDE3; --bg3:#EAE4D6;
  --card:rgba(255,255,255,.86); --card2:#FFFFFF; --card-blur:blur(14px); --glass:rgba(255,255,255,.86); --glass-border:rgba(16,27,45,.10);
  --cream:#101B2D; --white:#101B2D; --body:#38445A; --muted:#5A6678; --muted2:#4A5668;
  --bdr:rgba(16,27,45,.16); --bdr2:rgba(16,27,45,.26); --bdr-soft:rgba(16,27,45,.10);
  --gold:#1B3F7D; --gold-dim:rgba(27,63,125,.08); --gold-glow:rgba(27,63,125,.22);
  --champagne:#9A7A2A; --champagne-dim:rgba(154,122,42,.10);
  --accent-gold:#9A7A2A; --accent-gold-dim:rgba(154,122,42,.10);
  --v3-link:#1B3F7D; --v3-ink-on-accent:#FFFFFF;
  --v3-aurora-1:rgba(154,122,42,.16); --v3-aurora-2:rgba(27,63,125,.14); --v3-aurora-3:rgba(120,160,230,.14);
  --v3-glow:0 0 0 1px rgba(27,63,125,.18), 0 20px 60px -24px rgba(27,63,125,.35);
  color-scheme:light;
}

/* ---------- 2. Base surfaces & typography ---------- */
body{background:var(--bg);color:var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{ /* film grain: fixed, 3% — gives the dark surfaces depth without banding */
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
html[data-palette="ivory"] body::before{opacity:.05;mix-blend-mode:multiply}
.section{position:relative;z-index:1;padding:112px 0}
.section.alt{background:linear-gradient(180deg,var(--bg2),var(--bg))}
.section + .section::before{ /* hairline section divider with a soft gradient */
  content:"";position:absolute;left:50%;top:0;width:min(1100px,92%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--bdr2),transparent);
}
.h-section{font-family:var(--fserif);letter-spacing:-.02em;line-height:1.08;color:var(--cream);text-wrap:balance}
.sl{color:var(--champagne);letter-spacing:.24em;font-size:.66rem}
.sl::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,var(--champagne),transparent);display:inline-block}
p,li{color:var(--body)}
a{color:var(--v3-link)}
::selection{background:var(--gold);color:var(--v3-ink-on-accent)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- 3. Header: glass bar, shrinks on scroll ---------- */
.announce-strip{background:linear-gradient(90deg,var(--bg3),var(--bg2));border-bottom:1px solid var(--bdr-soft);color:var(--muted2)}
.announce-link{color:var(--champagne) !important;font-weight:600}
#nav,#nav.solid{background:color-mix(in srgb,var(--bg) 78%,transparent) !important;backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid var(--bdr-soft);transition:box-shadow .3s var(--v3-ease),background .3s var(--v3-ease)}
#nav.solid{box-shadow:0 10px 40px -20px rgba(0,0,0,.6) !important}
.nav-inner{background:transparent !important}
html[data-palette="ivory"] #nav.solid{box-shadow:0 10px 40px -24px rgba(16,27,45,.35)}
.nav-logo{color:var(--cream) !important}
.nav-badge{background:linear-gradient(135deg,var(--gold),var(--champagne)) !important;color:var(--v3-ink-on-accent) !important;box-shadow:0 0 0 4px var(--gold-dim)}
.nav-links a{color:var(--muted2) !important;position:relative;transition:color .25s var(--v3-ease)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--v3-ease)}
.nav-links a:hover{color:var(--cream) !important}
.nav-links a:hover::after{transform:scaleX(1)}
#scroll-progress{display:block !important;position:fixed;top:0;left:0;height:2px;width:100%;z-index:1000;transform-origin:left;transform:scaleX(var(--v3-progress,0));background:linear-gradient(90deg,var(--gold),var(--champagne));pointer-events:none}

/* ---------- 4. Hero: aurora, type, KPI tiles, portrait ---------- */
#hero{position:relative;isolation:isolate;overflow:hidden}
.hero-bg{background:
  radial-gradient(60% 50% at 12% 0%,var(--v3-aurora-2),transparent 62%),
  radial-gradient(45% 45% at 88% 12%,var(--v3-aurora-1),transparent 60%),
  radial-gradient(50% 40% at 50% 100%,var(--v3-aurora-3),transparent 60%) !important;
  transform:none !important;transition:none !important}
.hero-bg::before,.hero-bg::after{content:"";position:absolute;width:62vmax;height:62vmax;border-radius:50%;filter:blur(90px);opacity:.75;pointer-events:none;will-change:transform}
.hero-bg::before{left:-18vmax;top:-26vmax;background:radial-gradient(circle,var(--v3-aurora-2),transparent 62%);animation:v3-drift-a 26s ease-in-out infinite alternate}
.hero-bg::after{right:-22vmax;bottom:-30vmax;background:radial-gradient(circle,var(--v3-aurora-1),transparent 62%);animation:v3-drift-b 32s ease-in-out infinite alternate}
@keyframes v3-drift-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(9vmax,6vmax,0) scale(1.12)}}
@keyframes v3-drift-b{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-8vmax,-7vmax,0) scale(.95)}}
.hero-tag{color:var(--champagne);font-size:.68rem;letter-spacing:.22em}
.hero-tag::before{background:linear-gradient(90deg,var(--champagne),transparent) !important}
.hero-tag-verify{color:var(--cream) !important;border-bottom:1px solid var(--gold);text-decoration:none !important;padding-bottom:1px}
.hero-h1{font-family:var(--fserif);font-weight:400;letter-spacing:-.035em;line-height:1.0;max-width:none !important;width:fit-content;padding-right:.08em;overflow:visible;
  background:linear-gradient(180deg,var(--white) 0%,var(--cream) 55%,color-mix(in srgb,var(--cream) 70%,var(--champagne)) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-tagline{color:var(--champagne) !important;opacity:1 !important;font-style:italic}
.hero-sub{color:var(--body);font-size:1.12rem;line-height:1.8}
.hero-kpi-row{gap:12px}
.hero-kpi,.metric{background:var(--card) !important;border:1px solid var(--bdr-soft) !important;border-radius:var(--rl) !important;
  backdrop-filter:var(--card-blur);-webkit-backdrop-filter:var(--card-blur);transition:transform .45s var(--v3-ease),border-color .3s,box-shadow .45s var(--v3-ease)}
.hero-kpi:hover,.metric:hover{transform:translateY(-3px);border-color:var(--gold) !important;box-shadow:var(--v3-glow)}
.hero-kpi strong,.metric-num,.cs-kpi strong,.bento-metric strong,.sabbatical-metric strong,.spot-badge .num,.exec-bar-kpi strong{
  font-family:var(--fserif) !important;font-weight:400 !important;letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums;
  background:linear-gradient(180deg,var(--cream),var(--champagne));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-kpi-sub,.metric-label,.metric-sub,.cs-kpi span,.bento-metric span,.sabbatical-metric span{color:var(--muted) !important;letter-spacing:.12em}
.hero-photo-frame{border-radius:22px;padding:4px;background:linear-gradient(140deg,var(--gold),transparent 40%,transparent 60%,var(--champagne));box-shadow:0 30px 80px -30px rgba(0,0,0,.8),var(--v3-glow)}
.hero-photo-frame img,.hero-photo{border-radius:18px}
.hero-card{background:var(--card) !important;border:1px solid var(--bdr-soft) !important;box-shadow:0 30px 90px -40px rgba(0,0,0,.85)}
.hero-card-name{color:var(--cream)}
.hero-card-proof span{border:1px solid var(--bdr-soft);background:var(--gold-dim);color:var(--champagne);border-radius:var(--pill);padding:4px 12px}
.chip{background:color-mix(in srgb,var(--card) 80%,transparent) !important;border:1px solid var(--bdr-soft) !important;color:var(--muted2) !important;transition:border-color .3s,color .3s,transform .3s var(--v3-ease)}
.chip:hover{border-color:var(--gold) !important;color:var(--cream) !important;transform:translateY(-1px)}

/* staggered entrance for the hero only (everything else reveals on scroll) */
@media (prefers-reduced-motion:no-preference){
  #hero .rv{animation:v3-rise var(--v3-dur) var(--v3-ease) both}
  #hero .rv.d1{animation-delay:.08s}#hero .rv.d2{animation-delay:.18s}#hero .rv.d3{animation-delay:.28s}#hero .rv.d4{animation-delay:.36s}#hero .rv.d5{animation-delay:.44s}#hero .rv.d6{animation-delay:.52s}
  #hero .hero-photo-col{animation-delay:.3s}
}
@keyframes v3-rise{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}

/* ---------- 5. Buttons ---------- */
.btn{border-radius:var(--pill);font-weight:600;letter-spacing:.01em;position:relative;overflow:hidden;transition:transform .35s var(--v3-ease),box-shadow .35s var(--v3-ease),background .3s,border-color .3s,color .3s}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:linear-gradient(135deg,var(--champagne),var(--gold)) !important;color:var(--v3-ink-on-accent) !important;box-shadow:0 10px 30px -10px var(--gold-glow),inset 0 1px 0 rgba(255,255,255,.35) !important}
.btn-gold::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--v3-ease)}
.btn-gold:hover::after{transform:translateX(120%)}
.btn-outline{border:1px solid var(--bdr2) !important;color:var(--cream) !important;background:color-mix(in srgb,var(--card) 50%,transparent) !important}
.btn-outline:hover{border-color:var(--gold) !important;box-shadow:var(--v3-glow)}
.nav-cta-primary{background:linear-gradient(135deg,var(--champagne),var(--gold)) !important;color:var(--v3-ink-on-accent) !important;border:0 !important}

/* ---------- 6. Cards: cursor-tracked light + lift ---------- */
.v3-spot{position:relative;overflow:hidden;transition:transform .5s var(--v3-ease),border-color .35s,box-shadow .5s var(--v3-ease)}
.v3-spot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),var(--gold-dim),transparent 45%)}
.v3-spot:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--gold) 55%,var(--bdr-soft)) !important;box-shadow:var(--v3-glow)}
.v3-spot:hover::before{opacity:1}
.bento-card,.exec-pillar,.pillar-card,.asset-card,.cs-kpi,.sabbatical-card,.faq-item,.contact-panel,.tl-card,.deep-dive-card,.ai-proof-block,.ai-proof-flagship,.insight-card,.rec-carousel-card,.sri-card,.prac-banner,.cred-grid-card{
  background:var(--card) !important;border:1px solid var(--bdr-soft) !important;border-radius:var(--rl) !important}
.tl-card{border-color:color-mix(in srgb,var(--gold) 35%,var(--bdr-soft)) !important;background:color-mix(in srgb,var(--gold-dim) 60%,var(--card)) !important}
.model-step{border-right:1px solid var(--bdr-soft)}
.model-num{color:var(--champagne) !important;font-family:var(--fserif)}
.exec-pillar-tag,.bento-tag,.asset-lbl,.ai-proof-tag,.sabbatical-card-tag{color:var(--champagne) !important;letter-spacing:.18em}
.trust-marquee{background:color-mix(in srgb,var(--card) 40%,transparent) !important;border-color:var(--bdr-soft) !important}
.trust-marquee:hover .trust-marquee-track{animation-play-state:paused}
.trust-logo-dot{background:var(--gold) !important;box-shadow:0 0 10px var(--gold-glow)}
.footer,footer{background:var(--bg) !important;border-top:1px solid var(--bdr-soft)}

/* ---------- 7. Scroll reveal (JS adds .v3-rv; CSS never hides without it) ---------- */
@media (prefers-reduced-motion:no-preference){
  .v3-rv{opacity:0;transform:translate3d(0,22px,0);transition:opacity var(--v3-dur) var(--v3-ease),transform var(--v3-dur) var(--v3-ease)}
  .v3-rv.in{opacity:1;transform:none}
  .v3-rv.in[data-v3-i]{transition-delay:calc(var(--v3-i,0) * 70ms)}
}
@media (prefers-reduced-motion:reduce){
  .hero-bg::before,.hero-bg::after,#hero .rv{animation:none !important}
  .v3-spot,.btn,.hero-kpi,.metric,.chip{transition:none !important}
}

/* ---------- 8. Preview-only palette toolbar ---------- */
#v3-toolbar{position:fixed;right:16px;bottom:16px;z-index:1200;display:flex;gap:6px;align-items:center;padding:8px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--bg3) 85%,transparent);border:1px solid var(--bdr);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 50px -20px rgba(0,0,0,.7);font:600 12px/1 var(--fsans);color:var(--muted2)}
#v3-toolbar span{padding:0 6px 0 4px;letter-spacing:.08em;text-transform:uppercase;font-size:10px}
#v3-toolbar button{min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--bdr-soft);background:transparent;color:var(--cream);cursor:pointer;font:inherit}
#v3-toolbar button[aria-pressed="true"]{background:linear-gradient(135deg,var(--champagne),var(--gold));color:var(--v3-ink-on-accent);border-color:transparent}
@media (max-width:600px){#v3-toolbar{left:10px;right:10px;bottom:10px;justify-content:center;padding:6px 8px;gap:4px}#v3-toolbar span{display:none}#v3-toolbar button{min-height:30px;padding:0 10px;font-size:11px}}
@media print{#v3-toolbar,#scroll-progress,body::before{display:none !important}}

/* ---------- 9. Credential wall & recommendations: one accent, not their own blue ---------- */
#dama{--gold:var(--champagne);--blue:var(--champagne);--cyan:var(--champagne);--green:var(--champagne);--purple:var(--champagne);--amber:var(--champagne);
  background:linear-gradient(180deg,var(--bg2),var(--bg)) !important;border-top:1px solid var(--bdr-soft) !important;border-bottom:1px solid var(--bdr-soft) !important}
#dama .prac-banner{background:var(--card) !important;border:1px solid color-mix(in srgb,var(--gold) 45%,var(--bdr-soft)) !important;box-shadow:var(--v3-glow)}
#dama .prac-btn-gold,#dama .prac-btn-blue{background:var(--gold-dim) !important;border-color:color-mix(in srgb,var(--gold) 50%,transparent) !important;color:var(--champagne) !important}
#dama .badge-tile,#dama .sri-card,#dama .pathway-card,#dama .dama-pathway{background:var(--card) !important;border-color:var(--bdr-soft) !important}
#dama svg circle[stroke]:not([stroke="none"]){stroke:var(--champagne)}
#dama svg circle:first-of-type{stroke:var(--bdr) !important}
#dama [stop-color]{stop-color:var(--champagne)}
#dama .sri-title,#dama h2,#dama h3,#dama strong{color:var(--cream) !important}
#dama .badge-tile-verify,#dama a{color:var(--champagne) !important}
.rec-carousel-panel{background:var(--card) !important;border:1px solid var(--bdr-soft) !important}
.rec-carousel-footer{background:color-mix(in srgb,var(--bg3) 70%,transparent) !important;border-top:1px solid var(--bdr-soft) !important}
.rec-carousel-mark{color:var(--champagne) !important;font-family:var(--fserif) !important;opacity:.8 !important}
.rec-carousel-quote,.rec-carousel-person-name,.rec-carousel-counter{color:var(--cream) !important}
.rec-carousel-person-role,.rec-carousel-person-rel{color:var(--muted2) !important}
.rec-carousel-link{color:var(--cream) !important;border-color:var(--bdr2) !important}
.rec-carousel-link:hover{border-color:var(--gold) !important}
.rec-carousel-nav-btn{color:var(--cream) !important}
.rec-carousel-avatar{background:var(--gold-dim) !important;color:var(--champagne) !important}
html[data-palette="ivory"] .rec-carousel-avatar img{border:1px solid var(--bdr-soft)}
.spot-badge{background:var(--card) !important;border:1px solid var(--bdr-soft) !important}
.spot-badge .lbl,.spot-badge .lbl strong{color:var(--body) !important}
.spot-badge .lbl strong{color:var(--cream) !important}
html[data-palette="ivory"] .nav-logo,html[data-palette="ivory"] .nav-links a{color:var(--cream) !important}
html[data-palette="ivory"] .hero-card-name,html[data-palette="ivory"] .tl-company,html[data-palette="ivory"] .exec-pillar strong{color:var(--cream) !important}
html[data-palette="ivory"] .chip{background:#fff !important}
.pillar-grid{align-items:start}

/* ---------- 10. Device tuning: phones & tablets ---------- */
@media (max-width:1024px){
  .hero-bg::before,.hero-bg::after{filter:blur(60px);width:80vmax;height:80vmax}  /* lighter GPU load on tablets */
}
@media (max-width:767px){
  .hero-bg::before,.hero-bg::after{animation:none;filter:blur(48px);opacity:.6}  /* static aurora on phones: no continuous repaint, no battery cost */
  body::before{opacity:.025}
  .hero-kpi,.metric,.bento-card,.exec-pillar,.pillar-card,.asset-card,.cs-kpi,.sabbatical-card,.faq-item,.contact-panel,.tl-card{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;background:color-mix(in srgb,var(--card) 100%,var(--bg)) !important}
  .v3-spot::before{display:none}                 /* no cursor on touch devices */
  .v3-spot:hover,.hero-kpi:hover,.metric:hover,.btn:hover{transform:none}
  .hero-h1{font-size:clamp(2.6rem,12vw,3.4rem)}
  .hero-sub{font-size:1.05rem;line-height:1.7}
  #nav,#nav.solid{background:color-mix(in srgb,var(--bg) 92%,transparent) !important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
}
@media (min-width:768px) and (max-width:1024px){
  .hero-h1{font-size:clamp(3rem,7vw,4rem)}
}
/* OLED-friendly: never pure black, never pure white text (reduces halation on phones) */
html[data-palette="midnight"]{--cream:#F4F1EA}

/* ---------- 11. Pull quotes ---------- */
.v3-quote{margin:22px 0 26px;padding:4px 0 4px 22px;border-left:2px solid var(--gold);max-width:36em}
.v3-quote p{margin:0;font-family:var(--fserif);font-style:italic;font-size:clamp(1.2rem,1.05rem + .7vw,1.55rem);line-height:1.35;color:var(--cream);text-wrap:balance}
.v3-quote-wide{max-width:52em;margin:0 auto 56px;padding:0;border-left:0;text-align:center}
.v3-quote-wide p{font-size:clamp(1.3rem,1.1rem + .9vw,1.9rem);color:var(--champagne)}
.v3-quote-wide::after{content:"";display:block;width:48px;height:1px;margin:22px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* ---------- 12. Hero starts right under the header (no full-viewport centring gap) ---------- */
#hero{min-height:auto !important;justify-content:flex-start !important;padding-top:0 !important}
.hero-grid{padding:44px 0 56px !important}
@media (max-width:1100px){.hero-grid{padding:36px 0 48px !important}}
@media (max-width:640px){.hero-grid{padding:22px 0 36px !important;gap:28px !important}}
/* the fold: eyebrow → name → tagline → proof numbers all visible on a 900px laptop */
.hero-h1{margin-bottom:14px}
.hero-tagline{margin-bottom:18px !important}
.hero-sub{margin-bottom:22px !important}