/* ======================================================================
   Milestones (Institutional milestones / three generations) +
   Leadership message (Executive Director) sections.
   Scoped to #milestones2 and #leadership so existing site-wide rules
   for .section, .title, .lead, .timeline-item, .dot, .container cannot
   leak in and break this layout.
   ====================================================================== */

#milestones2, #leadership, #leadershipPerspective, #recentHighlights { --ml-navy: #0b1f3a; --ml-navy-2: #142c52; --ml-gold: #d4af37; --ml-gold-2: #f4cf6a; --ml-cream: #faf7f0; --ml-ink: #1c1c1c; --ml-muted: #6b6b64; }
#leadershipPerspective { --lp-purple: #5a3971; }

/* ---------- shared resets against legacy site rules ---------- */
#milestones2 .container, #leadership .container { max-width: 1180px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; }
#milestones2 h2.title.serif, #leadership h2.title.serif { font-size: clamp(28px,4vw,44px); font-weight: 700; font-family: 'Playfair Display', Georgia, serif; background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: currentColor !important; line-height: 1.25; margin: 10px 0 14px; }
#milestones2 h2.title.serif em, #leadership h2.title.serif em { font-style: italic; color: var(--ml-gold); }
#milestones2 p.lead, #leadership p.lead { font-size: 17px; font-weight: 400; line-height: 1.7; max-width: 780px; }
#milestones2 .eyebrow, #leadership .eyebrow, #leadershipPerspective .lp-eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ml-gold); margin-bottom: 6px; }

/* generic reveal-on-scroll (driven by js/milestones-leadership.js, independent of legacy timeline observer) */
#milestones2 .reveal, #leadership .reveal, #leadershipPerspective .reveal, #recentHighlights .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
#milestones2 .reveal.in-view, #leadership .reveal.in-view, #leadershipPerspective .reveal.in-view, #recentHighlights .reveal.in-view { opacity: 1; transform: translateY(0); }

/* ======================= MILESTONES SECTION ======================= */
#milestones2.milestones-timeline { padding: 90px 0 100px; }
#milestones2 .section-head { text-align: center; max-width: 860px; margin: 0 auto 40px; }
#milestones2 .section-head .lead { margin: 0 auto; }

#milestones2 .decade-tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 50px; }
#milestones2 .decade-tabs a { color: var(--ml-gold); border: 1px solid rgba(212,175,55,.45); border-radius: 999px; padding: 8px 20px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-decoration: none; transition: background .25s ease, color .25s ease; }
#milestones2 .decade-tabs a:hover { background: var(--ml-gold); color: var(--ml-navy); }

#milestones2 .timeline-generations { display: flex; flex-direction: column; gap: 46px; }

#milestones2 .generation-block { background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(212,175,55,.25); border-radius: 18px; padding: 34px 30px; scroll-margin-top: 100px; }

#milestones2 .generation-header { text-align: center; margin-bottom: 26px; }
#milestones2 .generation-avatar { display: inline-block; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; border: 2px solid var(--ml-gold); margin-bottom: 12px; }
#milestones2 .generation-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
#milestones2 .generation-label { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ml-gold-2); font-weight: 600; margin-bottom: 6px; }
#milestones2 .generation-header h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 24px; margin: 4px 0; color: #fff; }
#milestones2 .generation-motivation { max-width: 620px; margin: 6px auto 0; font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.78); }

#milestones2 .generation-header-duo .generation-people { display: flex; justify-content: center; gap: 34px; flex-wrap: wrap; margin-bottom: 10px; }
#milestones2 .generation-person { display: flex; flex-direction: column; align-items: center; }
#milestones2 .generation-person-name { font-size: 13px; font-weight: 700; color: #fff; margin-top: 6px; }
#milestones2 .generation-person-name small { display: block; font-weight: 400; color: rgba(255,255,255,.6); font-size: 11px; margin-top: 2px; }

#milestones2 .generation-stats { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center; margin-bottom: 18px; }
#milestones2 .generation-stat-hero { text-align: center; min-width: 150px; }
#milestones2 .generation-stat-hero strong.counter { display: block; font-size: 40px; font-weight: 800; color: var(--ml-gold); line-height: 1; font-family: 'Playfair Display', Georgia, serif; }
#milestones2 .generation-stat-hero span { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.65); }

#milestones2 .generation-progress-track { flex: 1 1 260px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; position: relative; }
#milestones2 .generation-progress-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--ml-gold), var(--ml-gold-2)); transition: width 1.2s cubic-bezier(.22,.9,.3,1); position: relative; }
#milestones2 .generation-block.reveal.in-view .generation-progress-fill { width: var(--w, 0%); }
#milestones2 .generation-progress-existing { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(11,31,58,.55); border-right: 2px solid rgba(255,255,255,.6); transition: width 1.2s cubic-bezier(.22,.9,.3,1) .3s; }
#milestones2 .generation-block.reveal.in-view .generation-progress-existing { width: var(--we, 0%); }
#milestones2 .generation-progress-caption { flex-basis: 100%; text-align: center; font-size: 12.5px; color: rgba(255,255,255,.65); margin: 0; }
#milestones2 .generation-progress-caption b { color: #fff; }

#milestones2 .generation-stat-split { flex-basis: 100%; display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
#milestones2 .generation-stat-chip { display: inline-flex; align-items: baseline; gap: 5px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 6px 16px; font-size: 12.5px; color: rgba(255,255,255,.65); }
#milestones2 .generation-stat-chip b { color: var(--ml-gold); font-size: 16px; font-family: 'Playfair Display', Georgia, serif; }

#milestones2 .generation-carryforward { background: rgba(212,175,55,.08); border: 1px dashed rgba(212,175,55,.4); border-radius: 12px; padding: 14px 18px; text-align: center; margin-bottom: 26px; }
#milestones2 .generation-carryforward-label { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ml-gold); font-weight: 700; margin-bottom: 4px; }

#milestones2 .generation-group-heading { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ml-gold-2); font-weight: 700; margin: 0 0 12px; }
#milestones2 .generation-group-count { display: inline-block; margin-left: 6px; background: rgba(212,175,55,.15); color: var(--ml-gold); border-radius: 999px; padding: 1px 9px; font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 700; }
#milestones2 .generation-already-built { margin-bottom: 22px; padding: 16px 18px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; }
#milestones2 .generation-institute-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#milestones2 .generation-institute-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 14px; color: rgba(255,255,255,.92); padding-left: 16px; position: relative; }
#milestones2 .generation-institute-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: rgba(212,175,55,.6); }
#milestones2 .generation-institute-list .inst-name { flex: 1 1 auto; }
#milestones2 .generation-institute-list small { color: rgba(255,255,255,.55); font-size: 12px; font-weight: 400; white-space: nowrap; }
#milestones2 .generation-founded-heading { margin-bottom: 14px; }
#milestones2 .generation-carryforward p { margin: 0; font-size: 13.5px; color: rgba(255,255,255,.85); }
#milestones2 .generation-carryforward b { color: #fff; }

/* --- founder highlights (Generation 1 card) --- */
#milestones2 .founder-bio { margin: 4px 0 20px; }
#milestones2 .founder-intro { margin: 0; font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,.82); }
#milestones2 .founder-highlights { margin-bottom: 28px; }
#milestones2 .founder-highlights h3 { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ml-gold-2); font-weight: 700; margin: 0 0 14px; }
#milestones2 .founder-highlights ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
#milestones2 .founder-highlights li { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,.82); }
#milestones2 .founder-highlights li b { color: #fff; font-weight: 700; }
#milestones2 .founder-highlight-icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: rgba(212,175,55,.1); border: 1px solid rgba(212,175,55,.35); display: flex; align-items: center; justify-content: center; color: var(--ml-gold); font-size: 12.5px; margin-top: 1px; }

/* --- reset legacy .timeline-item / .dot rules from mdc.css so they don't leak into the new vertical timeline --- */
#milestones2 .generation-timeline .timeline-item { position: relative !important; width: 100% !important; left: auto !important; padding: 0 0 26px 30px !important; opacity: 1 !important; transform: none !important; transition: none !important; display: block; border-left: 2px solid rgba(212,175,55,.35); }
#milestones2 .generation-timeline .timeline-item:last-child { border-left-color: transparent; padding-bottom: 0 !important; }
#milestones2 .generation-timeline .timeline-item > .dot { display: none !important; }
#milestones2 .timeline-dot { position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--ml-gold); box-shadow: 0 0 0 4px rgba(212,175,55,.2); }
#milestones2 .timeline-content { background: transparent; }
#milestones2 .timeline-content h4 { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--ml-gold-2); margin: 0 0 10px; }
#milestones2 .timeline-content ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#milestones2 .timeline-content li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 14px; color: rgba(255,255,255,.92); }
#milestones2 .timeline-content li.timeline-highlight { color: #fff; font-weight: 600; }
#milestones2 .timeline-content .year { font-weight: 700; color: var(--ml-gold); min-width: 40px; }
#milestones2 .timeline-content .inst-name { flex: 1 1 auto; }
#milestones2 .timeline-content small { color: rgba(255,255,255,.55); font-size: 12px; font-weight: 400; white-space: nowrap; }

/* ---------------------- campus map ---------------------- */
#milestones2 .campus-locations { margin-top: 60px; text-align: center; }
#milestones2 .campus-locations h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 24px; color: #fff; margin: 0 0 10px; }
#milestones2 .campus-summary { display: flex; justify-content: center; gap: 10px; align-items: baseline; margin-bottom: 24px; color: rgba(255,255,255,.75); font-size: 14px; }
#milestones2 .campus-summary-stat strong { color: var(--ml-gold); font-size: 18px; }
#milestones2 .campus-summary-sep { opacity: .5; }

#milestones2 .campus-map-wrap { max-width: 780px; margin: 0 auto; }
#milestones2 .campus-map-svg { width: 100%; height: auto; overflow: visible; display: block; }
#milestones2 .map-region { fill: rgba(212,175,55,.05); stroke: rgba(212,175,55,.25); stroke-width: 1.5; }
#milestones2 .map-region-bobbili { fill: rgba(255,255,255,.03); }
#milestones2 .map-region-label { fill: rgba(255,255,255,.35); font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

#milestones2 .campus-route { fill: none; stroke: var(--ml-gold); stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: .55; transition: stroke-dashoffset 1.4s ease; }
#milestones2 .campus-map-wrap.in-view .campus-route { stroke-dashoffset: 0; }
#milestones2 .map-distance-label { fill: rgba(255,255,255,.5); font-size: 12px; font-style: italic; }

#milestones2 .map-node circle { fill: var(--ml-navy); stroke: var(--ml-gold); stroke-width: 2; }
#milestones2 .map-node-hub circle { fill: var(--ml-gold); stroke: #fff; }
#milestones2 .map-node text { fill: #fff; font-size: 13px; font-weight: 700; }
#milestones2 .map-node-tag { fill: var(--ml-gold-2) !important; font-size: 9px !important; letter-spacing: .08em; text-transform: uppercase; }
#milestones2 .map-node-stats { fill: rgba(255,255,255,.6) !important; font-size: 10.5px !important; font-weight: 400 !important; }
#milestones2 .map-node-pulse { fill: none; stroke: var(--ml-gold); stroke-width: 2; opacity: 0; transform-origin: center; }
#milestones2 .campus-map-wrap.in-view .map-node-pulse { animation: ml-pulse 2.2s ease-out infinite; }
#milestones2 .map-node, #milestones2 .campus-route { opacity: 0; transition: opacity .6s ease; }
#milestones2 .campus-map-wrap.in-view .map-node, #milestones2 .campus-map-wrap.in-view .campus-route { opacity: 1; }
@keyframes ml-pulse { 0% { r: 9; opacity: .7; } 100% { r: 26; opacity: 0; } }

/* ---- Campus locations on phones/tablets: same animated SVG map (pulsing
   hub, drawing route lines), no horizontal scrolling -- it scales down to
   fit the screen width so every node, including Bobbili, stays visible
   without needing to swipe. Node/label text shrinks slightly on very
   small screens to stay legible at the smaller rendered size. ---- */
@media (max-width: 480px) {
    #milestones2 .map-node text { font-size: 10px; }
    #milestones2 .map-node-tag { font-size: 7.5px !important; }
    #milestones2 .map-node-stats { font-size: 8.5px !important; }
    #milestones2 .map-region-label { font-size: 12px; }
    #milestones2 .map-distance-label { font-size: 9px; }
}

@media (max-width: 640px) {
    #milestones2 .generation-stats { flex-direction: column; }
    #milestones2 .generation-progress-track { width: 100%; }
}

/* ======================= LEADERSHIP MESSAGE SECTION ======================= */
/* Full-bleed editorial layout: portrait fills the left column edge-to-edge
   and top-to-bottom of the section; copy sits in a padded right column. */
#leadership.leadership-message { background: var(--ml-cream); color: var(--ml-ink); padding: 0; border-top: 1px solid rgba(11,31,58,.08); }
#leadership .container { max-width: none; margin: 0; padding: 0; display: block; }

#leadership .chairman-panel { display: grid; grid-template-columns: minmax(300px,40%) 1fr; align-items: stretch; }

/* object-fit: contain (not cover) so the complete photo is always visible,
   scaled to fit at any screen size, never cropped. Background matches the
   photo's own black backdrop so the fit doesn't show visible letterboxing.
   max-height: 100vh caps the container to the screen's own height -- without
   this, grid "stretch" sizing lets the photo column grow as tall as the text
   column next to it, which can exceed the viewport on shorter screens. */
#leadership .chairman-portrait { margin: 0; grid-column: 1; position: relative; background: #000; min-height: 420px; max-height: 100vh; }
#leadership .chairman-portrait img { width: 100%; height: 100%; max-height: 100vh; object-fit: contain; object-position: center; display: block; border-radius: 0; box-shadow: none; }
#leadership .chairman-portrait figcaption { display: none; } /* name/title repeated in the signature block on the right */

#leadership .chairman-copy { grid-column: 2; display: flex; flex-direction: column; justify-content: center; padding: 80px 7vw 80px 6vw; }
/* the h2 carries the section's accessible name (aria-labelledby) but the big
   editorial quote below does the visual talking, matching the reference */
#leadership .chairman-copy h2.title.serif { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#leadership .chairman-quote { display: none; } /* the oversized quote marks on the blockquote itself replace this icon */

#leadership blockquote { margin: 14px 0 34px; padding: 0; border-left: none; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 700; font-size: clamp(30px,3.6vw,46px); line-height: 1.18; color: var(--ml-ink); max-width: 640px; }
#leadership blockquote::before { content: '\201C'; color: var(--ml-ink); }
#leadership blockquote::after { content: '\201D'; color: var(--ml-gold); }
#leadership blockquote em { font-style: italic; color: var(--ml-gold); }

#leadership .chairman-footer { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; padding-top: 28px; border-top: 1px solid rgba(11,31,58,.15); max-width: 900px; }
#leadership .chairman-footer p { flex: 1 1 420px; margin: 0; font-size: 15px; line-height: 1.8; color: #4a4a44; }
#leadership .message-signature { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
#leadership .message-signature strong { font-family: 'Outfit', Arial, sans-serif; font-size: 15px; font-weight: 700; color: var(--ml-ink); }
#leadership .message-signature span { font-size: 13px; color: var(--ml-muted); line-height: 1.5; }

#leadership .leadership-video { margin: 0; max-width: 1180px; padding: 60px 60px 90px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; border-top: 1px solid rgba(11,31,58,.12); }
#leadership .leadership-video-frame video { width: 100%; border-radius: 14px; display: block; background: #000; box-shadow: 0 16px 34px rgba(11,31,58,.16); }
#leadership .leadership-video-copy h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 22px; color: var(--ml-navy); margin: 6px 0 10px; }
#leadership .leadership-video-copy p { font-size: 14.5px; line-height: 1.7; color: #3a3a35; }

@media (max-width: 860px) {
    #leadership .chairman-panel { grid-template-columns: 1fr; min-height: 0; }
    #leadership .chairman-portrait img { min-height: 340px; }
    #leadership .chairman-copy { padding: 50px 24px; }
    #leadership .chairman-footer { flex-direction: column; gap: 20px; }
    #leadership .leadership-video { padding: 40px 24px 60px; grid-template-columns: 1fr; }
}

/* ---- Portrait is always fully visible immediately -- no scroll-triggered
   reveal, no curtain doors covering it, no zoom/crop. The curtain elements
   are still in the markup but neutralized here so nothing hides the photo. ---- */
#leadership .chairman-portrait { overflow: hidden; }
#leadership .chairman-portrait img { transform: none; }
#leadership .portrait-curtain, #leadership .portrait-curtain-2 { display: none; }

/* Copy text still gets a light slide-in once scrolled into view (this does
   not hide the photo, only the text/quote to its right). */
#leadership .chairman-panel.chairman-animate .chairman-copy > * { opacity: 0; transform: translateX(50px); transition: opacity .8s ease, transform .8s ease; }
#leadership .chairman-panel.chairman-animate .chairman-copy > .eyebrow { transition-delay: .05s; }
#leadership .chairman-panel.chairman-animate .chairman-copy > blockquote { transition-delay: .15s; }
#leadership .chairman-panel.chairman-animate .chairman-copy > .chairman-footer { transition-delay: .25s; }
#leadership .chairman-panel.chairman-animate.in-view .chairman-copy > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    #leadership .portrait-curtain, #leadership .portrait-curtain-2 { display: none; }
    #leadership .chairman-portrait img,
    #leadership .chairman-panel.chairman-animate .chairman-copy > * { opacity: 1; transform: none; transition: none; }
}

/* ======================= LEADERSHIP PERSPECTIVE (teaser, links down to #leadership for the full message) ======================= */
#leadershipPerspective.leadership-perspective { background: var(--ml-cream); color: var(--ml-ink); padding: 0; border-top: none; }
#leadershipPerspective .lp-media { line-height: 0; font-size: 0; }
#leadershipPerspective .lp-grid { display: grid; grid-template-columns: minmax(280px,38%) 1fr; align-items: stretch; }

#leadershipPerspective .lp-media { margin: 0; position: relative; background: #060606; min-height: 420px; max-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#leadershipPerspective .lp-media img { width: 100%; height: 100%; max-height: 100vh; object-fit: contain; object-position: center; display: block; }

#leadershipPerspective .lp-copy { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 70px 7vw 70px 6vw; }
#leadershipPerspective .lp-eyebrow { display: flex; align-items: center; gap: 10px; color: var(--ml-muted); }
#leadershipPerspective .lp-eyebrow-dash { width: 26px; height: 2px; background: var(--ml-gold); display: inline-block; }

#leadershipPerspective .lp-heading { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: clamp(30px,4vw,48px); line-height: 1.18; color: var(--ml-ink); margin: 14px 0 26px; max-width: 640px; }
#leadershipPerspective .lp-heading em { font-style: italic; color: var(--lp-purple); }

#leadershipPerspective .lp-quote { position: relative; margin: 0 0 26px; padding: 2px 0 2px 26px; border-left: 3px solid var(--ml-gold); font-size: 16.5px; line-height: 1.7; color: #3a3a35; max-width: 620px; }
#leadershipPerspective .lp-quote-mark { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 34px; line-height: .6; color: var(--ml-gold); margin-bottom: 6px; }

#leadershipPerspective .lp-tabs { display: flex; gap: 10px; margin-bottom: 16px; }
#leadershipPerspective .lp-tab { font-family: 'Outfit', Arial, sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ml-muted); background: transparent; border: 1px solid rgba(11,31,58,.2); border-radius: 999px; padding: 7px 18px; cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease; }
#leadershipPerspective .lp-tab:hover { border-color: var(--lp-purple); color: var(--lp-purple); }
#leadershipPerspective .lp-tab.active { background: var(--lp-purple); border-color: var(--lp-purple); color: #fff; }

#leadershipPerspective .lp-panels { position: relative; max-width: 620px; min-height: 78px; margin-bottom: 22px; }
#leadershipPerspective .lp-panel { margin: 0; font-size: 15px; line-height: 1.8; color: #4a4a44; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; position: absolute; inset: 0; pointer-events: none; }
#leadershipPerspective .lp-panel.active { opacity: 1; transform: none; position: relative; pointer-events: auto; }

#leadershipPerspective .lp-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; justify-content: space-between; padding-top: 24px; border-top: 1px solid rgba(11,31,58,.15); max-width: 900px; }
#leadershipPerspective .lp-signature { display: flex; flex-direction: column; gap: 4px; }
#leadershipPerspective .lp-signature strong { font-family: 'Outfit', Arial, sans-serif; font-size: 15px; font-weight: 700; color: var(--ml-ink); }
#leadershipPerspective .lp-signature span { font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ml-muted); }
#leadershipPerspective .lp-cta { display: inline-flex; align-items: center; gap: 10px; font-family: 'Outfit', Arial, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lp-purple); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent; transition: border-color .25s ease, gap .25s ease; }
#leadershipPerspective .lp-cta i { transition: transform .25s ease; }
#leadershipPerspective .lp-cta:hover { border-color: var(--lp-purple); gap: 14px; }
#leadershipPerspective .lp-cta:hover i { transform: translateX(3px); }

/* copy column + photo: slide-in direction follows actual mouse/wheel scroll
   direction (tracked in js/milestones-leadership.js via the html.lp-scroll-up
   class) -- scrolling down brings elements up from below, scrolling back up
   drops them in from above. Replays every pass thanks to the repeatable
   observer, in both directions. */
#leadershipPerspective .lp-copy.reveal > * { opacity: 0; transform: translateY(50px); transition: opacity 1.8s ease, transform 1.8s ease; }
html.lp-scroll-up #leadershipPerspective .lp-copy.reveal > * { transform: translateY(-50px); }
#leadershipPerspective .lp-copy.reveal > .lp-eyebrow { transition-delay: .1s; }
#leadershipPerspective .lp-copy.reveal > .lp-heading { transition-delay: .3s; }
#leadershipPerspective .lp-copy.reveal > .lp-quote { transition-delay: .5s; }
#leadershipPerspective .lp-copy.reveal > .lp-tabs { transition-delay: .65s; }
#leadershipPerspective .lp-copy.reveal > .lp-panels { transition-delay: .75s; }
#leadershipPerspective .lp-copy.reveal > .lp-footer { transition-delay: .9s; }
#leadershipPerspective .lp-copy.reveal.in-view > * { opacity: 1 !important; transform: none !important; }

#leadershipPerspective .lp-media.reveal { opacity: 0; transform: translateY(50px); transition: opacity 1.8s ease, transform 1.8s ease; }
html.lp-scroll-up #leadershipPerspective .lp-media.reveal { transform: translateY(-50px); }
#leadershipPerspective .lp-media.reveal.in-view { opacity: 1 !important; transform: none !important; }

@media (max-width: 860px) {
    #leadershipPerspective .lp-grid { grid-template-columns: 1fr; }
    #leadershipPerspective .lp-media { min-height: 300px; max-height: 60vh; }
    #leadershipPerspective .lp-copy { padding: 46px 24px; }
    #leadershipPerspective .lp-heading, #leadershipPerspective .lp-quote, #leadershipPerspective .lp-panel { max-width: 100%; }
    #leadershipPerspective .lp-footer { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (max-width: 480px) {
    #leadershipPerspective .lp-media { min-height: 240px; max-height: 46vh; }
    #leadershipPerspective .lp-copy { padding: 36px 18px; gap: 2px; }
    #leadershipPerspective .lp-heading { font-size: clamp(22px,7vw,30px); margin: 10px 0 18px; }
    #leadershipPerspective .lp-quote { font-size: 14.5px; padding-left: 16px; }
    #leadershipPerspective .lp-quote-mark { font-size: 26px; }
    #leadershipPerspective .lp-tabs { gap: 8px; }
    #leadershipPerspective .lp-tab { padding: 6px 14px; font-size: 11.5px; }
    #leadershipPerspective .lp-panels { min-height: 100px; }
}

@media (prefers-reduced-motion: reduce) {
    #leadershipPerspective .lp-copy.reveal > *,
    #leadershipPerspective .lp-media.reveal,
    #leadershipPerspective .lp-panel { opacity: 1; transform: none; transition: none; }
}

/* ======================= RECENT HIGHLIGHTS (photo strip of recent partnerships/launches) ======================= */
#recentHighlights.recent-highlights { background: var(--ml-cream); color: var(--ml-ink); padding: 80px 0; overflow-x: hidden; }
#recentHighlights .container { max-width: 1180px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
#recentHighlights .rh-head { text-align: center; max-width: 700px; margin: 0 auto 40px; padding: 0 8px; box-sizing: border-box; }
#recentHighlights .rh-eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ml-gold-2); background: var(--ml-navy); padding: 6px 16px; border-radius: 999px; margin-bottom: 14px; }
#recentHighlights .rh-heading { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: clamp(24px,3.6vw,40px); line-height: 1.25; color: var(--ml-ink); margin: 0 0 12px; word-wrap: break-word; }
#recentHighlights .rh-heading em { font-style: italic; color: var(--ml-navy); border-bottom: 3px solid var(--ml-gold); }
#recentHighlights .rh-sub { font-size: 15.5px; line-height: 1.7; color: var(--ml-muted); margin: 0; }

#recentHighlights .rh-track-wrap { position: relative; display: flex; align-items: center; gap: 10px; max-width: 100%; }
#recentHighlights .rh-track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 8px 4px 20px; margin: 0; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--ml-gold) transparent; min-width: 0; }
#recentHighlights .rh-track::-webkit-scrollbar { height: 6px; }
#recentHighlights .rh-track::-webkit-scrollbar-thumb { background: var(--ml-gold); border-radius: 999px; }

#recentHighlights .rh-card { flex: 0 0 auto; width: 270px; scroll-snap-align: start; margin: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 28px rgba(11,31,58,.14); background: #fff; transition: transform .35s ease, box-shadow .35s ease; }
#recentHighlights .rh-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(11,31,58,.2); }
#recentHighlights .rh-card img { display: block; width: 100%; height: 320px; object-fit: cover; object-position: top center; }

#recentHighlights .rh-arrow { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(11,31,58,.18); background: #fff; color: var(--ml-navy); font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .25s ease, color .25s ease, border-color .25s ease; }
#recentHighlights .rh-arrow:hover { background: var(--ml-gold); border-color: var(--ml-gold); color: #fff; }

/* staggered fade-up as the strip scrolls into view */
#recentHighlights .rh-card.reveal:nth-child(1) { transition-delay: 0s; }
#recentHighlights .rh-card.reveal:nth-child(2) { transition-delay: .08s; }
#recentHighlights .rh-card.reveal:nth-child(3) { transition-delay: .16s; }
#recentHighlights .rh-card.reveal:nth-child(4) { transition-delay: .24s; }
#recentHighlights .rh-card.reveal:nth-child(5) { transition-delay: .32s; }

/* tablets: slightly smaller cards, arrows still available */
@media (max-width: 900px) {
    #recentHighlights .rh-card { width: 240px; }
    #recentHighlights .rh-card img { height: 280px; }
}

/* phones: cards scale with viewport width instead of fixed px, so each
   poster is fully readable and never gets clipped by the screen edge;
   one main card plus a peek of the next is visible, arrows hidden in
   favour of native touch-swipe */
@media (max-width: 640px) {
    #recentHighlights.recent-highlights { padding: 56px 0; }
    #recentHighlights .container { padding: 0 16px; }
    #recentHighlights .rh-head { padding: 0; margin-bottom: 28px; }
    #recentHighlights .rh-sub { font-size: 14.5px; }
    #recentHighlights .rh-arrow { display: none; }
    #recentHighlights .rh-track { padding: 6px 0 18px; gap: 16px; scroll-padding-left: 0; }
    #recentHighlights .rh-card { width: 76vw; max-width: 320px; }
    #recentHighlights .rh-card img { height: 76vw; max-height: 320px; }
}

@media (max-width: 380px) {
    #recentHighlights .rh-eyebrow { font-size: 11.5px; padding: 5px 12px; }
    #recentHighlights .rh-card { width: 82vw; }
    #recentHighlights .rh-card img { height: 82vw; }
}

@media (prefers-reduced-motion: reduce) {
    #recentHighlights .rh-track { scroll-behavior: auto; }
}