/* Familjen Grotesk ships as a variable font: one file serves all four weights.
   Four @font-face blocks over the same file is how Google Fonts serves it, and
   each face pins the wght axis to its own value. */
@font-face {
    font-family: 'Familjen Grotesk';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/familjen-grotesk-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Familjen Grotesk';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/familjen-grotesk-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Familjen Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/familjen-grotesk-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Familjen Grotesk';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('assets/fonts/familjen-grotesk-800.woff2') format('woff2');
}

@font-face {
    font-family: 'crave-fine';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/crave-fine-400.woff2') format('woff2');
}

@font-face {
    font-family: 'crave-fine';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/crave-fine-700.woff2') format('woff2');
}

/* Design Tokens directly extracted from Wix Studio Site */
:root {
    --clr-bg-page: #EBF8E7;
    /* Light mint green page background */
    --clr-white: #FFFFFF;
    --clr-black: #111111;
    --clr-red-accent: #C92A1E;
    --clr-red-dark: #A11F16;
    /* Primary button colour. Chosen to clear 3:1 against every background a
       primary button can land on: white, mint #EBF8E7, blue-box #BCE7FD,
       yellow #FED02F. White text on it is 8.62:1 (needs 4.5:1). It is the
       brand blue already used in placeholder/app (--color-owgt-blue), so the
       button and the accents stay one family. Red stays reserved for text,
       borders and the application-steps band. */
    --clr-blue-accent: #0345AA;
    --clr-blue-dark: #023C8F;
    --clr-yellow-accent: #FED02F;
    --clr-blue-box: #BCE7FD;
    --clr-text-muted: #555555;
    --clr-link: #0F5D8C;
    --clr-placeholder: #5A6B7D;
    --clr-success-text: #085229;

    --font-heading: 'Familjen Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Familjen Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --radius-sm: 7px;
    --radius-md: 12px;
    --radius-card: 14px;
    --radius-pill: 300px;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background-color: var(--clr-bg-page);
    color: var(--clr-black);
    line-height: 1.4;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

:focus-visible {
    outline: 3px solid var(--clr-red-accent);
    outline-offset: 2px;
}


/* ==========================================================================
   2. NAVBAR (Floating Frosted Glass Navbar)
   ========================================================================== */
.navbar {
    position: sticky;
    top: 14px;
    width: 100%;
    z-index: 1000;
    pointer-events: none;
    padding: 0 1.5rem;
    margin-bottom: -108px;
    /* Pulls hero section upward so navbar floats seamlessly over the hero clouds/sky */
}

.nav-container {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    /* Vertical padding is trimmed to 1.1rem so the 56 px logo still fits
       inside the 94 px min-height. The container height therefore does not
       change, which is what keeps the hero overlap below (margin-bottom
       -108px, top 14px) landing where it was tuned to.
       Left padding is much tighter than the right on purpose: the logo used to
       sit 2.4rem in, which read as an accidental gap. The right side keeps its
       room because the nav links and the RSVP button live there. */
    padding: 1.1rem 2.4rem 1.1rem 1.2rem;
    min-height: 94px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
    border-radius: var(--radius-card);
    /* 14px Wix ground truth */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.7);
    pointer-events: auto;
    position: relative;
}

/* The brand mark. No white tile, no border, no radius: the logo is a
   transparent PNG, so any of those would draw a box around artwork that is
   meant to sit straight on the frosted navbar. */
.nav-logo a {
    display: block;
}

.nav-logo-img {
    display: block;
    height: 56px;
    /* The image is square, so auto width matches it. The width/height
       attributes in the markup only reserve the box before this height
       applies. */
    width: auto;
    transition: transform 0.25s ease;
}

.nav-logo a:hover .nav-logo-img {
    transform: scale(1.04);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.nav-link {
    font-size: 1.05rem;
    font-weight: 600;
    color: #222222;
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius-sm);
    transition: color 0.25s ease, background-color 0.25s ease;
}

.nav-link:hover {
    color: var(--clr-red-accent);
}

/* Mobile nav toggle: hidden on desktop, the primary nav on desktop */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.nav-toggle-bar {
    display: block;
    width: 20px;
    height: 2px;
    margin: 0 auto;
    background-color: var(--clr-black);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.nav-rsvp-btn {
    padding: 0.65rem 1.8rem;
    font-size: 1rem;
}

/* ==========================================================================
   BUTTON SYSTEM -- two tiers, one shape.
   Tier 1 (below): the blue pill. Every primary action on the site.
   Tier 2: the black pill, .rsvp-close-btn only.
   Anything else that looks clickable is a status chip, not a button. (.btn-tbd)
   ========================================================================== */
.nav-rsvp-btn,
.btn-rsvp,
.rsvp-submit-btn,
.newsletter-section .sib-form-block__button {
    background-color: var(--clr-blue-accent);
    color: var(--clr-white);
    border: none;
    border-radius: var(--radius-pill);
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.nav-rsvp-btn:hover,
.btn-rsvp:hover,
.rsvp-submit-btn:hover,
.newsletter-section .sib-form-block__button:hover {
    background-color: var(--clr-blue-dark);
    transform: translateY(-2px);
}

.nav-rsvp-btn:active,
.btn-rsvp:active,
.btn-apply:active,
.rsvp-submit-btn:active,
.newsletter-section .sib-form-block__button:active {
    transform: translateY(1px);
    transition: transform 0.05s ease;
}

/* ==========================================================================
   3. HERO SECTION
   ========================================================================== */
.hero-section {
    position: relative;
    min-height: 101.7vh;
    display: flex;
    flex-direction: column;
    /* The "AI" clouds are painted into hero_bg.webp at 22-39% of hero height.
       The image is background-size: cover, so that band sits at the same
       fraction of the hero no matter how tall the hero gets. flex-end parks
       the headline just above the bottom edge, which is what keeps the two
       apart. The top padding is NOT what separates them on a normal window:
       above ~880px tall, min-height governs and the headline lands in exactly
       the same spot whatever this value is. Below ~880px the padding is the
       only thing holding the clouds off the text (at 700px tall, dropping it
       to 0 overlaps by 38px), so do not shrink it without re-measuring. */
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    padding: 23rem 1.5rem 0rem;
    overflow: hidden;
}

/* ASSET CACHE RULE: /assets/* is served with `immutable` for one year (vercel.json).
   If you change an image's CONTENT, you MUST also change its FILENAME (e.g. hero_bg.v2.webp)
   and update every reference. Otherwise visitors keep the old file for a year. */

/* Both hero layers are the same 1678x937 asset, so the `cover` crop and the
   `center` position resolve identically and the two skies register pixel for
   pixel. Never give either hero image a different pixel size. */
.hero-bg-base {
    position: absolute;
    inset: 0;
    background-image: url('assets/images/hero_bg.webp');
    background-size: cover;
    background-position: center;
    pointer-events: none;
    z-index: 0;
}

/* The richer golden-hour sky that the cursor uncovers. Sits directly above
   .hero-bg-base (same z-index, later in the DOM) and directly below the mask
   canvas, so it is never visible until the canvas erases.

   It starts `visibility: hidden` and only becomes visible once JS reports
   that the canvas has painted the mask. Without that gate the canvas bitmap
   is transparent for the moment before the deferred script runs, and the
   saturated golden sky would flash on screen and then get covered by the
   calm original -- the exact opposite of the intended first frame.
   .hero-bg-base is the flash-safe stand-in for that gap: it is the same
   original photo, in CSS, so it paints with the page.

   Do not change z-index here. It matches .hero-bg-base on purpose. */
.hero-bg-reveal {
    position: absolute;
    inset: 0;
    background-image: url('assets/images/hero_bg_golden.webp');
    background-size: cover;
    background-position: center;
    pointer-events: none;
    z-index: 0;
    visibility: hidden;
}

.hero-bg-reveal.is-ready {
    visibility: visible;
}

/* The mask. Paints the original photo at full strength and the cursor erases
   it, uncovering .hero-bg-reveal underneath. */
.hero-bg-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Touch devices have no cursor, so the desktop brush can never be aimed.
   Both hero layers stay visible here: assets/js/hero-loop.v1.js drives the
   same mask along generated sweeps instead. Until that script paints, the
   reveal layer is still visibility:hidden and .hero-bg-base shows the calm
   photo, so a phone with JS disabled degrades to the original image.

   Only the manual reset is hidden. The loop resets itself. */
@media (hover: none), (any-hover: none) {
    .hero-reset-btn,
    .hero-bg-canvas {
        display: none;
    }

    .hero-bg-reveal {
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0,
            transparent 120vh,
            black calc(120vh + 200px),
            black calc(240vh + 200px),
            transparent calc(240vh + 400px),
            transparent 100%
        );
        mask-image: linear-gradient(
            to bottom,
            transparent 0,
            transparent 120vh,
            black calc(120vh + 200px),
            black calc(240vh + 200px),
            transparent calc(240vh + 400px),
            transparent 100%
        );
        -webkit-mask-size: 100% calc(360vh + 400px);
        mask-size: 100% calc(360vh + 400px);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        
        -webkit-mask-position: 0 calc(-240vh - 400px);
        mask-position: 0 calc(-240vh - 400px);
        
        animation: skyWaveLoop 6s linear infinite;
    }
}

@keyframes skyWaveLoop {
    0% {
        -webkit-mask-position: 0 calc(-240vh - 400px);
        mask-position: 0 calc(-240vh - 400px);
    }
    33.333% {
        -webkit-mask-position: 0 calc(-120vh - 200px);
        mask-position: 0 calc(-120vh - 200px);
    }
    50% {
        -webkit-mask-position: 0 calc(-120vh - 200px);
        mask-position: 0 calc(-120vh - 200px);
    }
    83.333% {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
    100% {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}

.hero-reset-btn {
    position: absolute;
    bottom: 2rem;
    right: 1rem;
    z-index: 10;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #222;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.2s ease, visibility 0.3s ease;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
}

.hero-reset-btn.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.hero-reset-btn:hover {
    background: #fff;
    transform: translateY(-2px) scale(1.02);
}

.hero-bg-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1300px;
    width: 100%;
}

.hero-title {
    font-family: 'crave-fine', Georgia, serif;
    font-size: clamp(3.5rem, 11.5vw, 11rem);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.05em;
    color: #111111;
    position: relative;
    display: inline-block;
    margin-top: 0;
    margin-bottom: 3.5rem;
}

.hero-title-o {
    position: relative;
    display: inline-block;
}

.hero-scroll-indicator {
    position: relative;
    top: -2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: arrow-float 2s ease-in-out infinite;
}

.hero-scroll-indicator img {
    width: 20px;
    height: 20px;
    opacity: 0.85;
}

@keyframes arrow-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

/* ==========================================================================
   4. EVENTS SECTION
   ========================================================================== */
.events-section {
    width: 100%;
    padding: 6rem 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--clr-blue-box);
}

.events-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: auto;
}

.events-title {
    font-size: clamp(2.2rem, 3.8vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--clr-black);
    margin-bottom: 2rem;
}

.events-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    flex-wrap: wrap;
}

/* Not a button. A white status chip, so it stops reading as a broken one. */
.btn-tbd {
    background-color: var(--clr-white);
    color: var(--clr-black);
    border: 1.5px solid rgba(0, 0, 0, 0.16);
    padding: 0.6rem 1.6rem;
    border-radius: var(--radius-pill);
    font-size: 0.95rem;
    font-weight: 600;
    width: auto;
    min-width: 0;
    text-align: center;
    display: inline-block;
    cursor: default;
}

.btn-rsvp {
    padding: 0.85rem 2.5rem;
    /* 300px pill */
    font-size: 1rem;
    min-width: 180px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

/* ==========================================================================
   5. VOLUNTEER SECTION
   ========================================================================== */
.volunteer-section {
    background-color: var(--clr-white);
    padding: 6rem 1.5rem;
    width: 100%;
}

.volunteer-container {
    max-width: 1240px;
    margin: 0 auto;
}

.volunteer-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
    margin-bottom: 2.5rem;
}

.volunteer-title {
    font-size: clamp(2.4rem, 4.2vw, 3.8rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    flex: 1;
}

.volunteer-desc {
    flex: 1.2;
    font-size: 1.35rem;
    color: #222222;
    line-height: 1.6;
    font-weight: 500;
}

.volunteer-image-wrapper {
    width: 100%;
    border-radius: var(--radius-card);
    /* 14px Wix ground truth */
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.volunteer-image {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-card);
    /* 14px Wix ground truth */
    transition: transform 0.6s ease;
}

.volunteer-image-wrapper:hover .volunteer-image {
    transform: scale(1.02);
}

/* ==========================================================================
   6. APPLICATION STEPS SECTION
   ========================================================================== */
.application-section {
    background-color: var(--clr-red-accent);
    padding: 8.5rem 1.5rem 6.5rem;
    width: 100%;
}

.application-container {
    max-width: 1240px;
    margin: 0 auto;
    color: var(--clr-white);
}

.app-steps-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 4rem;
    align-items: flex-start;
}

.app-title-col {
    position: sticky;
    top: 124px;
}

.app-heading {
    font-size: clamp(3.2rem, 5.5vw, 5rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.04em;
    margin-bottom: 2.5rem;
}

.app-pixel-envelope {
    width: 140px;
    height: auto;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15));
}

.app-cards-col {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.step-card {
    background-color: var(--clr-white);
    color: var(--clr-black);
    border-radius: var(--radius-card);
    /* 14px Wix ground truth */
    padding: 3.5rem 3rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.1);
}

.step-number {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 1.25rem;
}

.step-text {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.4;
    color: #222222;
}

.step-link {
    color: var(--clr-black);
    text-decoration: underline;
    font-weight: 700;
    transition: color 0.25s ease;
}

.step-link:hover {
    color: var(--clr-red-accent);
}

.step-subtext {
    font-size: 1.05rem;
    color: #444444;
    margin-top: 0.85rem;
    line-height: 1.4;
}

/* ==========================================================================
   7. BOARD SECTION (Cascading Sticky Scroll Replication)
   ========================================================================== */
.board-section {
    background-color: var(--clr-bg-page);
    padding: 6rem 2rem 10rem;
    position: relative;
    width: 100%;
}

.board-heading-wrapper {
    position: sticky;
    top: 80px;
    z-index: 10;
    text-align: center;
    margin-bottom: 3rem;
    pointer-events: none;
}

.board-main-title {
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--clr-black);
}

.board-sticky-track {
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8rem;
    /* Creates ample scrolling space between card stops */
}

.board-sticky-row {
    position: sticky;
    top: 180px;
    /* Sticks cards right below the sticky 'Board' title */
    width: 100%;
    display: flex;
    pointer-events: none;
}

/* Three distinct staggered alignment columns matching live Wix */
.row-artham {
    justify-content: flex-start;
    z-index: 20;
}

.row-arham {
    justify-content: center;
    z-index: 25;
}

.row-panshul {
    justify-content: flex-end;
    z-index: 30;
}

.board-card {
    background-color: var(--clr-white);
    border-radius: var(--radius-card);
    /* 14px Wix ground truth */
    border: 1px solid rgba(0, 0, 0, 0.07);
    overflow: hidden;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    pointer-events: auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.board-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
}

.board-photo-wrapper {
    width: 100%;
    height: 360px;
    overflow: hidden;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.board-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    transition: transform 0.5s ease;
}

.board-card:hover .board-photo {
    transform: scale(1.04);
}

.board-info {
    padding: 2rem 1.8rem;
}

.board-name-badge {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.board-badge-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.board-name {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--clr-black);
}

.board-role {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--clr-text-muted);
}

.board-bio {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #333333;
}

/* ==========================================================================
   8. HOW TO START A CHAPTER SECTION (With Integrated Prizes & Awards)
   ========================================================================== */
.chapter-section {
    background-color: var(--clr-yellow-accent);
    padding: 6.5rem 2rem;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.chapter-container {
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.chapter-heading {
    font-size: clamp(2.6rem, 4.5vw, 4.2rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--clr-black);
    text-align: center;
    margin-bottom: 3.5rem;
}

.chapter-content-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 2.25rem;
    align-items: stretch;
}

.chapter-image-wrapper {
    position: relative;
    display: flex;
    width: 100%;
}

.chapter-image-card {
    width: 100%;
    background-color: transparent;
    border-radius: var(--radius-card);
    overflow: hidden;
    display: flex;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.chapter-image {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-card);
    transition: transform 0.5s ease;
}

.chapter-image-card:hover .chapter-image {
    transform: scale(1.03);
}

.chapter-info-col {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    justify-content: space-between;
}

.chapter-card {
    background-color: var(--clr-white);
    border-radius: var(--radius-card);
    padding: 2.5rem 2.25rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    text-align: left;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chapter-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.1);
}

.chapter-card-title {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--clr-black);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.chapter-card-text {
    font-size: 1.18rem;
    line-height: 1.6;
    color: #333333;
}

.chapter-card-lead {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--clr-black);
    margin-bottom: 0.65rem;
    line-height: 1.35;
}

.chapter-bullets {
    list-style: disc;
    padding-left: 1.4rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.chapter-bullets li {
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.5;
    color: #333333;
}

.chapter-steps-list {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.chapter-step-item {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--clr-black);
    line-height: 1.4;
}

.chapter-link {
    color: var(--clr-black);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.25s ease;
}

.chapter-link:hover {
    color: var(--clr-red-accent);
}

/* Floating Pixel Art Overlapping Image & White Box Borders */
.prize-art-icon {
    position: absolute;
    height: auto;
    z-index: 10;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.14));
    animation: pixel-float var(--float-dur, 4.5s) ease-in-out infinite alternate;
    animation-delay: var(--float-delay, 0s);
}

/* 1. Trophy Left: Overlaps Top-Left of Image Card */
.prize-trophy-left {
    width: 66px;
    top: -24px;
    left: -18px;
    --rot: -11deg;
    --rot-drift: 4deg;
    --float-y: -10px;
    --float-dur: 4.6s;
    --float-delay: 0s;
}

/* 2. Space Invader: Overlaps Bottom Border of Image Card */
.prize-invader {
    width: 58px;
    bottom: -20px;
    left: 18%;
    --rot: 9deg;
    --rot-drift: -4deg;
    --float-y: -9px;
    --float-dur: 5.2s;
    --float-delay: 1.8s;
}

/* 3. Game Console: In the Center Gutter, Overlaps Right Border of Image Card */
.prize-console {
    width: 74px;
    top: calc(50% - 37px);
    right: -28px;
    --rot: -8deg;
    --rot-drift: 3deg;
    --float-y: -11px;
    --float-dur: 4.8s;
    --float-delay: 2.6s;
}

/* 4. Ice Cream: Overlaps Top Border of Prizes & Awards Card (away from text) */
.prize-icecream {
    width: 60px;
    top: -28px;
    right: 44px;
    --rot: 15deg;
    --rot-drift: -4deg;
    --float-y: -9px;
    --float-dur: 4.2s;
    --float-delay: 0.9s;
}

/* 5. Coin: Overlaps Right Seam / Corner of Prizes & Awards Card */
.prize-coin {
    width: 52px;
    bottom: -22px;
    right: -18px;
    --rot: -14deg;
    --rot-drift: 4deg;
    --float-y: -8px;
    --float-dur: 3.9s;
    --float-delay: 2.1s;
}

/* 6. Trophy Right: Overlaps Bottom Border of Steps Card (away from text) */
.prize-trophy-right {
    width: 68px;
    bottom: -26px;
    right: 64px;
    --rot: 11deg;
    --rot-drift: -3deg;
    --float-y: -10px;
    --float-dur: 5.0s;
    --float-delay: 1.4s;
}

@keyframes pixel-float {
    0% {
        transform: translateY(0) rotate(var(--rot, 0deg));
    }

    100% {
        transform: translateY(var(--float-y, -10px)) rotate(calc(var(--rot, 0deg) + var(--rot-drift, 3deg)));
    }
}

/* ==========================================================================
   9. NEWSLETTER SECTION (Brevo Signup Form)
   ========================================================================== */
.newsletter-section {
    background-color: var(--clr-bg-page);
    padding: 8rem 1.5rem 3.5rem;
    width: 100%;
    position: relative;
    text-align: center;
}

.newsletter-container {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.newsletter-section .sib-form {
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
}

.newsletter-section #sib-form-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.newsletter-section #sib-container {
    width: 100%;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.newsletter-section #sib-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Widen ONLY headline container so 'you' stays on the same line */
.newsletter-headline-wrapper {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}

.newsletter-headline-block {
    text-align: center;
    width: 100%;
}

.newsletter-headline-text {
    margin: 0 auto;
    font-size: clamp(2.1rem, 3.8vw, 2.9rem);
    font-weight: 800;
    color: var(--clr-red-accent);
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-align: center;
}

@media (min-width: 580px) {
    .newsletter-headline-text {
        white-space: nowrap;
    }
}

@media (max-width: 579px) {
    .newsletter-headline-text {
        font-size: clamp(1.45rem, 6.2vw, 1.95rem);
        text-wrap: balance;
    }
}

/* Body content container centered & roomier */
.newsletter-body-wrapper {
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.newsletter-body-wrapper .sib-form-block {
    text-align: center;
    width: 100%;
}

.newsletter-body-wrapper .sib-text-form-block {
    text-align: center;
}

.newsletter-body-wrapper p,
.newsletter-body-text p {
    text-align: center;
    line-height: 1.6;
    font-size: 1.25rem;
    color: #111111;
}

/* Custom Checkbox matching OWGT theme - Centered & Larger */
.newsletter-checkbox-block {
    padding: 10px 0 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
}

.custom-checkbox-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    cursor: pointer;
    user-select: none;
    font-family: 'Familjen Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--clr-black);
}

.custom-checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.custom-checkbox-box {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border: 2px solid var(--clr-black);
    border-radius: 7px;
    background-color: var(--clr-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-checkbox-icon {
    width: 16px;
    height: 16px;
    color: var(--clr-white);
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    transform: scale(0.6);
    transition: stroke-dashoffset 0.2s ease, transform 0.2s ease;
}

.custom-checkbox-label:hover .custom-checkbox-box {
    border-color: var(--clr-red-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(201, 42, 30, 0.18);
}

.custom-checkbox-input:checked+.custom-checkbox-box {
    background-color: var(--clr-black);
    border-color: var(--clr-black);
}

.custom-checkbox-input:checked+.custom-checkbox-box .custom-checkbox-icon {
    stroke-dashoffset: 0;
    transform: scale(1);
}

.custom-checkbox-input:focus-visible+.custom-checkbox-box {
    outline: 2px solid var(--clr-red-accent);
    outline-offset: 2px;
}

.custom-checkbox-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111111;
    letter-spacing: -0.01em;
}

.sib-form-message-panel {
    display: none;
    width: 100%;
    max-width: 560px;
    margin: 0 auto 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 1.05rem;
    box-sizing: border-box;
    text-align: center;
}

#success-message {
    background-color: var(--clr-white);
    border: 2px solid #0B7A34;
    color: var(--clr-success-text);
}

.sib-form-message-panel__text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.sib-form-message-panel .sib-notification__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

[data-state="idle"] .sib-form-message-panel,
[data-state="loading"] .sib-form-message-panel {
    display: none;
}

[data-state="success"] #sib-form {
    display: none;
}

[data-state="success"] #success-message {
    display: block;
}

.progress-indicator__icon {
    display: none;
    width: 20px;
    height: 20px;
    animation: rsvp-spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

[data-state="loading"] .progress-indicator__icon {
    display: inline-block;
}

.input--hidden {
    display: none !important;
}

.newsletter-headline-wrapper {
    padding: 6px 0 10px;
}

.newsletter-body-content {
    padding: 6px 0 12px;
}

.newsletter-input-wrapper {
    padding: 8px 0 12px;
    width: 100%;
}

.newsletter-submit-row {
    padding: 8px 0 12px;
    text-align: center;
}

.newsletter-disclaimer-wrapper {
    padding: 6px 0;
    text-align: center;
}

#sib-container input::placeholder {
    font-family: 'Familjen Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.22rem;
    font-weight: 400;
    text-align: center;
    color: var(--clr-placeholder);
    opacity: 1;
}

#sib-container a {
    text-decoration: underline;
    color: var(--clr-link);
}

.newsletter-section .form__entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.newsletter-section .form__label-row {
    width: 100%;
}

.newsletter-section .entry__field {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    /* Column, so the visible <label> sits ABOVE the input. As a row it sat
       beside it and squeezed the input to 501px of its 560px. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.newsletter-section .entry__field:focus-within {
    box-shadow: none !important;
}

.newsletter-section .entry__field input.input {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    padding: 16px 22px;
    height: auto !important;
    font-family: 'Familjen Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.22rem;
    font-weight: 600;
    color: var(--clr-black);
    background-color: var(--clr-white) !important;
    border: 2px solid rgba(0, 0, 0, 0.16) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.newsletter-section .entry__field input.input:focus,
.newsletter-section .entry__field input.input:focus-visible {
    outline: none !important;
    border-color: var(--clr-black) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

.newsletter-section .entry__error {
    text-align: center;
    margin: 8px auto 0;
    width: 100%;
    max-width: 560px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--clr-red-accent);
}

.newsletter-section .sib-form-block__button {
    padding: 16px 60px;
    font-size: 1.25rem;
    box-shadow: 0 4px 14px rgba(3, 69, 170, 0.3);
}

.newsletter-disclaimer-text p {
    font-size: 0.88rem !important;
    line-height: 1.5;
    color: #4a5568 !important;
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.site-footer {
    background-color: var(--clr-white);
    padding: 3.5rem 1.5rem;
    width: 100%;
    border-top: 1px solid #000000;
    color: #000000;
}

.footer-container {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-brand-side {
    max-width: 700px;
}

.footer-brand-name {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #000000;
    margin-bottom: 0.4rem;
}

.footer-nonprofit-tag {
    font-size: 0.85rem;
    color: #000000;
    line-height: 1.5;
}

.footer-nonprofit-tag a {
    color: #000000;
    text-decoration: underline;
    font-weight: 700;
    transition: color 0.25s ease;
}

.footer-nonprofit-tag a:hover {
    color: var(--clr-red-accent);
}

.footer-meta-side {
    text-align: right;
    font-size: 0.85rem;
    color: #000000;
    line-height: 1.5;
}

.footer-copyright,
.footer-email {
    color: #000000;
}

.footer-email-btn {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
}

.footer-email-btn:focus-visible {
    outline: 2px solid var(--clr-red-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

.footer-copy-toast {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    background-color: #111111;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    z-index: 10;
}

.footer-copy-toast::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 14px;
    border-width: 4px;
    border-style: solid;
    border-color: #111111 transparent transparent transparent;
}

.footer-copy-toast.is-shown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ==========================================================================
   11. RSVP POPUP MODAL
   ========================================================================== */
@keyframes modal-slide-up {
    from {
        transform: translateY(15px);
    }

    to {
        transform: translateY(0);
    }
}

.rsvp-modal-hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.rsvp-modal-visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

#rsvp-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    padding: 1.5rem;
}

.rsvp-modal-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
}

.rsvp-modal-content {
    position: relative;
    z-index: 1;
    background-color: var(--clr-white);
    border-radius: 16px;
    padding: 2.5rem 2.2rem 2.2rem;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    animation: modal-slide-up 0.25s ease forwards;
}

.rsvp-close-icon {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    background: none;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--clr-black);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 6px;
    transition: color 0.15s ease, transform 0.15s ease;
}

.rsvp-close-icon:hover {
    color: var(--clr-black);
    transform: scale(1.1);
}

.rsvp-title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--clr-black);
    margin: 0 0 0.5rem 0;
    line-height: 1.1;
}

.rsvp-subtitle {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #000000;
    margin: 0 0 1.6rem 0;
    line-height: 1.45;
}

.rsvp-input-group {
    margin-bottom: 1.2rem;
    text-align: left;
}

.rsvp-email-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.85rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--clr-black);
    background-color: var(--clr-white);
    border: 2px solid rgba(0, 0, 0, 0.16);
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rsvp-email-input::placeholder {
    font-weight: 400;
    color: var(--clr-placeholder);
    opacity: 1;
}

.rsvp-email-input:focus,
.rsvp-email-input:focus-visible {
    outline: none;
    border-color: var(--clr-black);
    background-color: var(--clr-white);
    box-shadow: 0 0 0 1.5px var(--clr-black);
}

.rsvp-error-text {
    font-size: 0.85rem;
    color: var(--clr-red-accent);
    margin-top: 0.4rem;
    font-weight: 600;
}

.rsvp-submit-btn {
    width: 100%;
    padding: 0.85rem 1.5rem;
    font-family: var(--font-body);
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.rsvp-submit-btn:active {
    transform: translateY(0);
}

.rsvp-btn-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: rsvp-spin 0.6s linear infinite;
}

@keyframes rsvp-spin {
    to {
        transform: rotate(360deg);
    }
}

.rsvp-success-icon-wrap {
    margin-bottom: 1rem;
}

.rsvp-success-svg {
    width: 52px;
    height: 52px;
    color: #0B7A34;
}

.rsvp-success-title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--clr-success-text);
    margin: 0 0 1.5rem 0;
}

.rsvp-close-btn {
    background-color: var(--clr-black);
    color: var(--clr-white);
    border: none;
    border-radius: var(--radius-pill);
    padding: 0.65rem 2.2rem;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.rsvp-close-btn:hover {
    background-color: #333333;
    transform: scale(1.04);
}

/* ==========================================================================
   12. RESPONSIVENESS & BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
    .app-steps-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .app-title-col {
        position: static;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .board-sticky-track {
        gap: 5rem;
    }

    .row-artham,
    .row-panshul,
    .row-arham {
        justify-content: center;
    }

    .chapter-content-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .chapter-image {
        min-height: 340px;
        max-height: 480px;
    }

    .chapter-image-wrapper {
        min-height: 340px;
        max-height: 480px;
    }
}

@media (max-width: 768px) {
    .navbar {
        top: 10px;
        padding: 0 0.75rem;
        margin-bottom: -84px;
    }

    .nav-container {
        padding: 0.7rem 1.25rem 0.7rem 0.85rem;
        min-height: 72px;
        border-radius: var(--radius-md);
        /* 12px mobile */
    }

    .nav-logo-img {
        height: 46px;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-links {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        padding: 0.75rem;
        background-color: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(35px);
        -webkit-backdrop-filter: blur(35px);
        border: 1px solid rgba(255, 255, 255, 0.7);
        border-radius: var(--radius-md);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
        display: none;
    }

    .nav-links.is-open {
        display: flex;
    }

    .nav-link,
    .nav-rsvp-btn {
        font-size: 1rem;
        padding: 0.7rem 0.9rem;
        text-align: left;
        width: 100%;
    }

    .nav-rsvp-btn {
        text-align: center;
        margin-top: 0.35rem;
    }

    .hero-section {
        padding: 7rem 1rem 2.5rem;
    }

    .events-section {
        padding: 4rem 1.25rem;
    }

    .events-container {
        min-height: auto;
    }

    .events-actions {
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }

    .btn-tbd,
    .btn-rsvp {
        width: 100%;
        max-width: 280px;
    }

    .volunteer-section,
    .chapter-section {
        padding: 3.5rem 1.25rem;
    }

    .application-section {
        padding: 6rem 1.25rem 3.5rem;
    }

    .newsletter-section {
        padding: 6rem 1.25rem 2rem;
    }

    .site-footer {
        padding: 2.5rem 1.25rem;
    }

    .volunteer-header {
        flex-direction: column;
        gap: 1.25rem;
    }

    .volunteer-desc {
        font-size: 1.15rem;
        line-height: 1.55;
    }

    .board-sticky-row {
        position: static;
        /* Let cards flow naturally on mobile */
    }

    .board-sticky-track {
        gap: 3rem;
    }

    .board-heading-wrapper {
        position: static;
        margin-bottom: 2rem;
    }

    .board-bio {
        font-size: 1.05rem;
        line-height: 1.55;
    }

    .chapter-card {
        padding: 2rem 1.6rem;
    }

    .chapter-card-title {
        font-size: 1.5rem;
    }

    .chapter-card-text {
        font-size: 1.05rem;
    }

    .chapter-card-lead {
        font-size: 1.12rem;
    }

    .chapter-bullets li {
        font-size: 1.02rem;
    }

    .newsletter-body-wrapper p,
    .newsletter-body-text p {
        font-size: 1.1rem;
    }

    .custom-checkbox-text {
        font-size: 1.1rem;
    }

    .newsletter-section .entry__field input.input {
        font-size: 1.1rem;
        padding: 14px 18px;
    }

    .newsletter-section .sib-form-block__button {
        font-size: 1.15rem;
        padding: 14px 44px;
    }

    .chapter-step-item {
        font-size: 1rem;
    }

    .prize-art-icon {
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.12));
    }

    .prize-trophy-left {
        width: 48px;
        top: -16px;
        left: -10px;
    }

    .prize-invader {
        width: 42px;
        bottom: -15px;
        left: 12%;
    }

    .prize-console {
        width: 50px;
        top: auto;
        bottom: -18px;
        right: 14px;
    }

    .prize-icecream {
        width: 46px;
        top: -20px;
        right: 24px;
    }

    .prize-coin {
        width: 40px;
        bottom: -16px;
        right: -8px;
    }

    .prize-trophy-right {
        width: 52px;
        bottom: -20px;
        right: 32px;
    }

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

    .footer-brand-side,
    .footer-meta-side {
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .nav-container {
        padding: 0.65rem 0.85rem 0.65rem 0.6rem;
    }

    .newsletter-section #sib-container {
        padding: 1.5rem 1.1rem;
    }
}

/* ==========================================================================
   13. PHASE 3/4 ADDITIONS
   ========================================================================== */

/* Hero tagline */
.hero-tagline {
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 2.2vw, 1.6rem);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
    text-align: center;
    color: var(--clr-black);
    max-width: 64ch;
    margin: 0 auto 3.5rem;
}

/* The tagline now sits between the title and the scroll arrow,
   so pull the title's bottom margin up. */
.hero-title {
    margin-bottom: 1.25rem;
}

/* Clickable email addresses */
.email-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.25s ease;
    /* A 34-character address is one unbreakable token. Inside a grid item
       (min-width: auto) that forces the whole track wider than the viewport,
       pushing the page 40px sideways at 390px. Let it wrap instead. */
    overflow-wrap: anywhere;
}

.email-link:hover {
    color: var(--clr-red-accent);
}

/* Visible field labels */
.field-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--clr-black);
    text-align: center;
}

.rsvp-input-group .field-label {
    text-align: left;
}

/* Volunteer call to action */
.volunteer-copy {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.volunteer-desc {
    flex: none;
}

.btn-apply {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.85rem 2.5rem;
    min-width: 220px;
    text-align: center;
    background-color: var(--clr-blue-accent);
    color: var(--clr-white);
    border-radius: var(--radius-pill);
    font-size: 1rem;
    font-weight: 700;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.btn-apply:hover {
    background-color: var(--clr-blue-dark);
    transform: translateY(-2px);
}

.btn-apply:active {
    transform: translateY(1px);
    transition: transform 0.05s ease;
}

/* Footer social row */
.footer-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    line-height: 0;
    border-radius: 50%;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer-social a:hover {
    transform: scale(1.12);
    opacity: 0.85;
}

.footer-social {
    margin-top: 0.85rem;
    justify-content: flex-start;
}

/* Modal scroll lock, driven by assets/js/modal.js */
body.modal-open {
    overflow: hidden;
}

/* ==========================================================================
   14. REDUCED MOTION
   Users who ask their OS to reduce motion get a still page.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .hero-scroll-indicator,
    .prize-art-icon,
    .rsvp-btn-spinner {
        animation: none;
    }

    .board-card,
    .chapter-card,
    .step-card,
    .nav-logo-img,
    .nav-rsvp-btn,
    .btn-rsvp,
    .rsvp-submit-btn,
    .newsletter-section .sib-form-block__button,
    .footer-destroy a {
        transition: none;
    }

    .board-card:hover,
    .chapter-card:hover,
    .step-card:hover,
    .nav-logo a:hover .nav-logo-img,
    .volunteer-image-wrapper:hover .volunteer-image,
    .chapter-image-card:hover .chapter-image,
    .board-card:hover .board-photo,
    .footer-destroy a:hover {
        transform: none;
    }
}