/* ═══════════════════════════════════════════════════════════════
   Life of the Party — Custom Stylesheet
   Mirrors the Vue/Vite original site
   Stack: Bootstrap 5 + AOS + Swiper + custom
════════════════════════════════════════════════════════════════ */

/* ─── CSS Custom Properties ────────────────────────────────── */
:root {
    --background:          rgb(11, 6, 11);
    --text:                rgb(250, 250, 250);
    --black:               rgb(2, 2, 2);
    --white:               rgb(250, 250, 250);
    --brand-color:         rgb(78, 171, 232);
    --brand-color-light:   rgb(10, 141, 228);
    --brand-inner-color:   rgb(201, 238, 253);
    --brand-two-color:     rgb(233, 51, 204);
    --brand-two-inner:     rgb(245, 191, 243);
    --dark-gray:           rgb(51, 51, 51);
    --gray:                rgb(164, 163, 164);
    --light-gray:          rgb(240, 240, 240);

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-md:   1.125rem;
    --text-lg:   1.25rem;
    --text-xl:   1.5rem;
    --text-2xl:  2rem;
    --text-3xl:  2.5rem;
    --text-4xl:  3.5rem;

    --header-h:  70px;
    --max-w:     1240px;
    --section-gap: clamp(50px, 8vw, 100px); 

    /* Fluid type scale (matches original) */
    --step--1: clamp(0.7956rem, 0.8015rem + -0.0076vi, 0.8rem);
    --step-0:  clamp(0.9775rem, 0.923rem  + 0.3261vi,  1.125rem);
    --step-1:  clamp(1.25rem,   1.1315rem + 0.5926vi,  1.5908rem);
    --step-2:  clamp(1.5625rem, 1.3236rem + 1.1945vi,  2.2493rem);
    --step-3:  clamp(1.9531rem, 1.5262rem + 2.1346vi,  3.1805rem);
    --step-4:  clamp(2.4414rem, 1.7263rem + 3.5754vi,  4.4973rem);
    --step-5:  clamp(3.0518rem, 1.9014rem + 5.752vi,   6.3592rem);

    /* Brand color as RGB for box-shadow alpha usage */
    --brand-two-color-rgb: 233, 51, 204;
}

/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: var(--step-0); overflow-x: hidden; }

body {
    background-color: var(--background);
    color: var(--text);
    font-family: 'Poppins', 'Open Sans', sans-serif;
    font-size: var(--step-0);
    font-weight: 300;
    line-height: 1.4;
    overflow-x: hidden;
}

img, picture, video, canvas { display: block; width: 100%; height: 100%; }
img { object-fit: cover; }
svg { display: block; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
fieldset { border: none; }
button { cursor: pointer; }

/* ─── Bootstrap Reboot neutralisation ───────────────────────
   Bootstrap's Reboot uses element selectors (higher specificity
   than our universal * reset). These same-specificity rules
   placed after bootstrap.min.css in the cascade win cleanly.  */
ul, ol, dl   { margin: 0; padding: 0; }
p            { margin: 0; }
h1, h2, h3,
h4, h5, h6   { margin: 0; }
figure       { margin: 0; }
blockquote   { margin: 0; padding: 0; }
table        { border-collapse: collapse; }

/* ─── Typography ─────────────────────────────────────────────── */
/* Base: Poppins for all headings (matches original site) */
h1, h2, h3, h4 { font-family: 'Poppins', sans-serif; line-height: 1.2; }
h5 { font-family: 'Barlow', sans-serif; font-weight: 500; }
p  { font-family: 'Poppins', sans-serif; line-height: 1.5; max-width: 53ch; }

/* Section heading: Poppins 800, step-3 fluid size (matches original) */
.section-title h3 {
    font-size: var(--step-3);
    font-weight: 800;
    letter-spacing: 0.08em;
}

/* Bebas Neue applied only to specific display elements */
.list-head,
.error-content h1,
.error-content h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1.1;
}

.step-1 { font-size: var(--step-1); }
.step-2 { font-size: var(--step-2); }
.step-3 { font-size: var(--step-3); }
.step-4 { font-size: var(--step-4); }
.step-5 { font-size: var(--step-5); }

/* ─── Layout ─────────────────────────────────────────────────── */
.inner-column {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 60px);
}

.GeneralContainer {
    width: 100%;
    padding: var(--section-gap) 0;
    position: relative;
    isolation: isolate;
}

.GeneralContainer.landing {
    padding-top: var(--section-gap);
    overflow: visible;
}

/* ─── Launch overlay ─────────────────────────────────────────── */
/* Body locked while overlay is present */
body.is-loading { overflow: hidden; }

/* Overlay is styled via inline <style> in basic.php for FOUC prevention.
   JS in main.js handles fade-out via .fade-out class. */

.launch .pulsing-circle {
    width: 90%;
    height: 100%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    position: absolute;
    background: radial-gradient(circle, rgba(233,51,204,0.20) 30%, transparent 80%);
    display: flex;
    justify-content: center;
    align-items: center;
    filter: blur(30px);
    pointer-events: none;
}


/* ─── Header ─────────────────────────────────────────────────── */
.overflow-hidden { overflow: hidden; }

@keyframes slideFromTop {
    0%  { opacity: 0; transform: translateY(-100%); }
    to  { opacity: 1; transform: translateY(0); }
}

.site-header {
    animation: slideFromTop 0.8s forwards;
    width: 100%;
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    color: var(--text);
    background-color: rgba(11, 6, 11, 0.7);
    height: var(--header-h);
    display: flex;
    align-items: center;
}

#main-content { padding-top: var(--header-h); }

.site-header .inner-column {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0.3rem 1.05rem;
    max-width: 1240px;
}

@media (min-width: 1000px) {
    .site-header .inner-column { padding: 0.8rem 2.2rem; }
}

/* ── Mobile bar (small-width) — row-reverse: hamburger left, donate right ── */
.small-width {
    display: flex;
    width: 100%;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
}

/* ── Desktop nav (big-width) — row-reverse: nav links left, donate right ── */
.big-width {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: space-between;
}

@media (min-width: 900px) {
    .big-width   { display: flex; }
    .small-width { display: none; opacity: 0; pointer-events: none; }
}

/* ── Desktop nav links ──────────────────────────────────────── */
.nav-links {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 1.2vmin;
    flex: 1;
    position: relative;
}

.nav-links li {
    opacity: 0.7;
    transition: opacity 0.3s ease-in-out;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.nav-links li:hover { opacity: 1; }

.nav-links li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 5px;
    gap: 4px;
    font-size: var(--step-0);
    color: var(--text);
    white-space: nowrap;
}

.nav-links li:has(a.active) { opacity: 1; }

.volunteer-link {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 24px;
}

.small-width .volunteer-link {
    margin-left: auto;
}

.volunteer-link svg {
    height: 0.8em;
    width: 0.8em;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.55;
}

/* ── Donate button ──────────────────────────────────────────── */
.donate-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-two-color);
    letter-spacing: 0.1em;
    text-decoration: none;
    flex-shrink: 0;
    font-family: 'Barlow', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
}

.donate-btn span {
    text-transform: uppercase;
}

.donate-btn .heart {
    width: 1.6em;
    height: 1.6em;
    fill: var(--brand-two-color);
    flex-shrink: 0;
}

/* ── Flicker animation (heart icon) ────────────────────────── */
.flicker { animation: flicker 2s infinite; }

@keyframes flicker {
    0%, to   { opacity: 0.55; }
    50%, 60% { scale: 1.1; opacity: 1; }
    75%      { opacity: 0.8; }
}

/* ── Hamburger button ───────────────────────────────────────── */
.hamburger-button {
    color: inherit;
    cursor: pointer;
    align-self: flex-start;
    user-select: none;
    background-color: transparent;
    border: none;
    margin: 0;
    padding: 0;
    width: 35px;
    height: 40px;
    position: relative;
}

.hamburger-button .mbykw {
    opacity: 0.9;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 40px;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.hamburger-button .mbykw span {
    background-color: var(--light-gray);
    transform-origin: 50% center;
    opacity: 1;
    border-radius: 2px;
    width: 50%;
    height: 2px;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: absolute;
    top: 50%;
}

.hamburger-button .mbykw span:first-child  { transform: translateY(-6px); }
.hamburger-button .mbykw span:nth-child(3) { transform: translateY(6px); }

.site-header.menu-open .mbykw span              { background-color: #fafafa; }
.site-header.menu-open .mbykw span:first-child  { transform: rotate(45deg); }
.site-header.menu-open .mbykw span:nth-child(2) { opacity: 0; }
.site-header.menu-open .mbykw span:nth-child(3) { transform: rotate(-45deg); }

/* ── Glass container (mobile menu backdrop) ─────────────────── */
.glass-container {
    min-height: 100%;
    z-index: 100;
    display: block;
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    transition: opacity 0.5s ease;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transform: translateZ(0);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
}

.glass-container.menu-open {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s cubic-bezier(0.54, -0.01, 0.44, 0.73);
}

/* ── Modal content (mobile menu panel, slides from left) ────── */
.modal-content {
    background-color: #0b060b;
    color: #fafafa;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(78, 171, 232, 0.3);
    transition: left 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s ease;
    position: absolute;
    left: -100%;
    bottom: 0;
    right: 0;
    top: 0;
}

.glass-container.menu-open .modal-content {
    transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    left: 0;
}

.modal-content nav {
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    display: flex;
    overflow-x: hidden;
    overflow-y: auto;
}

/* ── Mobile menu numbered links ─────────────────────────────── */

.modal-btns {
    display: flex;
    flex-direction: column;
    padding-left: 1rem;
    padding-top: calc(var(--header-h) + 20px);
}

.modal-btns li {
    opacity: 0;
    pointer-events: none;
    position: relative;
    display: flex;
    transform: translateX(-20%);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.modal-content.modal-open .modal-btns li {
    opacity: 1;
    pointer-events: all;
    transform: translateX(0);
}

/* Staggered entry delays */
.modal-content.modal-open .modal-btns li:nth-child(1) { transition-delay: 0.00s; }
.modal-content.modal-open .modal-btns li:nth-child(2) { transition-delay: 0.10s; }
.modal-content.modal-open .modal-btns li:nth-child(3) { transition-delay: 0.20s; }
.modal-content.modal-open .modal-btns li:nth-child(4) { transition-delay: 0.30s; }
.modal-content.modal-open .modal-btns li:nth-child(5) { transition-delay: 0.40s; }
.modal-content.modal-open .modal-btns li:nth-child(6) { transition-delay: 0.50s; }
.modal-content.modal-open .modal-btns li:nth-child(7) { transition-delay: 0.60s; }
.modal-content.modal-open .modal-btns li:nth-child(8) { transition-delay: 0.70s; }

.modal-btns li a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 10px 10px 50px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'Barlow', sans-serif;
    width: 100%;
}

.modal-btns li span {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    scale: 0.4;
    width: 50px;
    height: 50px;
    font-weight: 200;
    bottom: 5px;
    left: 0;
    letter-spacing: 0.1em;
    transition: scale 0.4s ease-in-out;
    font-family: 'Barlow', sans-serif;
}

.modal-btns li:hover span { scale: 0.5; }

.modal-btns li::after {
    content: '';
    width: 100%;
    height: 1px;
    background-color: var(--brand-two-color);
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 0;
    transition: left 0.3s ease-in-out, rotate 0.3s ease-in-out;
}

.modal-btns li::before {
    content: '';
    width: 100%;
    height: 1px;
    background-color: #0b060b;
    position: absolute;
    left: 40px;
    bottom: 10px;
    z-index: 1;
    transition: width 0.3s ease-in-out, rotate 0.3s ease-in-out;
}

.modal-btns li:hover::before { width: 0; }

.modal-btns li a svg {
    height: 0.56em;
    width: 0.56em;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.modal-btns li a:hover svg { transform: translate(2px, -2px); }

/* ─── Section Titles ─────────────────────────────────────────── */
.section-title {
    width: 100%;
    margin-bottom: 20px;
}

.section-title.black-text h3 { color: var(--black); }

/* ─── General Button ─────────────────────────────────────────── */
.general-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    background-color: #1a558b;
    color: #fff;
    border: none;
    padding: 12px 50px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
    text-decoration: none;
    position: relative;
    z-index: 2;
    border-radius: 20px;
}

.general-btn .arrow {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    transition: transform 0.3s ease-in-out;
}

.general-btn:hover .arrow {
    transform: scale(1.4);
}

/* Blue glow behind button */
.general-btn::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    left: 0;
    bottom: 0;
    background-color: #0a6bc0;
    filter: blur(20px);
    transition: background-color 0.3s ease-in-out;
    pointer-events: none;
    border-radius: 20px;
}

.general-btn:hover::after {
    background-color: #143a5cbc;
}

/* ─── Landing / Hero ─────────────────────────────────────────── */
.section-landing {
    width: 100%;
    min-height: 30vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 0 4rem;
    position: relative;
}

@media (min-width: 800px) {
    .section-landing { padding-top: 3rem; }
}

/* Center all hero content */
.landing-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
    width: 100%;
}

.landing-logo {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    height: auto;
    display: block;
    animation: pulse-logo 3s infinite alternate;
    user-select: none;
    pointer-events: none;
}

.landing-logo img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

/* Pink/magenta bloom — static blurred background + pulsing box-shadow on :before */
.pulsing-circle {
    position: absolute;
    width: 90%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(233, 51, 204, 0.20) 30%,
        transparent 80%
    );
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    filter: blur(30px);
    z-index: -1;
    pointer-events: none;
}

.pulsing-circle::before {
    content: '';
    width: 50%;
    height: 50%;
    border-radius: 70%;
    box-shadow: 0 0 40px 20px rgba(233, 51, 204, 0.20);
    animation: pulse 2s infinite alternate;
}

@keyframes pulse {
    0%   { transform: scale(0.8); opacity: 0.7; box-shadow: 0 0 60px 30px var(--brand-two-color); }
    50%  { transform: scale(1);   opacity: 1;   box-shadow: 0 0 40px 40px var(--brand-two-color); }
    100% { transform: scale(0.8); opacity: 0.7; box-shadow: 0 0 60px 30px var(--brand-two-color); }
}

@keyframes pulse-logo {
    0%   { scale: 1; }
    50%  { scale: 1.006; }
    100% { scale: 1; }
}

.landing-sup {
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    padding-top: 10px;
    margin: 0 auto;
}

.flex-holder {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 10px;
    color: var(--brand-color);
    letter-spacing: 0.05em;
    transition: color 0.2s;
    margin-top: 10px;
}
.flex-holder:hover { color: var(--brand-color-light); }
.flex-holder svg { fill: currentColor; flex-shrink: 0; }

/* ─── Save Lives Now ─────────────────────────────────────────── */
.section-save-lives {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 80px 0;
}

/* Content centered — h2 and button stack vertically, centered */
.save-lives-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 100%;
    margin: 0 auto;
    min-height: 350px;
}

.save-lives-heading {
    font-weight: 800;
    font-size: var(--step-4);
    letter-spacing: 0.08em;
    line-height: 1.1;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    margin: 0 auto;
}

/* Three rings expand outward like ripples (zoom out and fade) */
.spinner-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: -1;
}

.spinner-item {
    border: 5px solid var(--brand-two-color);
    border-radius: 50%;
    height: 500px;
    width: 500px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: zoom 4s linear 0.75s infinite;
    box-shadow: 4px 4px 20px 1px rgba(233, 51, 204, 0.7);
}

.spinner-item--2 { animation-delay: 2.25s; }
.spinner-item--3 { animation-delay: 3.75s; }

@keyframes zoom {
    0%  { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
    50% { opacity: 0.9; }
    100%{ transform: translate(-50%, -50%) scale(1);   opacity: 0; }
}

/* ─── Mission ────────────────────────────────────────────────── */
.module-mission {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.module-mission #section-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 760px;
}

.module-mission #section-content p {
    color: rgba(250, 250, 250, 0.9);
}

/* ── Dot grid decoration ─────────────────────────────────────
   Starts off-screen right (right:-100%, opacity:0), slides in
   when .is-visible is added by IntersectionObserver in main.js  */
.dot-grid-left {
    position: absolute;
    right: -100%;
    top: -20px;
    z-index: -1;
    opacity: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: fit-content;
    overflow: hidden;
    pointer-events: none;
    transition: right 0.6s ease-in-out, opacity 0.5s ease-in-out;
}

@media (min-width: 460px) {
    .dot-grid-left { max-height: 660px; }
}

.dot-grid-left.is-visible {
    right: 0;
    opacity: 1;
}

.dot-grid-left .dot-wrapper {
    padding: 0.35rem;
    border-radius: 4px;
    height: fit-content;
}

.dot-grid-left .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(195deg, var(--background), var(--brand-two-color));
    opacity: 0.45;
    animation: dot-flicker 1.75s infinite;
    box-shadow: 0 2px 4px rgb(var(--brand-two-color-rgb) / 0.5);
}

@keyframes dot-flicker {
    0%, to  { opacity: 0.45; }
    50%     { scale: 1.1; opacity: 1; }
    75%     { opacity: 0.8; }
}

/* ─── Naloxone ───────────────────────────────────────────────── */
.module-naloxone {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

/* Decorative heart with vital line */
.nar-reveal {
    position: absolute;
    right: 0;
    top: 0;
    width: 35%;
    max-width: 280px;
    height: auto;
    z-index: -1;
    pointer-events: none;
}
.nar-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    position: relative;
}
@media (max-width: 1024px) {
    .nar-reveal {
        top: 350px;
        right: -25%;
        width: 65%;
        max-width: 260px;
    }
    .nar-container {
        opacity: 0.2;
    }
}
.vital-line {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 8px rgba(255, 32, 215, 0.4));
    position: relative;
    z-index: 1;
}
.nar-container .pulsing-circle {
    width: 80%;
    height: 120%;
    opacity: 0.3;
    animation: pulse-subtle 2s infinite alternate;
}
@keyframes pulse-subtle {
    0%   { opacity: 0.15; transform: translate(-50%, -50%) scale(0.85); }
    100% { opacity: 0.4;  transform: translate(-50%, -50%) scale(1.05); }
}

.naloxone-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.naloxone-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.naloxone-text > p {
    font-size: var(--text-base);
    line-height: 1.75;
    color: rgba(250,250,250,0.9);
    max-width: 65ch;
    margin-bottom: 20px;
}

.list-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (min-width: 700px) {
    .list-container { flex-direction: row; gap: 40px; }
    .list-container ul,
    .list-container ol { flex: 1; }
}

.list-head {
    font-family: 'Bebas Neue', sans-serif;
    font-size: var(--text-lg);
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    color: var(--brand-color);
}

/* Standard bullet/numbered lists — matching original */
.list-container ul li {
    list-style-type: disc;
    margin-left: 18px;
    padding: 3px 0;
    font-size: var(--step-0);
    line-height: 1.6;
    color: rgba(250,250,250,0.85);
}

.list-container ol li {
    list-style-type: decimal;
    margin-left: 18px;
    padding: 3px 0;
    font-size: var(--step-0);
    line-height: 1.6;
    color: rgba(250,250,250,0.85);
}

/* Disclaimer — plain centered text, no box */
.section-footer {
    padding-top: 24px;
    background: none;
    border-left: none;
    border-radius: 0;
    text-align: center;
    width: 100%;
}

.small-voice {
    font-size: var(--step-0);
    letter-spacing: 0.04em;
    color: var(--text);
    line-height: 1.8;
    max-width: none;
    text-align: center;
}

/* ─── Naloxone V2 ────────────────────────────────────────────── */
.module-naloxone-v2 {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.nlx-header {
    text-align: left;
    margin-bottom: clamp(30px, 4vw, 50px);
}
.nlx-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: var(--step-3);
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}
.nlx-intro {
    font-size: var(--step-0);
    line-height: 1.75;
    color: rgba(250, 250, 250, 0.85);
    max-width: 65ch;
}

/* Card grid */
.nlx-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: clamp(30px, 4vw, 50px);
}
@media (min-width: 700px) {
    .nlx-cards { grid-template-columns: 1fr 1fr; }
}

.nlx-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: clamp(24px, 3vw, 36px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nlx-card-recognize { border-top: 3px solid var(--brand-two-color); }
.nlx-card-respond   { border-top: 3px solid var(--brand-color); }

.nlx-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nlx-card-recognize .nlx-card-icon { background: rgba(233, 51, 204, 0.12); color: var(--brand-two-color); }
.nlx-card-respond .nlx-card-icon   { background: rgba(78, 171, 232, 0.12); color: var(--brand-color); }

.nlx-card-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    font-weight: 400;
    letter-spacing: 1.5px;
    color: var(--text);
}

.nlx-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 0;
    list-style: none;
}
.nlx-list li {
    font-size: var(--step-0);
    line-height: 1.6;
    color: rgba(250, 250, 250, 0.8);
    padding-left: 20px;
    position: relative;
}
.nlx-card-recognize .nlx-list li::before {
    content: '\203A';
    position: absolute;
    left: 2px;
    color: var(--brand-two-color);
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1.4;
}
.nlx-list-numbered {
    list-style: decimal;
    padding-left: 20px;
}
.nlx-list-numbered li { padding-left: 4px; }
.nlx-card-respond .nlx-list li::marker   { color: var(--brand-color); }

/* Reassurance callout */
.nlx-callout {
    margin-bottom: 0;
}
.nlx-callout-inner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: clamp(20px, 3vw, 28px);
    border-radius: 14px;
    background: rgba(78, 171, 232, 0.06);
    border: 1px solid rgba(78, 171, 232, 0.15);
}
.nlx-callout-icon {
    flex-shrink: 0;
    color: var(--brand-color);
    margin-top: 2px;
}
.nlx-callout-inner > div {
    flex: 1;
    min-width: 0;
}
.nlx-callout-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(250, 250, 250, 0.85);
}
.nlx-callout-text strong {
    color: var(--text);
}


/* ─── Events ─────────────────────────────────────────────────── */
.module-events {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

/* Stacked cards — always column */
.events-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: #4c2f4f;
    border-radius: 15px;
    overflow: hidden;
    padding: 16px;
}

/* Each card: mobile = column, desktop = row (flyer left, info right) */
.event-card {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.04);
    padding: 12px;
    gap: 12px;
}

@media (min-width: 600px) {
    .event-card { flex-direction: row; align-items: stretch; gap: 0; }
}

/* Flyer image */
.event-card .flyer {
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    flex-shrink: 0;
}

@media (min-width: 600px) {
    .event-card .flyer {
        width: 45%;
        aspect-ratio: unset;
        height: 420px;
    }
}

.event-card .flyer {
    border-radius: 8px;
    overflow: hidden;
}

.event-card .flyer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Event info panel */
.event-card .event-info {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
}

.event-card .event-info > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

/* Title + description block */
.event-card .header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.event-card .header-content h2 {
    font-size: var(--step-1);
    font-weight: 500;
    color: var(--text);
    text-align: center;
    max-width: fit-content;
    border-bottom: 2px solid rgba(255,255,255,0.7);
    padding-bottom: 4px;
}

.event-card .details {
    font-size: var(--text-sm);
    color: var(--text);
    line-height: 1.5;
    text-align: center;
    max-width: 40ch;
}

.event-card .details a { color: var(--brand-color); }
.event-card .details a:hover { text-decoration: underline; }

/* Date / venue / location */
.event-card .text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.event-card .text-content p {
    font-size: var(--step-0);
    font-weight: 400;
    color: rgba(250,250,250,0.85);
    line-height: 1.6;
    text-align: center;
    max-width: none;
}

/* Black "Check It Out" button */
.event-card .detail-link {
    display: inline-block;
    background-color: #000;
    color: #fff;
    padding: 10px 28px;
    border-radius: 8px;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: background-color 0.3s ease-in-out;
    text-align: center;
}
.event-card .detail-link:hover { background-color: rgba(0,0,0,0.65); }

/* Past event: full-card dark overlay with large centered text */
.past-event {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: grid;
    place-items: center;
    z-index: 2;
    pointer-events: none;
    border-radius: 10px;
}
.past-event h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: var(--step-4);
    color: #fff;
    letter-spacing: 0.06em;
}

/* ─── Gallery ────────────────────────────────────────────────── */
.gallery-section { padding-top: 0; }  /* no extra top gap — flows from events */

.photo-gallery { width: 100%; }

/* 2-col mobile → 3-col 700px → 4-col 1000px, with staggered offsets */
.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    place-items: center;
    /* Cap width so columns never exceed the picture max-width (260px) */
    max-width: calc(2 * 260px + 10px);
    margin: 0 auto;
}

.gallery picture {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1;
    overflow: hidden;
    background-color: rgba(233, 51, 204, 0.2);
}

/* Staggered vertical offsets — odd flush right, even flush left + drop */
.gallery picture:nth-of-type(odd)  { justify-self: flex-end; }
.gallery picture:nth-of-type(even) { justify-self: flex-start; transform: translateY(40px); }

.gallery picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: gallery-fade-in 1s ease both;
    transition: transform 0.3s ease-in-out;
}

.gallery picture img:hover { transform: scale(1.15); }

@keyframes gallery-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (min-width: 700px) {
    .gallery {
        grid-template-columns: repeat(3, 1fr);
        max-width: calc(3 * 260px + 2 * 10px);
    }
    .gallery picture:nth-of-type(even) { transform: translateY(0); }
    .gallery picture:nth-of-type(2),
    .gallery picture:nth-of-type(5)   { transform: translateY(100px); }
    .gallery picture:last-child        { grid-column: 3 / -1; }
}

@media (min-width: 1000px) {
    .gallery {
        grid-template-columns: repeat(4, 1fr);
        max-width: calc(4 * 260px + 3 * 10px);
    }
    .gallery picture:nth-of-type(even) { transform: translateY(60px); }
    .gallery picture:nth-of-type(5)    { transform: translateY(0); }
    .gallery picture:last-child        { grid-column: 4 / -1; }
}

/* ─── Partners ───────────────────────────────────────────────── */
.GeneralContainer.partners-section { overflow-x: hidden; }
.module-partners { display: flex; flex-direction: column; gap: 12px; }

/* Pagination lives outside swiper — plain flow element */
.partners-pagination {
    text-align: center;
    min-height: 20px;
}
/* Swiper injects bullet spans into this container */
.partners-pagination .swiper-pagination-bullet {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    opacity: 1;
    margin: 0 4px;
    cursor: pointer;
    transition: background 0.2s;
}
.partners-pagination .swiper-pagination-bullet-active {
    background: var(--brand-color);
}

.partners-swiper {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.partners-swiper .swiper-slide { height: auto; }

/* Card is 89% of slide width, centered — nav buttons sit in the ~5.5% gap each side */
.partner-card {
    display: flex;
    flex-direction: column;
    width: 89%;
    margin: 0 auto;
    min-height: 500px;
    cursor: grab;
    color: #fff;
}
.partner-card:active { cursor: grabbing; }

/* Full-width white logo area (relative to the 89% card) */
.partner-card .picture-holder {
    width: 100%;
    background-color: #fff;
    height: 200px;
    flex-shrink: 0;
}
.partner-card .picture-holder img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1rem 2rem;
    box-sizing: border-box;
}

.partner-card h4 {
    font-size: var(--step-1);
    font-weight: 700;
    text-align: center;
    color: #fff;
    padding: 1.4rem 1.7rem 0.6rem;
    line-height: 1.3;
}

.partner-card > p {
    font-size: var(--step-0);
    line-height: 1.7;
    flex: 1;
    color: #fff;
    padding: 0.5rem 1.7rem 1.4rem;
    max-width: 63ch;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.partner-card .general-btn {
    margin: auto 1.7rem 1.7rem;
    width: calc(100% - 3.4rem);
    justify-content: center;
}

/* Nav buttons at swiper edges — live in the gap beside the 89% card */
.partners-swiper .swiper-button-prev,
.partners-swiper .swiper-button-next {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(180,180,180,0.2) !important;
    color: #fff !important;
    opacity: 1 !important;
    top: 50% !important;
    margin-top: 0 !important;
    transform: translateY(-50%) !important;
}
.partners-swiper .swiper-button-prev { left: 0 !important; }
.partners-swiper .swiper-button-next { right: 0 !important; }
.partners-swiper .swiper-button-prev::after,
.partners-swiper .swiper-button-next::after {
    font-size: 13px !important;
    font-weight: 700;
}
.partners-swiper .swiper-button-disabled {
    opacity: 0.3 !important;
    cursor: default;
}

/* ─── Contact ────────────────────────────────────────────────── */
.GeneralContainer.contact-section { overflow-x: hidden; }

.module-contact {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px;
    padding-bottom: 60px;
    position: relative;
}


.module-contact form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 600px) {
    .module-contact form { max-width: 60vmin; }
}

#fs-frm-inputs {
    display: block;
    border: none;
}

.module-contact label {
    display: flex;
    align-items: baseline;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 0.5rem;
    padding-top: 0.2rem;
}

.module-contact input,
.module-contact textarea {
    display: block;
    width: 100%;
    background-color: #ffffffe6;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 0;
    color: rgb(13, 15, 15);
    padding: 0.75em 1rem;
    margin-bottom: 1.5rem;
    font-family: 'Poppins', sans-serif;
    font-size: var(--step-0);
    resize: none;
    transition: background-color 0.2s;
}

.module-contact input::placeholder,
.module-contact textarea::placeholder { color: #000000df; }

.module-contact input:focus,
.module-contact textarea:focus {
    background-color: #fff;
    outline: thin solid gray;
    outline-offset: -1px;
}

.module-contact .general-btn {
    align-self: flex-start;
}

/* ─── Team Preview (Home) ─────────────────────────────────────── */
/* Blue gradient background matching original */
.team-preview {
    background: linear-gradient(
        180deg,
        rgba(11, 6, 11, 0.3),
        rgba(78, 171, 232, 0.4),
        rgba(11, 6, 11, 0.3)
    );
}

.module-team-preview {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.module-team-preview .card-grid {
    display: flex;
    flex-direction: column;
    gap: clamp(60px, 10vh, 120px);
}

.module-team-preview .general-btn {
    margin-top: 30px;
}

/* ─── Team Page ───────────────────────────────────────────────── */
.team-hero {
    padding-top: clamp(40px, 6vw, 80px);
    padding-bottom: 0;
}
.team-hero .section-title { border-bottom: none; margin-bottom: 0; }

.team-page { padding-top: clamp(30px, 4vw, 60px); }

/* ─── Events Page ────────────────────────────────────────────── */
.events-page { padding-top: clamp(20px, 3vw, 40px); padding-bottom: clamp(40px, 6vw, 80px); }

.ep-section { margin-bottom: clamp(40px, 5vw, 60px); }
.ep-section:last-child { margin-bottom: 0; }

.ep-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 24px;
}
.ep-upcoming {
    background: rgba(78, 171, 232, 0.15);
    color: var(--brand-blue);
    border: 1px solid rgba(78, 171, 232, 0.3);
}
.ep-past-badge {
    background: rgba(250, 250, 250, 0.06);
    color: rgba(250, 250, 250, 0.5);
    border: 1px solid rgba(250, 250, 250, 0.1);
}

/* Card */
.ep-card {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 16px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.ep-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.12);
}
.ep-card:last-child { margin-bottom: 0; }

@media (min-width: 700px) {
    .ep-card { flex-direction: row; }
}

/* Card image */
.ep-card-image {
    flex-shrink: 0;
    overflow: hidden;
    background: rgba(0,0,0,0.2);
}
.ep-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.ep-card:hover .ep-card-image img { transform: scale(1.03); }

@media (max-width: 699px) {
    .ep-card-image { max-height: 260px; }
}
@media (min-width: 700px) {
    .ep-card-image { width: 280px; min-height: 220px; }
}

/* Card body */
.ep-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(16px, 3vw, 28px);
}

.ep-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}
.ep-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: rgba(250, 250, 250, 0.6);
}
.ep-relative {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 2px 10px;
    border-radius: 10px;
}
.ep-relative-upcoming {
    background: rgba(233, 51, 204, 0.2);
    color: var(--brand-two-color);
}
.ep-relative-past {
    background: rgba(250, 250, 250, 0.06);
    color: rgba(250, 250, 250, 0.4);
}

.ep-card-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 400;
    letter-spacing: 1px;
    color: var(--text);
    line-height: 1.1;
}
.ep-card-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(250, 250, 250, 0.7);
    max-width: 60ch;
}
.ep-card-desc a { color: rgb(233, 51, 204); text-decoration: none; }
.ep-card-desc a:hover { text-decoration: underline; }

.ep-card-location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: rgba(250, 250, 250, 0.5);
}
.ep-card-location svg { flex-shrink: 0; opacity: 0.5; }

.ep-card-actions { margin-top: 4px; }

.ep-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: all 0.25s ease;
    background: rgb(78, 171, 232);
    color: #fff;
}
.ep-btn:hover {
    background: rgb(60, 150, 210);
    transform: translateY(-1px);
}

.ep-btn-muted {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(250, 250, 250, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.ep-btn-muted:hover {
    background: rgba(255, 255, 255, 0.14);
    color: var(--text);
}

/* Past card subtle dimming */
.ep-card-past { opacity: 0.7; }
.ep-card-past:hover { opacity: 1; }

.module-team {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.module-team > .general-btn {
    margin-top: clamp(40px, 6vw, 80px);
}

.module-team .card-grid {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 8vh, 80px);
}

/* Profile Card */
.profile-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

@media (min-width: 700px) {
    .profile-card {
        flex-direction: row;
        column-gap: clamp(40px, 6vw, 80px);
        align-items: flex-start;
    }
}

.profile-title {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    width: 100%;
}

@media (min-width: 700px) {
    .profile-title {
        flex-direction: column-reverse; /* DOM: [picture, title] → visual: [title, picture] */
        flex: 0 0 clamp(260px, 30%, 320px);
    }
}

/* Rectangular portrait photo — matching original */
.profile-pic {
    width: 100%;
    max-width: 240px;
    aspect-ratio: 4/5;
    height: auto;
    overflow: hidden;
    border-radius: 4px;
    flex-shrink: 0;
}
.profile-pic img {
    object-fit: cover;
    object-position: top;
    height: 100%;
}

.profile-card .title {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-bottom: 8px;
}

.profile-card .title h4 {
    font-family: 'Barlow', sans-serif;
    font-weight: 500;
    font-size: var(--step-2);
    color: var(--text);
}

.profile-card .title h5 {
    font-family: 'Barlow', sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-color);
}

.text-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.text-content p {
    font-size: var(--step-0);
    line-height: 1.75;
    color: rgba(250,250,250,0.85);
    max-width: 65ch;
}

/* ─── Footer ─────────────────────────────────────────────────── */
.site-footer {
    border-top: 1px solid rgba(255,255,255,0.06);
}

.site-footer .inner-column {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Mobile: 2-col grid. Desktop: single-col flex (each group full-width row) */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(104px, 1fr));
    gap: 32px;
    width: 100%;
}

@media (min-width: 800px) {
    .footer-grid {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }
}

.footer-group {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
}

.footer-group .group-head {
    font-size: 14px;
    font-weight: 500;
    line-height: 160%;
    letter-spacing: 0.2px;
    color: var(--text);
}

/* Mobile: links stack; desktop: links wrap in a row */
.footer-group ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 18px;
}

@media (min-width: 800px) {
    .footer-group ul { flex-direction: row; }
}

.footer-group a {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    align-self: flex-start;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.2px;
    color: rgba(250,250,250,0.65);
    transition: color 0.3s ease;
}
.footer-group a:hover { color: var(--text); }
.footer-group a:hover svg { transform: translate(1px, -1px); }

.footer-ext-arrow {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.footer-donate-btn {
    color: var(--brand-color) !important;
}

.foot-note {
    display: block;
    width: 100%;
    padding-top: 50px;
    padding-bottom: 20px;
    opacity: 0.9;
}

.foot-note p {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-align: left;
}

.foot-note p + p { font-style: italic; }

/* ─── Error Page ─────────────────────────────────────────────── */
.error-page {
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.error-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 60px 0;
}

.error-content h1 {
    font-size: clamp(6rem, 15vw, 12rem);
    color: var(--brand-color);
    line-height: 1;
}

.error-content h2 {
    font-size: clamp(1.5rem, 4vw, 3rem);
    color: var(--text);
}

.error-content p {
    color: var(--gray);
    font-size: var(--text-md);
}

/* ─── Dot Grid Decoration ────────────────────────────────────── */
.dot-grid {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    opacity: 0.4;
    pointer-events: none;
    z-index: -1;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-color);
    margin: 8px;
    animation: dot-fade 3s ease-in-out infinite;
}

.dot:nth-child(odd) { animation-delay: 0.5s; }

@keyframes dot-fade {
    0%, 100% { opacity: 0.3; }
    50%       { opacity: 1; }
}

/* ─── jQuery reveal ─────────────────────────────────────────── */
.reveal-fade {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-fade.revealed {
    opacity: 1;
    transform: none;
}

/* ─── AOS overrides ──────────────────────────────────────────── */
[data-aos] { pointer-events: none; }
[data-aos].aos-animate { pointer-events: auto; }


/* ─── Responsive tweaks ──────────────────────────────────────── */
@media (max-width: 499px) {
    .general-btn { padding: 12px 24px; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--background); }
::-webkit-scrollbar-thumb { background: var(--dark-gray); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-color); }