/* ============================================================
   lipo-b12.css — Lipo-B12 injection program page
   Depends on: ../styles.css for base variables, .container,
   .gs-form-*, .section-tag, .section-h2
   All selectors namespaced lb-*
   ============================================================ */

/* ── Local design tokens ────────────────────────────────── */
:root {
    --lb-teal:        #31b898;
    --lb-teal-light:  #5EC9AE;
    --lb-teal-dim:    #28967C;
    --lb-teal-pale:   #EDF6F3;
    --lb-teal-mist:   #F5FAF8;
    --lb-forest:      #1C3832;
    --lb-forest-mid:  #2A4F47;
    --lb-sand:        #FDFAF7;
    --lb-sand-mid:    #F5EFE8;
    --lb-sand-deep:   #E8DDD4;
    --lb-off-white:   #FDFAF7;
    --lb-card-bg:     #FFFDF9;
    --lb-text-dark:   #1A2420;
    --lb-text-medium: #4A5E58;
    --lb-muted:       #7A9490;
}

/* ── Scroll reveal ──────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity   0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in {
    opacity: 1;
    transform: none;
}
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }

/* ── section-tag / section-h2 ───────────────────────────── */
.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: var(--type-caption);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 14px;
}
.section-tag-line {
    width: 26px;
    height: 1.5px;
    background: var(--teal);
    opacity: 0.6;
    flex-shrink: 0;
}
.section-h2 {
    font-family: var(--font-serif);
    font-size: var(--type-h1);
    font-weight: 400;
    line-height: 1.1;
    color: var(--lb-text-dark);
    margin-bottom: 14px;
}
.section-h2 em {
    font-style: italic;
    color: var(--teal);
}


/* ════════════════════════════════════════════════════════════
   1. HERO — split layout: forest left, teal-mist right
════════════════════════════════════════════════════════════ */
.lb-hero {
    position: relative;
    min-height: 92vh;
    overflow: hidden;
}
/* Full-width left background (dark forest) */
.lb-hero::before {
    content: '';
    position: absolute;
    inset: 0 50% 0 0;
    background: linear-gradient(155deg, var(--lb-forest) 0%, var(--lb-forest-mid) 55%, #2B5E54 100%);
    pointer-events: none;
}
/* Full-width right background (teal mist) */
.lb-hero::after {
    content: '';
    position: absolute;
    inset: 0 0 0 50%;
    background: linear-gradient(155deg, var(--lb-teal-mist) 0%, var(--lb-teal-pale) 60%, #d8efe9 100%);
    pointer-events: none;
}
/* 1200px constrained content grid */
.lb-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 92vh;
    position: relative;
    z-index: 1;
}

/* ── Hero Left — forest dark ── */
.lb-hero-left {
    background: none;
    padding: 130px 60px 90px 68px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.lb-hero-left::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 30%, rgba(49,184,152,0.10) 0%, transparent 60%);
    pointer-events: none;
}
.lb-hero-glow {
    position: absolute;
    bottom: -20%;
    left: -15%;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(49,184,152,0.08) 0%, transparent 70%);
    pointer-events: none;
}
body.has-announcement .lb-hero-left {
    padding-top: 160px;
}
.lb-hero-left-inner {
    position: relative;
    z-index: 1;
    opacity: 0;
    animation: lbFadeUp 0.7s 0.15s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes lbFadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}

/* Breadcrumb */
.lb-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
    font-family: var(--font-sans);
    font-size: var(--type-caption);
    font-weight: 400;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.55);
}
.lb-breadcrumb a {
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    transition: color 0.2s;
}
.lb-breadcrumb a:hover { color: rgba(255,255,255,0.65); }
.lb-breadcrumb-sep { color: rgba(255,255,255,0.55); font-size: var(--type-caption); }
.lb-breadcrumb-current { color: rgba(49,184,152,0.75); }

/* Eyebrow */
.lb-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: var(--type-caption);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lb-teal-light);
    margin-bottom: 20px;
}
.lb-eyebrow-pip {
    width: 28px;
    height: 1.5px;
    background: var(--lb-teal-light);
    opacity: 0.6;
    flex-shrink: 0;
}

/* H1 */
.lb-hero h1 {
    font-family: var(--font-serif);
    font-size: var(--type-display);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: #fff;
    margin-bottom: 24px;
}
.lb-hero h1 em {
    font-style: italic;
    color: var(--lb-teal-light);
}

.lb-hero-p {
    font-family: var(--font-sans);
    font-size: var(--type-body);
    font-weight: 400;
    line-height: var(--lh-body);
    color: white;
    max-width: 460px;
    margin-bottom: 38px;
}

/* Trust badges */
.lb-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 36px;
}
.lb-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(49,184,152,0.30);
    padding: 7px 15px;
    border-radius: 100px;
    font-family: var(--font-sans);
    font-size: var(--type-caption);
    font-weight: 400;
    color: rgba(255,255,255,0.80);
    white-space: nowrap;
}
.lb-trust-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--lb-teal);
    flex-shrink: 0;
}

/* CTA buttons */
.lb-hero-btns {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.lb-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--lb-teal);
    color: #fff;
    padding: 15px 34px;
    border-radius: 100px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-decoration: none;
    box-shadow: 0 6px 22px rgba(49,184,152,0.32);
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap;
}
.lb-btn-primary:hover {
    background: var(--lb-teal-dim);
    transform: translateY(-2px);
}
.lb-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.70);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.2s;
}
.lb-btn-ghost:hover { color: #fff; }
.lb-btn-ghost-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(49,184,152,0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: border-color 0.2s, background 0.2s;
}
.lb-btn-ghost:hover .lb-btn-ghost-icon {
    border-color: var(--lb-teal);
    background: rgba(49,184,152,0.10);
}

/* ── Hero Right — teal-mist with ingredient card ── */
.lb-hero-right {
    background: none;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 52px;
    opacity: 0;
    animation: lbFadeIn 0.9s 0.30s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes lbFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.lb-hero-right::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 40% 70%, rgba(49,184,152,0.14) 0%, transparent 60%);
    pointer-events: none;
}
.lb-hero-right-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
}

/* Ingredient card */
.lb-ingredient-card {
    background: var(--card-bg, #FDFAF7);
    border-radius: var(--radius-lg, 28px);
    padding: 36px 30px;
    box-shadow: 0 16px 48px rgba(28,56,50,0.14);
    border: 1px solid rgba(49,184,152,0.14);
}
.lb-ingredient-card-label {
    font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
    font-size: 26px;
    font-weight: 400;
    color: var(--lb-text-dark);
    margin-bottom: 4px;
    line-height: 1.2;
}
.lb-ingredient-card-sub {
    font-family: var(--font-sans);
    font-size: var(--type-caption);
    font-weight: 400;
    color: var(--lb-muted);
    margin-bottom: 24px;
}
.lb-ingredient-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lb-ingredient-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--lb-sand-deep);
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s;
    position: relative;
    flex-wrap: wrap;
}
.lb-ingredient-row:hover {
    background: var(--lb-teal-pale);
    border-color: var(--lb-teal-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(49,184,152,0.12);
}
.lb-ingredient-row.open {
    background: var(--lb-teal-pale);
    border-color: var(--lb-teal);
    box-shadow: 0 6px 20px rgba(49,184,152,0.15);
}
.lb-ingredient-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--lb-teal-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lb-teal-dim);
    flex-shrink: 0;
    transition: background 0.3s, color 0.3s;
}
.lb-ingredient-row:hover .lb-ingredient-icon,
.lb-ingredient-row.open .lb-ingredient-icon {
    background: var(--lb-teal);
    color: #fff;
}
.lb-ingredient-body { flex: 1; min-width: 0; }
.lb-ingredient-name {
    font-family: var(--font-sans);
    font-size: var(--type-body);
    font-weight: 600;
    color: var(--lb-text-dark);
    margin-bottom: 2px;
    line-height: 1.3;
}
.lb-ingredient-sub {
    font-family: var(--font-sans);
    font-size: var(--type-caption);
    font-weight: 400;
    color: var(--lb-muted);
    line-height: 1.45;
}
.lb-ingredient-arrow {
    flex-shrink: 0;
    color: var(--lb-muted);
    transition: transform 0.3s, color 0.3s;
}
.lb-ingredient-row.open .lb-ingredient-arrow {
    transform: rotate(180deg);
    color: var(--lb-teal);
}
.lb-ingredient-detail {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    font-family: var(--font-sans);
    font-size: var(--type-small);
    font-weight: 400;
    color: var(--lb-text-medium);
    line-height: 1.65;
    padding: 0 4px;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
}
.lb-ingredient-row.open .lb-ingredient-detail {
    max-height: 160px;
    opacity: 1;
    padding: 10px 4px 4px;
}

/* Stat badge floating below card */
.lb-stat-badge {
    margin-top: 16px;
    background: var(--lb-forest);
    border-radius: var(--radius-md, 20px);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.lb-stat-badge-val {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 500;
    color: var(--lb-teal-light);
    line-height: 1;
    flex-shrink: 0;
}
.lb-stat-badge-text {
    font-family: var(--font-sans);
    font-size: var(--type-caption);
    font-weight: 400;
    color: rgba(255,255,255,0.75);
    line-height: 1.45;
}


/* ════════════════════════════════════════════════════════════
   2. STATS BAND
════════════════════════════════════════════════════════════ */
.lb-stats-band {
    background: var(--lb-forest);
    padding: 52px 0;
}
.lb-stats-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.lb-stat-item {
    flex: 1;
    text-align: center;
    padding: 0 32px;
    position: relative;
}
.lb-stat-item + .lb-stat-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 52px;
    background: rgba(49,184,152,0.22);
}
.lb-stat-val {
    font-family: var(--font-serif);
    font-size: clamp(30px, 3.5vw, 46px);
    font-weight: 400;
    color: #fff;
    line-height: 1;
    margin-bottom: 8px;
}
.lb-stat-val em {
    font-style: italic;
    color: var(--lb-teal-light);
}
.lb-stat-lbl {
    font-family: var(--font-sans);
    font-size: var(--type-caption);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.70);
    line-height: 1.45;
}


/* ════════════════════════════════════════════════════════════
   3. WHAT IS LIPO-B12 — 2-col: text left, 2x2 grid right
════════════════════════════════════════════════════════════ */
.lb-what-section {
    padding: 96px 0;
    background: var(--lb-sand);
}
.lb-what-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 80px;
    align-items: center;
}
.lb-what-lead {
    font-family: var(--font-sans);
    font-size: var(--type-body);
    font-weight: 400;
    line-height: var(--lh-body);
    color: var(--lb-text-medium);
    max-width: 480px;
    margin-bottom: 0;
}
.lb-ingr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.lb-ingr-card {
    background: var(--lb-card-bg);
    border-radius: var(--radius-md, 20px);
    padding: 26px 22px;
    border: 1px solid rgba(26,36,32,0.07);
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s, background 0.3s;
    cursor: pointer;
}
.lb-ingr-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(28,56,50,0.18);
    border-color: var(--lb-forest);
    background: var(--lb-forest);
}
.lb-ingr-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--lb-teal-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lb-teal-dim);
    margin-bottom: 14px;
    transition: background 0.3s, color 0.3s;
}
.lb-ingr-card:hover .lb-ingr-card-icon {
    background: rgba(255,255,255,0.15);
    color: var(--lb-teal-light);
}
.lb-ingr-card-name {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--lb-text-dark);
    margin-bottom: 8px;
    line-height: 1.25;
    transition: color 0.3s;
}
.lb-ingr-card:hover .lb-ingr-card-name { color: #fff; }
.lb-ingr-card-desc {
    font-family: var(--font-sans);
    font-size: var(--type-small);
    font-weight: 400;
    color: var(--lb-muted);
    line-height: 1.68;
    transition: color 0.3s;
}
.lb-ingr-card:hover .lb-ingr-card-desc { color: rgba(255,255,255,0.75); }


/* ════════════════════════════════════════════════════════════
   4. THE LIVEA DIFFERENCE — dark forest glass cards
════════════════════════════════════════════════════════════ */
.lb-diff-section {
    padding: 96px 0;
    background: linear-gradient(135deg, var(--lb-forest) 0%, var(--lb-forest-mid) 55%, #2B5E54 100%);
    position: relative;
    overflow: hidden;
}
.lb-diff-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 75% 40%, rgba(49,184,152,0.09) 0%, transparent 55%);
    pointer-events: none;
}
.lb-diff-section .container { position: relative; z-index: 1; }
.lb-diff-watermark {
    position: absolute;
    top: -20px;
    right: -10px;
    font-family: var(--font-serif);
    font-size: 200px;
    font-weight: 600;
    line-height: 1;
    color: rgba(49,184,152,0.04);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.lb-diff-header {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 60px;
}
.lb-diff-section .section-tag { color: var(--lb-teal-light); }
.lb-diff-section .section-tag-line { background: var(--lb-teal-light); }
.lb-diff-section .section-h2 { color: #fff; }
.lb-diff-section .section-h2 em { color: var(--lb-teal-light); }
.lb-diff-lead {
    font-family: var(--font-sans);
    font-size: var(--type-body);
    font-weight: 400;
    color: white;
    line-height: var(--lh-body);
    max-width: 480px;
    margin: 0 auto;
}
.lb-diff-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.lb-diff-card {
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--radius-md, 20px);
    padding: 32px 24px;
    transition: transform 0.3s, background 0.3s, border-color 0.3s;
    cursor: default;
}
.lb-diff-card:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.10);
    border-color: rgba(49,184,152,0.28);
}
.lb-diff-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: rgba(49,184,152,0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lb-teal-light);
    margin-bottom: 18px;
}
.lb-diff-card h3 {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.28;
}
.lb-diff-card p {
    font-family: var(--font-sans);
    font-size: var(--type-small);
    font-weight: 400;
    color: white;
    line-height: 1.72;
}


/* ════════════════════════════════════════════════════════════
   5. HOW WE SUPPORT YOU — 3-step timeline
════════════════════════════════════════════════════════════ */
.lb-timeline-section {
    padding: 96px 0;
    background: var(--lb-teal-mist);
}
.lb-timeline-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 64px;
}
.lb-timeline-intro {
    font-family: var(--font-sans);
    font-size: var(--type-body);
    font-weight: 400;
    color: var(--lb-text-medium);
    line-height: var(--lh-body);
    margin: 0 auto;
    max-width: 460px;
}
.lb-timeline-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    position: relative;
}
.lb-timeline-steps::before {
    content: '';
    position: absolute;
    top: 44px;
    left: calc(16.66% + 24px);
    right: calc(16.66% + 24px);
    height: 1.5px;
    background: linear-gradient(90deg, var(--lb-teal) 0%, rgba(49,184,152,0.25) 100%);
    pointer-events: none;
}
.lb-step {
    position: relative;
    text-align: center;
    padding: 28px 24px 32px;
    background: #fff;
    border-radius: 20px;
    border: 1px solid var(--lb-sand-deep);
    cursor: pointer;
    transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s, background 0.35s;
}
.lb-step:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(49,184,152,0.18);
    border-color: var(--lb-teal-light);
    background: var(--lb-teal-pale);
}
.lb-step-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--lb-teal);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(49,184,152,0.32);
    position: relative;
    z-index: 1;
    transition: transform 0.35s, box-shadow 0.35s;
}
.lb-step:hover .lb-step-circle {
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgba(49,184,152,0.4);
}
.lb-step-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: rgba(49,184,152,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lb-teal-dim);
    margin: 0 auto 16px;
    transition: background 0.3s, color 0.3s;
}
.lb-step:hover .lb-step-icon {
    background: var(--lb-teal);
    color: #fff;
}
.lb-step h3 {
    font-family: var(--font-serif);
    font-size: var(--type-h3);
    font-weight: 500;
    color: var(--lb-text-dark);
    margin-bottom: 10px;
    line-height: 1.28;
}
.lb-step p {
    font-family: var(--font-sans);
    font-size: var(--type-body);
    font-weight: 400;
    color: var(--lb-text-medium);
    line-height: 1.72;
}


/* ════════════════════════════════════════════════════════════
   6. BENEFITS — Dark Immersive Numbered
════════════════════════════════════════════════════════════ */
.lb-benefits-section {
    padding: 96px 0;
    background: linear-gradient(150deg, var(--lb-forest) 0%, var(--lb-forest-mid) 50%, #1a3830 100%);
    position: relative;
    overflow: hidden;
}
.lb-benefits-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(49,184,152,0.08) 0%, transparent 60%);
    pointer-events: none;
}
.lb-benefits-section .container { position: relative; z-index: 1; }
.lb-benefits-header {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 60px;
}
.lb-benefits-section .section-h2 { color: #fff; }
.lb-benefits-section .section-h2 em { color: var(--lb-teal-light); }
.lb-benefits-section .section-tag { color: var(--lb-teal-light); }
.lb-benefits-intro {
    font-family: var(--font-sans);
    font-size: var(--type-body);
    font-weight: 400;
    color: rgba(255,255,255,0.70);
    line-height: var(--lh-body);
    margin: 0 auto;
    max-width: 460px;
}
.lb-benefits-steps {
    max-width: 900px;
    margin: 0 auto;
}
.lb-ben-step {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 40px;
    padding: 40px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    align-items: start;
    position: relative;
    transition: background 0.35s;
}
.lb-ben-step:last-child { border-bottom: none; }
.lb-ben-step:hover { background: rgba(255,255,255,0.02); }
/* left accent */
.lb-ben-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: -24px;
    bottom: 0;
    width: 3px;
    background: var(--lb-teal);
    border-radius: 2px;
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.lb-ben-step:hover::before { transform: scaleY(1); }
.lb-ben-num {
    font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
    font-size: 72px;
    font-weight: 400;
    color: rgba(49,184,152,0.2);
    line-height: 1;
    transition: color 0.4s;
    padding-top: 4px;
    user-select: none;
}
.lb-ben-step:hover .lb-ben-num { color: rgba(49,184,152,0.45); }
.lb-ben-content h3 {
    font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.6rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.2;
}
.lb-ben-content p {
    font-family: var(--font-sans);
    font-size: var(--type-body);
    font-weight: 400;
    color: rgba(255,255,255,0.75);
    line-height: var(--lh-body);
    max-width: 560px;
}


/* ════════════════════════════════════════════════════════════
   IMAGE BANNER — full-bleed lifestyle photo
════════════════════════════════════════════════════════════ */
.lb-banner {
    position: relative;
    height: 560px;
    overflow: hidden;
}
.lb-banner-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}
.lb-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(28,56,50,0.85) 0%, rgba(28,56,50,0.5) 50%, transparent 100%);
}
.lb-banner-content {
    position: relative;
    z-index: 2;
    max-width: 520px;
    padding: 80px 64px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.lb-banner-tag {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--type-caption);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lb-teal-light);
    background: rgba(49,184,152,0.12);
    border: 1px solid rgba(49,184,152,0.2);
    border-radius: 100px;
    padding: 5px 16px;
    margin-bottom: 18px;
    width: fit-content;
}
.lb-banner-h2 {
    font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
    font-size: var(--type-h2);
    font-weight: 400;
    color: #fff;
    line-height: 1.12;
    margin-bottom: 14px;
}
.lb-banner-h2 em { font-style: italic; color: var(--lb-teal-light); }
.lb-banner-p {
    font-family: var(--font-sans);
    font-size: var(--type-body);
    font-weight: 400;
    color: rgba(255,255,255,0.75);
    line-height: var(--lh-body);
    margin-bottom: 24px;
}
.lb-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--lb-teal);
    color: #fff;
    padding: 14px 32px;
    border-radius: 100px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
    width: fit-content;
}
.lb-banner-btn:hover {
    background: var(--lb-teal-dim);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(49,184,152,0.3);
}


/* ════════════════════════════════════════════════════════════
   7. WHO IT'S FOR — Tabbed Toggle Candidacy
════════════════════════════════════════════════════════════ */
.lb-for-section {
    padding: 96px 0;
    background: var(--lb-sand);
}
.lb-for-header {
    max-width: 620px;
    margin: 0 auto 40px;
    text-align: center;
}
.lb-for-lead {
    font-family: var(--font-sans);
    font-size: var(--type-body);
    font-weight: 400;
    color: var(--lb-text-medium);
    line-height: var(--lh-body);
    max-width: 580px;
}
/* Tabs */
.lb-cand-tabs-row {
    display: flex;
    gap: 0;
    max-width: 700px;
    margin: 0 auto;
}
.lb-cand-tab {
    flex: 1;
    padding: 16px 24px;
    text-align: center;
    cursor: pointer;
    font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.1rem;
    font-weight: 500;
    border: 1.5px solid var(--lb-sand-deep);
    transition: all 0.3s;
    background: #fff;
    color: var(--lb-muted);
}
.lb-cand-tab:first-child { border-radius: var(--radius-md, 20px) 0 0 0; border-right: none; }
.lb-cand-tab:last-child { border-radius: 0 var(--radius-md, 20px) 0 0; border-left: none; }
.lb-cand-tab--yes.active { background: var(--lb-forest); border-color: var(--lb-forest); color: #fff; }
.lb-cand-tab--no.active { background: #F5EDE8; border-color: rgba(184,137,122,0.3); color: #B8897A; }
.lb-cand-tab:hover:not(.active) { background: var(--lb-sand-mid); color: var(--lb-text-dark); }
.lb-cand-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    font-size: 13px;
}
.lb-cand-tab--yes .lb-cand-tab-icon { background: rgba(49,184,152,0.18); }
.lb-cand-tab--yes.active .lb-cand-tab-icon { background: rgba(49,184,152,0.3); }
.lb-cand-tab--no .lb-cand-tab-icon { background: rgba(184,137,122,0.18); }
.lb-cand-tab--no.active .lb-cand-tab-icon { background: rgba(184,137,122,0.3); }
/* Panels */
.lb-cand-panel {
    max-width: 700px;
    margin: 0 auto;
    background: #fff;
    border: 1.5px solid var(--lb-sand-deep);
    border-top: none;
    border-radius: 0 0 var(--radius-md, 20px) var(--radius-md, 20px);
    padding: 32px 36px;
    display: none;
}
.lb-cand-panel.on { display: block; }
.lb-cand-panel--yes { border-color: rgba(49,184,152,0.15); }
.lb-cand-panel--no { border-color: rgba(184,137,122,0.2); }
.lb-cand-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin: 0;
}
.lb-cand-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--font-sans);
    font-size: var(--type-body);
    font-weight: 400;
    color: var(--lb-text-medium);
    line-height: 1.6;
    padding: 10px 14px;
    border-radius: 12px;
    transition: background 0.25s, transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.lb-cand-list li:hover { transform: translateX(4px); }
.lb-cand-panel--yes .lb-cand-list li:hover { background: var(--lb-teal-mist); }
.lb-cand-panel--no .lb-cand-list li:hover { background: #F5EDE8; }
.lb-cand-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}
.lb-cand-dot--y { background: var(--lb-teal); }
.lb-cand-dot--n { background: #B8897A; }
.lb-cand-note {
    margin-top: 20px;
    font-size: var(--type-caption);
    font-weight: 400;
    font-style: italic;
    color: var(--lb-muted);
    line-height: 1.55;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--lb-teal-mist);
}
.lb-cand-note--alt { background: #F5EDE8; }
.lb-cand-cta {
    margin-top: 20px;
    text-align: center;
    padding-top: 16px;
    border-top: 1px solid var(--lb-sand-deep);
}
.lb-cand-cta-text {
    font-family: var(--font-sans);
    font-size: var(--type-small);
    font-weight: 400;
    color: var(--lb-muted);
    margin-bottom: 12px;
}
.lb-cand-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--lb-teal);
    color: #fff;
    padding: 12px 28px;
    border-radius: 100px;
    font-family: var(--font-sans);
    font-size: var(--type-small);
    font-weight: 500;
    text-decoration: none;
    transition: background 0.25s, transform 0.2s;
}
.lb-cand-cta-btn:hover { background: var(--lb-teal-dim); transform: translateY(-2px); }


/* ════════════════════════════════════════════════════════════
   8. CONSULTATION FORM — Photo + Form Grid (Concept A)
════════════════════════════════════════════════════════════ */
.lb-form-section {
    padding: 96px 0;
    background: linear-gradient(180deg, var(--lb-off-white) 0%, var(--lb-teal-mist) 55%, var(--lb-teal-pale) 100%);
}
.lb-form-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 52px;
}
.lb-form-intro {
    font-family: var(--font-sans);
    font-size: var(--type-body);
    font-weight: 400;
    color: var(--lb-text-medium);
    line-height: var(--lh-body);
    margin: 0 auto;
    max-width: 480px;
}
.lb-form-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    border-radius: var(--radius-lg, 28px);
    overflow: hidden;
    box-shadow: 0 16px 56px rgba(26,36,32,0.1);
    max-width: 960px;
    margin: 0 auto;
}
.lb-form-photo {
    position: relative;
    min-height: 580px;
}
.lb-form-photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.lb-form-photo-badges {
    position: absolute;
    bottom: 28px;
    left: 28px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lb-form-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(26,36,32,0.75);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px;
    padding: 8px 16px;
    font-family: var(--font-sans);
    font-size: var(--type-caption);
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    width: fit-content;
}
.lb-form-badge svg { color: var(--lb-teal-light); flex-shrink: 0; }
.lb-form-right {
    background: #fff;
}


/* ════════════════════════════════════════════════════════════
   9. FAQ SECTION
════════════════════════════════════════════════════════════ */
.lb-faq-section {
    background: var(--lb-sand);
    padding: 96px 0;
}
.lb-faq-header {
    text-align: center;
    margin-bottom: 64px;
}
.lb-faq-intro {
    font-family: var(--font-sans);
    font-size: var(--type-body);
    font-weight: 400;
    color: var(--lb-text-medium);
    line-height: var(--lh-body);
    max-width: 520px;
    margin: 16px auto 0;
}

/* FAQ accordion */
.lb-faq-list {
    max-width: 760px;
    margin: 0 auto;
}
.lb-faq-item {
    border-bottom: 1px solid var(--lb-sand-deep);
}
.lb-faq-item:first-child {
    border-top: 1px solid var(--lb-sand-deep);
}
.lb-faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: transparent;
    border: none;
    padding: 24px 0;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-serif);
    font-size: 1.12rem;
    font-weight: 500;
    color: var(--lb-text-dark);
    line-height: 1.35;
    transition: color 0.2s;
}
.lb-faq-question:hover { color: var(--lb-teal); }
.lb-faq-item.open .lb-faq-question { color: var(--lb-teal); }
.lb-faq-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--lb-teal-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lb-teal);
    flex-shrink: 0;
    transition: background 0.2s, transform 0.35s;
}
.lb-faq-item.open .lb-faq-icon {
    background: var(--lb-teal);
    color: #fff;
    transform: rotate(45deg);
}
.lb-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lb-faq-item.open .lb-faq-answer {
    max-height: 480px;
}
.lb-faq-answer p {
    font-family: var(--font-sans);
    font-size: var(--type-body);
    font-weight: 400;
    color: var(--lb-text-medium);
    line-height: var(--lh-body);
    padding-bottom: 24px;
}
.lb-faq-answer a {
    color: var(--lb-teal);
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* ════════════════════════════════════════════════════════════
   10. CTA BAND — forest gradient rounded card
════════════════════════════════════════════════════════════ */
.lb-cta-outer {
    padding: 0 48px 88px;
    max-width: 1248px;
    margin: 0 auto;
}
.lb-cta-band {
    background: linear-gradient(120deg, var(--lb-forest) 0%, var(--lb-forest-mid) 55%, #2B5E54 100%);
    border-radius: var(--radius-lg, 28px);
    padding: 68px 72px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.lb-cta-band::before {
    content: '';
    position: absolute;
    top: -40%;
    right: 5%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(49,184,152,0.10) 0%, transparent 70%);
    pointer-events: none;
}
.lb-cta-band::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: 35%;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(49,184,152,0.05);
    pointer-events: none;
}
.lb-cta-left { position: relative; z-index: 1; }
.lb-cta-h2 {
    font-family: var(--font-serif);
    font-size: var(--type-h2);
    font-weight: 400;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 12px;
}
.lb-cta-h2 em { font-style: italic; color: var(--lb-teal-light); }
.lb-cta-sub {
    font-family: var(--font-sans);
    font-size: var(--type-body);
    font-weight: 400;
    color: white;
    line-height: var(--lh-body);
    max-width: 440px;
}
.lb-cta-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.lb-cta-btn-white {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: var(--lb-forest);
    padding: 16px 36px;
    border-radius: 100px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(26,36,32,0.14);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    letter-spacing: 0.01em;
    min-height: 52px;
}
.lb-cta-btn-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(26,36,32,0.20);
    background: var(--lb-teal-pale);
}
.lb-cta-btn-ghost {
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 400;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
}
.lb-cta-btn-ghost:hover { color: #fff; }


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .lb-hero-inner { max-width: 100%; }
    .lb-hero-left { padding: 130px 44px 72px 52px; }
    body.has-announcement .lb-hero-left { padding-top: 155px; }
    .lb-what-grid { gap: 52px; }
    .lb-for-grid { gap: 52px; }
    .lb-diff-cards { grid-template-columns: repeat(2, 1fr); }
    .lb-cta-outer { padding: 0 32px 72px; }
    .lb-cta-band { padding: 56px 52px; gap: 36px; }
}

@media (max-width: 960px) {
    /* Hero — stack */
    .lb-hero::before { inset: 0; }
    .lb-hero::after { display: none; }
    .lb-hero-inner {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .lb-hero-left {
        padding: 110px 40px 72px;
        justify-content: flex-start;
    }
    body.has-announcement .lb-hero-left { padding-top: 140px; }
    .lb-hero-right { padding: 56px 40px; }
    .lb-hero-right-inner { max-width: 100%; }

    /* Stats */
    .lb-stats-inner { flex-wrap: wrap; }
    .lb-stat-item { flex: 0 0 33.333%; }

    /* What is */
    .lb-what-grid { grid-template-columns: 1fr; gap: 52px; }

    /* Diff cards */
    .lb-diff-cards { grid-template-columns: repeat(2, 1fr); }

    /* Timeline */
    .lb-timeline-steps {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .lb-timeline-steps::before { display: none; }

    /* Benefits */
    .lb-ben-step { grid-template-columns: 60px 1fr; gap: 20px; }
    .lb-ben-num { font-size: 48px; }
    .lb-ben-step::before { left: -12px; }

    /* Candidacy tabs */
    .lb-cand-tabs-row { max-width: 100%; }
    .lb-cand-panel { max-width: 100%; }

    /* Form grid */
    .lb-form-grid { grid-template-columns: 1fr; }
    .lb-form-photo { min-height: 300px; }

    /* CTA band */
    .lb-cta-outer { padding: 0 24px 64px; }
    .lb-cta-band {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 52px 44px;
    }
    .lb-cta-right { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
}

@media (max-width: 768px) {
    .lb-hero-left { padding: 96px 24px 64px; }
    body.has-announcement .lb-hero-left { padding-top: 126px; }
    .lb-hero-right { padding: 44px 20px; }

    .lb-hero-btns { flex-direction: column; align-items: flex-start; gap: 12px; }
    .lb-btn-primary { width: 100%; justify-content: center; }

    .lb-stats-inner { flex-direction: column; gap: 24px; align-items: center; }
    .lb-stat-item { flex: none; padding: 0; }
    .lb-stat-item + .lb-stat-item::before { display: none; }

    .lb-what-section,
    .lb-timeline-section,
    .lb-benefits-section,
    .lb-for-section,
    .lb-form-section,
    .lb-faq-section { padding: 64px 0; }
    .lb-diff-section { padding: 64px 0; }

    .lb-diff-cards { grid-template-columns: 1fr; }
    .lb-ingr-grid { grid-template-columns: 1fr; }
    .lb-cand-tabs-row { flex-direction: column; }
    .lb-cand-tab:first-child { border-radius: var(--radius-md, 20px) var(--radius-md, 20px) 0 0; border-right: 1.5px solid var(--lb-sand-deep); border-bottom: none; }
    .lb-cand-tab:last-child { border-radius: 0 0 var(--radius-md, 20px) var(--radius-md, 20px); border-left: 1.5px solid var(--lb-sand-deep); }
    .lb-cand-panel { padding: 24px 20px; }
    /* Banner */
    .lb-banner { height: 360px; }
    .lb-banner-content { padding: 40px 24px; }

    .lb-cta-outer { padding: 0 16px 56px; }
    .lb-cta-band {
        padding: 44px 28px;
        border-radius: var(--radius-md, 20px);
    }
    .lb-cta-right { flex-direction: column; align-items: stretch; }
    .lb-cta-btn-white { justify-content: center; }
}

@media (max-width: 480px) {
    .lb-hero-left { padding: 88px 16px 56px; }
    body.has-announcement .lb-hero-left { padding-top: 116px; }
    .lb-hero-right { padding: 36px 16px; }
    .lb-cta-band { padding: 36px 20px; }
}