@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --primary: #f26938;
    --primary-dark: #c95122;
    --deep-navy: #121933;
    --ink: #1d2440;
    --midnight: #090f2a;
    --gold: #f3b23a;
    --sand: #f7f5f1;
    --card: #ffffff;
    --text: #2a2f45;
    --muted: #5d6076;
    --border: rgba(16, 25, 55, 0.08);
    --shadow: 0 24px 60px rgba(16, 25, 55, 0.08);
    --radius-lg: 28px;
    --radius-md: 20px;
    --radius-sm: 12px;
    --transition: all 0.35s ease;
}

.icon {
    display: inline-block;
    inline-size: 1.25rem;
    block-size: auto;
    flex-shrink: 0;
}

.icon--sm {
    inline-size: 1rem;
}

.icon--md {
    inline-size: 1.5rem;
}

.icon--lg {
    inline-size: 2rem;
}

.icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0.45rem;
    background: rgba(18, 25, 51, 0.08);
}

.icon-chip--primary {
    background: rgba(242, 105, 56, 0.12);
}

.icon-chip--light {
    background: rgba(255, 255, 255, 0.14);
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background: var(--sand);
    color: var(--text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

body.nav-dim::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(9, 15, 42, 0.78);
    z-index: 900;
    pointer-events: none;
}

img, picture, video {
    display: block;
    max-width: 100%;
    border-radius: var(--radius-md);
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

button {
    font-family: inherit;
    border: none;
    cursor: pointer;
    background: none;
}

.container {
    width: min(1200px, calc(100% - 3rem));
    margin-inline: auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(18, 25, 51, 0.08);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    transition: var(--transition);
}

.site-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--gold));
    opacity: 0.8;
    pointer-events: none;
}

.site-header.scrolled {
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.site-header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    gap: 2rem;
}

.header-navigation {
    display: flex;
    align-items: center;
    gap: 2.2rem;
}

.nav-wrapper {
    display: flex;
    align-items: center;
}

.brand {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    text-decoration: none;
}

.brand img {
    width: 170px;
    height: auto;
    box-shadow: none;
    background: transparent;
    object-fit: contain;
    max-width: none;
}

.brand-slogan {
    display: none;
}

.nav-toggle {
    display: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.primary-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.primary-nav a {
    font-weight: 600;
    color: rgba(18, 25, 51, 0.78);
    letter-spacing: 0.045em;
    position: relative;
    padding-block: 0.4rem;
    white-space: nowrap;
}

.primary-nav .nav-pill > a {
    padding: 0.4rem 1.2rem;
    border-radius: 999px;
    border: 1px solid rgba(18, 25, 51, 0.18);
    background: rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.primary-nav .nav-pill > a::after {
    display: none;
}

.primary-nav .nav-pill > a:hover,
.primary-nav .nav-pill > a:focus {
    border-color: rgba(242, 105, 56, 0.5);
    color: var(--primary);
}

.primary-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.35rem;
    width: 100%;
    height: 3px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--primary), var(--gold));
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition);
}

.primary-nav a:hover,
.primary-nav a:focus,
.primary-nav a.active {
    color: var(--deep-navy);
}

.primary-nav a:hover::after,
.primary-nav a:focus::after,
.primary-nav a.active::after {
    transform: scaleX(1);
}

.header-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
}

.primary-button,
.ghost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.8rem;
    font-weight: 600;
    border-radius: 999px;
    font-size: 0.95rem;
    transition: var(--transition);
    min-height: 48px;
    white-space: nowrap;
}

.primary-button {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 12px 30px rgba(242, 105, 56, 0.28);
}

.primary-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(242, 105, 56, 0.35);
}

.ghost-button {
    border: 1px solid var(--border);
    color: var(--deep-navy);
    background: var(--card);
}

.ghost-button:hover {
    border-color: var(--deep-navy);
    color: var(--primary);
}

main {
    padding-top: 2rem;
}

section {
    padding-block: 5.5rem;
}

.hero-section {
    padding-top: 6rem;
    position: relative;
}
.hero-slogan {
    display: inline-block;
    margin-top: 0.8rem;
    font-size: 0.95rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(18, 25, 51, 0.62);
}

.hero-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem;
    align-items: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--primary);
    font-weight: 600;
}

.eyebrow::before {
    content: '';
    width: 36px;
    height: 2px;
    background: var(--primary);
    border-radius: 999px;
}

.hero-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.8rem, 3.6vw, 4rem);
    line-height: 1.1;
    margin: 1rem 0 1.5rem;
    color: var(--deep-navy);
}

.hero-content p {
    max-width: 32rem;
    color: var(--muted);
    margin-bottom: 2.5rem;
    font-size: 1.05rem;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.hero-meta-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    color: var(--muted);
}

.hero-meta-item .icon-chip {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(242, 105, 56, 0.12);
    display: grid;
    place-items: center;
}

.hero-meta-item .icon {
    inline-size: 22px;
}

.hero-media {
    position: relative;
    padding: 2rem;
}

.hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, rgba(18, 25, 51, 0.92), rgba(18, 25, 51, 0));
    transform: translate(18px, 18px);
    z-index: -1;
}

.hero-media figure {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 70px rgba(13, 19, 42, 0.18);
}

.hero-media .floating-card {
    position: absolute;
    display: grid;
    gap: 0.45rem;
    padding: 1rem 1.2rem;
    border-radius: 18px;
    background: var(--card);
    box-shadow: 0 20px 45px rgba(13, 19, 42, 0.15);
    bottom: 8%;
    left: -6%;
    min-width: 200px;
}

.floating-card span {
    font-size: 0.85rem;
    color: var(--muted);
}

.floating-card strong {
    font-size: 1.3rem;
    color: var(--deep-navy);
}

.stats-ribbon {
    background: linear-gradient(135deg, #10152b, #1c2c4b);
    color: #fff;
    padding: 3rem 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
}

.stat-card {
    text-align: center;
    padding: 1.8rem 1.5rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.stat-card h3 {
    font-size: 2.2rem;
    font-family: 'Playfair Display', serif;
    margin: 0;
}

.stat-card span {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
}

.section-heading {
    text-align: center;
    margin-bottom: 3.5rem;
}

.section-heading h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.2rem, 2.6vw, 3rem);
    margin: 0.85rem auto 1rem;
    color: var(--deep-navy);
    max-width: 36rem;
}

.section-heading p {
    max-width: 42rem;
    margin: 0 auto;
    color: var(--muted);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.8rem;
}

.feature-card {
    background: var(--card);
    border-radius: var(--radius-md);
    padding: 2.25rem;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.feature-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(242, 105, 56, 0.12), transparent 55%);
}

.feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(242, 105, 56, 0.12);
    display: grid;
    place-items: center;
    margin-bottom: 1.2rem;
}

.feature-icon .icon {
    inline-size: 28px;
}

.feature-card h3 {
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
    margin-bottom: 0.65rem;
}

.feature-card p {
    color: var(--muted);
    margin-bottom: 0;
}

.live-banner {
    background: var(--deep-navy);
    color: #fff;
    padding-block: 3.5rem;
    position: relative;
    overflow: hidden;
}

.live-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(243, 178, 58, 0.22), transparent 55%);
}

.live-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    align-items: center;
    z-index: 1;
}

.live-banner h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    margin-bottom: 0.75rem;
}

.live-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.live-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    font-weight: 500;
}

.live-cta p {
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.75);
    max-width: 22rem;
}
.sermon-section {
    padding-block: 5rem;
}

.sermon-list {
    display: grid;
    gap: 1.8rem;
}

.sermon-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: center;
    background: var(--card);
    border-radius: var(--radius-md);
    padding: 1.6rem;
    box-shadow: var(--shadow);
}

.sermon-card img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.sermon-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
}

.sermon-card h3 {
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
    margin: 0.5rem 0;
}

.sermon-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--primary);
}

.donation-progress {
    display: flex;
    gap: 1.8rem;
    font-weight: 600;
    margin: 1.2rem 0 0.6rem;
}

.donate-card {
    background: linear-gradient(135deg, rgba(243, 178, 58, 0.18), rgba(242, 105, 56, 0.18));
}

.donate-card .ghost-button {
    border-color: rgba(29, 36, 64, 0.35);
    color: var(--deep-navy);
    background: #fff;
}

.event-location {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.4rem 0 0.8rem;
}

.blog-section {
    padding-block: 5rem;
}

.blog-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

.blog-feature {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 2.4rem;
    box-shadow: var(--shadow);
    display: grid;
    gap: 1.5rem;
}

.blog-feature img {
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.blog-list {
    display: grid;
    gap: 1.5rem;
}

.blog-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1rem;
    background: var(--card);
    border-radius: var(--radius-md);
    padding: 1.2rem;
    box-shadow: var(--shadow);
    align-items: center;
}

.blog-card img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.blog-card h3 {
    margin: 0 0 0.3rem;
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
}

.blog-meta {
    font-size: 0.85rem;
    color: var(--muted);
    display: block;
    margin-bottom: 0.6rem;
}

.outreach-gallery .gallery-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
    gap: 2.5rem;
    margin-bottom: 3rem;
    align-items: start;
}

.photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.2rem;
}

.photo-item {
    background: var(--card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: grid;
    gap: 0.6rem;
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.photo-item figcaption {
    padding: 0 1rem 1rem;
    font-size: 0.95rem;
    color: var(--muted);
}

.gallery-note {
    background: var(--card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    padding: 2.2rem;
}

.gallery-note h3 {
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
    margin-top: 0;
}

.gallery-note ul {
    margin: 1.2rem 0 0;
    padding-left: 1.2rem;
    color: var(--muted);
    line-height: 1.7;
}

.gallery-note code {
    font-family: 'Poppins', sans-serif;
    background: rgba(29, 36, 64, 0.08);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

.video-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.8rem;
}

.video-card {
    background: var(--card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.video-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border: none;
}

.video-content {
    padding: 1.8rem;
    display: grid;
    gap: 0.6rem;
}

.video-content h3 {
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
    margin: 0;
}

.video-content p {
    margin: 0 0 0.6rem;
    color: var(--muted);
}

.video-trigger {
    align-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.6rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-weight: 600;
    transition: var(--transition);
}

.video-trigger:hover,
.video-trigger:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(242, 105, 56, 0.25);
}

.video-trigger .icon {
    inline-size: 1rem;
}

.photo-lightbox[hidden] {
    display: none;
}

.photo-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(9, 15, 42, 0.78);
    backdrop-filter: blur(6px);
    display: grid;
    place-items: center;
    padding: 2rem;
    z-index: 2100;
}

.photo-lightbox__dialog {
    width: min(960px, 100%);
    background: var(--card);
    border-radius: var(--radius-lg);
    box-shadow: 0 40px 80px rgba(15, 23, 42, 0.3);
    position: relative;
    padding: 1.8rem 4.5rem;
    display: grid;
    gap: 1.5rem;
}

.photo-lightbox__content {
    display: grid;
    gap: 0.75rem;
    justify-items: center;
}

.photo-lightbox__content img {
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
    background: #000;
}

.photo-lightbox__content p {
    margin: 0;
    color: var(--muted);
    text-align: center;
    font-size: 0.95rem;
}

.photo-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(18, 25, 51, 0.12);
    color: var(--deep-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition);
}

.photo-nav.prev {
    left: 1.2rem;
}

.photo-nav.next {
    right: 1.2rem;
}

.photo-nav:hover,
.photo-nav:focus-visible {
    background: rgba(242, 105, 56, 0.2);
    color: var(--primary);
}

.photo-close {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
}

.video-lightbox[hidden] {
    display: none;
}

.video-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(9, 15, 42, 0.72);
    backdrop-filter: blur(6px);
    display: grid;
    place-items: center;
    padding: 2rem;
    z-index: 2000;
}

.video-lightbox__dialog {
    width: min(900px, 100%);
    background: var(--card);
    border-radius: var(--radius-lg);
    box-shadow: 0 40px 80px rgba(15, 23, 42, 0.3);
    padding: 1.5rem 1.5rem 2rem;
    position: relative;
    display: grid;
    gap: 1rem;
}

.video-lightbox video {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    max-height: 70vh;
    background: #000;
}

.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(29, 36, 64, 0.08);
    color: var(--deep-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition);
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
    background: rgba(242, 105, 56, 0.2);
    color: var(--primary);
}

body.modal-open {
    overflow: hidden;
}

.join-popup {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 2200;
}

.join-popup.visible {
    display: block;
}

.join-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(9, 15, 42, 0.65);
    backdrop-filter: blur(4px);
}

.join-popup__dialog {
    position: relative;
    width: min(800px, calc(100% - 2.5rem));
    margin: 6vh auto 0 auto;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(9, 15, 42, 0.38);
    background: linear-gradient(130deg, rgba(255, 255, 255, 0.98), rgba(247, 245, 241, 0.94));
    display: grid;
    grid-template-columns: 320px 1fr;
}

.join-popup__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.join-popup__body {
    padding: 2.5rem 2.8rem;
    display: grid;
    gap: 1.2rem;
}

.join-popup__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
}

.join-popup__body h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 2.2vw, 2.2rem);
    color: var(--deep-navy);
}

.join-popup__body p {
    margin: 0;
    color: var(--muted);
}

.join-popup__list {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--muted);
    line-height: 1.75;
}

.join-popup__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.join-popup__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(18, 25, 51, 0.08);
    color: var(--deep-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition);
    z-index: 1;
}

.join-popup__close:hover,
.join-popup__close:focus-visible {
    background: rgba(242, 105, 56, 0.2);
    color: var(--primary);
}

@media (max-width: 900px) {
    .join-popup__dialog {
        grid-template-columns: 1fr;
        margin-top: 8vh;
    }

    .join-popup__body {
        padding: 2rem 2.2rem;
    }

    .join-popup__actions {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 520px) {
    .join-popup__dialog {
        margin-top: 4vh;
    }

    .join-popup__body {
        padding: 1.8rem;
    }

    .join-popup__close {
        top: 0.75rem;
        right: 0.75rem;
    }
}
.join-hero {
    position: relative;
    color: #fff;
    padding: clamp(5rem, 12vw, 9rem) 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.join-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2.5rem, 6vw, 4rem);
    align-items: center;
}

.join-hero-copy {
    display: grid;
    gap: 1.4rem;
    max-width: 560px;
}

.join-hero-copy h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.6rem, 4.6vw, 3.6rem);
}

.join-hero-copy p {
    color: rgba(255, 255, 255, 0.84);
    font-size: 1.05rem;
    line-height: 1.8;
}

.join-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.join-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 1.2rem;
    border-radius: 999px;
    background: rgba(243, 178, 58, 0.22);
    color: #fff;
    font-weight: 600;
    font-size: 0.92rem;
    backdrop-filter: blur(2px);
}

.join-hero-badge .icon {
    inline-size: 1.1rem;
}

.join-hero-panel {
    position: relative;
    display: grid;
    justify-items: end;
}

.panel-image {
    position: relative;
    width: min(430px, 100%);
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(9, 15, 42, 0.45);
}

.panel-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18, 25, 51, 0.05) 0%, rgba(18, 25, 51, 0.55) 100%);
}

.panel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.panel-card {
    position: absolute;
    left: -2.2rem;
    bottom: -2.6rem;
    width: min(340px, calc(100% - 1rem));
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 245, 241, 0.92));
    border-radius: 24px;
    padding: 1.8rem 2rem;
    box-shadow: 0 35px 70px rgba(18, 25, 51, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.6);
    display: grid;
    gap: 0.8rem;
    color: var(--deep-navy);
}

.panel-card .panel-label {
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary);
}

.panel-card h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
}

.panel-card p {
    margin: 0;
    color: #5d6076;
}

.panel-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.55rem;
}

.panel-card li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #5d6076;
    font-weight: 500;
}

.panel-card li .icon-chip {
    width: 34px;
    height: 34px;
}

.panel-card li .icon {
    inline-size: 18px;
}

.join-highlights {
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(247, 245, 241, 0.72) 100%);
    border-top: 1px solid rgba(29, 36, 64, 0.06);
}

.join-highlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.8rem;
    margin-top: 2.4rem;
}

.highlight-card {
    background: #fff;
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 24px 48px rgba(18, 25, 51, 0.08);
    border: 1px solid rgba(29, 36, 64, 0.06);
    display: grid;
    gap: 0.8rem;
}

.highlight-card h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
}

.highlight-card p {
    margin: 0;
    color: var(--muted);
}

.step-number {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: var(--primary);
    font-weight: 600;
}

.highlight-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    background: rgba(242, 105, 56, 0.1);
    color: var(--primary);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.join-support-callout {
    margin-top: 2.6rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    background: rgba(18, 25, 51, 0.06);
    border: 1px solid rgba(18, 25, 51, 0.08);
    border-radius: 20px;
    padding: 1.2rem 1.6rem;
    color: var(--deep-navy);
}

.join-support-callout .icon {
    inline-size: 1.8rem;
}

.join-support-callout p {
    margin: 0.2rem 0 0;
    color: var(--muted);
}

.join-form-section {
    position: relative;
    padding: clamp(5rem, 11vw, 7rem) 0;
    background: linear-gradient(135deg, rgba(243, 178, 58, 0.14), rgba(18, 25, 51, 0.08));
}

.join-form-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.4), transparent 45%, rgba(255, 255, 255, 0.3));
    pointer-events: none;
}

.join-form-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 5vw, 3rem);
    align-items: stretch;
    z-index: 1;
}

.form-overview {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 32px;
    box-shadow: 0 30px 70px rgba(18, 25, 51, 0.18);
    padding: clamp(2.2rem, 5vw, 2.8rem);
    display: grid;
    gap: 1.4rem;
}

.form-overview h2 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
}

.form-overview p {
    margin: 0;
    color: var(--muted);
}

.form-benefits {
    display: grid;
    gap: 1.2rem;
    margin-top: 0.6rem;
}

.benefit {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(243, 178, 58, 0.22);
    border-radius: 18px;
    padding: 1rem 1.2rem;
    box-shadow: 0 18px 30px rgba(18, 25, 51, 0.08);
}

.benefit .icon-chip {
    width: 42px;
    height: 42px;
}

.benefit .icon {
    inline-size: 20px;
}

.benefit h4 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
    font-size: 1.1rem;
}

.benefit p {
    margin: 0.4rem 0 0;
    color: var(--muted);
}

.support-card {
    margin-top: 0.6rem;
    display: grid;
    gap: 0.35rem;
    align-content: start;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    padding: 1.4rem 1.6rem;
    border-radius: 20px;
}

.support-card .support-label {
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: 0.7rem;
    font-weight: 600;
}

.support-card a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.support-card a:hover,
.support-card a:focus-visible {
    text-decoration: underline;
}

.intake-form-card {
    background: rgba(255, 255, 255, 0.96);
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 40px 80px rgba(18, 25, 51, 0.18);
    padding: clamp(2.4rem, 5vw, 3.2rem);
    display: grid;
    gap: 1.8rem;
    backdrop-filter: blur(6px);
}

.form-section {
    display: grid;
    gap: 1.4rem;
    padding: 1.6rem;
    border-radius: 24px;
    background: rgba(248, 247, 244, 0.7);
    border: 1px solid rgba(29, 36, 64, 0.06);
}

.form-section + .form-section {
    margin-top: 0.8rem;
}

.form-section__header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.form-section__header h3 {
    margin: 0 0 0.25rem 0;
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
    font-size: 1.3rem;
}

.form-section__header p {
    margin: 0;
    color: var(--muted);
    font-weight: 500;
}

.section-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(242, 105, 56, 0.22), rgba(243, 178, 58, 0.2));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.2rem;
}

.form-heading h2 {
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
    margin-bottom: 0.35rem;
}

.form-heading p {
    margin: 0;
    color: var(--muted);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.4rem;
}

.form-field {
    display: grid;
    gap: 0.55rem;
    font-weight: 600;
    color: var(--deep-navy);
}

.form-field span {
    font-size: 0.96rem;
}

.select-wrapper {
    position: relative;
}

.select-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, rgba(29, 36, 64, 0.4) 50%),
        linear-gradient(135deg, rgba(29, 36, 64, 0.4) 50%, transparent 50%);
    background-position: calc(100% - 22px) calc(50% - 4px), calc(100% - 17px) calc(50% - 4px);
    background-size: 7px 7px;
    background-repeat: no-repeat;
    padding-right: 2.5rem;
}

.intake-form-card label,
.form-fieldset {
    display: grid;
    gap: 0.6rem;
    font-weight: 600;
    color: var(--deep-navy);
}

.intake-form-card input,
.intake-form-card select,
.intake-form-card textarea {
    border: 1px solid rgba(29, 36, 64, 0.14);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    font: inherit;
    color: var(--deep-navy);
    background: rgba(255, 255, 255, 0.96);
    transition: var(--transition);
}

.intake-form-card input:focus,
.intake-form-card select:focus,
.intake-form-card textarea:focus {
    border-color: rgba(242, 105, 56, 0.45);
    box-shadow: 0 0 0 3px rgba(242, 105, 56, 0.18);
    outline: none;
}

.intake-form-card textarea {
    resize: vertical;
}

.form-fieldset {
    border: 1px solid rgba(29, 36, 64, 0.12);
    border-radius: 20px;
    padding: 1.6rem;
    background: rgba(249, 247, 244, 0.6);
}

.form-fieldset legend {
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0 0.4rem;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.8rem 1.2rem;
    color: var(--muted);
    font-weight: 500;
}

.checkbox-grid input {
    margin-right: 0.5rem;
}

.form-block {
    display: grid;
    gap: 0.6rem;
    font-weight: 600;
    color: var(--deep-navy);
}

.form-block span {
    font-size: 0.96rem;
}

.consent-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--muted);
    font-weight: 500;
}

.consent-row input {
    margin-top: 0.2rem;
}

.form-feedback {
    display: flex;
    gap: 1rem;
    align-items: center;
    border-radius: 18px;
    padding: 1.2rem 1.4rem;
    background: rgba(76, 175, 80, 0.12);
    color: var(--deep-navy);
}

.form-feedback[hidden] {
    display: none !important;
}

.form-feedback .icon {
    inline-size: 1.6rem;
}

.form-feedback p {
    margin: 0.2rem 0 0;
    color: var(--muted);
    font-weight: 500;
}

.form-feedback--error {
    background: rgba(244, 67, 54, 0.12);
}

.form-feedback--error .icon {
    filter: hue-rotate(-20deg);
}

.contact-form .form-feedback {
    margin-top: 1.2rem;
}

.form-guard {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-guard input[type="text"] {
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#join-intake-form,
#contactForm {
    position: relative;
}

.contact-section {
    background: linear-gradient(115deg, rgba(18, 25, 51, 0.04), rgba(242, 105, 56, 0.07));
}

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: stretch;
}

.contact-form-card {
    position: relative;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 4vw, 3rem);
    box-shadow: 0 38px 80px rgba(18, 25, 51, 0.14);
    overflow: hidden;
}

.contact-form-card::before {
    content: '';
    position: absolute;
    inset: -40% auto auto -25%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(242, 105, 56, 0.18), transparent 70%);
    transform: rotate(12deg);
    pointer-events: none;
}

.contact-form-card form {
    display: grid;
    gap: 1.6rem;
    position: relative;
}

.contact-form__header {
    display: grid;
    gap: 0.8rem;
    margin-bottom: 0.4rem;
}

.contact-form__header h2 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
}

.contact-form__header p {
    margin: 0;
    color: var(--muted);
    max-width: 32rem;
}

.contact-form__grid {
    display: grid;
    gap: 1.2rem 1.4rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.form-field--full {
    grid-column: 1 / -1;
}

.contact-form textarea {
    min-height: 170px;
    resize: vertical;
}

.contact-form__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    align-items: center;
    justify-content: space-between;
}

.form-captcha {
    background: rgba(18, 25, 51, 0.05);
    border-radius: var(--radius-md);
    padding: 1rem 1.2rem;
    display: grid;
    gap: 0.8rem;
    min-width: 260px;
}

.form-captcha__label {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--deep-navy);
}

.form-captcha__label .icon {
    inline-size: 1.3rem;
}

.form-captcha__label .icon-chip {
    width: 44px;
    height: 44px;
}

.form-captcha__label strong {
    display: block;
}

.form-captcha__label small {
    display: block;
    color: var(--muted);
    font-weight: 500;
}

.form-captcha__controls {
    display: grid;
    gap: 0.6rem;
}

.captcha-question {
    font-weight: 600;
    color: var(--deep-navy);
}

.captcha-input {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.captcha-input input {
    width: 110px;
    padding: 0.65rem 0.8rem;
    border: 1px solid rgba(18, 25, 51, 0.18);
    border-radius: 12px;
    background: #fff;
    font-weight: 600;
}

.captcha-refresh {
    border-radius: 12px;
    padding: 0.55rem 0.9rem;
}

.contact-details-card {
    background: rgba(18, 25, 51, 0.92);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 4vw, 3rem);
    box-shadow: 0 30px 70px rgba(18, 25, 51, 0.22);
    display: grid;
    gap: 1.6rem;
}

.contact-details__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contact-details-card h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
}

.contact-details-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
}

.contact-details__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.1rem;
}

.contact-details__list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: center;
}

.contact-details__list .icon-chip {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.18);
}

.contact-details__list .icon {
    inline-size: 1.3rem;
}

.contact-details__list a {
    color: #fff;
    font-weight: 600;
    display: inline-block;
    margin-top: 0.2rem;
}

.contact-details__list a:hover,
.contact-details__list a:focus-visible {
    text-decoration: underline;
}

.contact-details__divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.18);
}

.contact-support h4 {
    margin: 0 0 0.4rem;
    font-family: 'Playfair Display', serif;
}

.contact-socials {
    display: flex;
    gap: 0.8rem;
}

.contact-socials a {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    transition: var(--transition);
}

.contact-socials .icon {
    inline-size: 1.4rem;
}

.contact-socials a:hover,
.contact-socials a:focus-visible {
    background: var(--primary);
    color: #fff;
}

.intake-form-card .form-captcha {
    background: rgba(242, 105, 56, 0.08);
}

@media (max-width: 960px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .contact-form__footer {
        align-items: stretch;
    }

    .contact-form__footer .primary-button {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 640px) {
    .captcha-input input {
        width: 100px;
    }

    .contact-form-card {
        padding: 2rem 1.5rem;
    }

    .contact-details-card {
        padding: 2rem 1.6rem;
    }
}

.join-stories {
    background: linear-gradient(120deg, rgba(229, 233, 248, 0.25), rgba(243, 178, 58, 0.12));
    border-top: 1px solid rgba(18, 25, 51, 0.06);
}

.story-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.8rem;
    margin-top: 2.4rem;
}

.story-card {
    position: relative;
    background: linear-gradient(135deg, #fff, rgba(247, 245, 241, 0.9));
    border-radius: 24px;
    padding: 2.2rem;
    box-shadow: 0 28px 56px rgba(18, 25, 51, 0.1);
    display: grid;
    gap: 1.2rem;
    color: var(--deep-navy);
}

.story-card::after {
    content: "\f10d";
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 2.6rem;
    color: rgba(243, 178, 58, 0.28);
    position: absolute;
    top: 1.2rem;
    right: 1.6rem;
}

.story-card p {
    margin: 0;
    color: #5d6076;
    font-size: 1.02rem;
    line-height: 1.8;
}

.story-card--accent {
    background: linear-gradient(135deg, rgba(18, 25, 51, 0.92), rgba(18, 25, 51, 0.82));
    color: #fff;
}

.story-card--accent p {
    color: rgba(255, 255, 255, 0.86);
}

.story-card--accent::after {
    color: rgba(255, 255, 255, 0.2);
}

.story-author {
    font-weight: 700;
    font-size: 1.05rem;
}

.story-role {
    color: rgba(18, 25, 51, 0.6);
    font-size: 0.9rem;
}

.story-card--accent .story-role {
    color: rgba(255, 255, 255, 0.7);
}

.testimony-hero {
    position: relative;
    padding: clamp(5rem, 12vw, 8rem) 0;
    background: linear-gradient(120deg, rgba(18, 25, 51, 0.9), rgba(18, 25, 51, 0.65)), url('../images/testimonial pic.png') center/cover;
    color: #fff;
}

.testimony-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2.2rem, 5vw, 3.5rem);
    align-items: center;
}

.testimony-hero-copy {
    display: grid;
    gap: 1.4rem;
    max-width: 560px;
}

.testimony-hero-copy h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.6rem, 4.6vw, 3.4rem);
}

.testimony-hero-copy p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.05rem;
    line-height: 1.8;
}

.testimony-hero-media {
    position: relative;
    display: grid;
    justify-items: center;
}

.testimony-hero-card {
    max-width: 360px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 28px;
    padding: 2rem 2.2rem;
    color: var(--deep-navy);
    box-shadow: 0 38px 70px rgba(18, 25, 51, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.65);
    display: grid;
    gap: 0.8rem;
    text-align: left;
}

.testimony-hero-card h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
}

.testimony-hero-card p {
    margin: 0;
    color: #5d6076;
}

.hero-author {
    font-weight: 600;
    color: var(--primary);
}

.testimony-hero-ring {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 1px solid rgba(243, 178, 58, 0.4);
    transform: translateY(-20px);
    opacity: 0.7;
}

.testimony-video-section {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 245, 241, 0.85));
}

.testimony-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(1.6rem, 4vw, 2.4rem);
}

.testimony-video-card {
    background: #fff;
    border-radius: 26px;
    border: 1px solid rgba(29, 36, 64, 0.04);
    box-shadow: 0 24px 60px rgba(18, 25, 51, 0.12);
    overflow: hidden;
    display: grid;
}

.testimony-video-wrapper {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}

.testimony-video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.testimony-video-content {
    padding: 1.8rem;
    display: grid;
    gap: 0.8rem;
}

.story-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: rgba(242, 105, 56, 0.15);
    color: var(--primary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.testimony-video-content h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
}

.testimony-video-content p {
    margin: 0;
    color: var(--muted);
}

.story-author {
    font-weight: 600;
    color: var(--deep-navy);
}

.testimony-carousel {
    background: linear-gradient(120deg, rgba(18, 25, 51, 0.82), rgba(18, 25, 51, 0.68));
    color: #fff;
    position: relative;
    overflow: hidden;
}

.testimony-carousel .section-heading p {
    color: rgba(255, 255, 255, 0.78);
}

.carousel-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 320px);
    gap: 1.6rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
}

.carousel-track::-webkit-scrollbar {
    height: 6px;
}

.carousel-track::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 999px;
}

.carousel-track {
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.carousel-card {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 1.8rem;
    display: grid;
    gap: 1.2rem;
    scroll-snap-align: start;
}

.carousel-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.8;
}

.carousel-author {
    font-weight: 700;
    color: #f3b23a;
}

.carousel-controls {
    margin-top: 1.8rem;
    display: flex;
    gap: 0.8rem;
    justify-content: flex-end;
}

.carousel-button {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.carousel-button:hover,
.carousel-button:focus-visible {
    background: rgba(255, 255, 255, 0.25);
}

.carousel-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.testimony-callout {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(243, 178, 58, 0.16));
}

.testimony-callout-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(1.8rem, 4vw, 2.4rem);
    align-items: center;
}

.callout-copy {
    display: grid;
    gap: 1rem;
}

.callout-copy h2 {
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
}

.callout-copy p {
    margin: 0;
    color: var(--muted);
}

.callout-card {
    background: #fff;
    border-radius: 26px;
    box-shadow: 0 28px 60px rgba(18, 25, 51, 0.12);
    padding: 2rem;
    display: grid;
    gap: 1rem;
}

.callout-card h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
}

.callout-card ul {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--muted);
    line-height: 1.8;
}

@media (max-width: 1080px) {
    .testimony-hero-inner,
    .testimony-callout-inner {
        grid-template-columns: 1fr;
    }

    .testimony-hero-media {
        justify-items: start;
    }

    .testimony-hero-card {
        margin-top: 1.2rem;
    }
}

@media (max-width: 720px) {
    .testimony-hero {
        padding: 4.5rem 0;
    }

    .carousel-track {
        grid-auto-columns: minmax(240px, 1fr);
    }

    .carousel-controls {
        justify-content: center;
    }

    .testimony-callout-inner {
        gap: 1.6rem;
    }
}

.portal-hero {
    position: relative;
    padding: clamp(4.5rem, 10vw, 7rem) 0;
    background: linear-gradient(135deg, rgba(18, 25, 51, 0.9), rgba(18, 25, 51, 0.7));
    color: #fff;
    text-align: center;
}

.portal-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.6rem, 4.4vw, 3.4rem);
    margin-bottom: 1rem;
}

.portal-hero p {
    max-width: 680px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.05rem;
    line-height: 1.8;
}

.portal-wrapper {
    padding: clamp(4rem, 9vw, 6rem) 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(243, 178, 58, 0.08));
}

.portal-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 5vw, 3.2rem);
    align-items: start;
}

.portal-card {
    background: rgba(255, 255, 255, 0.94);
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 32px 70px rgba(18, 25, 51, 0.16);
    padding: clamp(2rem, 5vw, 2.6rem);
    display: grid;
    gap: 1.6rem;
}

.portal-card h2 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
}

.portal-card p {
    margin: 0;
    color: var(--muted);
}

.portal-login-form {
    display: grid;
    gap: 1.1rem;
}

.portal-login-form label {
    display: grid;
    gap: 0.55rem;
    font-weight: 600;
    color: var(--deep-navy);
}

.portal-login-form input {
    border: 1px solid rgba(29, 36, 64, 0.16);
    border-radius: var(--radius-md);
    padding: 0.9rem 1rem;
    font: inherit;
    color: var(--deep-navy);
    background: rgba(255, 255, 255, 0.96);
    transition: var(--transition);
}

.portal-login-form input:focus {
    border-color: rgba(242, 105, 56, 0.45);
    box-shadow: 0 0 0 3px rgba(242, 105, 56, 0.18);
    outline: none;
}

.portal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
}

.portal-status {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    border-radius: 16px;
    padding: 0.85rem 1rem;
    font-weight: 500;
}

.portal-status[data-variant="info"] {
    background: rgba(18, 25, 51, 0.08);
    color: var(--deep-navy);
}

.portal-status[data-variant="success"] {
    background: rgba(76, 175, 80, 0.12);
    color: var(--deep-navy);
}

.portal-status[data-variant="error"] {
    background: rgba(244, 67, 54, 0.12);
    color: #c62828;
}

.portal-summary {
    display: grid;
    gap: 1.4rem;
    color: var(--muted);
}

.portal-summary h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
    font-size: 1.6rem;
}

.portal-summary ul {
    margin: 0;
    padding-left: 1.2rem;
    line-height: 1.8;
}

.portal-table-section {
    margin-top: clamp(3rem, 7vw, 4rem);
}

.portal-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.6rem;
}

.portal-table-header h2 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
}

.portal-table-header .primary-button {
    padding: 0.65rem 1.6rem;
}

.table-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(29, 36, 64, 0.08);
    border-radius: var(--radius-md);
    background: rgba(29, 36, 64, 0.04);
}

.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.table-actions .ghost-button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.table-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.table-pagination button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(29, 36, 64, 0.12);
    background: #fff;
    color: var(--deep-navy);
    transition: var(--transition);
}

.table-pagination button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.table-pagination button:not(:disabled):hover {
    border-color: rgba(242, 105, 56, 0.45);
    color: var(--primary);
}

.table-page-info {
    font-weight: 600;
    color: var(--deep-navy);
}

.table-page-size {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
    color: var(--muted);
}

.table-page-size select {
    border: 1px solid rgba(29, 36, 64, 0.16);
    border-radius: var(--radius-sm);
    padding: 0.35rem 1.8rem 0.35rem 0.6rem;
    font: inherit;
    color: var(--deep-navy);
    background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%23121933"><path d="M5.23 7.21a.75.75 0 011.06.02L10 11l3.71-3.77a.75.75 0 111.08 1.04l-4.24 4.3a.75.75 0 01-1.08 0l-4.24-4.3a.75.75 0 01.02-1.06z"/></svg>') no-repeat right 0.6rem center/10px;
    appearance: none;
    min-width: 84px;
}

.table-page-size select:focus {
    border-color: rgba(242, 105, 56, 0.45);
    box-shadow: 0 0 0 3px rgba(242, 105, 56, 0.18);
    outline: none;
}

.settings-description {
    margin: 0 0 1.2rem;
    color: var(--muted);
}

.portal-settings-form {
    display: grid;
    gap: 1.2rem;
}

.portal-settings-form label {
    display: grid;
    gap: 0.6rem;
    font-weight: 600;
    color: var(--deep-navy);
}

.portal-settings-form textarea,
.portal-settings-form input[type="email"] {
    border: 1px solid rgba(29, 36, 64, 0.16);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    font: inherit;
    color: var(--deep-navy);
    background: rgba(255, 255, 255, 0.96);
    transition: var(--transition);
}

.portal-settings-form textarea:focus,
.portal-settings-form input[type="email"]:focus {
    border-color: rgba(242, 105, 56, 0.45);
    box-shadow: 0 0 0 3px rgba(242, 105, 56, 0.18);
    outline: none;
}

.portal-settings-form textarea {
    min-height: 96px;
    resize: vertical;
}

.form-hint {
    font-weight: 400;
    color: var(--muted);
    font-size: 0.85rem;
}

@media (max-width: 960px) {
    .portal-grid {
        grid-template-columns: 1fr;
    }

    .portal-summary {
        order: -1;
    }
}

@media (max-width: 600px) {
    .portal-card {
        padding: 1.6rem;
    }

    .portal-table-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .table-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .table-pagination {
        justify-content: space-between;
        width: 100%;
    }

    .events-primary__insights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .events-primary__meta li {
        align-items: flex-start;
        gap: 0.6rem;
    }
}

@media (max-width: 540px) {
    .events-primary__content {
        padding: 1.6rem;
    }

    .events-badge {
        top: 1rem;
        left: 1rem;
        font-size: 0.75rem;
    }

    .events-primary__insights {
        grid-template-columns: 1fr;
    }

    .events-primary__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .events-secondary__card {
        padding: 1.8rem;
    }

    .events-quicklist li {
        grid-template-columns: minmax(0, 1fr);
    }

    .events-quicklist strong {
        margin-bottom: 0.35rem;
    }

    .events-secondary__card--media .event-highlight {
        padding: 1.4rem;
    }
}

@media (max-width: 1080px) {
    .join-hero-grid {
        grid-template-columns: 1fr;
    }

    .join-hero-panel {
        justify-items: start;
    }

    .panel-card {
        position: relative;
        left: 0;
        bottom: -1.2rem;
        margin-top: -1.2rem;
        width: min(360px, 100%);
    }

    .join-form-wrapper {
        grid-template-columns: 1fr;
    }

    .form-overview {
        order: 2;
    }
}

@media (max-width: 720px) {
    .join-hero {
        padding: 4.5rem 0;
    }

    .panel-card {
        margin-top: 1rem;
    }

    .join-support-callout {
        flex-direction: column;
        align-items: flex-start;
    }

    .join-form-wrapper {
        gap: 2rem;
    }

    .form-overview,
    .intake-form-card {
        padding: 2rem;
    }
}

@media (max-width: 600px) {
    .form-fieldset {
        padding: 1.2rem;
    }

    .checkbox-grid {
        grid-template-columns: 1fr;
    }

    .consent-row {
        flex-direction: column;
    }

    .form-section {
        padding: 1.2rem;
    }
}

.intake-table-card {
    background: var(--card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 2.2rem;
    display: grid;
    gap: 1.4rem;
}

.table-scroll {
    overflow-x: auto;
}

.intake-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}

.intake-table th,
.intake-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(29, 36, 64, 0.08);
    text-align: left;
    color: var(--muted);
    font-size: 0.95rem;
}

.intake-table th {
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
    font-weight: 600;
    background: rgba(29, 36, 64, 0.04);
}

.contact-table td,
.contact-table th {
    white-space: normal;
}

.contact-table td {
    vertical-align: top;
}

.contact-table td.message-cell {
    max-width: 420px;
    line-height: 1.6;
    word-break: break-word;
}

.intake-table tbody tr:hover {
    background: rgba(242, 105, 56, 0.06);
}

.table-status {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border-radius: var(--radius-md);
    background: rgba(29, 36, 64, 0.04);
    color: var(--deep-navy);
}

.table-status .icon {
    inline-size: 1.2rem;
}

.table-status p {
    margin: 0;
    color: var(--muted);
}

.table-status--error {
    background: rgba(244, 67, 54, 0.12);
}

.table-status--error .icon {
    filter: hue-rotate(-20deg);
}

@media (max-width: 720px) {
    .intake-table-card {
        padding: 1.8rem;
    }
}

.programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.program-card {
    background: var(--card);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow);
    display: grid;
    grid-template-rows: auto 1fr;
}

.program-card img {
    border-radius: 0;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.program-card .card-body {
    padding: 1.9rem;
}

.program-card h3 {
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
    margin-bottom: 0.6rem;
}

.program-card p {
    color: var(--muted);
    margin-bottom: 1.5rem;
}

.program-card a {
    font-weight: 600;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.duo-cta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.8rem;
}

.cta-card {
    background: var(--card);
    border-radius: var(--radius-md);
    padding: 2.4rem;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.cta-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(242, 105, 56, 0.12), transparent 60%);
}

.cta-card h3 {
    font-family: 'Playfair Display', serif;
    margin-bottom: 0.75rem;
    color: var(--deep-navy);
}

.cta-card p {
    color: var(--muted);
    margin-bottom: 1.8rem;
}

.events-showcase {
    position: relative;
    padding-block: 5rem;
}

.events-showcase::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(242, 105, 56, 0.08), rgba(18, 25, 51, 0.05));
    pointer-events: none;
}

.events-showcase > .container {
    position: relative;
    z-index: 1;
}

.events-hub {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 2.4rem;
    align-items: stretch;
}

.events-primary {
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.98), rgba(243, 178, 58, 0.14));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.events-primary__media {
    position: relative;
    isolation: isolate;
}

.events-primary__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    filter: saturate(1.05);
}

.events-badge {
    position: absolute;
    top: 1.4rem;
    left: 1.4rem;
    padding: 0.4rem 1.2rem;
    border-radius: 999px;
    background: rgba(18, 25, 51, 0.86);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.events-primary__content {
    padding: 2.6rem;
    display: grid;
    gap: 1.4rem;
}

.events-primary__label {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(18, 25, 51, 0.68);
}

.events-primary h3 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem);
    color: var(--deep-navy);
    margin: 0;
}

.events-primary p {
    color: rgba(29, 36, 64, 0.72);
    margin: 0;
}

.events-primary__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.events-primary__meta li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-weight: 600;
    color: rgba(18, 25, 51, 0.82);
}

.events-primary__insights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.9rem;
}

.events-primary__insights div {
    background: rgba(255, 255, 255, 0.78);
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem;
    box-shadow: inset 0 0 0 1px rgba(18, 25, 51, 0.1);
}

.events-primary__insights strong {
    display: block;
    font-size: 1.35rem;
    color: var(--deep-navy);
}

.events-primary__insights span {
    font-size: 0.85rem;
    color: var(--muted);
}

.events-primary__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.events-secondary {
    display: grid;
    gap: 1.8rem;
}

.events-secondary__card {
    background: var(--card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 2.1rem;
    display: grid;
    gap: 1.1rem;
}

.events-secondary__card h3,
.events-secondary__card h4 {
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
    margin: 0;
}

.events-secondary__card p {
    margin: 0;
    color: var(--muted);
}

.events-secondary__card--media {
    position: relative;
    overflow: hidden;
    padding: 0;
    min-height: 200px;
}

.events-secondary__card--media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.events-secondary__card--media .event-highlight {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1.6rem;
    background: linear-gradient(180deg, rgba(9, 15, 42, 0.05), rgba(9, 15, 42, 0.82));
    color: #fff;
}

.events-secondary__card--media .event-highlight span {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}

.events-secondary__card--media .event-highlight h4 {
    margin: 0;
    font-size: 1.35rem;
    color: #fff;
}

.events-secondary__card--media .event-highlight p {
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
}

.events-quicklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.events-quicklist li {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.events-quicklist strong {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
}

.events-quicklist span {
    color: var(--muted);
    font-size: 0.9rem;
}

.events-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.events-tags span {
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(18, 25, 51, 0.08);
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(18, 25, 51, 0.78);
}

.events-snapshot {
    padding-block: 3.2rem;
    background: rgba(255, 255, 255, 0.86);
    border-bottom: 1px solid rgba(18, 25, 51, 0.08);
}

.events-snapshot__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.4rem;
}

.events-snapshot__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.6rem;
    border-radius: var(--radius-md);
    background: rgba(242, 105, 56, 0.06);
    box-shadow: inset 0 0 0 1px rgba(242, 105, 56, 0.12);
}

.events-snapshot__label {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(18, 25, 51, 0.6);
    margin-bottom: 0.35rem;
}

.events-blueprint {
    padding-block: 5rem;
    background: linear-gradient(120deg, rgba(18, 25, 51, 0.07), rgba(242, 105, 56, 0.08));
}

.events-blueprint__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 2.6rem;
    align-items: start;
}

.events-roadmap {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 2.4rem;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.events-roadmap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(243, 178, 58, 0.18), transparent 60%);
    pointer-events: none;
}

.events-roadmap > * {
    position: relative;
    z-index: 1;
}

.events-roadmap__intro {
    color: var(--muted);
    margin-bottom: 2rem;
}

.events-roadmap__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.8rem;
    position: relative;
}

.events-roadmap__list::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 2px;
    background: rgba(18, 25, 51, 0.12);
}

.events-roadmap__list li {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 1.2rem;
    align-items: start;
}

.events-roadmap__time {
    font-weight: 700;
    color: var(--deep-navy);
    font-size: 1.1rem;
    position: relative;
}

.events-roadmap__time::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 0.45rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 6px rgba(242, 105, 56, 0.16);
}

.events-roadmap__details h3 {
    margin: 0 0 0.5rem;
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
}

.events-roadmap__details p {
    margin: 0 0 0.8rem;
    color: var(--muted);
}

.events-roadmap__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: rgba(242, 105, 56, 0.12);
    color: var(--primary);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.events-actions {
    display: grid;
    gap: 1.6rem;
}

.events-actions__card {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 2.1rem;
    box-shadow: var(--shadow);
    display: grid;
    gap: 1rem;
}

.events-actions__content h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
}

.events-actions__content p {
    margin: 0 0 0.8rem;
    color: var(--muted);
}

.events-actions__card .ghost-button {
    justify-self: start;
}

.events-actions__card--highlight {
    background: linear-gradient(140deg, rgba(242, 105, 56, 0.12), rgba(18, 25, 51, 0.12));
    border: 1px solid rgba(242, 105, 56, 0.22);
    text-align: left;
}

.events-actions__card--highlight h3 {
    font-family: 'Playfair Display', serif;
    margin: 0;
    color: var(--deep-navy);
}

.events-actions__card--highlight p {
    color: rgba(18, 25, 51, 0.78);
}

.events-actions__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.95rem;
    border-radius: 999px;
    background: rgba(18, 25, 51, 0.78);
    color: #fff;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}

.events-actions__card--list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
    color: var(--muted);
}

.events-actions__card--list li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.events-actions__card--list a {
    color: var(--primary);
    font-weight: 600;
}

.events-spotlights {
    padding-block: 5rem;
    background: var(--sand);
}

.spotlight-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
    gap: 2.4rem;
}

.spotlight-feature {
    background: var(--card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.spotlight-feature__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.spotlight-feature__body {
    padding: 2.4rem;
    display: grid;
    gap: 1rem;
}

.spotlight-feature__eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(18, 25, 51, 0.6);
    font-weight: 600;
}

.spotlight-feature__body h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
}

.spotlight-feature__body p {
    margin: 0;
    color: var(--muted);
}

.spotlight-feature__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    color: rgba(18, 25, 51, 0.75);
    font-weight: 600;
}

.spotlight-feature__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: center;
}

.spotlight-stack {
    display: grid;
    gap: 1.6rem;
}

.spotlight-card {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow);
    display: grid;
    gap: 0.9rem;
}

.spotlight-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
    color: rgba(18, 25, 51, 0.68);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.spotlight-card h4 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
}

.spotlight-card p {
    margin: 0;
    color: var(--muted);
}

.events-experiences {
    padding-block: 5rem;
    background: linear-gradient(135deg, rgba(18, 25, 51, 0.82), rgba(18, 25, 51, 0.72));
}

.events-experiences__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.8rem;
}

.experience-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 280px;
    background: rgba(0, 0, 0, 0.4);
}

.experience-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--experience-image);
    background-size: cover;
    background-position: center;
    filter: saturate(1.05);
    opacity: 0.8;
}

.experience-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 2.2rem;
    background: linear-gradient(180deg, rgba(9, 15, 42, 0.1), rgba(9, 15, 42, 0.86));
    color: #fff;
}

.experience-card__overlay span {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
}

.experience-card__overlay h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
}

.experience-card__overlay p {
    margin: 0 0 0.8rem;
    color: rgba(255, 255, 255, 0.78);
}

.events-host {
    padding-block: 5rem;
    background: rgba(255, 255, 255, 0.92);
}

.events-host__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 2.4rem;
    align-items: stretch;
}

.events-host__content h2 {
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
    margin: 0.8rem 0 1.2rem;
}

.events-host__content p {
    color: var(--muted);
    margin-bottom: 1.6rem;
}

.events-host__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.events-host__card {
    background: linear-gradient(135deg, rgba(242, 105, 56, 0.12), rgba(18, 25, 51, 0.08));
    border-radius: var(--radius-lg);
    padding: 2.2rem;
    box-shadow: var(--shadow);
    display: grid;
    gap: 1.2rem;
}

.events-host__card h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
}

.events-host__card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
    color: rgba(18, 25, 51, 0.82);
}

.events-host__card li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.resource-snapshot {
    padding-block: 3rem;
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(18, 25, 51, 0.08);
}

.resource-snapshot__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.4rem;
}

.resource-snapshot__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.6rem;
    border-radius: var(--radius-md);
    background: rgba(18, 25, 51, 0.05);
    box-shadow: inset 0 0 0 1px rgba(18, 25, 51, 0.08);
}

.resource-snapshot__label {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(18, 25, 51, 0.6);
    margin-bottom: 0.35rem;
}

.resource-library {
    padding-block: 5rem;
    background: linear-gradient(120deg, rgba(18, 25, 51, 0.05), rgba(242, 105, 56, 0.08));
}

.resource-tabs {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
    gap: 2.4rem;
    align-items: start;
}

.resource-nav {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 2.4rem;
    box-shadow: var(--shadow);
    display: grid;
    gap: 1.6rem;
}

.resource-nav h2 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
}

.resource-nav p {
    margin: 0;
    color: var(--muted);
}

.resource-nav__buttons {
    display: grid;
    gap: 0.8rem;
}

.resource-nav__buttons .tab-button {
    justify-content: flex-start;
    width: 100%;
    padding: 0.85rem 1.2rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(18, 25, 51, 0.12);
    background: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    color: rgba(18, 25, 51, 0.72);
    text-align: left;
}

.resource-nav__buttons .tab-button.active {
    background: linear-gradient(135deg, rgba(242, 105, 56, 0.16), rgba(243, 178, 58, 0.12));
    border-color: rgba(242, 105, 56, 0.35);
    color: var(--deep-navy);
}

.resource-nav__notes {
    display: grid;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: rgba(18, 25, 51, 0.68);
}

.resource-nav__notes span {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.resource-panels {
    display: grid;
    gap: 1.8rem;
}

.resource-panels .tab-panel {
    background: transparent;
    padding: 0;
    box-shadow: none;
}

.resource-panel {
    background: var(--card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 2.4rem;
    display: grid;
    gap: 2rem;
}

.resource-panel--two-column {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
}

.resource-panel--split {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: stretch;
}

.resource-panel__body {
    display: grid;
    gap: 1rem;
}

.resource-panel__body h3 {
    font-family: 'Playfair Display', serif;
    margin: 0;
    color: var(--deep-navy);
}

.resource-panel__body p {
    margin: 0;
    color: var(--muted);
}

.resource-panel__eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(18, 25, 51, 0.6);
    font-weight: 600;
}

.resource-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.8rem;
    color: rgba(18, 25, 51, 0.72);
}

.resource-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.resource-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 0.4rem;
}

.resource-media img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.resource-media figcaption {
    margin-top: 0.9rem;
    font-size: 0.85rem;
    color: rgba(18, 25, 51, 0.68);
}

.resource-callouts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.resource-callouts div {
    background: rgba(242, 105, 56, 0.12);
    border-radius: var(--radius-md);
    padding: 0.9rem 1.1rem;
    display: grid;
    gap: 0.35rem;
}

.resource-callouts span {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(18, 25, 51, 0.6);
    font-weight: 600;
}

.resource-callouts strong {
    color: var(--deep-navy);
    font-size: 0.95rem;
}

.declaration-cards {
    display: grid;
    gap: 1.4rem;
}

.declaration-card {
    background: linear-gradient(135deg, rgba(18, 25, 51, 0.08), rgba(243, 178, 58, 0.1));
    border-radius: var(--radius-md);
    padding: 1.8rem;
    box-shadow: var(--shadow);
}

.declaration-card h4 {
    margin: 0 0 0.8rem;
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
}

.declaration-card p {
    margin: 0;
    color: rgba(18, 25, 51, 0.75);
}

.declaration-card__label {
    display: inline-flex;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: rgba(18, 25, 51, 0.12);
    color: rgba(18, 25, 51, 0.75);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.8rem;
}

.resource-side-card {
    background: rgba(255, 255, 255, 0.94);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow);
    display: grid;
    gap: 1rem;
}

.resource-side-card h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
}

.resource-shelves {
    padding-block: 5rem;
    background: var(--sand);
}

.resource-shelves__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.6rem;
}

.shelf-card {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow);
    display: grid;
    gap: 1rem;
}

.shelf-card h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
}

.shelf-card p {
    margin: 0;
    color: var(--muted);
}

.shelf-card__icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: rgba(242, 105, 56, 0.16);
    display: grid;
    place-items: center;
}

.resource-method {
    padding-block: 5rem;
    background: linear-gradient(120deg, rgba(18, 25, 51, 0.85), rgba(18, 25, 51, 0.7));
    color: #fff;
}

.resource-method__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 2.8rem;
    align-items: start;
}

.resource-method__intro h2 {
    font-family: 'Playfair Display', serif;
    margin: 0.6rem 0 1rem;
    color: #fff;
}

.resource-method__intro p {
    color: rgba(255, 255, 255, 0.78);
}

.resource-method__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.4rem;
}

.resource-method__steps li {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 1.2rem;
    align-items: start;
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    padding: 1.2rem 1.4rem;
}

.resource-method__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(243, 178, 58, 0.2);
    color: var(--gold);
    font-weight: 700;
}

.resource-method__steps h3 {
    margin: 0 0 0.5rem;
    font-family: 'Playfair Display', serif;
    color: #fff;
}

.resource-method__steps p {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
}

.resource-coaching {
    padding-block: 5rem;
    background: rgba(255, 255, 255, 0.92);
}

.resource-coaching__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 2.6rem;
    align-items: center;
}

.resource-coaching__media img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.resource-coaching__content h2 {
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
    margin: 0.8rem 0 1.2rem;
}

.resource-coaching__content p {
    color: var(--muted);
    margin-bottom: 1.6rem;
}

.resource-coaching__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-bottom: 1.4rem;
}

.resource-coaching__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.7rem;
    color: rgba(18, 25, 51, 0.78);
}

.resource-coaching__list li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.stories-section .stories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.8rem;
}

.story-card {
    background: var(--card);
    border-radius: var(--radius-md);
    padding: 2.2rem;
    box-shadow: var(--shadow);
}

.story-card h3 {
    font-family: 'Playfair Display', serif;
    margin-bottom: 0.9rem;
    color: var(--deep-navy);
}

.story-card p {
    color: var(--muted);
}

.impact-metrics {
    background: linear-gradient(120deg, rgba(242, 105, 56, 0.08), rgba(18, 25, 51, 0.08));
    border-radius: var(--radius-lg);
    padding: 3.2rem;
}

.impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.8rem;
}

.impact-item {
    text-align: center;
}

.impact-item strong {
    display: block;
    font-size: 2.4rem;
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
}

.impact-item span {
    color: var(--muted);
}

.testimonials {
    overflow: hidden;
}

.testimonial-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 1fr);
    gap: 1.5rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    scroll-snap-type: x mandatory;
}

.testimonial-card {
    background: var(--card);
    border-radius: var(--radius-md);
    padding: 2.1rem;
    box-shadow: var(--shadow);
    scroll-snap-align: start;
}

.testimonial-card p {
    color: var(--muted);
    margin-bottom: 1.5rem;
}

.testimonial-author {
    font-weight: 600;
    color: var(--deep-navy);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
}

.gallery-grid img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: 0 14px 30px rgba(13, 19, 42, 0.12);
}

.newsletter-panel {
    background: var(--deep-navy);
    color: #fff;
    padding: 3.5rem;
    border-radius: var(--radius-lg);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    align-items: center;
}

.newsletter-panel h3 {
    font-family: 'Playfair Display', serif;
    margin-bottom: 0.75rem;
    font-size: 2rem;
}

.newsletter-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.8rem 1rem;
    align-items: center;
    position: relative;
}

.newsletter-form input[type="email"] {
    width: 100%;
    min-width: 220px;
    padding: 0.9rem 1.1rem;
    border-radius: 999px;
    border: none;
    font-family: inherit;
    font-size: 0.95rem;
}

.newsletter-feedback {
    grid-column: 1 / -1;
    display: none;
    gap: 0.6rem;
    align-items: center;
    border-radius: 999px;
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
}

.newsletter-feedback .icon {
    inline-size: 1.1rem;
}

.newsletter-feedback--success {
    background: rgba(76, 175, 80, 0.18);
    color: #e9ffe9;
}

.newsletter-feedback--error {
    background: rgba(244, 67, 54, 0.22);
    color: #ffeaea;
}

.newsletter-feedback.is-visible {
    display: inline-flex;
}

.site-footer {
    background: radial-gradient(circle at top left, rgba(243, 178, 58, 0.18), transparent 55%), linear-gradient(160deg, var(--midnight), var(--deep-navy));
    color: rgba(255, 255, 255, 0.86);
    padding-top: 4.5rem;
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    content: '';
    position: absolute;
    inset: -40% 10% auto -30%;
    height: 320px;
    background: url('../images/branding/LOGO FILES/PNG/Pattern 1.png') center/contain repeat;
    opacity: 0.05;
    pointer-events: none;
}

.footer-top {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr);
    gap: 3rem;
    padding-bottom: 3.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-brand {
    display: grid;
    gap: 1.4rem;
    max-width: 320px;
}

.footer-brand img {
    width: 160px;
    height: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.footer-brand p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
}

.footer-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2.2rem;
}

.footer-column h4 {
    font-family: 'Playfair Display', serif;
    color: #fff;
    margin-bottom: 1.2rem;
}

.footer-links {
    display: grid;
    gap: 0.75rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 500;
}

.footer-links a:hover {
    color: #fff;
}

.footer-bottom {
    padding: 1.5rem 0;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.65);
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.footer-bottom-links a {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 600;
}

.footer-bottom-links a:hover {
    color: #fff;
}

.social-links {
    display: flex;
    gap: 0.85rem;
}

.social-links a {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.12);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.2rem;
    transition: transform 0.3s ease, background 0.3s ease;
}

.page-hero {
    padding: 7rem 0 4rem;
    background: linear-gradient(120deg, rgba(18, 25, 51, 0.86), rgba(18, 25, 51, 0.65)), url('../images/outreach%20pic.jpeg') center/cover;
    color: #fff;
    text-align: center;
}

.page-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.4rem, 3vw, 3.6rem);
    margin-bottom: 0.75rem;
}

.page-hero p {
    max-width: 36rem;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.75);
}

.outreach-hero {
    background: linear-gradient(135deg, rgba(18, 25, 51, 0.92), rgba(18, 25, 51, 0.75)), url('../images/pictures_for_gallery/IMG-20251007-WA0010.jpg') center/cover;
    color: #fff;
    padding-block: 6rem;
}

.hero-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3rem;
    align-items: center;
}

.hero-copy h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.6rem, 3.6vw, 3.8rem);
    margin-bottom: 1.2rem;
}

.hero-copy p {
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 2rem;
    max-width: 32rem;
}

.hero-media-stack {
    position: relative;
    display: grid;
    gap: 1.5rem;
}

.hero-media-stack img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(9, 15, 42, 0.35);
    object-fit: cover;
}

.hero-media-stack img.offset {
    max-width: 70%;
    justify-self: end;
    transform: translateY(-35%);
}

.stats-band {
    background: var(--card);
    box-shadow: var(--shadow);
    margin-top: -3rem;
    position: relative;
    z-index: 2;
    border-radius: var(--radius-lg);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.2rem;
    padding: 2.8rem;
}

.impact-stat {
    text-align: center;
    padding: 1.2rem 1rem;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(243, 178, 58, 0.16), rgba(242, 105, 56, 0.1));
}

.impact-stat strong {
    display: block;
    font-size: 2.2rem;
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
}

.impact-stat span {
    color: var(--muted);
    font-weight: 600;
}

.mission-showcase {
    padding-top: 5rem;
}

.mission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.8rem;
}

.mission-card {
    background: var(--card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 2.4rem;
    display: grid;
    gap: 1rem;
}

.mission-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(242, 105, 56, 0.16);
    display: grid;
    place-items: center;
}

.mission-icon .icon {
    inline-size: 28px;
}

.mission-card h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
}

.spotlight-block {
    background: linear-gradient(120deg, rgba(242, 105, 56, 0.08), rgba(18, 25, 51, 0.08));
}

.spotlight {
    gap: 3rem;
}

.spotlight-media img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    object-fit: cover;
}

.spotlight-points {
    margin: 1.5rem 0;
    padding-left: 1.2rem;
    color: var(--muted);
    line-height: 1.8;
}

.gallery-suite {
    padding-top: 5rem;
}

.photo-masonry {
    column-count: 4;
    column-gap: 1.2rem;
}

.photo-frame {
    break-inside: avoid;
    margin-bottom: 1.2rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow);
    cursor: zoom-in;
    position: relative;
    outline: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.photo-frame:hover,
.photo-frame:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
}

.photo-frame:focus-visible {
    outline: 3px solid rgba(242, 105, 56, 0.8);
    outline-offset: 3px;
}

.photo-frame img {
    width: 100%;
    height: auto;
    display: block;
}

.optimization-card {
    margin-top: 2rem;
    background: linear-gradient(135deg, rgba(18, 25, 51, 0.08), rgba(243, 178, 58, 0.12));
    border-radius: var(--radius-lg);
    padding: 2.2rem;
    box-shadow: var(--shadow);
}

.optimization-card h3 {
    margin-top: 0;
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
}

.optimization-card ul {
    margin: 1.2rem 0 0;
    padding-left: 1.2rem;
    line-height: 1.7;
    color: var(--muted);
}

.video-rail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.8rem;
}

.cta-banner {
    background: linear-gradient(135deg, rgba(18, 25, 51, 0.92), rgba(18, 25, 51, 0.75));
    color: #fff;
    padding-block: 4rem;
}

.cta-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
    align-items: center;
}

.cta-content h2 {
    font-family: 'Playfair Display', serif;
    margin-top: 0.6rem;
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.content-section {
    padding-block: 4rem;
}

.two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
    align-items: start;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.6rem;
}

.info-card {
    background: var(--card);
    padding: 2.2rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
}

.legal-content {
    display: grid;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.legal-card {
    background: var(--card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    padding: clamp(1.8rem, 4vw, 2.4rem);
    display: grid;
    gap: 1rem;
    color: var(--muted);
}

.legal-card h2 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    color: var(--deep-navy);
}

.legal-card ul {
    margin: 0;
    padding-left: 1.2rem;
    line-height: 1.7;
}

.legal-card a {
    color: var(--primary);
    font-weight: 600;
}

.legal-updated {
    margin: 0;
    font-weight: 600;
    color: var(--deep-navy);
}

.timeline {
    display: grid;
    gap: 2rem;
    border-left: 2px solid rgba(18, 25, 51, 0.12);
    padding-left: 1.6rem;
}

.timeline-item {
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -2rem;
    top: 0.4rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--gold));
}

.tabs {
    display: grid;
    gap: 1.5rem;
}

.tab-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tab-button {
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card);
    font-weight: 600;
    color: var(--muted);
}

.tab-button.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border-color: transparent;
}

.tab-panel {
    display: none;
    background: var(--card);
    border-radius: var(--radius-md);
    padding: 2.2rem;
    box-shadow: var(--shadow);
}

.tab-panel.active {
    display: block;
}

form .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.4rem 1.6rem;
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.45rem;
    color: var(--muted);
}

input, textarea, select {
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(18, 25, 51, 0.12);
    background: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    transition: var(--transition);
}

textarea {
    min-height: 160px;
    resize: vertical;
}

input:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(242, 105, 56, 0.12);
}

.contact-details {
    background: var(--card);
    padding: 2.4rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    display: grid;
    gap: 1.2rem;
}

.contact-details a {
    color: var(--primary);
    font-weight: 600;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.8rem;
}

.admin-card {
    background: var(--card);
    padding: 1.9rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
}

.admin-card h3 {
    font-family: 'Playfair Display', serif;
    margin-bottom: 0.75rem;
    color: var(--deep-navy);
}

.resource-downloads {
    display: grid;
    gap: 1.2rem;
}

.resource-downloads a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    color: var(--primary);
}

@media (max-width: 1024px) {
    .hero-grid,
    .two-column,
    .footer-top {
        grid-template-columns: 1fr;
    }

    .hero-media {
        order: -1;
    }

    .events-hub {
        grid-template-columns: 1fr;
    }

    .events-primary {
        grid-template-columns: 1fr;
    }

    .events-primary__media img {
        max-height: 320px;
    }

    .events-blueprint__layout,
    .events-host__layout,
    .spotlight-grid,
    .resource-tabs,
    .resource-method__layout,
    .resource-coaching__layout {
        grid-template-columns: 1fr;
    }

    .spotlight-feature {
        grid-template-columns: 1fr;
    }

    .resource-panel--two-column,
    .resource-panel--split {
        grid-template-columns: 1fr;
    }

    .site-header .header-inner {
        padding-block: 0.75rem;
    }

    .header-navigation {
        gap: 1.6rem;
    }

    .brand img {
        width: 121px;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .photo-masonry {
        column-count: 3;
    }
}

@media (max-width: 900px) {
    .primary-nav {
        position: fixed;
        inset: 0;
        padding: 6rem 2rem 2.5rem;
        background: rgba(26, 32, 44, 0.96);
        flex-direction: column;
        align-items: flex-start;
        transform: translateX(100%);
        transition: var(--transition);
        z-index: 1001;
    }

    .primary-nav.open {
        transform: translateX(0);
    }

    .primary-nav a {
        font-size: 1.2rem;
        color: rgba(255, 255, 255, 0.92);
    }

    .primary-nav .nav-pill > a {
        background: rgba(255, 255, 255, 0.16);
        border-color: rgba(255, 255, 255, 0.28);
        color: #fff;
        box-shadow: none;
    }

    .primary-nav .nav-pill > a:hover,
    .primary-nav .nav-pill > a:focus {
        color: var(--gold);
        border-color: rgba(243, 178, 58, 0.55);
    }

    .header-cta {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .header-navigation {
        gap: 1.2rem;
    }

    .brand {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .brand img {
        width: 121px;
    }

    .brand-slogan {
        margin-left: 0;
    }

    .sermon-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .sermon-card img {
        margin: 0 auto;
    }

    .outreach-gallery .gallery-layout {
        grid-template-columns: 1fr;
    }

    .gallery-note {
        order: -1;
    }

    .photo-lightbox__dialog {
        padding: 1.5rem 3.5rem;
    }

    .footer-top {
        gap: 2.5rem;
        text-align: center;
    }

    .footer-brand {
        justify-items: center;
        text-align: center;
        max-width: none;
    }

    .footer-columns {
        justify-items: center;
    }

    .footer-links {
        text-align: center;
    }
}

@media (max-width: 768px) {
    section {
        padding-block: 4rem;
    }

    .hero-section {
        padding-top: 5rem;
    }

    .events-roadmap__list li {
        grid-template-columns: 1fr;
    }

    .events-roadmap__time {
        padding-left: 1.6rem;
    }

    .events-roadmap__time::before {
        left: 0;
    }

    .events-actions__card {
        padding: 1.8rem;
    }

    .spotlight-feature__body {
        padding: 2rem;
    }

    .spotlight-feature__meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .spotlight-card {
        padding: 1.8rem;
    }

    .events-host__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .resource-nav,
    .resource-panel {
        padding: 2rem;
    }

    .resource-panel--two-column,
    .resource-panel--split {
        gap: 1.6rem;
    }

    .resource-actions {
        justify-content: flex-start;
    }

    .resource-callouts {
        grid-template-columns: 1fr;
    }

    .resource-method__steps li {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .resource-coaching__media {
        order: -1;
    }

    .newsletter-panel {
        padding: 2.5rem;
    }

    .donation-progress {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }

    .video-lightbox__dialog {
        padding: 1.25rem;
    }

    .photo-lightbox__dialog {
        padding: 1.4rem 2.5rem;
    }

    .photo-nav {
        width: 44px;
        height: 44px;
    }

    .photo-masonry {
        column-count: 2;
    }

    .hero-media-stack img.offset {
        max-width: 85%;
        transform: translateY(-20%);
    }

    .brand img {
        width: 110px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-bottom-links {
        flex-direction: column;
        gap: 0.75rem;
    }
}

@media (max-width: 520px) {
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .photo-masonry {
        column-count: 1;
    }

    .photo-lightbox__dialog {
        padding: 1.2rem 1.2rem 1.8rem;
    }

    .photo-nav {
        top: auto;
        bottom: 1rem;
        transform: none;
    }

    .photo-nav.prev {
        left: 0.75rem;
    }

    .photo-nav.next {
        right: 0.75rem;
    }

    .header-navigation {
        gap: 0.75rem;
    }

    .brand img {
        width: 105px;
    }

    .events-snapshot__item {
        flex-direction: column;
        text-align: center;
    }

    .events-snapshot__item .icon-chip {
        margin-bottom: 0.6rem;
    }

    .spotlight-feature__body {
        padding: 1.8rem;
    }

    .spotlight-feature__meta {
        gap: 0.6rem;
    }

    .resource-snapshot__item {
        flex-direction: column;
        text-align: center;
    }

    .resource-snapshot__item .icon-chip {
        margin-bottom: 0.6rem;
    }

    .resource-nav__buttons .tab-button {
        text-align: center;
    }

    .resource-coaching__actions {
        flex-direction: column;
        align-items: stretch;
    }
}
   max-width: 800px;
   margin-top: 50px; 
   background: rgba(15, 12, 41, 0.7); 
}

.content.container { 
    background-color: var(--background-content-area); 
    padding: 30px;
    border-radius: 8px;
    margin-top: 30px;
    margin-bottom: 30px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
.content.container h2, .content.container h3 {
    color: var(--secondary-color);
    margin-top: 10px;
    margin-bottom: 15px;
}
.content.container p, .content.container li {
    color: var(--text-color-medium);
    line-height: 1.8;
}
.content.container a {
    color: var(--primary-color);
    text-decoration: none;
}
.content.container a:hover {
    text-decoration: underline;
    color: var(--secondary-color);
}

/* Contact Form Specific Styling */
#contactForm {
    margin-top: 20px;
}
#contactForm div.form-group { 
    margin-bottom: 20px; 
}

#contactForm label {
    display: block;
    margin-bottom: 8px; 
    font-weight: 500;
    color: var(--secondary-color); 
}

#contactForm input[type="text"],
#contactForm input[type="email"],
#contactForm textarea {
    width: 100%;
    padding: 12px; 
    border: 1px solid var(--border-color-medium); 
    border-radius: 5px; 
    background-color: var(--background-dark-accent); 
    color: var(--text-color-light); 
    font-size: 1rem;
}
#contactForm input[type="text"]:focus,
#contactForm input[type="email"]:focus,
#contactForm textarea:focus {
    outline: none;
    border-color: var(--primary-color); 
    box-shadow: 0 0 8px rgba(160, 112, 208, 0.5);
}

#contactForm button { 
    display: inline-block;
    background: linear-gradient(45deg, #8A2BE2, #4B0082);
    color: #fff;
    padding: 14px 30px;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.4);
    border: none;
    cursor: pointer;
}

#contactForm button:hover {
    background: linear-gradient(45deg, #4B0082, #8A2BE2);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.6);
}

/* Footer Styling */
#site-footer { 
    background: var(--primary-color-dark); 
    color: var(--text-color-light);
    padding: 3rem 0;
    margin-top: 4rem;
    position: relative; 
}

#site-footer .container { 
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px; 
    padding-bottom: 20px; 
}

.footer-column {
    flex: 1;
    min-width: 220px; 
    margin-bottom: 30px; 
}

.footer-logo-info .footer-logo {
    height: 120px; /* Set to 120px */
    margin-bottom: 10px; /* Reduced from 20px */
}

.footer-logo-info p {
    font-size: 0.9em;
    line-height: 1.6;
    margin-bottom: 10px; /* Reduced margin to bring social icons closer */
    color: var(--text-color-light);
}

/* Style for social media links when positioned under the logo/tagline */
.footer-social-links-left {
    margin-top: 15px; /* Space above social icons */
    margin-bottom: 20px; /* Space below social icons */
}

.footer-social-links-left a .icon {
    inline-size: 1.6rem; /* Slightly smaller for this context if needed */
    margin-right: 15px;
}
.footer-social-links-left a:last-child .icon {
    margin-right: 0;
}

.footer-social-links-left a .icon:hover {
    transform: scale(1.1);
}


.footer-column h4 {
    color: var(--text-color-light);
    font-size: 1.35rem; /* Made headings slightly larger and bolder */
    font-weight: 600; /* Bolder headings */
    margin-bottom: 25px; /* Increased space below heading */
    position: relative;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.footer-column h4::after {
    content: '';
    display: block;
    width: 35px; 
    height: 3px; 
    background: var(--primary-color);
    margin-top: 10px; 
}

.footer-links ul {
    list-style: none;
    padding-left: 0;
}

.footer-links ul li {
    margin-bottom: 15px; 
}

.footer-links ul li a, .footer-contact p a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500; 
}

.footer-links ul li a:hover, .footer-contact p a:hover {
    color: var(--secondary-color); 
    text-decoration: underline;
}

.social-media-links { /* General style for other uses if any, otherwise can be merged or removed if only .footer-social-links-left is used */
    margin-top: 20px;
}

.social-media-links a .icon { /* Default styling for icons if not in .footer-social-links-left */
    inline-size: 1.8rem;
    margin-right: 20px;
}
.social-media-links a .icon:hover {
    transform: scale(1.15);
}


.footer-bottom {
    text-align: center;
    padding: 20px 0; /* Adjusted padding */
    border-top: 1px solid var(--border-color-medium); /* This is the separator */
    font-size: 0.9rem;
    color: var(--text-color-medium);
    margin-top: 30px; /* Added margin-top to space it from content above */
}
/* Ensure footer-bottom spans full width if container has padding */
#site-footer .footer-bottom {
    padding-left: 20px; /* Match container padding */
    padding-right: 20px; /* Match container padding */
    margin-left: -20px; /* Counteract container padding if footer-content is inside a .container */
    margin-right: -20px; /* Counteract container padding */
    width: calc(100% + 40px); /* Ensure it spans full width relative to its parent container */
}

/* If .footer-content is directly under #site-footer (no extra .container for footer-content itself) then the margin adjustments might not be needed,
   or if #site-footer itself has the main padding. The goal is for the border-top to look full-width relative to the page.
   Let's assume .container.footer-content means the footer-content div IS the container.
   So, the .footer-bottom needs to be outside or ignore that padding for its border.
   A simpler way for the line: */
#site-footer {
    /* ... existing styles ... */
    border-top: 1px solid var(--border-color-medium); /* Moved separator to #site-footer if footer-bottom is the very last thing */
    margin-top: 4rem; /* Keep existing margin */
    padding-top: 3rem; /* Keep existing padding */
    padding-bottom: 0; /* Remove bottom padding if footer-bottom handles it */
}

.footer-bottom {
    text-align: center;
    padding: 20px 0; 
    /* border-top: 1px solid var(--border-color-medium); REMOVED - handled by #site-footer border-top */
    font-size: 0.9rem; 
    color: var(--text-color-medium);
    /* margin-top: 30px; REMOVED - spacing handled by #site-footer padding-bottom or .footer-content margin-bottom */
}
/* Re-adjusting the separator logic for clarity:
   The horizontal line should be between the columns and the copyright.
   The .footer-bottom already has a border-top. We just need to ensure it's styled correctly and centered.
*/
.footer-content {
    /* ... existing styles ... */
    padding-bottom: 30px; /* Ensure space before the separator line */
}
.footer-bottom {
    text-align: center;
    padding: 20px 0; 
    border-top: 1px solid var(--border-color-medium); 
    font-size: 0.9rem; 
    color: var(--text-color-medium);
    /* No margin-top needed if .footer-content has padding-bottom */
}


/* Specific styles for testimony and resource items if needed */
.testimony-item, .resource-item { 
    margin-bottom: 30px;
    padding: 20px;
    background-color: var(--background-content-area); 
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.testimony-item h3 { 
    color: var(--secondary-color); 
}
.video-placeholder, #calendar-placeholder { 
    border: 2px dashed var(--border-color-medium);
    color: #706090; 
}
.about-section {
    margin-bottom: 30px;
}
.about-section ul {
    list-style-position: inside;
    padding-left: 0; 
}
.about-section ul li {
    margin-bottom: 8px;
}

img[alt*="placeholder"] { 
    border: 2px dashed var(--border-color-medium);
    padding: 5px;
    background-color: var(--background-dark-accent);
}

/* About Us Page Specific Styles */
.about-content-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Space between the two main columns */
    align-items: flex-start; /* Align items to the top */
}

.about-section-wrapper {
    flex: 1; /* Allow wrappers to grow and shrink */
    min-width: 300px; /* Minimum width before wrapping */
}

.about-section {
    margin-bottom: 40px; /* Increased space between sections */
    padding: 2rem; /* Matched padding from contact.css sections */
    background: rgba(255, 255, 255, 0.08); /* Lighter, more translucent background */
    backdrop-filter: blur(10px); /* Glassmorphism effect */
    border-radius: 1rem; /* Matched border-radius */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Matched box-shadow */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
}

.about-section h2 {
    color: var(--secondary-color);
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 20px; /* Increased space below heading */
    font-size: 1.9em; /* Slightly larger heading */
}

.about-section p {
    color: var(--text-color-medium);
    line-height: 1.8;
    margin-bottom: 18px; /* Increased space below paragraph */
    font-size: 1.05em; /* Baseline font size for body text, approx 16.8px if root is 16px */
}

.about-section ul {
    list-style: disc;
    margin-left: 20px;
    padding-left: 0;
    margin-bottom: 15px;
    color: var(--text-color-medium);
}

.about-section ul li {
    margin-bottom: 8px;
}

.about-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px; /* Space below the image */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    border: 2px solid var(--border-color-medium);
}

/* Responsive adjustments for About Us page */
@media (max-width: 768px) {
    .about-content-container {
        flex-direction: column; /* Stack columns on smaller screens */
        gap: 20px;
    }
    .about-section {
        padding: 15px; /* Reduce padding on smaller screens */
    }
    .about-section h2 {
        font-size: 1.6em;
    }
    .about-section p, .about-section ul li {
        font-size: 1em; /* Ensure slightly larger on mobile too */
    }
}

/* Scroll Animations */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.home-section {
  animation: fade-in-up linear forwards; 
  animation-timeline: view(); 
  animation-range-start: entry 10%; 
  animation-range-end: entry 40%; 
  opacity: 0; 
}
.home-section.is-visible { 
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
 }
.home-section:not(.is-visible) { 
    opacity: 0;
    transform: translateY(40px);
 }

#scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(to right, #8A2BE2, var(--primary-color), #D4C2FF);
  width: 0%;
  z-index: 1001;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(160, 112, 208, 0.5);
}

/* Back to Top Button */
.back-to-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(160, 112, 208, 0.4);
  backdrop-filter: blur(10px);
}

.back-to-top-btn.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top-btn:hover {
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 6px 20px rgba(160, 112, 208, 0.6);
  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
}

.back-to-top-btn:focus-visible {
  outline: 2px solid var(--secondary-color);
  outline-offset: 2px;
}

/* Contact Page Specific Styles */
/* Most contact styles are now covered by general .content.container and form styles */


/* Resources Page Tab Styling */
.tabs-container { 
    width: 90%;
    max-width: 1000px;
    margin: 2.5rem auto; 
    background-color: var(--background-dark-accent); 
    padding: 25px; 
    border-radius: 10px; 
    box-shadow: 0 6px 20px rgba(0,0,0,0.25); 
}

.tab-nav { 
    display: flex;
    border-bottom: 2px solid var(--border-color-medium); 
    margin-bottom: 25px; 
    overflow-x: auto; 
    padding-bottom: 5px; 
}

.tab-nav-button { 
    padding: 15px 25px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    font-size: 1.1em;
    font-weight: 500;
    color: var(--text-color-medium); 
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    margin-right: 10px; 
    white-space: nowrap; 
}

.tab-nav-button.active {
    color: var(--primary-color); 
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}

.tab-nav-button:hover {
    background-color: rgba(160, 112, 208, 0.1); 
    color: var(--primary-color);
}
.tab-nav-button:focus-visible { 
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 4px;
}


.tab-content { 
    display: none;
    padding: 25px; 
    background-color: var(--background-content-area); 
    color: var(--text-color-light); 
    border-radius: 8px; 
}

.tab-content.active {
    display: block;
}

/* Styling for recreated flyer content (Resources Page) */
.prayer-chain-details {
    line-height: 1.8;
}
.prayer-chain-details h2 { 
    color: var(--secondary-color); 
    font-size: 2em; 
    margin-bottom: 20px;
    text-align: center;
}
.prayer-chain-details h3 { 
    color: var(--primary-color);
    font-size: 1.5em;
    margin-top: 25px;
    margin-bottom: 10px;
}
.prayer-chain-details h4 { 
    color: var(--secondary-color);
    font-size: 1.2em;
    margin-top: 20px;
    margin-bottom: 8px;
}
.prayer-chain-details p {
    margin-bottom: 1em;
    color: var(--text-color-medium);
    font-size: 1rem;
}
.prayer-chain-details p strong {
    color: var(--text-color-light);
    font-weight: 600;
}
.prayer-chain-details ul {
    list-style: disc;
    margin-left: 25px;
    margin-bottom: 20px;
    color: var(--text-color-medium);
}
.prayer-chain-details ul li {
    margin-bottom: 8px;
}
.prayer-chain-decorative-image {
    display: block; 
    max-width: 300px; 
    height: auto;
    margin: 10px auto 25px auto; 
    border-radius: 8px;
    opacity: 0.8; 
}
.resource-download-link {
    display: inline-block; 
    margin-top: 25px;
    text-align: center;
}


.tab-content h2 { 
    color: var(--secondary-color); 
    margin-top: 0;
    margin-bottom: 20px; 
    font-size: 1.8em;
}
.tab-content h3 { 
    color: var(--primary-color);
    margin-top: 25px; 
    margin-bottom: 12px; 
    font-size: 1.4em;
}

.declarations p {
    margin-bottom: 1.2em;
    line-height: 1.7;
    font-size: 1.05em;
    color: var(--text-color-medium); 
}
.declarations .highlight {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 1.1em; 
    display: block;
    margin-bottom: 15px;
}

/* Page Titles (General for Resources, Testimonies, Events) */
.page-title-resources, .page-title-testimonies, .page-title-events { 
    text-align: center;
    padding: 50px 20px; 
    background-color: var(--primary-color-dark); 
    color: #fff;
}
.page-title-resources h1, .page-title-testimonies h1, .page-title-events h1 {
    font-size: 3rem; 
    margin: 0 0 10px 0;
    font-weight: 700; 
}
 .page-title-resources p, .page-title-testimonies p, .page-title-events p {
    font-size: 1.25em; 
    margin-top: 10px;
    opacity: 0.9;
    color: var(--text-color-medium);
}

/* Testimonies Page Specific Styles */
.video-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 25px; 
    margin-top: 20px;
}

.video-item {
    background-color: rgba(0,0,0,0.15); 
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.video-item video {
    width: 100%; 
    height: auto;
    border-radius: 6px;
    margin-bottom: 15px;
    background-color: #000; 
}

.video-item .speaker-name {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 5px;
}

.video-item .testimony-summary {
    font-size: 0.95em;
    color: var(--text-color-medium);
    line-height: 1.6;
}

/* Events Page Specific Styles */
.featured-events-showcase {
    padding: 40px 0;
    background-color: var(--decorative-section-bg); /* Slightly different background */
    border-bottom: 1px solid var(--border-color-medium);
}
.featured-events-showcase h2 {
    text-align: center;
    font-size: 2.2em;
    color: var(--secondary-color);
    margin-bottom: 30px;
}
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.showcase-item {
    background-color: var(--background-content-area);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
}
.showcase-item img, .showcase-item .showcase-video-preview {
    width: 100%;
    height: 200px; /* Fixed height for showcase items */
    object-fit: cover; /* Ensures the image covers the area, cropping if necessary */
    display: block; /* Remove any extra space below if it's inline */
}
.showcase-item .showcase-video-preview {
    background-color: #000;
}
.showcase-item-content {
    padding: 20px;
    flex-grow: 1;
}
.showcase-item-content h3 {
    color: var(--primary-color);
    font-size: 1.4em;
    margin-bottom: 10px;
}
.showcase-item-content p {
    font-size: 0.95em;
    color: var(--text-color-medium);
    margin-bottom: 15px;
}

.events-main-content {
    padding: 40px 20px; /* Padding for the main events list area */
    background-color: var(--background-dark-accent); /* Purple background */
    border-radius: 10px;
    margin-top: 2.5rem; /* Space from showcase or title */
    margin-bottom: 2.5rem;
}
.events-main-content > h2 { /* "Upcoming & Past Events" / "Interactive Calendar" */
    text-align: center;
    font-size: 2.2em;
    color: var(--secondary-color);
    margin-bottom: 30px;
}

.event-detail-section {
    margin-bottom: 40px;
    padding: 20px; /* Add some padding */
    border-radius: 8px; /* Rounded corners */
    transition: background-color 0.5s ease, box-shadow 0.5s ease, border-left 0.5s ease; /* Smooth transition for highlight */
}
/* .event-detail-section.highlighted-event (This style is now added at the end) */

.event-detail-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.event-detail-section h3 { /* Event Title e.g. "Event One: Community Gala" */
    font-size: 1.8em;
    color: var(--primary-color);
    margin-bottom: 15px;
}
.event-main-image {
    width: 100%;
    max-width: 600px; /* Limit main image size */
    height: auto;
    border-radius: 8px;
    margin: 0 auto 20px auto; /* Center and add space */
    display: block;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.event-detail-section p {
    color: var(--text-color-medium);
    line-height: 1.7;
    margin-bottom: 15px;
}
.event-divider {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--border-color-medium), rgba(0, 0, 0, 0));
    margin: 40px 0;
}

.event-photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin: 20px 0;
}
.event-photo-gallery figure {
    margin: 0;
    background-color: var(--background-content-area);
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.event-photo-gallery img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 8px;
}
.event-photo-gallery figcaption {
    font-size: 0.85em;
    color: var(--text-color-medium);
    text-align: center;
}

.event-video-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 20px 0;
}
.event-video-item {
    background-color: var(--background-content-area);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
.event-video-item video {
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 10px;
    background-color: #000;
}
.event-video-item p { /* Caption for video */
    font-size: 0.9em;
    color: var(--text-color-medium);
    text-align: center;
}
#calendar-placeholder-info { 
    margin-top: 40px;
    padding: 25px;
    background: var(--background-content-area);
    border-radius: 8px;
    text-align: center;
    border: 1px dashed var(--border-color-medium);
}
#calendar-placeholder-info p {
    color: var(--text-color-medium);
    font-style: italic;
    font-size: 1em;
}
/* .back-to-calendar-link-container (This style is now added at the end) */


/* FullCalendar Customizations */
#calendar { 
    padding: 20px;
    background-color: var(--background-content-area); 
    border-radius: 8px;
    color: var(--text-color-light); 
}

/* Toolbar */
.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 1.5em;
    color: var(--text-color-light);
}
.fc .fc-toolbar-title {
    color: var(--secondary-color);
    font-size: 1.8em;
}
.fc .fc-button {
    background-color: var(--fc-button-bg);
    color: var(--fc-button-text-color);
    border: 1px solid var(--fc-event-border-color);
    text-transform: capitalize;
    box-shadow: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.fc .fc-button:hover {
    background-color: var(--fc-button-hover-bg);
    color: var(--primary-color-dark);
}
.fc .fc-button-primary:not(:disabled).fc-button-active, 
.fc .fc-button-primary:not(:disabled):active {
    background-color: var(--fc-button-active-bg);
    border-color: var(--fc-button-active-bg);
    color: var(--fc-button-text-color);
}

/* Day Grid */
.fc .fc-daygrid-day {
    background-color: var(--fc-daygrid-day-bg);
    border: 1px solid var(--fc-border-color);
}
.fc .fc-daygrid-day-number {
    color: var(--text-color-medium);
    padding: 0.5em;
}
.fc .fc-day-today {
    background-color: var(--fc-today-bg) !important; 
}
.fc .fc-daygrid-day:hover {
    background-color: rgba(160, 112, 208, 0.08);
}

/* Events */
.fc .fc-event {
    background-color: var(--fc-event-bg);
    border: 1px solid var(--fc-event-border-color);
    color: var(--fc-event-text-color);
    padding: 3px 5px;
    border-radius: 3px;
    font-size: 0.85em;
    cursor: pointer;
}
.fc .fc-event:hover {
    opacity: 0.85;
}
.fc .fc-event-main {
    color: var(--fc-event-text-color);
}
.fc .fc-event-title {
    font-weight: 500;
}
.fc-event-past { 
    background-color: #4F4666 !important; 
    border-color: #3E3652 !important;
}
.fc-event-future { 
    /* Default styling is fine, or add specific future styles */
}
.fc-event-prayer { 
    background-color: #5D9CBB !important; 
    border-color: #4A7C9B !important;
}


/* List View */
.fc .fc-list-day-cushion {
    background-color: var(--primary-color-dark);
    color: var(--secondary-color);
}
.fc .fc-list-event:hover td {
    background-color: var(--fc-list-event-hover-bg);
}
.fc .fc-list-event-title a {
    color: var(--primary-color);
}
.fc .fc-list-event-title a:hover {
    text-decoration: underline;
}
.fc .fc-list-table td {
    border-color: var(--fc-border-color);
}


/* Responsive adjustments for Tabs, Testimonies & Events */
@media (max-width: 768px) {
    .tab-nav-button {
        padding: 12px 18px; 
        font-size: 1em;
    }
    .page-title-resources h1, .page-title-testimonies h1, .page-title-events h1 {
        font-size: 2.4em; 
    }
    .page-title-resources p, .page-title-testimonies p, .page-title-events p {
        font-size: 1.1em; 
    }
    .tabs-container, .events-main-content { 
        width: 95%;
        padding: 20px; 
        margin: 2rem auto;
    }
    .tab-content h2, .prayer-chain-details h2 { 
        font-size: 1.6em; 
    }
     .tab-content h3, .prayer-chain-details h3 { 
        font-size: 1.3em; 
    }
    .prayer-chain-details h4 {
        font-size: 1.1em;
    }
    .prayer-chain-decorative-image {
        max-width: 80%; 
    }
    .video-gallery {
        grid-template-columns: 1fr; 
    }
    .showcase-grid {
        grid-template-columns: 1fr; /* Stack showcase items */
    }
    .event-photo-gallery {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Smaller items on mobile */
    }
    .event-video-gallery {
        grid-template-columns: 1fr; /* Stack videos */
    }
    .fc .fc-toolbar.fc-header-toolbar {
        flex-direction: column;
        gap: 10px;
    }
    .fc .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 5px;
    }
    .fc .fc-toolbar-title {
        font-size: 1.5em;
    }
}

/* Event Detail Highlighting and Back to Calendar Link */
.event-detail-section.highlighted-event {
    background-color: rgba(160, 112, 208, 0.15); /* Even more subtle highlight */
    box-shadow: 0 0 20px rgba(160, 112, 208, 0.35); /* Slightly stronger shadow */
    border-left: 5px solid var(--primary-color); /* Thicker border */
    padding: 20px; 
    border-radius: 8px; 
    transition: background-color 0.4s ease, box-shadow 0.4s ease, border-left 0.4s ease; 
}

.back-to-calendar-link-container {
    text-align: center;
    margin: 40px auto 20px auto; /* Center container and add space */
    padding-top: 20px; /* Add some space above the button */
    border-top: 1px solid var(--border-color-medium); /* Separator line */
}

.back-to-calendar-link-container .btn-gradient {
    font-size: 1em;
    padding: 12px 25px;
}

.back-to-calendar-link-container .btn-gradient .icon {
    margin-right: 8px;
}
/* End of Events Page Optimizations */


/* Swiper JS Carousel Styles for Event Photo Gallery */
.event-photo-swiper {
    width: 100%;
    padding-top: 20px; /* Space for pagination if on top */
    padding-bottom: 40px; /* Space for pagination if on bottom */
    position: relative; /* For absolute positioning of nav buttons */
}

.event-photo-swiper .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: var(--background-content-area); /* Match card background */
    border-radius: 8px; /* Match card radius */
    overflow: hidden; /* Ensure images don't overflow */
    
    /* Center slide content (figure) */
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto; /* Adjust height automatically based on content */
}

.event-photo-swiper .swiper-slide figure {
    margin: 0;
    width: 100%;
}

.event-photo-swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 200px; /* Or set a fixed height for slides */
    object-fit: cover;
    border-bottom: 1px solid var(--border-color-medium); /* Separator if caption is below */
}

.event-photo-swiper .swiper-slide figcaption {
    padding: 10px;
    font-size: 0.9em;
    color: var(--text-color-medium);
    background-color: var(--background-dark-accent); /* Slightly different bg for caption */
}

/* Swiper Navigation Buttons */
.event-photo-swiper .swiper-button-next,
.event-photo-swiper .swiper-button-prev {
    color: var(--primary-color); /* Purple arrows */
    background-color: rgba(26, 20, 56, 0.7); /* Semi-transparent dark purple */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.event-photo-swiper .swiper-button-next:hover,
.event-photo-swiper .swiper-button-prev:hover {
    background-color: var(--primary-color);
    color: #fff;
}
.event-photo-swiper .swiper-button-next::after,
.event-photo-swiper .swiper-button-prev::after {
    font-size: 18px; /* Adjust arrow size */
    font-weight: bold;
}

/* Swiper Pagination Dots */
.event-photo-swiper .swiper-pagination-bullet {
    background-color: var(--primary-color);
    opacity: 0.6;
    width: 10px;
    height: 10px;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.event-photo-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    background-color: var(--secondary-color); /* Lighter purple for active dot */
    transform: scale(1.1);
}

/* Outreach Page Specific Styles */
.page-title-outreach { /* Style for the outreach page title section */
    text-align: center;
    padding: 50px 20px; 
    background-color: var(--primary-color-dark); 
    color: #fff;
}
.page-title-outreach h1 {
    font-size: 3rem; 
    margin: 0 0 10px 0;
    font-weight: 700; 
}
.page-title-outreach p {
    font-size: 1.25em; 
    margin-top: 10px;
    opacity: 0.9;
    color: var(--text-color-medium);
    max-width: 800px; /* Constrain width of intro paragraph */
    margin-left: auto;
    margin-right: auto;
}

.outreach-grid-container {
    padding-top: 40px;
    padding-bottom: 40px;
}

.outreach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.outreach-card {
    background-color: var(--background-content-area);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.outreach-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(var(--primary-color), 0.3);
}

.outreach-card-thumbnail {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.outreach-card-content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.outreach-card-content h3 {
    color: var(--secondary-color);
    font-size: 1.6em;
    margin-bottom: 15px;
}
.outreach-card-content p {
    font-size: 1em;
    color: var(--text-color-medium);
    margin-bottom: 20px;
    flex-grow: 1; /* Allows paragraph to take up space before button */
}
.outreach-card-content .btn-gradient {
    align-self: flex-start; /* Align button to the start of the flex container */
}

.outreach-details-container {
    padding-top: 20px;
    padding-bottom: 40px;
}
.outreach-detail-content {
    background-color: var(--background-dark-accent);
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 40px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    min-height: 500px; /* Ensure it has some default height */
}
.outreach-detail-content h2 {
    color: var(--primary-color);
    font-size: 2.2em;
    margin-bottom: 20px;
    text-align: center;
}
.outreach-detail-main-image {
    width: 100%;
    max-width: 700px;
    height: auto;
    border-radius: 8px;
    margin: 0 auto 25px auto;
    display: block;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.outreach-detail-text {
    margin-bottom: 30px;
    color: var(--text-color-medium);
}
.outreach-detail-text h4 {
    color: var(--secondary-color);
    font-size: 1.3em;
    margin-top: 25px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color-medium);
    padding-bottom: 5px;
}
.outreach-detail-text ul {
    list-style: disc;
    margin-left: 20px;
    padding-left: 5px;
}
.outreach-detail-text ul li {
    margin-bottom: 8px;
}

.outreach-detail-content h4 { /* For "Photo Gallery" and "Video Highlight" titles */
    font-size: 1.5em;
    color: var(--secondary-color);
    margin-top: 30px;
    margin-bottom: 15px;
}
.outreach-video-item {
    margin-top: 20px;
}
.outreach-video-item video {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 8px;
    display: block;
    margin: 0 auto 10px auto;
    background-color: #000;
}
.outreach-video-item p {
    text-align: center;
    font-size: 0.9em;
    color: var(--text-color-medium);
}
.close-details-btn {
    display: block;
    margin: 30px auto 0 auto;
}

/* Swiper styles for outreach page galleries (can reuse .event-photo-swiper styles if identical) */
.outreach-detail-content .swiper-slide img { /* Target swiper images within outreach details */
    height: 280px; /* Increased height for gallery images */
    object-fit: cover;
}

.outreach-detail-content .swiper-slide figcaption {
    padding: 8px;
    font-size: 0.85em;
}

/* Specific styles for the landing page events carousel */
.home-events-landing-carousel.swiper {
    height: 100%; /* Ensure swiper takes full height of its parent */
    width: 100%;
    border-radius: 10px; /* Match parent's border-radius */
}

.home-events-landing-carousel .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: var(--background-content-area);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Ensure slide takes full height */
    border-radius: 10px; /* Match parent's border-radius */
    overflow: hidden;
}

.home-events-landing-carousel .swiper-slide figure {
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex; /* For centering figcaption if needed */
    flex-direction: column;
}

.home-events-landing-carousel .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%; /* Make image fill the slide height */
    object-fit: cover; /* Cover the area, might crop */
}

.home-events-landing-carousel .swiper-slide figcaption {
    padding: 8px;
    font-size: 0.85em;
    color: var(--text-color-medium);
    background-color: rgba(0,0,0,0.5); /* Semi-transparent caption background */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
}


/* Landing Page - Our Outreach Section Specific Styles */
.landing-outreach-section {
    padding: 60px 0; /* Or your standard section padding */
    /* background-color: #2a0f45; /* Your deep purple background - Assuming this will inherit from .home-section */
}

.section-layout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 50px; /* Adjust gap as needed */
    align-items: center;
}

/* Video Styling */
.video-wrapper {
    /* You might not need extra styling here if the video player takes full width of its column */
}

.outreach-video-player {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    display: block;
    border-radius: 12px; /* Modern rounded corners */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Softer, more diffuse shadow for depth */
    /* Consider aspect-ratio: 16/9; if you want to enforce it */
}

/* Text Content Styling for landing page outreach section */
#home-outreach .text-content-wrapper .section-tag { /* Specific to landing page outreach */
    display: inline-block;
    background-color: #4a236f; /* Example dark purple for tag */
    color: #fff;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.85em;
    margin-bottom: 15px;
    font-weight: 500;
}

#home-outreach .text-content-wrapper h2 { /* Specific to landing page outreach */
    color: #eadaff; /* Example light lavender */
    font-size: 2.5em; /* Adjust as needed */
    margin-bottom: 8px;
    font-weight: bold;
}

#home-outreach .text-content-wrapper .heading-underline-accent { /* Specific to landing page outreach */
    width: 60px;
    height: 4px;
    background-color: #b39ddb; /* Example lavender */
    margin-bottom: 25px;
    border-radius: 2px;
}

#home-outreach .text-content-wrapper p { /* Specific to landing page outreach */
    color: #e0e0e0; /* Example light gray */
    font-size: 1.05em; /* Or 1.1em */
    line-height: 1.7;
    margin-bottom: 30px;
}

#home-outreach .text-content-wrapper .btn.btn-primary { /* Specific to landing page outreach */
    background-color: #b39ddb; /* Example lavender */
    color: #2a0f45; /* Example dark purple text for contrast, or #fff */
    padding: 12px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    box-shadow: 0 0 15px rgba(179, 157, 219, 0.4); /* Example glow */
    border: none; /* Ensure no default border from .btn if it has one */
}

#home-outreach .text-content-wrapper .btn.btn-primary:hover { /* Specific to landing page outreach */
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(179, 157, 219, 0.6); /* Enhanced glow */
    background-color: #a38cc6; /* Slightly darker lavender on hover */
    color: #fff;
}


/* --- Responsive Design for Landing Page Outreach Section --- */
@media (max-width: 768px) {
    #home-outreach .section-layout-grid { /* Target specific section */
        grid-template-columns: 1fr; /* Stack columns */
        gap: 30px; /* Adjust gap for stacked layout */
    }

    #home-outreach .video-wrapper { /* Target specific section */
        order: 1; /* Video first */
    }
    #home-outreach .text-content-wrapper { /* Target specific section */
        order: 2; /* Text content second */
        text-align: center; /* Optional: center text on mobile */
    }

    #home-outreach .text-content-wrapper .heading-underline-accent { /* Target specific section */
        margin-left: auto; /* Center underline if text is centered */
        margin-right: auto;
    }
}