.export-header {
    margin-top: 10px;
    padding: 120px 0 100px;
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
}

.header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(223,34,41,0.4));
    z-index: 1;
}

.export-header .container {
    position: relative;
    z-index: 2;
}

.export-header .header-content {
    max-width: 800px;
    margin: 0 auto;
    color: white;
}

.export-header .header-subtitle {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 15px;
    position: relative;
    padding: 0 15px;
}

.export-header .header-subtitle::before,
.export-header .header-subtitle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 1px;
    background: white;
    opacity: 0.5;
}

.export-header .header-subtitle::before {
    left: -30px;
}

.export-header .header-subtitle::after {
    right: -30px;
}

.export-header .header-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 25px;
    color: white;
}

.export-header .header-title .highlight {
    color: white;
    background: none;
    -webkit-text-fill-color: white;
}

.export-header .header-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 25px;
}

.export-header .header-divider span {
    height: 2px;
    background: white;
}

.export-header .header-divider span:nth-child(1),
.export-header .header-divider span:nth-child(3) {
    width: 60px;
    opacity: 0.3;
}

.export-header .header-divider span:nth-child(2) {
    width: 30px;
    opacity: 0.7;
}

.export-header .header-description {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.9);
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto;
}

/* Goal Section
   The photo used to sit under the whole card, so the copy fought the faces in
   it and the stat panel landed on top of them. Now the image is a scrim that
   fades out under the text and stays visible on the stats side, and every
   heading gets an explicit colour — design-system.css paints h2 with --ink,
   which is what made this title read near-black on the dark card. */
.goal-section {
    padding: 60px 0 40px;
    background: white;
}

.goal-card {
    position: relative;
    padding: 72px 56px;
    border-radius: 24px;
    color: #fff;
    background-size: cover;
    background-position: center right;
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45);
}

.goal-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, #17110f 0%, rgba(23, 17, 15, .92) 38%, rgba(23, 17, 15, .55) 68%, rgba(23, 17, 15, .35) 100%),
        linear-gradient(135deg, rgba(223, 34, 41, .42), transparent 60%);
}

.goal-card .row {
    position: relative;
    z-index: 2;
}

.goal-subtitle {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 18px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50px;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .92);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.goal-title {
    margin-bottom: 18px;
    color: #fff;
    font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
    font-weight: 700;
    line-height: 1.2;
}

.goal-title .highlight {
    position: relative;
    color: #ff8a8f;
}

/* the old full-width underline cut through the descenders */
.goal-title .highlight::after { content: none; }

.goal-text {
    max-width: 54ch;
    margin-bottom: 0;
    color: rgba(255, 255, 255, .88);
    font-size: 1.06rem;
    line-height: 1.75;
    opacity: 1;
}

.goal-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 28px 8px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 18px;
    background: rgba(12, 9, 8, .58);
    /* a real backdrop blur, not the half-transparent smear it was */
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
}

.goal-stat-item {
    padding: 0 18px;
    text-align: center;
}

.goal-stat-item + .goal-stat-item {
    border-left: 1px solid rgba(255, 255, 255, .16);
}

.goal-stat-icon {
    display: block;
    margin-bottom: 12px;
    color: #ff8a8f;
    font-size: 1.6rem;
}

.goal-stat-number {
    display: block;
    margin-bottom: 6px;
    color: #fff;
    font-size: clamp(1.4rem, 1.1rem + .9vw, 1.9rem);
    font-weight: 700;
    line-height: 1;
}

.goal-stat-label {
    display: block;
    color: rgba(255, 255, 255, .75);
    font-size: .74rem;
    letter-spacing: .1em;
    line-height: 1.5;
    text-transform: uppercase;
    opacity: 1;
}

/* Focus Section - Image Cards */
.focus-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--pink-light), #ffffff);
}

.focus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.focus-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid rgba(223, 34, 41, 0.1);
}

.focus-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(223, 34, 41, 0.15);
}

.focus-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.focus-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.focus-card:hover .focus-image img {
    transform: scale(1.1);
}

.focus-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.5));
}

.focus-content {
    padding: 25px;
}

.focus-content h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--dark-main);
    margin-bottom: 10px;
}

.focus-content p {
    color: var(--dark-soft);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.focus-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.focus-tag {
    background: var(--pink-light);
    color: var(--crimson);
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid rgba(223, 34, 41, 0.1);
}

/* Values Section - Icon Based (updated from images) */
.values-section {
    padding: 80px 0;
    background: white;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.value-card {
    background: white;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(223, 34, 41, 0.1);
    transition: all 0.3s ease;
}

.value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(223, 34, 41, 0.1);
    border-color: var(--crimson);
}

.value-icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: var(--pink-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.value-card:hover .value-icon-wrapper {
    background: var(--crimson);
}

.value-icon {
    font-size: 2.5rem;
    color: var(--crimson);
    transition: all 0.3s ease;
}

.value-card:hover .value-icon {
    color: white;
}

.value-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--crimson);
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.value-card p {
    color: var(--dark-soft);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Timeline Section - Visual Timeline */
.timeline-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #ffffff, var(--pink-light));
}

.timeline-visual {
    max-width: 900px;
    margin: 60px auto 0;
    position: relative;
}

.timeline-track {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(223, 34, 41, 0.1);
    border-radius: 4px;
    z-index: 1;
}

.timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 75%;
    height: 100%;
    background: linear-gradient(90deg, var(--crimson), var(--orchid));
    border-radius: 4px;
    animation: progressPulse 2s infinite;
}

@keyframes progressPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.timeline-items {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
}

.timeline-item {
    flex: 1;
    text-align: center;
    padding-top: 80px;
    position: relative;
}

.timeline-marker {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(223, 34, 41, 0.2);
    border: 3px solid var(--crimson);
    transition: all 0.3s ease;
}

.timeline-item:hover .timeline-marker {
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 15px 40px rgba(223, 34, 41, 0.3);
}

.timeline-marker i {
    font-size: 1.5rem;
    color: var(--crimson);
}

.timeline-content {
    padding: 0 15px;
}

.timeline-content h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--crimson);
    margin-bottom: 8px;
}

.timeline-content p {
    color: var(--dark-soft);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* Confidential Section with Image */
/* Confidential CTA
   Was a dark heading on a dark photo with a fixed background — unreadable on
   desktop and janky on mobile, where background-attachment: fixed is either
   ignored or expensive. Now a scrimmed panel with explicit text colours. */
.confidential-section {
    position: relative;
    padding: 84px 0;
    background-size: cover;
    background-position: center;
}

.confidential-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(18, 13, 12, .93) 0%, rgba(18, 13, 12, .82) 55%, rgba(18, 13, 12, .62) 100%),
        linear-gradient(135deg, rgba(223, 34, 41, .38), transparent 65%);
}

.confidential-section .container {
    position: relative;
    z-index: 2;
}

.confidential-card {
    position: relative;
    padding: 44px 46px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 22px;
    background: rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
}

.confidential-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 8px 20px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 50px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.badge-icon {
    font-size: .95rem;
    color: #ff8a8f;
}

.confidential-card h2 {
    margin-bottom: 14px;
    color: #fff;
    font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
    font-weight: 700;
    line-height: 1.2;
}

.confidential-card p {
    max-width: 60ch;
    margin-bottom: 0;
    color: rgba(255, 255, 255, .88);
    font-size: 1.05rem;
    line-height: 1.75;
    opacity: 1;
}

.confidential-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 34px;
    border: 2px solid #fff;
    border-radius: 50px;
    background: #fff;
    color: var(--crimson, #df2229);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .6);
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.confidential-btn:hover,
.confidential-btn:focus-visible {
    background: transparent;
    color: #fff;
    transform: translateY(-3px);
}

.btn-icon {
    font-size: 1rem;
    transition: color .25s ease;
}

.confidential-btn:hover .btn-icon,
.confidential-btn:focus-visible .btn-icon {
    color: #fff;
}

/* Responsive Design */
@media (max-width: 992px) {
    .goal-card {
        padding: 50px 30px;
    }
    
    .goal-stats {
        margin-top: 30px;
    }
    
    .timeline-items {
        flex-direction: column;
        gap: 40px;
    }
    
    .timeline-track {
        display: none;
    }
    
    .timeline-item {
        padding-top: 0;
        display: flex;
        align-items: center;
        gap: 30px;
        text-align: left;
    }
    
    .timeline-marker {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        flex-shrink: 0;
    }
    
    .timeline-item:hover .timeline-marker {
        transform: scale(1.1);
    }
}

@media (max-width: 768px) {
    .export-header {
        padding: 80px 0 60px;
    }
    
    .goal-stats {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px 12px;
    }

    .goal-stat-item + .goal-stat-item {
        padding-top: 24px;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .16);
    }

    .confidential-card {
        padding: 34px 26px;
        text-align: center;
    }
    
    .confidential-card .col-lg-4 {
        text-align: center !important;
        margin-top: 30px;
    }
    
    .confidential-btn {
        width: 100%;
        justify-content: center;
    }
    
    .timeline-item {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
}

@media (max-width: 576px) {
    .export-header {
        margin-top: 65px;
    }
    
    .goal-card {
        padding: 36px 24px;
    }
    
    .focus-grid {
        grid-template-columns: 1fr;
    }
    
    .values-grid {
        grid-template-columns: 1fr;
    }
}