/*
Theme Name: Ezekiel Chew
Theme URI: https://ezekielchew.com
Author: Ezekiel Chew
Author URI: https://ezekielchew.com
Description: Custom theme for ezekielchew.com — institutional dark luxury aesthetic. Trader. Investor. Business Builder.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ezekielchew
*/

:root {
  --bg-primary: #08080D;
  --bg-secondary: #0E0E15;
  --bg-tertiary: #131319;
  --bg-card: #15151D;
  --bg-card-hover: #1A1A24;
  --text-primary: #F0EDE6;
  --text-secondary: #8A8A96;
  --text-muted: #55556A;
  --accent-gold: #C9A460;
  --accent-gold-hover: #D4B06E;
  --accent-gold-dim: rgba(201,164,96,0.08);
  --accent-gold-glow: rgba(201,164,96,0.15);
  --border: #1E1E2A;
  --border-light: #2A2A38;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--text-primary);
  background: var(--bg-primary);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ═══════════ NAVIGATION ═══════════ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0 56px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(8,8,13,0.88);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(30,30,42,0.6);
}

.nav-logo {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-primary);
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0;
  height: 1px;
  background: var(--accent-gold);
  transition: width 0.4s ease;
}

.nav-links a:hover { color: var(--text-primary); }
.nav-links a:hover::after { width: 100%; }

.nav-cta {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 24px;
  background: var(--accent-gold);
  color: var(--bg-primary);
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.nav-cta:hover { background: var(--accent-gold-hover); }

/* ═══════════ HERO ═══════════ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
}

/* IMAGE CONTEXT: Dark, moody city skyline shot — Singapore Marina Bay at night or 
   similar financial district skyline. Communicates: money, markets, global business.
   The image should be very dark with subtle city lights. */
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.18) saturate(0.4);
}

.hero-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(8,8,13,0.95) 0%,
    rgba(8,8,13,0.75) 40%,
    rgba(8,8,13,0.6) 70%,
    rgba(8,8,13,0.85) 100%
  );
  z-index: 1;
}

.hero-glow {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(201,164,96,0.04) 0%, transparent 60%);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  padding: 140px 56px 80px;
  max-width: 800px;
}

.hero-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.2s forwards;
}

.hero-label::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--accent-gold);
}

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-bottom: 32px;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.4s forwards;
}

.hero h1 em {
  font-style: italic;
  color: var(--accent-gold);
}

.hero-sub {
  font-size: 17px;
  font-weight: 300;
  color: var(--text-secondary);
  letter-spacing: 0.03em;
  line-height: 1.5;
  margin-bottom: 48px;
  max-width: 520px;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.6s forwards;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.8s forwards;
}

.btn-primary {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 16px 36px;
  background: var(--accent-gold);
  color: var(--bg-primary);
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn-primary:hover { background: var(--accent-gold-hover); transform: translateY(-1px); }

.btn-secondary {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 16px 36px;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: all 0.3s;
}

.btn-secondary:hover { border-color: var(--accent-gold); color: var(--accent-gold); }

/* Hero right side — portrait */
.hero-portrait {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 45%;
  z-index: 2;
  overflow: hidden;
}

/* IMAGE CONTEXT: Professional portrait of Ezekiel — standing, dark background, 
   confident posture, shot from slightly below eye level to convey authority.
   Dark suit or smart casual. Slightly desaturated, moody lighting.
   This is the signature photo. It should make you think "this person runs things." */
.hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: brightness(0.7) saturate(0.7) contrast(1.1);
}

.hero-portrait::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 200px;
  background: linear-gradient(to right, var(--bg-primary), transparent);
  z-index: 1;
}

.hero-portrait::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 200px;
  background: linear-gradient(to top, var(--bg-primary), transparent);
  z-index: 1;
}

.hero-scroll {
  position: absolute;
  bottom: 40px;
  left: 56px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: fadeUp 0.8s ease 1.2s forwards;
}

.hero-scroll span {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.scroll-line {
  width: 48px;
  height: 1px;
  background: linear-gradient(to right, var(--accent-gold), transparent);
  animation: scrollPulse 2s ease infinite;
}

/* ═══════════ CREDIBILITY BAR ═══════════ */
.cred-bar {
  padding: 28px 56px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}

.cred-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.cred-item {
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.cred-item strong {
  color: var(--accent-gold);
  font-weight: 500;
  font-family: var(--serif);
  font-size: 15px;
}

.cred-sep { color: var(--border-light); font-weight: 300; }

/* ═══════════ SECTIONS ═══════════ */
section { padding: 140px 56px; }

.section-inner { max-width: 1100px; margin: 0 auto; }

.section-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-label::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--accent-gold);
}

.section-headline {
  font-family: var(--serif);
  font-size: clamp(30px, 3.5vw, 48px);
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 20px;
  max-width: 700px;
}

.section-sub {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 580px;
  line-height: 1.7;
  margin-bottom: 64px;
}

/* ═══════════ ECOSYSTEM ═══════════ */
.ecosystem { background: var(--bg-primary); }

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

.eco-card {
  background: var(--bg-card);
  padding: 44px 40px;
  border: 1px solid var(--border);
  position: relative;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  min-height: 300px;
  overflow: hidden;
}

.eco-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 2px;
  background: var(--accent-gold);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.eco-card:hover { background: var(--bg-card-hover); border-color: var(--border-light); }
.eco-card:hover::before { width: 100%; }

.eco-card-tag {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 24px;
}

.eco-card h3 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 16px;
  letter-spacing: 0.01em;
}

.eco-card p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.75;
  flex-grow: 1;
}

.eco-card-link {
  margin-top: 28px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;
}

.eco-card:hover .eco-card-link { gap: 14px; }

.arrow-icon {
  width: 16px; height: 16px;
  stroke: currentColor; stroke-width: 2;
  fill: none;
}

/* ═══════════ ABOUT ═══════════ */
.about-section { background: var(--bg-secondary); }

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}

.about-text-col {
  padding: 80px 72px 80px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-text-col p {
  font-size: 17px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.8;
}

.about-text-col p:first-of-type {
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 300;
  line-height: 1.6;
}

.about-text-col .philosophy {
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  color: var(--accent-gold);
  line-height: 1.5;
  margin-top: 12px;
  padding-left: 24px;
  border-left: 2px solid var(--accent-gold);
}

.about-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-top: 28px;
  transition: gap 0.3s;
}

.about-link:hover { gap: 16px; }

.about-image-col {
  position: relative;
  min-height: 600px;
  overflow: hidden;
}

/* IMAGE CONTEXT: Ezekiel in his element — could be at a desk with monitors showing charts, 
   or standing by a window in a high-rise office overlooking a city. Communicates: 
   "this person actively trades, invests, and builds." Moody, cinematic lighting.
   NOT a posed corporate headshot — something more editorial and authentic. */
.about-image-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.65) saturate(0.6) contrast(1.1);
}

.about-image-col::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to right, var(--bg-secondary) 0%, transparent 30%);
}

.about-image-col .img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #12121a, #0a0a10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  text-align: center;
}

.img-label {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.img-description {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 280px;
  opacity: 0.7;
}

/* ═══════════ PROOF / TRACK RECORD ═══════════ */
.proof-section {
  background: var(--bg-primary);
  border-top: 1px solid var(--border);
}

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

.proof-card {
  background: var(--bg-card);
  padding: 48px 36px;
  border: 1px solid var(--border);
  text-align: center;
}

.proof-number {
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 300;
  color: var(--accent-gold);
  line-height: 1;
  margin-bottom: 12px;
}

.proof-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.proof-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ═══════════ ADVISORY ═══════════ */
.advisory-section {
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}

.advisory-section::before {
  content: '';
  position: absolute;
  top: 0; right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--accent-gold-dim) 0%, transparent 60%);
}

.advisory-header {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
}

.advisory-header .section-label { justify-content: center; }
.advisory-header .section-label::before { display: none; }

.advisory-header .section-headline {
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
}

.advisory-header .section-sub {
  margin-left: auto;
  margin-right: auto;
  max-width: 640px;
}

.advisory-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  position: relative;
}

.tier-card {
  background: var(--bg-card);
  padding: 48px 36px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: all 0.4s;
  position: relative;
}

.tier-card.featured {
  border-color: var(--accent-gold);
  background: var(--bg-card-hover);
}

.tier-card.featured::before {
  content: 'MOST POPULAR';
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 6px;
  background: var(--accent-gold);
  color: var(--bg-primary);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-align: center;
}

.tier-card:hover { border-color: var(--border-light); }

.tier-tag {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 20px;
}

.tier-card h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 16px;
}

.tier-price {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 300;
  color: var(--accent-gold);
  margin-bottom: 4px;
}

.tier-price-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.tier-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  flex-grow: 1;
  margin-bottom: 28px;
}

.tier-features {
  list-style: none;
  margin-bottom: 32px;
}

.tier-features li {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.tier-features li:last-child { border-bottom: none; }

.tier-features li::before {
  content: '—';
  color: var(--accent-gold);
  flex-shrink: 0;
}

.tier-cta {
  margin-top: auto;
}

.tier-cta button {
  width: 100%;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.tier-cta .btn-gold {
  background: var(--accent-gold);
  color: var(--bg-primary);
  border: none;
}

.tier-cta .btn-gold:hover { background: var(--accent-gold-hover); }

.tier-cta .btn-outline {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-light);
}

.tier-cta .btn-outline:hover { border-color: var(--accent-gold); color: var(--accent-gold); }

/* ═══════════ TRUST BAR (logos/mentions) ═══════════ */
.trust-section {
  padding: 72px 56px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
  text-align: center;
}

.trust-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 36px;
}

.trust-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
}

/* IMAGE CONTEXT: Publication/brand logos where Ezekiel has been featured.
   Investopedia, Benzinga, Entrepreneur Magazine, The Straits Times, etc.
   Displayed in white/grey monochrome to keep the design clean. */
.trust-logo {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.trust-logo:hover { opacity: 0.8; }

/* ═══════════ NEWSLETTER ═══════════ */
.newsletter-section {
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}

.newsletter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.newsletter-text .section-sub { margin-bottom: 32px; }

.newsletter-form {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
}

.newsletter-form input {
  flex: 1;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-right: none;
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  outline: none;
  transition: border-color 0.3s;
}

.newsletter-form input::placeholder { color: var(--text-muted); }
.newsletter-form input:focus { border-color: var(--accent-gold); }

.newsletter-form button {
  padding: 16px 28px;
  background: var(--accent-gold);
  color: var(--bg-primary);
  border: 1px solid var(--accent-gold);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
}

.newsletter-form button:hover { background: var(--accent-gold-hover); }

.newsletter-note {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.newsletter-preview {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 36px;
  position: relative;
}

.newsletter-preview-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 20px;
}

.newsletter-preview h4 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 16px;
}

.newsletter-preview p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 12px;
}

.newsletter-preview .preview-topics {
  list-style: none;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.newsletter-preview .preview-topics li {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.newsletter-preview .preview-topics li::before {
  content: '';
  width: 12px;
  height: 1px;
  background: var(--accent-gold);
}

/* ═══════════ SPEAKING ═══════════ */
.speaking-section { background: var(--bg-primary); }

.speaking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}

.speaking-image {
  position: relative;
  min-height: 500px;
  overflow: hidden;
}

/* IMAGE CONTEXT: Ezekiel on stage at a conference or event — shot from the audience 
   perspective showing him presenting with a large screen behind him. Communicates 
   authority, experience, and being in-demand. Alternatively, a shot of him at a 
   panel discussion with other speakers, or addressing a room of professionals.
   Dark/moody treatment with warm stage lighting preserved. */
.speaking-image .img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #14141c, #0c0c12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  text-align: center;
}

.speaking-text-col {
  padding: 80px 0 80px 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.speaking-text-col p {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 24px;
}

.speaking-topics {
  margin-top: 20px;
  margin-bottom: 32px;
}

.speaking-topic {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.speaking-topic:first-child { border-top: 1px solid var(--border); }

.speaking-topic h4 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 4px;
}

.speaking-topic p {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 0;
  line-height: 1.5;
}

/* ═══════════ PHOTO STRIP ═══════════ */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--bg-primary);
}

/* IMAGE CONTEXT: Four professional photos of Ezekiel in different contexts:
   1. Trading/at screens — shows he's an active trader
   2. Speaking at event — shows authority and demand
   3. Meeting/boardroom — shows business builder side
   4. Casual/lifestyle — shows the human side (e.g., Singapore skyline, travel)
   All treated with dark filter, slight desaturation for consistency. */
.photo-strip-item {
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
}

.photo-strip-item .img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.photo-strip-item:nth-child(1) .img-placeholder { background: linear-gradient(135deg, #111119, #0d0d13); }
.photo-strip-item:nth-child(2) .img-placeholder { background: linear-gradient(135deg, #13131b, #0f0f15); }
.photo-strip-item:nth-child(3) .img-placeholder { background: linear-gradient(135deg, #101018, #0c0c12); }
.photo-strip-item:nth-child(4) .img-placeholder { background: linear-gradient(135deg, #14141c, #0e0e14); }

/* ═══════════ FOOTER ═══════════ */
footer {
  padding: 80px 56px 36px;
  border-top: 1px solid var(--border);
  background: var(--bg-primary);
}

.footer-inner { max-width: 1100px; margin: 0 auto; }

.footer-top {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}

.footer-brand-name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.footer-tagline {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

.footer-email {
  font-size: 13px;
  color: var(--accent-gold);
}

.footer-heading {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  font-size: 14px;
  color: var(--text-secondary);
  transition: color 0.3s;
}

.footer-links a:hover { color: var(--accent-gold); }

.footer-bottom {
  padding-top: 28px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-copy {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

.footer-socials {
  display: flex;
  gap: 24px;
}

.footer-socials a {
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.06em;
  transition: color 0.3s;
}

.footer-socials a:hover { color: var(--accent-gold); }

/* ═══════════ ANIMATIONS ═══════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Staggered children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1024px) {
  .hero-portrait { display: none; }
  .hero-content { max-width: 100%; }
}

@media (max-width: 900px) {
  nav { padding: 0 24px; }
  .nav-links { display: none; }
  section { padding: 80px 24px; }
  .eco-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .about-text-col { padding: 0 0 48px 0; }
  .about-image-col { min-height: 350px; }
  .advisory-tiers { grid-template-columns: 1fr; }
  .newsletter-grid { grid-template-columns: 1fr; gap: 48px; }
  .speaking-grid { grid-template-columns: 1fr; }
  .speaking-text-col { padding: 48px 0 0 0; }
  .speaking-image { min-height: 300px; }
  .photo-strip { grid-template-columns: repeat(2, 1fr); }
  .proof-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .cred-inner { gap: 20px; }
  .hero { min-height: auto; padding-top: 120px; padding-bottom: 80px; }
  .hero-content { padding: 120px 24px 80px; }
  .hero-ctas { flex-direction: column; }
  .btn-primary, .btn-secondary { width: 100%; text-align: center; justify-content: center; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form input { border-right: 1px solid var(--border); border-bottom: none; }
  .trust-logos { gap: 32px; }
}

@media (max-width: 600px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  .photo-strip { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   INTERNAL PAGE STYLES
   Added for: About, Advisory (full page), Ecosystem pages,
   Newsletter page, Speaking page, Contact page
   ═══════════════════════════════════════════════════════════ */

/* ═══════════ PAGE HERO (for sub-pages) ═══════════ */
.page-hero {
  padding: 180px 56px 100px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--accent-gold-dim) 0%, transparent 60%);
}

.page-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.page-hero-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-hero-label::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--accent-gold);
}

.page-hero h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 24px;
  max-width: 900px;
}

.page-hero h1 em {
  font-style: italic;
  color: var(--accent-gold);
}

.page-hero-sub {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 640px;
  line-height: 1.6;
}

/* ═══════════ LONG-FORM CONTENT BLOCKS ═══════════ */
.content-section {
  padding: 100px 56px;
}

.content-section.alt {
  background: var(--bg-secondary);
}

.content-inner {
  max-width: 800px;
  margin: 0 auto;
}

.content-inner.wide {
  max-width: 1100px;
}

.content-inner p {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 24px;
}

.content-inner p.lead {
  font-size: 20px;
  color: var(--text-primary);
  font-weight: 300;
  line-height: 1.6;
  margin-bottom: 32px;
}

.content-inner h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 24px;
  margin-top: 48px;
}

.content-inner h2:first-child { margin-top: 0; }

.content-inner h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 12px;
  margin-top: 32px;
  color: var(--text-primary);
}

.content-inner h3 strong,
.content-inner h3 em {
  color: var(--accent-gold);
  font-weight: 500;
  font-style: normal;
}

.content-inner ul {
  list-style: none;
  margin-bottom: 32px;
}

.content-inner ul li {
  font-size: 16px;
  color: var(--text-secondary);
  padding: 10px 0;
  padding-left: 28px;
  position: relative;
  line-height: 1.6;
  border-bottom: 1px solid var(--border);
}

.content-inner ul li:last-child { border-bottom: none; }

.content-inner ul li::before {
  content: '—';
  color: var(--accent-gold);
  position: absolute;
  left: 0;
  top: 10px;
}

.content-inner strong {
  color: var(--text-primary);
  font-weight: 500;
}

/* Philosophy block reused on About */
.philosophy-block {
  font-family: var(--serif);
  font-size: 24px;
  font-style: italic;
  color: var(--accent-gold);
  line-height: 1.5;
  padding: 24px 0 24px 28px;
  border-left: 2px solid var(--accent-gold);
  margin: 32px 0;
}

/* ═══════════ FOUR PILLARS (About page philosophy) ═══════════ */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  margin-top: 48px;
}

.pillar-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 40px 36px;
  transition: all 0.4s;
}

.pillar-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-gold);
}

.pillar-card h4 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--accent-gold);
  margin-bottom: 12px;
}

.pillar-card p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 0;
}

/* ═══════════ CTA BLOCK (used across pages) ═══════════ */
.cta-block {
  padding: 100px 56px;
  background: var(--bg-primary);
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.cta-block-inner {
  max-width: 700px;
  margin: 0 auto;
}

.cta-block h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 20px;
}

.cta-block p {
  font-size: 17px;
  color: var(--text-secondary);
  margin-bottom: 40px;
  line-height: 1.7;
}

/* ═══════════ FORMS (Advisory, Speaking, Contact) ═══════════ */
.form-section {
  padding: 100px 56px;
  background: var(--bg-secondary);
}

.form-inner {
  max-width: 720px;
  margin: 0 auto;
}

.form-intro {
  text-align: center;
  margin-bottom: 56px;
}

.form-intro h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 300;
  margin-bottom: 16px;
}

.form-intro p {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

.ez-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 48px 44px;
}

.form-field {
  margin-bottom: 24px;
}

.form-field label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="url"],
.form-field input[type="date"],
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  outline: none;
  transition: border-color 0.3s;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--accent-gold);
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}

.form-field select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23C9A460' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}

.form-field.half {
  display: inline-block;
  width: calc(50% - 12px);
  vertical-align: top;
}

.form-field.half:first-of-type { margin-right: 20px; }

.form-submit {
  width: 100%;
  padding: 18px;
  background: var(--accent-gold);
  color: var(--bg-primary);
  border: none;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 8px;
}

.form-submit:hover {
  background: var(--accent-gold-hover);
}

.form-note {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 24px;
  letter-spacing: 0.04em;
}

/* ═══════════ "FOR WHOM" BLOCK (Advisory) ═══════════ */
.for-whom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: 48px;
}

.for-whom-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 44px 40px;
}

.for-whom-card.yes { border-top: 2px solid var(--accent-gold); }
.for-whom-card.no { border-top: 2px solid var(--text-muted); }

.for-whom-card h4 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 20px;
}

.for-whom-card.yes h4 { color: var(--accent-gold); }

.for-whom-card ul {
  list-style: none;
}

.for-whom-card ul li {
  font-size: 14px;
  color: var(--text-secondary);
  padding: 10px 0;
  padding-left: 24px;
  position: relative;
  line-height: 1.6;
  border-bottom: none;
}

.for-whom-card.yes ul li::before {
  content: '✓';
  color: var(--accent-gold);
  position: absolute;
  left: 0;
  top: 10px;
}

.for-whom-card.no ul li::before {
  content: '✕';
  color: var(--text-muted);
  position: absolute;
  left: 0;
  top: 10px;
}

/* ═══════════ ECOSYSTEM PAGE (individual) ═══════════ */
.ecosystem-page-tag {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--accent-gold);
  color: var(--accent-gold);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 32px;
}

.recognition-list {
  background: var(--bg-card);
  border-left: 2px solid var(--accent-gold);
  padding: 32px 36px;
  margin: 40px 0;
}

.recognition-list ul {
  margin-bottom: 0;
}

.recognition-list li {
  border-bottom: 1px solid var(--border);
}

.recognition-list li:last-child {
  border-bottom: none;
}

/* ═══════════ NEWSLETTER PAGE (expanded form) ═══════════ */
.newsletter-page-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 48px 44px;
  max-width: 560px;
  margin: 40px auto 0;
}

.newsletter-page-form .newsletter-form {
  margin-bottom: 16px;
}

/* ═══════════ ERROR/404 ═══════════ */
.error-404 {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 180px 56px 100px;
  text-align: center;
}

.error-404 h1 {
  font-family: var(--serif);
  font-size: clamp(60px, 10vw, 140px);
  font-weight: 300;
  color: var(--accent-gold);
  line-height: 1;
  margin-bottom: 20px;
}

.error-404 h2 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 300;
  margin-bottom: 20px;
}

.error-404 p {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 40px;
}

/* ═══════════ ECOSYSTEM DROPDOWN (nav) ═══════════ */
.nav-links .menu-item-has-children {
  position: relative;
}

.nav-links .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: 8px 0;
  min-width: 220px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  z-index: 100;
}

.nav-links .menu-item-has-children:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-links .sub-menu li {
  display: block;
}

.nav-links .sub-menu a {
  display: block;
  padding: 10px 20px;
  font-size: 12px;
  letter-spacing: 0.1em;
}

.nav-links .sub-menu a::after { display: none; }

.nav-links .sub-menu a:hover {
  background: var(--bg-card);
  color: var(--accent-gold);
}

/* ═══════════ MOBILE MENU ═══════════ */
.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 8px;
  z-index: 1001;
}

.mobile-menu-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--text-primary);
  margin: 6px 0;
  transition: all 0.3s;
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ═══════════ RESPONSIVE ADDITIONS ═══════════ */
@media (max-width: 900px) {
  .page-hero { padding: 140px 24px 60px; }
  .content-section { padding: 60px 24px; }
  .cta-block { padding: 60px 24px; }
  .form-section { padding: 60px 24px; }
  .ez-form { padding: 32px 24px; }
  .pillars-grid { grid-template-columns: 1fr; }
  .for-whom-grid { grid-template-columns: 1fr; }
  .form-field.half { width: 100%; display: block; }
  .form-field.half:first-of-type { margin-right: 0; }

  .mobile-menu-toggle { display: block; }

  .nav-links {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    gap: 0;
    padding: 24px 0;
    transform: translateY(-120%);
    transition: transform 0.4s ease;
    display: flex;
  }

  .nav-links.mobile-open {
    transform: translateY(0);
  }

  .nav-links li {
    width: 100%;
  }

  .nav-links a {
    display: block;
    padding: 14px 24px;
    font-size: 13px;
  }

  .nav-links .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: var(--bg-secondary);
    border: none;
    padding: 0;
    min-width: 0;
  }

  .nav-links .sub-menu a {
    padding: 10px 40px;
    font-size: 12px;
    color: var(--text-muted);
  }
}

/* ═══════════ MOBILE NAV FIXES ═══════════ */
@media (max-width: 900px) {
    /* Hide "Work with Ezekiel" button on mobile */
    .nav-cta {
        display: none;
    }

    /* Prevent logo from wrapping to two lines */
    .nav-logo {
        white-space: nowrap;
        font-size: 15px;
    }

    /* Tighten nav padding on mobile */
    nav {
        padding: 0 20px;
    }
}

/* Force-grid yung mga pares para hindi mag-shift */
.ez-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

/* I-override yung dating .half width para mag-fill sa grid cell */
.ez-form .form-row .form-field.half {
    width: 100%;
    float: none;
    margin: 0;
}

/* Mobile — stack vertically */
@media (max-width: 640px) {
    .ez-form .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}