body { margin:0; font-family:'Inter',sans-serif; }

.header { padding:20px 4%; border-bottom:1px solid #eee; }

.nav-container {
  max-width:1600px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo { height:55px; }

.nav { display:flex; gap:25px; }

.nav a { text-decoration:none; color:#222; font-size:14px; }

.split-container { display:flex; min-height:75vh; }

.box { flex:1; padding:70px; display:flex; flex-direction:column; justify-content:center; }

.left-box { background:#f5f5f5; text-align:right; }

.right-box { background:#111; color:#b89b3c; }

.right-box h1, .right-box p { color:#b89b3c; }

h1 { font-family:'Cormorant Garamond',serif; font-size:48px; margin-bottom:20px; }

.footer { background:#f9f9f9; padding:25px 10%; text-align:center; border-top:1px solid #eee; }

.contact a { text-decoration:none; color:#b89b3c; }

/* Founder alignment fix */
.founder-align {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-start;
  margin-top:20px;
}

.founder-img-large {
  width:190px;
  border-radius:10px;
  margin-bottom:12px;
}

.founder-name {
  font-family:'Cormorant Garamond',serif;
  font-size:22px;
}

.founder-title {
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#666;
}

.letter {
  font-family:'Libre Baskerville', serif;
  font-size:14px;
  line-height:1.7;
  white-space:pre-line;
}

@media(max-width:1200px){
  .split-container{flex-direction:column;}
  .nav{flex-wrap:wrap;}
}

/* ---------- PHASE 1 CINEMATIC MICRO INTERACTIONS ---------- */

.nav a {
  position: relative;
  transition: color 0.3s ease, letter-spacing 0.3s ease;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: #b89b3c;
  transition: width 0.4s ease;
}

.nav a:hover {
  color: #b89b3c;
  letter-spacing: 0.5px;
}

.nav a:hover::after {
  width: 100%;
}

/* Cinematic box reveal */
.split-container {
  opacity: 0;
  transform: translateY(20px);
  animation: cinematicReveal 0.8s ease forwards;
}

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

/* Subtle left/right stagger */
.left-box {
  animation: fadeLeft 0.8s ease forwards;
}

.right-box {
  animation: fadeRight 0.9s ease forwards;
}

@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-25px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeRight {
  from { opacity: 0; transform: translateX(25px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Gold glow on scroll */
.right-box.glow {
  text-shadow: 0 0 8px rgba(184,155,60,0.4);
  transition: text-shadow 0.6s ease;
}

/* Founder staged reveal */
.founder-img-large {
  opacity: 0;
  transform: translateY(15px);
  animation: founderImg 0.8s ease forwards;
}

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

.founder-name, .founder-title {
  opacity: 0;
  animation: founderText 0.8s ease forwards;
  animation-delay: 0.3s;
}

@keyframes founderText {
  to { opacity: 1; }
}

.letter {
  opacity: 0;
  animation: letterReveal 1.2s ease forwards;
  animation-delay: 0.6s;
}

@keyframes letterReveal {
  to { opacity: 1; }
}

/* ---------- PHASE 2 PREMIUM VISUAL DEPTH ---------- */

/* Subtle textures */
.left-box {
  background: #f5f5f5;
  background-image: radial-gradient(rgba(0,0,0,0.015) 1px, transparent 1px);
  background-size: 6px 6px;
}

.right-box {
  background: #111;
  background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 4px 4px;
}

/* Elegant vertical gold divider */
.split-container {
  position: relative;
}

.split-container::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(184,155,60,0.6),
    rgba(184,155,60,0.6),
    transparent
  );
  pointer-events: none;
}

/* Refined heading animation */
h1 {
  transform: scale(0.96);
  opacity: 0;
  animation: titleReveal 0.7s ease forwards;
}

@keyframes titleReveal {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Slight typography polish */
p {
  line-height: 1.8;
  letter-spacing: 0.2px;
}

/* Smooth visual refinement */
.box {
  transition: background 0.4s ease;
}

/* ===============================
   PHASE 3 – CINEMATIC REFINEMENT
================================ */

/* Cinematic homepage split transition */
body.home-loaded .left-box {
  transform: translateX(0);
  transition: transform 1.2s ease;
}

body.home-loaded .right-box {
  transform: translateX(0);
  transition: transform 1.2s ease;
}

.left-box {
  transform: translateX(-40px);
}

.right-box {
  transform: translateX(40px);
}

/* Ultra Luxury Variant */
  background: #000;
}

  background: #000;
  color: #d4af37;
}

  color: #d4af37;
}

  background: #0c0c0c;
  color: #ccc;
}

/* Executive Mode Toggle Button */
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: #b89b3c;
  color: #000;
  padding: 8px 16px;
  font-size: 12px;
  border-radius: 20px;
  cursor: pointer;
  z-index: 999;
  transition: all 0.3s ease;
}

  background: #d4af37;
}

/* Advanced storytelling stagger */
.storyline {
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.8s ease;
}

.storyline.visible {
  opacity: 1;
  transform: translateY(0);
}