/* --- RESET & VARIABLES --- */
:root {
  --bg-desktop: #f0ede4;
  --bg-mobile: #f9f6ed;
  --footer-bg: #0d0d0d;
  
  --text-black: #000000;
  --text-navy: #1d2b53;
  --text-blue: #2b3b7f;
  --text-white: #ffffff;
  --text-dim: #999999;
  --text-gray: #7e7e7e;
  
  --bg-cyan: #c6fdff;
  --border-cyan: #32f9ff;
  --bg-yellow: #faffc6;
  --border-yellow: #f8de22;
  
  --btn-navy: #1d2b53;
  --btn-border: #00f7ff;
  --btn-purple: #3000bc;
  --circle-yellow: #f8de22;

  --font-serif: 'Fraunces', serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-sans: 'Inter', sans-serif;
  --font-brand: 'Trebuchet MS', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: var(--bg-desktop); font-family: var(--font-sans); color: var(--text-black); overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* --- HEADER --- */
.header {
  position: fixed; top: 0; left: 0; right: 0; height: 100px;
  background: rgba(240, 237, 228, 0.39); backdrop-filter: blur(15px);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 4rem; box-shadow: 0 6px 12px rgba(0,0,0,0.1); z-index: 1000;
}
.header-logo { display: flex; align-items: center; gap: 1rem; }
.logo-img { width: 67px; height: 67px; border-radius: 50%; object-fit: cover; }
.logo-text { display: flex; flex-direction: column; }
.brand-name { font-family: var(--font-brand); font-size: 1.5rem; color: #0d0d0d; }
.brand-sub { font-family: var(--font-brand); font-size: 0.75rem; letter-spacing: 1px; color: #0d0d0d; align-self: flex-end; }

.header-nav { display: flex; gap: 2rem; }
.header-nav a { font-family: var(--font-mono); font-size: 1.25rem; color: var(--text-gray); }
.header-nav a.dark-link { color: var(--text-black); }

.btn-contact { background: var(--btn-navy); border: 1px solid var(--btn-border); color: var(--text-white); font-family: var(--font-mono); font-size: 2rem; padding: 0.5rem 1.2rem; }
.menu-toggle { display: none; background: transparent; border: none; cursor: pointer; }

/* --- MAIN WRAPPER & HERO --- */
.main-wrapper { padding-top: 150px; padding-bottom: 80px; max-width: 1400px; margin: 0 auto; }

.hero { padding: 2rem 4rem; }
.dashed-box { border: 4px dashed #000; border-radius: 8px; padding: 5rem 4rem; display: flex; flex-direction: column; gap: 2rem; max-width: 1200px; }
.hero-heading { font-family: var(--font-serif); font-size: 4.5rem; font-weight: 400; line-height: 1.1; }
.hero-subtext { font-size: 2rem; line-height: 1.4; font-family: var(--font-sans); }
.hero-subtext strong { font-weight: 700; }

/* --- THE FIVE ARMS (HORIZONTAL ROWS) --- */
.five-arms { padding: 4rem; }
.section-title { font-family: var(--font-serif); font-size: 4.5rem; color: var(--text-navy); margin-bottom: 2rem; }
.text-center { text-align: center; }

.arms-container { display: flex; flex-direction: column; }
.arm-row { display: flex; align-items: center; border: 1px solid #000; padding: 2.5rem 3rem; min-height: 240px; }
.bg-cyan { background-color: var(--bg-cyan); }
.bg-yellow { background-color: var(--bg-yellow); }

.arm-title { font-family: var(--font-mono); font-size: 2rem; color: var(--text-blue); font-weight: 400; width: 35%; flex-shrink: 0; }
.arm-content { display: flex; flex-direction: column; gap: 1.5rem; width: 65%; }
.arm-content p { font-size: 2rem; }
.btn-wealth { background: var(--btn-navy); border: 1px solid var(--btn-border); color: var(--text-white); font-family: var(--font-mono); font-size: 1.125rem; padding: 0.5rem 1.5rem; display: inline-flex; align-items: center; justify-content: space-between; width: 400px; }

/* --- TIMELINES (ZIG-ZAG ALIGNMENT) --- */
.timeline-section { padding: 4rem; position: relative; }
.timeline-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3rem; margin: 4rem auto; max-width: 1000px; padding: 2rem 0; }
.timeline-vector { position: absolute; top: 0; left: 5%; width: 90%; height: 100%; z-index: -1; object-fit: contain; }

.t-row { display: flex; align-items: center; gap: 2rem; width: 100%; position: relative; }
.row-left { justify-content: flex-start; padding-left: 5%; }
.row-right { justify-content: flex-end; padding-right: 5%; }

.t-text { font-family: var(--font-serif); font-size: 3rem; color: var(--text-navy); line-height: 1.1; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.t-circle { background: var(--circle-yellow); border-radius: 50%; box-shadow: 3px 3px 20px rgba(0,0,0,0.6); flex-shrink: 0; }
.circle-sm { width: 180px; height: 180px; }
.circle-md { width: 270px; height: 270px; }
.circle-lg { width: 450px; height: 450px; }
.circle-xl { width: 620px; height: 620px; }

/* Positional nudges for organic layout */
.shift-right-1 { padding-right: 15%; }
.shift-left-1 { padding-left: 0%; margin-top: -50px; }
.shift-right-2 { padding-right: 0%; margin-top: -80px; }
.shift-left-2 { padding-left: 10%; margin-top: -100px; }

.shift-right-3 { padding-right: 20%; }
.shift-left-3 { padding-left: 5%; }
.shift-right-4 { padding-right: 5%; margin-top: -60px; }

.t-end { display: flex; justify-content: flex-end; width: 100%; padding-right: 10%; margin-top: 4rem; }
.end-left { justify-content: flex-start; padding-left: 10%; }
.btn-end { background: var(--btn-purple); color: var(--circle-yellow); font-family: var(--font-serif); font-weight: 700; font-size: 2.25rem; padding: 1rem 3rem; border-radius: 16px; }

/* --- FOOTER --- */
.footer { background: var(--footer-bg); padding: 4rem 6rem; display: flex; flex-direction: column; gap: 4rem; }
.text-white { color: var(--text-white); }
.text-dim { color: var(--text-dim); }

.footer-columns { display: flex; justify-content: space-between; gap: 2rem; }
.f-col { display: flex; flex-direction: column; }
.f-heading { font-family: var(--font-brand); font-size: 1rem; color: var(--text-white); font-weight: 400; margin-bottom: 1.5rem; }
.f-text { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.5; }
.brand-info { width: 40%; }

.f-label { font-family: var(--font-mono); font-size: 1rem; color: var(--text-white); font-weight: 200; margin-bottom: 1rem; }
.f-links { display: flex; flex-direction: column; gap: 1rem; }
.f-links a { font-family: var(--font-mono); font-size: 1.5rem; color: var(--text-white); }
.f-links .email { font-size: 1.5rem; text-align: right; }
.f-links .address { font-size: 1rem; color: var(--text-white); text-align: right; }

.footer-bottom { display: flex; flex-direction: column; gap: 1.5rem; }
.f-line { width: 100%; height: 1px; object-fit: cover; }
.copyright { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 300; letter-spacing: 2px; color: var(--text-white); }
.desktop-break { display: block; }

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 992px) {
  body { background-color: var(--bg-mobile); }
  .header { height: 80px; padding: 0 1.5rem; }
  .header-nav, .btn-contact { display: none; }
  .menu-toggle { display: block; }
  .logo-img { width: 40px; height: 40px; }
  .brand-name { font-size: 0.75rem; }
  .brand-sub { font-size: 0.4rem; }
  
  .main-wrapper { padding-top: 120px; }
  .hero { padding: 1rem; }
  .dashed-box { border-width: 0 4px 4px 0; padding: 2rem 1rem; }
  .hero-heading { font-size: 2.18rem; font-weight: 600; text-align: center; }
  .hero-subtext { font-size: 1rem; text-align: center; }
  
  .five-arms { padding: 1rem; }
  .section-title { font-size: 2rem; text-align: center; }
  
  /* Mobile Rows Stack & Flip Order */
  .arm-row { flex-direction: column; padding: 1.5rem; min-height: auto; align-items: flex-start; gap: 1rem; }
  .border-cyan { border-color: var(--border-cyan); }
  .border-yellow { border-color: var(--border-yellow); }
  
  .arm-title { width: 100%; font-size: 1rem; order: 2; margin-top: 0.5rem; }
  .desktop-break { display: none; }
  .arm-content { width: 100%; order: 1; }
  .arm-content p { font-size: 1rem; }
  .btn-wealth { width: 200px; font-size: 0.6rem; padding: 0.3rem 1rem; }
  
  /* Timeline Rescaling */
  .timeline-section { padding: 2rem 1rem; }
  .t-row { flex-direction: column; gap: 1rem; align-items: flex-start; padding: 0 !important; margin: 0 !important; }
  .t-text { font-size: 1rem; text-align: left !important; padding-left: 20%; }
  
  .t-circle { margin-left: 10%; }
  .circle-lg { width: 105px; height: 105px; }
  .circle-md { width: 63px; height: 63px; }
  .circle-sm { width: 44px; height: 44px; }
  .circle-xl { width: 147px; height: 147px; }
  
  .timeline-wrapper { gap: 2rem; align-items: flex-start; padding: 0; }
  .timeline-vector { left: 0; width: 100%; }
  .t-end, .end-left { justify-content: center; padding: 0; margin-top: 2rem; }
  .btn-end { font-size: 1.125rem; padding: 0.8rem 2rem; }

  /* Mobile Footer */
  .footer { padding: 2rem 1rem; gap: 2rem; }
  .footer-columns { flex-direction: column; gap: 3rem; }
  .brand-info { width: 100%; }
  .f-heading { font-size: 1rem; }
  .f-text { font-size: 1.5rem; }
  .f-links a { font-size: 1rem; }
  .f-links .email, .f-links .address { text-align: left; font-size: 1rem; }
  .f-links .address { font-size: 0.75rem; }
  .copyright { font-size: 0.625rem; letter-spacing: 1px; }
  .footer-bottom { flex-direction: column-reverse; }
}