/* ============================================================
   SONJEO GLOBAL — Light / white corporate theme
   Overrides command.css + verticals.css for a clean institutional
   white site. Loaded LAST. Keeps the structure; flips the palette,
   drops the cinematic dark globe/HUD/grain.
   ============================================================ */

:root {
  /* surfaces */
  --void:     #FAFAF8;   /* alt section bg (faint warm off-white) */
  --deep:     #FFFFFF;   /* page / primary section bg */
  --surface:  #FFFFFF;
  --surface-2:#F4F3EF;
  --border:   #E5E3DC;   /* hairlines */

  /* ink */
  --muted:    #8A8B92;
  --body:     #51535C;
  --heading:  #1A1B20;
  --white:    #14151A;   /* command.css uses --white for headings → make it ink */

  /* gold (legible on white) */
  --gold:     #A37C1C;
  --gold-lt:  #C9A227;
  --gold-dim: #D8C58A;
  --gold-glow: rgba(163, 124, 28, 0.10);

  --hud-line: rgba(20,20,30,0.18);
}

/* clean base */
body { background: var(--deep); color: var(--body); }

/* drop the cinematic layers */
.grain::before { display: none; }
.sim, .hud { display: none !important; }

/* ---- nav ---- */
.nav.scrolled {
  background: rgba(255,255,255,0.86);
  border-bottom: 1px solid var(--border);
}
.nav .links a { color: var(--body); }
.nav .links a:hover { color: var(--gold); }

/* ---- primary button: blue fill, WHITE text for clear contrast ---- */
.btn { color: #fff; border-color: var(--gold); background: var(--gold); }
.btn:hover { background: transparent; color: var(--gold); }
.btn.ghost { background: transparent; color: var(--heading); border-color: var(--border); }
.btn.ghost:hover { border-color: var(--gold); color: var(--gold); }

/* ---- section backgrounds (alternating white / off-white) ---- */
.band { background: var(--deep); }
.band.alt { background: var(--void); }
.dotgrid { background-image: radial-gradient(rgba(20,20,30,0.05) 1px, transparent 1px); }

/* ---- mobile menu ---- */
.mobile-menu { background: rgba(255,255,255,0.97); }
.mobile-menu a { color: var(--heading); border-bottom: 1px solid var(--border); }

/* ---- hero (plain white, strong type) ---- */
.hero.site { min-height: 78vh; min-height: 78svh; }

/* ============================================================
   VERTICAL INDEX + SECTIONS (light)
   ============================================================ */
.vindex {
  background: rgba(255,255,255,0.90);
  border-block: 1px solid var(--border);
}
.vindex a { color: var(--body); }
.vindex a:hover { color: var(--heading); }
.vindex a.active { color: var(--gold); }
.vindex a.active .ixn { color: var(--gold); }

.vsection { background: var(--deep); border-top: 1px solid var(--border); }
.vsection.alt { background: var(--void); }

.vframe {
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: 0 24px 48px -28px rgba(26,27,32,0.35);
}
.vframe image-slot::part(empty) { color: var(--muted); }

/* overlay tags: light chips on the (now light) imagery */
.vframe .vtag {
  color: var(--gold);
  background: rgba(255,255,255,0.84);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.vframe .vlive {
  color: var(--muted);
  background: rgba(255,255,255,0.84);
  border: 1px solid var(--border);
  padding: 5px 9px; border-radius: 3px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.vframe .vlive .d { background: #2E8B57; }
.vframe .corner { border-color: rgba(20,20,30,0.22); }

/* ---- process / flow (light) ---- */
.flow .step .d { background: var(--deep); border-color: var(--gold); }

/* ---- final CTA + footer (light) ---- */
.final .sim-cta { display: none; }
.footer { background: var(--void); border-top: 1px solid var(--border); }

/* reduce the heavy display weight slightly for a cleaner corporate feel */
.vtitle, .hero.site h1 { letter-spacing: -0.015em; }

/* ============================================================
   BRAND PALETTE — white / blue / grey / black (replaces gold)
   ============================================================ */
:root {
  --gold:     #2A4BC0;   /* brand blue accent (legible on white) */
  --gold-lt:  #5B7CF0;   /* lighter blue */
  --gold-dim: #9AA3BE;   /* grey-blue */
  --gold-glow: rgba(42,75,192,0.10);
  --navy:     #1B2150;
}
/* recreated Sonjeo mark — twin triangles */
.nav .logo .mk, .footer .about .mk {
  width: 26px; height: 22px; border: 0 !important; border-radius: 0 !important; transform: none !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Cpath d='M3 3 L23 12.5 L3 22 Z' fill='%235B7CF0'/%3E%3Cpath d='M37 14 L17 23.5 L37 33 Z' fill='%232A3675'/%3E%3C/svg%3E") left center/contain no-repeat;
}
.nav .logo .mk::after, .footer .about .mk::after { content: none !important; display: none !important; }
body[data-world] .nav .logo .mk, body[data-world] .footer .about .mk {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Cpath d='M3 3 L23 12.5 L3 22 Z' fill='%237FA0FF'/%3E%3Cpath d='M37 14 L17 23.5 L37 33 Z' fill='%23B9C6F2'/%3E%3C/svg%3E");
}

/* ============================================================
   HOME — cinematic full-bleed background video hero
   (scoped to body.home so light legal/contact pages are unaffected)
   ============================================================ */
body.home .hero.site { position: relative; overflow: hidden; isolation: isolate; min-height: 100vh; min-height: 100svh; }

/* the video fills the hero behind everything */
body.home .hero-bg { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: #05070e; }
body.home .hero-bg video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform-origin: 58% 42%;
  /* clean, cool, near-monochrome grade — lifted brighter for an airier hero */
  filter: saturate(0.5) contrast(1.0) brightness(1.16);
}
@media (prefers-reduced-motion: no-preference) {
  body.home .hero-bg video { animation: heroZoom 44s ease-in-out infinite alternate; }
}
@keyframes heroZoom { from { transform: scale(1.02); } to { transform: scale(1.09); } }

/* clean legibility scrim — dark only where text/nav needs it, crisp through the middle */
body.home .hero-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,8,16,0.42) 0%, rgba(5,8,16,0.05) 26%, rgba(5,8,16,0.05) 56%, rgba(5,8,16,0.62) 100%);
}
/* keep the soft animated blue glow, just lift it above the video */
body.home .hero.site::before { z-index: -2; }

/* ---- light typography over the footage ---- */
body.home .hero.site .kicker { color: var(--gold-lt); }
body.home .hero.site .kicker::before { background: var(--gold-lt); }
body.home .hero.site h1 { color: #fff; text-shadow: 0 2px 24px rgba(5,8,16,0.45); }
body.home .hero.site .sub { color: rgba(255,255,255,0.9); text-shadow: 0 1px 16px rgba(5,8,16,0.5); }
body.home .hero.site .metaline { border-top-color: rgba(255,255,255,0.22); }
body.home .hero.site .metaline .m { border-right-color: rgba(255,255,255,0.18); }
body.home .hero.site .metaline .m b { color: #fff; }
body.home .hero.site .metaline .m span { color: rgba(255,255,255,0.62); }
body.home .hero.site .btn.ghost { color: #fff; border-color: rgba(255,255,255,0.42); }
body.home .hero.site .btn.ghost:hover { color: var(--gold-lt); border-color: var(--gold-lt); }
body.home .hero.site .scroll-ind { color: rgba(255,255,255,0.78); }

/* ---- transparent glass nav while sitting over the hero footage ---- */
body.home .nav:not(.scrolled) { background: transparent; border-bottom-color: transparent; }
body.home .nav:not(.scrolled) .links a { color: rgba(255,255,255,0.82); }
body.home .nav:not(.scrolled) .links a:hover { color: #fff; }
body.home .nav:not(.scrolled) .logo .wm { color: #fff; }
body.home .nav:not(.scrolled) .menu-btn { color: #fff; }
body.home .nav:not(.scrolled) .logo .mk {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Cpath d='M3 3 L23 12.5 L3 22 Z' fill='%237FA0FF'/%3E%3Cpath d='M37 14 L17 23.5 L37 33 Z' fill='%23B9C6F2'/%3E%3C/svg%3E");
}
/* nav CTA stays solid blue with white text — already legible over footage */