/* ============================================================
   JUANMANUELCALZADA.COM — MASTER DESIGN SYSTEM v6.0 (Quiet Luxury)
   Palette : Deep Navy #0B1120 · Slate #4A6572 · Terracotta #E8845C
   Type    : Fraunces (display) · DM Sans (body) · JetBrains Mono (labels)
   ============================================================ */

/* ── 1. TOKENS & VARIABLES ──────────────────────────────────── */
:root {
  --navy:      #0B1120;
  --navy-mid:  #1E293B;
  --navy-lite: #1A3A70;
  --blue:      #4A6572; /* Quiet Luxury Slate */
  --blue-h:    #374D58; /* Deep Slate Hover */
  --blue-lt:   #CBD5E1; /* Muted Slate Light */
  --blue-pale: #F1F5F9; /* Muted Slate Pale */
  --mission:   #E8845C; /* Terracotta Accent */
  --mission-lt:#FDE8DF;
  --white:     #FFFFFF;
  --off:       #F8FAFC;
  --slate:     #E2E8F0;
  --slate-mid: #BBC4D0;
  --text:      #0F172A; /* Deep readable dark */
  --text-mid:  #475569; /* Dark readable */
  --text-lt:   #94A3B8; /* Still readable */
  
  --serif: 'Fraunces', Georgia, serif;
  --sans:  'DM Sans', system-ui, sans-serif;
  --mono:  'JetBrains Mono', monospace;
  
  --wrap: 1280px;
  --gap:  5%;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 2. RESET & BASE ────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body { font-family:var(--sans); background:var(--white); color:var(--text); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img  { display:block; max-width:100%; height:auto }
a    { color:inherit; text-decoration:none; transition: color 0.3s var(--ease); }
button { cursor:pointer; font-family:inherit }
ul,ol  { list-style:none }
input,select,textarea { font-family:inherit }

.s-wrap { max-width:var(--wrap); margin:0 auto; padding:0 var(--gap) }
hr.rule { border:0; height:1px; background:var(--slate); margin:0 }

/* ── 3. TYPOGRAPHY & HEADERS ────────────────────────────────── */
.s-label { font-family:var(--mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.15em; color:var(--blue); margin-bottom:16px; display:block }
.s-label.light   { color:var(--blue-lt) }
.s-label.mission { color:var(--mission) }

.s-title { font-family:var(--serif); font-size:clamp(2.2rem,4vw,3.5rem); font-weight:700; line-height:1.1; color:var(--navy-mid); margin-bottom:24px }
.s-title em { font-style:italic; font-weight:300; color:var(--blue) }
.s-title.light { color:var(--white) }
.s-title.light em { color:var(--mission) }

.s-sub { font-family:var(--serif); font-size:1.02rem; font-style:italic; color:var(--text-mid); max-width:580px; line-height:1.82 }
.split-head { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:end; margin-bottom:48px; }
.split-head p { font-family:var(--serif); font-size:1.05rem; line-height:1.85; color:var(--text-mid); margin:0; }

/* ── 4. BUTTONS & TAGS ──────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:.9rem; font-weight:500; padding:12px 24px; transition:all .3s var(--ease); border:1px solid transparent; border-radius: 2px; text-align: center; }
.btn-lg { padding:16px 32px; font-size:1rem }
.btn-solid { background:var(--blue); color:var(--white); border-color:var(--blue) }
.btn-solid:hover { background:var(--blue-h); border-color:var(--blue-h) }
.btn-outline-w { border-color:rgba(255,255,255,.4); color:var(--white); background: transparent; }
.btn-outline-w:hover { background:rgba(255,255,255,.05); border-color:var(--white); }
.btn-outline-b { border-color:var(--navy-mid); color:var(--navy-mid); background: transparent; }
.btn-outline-b:hover { background:var(--navy-mid); color:var(--white) }
.btn-mission { background:var(--mission); color:var(--white); border-color:var(--mission) }
.btn-mission:hover { background:#D06E45; border-color:#D06E45 }
.btn-ghost { border-color:transparent; color:var(--navy-mid); text-decoration: underline; text-underline-offset: 4px; padding: 12px 16px; background: transparent; }
.btn-ghost:hover { color:var(--blue) }

.tag { font-family:var(--mono); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; padding:4px 8px; display:inline-block; border-radius: 2px; }
.tag-white { background:var(--off); color:var(--text-mid); border:1px solid var(--slate) }

/* ── 5. NAVIGATION & LOGO ───────────────────────────────────── */
#navbar { position:absolute; top:0; left:0; right:0; z-index:200; height:80px; display:flex; align-items:center; padding:0 var(--gap); justify-content:space-between; transition:background .35s var(--ease),box-shadow .35s var(--ease); }
#navbar.on-dark { background:transparent; border-bottom:1px solid rgba(255,255,255,.06); color: var(--white); }
#navbar.on-dark.scrolled { position: fixed; background:rgba(11, 17, 32, .97); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid rgba(74,101,114,.3); box-shadow:0 2px 32px rgba(0,0,0,.3); }

/* Typographic Logo (Hides the old image setup automatically) */
.nav-logo { display:flex; flex-direction:column; align-items:flex-start; gap:0; flex-shrink:0; text-decoration:none; }
.nav-logo span:first-child { font-family: var(--serif); font-size: 1.4rem; font-weight: 300; letter-spacing: 0.08em; text-transform: uppercase; }
.nav-logo span:first-child strong { font-weight: 600; }
.nav-logo span:last-child { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.25em; text-transform: uppercase; margin-top: 4px; opacity: 0.5; }
.nav-logo:hover { opacity: .85; transition: opacity .25s; }
.nav-logo img { display: none !important; }
.nav-logo-text { display: none !important; }

.nav-links { display:flex; align-items:center; gap: 32px; position:absolute; left:50%; transform:translateX(-50%) }
.nav-link { font-size:.85rem; font-weight:500; letter-spacing:.02em; opacity: 0.8; position:relative }
.nav-link::after { content:''; position:absolute; bottom:-6px; left:0; right:0; height:1px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease) }
.nav-link:hover, .nav-link.active { opacity: 1; }
.nav-link:hover::after, .nav-link.active::after { transform:scaleX(1) }

.nav-right { display:flex; align-items:center; gap:24px }
.nav-lang { font-family:var(--mono); font-size:.75rem; opacity: 0.7; transition:all .25s }
.nav-lang:hover { opacity: 1; color: var(--blue); }
.nav-cta { font-size:.85rem; font-weight:500; padding-bottom:2px; border-bottom:1px solid rgba(255,255,255,.3); transition:all .3s }
.nav-cta:hover { border-color:var(--white); }

.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px }
.hamburger span { width:24px; height:2px; background:var(--white); display:block; transition:all .3s var(--ease) }

#mobile-menu { display:none; position:fixed; inset:0; z-index:199; background:var(--navy); flex-direction:column; justify-content: center; align-items: center; gap: 32px; text-align: center; }
#mobile-menu.active { display:flex }
#mobile-menu a { font-family:var(--serif); font-size:2rem; font-weight:700; color:var(--white); transition:color .25s; }
#mobile-menu a:hover { color:var(--blue-lt); }
#mobile-menu a.sm { font-family:var(--sans); font-size:1rem; opacity: 0.7; margin-top:24px; border:none; font-weight: 400; }

/* ── 6. ANIMATIONS ──────────────────────────────────────────── */
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease),transform .7s var(--ease) }
.reveal.visible { opacity:1; transform:translateY(0) }

/* ── 7. BREADCRUMB & COOKIE BANNER ──────────────────────────── */
.breadcrumb { background:var(--off); border-bottom:1px solid var(--slate); }
.bc-inner { max-width:var(--wrap); margin:0 auto; padding:16px var(--gap); display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-lt); }
.bc-inner a { color:var(--blue); font-weight:600; transition: color 0.3s var(--ease); }
.bc-inner a:hover { color:var(--navy-mid); }
.bc-sep { color:var(--slate-mid); }

#cookie-banner { position:fixed !important; bottom:24px !important; left:24px !important; right:auto !important; max-width:500px; background:var(--white); border:1px solid var(--slate); padding:24px; z-index:9999; box-shadow:0 10px 40px rgba(0,0,0,.1); display:flex; flex-direction:column; gap:16px; }
#cookie-banner.hidden { display:none !important; }
#cookie-banner p { font-size:.85rem; color:var(--text-mid); margin:0; line-height: 1.5; }
#cookie-banner a { color:var(--blue); text-decoration:underline; }
.cookie-btns { display:flex; gap:12px; }
.btn-cookie { padding:8px 16px; font-size:.8rem; cursor:pointer; background:transparent; border:1px solid var(--slate); color:var(--text-mid); border-radius:2px; font-weight: 500; transition: all 0.2s ease; }
.btn-cookie:hover { background: var(--off); border-color: var(--blue); color: var(--navy-mid); }
.btn-cookie.accept { background:var(--navy-mid); color:var(--white); border-color:var(--navy-mid); }
.btn-cookie.accept:hover { background: var(--blue); border-color: var(--blue); }

/* ── 8. HERO SECTIONS ───────────────────────────────────────── */
#hero { background: var(--navy); display: grid; grid-template-columns: 1.1fr 1fr; position: relative; overflow: hidden; align-items: center; min-height: auto !important; height: auto !important; padding-top: 140px; padding-bottom: 60px; }
#hero::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(74,101,114,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(74,101,114,.08) 1px,transparent 1px); background-size:55px 55px; mask-image:radial-gradient(ellipse 80% 80% at 70% 40%,black 20%,transparent 80%); -webkit-mask-image:radial-gradient(ellipse 80% 80% at 70% 40%,black 20%,transparent 80%); }
.hero-c { position:relative; z-index:2; padding:0 40px 0 var(--gap); display:flex; flex-direction:column; justify-content:center; }
.h-eyebrow { display:flex; align-items:center; gap:14px; margin-bottom:16px }
.h-eyebrow::before { content:''; width:28px; height:2px; background:var(--blue); flex-shrink:0 }
.h-eyebrow span { font-size:.73rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); }
.h-name { font-family:var(--serif); font-size:clamp(2.8rem,5vw,5rem); line-height:1.03; color:var(--white); margin-bottom:8px; font-weight: 300; }
.h-name strong { font-weight: 700; }
.h-role { font-family:var(--mono); font-size:.73rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.32); margin-bottom:32px }
.h-stmt { font-family:var(--serif); font-size:1.05rem; font-style:italic; line-height:1.88; color:rgba(255,255,255,.65); max-width:460px; border-left:3px solid var(--blue); padding-left:22px; margin-bottom:48px }
.h-actions { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:0; }
.hero-v { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; padding:0 48px; background:transparent; }
.hero-img-frame { width:300px; height:300px; max-width:min(300px,80vw); max-height:min(300px,80vw); position:relative }
.hero-img-frame::before { content:''; position:absolute; top:-10px; left:-10px; right:10px; bottom:10px; border:1px solid rgba(255,255,255,.1); z-index:0 }
.hero-img-frame img { width:100%; height:100%; object-fit:cover; object-position:top center; position:relative; z-index:1; filter:grayscale(12%) contrast(1.06) brightness(.9) }

.page-hero { background:var(--navy); padding:140px var(--gap) 80px; position:relative; overflow:hidden }
.page-hero::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(74,101,114,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(74,101,114,.06) 1px,transparent 1px); background-size:52px 52px; mask-image:radial-gradient(ellipse 80% 80% at 100% 0%,black 25%,transparent 72%); -webkit-mask-image:radial-gradient(ellipse 80% 80% at 100% 0%,black 25%,transparent 72%); }
.ph-inner { max-width:var(--wrap); margin:0 auto; position:relative; z-index:2 }
.ph-kicker { font-family:var(--mono); font-size:.63rem; letter-spacing:.22em; text-transform:uppercase; color:var(--blue-lt); margin-bottom:20px; display:flex; align-items:center; gap:14px }
.ph-kicker::before { content:''; width:24px; height:2px; background:var(--blue) }
.ph-inner h1 { font-family:var(--serif); font-size:clamp(2.2rem,4.5vw,3.8rem); font-weight:700; line-height:1.1; color:var(--white); margin-bottom:20px; max-width:700px }
.ph-inner h1 em { font-style:italic; font-weight:300; color:var(--blue-lt) }
.ph-inner > p { font-family:var(--serif); font-size:1.1rem; font-style:italic; color:rgba(255,255,255,.65); max-width:860px; line-height:1.85 }

/* ── 9. HOMEPAGE COMPONENTS ─────────────────────────────────── */
#pillars { padding:80px 0; background:var(--white) }
.pillars-header { display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:end; margin-bottom:40px }
.pillars-header > p { font-family:var(--serif); font-size:1.02rem; line-height:1.88; color:var(--text-mid); margin-top:16px }
.pillars-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--slate); border:1px solid var(--slate) }
.p-card { background:var(--white); padding:42px 34px; position:relative; overflow:hidden; transition:background .35s }
.p-card:hover { background:var(--off) }
.p-card:hover .p-ico { background:var(--blue); color:var(--white); border-color:var(--blue) }
.p-card:hover .p-bar { width:100% }
.p-num  { font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; color:var(--text-lt); margin-bottom:22px }
.p-ico  { width:50px; height:50px; border:1px solid var(--slate); display:flex; align-items:center; justify-content:center; margin-bottom:18px; font-size:1.3rem; transition:all .35s; color:var(--navy-mid) }
.p-title{ font-family:var(--serif); font-size:1.4rem; font-weight:700; color:var(--navy-mid); margin-bottom:12px; line-height:1.2 }
.p-text { font-size:.86rem; line-height:1.88; color:var(--text-mid); margin-bottom:22px }
.p-caps { display:flex; flex-direction:column; gap:7px; border-top:1px solid var(--slate); padding-top:16px }
.p-cap  { display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.61rem; letter-spacing:.04em; color:var(--text-mid) }
.p-cap::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--blue); flex-shrink:0 }
.p-bar  { position:absolute; bottom:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--blue),#708D9E); transition:width .55s var(--ease) }

#about { padding:80px 0; background:var(--off) }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; margin-top:32px }
.about-meta { margin-top:40px; border-top:1px solid var(--slate); padding-top:20px; }
.about-meta span { display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-lt); margin-bottom:4px }
.about-body p { font-family:var(--serif); font-size:1.03rem; line-height:1.92; color:var(--text-mid); margin-bottom:20px }
.about-body p strong { color:var(--navy-mid); font-weight:700 }
.about-pq { background:var(--white); border-left:4px solid var(--blue); padding:20px 26px; margin:28px 0 }
.about-pq p { font-family:var(--serif); font-size:1.12rem; font-style:italic; color:var(--navy-mid); line-height:1.65; margin:0 }

/* ── 10. LIBRARY COMPONENTS ─────────────────────────────────── */
.books-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:0 }
.book-card  { position:relative; cursor:default }
.book-spine { aspect-ratio:.65/1; display:flex; align-items:flex-end; padding:16px 14px; overflow:hidden }
.book-spine::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 55%) }
.book-name   { font-family:var(--serif); font-size:.84rem; font-weight:700; color:var(--white); line-height:1.3; position:relative; z-index:2 }
.book-author { font-size:.62rem; color:rgba(255,255,255,.55); margin-top:3px; position:relative; z-index:2 }
.book-note   { position:absolute; inset:0; background:rgba(11,17,32,.95); padding:18px 14px; display:flex; flex-direction:column; justify-content:center; opacity:0; transition:opacity .35s; z-index:10 }
.book-card:hover .book-note { opacity:1 }
.bn-label { font-family:var(--mono); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-lt); margin-bottom:10px }
.bn-text  { font-family:var(--serif); font-size:.8rem; font-style:italic; color:rgba(255,255,255,.82); line-height:1.65 }

.t-tabs { display:flex; border-bottom:1px solid var(--slate); overflow-x:auto; margin-bottom: 32px; gap: 32px; }
.t-tab  { font-family:var(--sans); font-size:.85rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:16px 0; border:none; background:none; cursor:pointer; color:var(--text-lt); border-bottom:2px solid transparent; transition:all .25s; white-space:nowrap; }
.t-tab.active  { color:var(--navy-mid); border-bottom-color:var(--blue); }
.t-tab:hover:not(.active) { color:var(--blue); }
.t-panel { display:none; animation: fadeIn 0.4s var(--ease); }
.t-panel.active { display:block; }

.cred-list { display:flex; flex-direction:column; gap:1px; background:var(--slate); border:1px solid var(--slate) }
.cred-item { background:var(--white); padding:20px 24px; display:grid; grid-template-columns:80px 1fr auto; gap:20px; align-items:center; transition:background .25s }
.cred-item:hover { background:var(--off) }
.cred-year { font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; color:var(--text-lt) }
.cred-name { font-family:var(--serif); font-size:1rem; font-weight:700; color:var(--navy-mid); margin-bottom:3px; line-height:1.3 }
.cred-org  { font-size:.77rem; color:var(--text-mid) }
.badge-done    { font-family:var(--mono); font-size:.57rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:5px 11px; border:1px solid; color:#155724; border-color:#155724; background:#d4edda; white-space:nowrap; border-radius: 2px; }
.badge-ongoing { font-family:var(--mono); font-size:.57rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:5px 11px; border:1px solid; color:var(--blue-h); border-color:var(--blue); background:var(--blue-pale); white-space:nowrap; border-radius: 2px;}

.interests-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--slate); border:1px solid var(--slate); margin-top:0 }
.interest-card  { background:var(--white); padding:36px 30px; transition:background .3s }
.interest-card:hover { background:var(--off) }
.ic-icon  { font-size:2rem; margin-bottom:14px; display:block }
.ic-title { font-family:var(--serif); font-size:1.1rem; font-weight:700; color:var(--navy-mid); margin-bottom:9px }
.ic-text  { font-size:.85rem; line-height:1.82; color:var(--text-mid) }

/* ── 11. MENTORSHIP COMPONENTS ──────────────────────────────── */
#why { padding:80px 0; background:var(--off) }
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; margin-top:0 }
.why-body p { font-family:var(--serif); font-size:1.03rem; line-height:1.92; color:var(--text-mid); margin-bottom:18px }
.why-body p strong { color:var(--navy-mid) }
.why-body .pq { border-left:4px solid var(--blue); padding:16px 22px; background:var(--white); margin:24px 0 }
.why-body .pq p { font-family:var(--serif); font-size:1.08rem; font-style:italic; color:var(--navy-mid); margin:0; line-height:1.65 }

.who-list { display:flex; flex-direction:column; gap:1px; margin-top:0 }
.who-yes { background:var(--white); border:1px solid var(--slate); padding:0 }
.who-y-hd { background:var(--navy-mid); padding:10px 18px; font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-lt) }
.who-y-items { display:flex; flex-direction:column; gap:0 }
.who-y-item { display:flex; align-items:flex-start; gap:10px; padding:14px 18px; border-bottom:1px solid var(--slate); font-size:.86rem; color:var(--text-mid); line-height:1.5 }
.who-y-item:last-child { border-bottom:none }
.who-y-item::before { content:'✓'; color:#155724; font-weight:700; flex-shrink:0; margin-top:1px }
.who-no { background:var(--white); border:1px solid var(--slate); padding:0; margin-top:16px }
.who-n-hd { background:var(--off); border-bottom:1px solid var(--slate); padding:10px 18px; font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--text-lt) }
.who-n-item { display:flex; align-items:flex-start; gap:10px; padding:12px 18px; border-bottom:1px solid var(--slate); font-size:.83rem; color:var(--text-lt); line-height:1.5 }
.who-n-item:last-child { border-bottom:none }
.who-n-item::before { content:'✗'; color:var(--slate-mid); flex-shrink:0; margin-top:1px }

#sessions { padding:80px 0; background:var(--white) }
.sessions-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--slate); border:1px solid var(--slate); margin-top:0 }
.sess-card { background:var(--white); padding:38px 32px; position:relative; overflow:hidden; transition:background .3s }
.sess-card:hover { background:var(--off) }
.sess-card:hover .sess-bar { width:100% }
.sess-num { font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; color:var(--text-lt); margin-bottom:18px }
.sess-icon { font-size:1.8rem; margin-bottom:14px; display:block }
.sess-title { font-family:var(--serif); font-size:1.35rem; font-weight:700; color:var(--navy-mid); margin-bottom:6px }
.sess-dur { font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mission); margin-bottom:12px; display:flex; align-items:center; gap:8px }
.sess-dur::before { content:''; width:16px; height:1px; background:var(--mission) }
.sess-desc { font-size:.87rem; line-height:1.85; color:var(--text-mid); margin-bottom:18px }
.sess-points { display:flex; flex-direction:column; gap:6px; border-top:1px solid var(--slate); padding-top:16px }
.sess-pt { display:flex; align-items:flex-start; gap:9px; font-size:.8rem; color:var(--text-mid); line-height:1.5 }
.sess-pt::before { content:'→'; color:var(--blue); flex-shrink:0; font-weight:700; margin-top:0px }
.sess-bar { position:absolute; bottom:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--blue),#708D9E); transition:width .5s var(--ease) }

.disclaimer-box { background:var(--white); border:1px solid var(--slate); border-left:4px solid var(--mission); padding:20px 22px }
.disc-label { font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--mission); margin-bottom:10px }
.disc-body { font-size:.84rem; line-height:1.78; color:var(--text-mid) }
.disc-body strong { color:var(--navy-mid) }

#schedule { padding:80px 0; background:var(--navy) }
.sched-layout { display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:start; margin-top:0 }
.sched-steps { display:flex; flex-direction:column; gap:0 }
.step-row { display:flex; align-items:flex-start; gap:18px; padding:20px 0; border-bottom:1px solid rgba(255,255,255,.07) }
.step-row:last-child { border-bottom:none }
.step-n { font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; color:var(--mission); width:24px; flex-shrink:0; margin-top:2px }
.step-h { font-family:var(--serif); font-size:.98rem; font-weight:700; color:var(--white); margin-bottom:5px }
.step-p { font-size:.8rem; color:rgba(255,255,255,.45); line-height:1.65 }
.sched-disc { margin-top:28px; padding:18px 20px; border:1px solid rgba(255,255,255,.1); background:rgba(232,132,92,.1); border-left:3px solid var(--mission) }
.sched-disc-lbl { font-family:var(--mono); font-size:.58rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--mission); margin-bottom:8px }
.sched-disc p { font-size:.8rem; color:rgba(255,255,255,.45); line-height:1.7; margin:0 }

.form-wrap { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); padding:36px }
.form-hd { font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-lt); margin-bottom:24px }
.fg { margin-bottom:14px }
.fg label { display:block; font-size:.6rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mid); margin-bottom:6px }
.fg input,.fg select,.fg textarea { width:100%; background:var(--white); border:1px solid var(--slate); color:var(--text); font-size:.88rem; padding:11px 14px; outline:none; transition:border-color .3s, box-shadow .3s; appearance:none; -webkit-appearance:none; border-radius: 2px; }
.fg input:focus,.fg select:focus,.fg textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(74,101,114,.1) }
.fg textarea { resize:vertical; min-height:100px }
.fg.dark label { color:rgba(255,255,255,.45) }
.fg.dark input,.fg.dark select,.fg.dark textarea { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:var(--white) }
.fg.dark input::placeholder,.fg.dark textarea::placeholder { color:rgba(255,255,255,.3) }
.fg.dark input:focus,.fg.dark select:focus,.fg.dark textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(74,101,114,.2) }
.fg.dark select option { background:#0a2060; color:var(--white) }
.form-notice.dark { font-family:var(--mono); font-size:.58rem; letter-spacing:.04em; line-height:1.7; border-left:2px solid rgba(255,255,255,.12); padding-left:10px; margin-bottom:14px; color:rgba(255,255,255,.3); }
.btn-submit { width:100%; padding:14px; background:var(--blue); color:var(--white); border:none; font-size:.78rem; font-weight:500; letter-spacing:.1em; cursor:pointer; transition:background .3s; border-radius: 2px; }
.btn-submit:hover { background:var(--blue-h) }
.btn-submit.mission-bg { background:var(--mission) }
.btn-submit.mission-bg:hover { background:#D06E45 }
.form-success-dark { padding:20px 22px; background:rgba(46,125,50,.12); border:1px solid rgba(46,125,50,.3); display:none; border-radius: 2px; width: 100%; }
.form-success-dark.show { display:block }
.form-success-dark h4 { font-family:var(--serif); font-size:.95rem; color:#a5d6a7; margin-bottom:5px }
.form-success-dark p  { font-size:.82rem; color:rgba(255,255,255,.5); line-height:1.65; margin: 0; }

/* ── 12. THINKING COMPONENTS ────────────────────────────────── */
#thinking-p { padding:80px 0; background:var(--white) }
.tp-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; flex-wrap:wrap; gap:20px }
.articles-layout { display:grid; grid-template-columns:1.35fr 1fr; gap:1px; background:var(--slate); border:1px solid var(--slate) }
.featured-card { background: var(--white); padding: 48px; display: flex; flex-direction: column; justify-content: center; transition: background .3s; }
.featured-card:hover { background: var(--off); }
.fc-kicker { font-family: var(--mono); font-size: 0.7rem; color: var(--blue); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; }
.fc-title { font-family: var(--serif); font-size: 2rem; color: var(--navy-mid); line-height: 1.2; margin-bottom: 24px; font-weight: 700; }
.fc-excerpt { color: var(--text-mid); line-height: 1.8; margin-bottom: 32px; font-size: 0.95rem; }
.fc-meta { font-family: var(--mono); font-size: 0.7rem; color: var(--text-lt); display: flex; gap: 12px; align-items: center; }
.fc-arrow { margin-top: 24px; font-size: 1.5rem; color: var(--blue); transition: transform .3s; }
.featured-card:hover .fc-arrow { transform: translate(3px, -3px); }
.side-list { display:flex; flex-direction:column }
.side-item { padding:24px 28px; border-bottom:1px solid var(--slate); color:inherit; background:var(--white); transition:background .3s; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; text-decoration:none }
.side-item:last-child { border-bottom:none }
.side-item:hover { background:var(--off) }
.side-item:hover .si-arr { color:var(--blue); transform:translate(3px,-3px) }
.si-cat { font-size:.6rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin-bottom:6px }
.si-title { font-family:var(--serif); font-size:.98rem; font-weight:700; color:var(--navy-mid); line-height:1.3; margin-bottom:4px }
.si-expt { font-size:.79rem; color:var(--text-mid); line-height:1.6 }
.si-arr { color:var(--text-lt); transition:all .3s; flex-shrink:0; margin-top:2px; font-size:.95rem }

/* ── 13. CONNECT STRIP ──────────────────────────────────────── */
#cta-strip { padding:64px 0; background:var(--off) }
.cta-row { display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap }
.cta-msg h2 { font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.4rem); color:var(--navy-mid); margin-bottom:10px; line-height: 1.1; }
.cta-msg h2 em { font-style:italic; font-weight:300; color:var(--blue) }
.cta-msg p { font-size:.9rem; color:var(--text-mid); max-width:440px; line-height:1.75; margin:0; }
.cta-acts { display:flex; gap:12px; flex-wrap:wrap }

/* ── 14. FOOTER & PROOF STRIP ───────────────────────────────── */
.proof-strip { background:var(--navy-mid); display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; padding: 24px; font-family: var(--mono); font-size: 0.75rem; color: var(--white); letter-spacing: 0.1em; text-transform: uppercase; }
.proof-item { display: flex; align-items: center; }
.proof-dot { width: 6px; height: 6px; background: var(--blue); border-radius: 50%; display: inline-block; margin-right: 12px; }

footer { background:var(--navy); color: var(--white); padding:72px 0 0 }
.footer-grid { max-width:var(--wrap); margin:0 auto; padding:0 var(--gap) 56px; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px }
.footer-logo { margin-bottom: 14px; }
.footer-logo span { font-family: var(--serif); font-size: 1.5rem; font-weight: 300; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); }
.footer-logo span strong { font-weight: 600; }
.footer-desc { font-size:.82rem; line-height:1.88; color:rgba(255,255,255,.38); max-width:290px }
.footer-col-title { font-family:var(--mono); font-size:.58rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.28); margin-bottom:18px }
.footer-col ul { display:flex; flex-direction:column; gap:10px }
.footer-col a  { font-size:.83rem; color:rgba(255,255,255,.45); transition:color .25s }
.footer-col a:hover { color:rgba(255,255,255,.85) }
.footer-bottom { max-width:var(--wrap); margin:0 auto; padding:20px var(--gap); border-top:1px solid rgba(255,255,255,.06); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap }
.footer-copy { font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; color:rgba(255,255,255,.22) }
.footer-disclaimer { font-size:.7rem; color:rgba(255,255,255,.18); max-width:480px; text-align:right; line-height:1.6 }

/* ── 15. RESPONSIVE QUERIES ─────────────────────────────────── */
@media(max-width:960px) {
  :root { --gap:36px }
  .footer-grid { grid-template-columns:1fr 1fr; gap:36px }
  .books-grid  { grid-template-columns:repeat(2,1fr) }
  .article-card { grid-template-columns:90px 1fr 20px; gap:14px }
}

@media(max-width:900px) { 
  #pillars, #about, #mission, #thinking-p, #why, #sessions, #schedule, #channels, #linkedin-section, #contact-direct { padding: 56px 0; }
  #cta-strip { padding: 48px 0; }
  .pillars-header { grid-template-columns:1fr; gap:32px; } 
  .pillars-grid { grid-template-columns:1fr }
  .about-grid { grid-template-columns:1fr; gap:32px }
  .mission-grid { grid-template-columns:1fr; gap:48px }
  .articles-layout { grid-template-columns:1fr } 
  .featured-card { padding: 32px 24px; }
  .split-head { grid-template-columns:1fr; gap:24px; align-items:start; } 
  .li-inner { grid-template-columns:1fr; gap:40px }
  
  /* Hero overrides */
  #hero { grid-template-columns:1fr; padding-top: 120px; padding-bottom: 40px; } 
  .hero-v { padding:40px 24px 0 } 
  .hero-img-frame { width:260px !important; height:260px !important; max-width:min(260px,80vw); max-height:min(260px,80vw) } 
  .hero-c { padding: 0 var(--gap); } 
  .page-hero { padding:120px var(--gap) 60px; }
}

@media(max-width:860px){ 
  .why-grid { grid-template-columns:1fr; gap:40px; } 
  .sched-layout { grid-template-columns:1fr; gap:48px; } 
  .channel-grid { grid-template-columns:1fr } 
  .contact-layout { grid-template-columns:1fr; gap:48px }
}

@media(max-width:760px){ 
  .sessions-grid { grid-template-columns:1fr } 
}

@media(max-width:700px) {
  :root { --gap:20px }
  .footer-grid { grid-template-columns:1fr }
  .footer-disclaimer { text-align:left }
  .form-row { grid-template-columns:1fr }
  .books-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .article-card { grid-template-columns:1fr; gap:8px }
  .ac-arrow { display:none }
  .cred-item { grid-template-columns:1fr auto }
  .cred-year { display:none }
}

/* ── 16. CONNECT & CONTACT PAGE SPECIFICS ───────────────────── */
#channels { padding:80px 0; background:var(--white) }
.channel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--slate); border:1px solid var(--slate); margin-top:40px }
.channel-card { background:var(--white); padding:36px 30px; display:flex; flex-direction:column; position:relative; overflow:hidden; text-decoration:none; color:inherit; transition:background .3s }
.channel-card:hover { background:var(--off) }
.channel-card:hover .ch-arrow { color:var(--blue); transform:translate(3px,-3px) }
.channel-card:hover .ch-bar { width:100% }
.ch-platform { font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-lt); margin-bottom:20px }
.ch-icon { font-size:2rem; margin-bottom:14px; display:block }
.ch-title { font-family:var(--serif); font-size:1.15rem; font-weight:700; color:var(--navy-mid); margin-bottom:10px }
.ch-desc { font-size:.85rem; line-height:1.82; color:var(--text-mid); flex:1 }
.ch-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:18px }
.ch-arrow { position:absolute; top:30px; right:28px; font-size:1.1rem; color:var(--text-lt); transition:all .3s }
.ch-bar { position:absolute; bottom:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--blue),#708D9E); transition:width .5s var(--ease) }
.tag-ch { font-family:var(--mono); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; padding:4px 8px; display:inline-block; border-radius:2px; background:var(--off); color:var(--text-mid); border:1px solid var(--slate) }
.tag-mission-ch { background:var(--mission-lt,#FDE8DF); color:var(--mission); border:1px solid rgba(232,132,92,.25) }

#linkedin-section { padding:80px 0; background:var(--off) }
.li-inner { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start }
.li-body p { font-family:var(--serif); font-size:1.03rem; line-height:1.9; color:var(--text-mid); margin-bottom:18px }
.li-body p strong { color:var(--navy-mid) }
.li-body a { color:var(--blue); text-decoration:underline; text-underline-offset:3px }
.li-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--slate); border:1px solid var(--slate) }
.li-stat { background:var(--white); padding:24px; text-align:center; transition:background .25s }
.li-stat:hover { background:var(--off) }
.li-stat-num { font-family:var(--serif); font-size:1.8rem; font-weight:700; color:var(--navy-mid); line-height:1; margin-bottom:6px }
.li-stat-num em { color:var(--blue); font-style:normal }
.li-stat-lbl { font-family:var(--mono); font-size:.57rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-lt) }
.li-note { margin-top:1px; padding:20px 24px; background:var(--white); border:1px solid var(--slate); border-top:none }
.li-note-lbl { font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-lt); margin-bottom:8px }
.li-note p { font-size:.8rem; color:var(--text-mid); line-height:1.65; margin:0 }

#contact-direct { padding:80px 0; background:var(--navy) }
.contact-layout { display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:start; margin-top:0 }
.contact-sidebar p { font-family:var(--serif); font-size:1.03rem; line-height:1.9; color:rgba(255,255,255,.55); margin-bottom:20px }
.contact-sidebar a { color:rgba(255,255,255,.7); text-decoration:underline; text-underline-offset:3px }
.open-list { display:flex; flex-direction:column; gap:0 }
.open-item { display:flex; align-items:flex-start; gap:14px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.06) }
.open-item:last-child { border-bottom:none }
.open-ico { font-size:1.1rem; flex-shrink:0; margin-top:2px }
.open-title { font-family:var(--serif); font-size:.92rem; font-weight:700; color:rgba(255,255,255,.85); margin-bottom:4px }
.open-desc { font-size:.78rem; color:rgba(255,255,255,.4); line-height:1.6 }
.not-open { margin-top:28px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08) }
.not-open-lbl { font-family:var(--mono); font-size:.58rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.25); margin-bottom:12px }
.not-open-item { display:flex; align-items:flex-start; gap:8px; font-size:.78rem; color:rgba(255,255,255,.3); line-height:1.55; margin-bottom:7px }
.not-open-item::before { content:'✗'; color:rgba(255,255,255,.2); flex-shrink:0; margin-top:1px }