/* ================================================================
   Growthhive — J.P. Morgan Asset Management Case Study
   jpmorgan.css · "The Long View"
   Palette: JP Morgan Navy & Event Gold
   Depends on: shared.css
================================================================ */

:root {
  --jpm-navy:   #002D72;   /* JP Morgan institutional blue */
  --jpm-night:  #001440;   /* deepest field */
  --jpm-mid:    #003D9E;   /* lifted navy — section variety */
  --jpm-gold:   #C9A84C;   /* event gold — old money */
  --jpm-gold-d: #8C6E28;   /* deep gold */
  --jpm-ivory:  #F5F1E9;   /* warm surface — Lagos warmth */
  --jpm-ivory2: #EDE8DA;   /* deeper cream */
  --jpm-steel:  #8C9BB5;   /* muted blue-grey */
  --jpm-dim:    rgba(245,241,233,.52);
  --jpm-faint:  rgba(245,241,233,.08);
  --jpm-faint2: rgba(245,241,233,.04);
  --jpm-ink:    #2C2C2C;   /* body text on light */
  --jpm-ink-d:  #4A4A4A;   /* secondary text on light */
}

body.case-jpm { background: var(--jpm-night); }
#c { position: fixed; inset:0; z-index:0; pointer-events:none; opacity:.38; }

/* Reveal states */
.reveal   { opacity:0; transform:translateY(22px); }
.reveal-l { opacity:0; transform:translateX(-24px); }
.reveal-r { opacity:0; transform:translateX(24px); }
.reveal-s { opacity:0; transform:scale(.97); }

/* ════════════════════════════════════════════════════════════
   HERO — institutional, declarative, earned
════════════════════════════════════════════════════════════ */
.jpm-hero {
  position:relative; z-index:1; min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:10rem 3rem 6rem; overflow:hidden;
}
.jpm-hero-bg {
  position:absolute; inset:0; z-index:-1;
  background: linear-gradient(175deg, var(--jpm-night) 0%, var(--jpm-navy) 60%, #003D9E 100%);
}
/* Subtle grid texture — blueprint feel */
.jpm-hero-bg::after {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(201,168,76,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.jpm-hero-eyebrow {
  font-family:'Space Mono',monospace; font-size:.6rem;
  letter-spacing:.32em; text-transform:uppercase; color:var(--jpm-gold);
  margin-bottom:3rem; opacity:0; transform:translateY(8px);
}
.jpm-hero-title {
  font-family:'Cormorant',Georgia,serif;
  font-size:clamp(3.5rem,10vw,9rem); font-weight:400;
  line-height:.92; letter-spacing:-.02em; color:var(--jpm-ivory);
  margin-bottom:2.5rem; opacity:0; transform:translateY(24px);
}
.jpm-hero-title em { font-style:italic; color:var(--jpm-gold); }
.jpm-hero-sub {
  font-family:'Space Mono',monospace; font-size:.68rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--jpm-steel);
  margin-bottom:5rem; opacity:0; transform:translateY(10px);
  line-height:2;
}
.jpm-hero-sub span { color:var(--jpm-ivory); }

/* Event spec strip */
.jpm-hero-specs {
  display:flex; gap:3rem; flex-wrap:wrap; justify-content:center;
  border-top:1px solid var(--jpm-faint); padding-top:3rem;
  opacity:0; transform:translateY(12px);
}
.jpm-spec {
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  text-align:center;
}
.jpm-spec-val {
  font-family:'Cormorant',Georgia,serif; font-size:1.8rem;
  font-weight:400; color:var(--jpm-ivory); line-height:1;
}
.jpm-spec-key {
  font-family:'Space Mono',monospace; font-size:.52rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--jpm-gold);
}
.jpm-spec-divider { width:1px; background:var(--jpm-faint); align-self:stretch; }

/* ════════════════════════════════════════════════════════════
   SECTION SCAFFOLD
════════════════════════════════════════════════════════════ */
.jpm-section { position:relative; z-index:1; }
.jpm-narrow  { max-width:920px; margin:0 auto; }
.jpm-wide    { max-width:1300px; margin:0 auto; }
.jpm-num {
  font-family:'Space Mono',monospace; font-size:.58rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--jpm-gold);
  margin-bottom:2.5rem;
}
.jpm-rule { height:1px; background:var(--jpm-faint); }
.jpm-rule-gold { height:1px; background:var(--jpm-gold); width:48px; margin:2.5rem 0; }

/* ════════════════════════════════════════════════════════════
   THE BRIEF — dark navy, restrained
════════════════════════════════════════════════════════════ */
.jpm-brief {
  border-top:1px solid var(--jpm-faint);
  padding:11rem 3rem;
  background:linear-gradient(180deg, var(--jpm-night) 0%, var(--jpm-navy) 100%);
}
.jpm-brief-grid {
  display:grid; grid-template-columns:1fr 1.6fr; gap:6rem;
  align-items:start;
}
.jpm-brief-sidebar {}
.jpm-brief-client {
  font-family:'Cormorant',Georgia,serif;
  font-size:clamp(2rem,4vw,3.4rem); font-weight:400;
  color:var(--jpm-ivory); line-height:1.05; margin-bottom:1.5rem;
}
.jpm-brief-client em { font-style:italic; color:var(--jpm-gold); }
.jpm-brief-meta {
  font-family:'Space Mono',monospace; font-size:.54rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--jpm-steel);
  line-height:2.2;
}
.jpm-brief-meta strong { color:var(--jpm-ivory); display:block; }
.jpm-brief-body {
  font-size:1.05rem; line-height:1.85; color:var(--jpm-dim);
  max-width:620px;
}
.jpm-brief-body p + p { margin-top:1.5rem; }
.jpm-brief-body em { color:var(--jpm-ivory); font-style:normal; }

/* ════════════════════════════════════════════════════════════
   THE THREE DAYS — programme section
════════════════════════════════════════════════════════════ */
.jpm-programme {
  border-top:1px solid var(--jpm-faint);
  padding:10rem 3rem;
}
.jpm-programme-head {
  text-align:center; max-width:800px; margin:0 auto 7rem;
}
.jpm-programme-title {
  font-family:'Cormorant',Georgia,serif;
  font-size:clamp(2.2rem,5vw,4.2rem); font-weight:400;
  line-height:1.05; color:var(--jpm-ivory); margin-bottom:1.5rem;
}
.jpm-programme-title em { font-style:italic; color:var(--jpm-gold); }
.jpm-programme-body {
  font-size:1rem; line-height:1.8; color:var(--jpm-dim);
  max-width:580px; margin:0 auto;
}
.jpm-days { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.jpm-day {
  padding:4rem 3rem; position:relative; overflow:hidden;
  border:1px solid var(--jpm-faint);
  background:rgba(0,45,114,.35);
  transition:background .5s;
}
.jpm-day:hover { background:rgba(0,45,114,.6); }
.jpm-day.featured { border-color:var(--jpm-gold); }
.jpm-day.featured::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:2px; background:var(--jpm-gold);
}
.jpm-day-label {
  font-family:'Space Mono',monospace; font-size:.56rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--jpm-gold);
  margin-bottom:2rem;
}
.jpm-day-title {
  font-family:'Cormorant',Georgia,serif;
  font-size:3rem; font-weight:400; color:var(--jpm-ivory);
  line-height:1; margin-bottom:2.5rem;
}
.jpm-day-sessions { display:flex; flex-direction:column; gap:0; }
.jpm-session {
  padding:1.4rem 0; border-bottom:1px solid var(--jpm-faint);
  display:grid; grid-template-columns:56px 1fr; gap:1rem; align-items:start;
}
.jpm-session:last-child { border-bottom:none; }
.jpm-session-time {
  font-family:'Space Mono',monospace; font-size:.52rem;
  letter-spacing:.06em; color:var(--jpm-gold); padding-top:.18rem;
}
.jpm-session-content {}
.jpm-session-name {
  font-size:.95rem; font-weight:400; color:var(--jpm-ivory);
  line-height:1.3; margin-bottom:.3rem;
}
.jpm-session-desc {
  font-size:.82rem; line-height:1.6; color:var(--jpm-dim);
}

/* ════════════════════════════════════════════════════════════
   IDENTITY SECTION — what Growthhive built
════════════════════════════════════════════════════════════ */
.jpm-identity { border-top:1px solid var(--jpm-faint); padding:10rem 3rem; }
.jpm-identity-head {
  display:grid; grid-template-columns:1fr 1.6fr; gap:6rem;
  align-items:start; margin-bottom:7rem;
}
.jpm-identity-title {
  font-family:'Cormorant',Georgia,serif;
  font-size:clamp(2rem,4.5vw,3.8rem); font-weight:400;
  line-height:1.05; color:var(--jpm-ivory);
}
.jpm-identity-title em { font-style:italic; color:var(--jpm-gold); }
.jpm-identity-body {
  font-size:1rem; line-height:1.85; color:var(--jpm-dim); max-width:580px;
}
.jpm-identity-body p + p { margin-top:1.5rem; }

/* Three deliverable cards */
.jpm-deliverables { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.jpm-deliv {
  background:rgba(0,45,114,.3); border:1px solid var(--jpm-faint);
  overflow:hidden; display:flex; flex-direction:column;
}
.jpm-deliv-visual {
  aspect-ratio:4/3; position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:2.5rem;
}
.jpm-deliv-label {
  padding:1.8rem 2rem; border-top:1px solid var(--jpm-faint);
}
.jpm-deliv-name {
  font-family:'Space Mono',monospace; font-size:.58rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--jpm-gold);
  margin-bottom:.5rem;
}
.jpm-deliv-desc {
  font-size:.9rem; line-height:1.6; color:var(--jpm-dim);
}

/* ════════════════════════════════════════════════════════════
   INVITATION MOCKUP — the physical artefact
   (SVG composited in CSS, rendered inline in HTML)
════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   RESULTS
════════════════════════════════════════════════════════════ */
.jpm-results {
  border-top:1px solid var(--jpm-faint); padding:10rem 3rem;
  background:var(--jpm-navy);
}
.jpm-results-head { max-width:780px; margin:0 auto 6rem; text-align:center; }
.jpm-results-title {
  font-family:'Cormorant',Georgia,serif;
  font-size:clamp(2rem,4.5vw,3.6rem); font-weight:400;
  line-height:1.1; color:var(--jpm-ivory); margin-bottom:1.5rem;
}
.jpm-results-title em { font-style:italic; color:var(--jpm-gold); }
.jpm-results-body { font-size:1rem; line-height:1.8; color:var(--jpm-dim); max-width:560px; margin:0 auto; }
.jpm-metrics {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  border:1px solid var(--jpm-faint); max-width:1100px; margin:0 auto 6rem;
}
.jpm-metric {
  padding:3.5rem 2rem; text-align:center;
  border-right:1px solid var(--jpm-faint);
}
.jpm-metric:last-child { border-right:none; }
.jpm-metric-val {
  font-family:'Cormorant',Georgia,serif; font-style:italic;
  font-size:clamp(2.5rem,5vw,4rem); font-weight:400;
  color:var(--jpm-ivory); line-height:1; display:block; margin-bottom:.8rem;
}
.jpm-metric-label {
  font-family:'Space Mono',monospace; font-size:.52rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--jpm-gold);
  line-height:1.8;
}
.jpm-results-quote {
  max-width:820px; margin:0 auto;
  border-left:2px solid var(--jpm-gold); padding-left:2.5rem;
}
.jpm-results-quote blockquote {
  font-family:'Cormorant',Georgia,serif;
  font-size:clamp(1.4rem,3vw,2.2rem); font-weight:400;
  font-style:italic; color:var(--jpm-ivory); line-height:1.4;
  margin-bottom:1.5rem;
}
.jpm-results-quote cite {
  font-family:'Space Mono',monospace; font-size:.54rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--jpm-steel);
  font-style:normal;
}

/* ════════════════════════════════════════════════════════════
   DOWNLOAD
════════════════════════════════════════════════════════════ */
.jpm-download {
  border-top:1px solid var(--jpm-faint); padding:10rem 3rem;
}
.jpm-download-inner {
  display:grid; grid-template-columns:1.2fr 1fr; gap:6rem;
  align-items:center; max-width:1100px; margin:0 auto;
}
.jpm-download-title {
  font-family:'Cormorant',Georgia,serif;
  font-size:clamp(2rem,4.5vw,3.6rem); font-weight:400;
  line-height:1.05; color:var(--jpm-ivory); margin-bottom:1.5rem;
}
.jpm-download-title em { font-style:italic; color:var(--jpm-gold); }
.jpm-download-body { font-size:1rem; line-height:1.8; color:var(--jpm-dim); margin-bottom:2.5rem; }
.jpm-download-card {
  background:rgba(0,45,114,.5); border:1px solid var(--jpm-faint);
  padding:3rem; position:relative; overflow:hidden;
}
.jpm-download-card::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(201,168,76,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,.03) 1px, transparent 1px);
  background-size:40px 40px;
}
.jpm-deck-icon {
  width:48px; height:48px; border:1px solid var(--jpm-gold);
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono',monospace; font-size:.58rem;
  letter-spacing:.08em; color:var(--jpm-gold); margin-bottom:1.5rem;
  position:relative; z-index:1;
}
.jpm-deck-name {
  font-family:'Cormorant',Georgia,serif; font-size:1.4rem;
  color:var(--jpm-ivory); margin-bottom:.4rem; position:relative; z-index:1;
}
.jpm-deck-meta {
  font-family:'Space Mono',monospace; font-size:.52rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--jpm-steel);
  margin-bottom:2rem; position:relative; z-index:1;
}
.jpm-download-btn {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; font-family:'Space Mono',monospace; font-size:.6rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--jpm-night);
  background:var(--jpm-gold); padding:1.1rem 1.5rem;
  text-decoration:none; border:none; cursor:pointer; position:relative; z-index:1;
  transition:opacity .3s;
}
.jpm-download-btn:hover { opacity:.88; }

/* ════════════════════════════════════════════════════════════
   CLOSER
════════════════════════════════════════════════════════════ */
.jpm-closer {
  border-top:1px solid var(--jpm-faint); padding:12rem 3rem;
  text-align:center; position:relative; overflow:hidden;
  min-height:80vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.jpm-closer-glow {
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:80%; height:500px;
  background:radial-gradient(ellipse at bottom, rgba(201,168,76,.06), transparent 65%);
  pointer-events:none;
}
.jpm-closer-pre {
  font-family:'Space Mono',monospace; font-size:.6rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--jpm-gold);
  margin-bottom:3rem;
}
.jpm-closer-title {
  font-family:'Cormorant',Georgia,serif;
  font-size:clamp(3rem,10vw,9rem); font-weight:400;
  line-height:.95; color:var(--jpm-ivory); margin-bottom:5rem;
}
.jpm-closer-title em { font-style:italic; color:var(--jpm-gold); }
.jpm-closer-btns {
  display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap;
}

/* ── Footer ──────────────────────────────────────────────── */
.jpm-footer {
  position:relative; z-index:1; padding:3rem;
  border-top:1px solid var(--jpm-faint);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1.5rem;
}
.jpm-footer-logo {
  font-family:'Space Mono',monospace; font-size:.78rem;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--jpm-ivory);
}
.jpm-footer-logo em { color:var(--jpm-gold); font-style:normal; }
.jpm-footer-meta {
  font-family:'Space Mono',monospace; font-size:.54rem;
  letter-spacing:.1em; color:var(--jpm-steel);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:1024px) {
  .jpm-brief-grid, .jpm-identity-head,
  .jpm-download-inner { grid-template-columns:1fr; gap:3rem; }
  .jpm-days { grid-template-columns:1fr; }
  .jpm-day { padding:3rem 2rem; }
  .jpm-deliverables { grid-template-columns:1fr; }
  .jpm-metrics { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .jpm-hero-specs { gap:1.5rem; }
  .jpm-spec-divider { display:none; }
  .jpm-metrics { grid-template-columns:1fr 1fr; }
  .jpm-metric { padding:2.5rem 1.5rem; }
  .jpm-footer { flex-direction:column; text-align:center; }
  /* Hide desktop nav on mobile */
  .nlinks { display: none !important; }
  .ncta   { display: none !important; }
  /* Show hamburger */
  .nav-burger { display: flex !important; }
}

/* ── Hamburger button ──────────────────────────────────────── */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 1003;
  position: relative;
  margin-left: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile menu overlay ───────────────────────────────────── */
.nav-mobile {
  position: fixed;
  inset: 0;
  background: var(--navy);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.nav-mobile.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.nav-mobile-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
}
.nav-mobile-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.nav-mobile-links li a {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(2.2rem, 10vw, 3.5rem);
  font-weight: 200;
  color: var(--white);
  text-decoration: none;
  letter-spacing: -0.03em;
  line-height: 1.15;
  transition: color 0.2s;
}
.nav-mobile-links li a.active { color: var(--ch); }
.nav-mobile-links li a:hover  { color: var(--ch); }
.nav-mobile-cta {
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--ch);
  padding: 0.9rem 2rem;
  text-decoration: none;
  border-radius: 2px;
  transition: opacity 0.2s;
}
.nav-mobile-cta:hover { opacity: 0.88; }
.nav-mobile-foot {
  font-family: 'Space Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}