/* =====================================================
   SURVIVE TOP TRAINING — style.css
===================================================== */

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

/* ── CSS CUSTOM PROPERTIES ── */
:root {
    --color-black:   #080808;
    --color-dark:    #0f0f0f;
    --color-mid:     #161616;
    --color-border:  #2a2a2a;
    --color-muted:   #888888;   /* was #4a4a4a — now readable */
    --color-light:   #f0f0f0;
    --color-red:     #cc1f1f;
    --color-red-dim: #8a1515;

    --font-accent: 'Barlow Condensed', sans-serif;
    --font-body:   'Barlow', sans-serif;

    --fs-small:  .85rem;
    --fs-normal: 1rem;
    --fs-medium: 1.5rem;
    --fs-big:    2rem;
    --fs-huge:   2.5rem;

    --nav-h: 72px;
    --ease:  0.25s ease;
}

@media (min-width: 1020px) {
    :root {
        --fs-small:  .9rem;
        --fs-normal: 1.1rem;
        --fs-medium: 1.8rem;
        --fs-big:    2.4rem;
        --fs-huge:   2.7rem;
    }
}
@media (min-width: 1400px) {
    :root {
        --fs-small:  1rem;
        --fs-normal: 1.2rem;
        --fs-medium: 1.8rem;
        --fs-big:    2.6rem;
        --fs-huge:   2.9rem;
    }
}

/* ── UTILITY CLASSES ── */
.spacer-small { margin: 1rem auto; }
.spacer       { margin: 2rem auto; }
.spacer-big   { margin: 4rem auto; }

.padded   { padding: .5rem; } .padded-1 { padding: 1rem; } .padded-2 { padding: 2rem; }
.padded-3 { padding: 3rem; } .padded-4 { padding: 4rem; } .padded-5 { padding: 5rem; }

.padded-t-1 { padding-top: 1rem; }     .padded-b-1 { padding-bottom: 1rem; }
.padded-t-b-1 { padding-top: 1rem; padding-bottom: 1rem; }
.padded-l-1 { padding-left: 1rem; }    .padded-r-1 { padding-right: 1rem; }
.padded-t-2 { padding-top: 2rem; }     .padded-b-2 { padding-bottom: 2rem; }
.padded-t-b-2 { padding-top: 2rem; padding-bottom: 2rem; }
.padded-l-2 { padding-left: 2rem; }    .padded-r-2 { padding-right: 2rem; }
.padded-t-3 { padding-top: 3rem; }     .padded-b-3 { padding-bottom: 3rem; }
.padded-t-b-3 { padding-top: 3rem; padding-bottom: 3rem; }
.padded-l-3 { padding-left: 3rem; }    .padded-r-3 { padding-right: 3rem; }
.padded-t-4 { padding-top: 4rem; }     .padded-b-4 { padding-bottom: 4rem; }
.padded-t-b-4 { padding-top: 4rem; padding-bottom: 4rem; }
.padded-l-4 { padding-left: 4rem; }    .padded-r-4 { padding-right: 4rem; }
.padded-0 { padding: 0; } .padded-b-0 { padding-bottom: 0; } .margin-b-0 { margin-bottom: 0; }

.font-accent { font-family: var(--font-accent); }
.font-normal { font-family: var(--font-body); }

.round { border-radius: 50%; } .italic { font-style: italic; }
.underline { text-decoration: underline; } .uppercase { text-transform: uppercase; }
.letter-space { letter-spacing: .2rem; }

.left { text-align: left; } .center { text-align: center; } .right { text-align: right; }

.bg-black { background-color: var(--color-black); } .bg-dark  { background-color: var(--color-dark); }
.bg-mid   { background-color: var(--color-mid);   } .bg-red   { background-color: var(--color-red);  }
.bg-light { background-color: var(--color-light); }

.text-light { color: var(--color-light); } .text-dark  { color: var(--color-dark);  }
.text-muted { color: var(--color-muted); } .text-red   { color: var(--color-red);   }

.weight-300 { font-weight: 300; } .weight-400 { font-weight: 400; } .weight-500 { font-weight: 500; }
.weight-600 { font-weight: 600; } .weight-700 { font-weight: 700; } .weight-800 { font-weight: 800; }
.weight-900 { font-weight: 900; }

.size-05 { font-size: .7rem; } .size-1 { font-size: 1rem; }  .size-2 { font-size: 2rem; }
.size-3  { font-size: 3rem; } .size-4 { font-size: 4rem; }  .size-5 { font-size: 5rem; }

.height-20 { min-height: 20vh; } .height-30 { min-height: 30vh; } .height-40 { min-height: 40vh; }
.height-50 { min-height: 50vh; } .height-60 { min-height: 60vh; } .height-70 { min-height: 70vh; }
.height-80 { min-height: 80vh; } .height-90 { min-height: 90vh; } .height-100 { min-height: 100vh; }

.max-width-mini   { max-width: 500px;  margin: auto; }
.max-width-small  { max-width: 700px;  margin: auto; }
.max-width-medium { max-width: 900px;  margin: auto; }
.max-width-big    { max-width: 1020px; margin: auto; }
.max-width-huge   { max-width: 1400px; margin: auto; }

.flex { display: flex; } .flex-col { display: flex; flex-direction: column; }
.space-between { justify-content: space-between; } .justify-center { justify-content: center; }
.space-around  { justify-content: space-around;  } .align-center   { align-items: center; }
.align-self-center { align-self: center; } .flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: 1rem; } .gap-2 { gap: 2rem; } .gap-3 { gap: 3rem; }

/* ── BASE ELEMENTS ── */
html { scroll-behavior: smooth; }

body {
    background-color: var(--color-black);
    color: var(--color-light);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.6;
    overflow-x: hidden;
}

li  { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, blockquote {
    font-family: var(--font-accent);
    font-weight: 900;
    letter-spacing: .05rem;
    text-transform: uppercase;
    line-height: 0.95;
    overflow: hidden;
    color: var(--color-light);
}

h1 { font-size: var(--fs-big);   }
h2 { font-size: var(--fs-big);    }
h3 { font-size: var(--fs-medium); }

p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-normal);
    line-height: 1.75;
    color: var(--color-muted);  /* readable grey */
}

a {
    font-family: var(--font-accent);
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: .08rem;
    transition: color var(--ease);
}

.bg-image {
    background-color: var(--color-dark);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
@media (min-width: 1020px) { .bg-image { background-attachment: fixed; } }

/* ── LOGO ── */
.logo        { min-width: 40%; max-width: 40%; }
.logo-footer { min-width: 60%; max-width: 60%; }
.logo-footer-div { text-align: center; }
@media (min-width: 500px) { .logo { min-width: 30%; max-width: 30%; } .logo-footer { min-width: 50%; max-width: 50%; } }
@media (min-width: 750px) { .logo { min-width: 25%; max-width: 25%; } .logo-footer { min-width: 20%; max-width: 20%; } }


/* ══════════════════════════════════════
   NAVIGATION
══════════════════════════════════════ */

.top-navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    height: var(--nav-h);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 5%;
    background: rgba(8,8,8,0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-border);
}

.top-navbar .logo { min-width: unset; max-width: unset; }
.top-navbar .logo img { height: 48px; width: auto; }

/* Desktop links — hidden by default, shown at 1020px */
.main-navbar { display: none; }

/* The ul inside top-navbar is hidden on mobile, shown on desktop */
.top-navbar .main-navbar_list {
    display: none;
}

.main-navbar_list {
    display: flex; align-items: center; gap: 2rem; list-style: none;
}

.main-navbar_list--item { list-style: none; }

.main-navbar_list--item a {
    font-family: var(--font-accent);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
    white-space: nowrap;
    transition: color var(--ease);
}

.main-navbar_list--item a:hover,
.main-navbar_list--item a.active { color: var(--color-light); }

/* Nav CTA button */
.nav-cta {
    font-family: var(--font-accent) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    background: var(--color-red) !important;
    color: var(--color-light) !important;
    padding: 0.55rem 1.4rem !important;
    border: 2px solid var(--color-red) !important;
    transition: background var(--ease) !important;
    white-space: nowrap;
}
.nav-cta:hover { background: var(--color-red-dim) !important; border-color: var(--color-red-dim) !important; }

/* Hamburger — visible on mobile only */
.hamburger-button {
    position: relative;
    z-index: 1001;
    cursor: pointer;
    display: flex; flex-direction: column; gap: 5px;
    background: none; border: none; padding: 6px;
}

.hamburger-button span {
    display: block; width: 26px; height: 2px;
    background: var(--color-light);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.changeBar1 { transform: translateY(7px) rotate(45deg);   }
.changeBar2 { opacity: 0;                                 }
.changeBar3 { transform: translateY(-7px) rotate(-45deg); }

/* Mobile slide-in menu */
.mobile-navbar {
    position: fixed; top: 0; right: 0;
    width: 80%; max-width: 340px;
    height: 100vh;
    background: var(--color-dark);
    border-left: 1px solid var(--color-border);
    z-index: 1000;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 400ms ease;
    overflow-y: auto;
    padding-top: var(--nav-h);
}

.showNav { transform: translateX(0); }

.hamburger-menu {
    display: flex; flex-direction: column;
    border-top: 1px solid var(--color-border);
}

.hamburger-menu a {
    display: block;
    font-family: var(--font-accent);
    font-size: clamp(1.4rem, 6vw, 2rem);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-light);
    padding: 0.95rem 2rem;
    border-bottom: 1px solid var(--color-border);
    transition: color var(--ease), background var(--ease);
    white-space: nowrap;
}

.hamburger-menu a:hover { color: var(--color-red); background: var(--color-mid); }

.hamburger-menu__cta { margin: 2rem; }
.hamburger-menu__cta--button { display: inline-block; }

/* Mobile nav overlay (closes menu on bg click) */
.mobile-navbar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}
.mobile-navbar-overlay.showOverlay { display: block; }

/* Close button inside mobile menu */
.mobile-menu-close {
    position: absolute; top: 1.1rem; right: 1.2rem;
    background: none; border: none; cursor: pointer;
    color: var(--color-muted); font-size: 1.5rem; line-height: 1;
    padding: 0.5rem; transition: color var(--ease);
    font-family: var(--font-accent); font-weight: 900;
    z-index: 1002;
}
.mobile-menu-close:hover { color: var(--color-light); }

.footer-navbar_list {
    display: flex; flex-direction: column;
    gap: 2rem; text-align: center; padding: 2rem;
}

@media (min-width: 1020px) {
    .top-navbar .main-navbar_list { display: flex; }
    .hamburger-button { display: none; }
    .mobile-navbar    { display: none !important; }
    .footer-navbar_list { display: none; }
}

/* Tablet and mobile: show hamburger, hide desktop nav */
@media (max-width: 1019px) {
    .top-navbar .main-navbar_list { display: none; }
    .hamburger-button { display: flex; }
}


/* ══════════════════════════════════════
   BUTTONS
   Primary (red) = main actions
   Secondary (outline) = explore/secondary
══════════════════════════════════════ */

.cta {
    display: inline-block;
    font-family: var(--font-accent);
    font-weight: 700;
    font-size: var(--fs-small);
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 1rem 2.6rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
}

.cta:hover { transform: translateY(-2px); }

/* PRIMARY — red fill, main CTAs */
.cta-red       { background: var(--color-red);     color: var(--color-light); border-color: var(--color-red);     }
.cta-red:hover { background: var(--color-red-dim); border-color: var(--color-red-dim); }

/* SECONDARY — white outline, less prominent */
.cta-outline       { background: transparent; color: var(--color-light); border-color: var(--color-light); opacity: 0.7; }
.cta-outline:hover { opacity: 1; border-color: var(--color-light); }

/* ON RED BACKGROUNDS */
.cta-outline-light       { background: transparent; color: var(--color-light); border-color: var(--color-light); }
.cta-outline-light:hover { background: var(--color-light); color: var(--color-black); }

.cta-light       { background: var(--color-light); color: var(--color-red); border-color: var(--color-light); }
.cta-light:hover { background: transparent; color: var(--color-light); }


/* ══════════════════════════════════════
   SHARED SECTION LABELS & TITLES
══════════════════════════════════════ */

.section-label {
    font-family: var(--font-accent);
    font-size: var(--fs-small); font-weight: 600;
    letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--color-red); margin-bottom: 0.9rem; display: block;
}

.section-title {
    font-family: var(--font-accent); font-weight: 900;
    font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: 0.93;
    text-transform: uppercase; color: var(--color-light); margin-bottom: 1.4rem;
}

.section-body {
    font-size: var(--fs-normal); color: var(--color-muted);
    line-height: 1.8; margin-bottom: 2rem; max-width: 520px;
}


/* ══════════════════════════════════════
   PAGE HERO (inner pages)
══════════════════════════════════════ */

.page-hero {
    padding-top: var(--nav-h); min-height: 60vh;
    display: flex; align-items: center;
    background: var(--color-dark); border-bottom: 1px solid var(--color-border);
    position: relative; overflow: hidden;
}

.page-hero::before {
    position: absolute; right: -2rem; top: 50%; transform: translateY(-50%);
    font-family: var(--font-accent); font-weight: 900; text-transform: uppercase;
    color: var(--color-border); line-height: 1;
    pointer-events: none; user-select: none; letter-spacing: -0.02em;
}

.page-hero--camps::before   { content: 'CAMPS';   font-size: clamp(8rem, 20vw, 18rem); }
.page-hero--dropin::before  { content: 'DROP-IN'; font-size: clamp(5rem, 14vw, 14rem); }
.page-hero--members::before { content: 'MEMBER';  font-size: clamp(4rem, 12vw, 12rem); }
.page-hero--contact::before { content: 'CONTACT'; font-size: clamp(4rem, 12vw, 12rem); }

.page-hero__inner { padding: 6rem 5%; position: relative; z-index: 1; max-width: 700px; }
.page-hero__label { font-family: var(--font-accent); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-red); margin-bottom: 1rem; display: block; }
.page-hero__title { font-family: var(--font-accent); font-weight: 900; font-size: clamp(3rem, 8vw, 7rem); line-height: 0.93; text-transform: uppercase; color: var(--color-light); margin-bottom: 1.4rem; }
.page-hero__sub   { font-size: var(--fs-normal); color: var(--color-muted); margin-bottom: 2.5rem; max-width: 480px; line-height: 1.7; }


/* ══════════════════════════════════════
   HOME – HERO (video)
══════════════════════════════════════ */

.hero {
    position: relative; width: 100%; height: 100vh; min-height: 620px;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
}

.hero__video-wrap { position: absolute; inset: 0; pointer-events: none; }

.hero__video-wrap iframe {
    position: absolute; top: 50%; left: 50%;
    width: 100vw; height: 56.25vw;
    min-height: 100vh; min-width: 177.78vh;
    transform: translate(-50%, -50%); border: none;
}

.hero__overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to bottom, rgba(8,8,8,0.35) 0%, rgba(8,8,8,0.5) 50%, rgba(8,8,8,0.9) 100%);
}

.hero__content {
    position: relative; z-index: 2;
    text-align: center; padding: 0 5%; max-width: 960px;
}

.hero__brand {
    font-family: var(--font-accent); font-size: clamp(0.75rem, 1.2vw, 0.9rem);
    font-weight: 600; letter-spacing: 0.5em; text-transform: uppercase;
    color: var(--color-muted); margin-bottom: 1rem; display: block;
    opacity: 0; animation: fadeUp 0.8s ease 0.2s forwards;
}

.hero__eyebrow {
    font-family: var(--font-accent); font-size: var(--fs-small); font-weight: 600;
    letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-red);
    margin-bottom: 1rem; display: block;
    opacity: 0; animation: fadeUp 0.8s ease 0.4s forwards;
}

.hero__headline {
    font-size: clamp(2.5rem, 10vw, 9rem); color: var(--color-light);
    margin-bottom: 1.2rem; letter-spacing: -0.01em;
    opacity: 0; animation: fadeUp 0.8s ease 0.6s forwards;
}

.hero__sub {
    font-size: clamp(1rem, 1.8vw, 1.2rem); color: var(--color-muted);
    letter-spacing: 0.06em; margin-bottom: 2.8rem;
    opacity: 0; animation: fadeUp 0.8s ease 0.8s forwards;
}

.hero__cta { opacity: 0; animation: fadeUp 0.8s ease 1s forwards; }


/* ══════════════════════════════════════
   HOME – CAMPS SECTION
══════════════════════════════════════ */

.camps-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 580px; }

.camps-section__text {
    padding: 7rem 8% 7rem 5%; display: flex; flex-direction: column; justify-content: center;
    background: var(--color-dark); border-right: 1px solid var(--color-border);
}

.camps-section__bullets { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 2.8rem; }

.camps-section__bullet {
    display: flex; align-items: flex-start; gap: 1rem;
    font-size: var(--fs-normal); color: var(--color-muted); line-height: 1.6;
    font-family: var(--font-body); font-weight: 400;
}

.camps-section__bullet::before {
    content: ''; display: block; width: 18px; min-width: 18px;
    height: 1px; background: var(--color-red); margin-top: 0.82em;
}

.camps-section__visual {
    background: var(--color-mid); position: relative; overflow: hidden; min-height: 420px;
}

.camps-section__placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.5rem;
}
.camps-section__placeholder span:first-child {
    font-family: var(--font-accent); font-size: 5rem; font-weight: 900;
    text-transform: uppercase; color: var(--color-border); line-height: 1; text-align: center;
}
.camps-section__placeholder span:last-child {
    font-family: var(--font-accent); font-size: var(--fs-small); font-weight: 600;
    letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-muted);
}


/* ══════════════════════════════════════
   HOME – WHO IS THIS FOR
══════════════════════════════════════ */

.who-section { padding: 7rem 5%; background: var(--color-black); }
.who-section__header { margin-bottom: 4rem; }

.who-section__grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px; background: var(--color-border); border: 1px solid var(--color-border);
}

.who-card { background: var(--color-black); padding: 3rem 2.5rem; transition: background var(--ease); }
.who-card:hover { background: var(--color-dark); }
.who-card__num   { font-family: var(--font-accent); font-size: 3rem; font-weight: 900; color: var(--color-border); line-height: 1; margin-bottom: 1.2rem; }
.who-card__title { font-size: var(--fs-normal); font-family: var(--font-accent); font-weight: 700; text-transform: uppercase; color: var(--color-light); line-height: 1.4; }


/* ══════════════════════════════════════
   HOME – SERVICES STRIP
══════════════════════════════════════ */

.services-strip { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--color-border); }

.services-strip__item {
    padding: 6rem 5%; display: flex; flex-direction: column;
    justify-content: space-between; gap: 2.5rem; min-height: 400px;
}

.services-strip__item:first-child { background: var(--color-mid); border-right: 1px solid var(--color-border); }
.services-strip__item:last-child  { background: var(--color-dark); }


/* ══════════════════════════════════════
   HOME – SOCIAL PROOF
══════════════════════════════════════ */

.proof-section { padding: 7rem 5%; background: var(--color-dark); border-top: 1px solid var(--color-border); }

.proof-section__grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); margin-top: 4rem;
}

.proof-stat { background: var(--color-dark); padding: 3.5rem 3rem; text-align: center; }
.proof-stat__num   { font-family: var(--font-accent); font-size: clamp(3rem, 5vw, 5rem); font-weight: 900; color: var(--color-red); line-height: 1; margin-bottom: 0.6rem; }
.proof-stat__label { font-size: var(--fs-small); color: var(--color-muted); letter-spacing: 0.1em; text-transform: uppercase; }


/* ══════════════════════════════════════
   CAMPS PAGE – WHAT YOU GET
══════════════════════════════════════ */

.what-section { padding: 7rem 5%; background: var(--color-black); }
.what-section__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 4rem; }
.what-item { background: var(--color-dark); border: 1px solid var(--color-border); padding: 2.5rem; display: flex; gap: 1.5rem; align-items: flex-start; transition: border-color var(--ease), background var(--ease); }
.what-item:hover { background: #1a1a1a; border-color: #444; }
.what-item__icon { font-family: var(--font-accent); font-size: 2rem; font-weight: 900; color: var(--color-red); line-height: 1; min-width: 40px; }
.what-item__text h3 { font-size: var(--fs-normal); margin-bottom: 0.4rem; line-height: 1.2; }
.what-item__text p  { font-size: var(--fs-small); line-height: 1.6; }


/* ══════════════════════════════════════
   CAMPS PAGE – CAMP OPTIONS
══════════════════════════════════════ */

.options-section { padding: 7rem 5%; background: var(--color-dark); border-top: 1px solid var(--color-border); }
.options-section__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 4rem; }
.option-card { background: var(--color-mid); border: 1px solid var(--color-border); padding: 3.5rem 2.5rem; display: flex; flex-direction: column; gap: 1.5rem; transition: border-color var(--ease), background var(--ease); }
.option-card:hover { background: #1e1e1e; border-color: var(--color-muted); }
.option-card--featured       { background: var(--color-red); border-color: var(--color-red); }
.option-card--featured:hover { background: var(--color-red-dim); border-color: var(--color-red-dim); }
.option-card__tag  { font-family: var(--font-accent); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-red); }
.option-card--featured .option-card__tag { color: rgba(240,240,240,0.7); }
.option-card__name { font-size: clamp(2.5rem, 4.5vw, 3.5rem); color: var(--color-light); line-height: 0.93; }
.option-card__desc { font-size: var(--fs-small); color: var(--color-muted); line-height: 1.65; flex-grow: 1; }
.option-card--featured .option-card__desc { color: rgba(240,240,240,0.85); }
.option-card__cta  { margin-top: auto; }


/* ══════════════════════════════════════
   CAMPS PAGE – WHO FOR
══════════════════════════════════════ */

.whofor-section { padding: 7rem 5%; background: var(--color-black); border-top: 1px solid var(--color-border); }
.whofor-list { display: flex; flex-direction: column; border: 1px solid var(--color-border); margin-top: 3rem; }
.whofor-list__item { display: flex; align-items: center; gap: 2rem; padding: 2rem 2.5rem; border-bottom: 1px solid var(--color-border); transition: background var(--ease); }
.whofor-list__item:last-child { border-bottom: none; }
.whofor-list__item:hover { background: var(--color-dark); }
.whofor-list__num  { font-family: var(--font-accent); font-size: 2.5rem; font-weight: 900; color: var(--color-border); min-width: 60px; }
.whofor-list__text { font-size: var(--fs-normal); color: var(--color-light); font-family: var(--font-accent); font-weight: 700; text-transform: uppercase; }


/* ══════════════════════════════════════
   DROP-IN PAGE – HOW IT WORKS
══════════════════════════════════════ */

.how-section { padding: 7rem 5%; background: var(--color-black); }
.how-section__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 4rem; }
.how-step { background: var(--color-dark); border: 1px solid var(--color-border); padding: 3rem 2.5rem; transition: border-color var(--ease), background var(--ease); }
.how-step:hover { background: #1a1a1a; border-color: #444; }
.how-step__num   { font-family: var(--font-accent); font-size: 3.5rem; font-weight: 900; color: var(--color-red); line-height: 1; margin-bottom: 1rem; }
.how-step__title { font-size: var(--fs-normal); margin-bottom: 0.6rem; }
.how-step__desc  { font-size: var(--fs-small); color: var(--color-muted); line-height: 1.65; }


/* ══════════════════════════════════════
   DROP-IN PAGE – WHAT TO EXPECT
══════════════════════════════════════ */

.expect-section { padding: 7rem 5%; background: var(--color-dark); border-top: 1px solid var(--color-border); }
.expect-section__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; margin-top: 3rem; }
.expect-list { display: flex; flex-direction: column; gap: 0.75rem; }
.expect-list__item { display: flex; align-items: center; gap: 1.5rem; padding: 1.4rem 1.8rem; background: var(--color-black); border: 1px solid var(--color-border); transition: border-color var(--ease), background var(--ease); }
.expect-list__item:hover { background: #111; border-color: #444; }
.expect-list__dot { width: 8px; height: 8px; min-width: 8px; background: var(--color-red); flex-shrink: 0; }
.expect-list__item p { font-size: var(--fs-small); }
.expect-cta { display: flex; flex-direction: column; gap: 2rem; }
.expect-cta__title { font-size: clamp(2rem, 4vw, 3.5rem); }
.expect-cta__body  { font-size: var(--fs-normal); }


/* ══════════════════════════════════════
   MEMBERSHIPS PAGE – INCLUDED
══════════════════════════════════════ */

.included-section { padding: 7rem 5%; background: var(--color-black); }
.included-section__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 4rem; }
.included-item { background: var(--color-dark); border: 1px solid var(--color-border); padding: 2.5rem; display: flex; gap: 1.5rem; align-items: flex-start; transition: border-color var(--ease), background var(--ease); }
.included-item:hover { background: #1a1a1a; border-color: #444; }
.included-item__icon { font-family: var(--font-accent); font-size: 1.8rem; font-weight: 900; color: var(--color-red); line-height: 1; min-width: 36px; }
.included-item__text h3 { font-size: var(--fs-normal); margin-bottom: 0.4rem; }
.included-item__text p  { font-size: var(--fs-small); line-height: 1.6; }


/* ══════════════════════════════════════
   MEMBERSHIPS PAGE – CTA BAND
══════════════════════════════════════ */

.cta-band { background: var(--color-red); padding: 6rem 5%; display: flex; align-items: center; justify-content: space-between; gap: 3rem; flex-wrap: wrap; }
.cta-band__title { margin-bottom: 0.8rem; color: var(--color-light); }
.cta-band__body  { font-size: var(--fs-normal); color: rgba(240,240,240,0.85); max-width: 480px; line-height: 1.7; }


/* ══════════════════════════════════════
   MEMBERSHIPS PAGE – FOR WHO
══════════════════════════════════════ */

.forwho-section { padding: 7rem 5%; background: var(--color-dark); border-top: 1px solid var(--color-border); }
.forwho-section__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; margin-top: 3rem; }
.forwho-list { display: flex; flex-direction: column; gap: 0.75rem; }
.forwho-list__item { display: flex; align-items: center; gap: 1.5rem; padding: 1.4rem 1.8rem; background: var(--color-black); border: 1px solid var(--color-border); transition: border-color var(--ease), background var(--ease); }
.forwho-list__item:hover { background: #111; border-color: #444; }
.forwho-list__dot { width: 8px; height: 8px; min-width: 8px; background: var(--color-red); flex-shrink: 0; }
.forwho-list__item p { font-size: var(--fs-normal); color: var(--color-light); font-family: var(--font-body); }
.forwho-note { padding: 2.5rem; background: var(--color-mid); border: 1px solid var(--color-border); }
.forwho-note h3 { font-size: var(--fs-normal); margin-bottom: 0.8rem; }
.forwho-note p  { font-size: var(--fs-small); line-height: 1.7; margin-bottom: 1.5rem; }


/* ══════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════ */

.contact-section { padding: 5rem 5%; background: var(--color-black); }

.contact-section__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
    margin-bottom: 4rem;
}

.contact-info { display: flex; flex-direction: column; gap: 2rem; }

.contact-info__block h3 {
    font-family: var(--font-accent); font-size: var(--fs-small); font-weight: 600;
    letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-red); margin-bottom: 0.6rem;
}

.contact-info__block p,
.contact-info__block a {
    font-size: var(--fs-normal); color: var(--color-muted); line-height: 1.7; transition: color var(--ease);
}
.contact-info__block a:hover { color: var(--color-light); }

.contact-info__divider { width: 100%; height: 1px; background: var(--color-border); }

/* Form */
.contact-form  { display: flex; flex-direction: column; gap: 1.4rem; }
.form-row      { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.form-group    { display: flex; flex-direction: column; gap: 0.4rem; }

.form-group label {
    font-family: var(--font-accent); font-size: var(--fs-small);
    font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
    background: #1a1a1a; border: 1px solid #3a3a3a;
    color: var(--color-light); font-family: var(--font-body);
    font-size: var(--fs-normal); font-weight: 300;
    padding: 0.9rem 1.1rem; outline: none;
    transition: border-color var(--ease), background var(--ease);
    -webkit-appearance: none; appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--color-red);
    background: #1f1f1f;
    box-shadow: 0 0 0 3px rgba(204,31,31,0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--color-muted); }
.form-group select option { background: var(--color-dark); color: var(--color-light); }
.form-group textarea { resize: vertical; min-height: 130px; }

.form-note { font-size: var(--fs-small); color: var(--color-muted); line-height: 1.6; }

.form-success { display: none; padding: 2rem; background: var(--color-dark); border: 1px solid var(--color-red); text-align: center; margin-top: 1rem; }
.form-success p { font-family: var(--font-accent); font-size: var(--fs-normal); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-light); }

/* Google Map */
.contact-map {
    width: 100%;
    height: 420px;
    border: 1px solid var(--color-border);
    filter: grayscale(100%) invert(90%) contrast(85%);
    display: block;
    margin-bottom: 4rem;
}


/* ══════════════════════════════════════
   MEMBERSHIPS PAGE – PRICING CARDS
══════════════════════════════════════ */

.pricing-section { padding: 7rem 5%; background: var(--color-dark); border-top: 1px solid var(--color-border); }
.pricing-section__label { margin-bottom: 3rem; }

.pricing-tabs { display: flex; gap: 0; border: 1px solid var(--color-border); width: fit-content; margin-bottom: 4rem; }
.pricing-tab { font-family: var(--font-accent); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.75rem 2rem; cursor: pointer; background: none; border: none; color: var(--color-muted); transition: color var(--ease), background var(--ease); }
.pricing-tab.active { background: var(--color-red); color: var(--color-light); }
.pricing-tab:not(.active):hover { color: var(--color-light); background: var(--color-mid); }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.pricing-grid--dropin { grid-template-columns: repeat(2, 1fr); max-width: 800px; }

.pricing-card { background: var(--color-mid); border: 1px solid var(--color-border); padding: 3rem 2.5rem; display: flex; flex-direction: column; gap: 1.2rem; transition: border-color var(--ease); }
.pricing-card:hover { border-color: var(--color-muted); }
.pricing-card--featured { background: var(--color-mid); border-color: var(--color-border); }
.pricing-card--featured:hover { border-color: #444; }

.pricing-card__label { font-family: var(--font-accent); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-red); }
.pricing-card--featured .pricing-card__label { color: var(--color-red); }

.pricing-card__name { font-family: var(--font-accent); font-weight: 900; font-size: clamp(1.5rem, 3vw, 2.2rem); text-transform: uppercase; line-height: 1.1; color: var(--color-light); }

.pricing-card__price { display: flex; align-items: baseline; gap: 0.3rem; }
.pricing-card__price-amount { font-family: var(--font-accent); font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 900; color: var(--color-light); line-height: 1; }
.pricing-card__price-unit { font-family: var(--font-accent); font-size: var(--fs-small); color: var(--color-muted); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.pricing-card--featured .pricing-card__price-unit { color: var(--color-muted); }

.pricing-card__divider { width: 100%; height: 1px; background: var(--color-border); }
.pricing-card--featured .pricing-card__divider { background: var(--color-border); }

.pricing-card__features { display: flex; flex-direction: column; gap: 0.8rem; flex-grow: 1; }
.pricing-card__feature { display: flex; align-items: flex-start; gap: 0.75rem; font-size: var(--fs-small); color: var(--color-muted); line-height: 1.5; font-family: var(--font-body); }
.pricing-card--featured .pricing-card__feature { color: var(--color-muted); }
.pricing-card__feature::before { content: '→'; color: var(--color-red); font-family: var(--font-accent); font-weight: 700; flex-shrink: 0; margin-top: 0.05em; }
.pricing-card--featured .pricing-card__feature::before { color: var(--color-red); }

.pricing-card__extra { font-size: var(--fs-small); color: var(--color-muted); font-style: italic; line-height: 1.5; border-top: 1px solid var(--color-border); padding-top: 1rem; }
.pricing-card--featured .pricing-card__extra { color: var(--color-muted); border-top-color: var(--color-border); }

.pricing-card__cta { margin-top: auto; padding-top: 1.5rem; }

.pricing-panel { display: none; }
.pricing-panel.active { display: block; }

@media (max-width: 768px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .pricing-grid--dropin { grid-template-columns: 1fr; max-width: 100%; }
}

/* ══════════════════════════════════════
   MEMBERSHIP CARDS
══════════════════════════════════════ */

.membership-cards { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 600px) { .membership-cards { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }


/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */

footer { background: var(--color-black); border-top: 1px solid var(--color-border); padding: 4rem 5% 2.5rem; }

.footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4rem; padding-bottom: 3rem; border-bottom: 1px solid var(--color-border); margin-bottom: 2rem; }
.footer__logo img { height: 60px; width: auto; margin-bottom: 1.2rem; }
.footer__tagline  { font-size: var(--fs-small); color: var(--color-muted); max-width: 280px; line-height: 1.7; }

.footer__col-title { font-family: var(--font-accent); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-red); margin-bottom: 1.2rem; display: block; }

.footer__links   { display: flex; flex-direction: column; gap: 0.75rem; }
.footer__links a { font-size: var(--fs-small); color: var(--color-muted); font-family: var(--font-body); text-transform: none; font-weight: 400; letter-spacing: 0; transition: color var(--ease); }
.footer__links a:hover { color: var(--color-light); }

.footer__bottom { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-small); color: var(--color-muted); flex-wrap: wrap; gap: 1rem; }
.footer__legal   { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer__legal a { color: var(--color-muted); font-family: var(--font-body); text-transform: none; font-weight: 400; letter-spacing: 0; transition: color var(--ease); }
.footer__legal a:hover { color: var(--color-light); }


/* ══════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════ */

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
}

.reveal          { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.revealed { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: 0.1s; }
.reveal--d2 { transition-delay: 0.2s; }
.reveal--d3 { transition-delay: 0.3s; }


/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

@media (max-width: 960px) {
    .camps-section         { grid-template-columns: 1fr; }
    .camps-section__text   { padding: 5rem 5%; border-right: none; border-bottom: 1px solid var(--color-border); }
    .camps-section__visual { min-height: 300px; }

    .who-section__grid     { grid-template-columns: 1fr 1fr; }

    .services-strip        { grid-template-columns: 1fr; }
    .services-strip__item:first-child { border-right: none; border-bottom: 1px solid var(--color-border); }

    .proof-section__grid   { grid-template-columns: 1fr 1fr; }

    .what-section__grid    { grid-template-columns: 1fr; }
    .options-section__grid { grid-template-columns: 1fr; }
    .how-section__grid     { grid-template-columns: 1fr; }
    .expect-section__layout  { grid-template-columns: 1fr; gap: 3rem; }
    .included-section__grid  { grid-template-columns: 1fr; }
    .forwho-section__layout  { grid-template-columns: 1fr; gap: 3rem; }

    .contact-section__layout { grid-template-columns: 1fr; gap: 3rem; }
    .form-row { grid-template-columns: 1fr; }

    .footer__top { grid-template-columns: 1fr 1fr; gap: 2.5rem; }

    .contact-map { height: 300px; }
}

@media (max-width: 600px) {
    .who-section__grid   { grid-template-columns: 1fr; }
    .proof-section__grid { grid-template-columns: 1fr; }
    .footer__top         { grid-template-columns: 1fr; }
    .footer__bottom      { flex-direction: column; text-align: center; }
    .cta-band            { flex-direction: column; }
}