/* ============================================================
   Lumos Digital — Fractional Leadership page.
   Extends styles.css (tokens + shared offering-page patterns).
   Only the section patterns unique to this page live here.
   ============================================================ */

/* ===== No diagonal section cuts on this page — straight edges throughout ===== */
.lead-page .section-lilac{clip-path:none;padding:96px 0}
.lead-page .testimonial{clip-path:none;margin-top:0;padding:96px 0}
.lead-page .lead-dark{clip-path:none;margin-top:0;padding:96px 0}

/* ===== The question we keep in view (band under the hero) ===== */
.lead-question{padding:0 0 24px}
.lead-question-grid{display:flex;flex-direction:column;gap:22px;background:var(--lumos-lilac);border-radius:var(--radius-md);padding:clamp(36px,4vw,56px) clamp(28px,4vw,56px)}
.lead-question-label{font-family:var(--font-display);font-size:12px;font-weight:500;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--lumos-graphite)}
.lead-question .lead-question-label{color:var(--lumos-graphite)}
.lead-question-text{font-family:var(--font-display);font-weight:300;font-size:clamp(28px,3.4vw,46px);line-height:1.16;letter-spacing:-0.02em;color:var(--fg-brand);margin:0;max-width:32ch;text-wrap:pretty}
.lead-question-text em{font-style:normal;font-weight:500}

/* ===== 02 · How it works — three stacked horizontal step blocks ===== */
.lead-steps{display:flex;flex-direction:column;gap:16px;margin-top:52px}
.lead-step{background:var(--lumos-lilac);border-radius:var(--radius-md);display:grid;grid-template-columns:1fr;gap:14px;padding:clamp(26px,3vw,38px) clamp(24px,3vw,44px)}
@media (min-width:900px){.lead-step{grid-template-columns:auto 5fr 7fr;gap:44px;align-items:center}.lead-step-num{align-self:stretch;display:flex;align-items:center;width:108px;border-right:1px solid var(--lumos-navy-400)}}
.lead-step-num{font-family:var(--font-display);font-weight:300;font-size:clamp(32px,3.4vw,46px);line-height:1;color:var(--lumos-navy-400);margin:0}
.lead-step-title{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,1.9vw,25px);line-height:1.2;letter-spacing:-0.01em;color:var(--fg-brand);margin:0;text-wrap:pretty}
.lead-step-body{font-size:15px;line-height:1.65;color:var(--lumos-graphite);margin:0;max-width:56ch}

/* ===== 03 · Bring us in when — heading + copy, circular photo right ===== */
.lead-when-head{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
@media (min-width:900px){.lead-when-head{grid-template-columns:5fr 7fr;gap:64px}.lead-when-head>div:first-child{order:2}.lead-when-figure{order:1}}
.lead-when-head h2{font-family:var(--font-display);font-weight:500;font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-0.02em;color:var(--fg-brand);margin:0;text-wrap:pretty}
.lead-when-intro{font-size:16px;line-height:1.7;color:var(--lumos-graphite);margin:24px 0 0;max-width:56ch}
.lead-when-figure{width:100%;max-width:420px;aspect-ratio:1;border-radius:50%;background-size:cover;background-position:center;justify-self:start;box-shadow:var(--shadow-2)}
.lead-when{display:grid;grid-template-columns:1fr;gap:20px;margin-top:52px}
@media (min-width:600px){.lead-when{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.lead-when{grid-template-columns:repeat(3,1fr);gap:24px}}
.lead-when-card{background:var(--lumos-navy);border:1px solid var(--lumos-navy);border-radius:var(--radius-md);padding:28px 26px 30px;box-shadow:var(--shadow-1);transition:box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.lead-when-card:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.lead-when-num{font-family:var(--font-display);font-size:12px;font-weight:500;letter-spacing:var(--tracking-wider);color:var(--lumos-stone);margin-bottom:14px}
.lead-when-title{font-family:var(--font-display);font-weight:500;font-size:19px;line-height:1.25;letter-spacing:-0.01em;color:var(--lumos-paper);margin:0 0 12px;text-wrap:pretty}
.lead-when-body{font-size:15px;line-height:1.6;color:rgba(248,245,251,0.78);margin:0}

/* ===== 04 · Complementary strengths (dark, follows the quote band) ===== */
.lead-dark{background:var(--lumos-navy);color:var(--lumos-paper);position:relative;z-index:1;clip-path:polygon(-2px clamp(48px,7vw,110px),calc(100% + 2px) 0,calc(100% + 2px) 100%,-2px 100%);margin-top:calc(-1 * clamp(48px,7vw,110px));padding:calc(96px + clamp(48px,7vw,110px)) 0 96px}
@media print{.lead-dark{clip-path:none !important;margin-top:0 !important}}
.lead-dark .eyebrow{color:rgba(248,245,251,0.6);margin-bottom:22px}
.lead-dark .eyebrow .num,.lead-dark .eyebrow .sep{color:rgba(248,245,251,0.4)}
.lead-dark-head{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:900px){.lead-dark-head{grid-template-columns:6fr 6fr;gap:56px;align-items:start}}
.lead-dark-title{font-family:var(--font-display);font-weight:500;font-size:clamp(28px,3.1vw,40px);line-height:1.16;letter-spacing:-0.02em;color:var(--lumos-paper);margin:0;text-wrap:pretty}
.lead-dark-lead{font-size:16px;line-height:1.65;color:rgba(248,245,251,0.76);margin:0;max-width:52ch}
.lead-founders{display:flex;flex-direction:column;gap:0;margin-top:56px;border-top:1px solid rgba(248,245,251,0.16)}
.lead-founder{display:grid;grid-template-columns:1fr;gap:24px;padding:44px 0;border-bottom:1px solid rgba(248,245,251,0.16)}
@media (min-width:900px){.lead-founder{grid-template-columns:180px 4fr 6fr;gap:48px;align-items:center}}
.lead-founder-portrait{width:100%;max-width:180px;aspect-ratio:1;border-radius:50%;overflow:hidden;background:rgba(248,245,251,0.08);position:relative}
.lead-founder-portrait::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(248,245,251,0.18)}
.lead-founder-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.lead-founder-name{font-family:var(--font-display);font-weight:300;font-size:clamp(22px,2vw,27px);line-height:1.15;letter-spacing:-0.01em;color:var(--lumos-paper);margin:0 0 10px}
.lead-founder-name strong{font-weight:500}
.lead-founder-disc{font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--lumos-lavender);margin-bottom:0;line-height:1.5}
.lead-founder-body{display:flex;flex-direction:column;gap:14px}
.lead-founder-body p{font-size:15px;line-height:1.65;color:rgba(248,245,251,0.76);margin:0}

/* ===== 05 · Why Lumos — four principles on dark blocks (2 × 2) ===== */
.lead-why{display:grid;grid-template-columns:1fr;gap:20px;margin-top:56px}
@media (min-width:600px){.lead-why{grid-template-columns:1fr 1fr;gap:24px}}
.lead-why-item{background:var(--lumos-navy);border-radius:var(--radius-md);padding:34px 32px 36px}
.lead-why-label{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,2vw,25px);line-height:1.22;letter-spacing:-0.01em;color:var(--lumos-paper);margin-bottom:16px}
.lead-why-body{font-size:15px;line-height:1.7;color:rgba(248,245,251,0.78);margin:0}

/* ===== 06 · How it connects — two paths, one model ===== */
.lead-connect{display:grid;grid-template-columns:1fr;gap:24px;margin-top:52px}
@media (min-width:900px){.lead-connect{grid-template-columns:1fr 1fr;gap:28px}}
.lead-path{background:var(--lumos-paper);border:1px solid var(--border-1);border-radius:var(--radius-md);padding:34px 32px 36px;box-shadow:var(--shadow-1)}
.lead-path-dark{background:var(--lumos-navy);border-color:var(--lumos-navy);box-shadow:var(--shadow-2)}
.lead-path-label{font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--lumos-graphite);margin-bottom:16px}
.lead-path-dark .lead-path-label{color:rgba(248,245,251,0.55)}
.lead-path-title{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,2vw,25px);line-height:1.22;letter-spacing:-0.01em;color:var(--fg-brand);margin:0 0 14px;text-wrap:pretty}
.lead-path-dark .lead-path-title{color:var(--lumos-paper)}
.lead-path-body{font-size:15px;line-height:1.65;color:var(--lumos-graphite);margin:0}
.lead-path-dark .lead-path-body{color:rgba(248,245,251,0.76)}
.lead-connect-note{margin-top:24px;background:var(--lumos-navy-500);border:1px solid var(--lumos-navy-500);border-radius:var(--radius-md);padding:34px clamp(24px,3vw,40px);display:grid;grid-template-columns:1fr;gap:16px;box-shadow:var(--shadow-1)}
@media (min-width:900px){.lead-connect-note{grid-template-columns:auto 1fr;gap:44px;align-items:center}}
.lead-connect-note .lead-question-label{color:rgba(248,245,251,0.7);font-size:12px;letter-spacing:var(--tracking-wider);text-transform:uppercase;font-family:var(--font-display);font-weight:500}
.lead-connect-note p{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,2vw,25px);line-height:1.22;letter-spacing:-0.01em;color:var(--lumos-paper);margin:0;max-width:44ch}
.lead-connect-note p:last-child{margin:0}

/* ===== 07 · Ways to engage — numbered rows on the dark purple ===== */
.lead-engage-section{background:var(--lumos-navy);color:var(--lumos-paper);padding:96px 0}
.lead-engage-section .eyebrow{color:rgba(248,245,251,0.6);margin-bottom:22px}
.lead-engage-section .eyebrow .num,.lead-engage-section .eyebrow .sep{color:rgba(248,245,251,0.4)}
.lead-engage-title{font-family:var(--font-display);font-weight:500;font-size:clamp(30px,4vw,52px);line-height:1.08;letter-spacing:-0.02em;color:var(--lumos-paper);margin:0;max-width:22ch;text-wrap:pretty}
.lead-engage-head{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:900px){.lead-engage-head{grid-template-columns:5fr 7fr;gap:64px;align-items:start}}
.lead-engage-intro{font-size:16px;line-height:1.7;color:rgba(248,245,251,0.76);margin:0;max-width:52ch}
.lead-engage-section .offering-list{margin-top:64px}
.lead-engage-section .offering-row{border-top-color:rgba(248,245,251,0.18)}
.lead-engage-section .offering-row:last-child{border-bottom-color:rgba(248,245,251,0.18)}
.lead-engage-section .offering-num{color:var(--lumos-lavender)}
.lead-engage-section .offering-cat{color:var(--lumos-lavender)}
.lead-engage-section .offering-title{color:var(--lumos-paper)}
.lead-engage-section .offering-body{color:rgba(248,245,251,0.76)}
.lead-engage-section .offering-get .col-label{color:rgba(248,245,251,0.6)}
.lead-engage-section .offering-get li{color:rgba(248,245,251,0.86)}
.lead-engage-section .offering-get li::before{background:transparent;border:1px solid var(--lumos-lavender)}
.lead-engage-section .duration-card{background:var(--lumos-paper);border-color:var(--lumos-paper)}
.lead-engage-section .duration-card-dark{background:var(--lumos-navy-900);border-color:var(--lumos-navy-900)}
.lead-engage-section .offering-body-for{color:var(--lumos-lavender);font-size:15px;max-width:32ch;margin:0 0 22px}
.lead-engage-section .offering-title{margin-bottom:18px}

/* ===== New copy structure (condensed page) ===== */
.lead-step-label{font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--lumos-navy-500);margin-bottom:10px}
.lead-step-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.lead-step-points li{position:relative;padding-left:20px;font-size:15px;line-height:1.55;color:var(--lumos-graphite)}
.lead-step-points li::before{content:"";position:absolute;left:2px;top:0.6em;width:6px;height:6px;border-radius:50%;background:var(--lumos-navy-400)}
.lead-when-group{display:grid;grid-template-rows:auto 1fr 1fr;gap:16px;align-content:start}
.lead-when-group-label{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,1.9vw,25px);line-height:1.2;letter-spacing:-0.01em;text-transform:none;color:var(--fg-brand);padding-bottom:0;border-bottom:0;text-align:center;min-height:2.4em;display:flex;align-items:flex-end;justify-content:center}
.lead-when-group .lead-when-card{height:100%}
.lead-founder-tag{font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--lumos-stone);margin-bottom:12px}
.lead-founder-points{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.lead-founder-points li{position:relative;padding-left:20px;font-size:14px;line-height:1.5;color:rgba(248,245,251,0.72)}
.lead-founder-points li::before{content:"";position:absolute;left:2px;top:0.55em;width:5px;height:5px;border-radius:50%;background:var(--lumos-lavender)}
.lead-dark-lead p{margin:0;color:var(--lumos-paper)}
.lead-dark-lead p+p{margin-top:14px}
.lead-page .eyebrow .num,.lead-page .eyebrow .sep{color:inherit}
.lead-page .lead-dark .eyebrow .num,.lead-page .lead-dark .eyebrow .sep{color:inherit}
.lead-page .cta-eyebrow .num,.lead-page .cta-eyebrow .sep{color:inherit}
.lead-when-head .eyebrow{margin-bottom:24px}

/* 01 · The shift — copy on a light purple block */
.lead-shift-box{--shift-pad:clamp(26px,3.4vw,56px);background:var(--lumos-lilac);border-radius:var(--radius-md);overflow:hidden;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:stretch}
@media (min-width:900px){.lead-shift-box{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.lead-shift-figure{width:100%;height:100%;min-height:clamp(260px,34vw,520px);border-radius:0;background-size:cover;background-position:center}
.lead-shift-text{display:flex;flex-direction:column;gap:20px;justify-content:center;padding:clamp(30px,3.4vw,52px) var(--shift-pad)}
.lead-shift-box .eyebrow{margin:0}
.lead-shift-head{font-family:var(--font-display);font-weight:500;font-size:clamp(26px,3vw,40px);line-height:1.14;letter-spacing:-0.02em;color:var(--fg-brand);margin:0;max-width:34ch;text-wrap:pretty}
.lead-shift-body{display:flex;flex-direction:column;gap:14px;max-width:66ch}
.lead-shift-body p{font-size:16px;line-height:1.7;color:var(--lumos-graphite);margin:0}
.lead-page .section.shift{padding-bottom:32px}
.lead-page #how-it-works{padding-top:40px}
.lead-how-head{font-family:var(--font-display);font-weight:500;font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-0.02em;color:var(--fg-brand);margin:20px 0 0;white-space:nowrap}
.lead-how-intro{font-size:16px;line-height:1.7;color:var(--lumos-graphite);margin:20px 0 0;max-width:66ch}
.lead-page .hero{padding-bottom:24px}
.lead-page .section.shift{padding-top:32px}
@media (max-width:899px){.lead-founder{justify-items:center;text-align:center}.lead-founder-portrait{margin:0 auto}.lead-founder-points{align-items:center}.lead-founder-points li{text-align:left}}
.lead-when-card{transition:none}
.lead-when-card:hover{box-shadow:var(--shadow-1);transform:none}
