/* ==========================================================================
   Stingrays Lacrosse Club — Global Stylesheet
   HTML5 / CSS3 / Vanilla JS  •  Responsive: desktop / tablet / mobile
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------------------- */
:root {
    /* Brand navy */
    --navy-900: #071627;
    --navy-850: #0a2036;
    --navy-800: #0c2138;
    --navy-750: #0e2843;
    --navy-700: #10304f;
    --navy-panel: #12335a;

    /* Light bands */
    --light-1: #eaf3fb;
    --light-2: #dcebf8;

    /* Accents */
    --blue: #57a6df;          /* light sky-blue highlight            */
    --blue-strong: #2f86c6;
    --orange: #ff7b00;        /* matches the mascot badge circle          */
    --orange-600: #e56d00;    /* hover / pressed                          */

    /* Text */
    --white: #ffffff;
    --ink: #0b2440;           /* dark heading on light bands         */
    --muted-light: #aeb9c6;   /* muted text on dark                  */
    --muted-dark: #46586b;    /* muted text on light                 */

    /* Type */
    --font-head: "Barlow Condensed", system-ui, -apple-system, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, sans-serif;

    /* Layout */
    --container: 1720px;
    --radius: 16px;
    --radius-sm: 10px;
}

/* ---------------------------------------------------------------------------
   2. Reset & base
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--white);
    background: var(--navy-850);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

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

ul {
    list-style: none;
}

svg {
    display: block;
}

/* ---------------------------------------------------------------------------
   3. Layout helpers
   --------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 24px;
}

/* Athletic condensed italic heading */
.heading {
    font-family: var(--font-head);
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    line-height: 0.96;
    letter-spacing: 0.01em;
}

.hl-blue { color: var(--blue); }
.hl-orange { color: var(--orange); }

/* Stacking helper (vertical stripes overlay removed) ------------------------ */
.has-stripes { position: relative; }
.has-stripes > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   4. Buttons
   --------------------------------------------------------------------------- */
.btn {
    --btn-fs: 0.82rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--btn-fs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 14px 26px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

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

.btn--sm {
    --btn-fs: 0.72rem;
    padding: 11px 20px;
}

.btn--orange {
    background: var(--orange);
    color: var(--navy-900);
    box-shadow: 0 8px 22px rgba(255, 123, 0, 0.28);
}
.btn--orange:hover { background: var(--orange-600); }

.btn--ghost {
    background: rgba(8, 22, 39, 0.55);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(6px);
    padding-right: 8px;         /* room for the icon circle */
}
.btn--ghost:hover { background: rgba(8, 22, 39, 0.75); }

.btn--icon { padding-right: 8px; }

/* Small circular icon (arrow / phone) inside a button */
.ico-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--orange);
    color: var(--navy-900);
    flex: 0 0 auto;
}
.ico-circle svg { width: 17px; height: 17px; }

/* ---------------------------------------------------------------------------
   5. Header / navigation
   --------------------------------------------------------------------------- */
.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding-top: 24px;
}

.site-header.is-scrolled {
    position: fixed;
    top: 0;
    padding-top: 0;
    background: rgba(7, 22, 39, 0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

.nav {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(8, 22, 39, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    padding: 11px 34px;
    min-height: 80px;
}

.is-scrolled .nav {
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    backdrop-filter: none;
}

.nav__brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -42%);
    z-index: 2;
}
.nav__brand img {
    height: 118px;
    width: auto;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}

.nav__menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
}

.nav__list {
    display: flex;
    align-items: center;
    gap: 36px;
}

.nav__list a {
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    transition: color 0.15s ease;
}
.nav__list a:hover { color: var(--orange); }

.nav__right {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    z-index: 3;
}
.nav__toggle span {
    width: 24px;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: 0.25s ease;
}
.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------------------
   6. HERO
   --------------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--navy-900);
    border-bottom-left-radius: 46px;
    border-bottom-right-radius: 46px;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("../img/home-img/home-hero-section.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


.hero__inner {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;   /* headline anchors right (crest removed) */
    gap: 40px;
    width: 100%;
    padding-top: 90px;
    padding-bottom: 120px;
}

.hero__content {
    text-align: right;
    max-width: 480px;
}
.hero__title {
    font-family: var(--font-head);
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    line-height: 0.94;
    letter-spacing: 0.005em;
    font-size: clamp(2.4rem, 4vw, 3.5rem);
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}
.hero__subtitle {
    margin-top: 20px;
    margin-left: auto;
    max-width: 400px;
    color: var(--muted-light);
    font-size: 0.95rem;
    line-height: 1.65;
}

.hero__cta {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%);
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Hero CTA buttons — larger, text left + trailing icon right */
.hero__cta .btn {
    min-height: 66px;
    padding: 8px 14px 8px 34px;
    gap: 30px;
    font-size: 1rem;
    letter-spacing: 0.05em;
    justify-content: space-between;
}
.hero__cta .btn--ghost {
    background: linear-gradient(90deg, rgba(6, 18, 32, 0.92) 0%, rgba(6, 18, 32, 0.4) 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.hero__cta .ico-circle { width: 46px; height: 46px; }
.hero__cta .ico-circle svg { width: 21px; height: 21px; }

.btn__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--navy-900);
    margin-right: 8px;
}
.btn__phone svg { width: 25px; height: 25px; }

/* ---------------------------------------------------------------------------
   7. SECTION 2 — Ages 5 to 12 band
   --------------------------------------------------------------------------- */
.band {
    position: relative;
    z-index: 1;                 /* paints over the white community section below */
    background: var(--navy-800);
    padding-block: 52px 92px;
}
.band__inner {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 48px;
    align-items: center;
}
.band__title {
    font-size: clamp(2.2rem, 3.6vw, 3.5rem);
    color: var(--white);
}
.band__text p {
    color: var(--muted-light);
    font-size: 1.12rem;
    line-height: 1.75;
}
.band__text .lead-strong {
    margin-top: 16px;
    color: var(--white);
    font-weight: 700;
    font-style: italic;
}

/* ---------------------------------------------------------------------------
   8. SECTION 3 — Community (light)
   --------------------------------------------------------------------------- */
.community {
    position: relative;         /* z-index auto: paints behind the band above it */
    background: #ffffff;
    color: var(--ink);
    margin-top: -46px;          /* slide up behind the band's curved bottom */
    padding-block: 152px 90px;
    text-align: center;
}

/* Mascot badge straddling the curved boundary (white notch in the navy) */
.badge {
    position: absolute;
    top: -12px;                 /* centres the larger badge on the boundary */
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;                 /* above the band */
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 16px #ffffff;
}
.badge img { width: 70px; height: 70px; }

/* Concave fillets where the notch's white circle meets the straight section edge —
   the navy edge sweeps tangentially down into the circle (smooth S-curve) instead of
   ending in a sharp point. An inverted corner needs a radial-gradient (border-radius
   can only cut convex corners). Geometry: badge 116px + 16px ring; boundary at y=58. */
.badge::before,
.badge::after {
    content: "";
    position: absolute;
    top: 30px;     /* squares stop at the fillet/ring tangent point (no step above it) */
    width: 44px;
    height: 28px;
}
.badge::before {
    left: -51px;
    background: radial-gradient(circle 44px at 0 -16px, transparent 43.5px, #ffffff 44px);
}
.badge::after {
    right: -51px;
    background: radial-gradient(circle 44px at 100% -16px, transparent 43.5px, #ffffff 44px);
}

.community__title {
    font-size: clamp(2.4rem, 4.4vw, 3.9rem);
    max-width: 940px;
    margin: 0 auto 50px;
}

/* Staggered 3-photo gallery */
.gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-bottom: 52px;
}
.gallery__item {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 16px 34px rgba(11, 36, 64, 0.18);
    flex: 0 0 auto;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__item--side { width: 300px; height: 380px; }
.gallery__item--tall { width: 430px; height: 486px; }

.community__copy {
    max-width: 1000px;
    margin: 0 auto;
}
.community__copy p {
    color: var(--muted-dark);
    font-size: 1.04rem;
    line-height: 1.8;
    margin-bottom: 18px;
}
.community__copy .lead-strong {
    color: var(--ink);
    font-weight: 700;
    font-style: italic;
}
.community__cta { margin-top: 30px; }

/* ---------------------------------------------------------------------------
   9. SECTION 4 — Built around the player (cards)
   --------------------------------------------------------------------------- */
.pillars {
    background: var(--navy-850);
    padding-block: 62px;
}
.pillars__title {
    text-align: center;
    color: var(--white);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    margin-bottom: 40px;
}
.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.card {
    position: relative;
    min-height: 448px;
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    isolation: isolate;
}
.card__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
/* subtle bottom darkening for depth behind the frosted panel */
/* Frosted-glass text panel — flush to the card's bottom/left/right edges */
.card__body {
    margin: 0;
    padding: 22px 24px 24px;
    background: rgba(9, 21, 37, 0.45);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.card__title {
    font-weight: 700;
    font-size: 1.08rem;
    margin-bottom: 8px;
    color: var(--white);
}
.card__text {
    color: var(--muted-light);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   10. SECTION 5 — We celebrate effort (light-in-dark)
   --------------------------------------------------------------------------- */
.celebrate {
    position: relative;
    background: var(--navy-850);
    padding-block: 40px;
}
/* Inset divider line — matches the container width, clear of the edges */
.celebrate::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100% - 48px), calc(var(--container) - 48px));
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}
.celebrate__panel {
    background: var(--light-1);
    color: var(--ink);
    border-radius: 26px;
    padding: 54px 40px 58px;
    text-align: center;
}
.celebrate__mascot {
    width: 54px;
    margin: 0 auto 20px;
}
.celebrate__title {
    font-size: clamp(2.6rem, 4.8vw, 4.4rem);
    max-width: 1500px;
    margin: 0 auto 24px;
}
.celebrate__text {
    max-width: 1180px;
    margin: 0 auto;
    color: var(--muted-dark);
    font-size: 1.1rem;
    line-height: 1.75;
}

/* ---------------------------------------------------------------------------
   11. SECTION 6 — CTA / Ready to get on the field
   --------------------------------------------------------------------------- */
.cta-section {
    position: relative;
    background: var(--navy-850);
    padding-block: 44px 64px;
}
/* Inset divider line before section 6 */
.cta-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100% - 48px), calc(var(--container) - 48px));
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 2;
}

/* Top two panels */
.panels {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
.panel {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    padding: 40px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    isolation: isolate;
}
.panel--photo .panel__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.panel--solid { background: var(--navy-750); border: 1px solid rgba(255, 255, 255, 0.06); }

.panel__title {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    color: var(--white);
    margin-bottom: 14px;
}
.panel__text {
    color: var(--muted-light);
    font-size: 0.92rem;
    line-height: 1.65;
    margin-bottom: 24px;
}
.panel .btn { align-self: flex-start; }
/* Photo panel: heading/text at top, button pinned to the bottom */
.panel--photo .btn { margin-top: auto; }

/* Field block (shared bg photo) */
/* NOTE: the sizing below is deliberately fluid (clamp + %) so the block keeps
   its desktop composition when the browser is zoomed past 100% — it scales
   down in place instead of wrapping the league card onto its own line.
   Every clamp resolves to the original fixed value at desktop widths. */
.field {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    isolation: isolate;
    padding: clamp(36px, 3.34vw, 64px) clamp(24px, 2.3vw, 44px) clamp(24px, 2.3vw, 44px);
}
.field__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url("../img/home-img/home-s7-img-bg.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.field__title {
    text-align: center;
    color: var(--white);
    font-size: clamp(2rem, 3.2vw, 3rem);
    margin-bottom: clamp(28px, 2.5vw, 48px);
}

.steps {
    display: grid;
    /* minmax(0,…) so a long step line can't push the 3 columns out of shape */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(30px, 4.6vw, 88px);
    text-align: center;
    max-width: 1360px;
    margin: 0 auto clamp(40px, 3.75vw, 72px);
}
.step__num {
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 800;
    font-size: 3.6rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--blue);
    margin-bottom: 24px;
}
.step__title {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 8px;
}
.step__text {
    color: var(--muted-light);
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 340px;
    margin: 0 auto;
}

/* Welcome + league card */
.welcome {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(20px, 1.6vw, 30px);
    /* nowrap: the card scales down beside the headline rather than dropping
       below it when the available width shrinks (incl. browser zoom) */
    flex-wrap: nowrap;
}
.welcome__title {
    font-size: clamp(3.8rem, 7.4vw, 7.4rem);
    color: var(--white);
    line-height: 0.9;
    flex: 1 1 auto;
    min-width: 0;
}
.welcome__card {
    background: rgba(7, 18, 32, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    padding: clamp(18px, 1.6vw, 26px) clamp(18px, 1.75vw, 28px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(14px, 1.35vw, 22px);
    /* 39.14% == 620px at the 1720px container's 1584px field width, so desktop
       is pixel-identical while narrower widths keep the same
       headline-to-card proportion instead of wrapping */
    flex: 0 1 auto;
    width: clamp(280px, 39.14%, 620px);
    min-width: 0;
    backdrop-filter: blur(6px);
}
.welcome__league {
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.05;
    font-size: 1.4rem;
    color: var(--white);
}
.welcome__league span { color: var(--blue); display: block; font-size: 0.95rem; margin-top: 4px; }
.welcome__card .btn { justify-content: space-between; width: 100%; }

/* ---------------------------------------------------------------------------
   12. FOOTER
   --------------------------------------------------------------------------- */
.site-footer {
    position: relative;
    background: var(--navy-850);
    padding-block: 56px 26px;
}
/* Inset divider line before the footer */
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100% - 48px), calc(var(--container) - 48px));
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}
.footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1.3fr 1fr;
    gap: 40px;
}
.footer__title {
    font-size: clamp(2rem, 3.2vw, 2.9rem);
    color: var(--white);
    margin-bottom: 18px;
}
.footer__desc {
    color: var(--muted-light);
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 420px;
    margin-bottom: 20px;
}
.footer__social {
    display: flex;
    gap: 12px;
    margin-bottom: 22px;
}
.footer__social a {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    transition: 0.2s ease;
}
.footer__social a:hover { background: var(--orange); border-color: var(--orange); color: var(--navy-900); }
.footer__social svg { width: 18px; height: 18px; }
.footer__logo { width: 96px; height: auto; opacity: 0.92; }

.footer__heading {
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--blue);
    font-size: 1rem;
    margin-bottom: 20px;
}
.footer__linklist {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.footer__linkrow {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.footer__linklist a {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    transition: 0.2s ease;
}
.footer__linklist a:hover { background: rgba(255, 255, 255, 0.08); color: var(--white); }

.footer__contact { text-align: left; justify-self: end; }
.footer__location {
    font-size: 1.25rem;
    color: var(--white);
    margin-bottom: 18px;
}
.footer__email {
    display: block;
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--white);
    font-size: 1.25rem;
    letter-spacing: 0.02em;
    margin-bottom: 22px;
}
.footer__phone {
    margin-left: 0;
    min-width: 300px;
    justify-content: space-between;
}

.footer__bottom {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.footer__copy { color: var(--muted-light); font-size: 0.76rem; }

/* ---------------------------------------------------------------------------
   12b. INNER-PAGE HERO (shared by Coaches & other pages)
   --------------------------------------------------------------------------- */
.page-hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--navy-900);
    padding-top: 110px;              /* clears the floating nav */
    border-bottom-left-radius: 46px; /* curved bottom, same as index hero */
    border-bottom-right-radius: 46px;
}
.page-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
/* Coaches hero photo (desktop) */
.page-hero--coaches .page-hero__bg {
    background-image: url("../img/coaches-img/coaches-hero-section.webp");
}
/* Coaches v2 hero photo (desktop) — PLACEHOLDER, swap for the real photo */
.page-hero--coaches2 .page-hero__bg {
    background-image: url("../img/coaches2-img/coaches2-hero-section.webp");
}
/* Fundraising hero photo (desktop) */
.page-hero--fundraising .page-hero__bg {
    background-image: url("../img/fundraising-img/fundraising-hero-section.webp");
}
/* Contact hero photo (desktop) */
.page-hero--contact .page-hero__bg {
    background-image: url("../img/contact-img/contact-hero-section.webp");
}
/* About hero photo (desktop) */
.page-hero--about .page-hero__bg {
    background-image: url("../img/about-img/about-hero-section.webp");
}
/* Schedule hero photo (desktop) — PLACEHOLDER, reuses the coaches field shot */
.page-hero--schedule .page-hero__bg {
    background-image: url("../img/coaches-img/coaches-s4-img-bg.webp");
}
/* Uniform navy tint over the photo (matches index hero treatment) */
.page-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* no fill — inner-page heroes show the photo plainly */
}
.page-hero__inner {
    position: relative;
    z-index: 2;
    text-align: center;
    padding-bottom: 34px;
}
.page-hero__title {
    color: var(--white);
    font-size: clamp(3.4rem, 7vw, 6.8rem);
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.page-hero__sub {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.98rem;
}

/* ---------------------------------------------------------------------------
   12c. COACHES PAGE
   --------------------------------------------------------------------------- */
/* Staff band */
.staff-band {
    background: var(--navy-850);
    padding-block: 48px 100px;
}
.staff-band__inner {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 56px;
    align-items: start;
}
.staff-band__title {
    color: var(--white);
    font-size: clamp(2.6rem, 4.4vw, 4.2rem);
    margin-bottom: 26px;
}
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tag-list li {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    padding: 9px 18px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
}
.staff-band__text p {
    color: var(--muted-light);
    font-size: 1.02rem;
    line-height: 1.75;
    margin-bottom: 18px;
}
.staff-band__text p:last-child { margin-bottom: 0; }

/* Coach carousel section (white) */
.coaches-sec {
    position: relative;
    background: #ffffff;
    color: var(--ink);
    padding-block: 130px 90px;
    text-align: center;
    /* no overflow:hidden here — it would clip the badge straddling the top edge */
}
.coaches-sec .badge { top: -58px; }

/* Watermark clipped by its own wrapper so the badge stays unclipped */
.coaches-sec__wmwrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.coaches-sec__watermark {
    position: absolute;
    right: -170px;
    bottom: 30px;
    width: 720px;
    opacity: 0.08;
    filter: grayscale(1);
}
.coaches-sec .container { position: relative; z-index: 1; }

/* Carousel */
/* Cards are sized as a share of the row (aspect-ratio drives height) rather
   than fixed px: the percentages resolve to exactly 270/370px wide and 22px
   gap at the 1672px desktop container, but below that the row scales down
   instead of overflowing — 5 fixed-width cards needed 1538px and used to spill
   out of the container between roughly 1025px and 1590px of viewport. */
.carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(8px, 1.32%, 22px);
    margin-bottom: 48px;
}
.carousel__item {
    position: relative;                        /* anchors the ::after blue wash */
    isolation: isolate;                        /* keep the blend off the page bg */
    flex: 0 0 auto;
    width: clamp(120px, 16.15%, 270px);
    height: auto;
    aspect-ratio: 270 / 350;
    padding: 0;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: var(--light-2);
    box-shadow: 0 14px 30px rgba(11, 36, 64, 0.16);
    transition: width 0.35s ease, height 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.carousel__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Unselected cards read cooler/flatter; the active one is full colour */
    filter: saturate(0.6) contrast(0.97);
    transition: filter 0.35s ease;
}
/* Brand-blue wash over everything except the selected coach */
.carousel__item::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--blue);
    mix-blend-mode: color;
    opacity: 0.45;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.carousel__item--active {
    width: clamp(165px, 22.13%, 370px);
    height: auto;
    aspect-ratio: 370 / 490;
    box-shadow: 0 22px 44px rgba(11, 36, 64, 0.26);
}
.carousel__item--active::after { opacity: 0; }
.carousel__item--active img { filter: none; }

/* Hovering an unselected card previews it in full colour */
.carousel__item:hover:not(.carousel__item--active) { transform: translateY(-6px); }
.carousel__item:hover:not(.carousel__item--active)::after { opacity: 0.18; }
.carousel__item:hover:not(.carousel__item--active) img { filter: saturate(0.9); }

@media (prefers-reduced-motion: reduce) {
    .carousel__item,
    .carousel__item img,
    .carousel__item::after { transition: none; }
}

/* Coach info */
.coach-info { max-width: 1120px; margin: 0 auto; }
.coach-info__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--orange);
    margin-bottom: 16px;
}
.coach-info__dot img { width: 22px; height: 22px; }
.coach-info__name {
    color: var(--ink);
    font-size: clamp(1.9rem, 3vw, 2.7rem);
    margin-bottom: 10px;
}

/* Coach detail panel — "Career Highlights" + "About Coach X", two columns
   split by a hairline on desktop, stacked on mobile. The markup is injected
   by main.js (see COACHES), so all of the styling lives here. */
.coach-detail {
    margin-top: 26px;
    padding: clamp(24px, 2.6vw, 40px) clamp(22px, 2.8vw, 44px);
    text-align: left;
    background: linear-gradient(180deg, #fbfdff 0%, #edf5fd 100%);
    border: 1px solid var(--light-2);
    border-radius: var(--radius);
    box-shadow: 0 16px 38px rgba(11, 36, 64, 0.07);
}
.coach-detail__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;   /* highlights column runs longer */
}
.coach-detail__col:first-child { padding-right: clamp(24px, 3vw, 48px); }
.coach-detail__col + .coach-detail__col {
    padding-left: clamp(24px, 3vw, 48px);
    border-left: 1px solid rgba(11, 36, 64, 0.1);
}

/* Column headings pick up the site's condensed italic treatment, with a short
   orange rule instead of the old full-width border */
.coach-detail__head {
    display: block;
    font-family: var(--font-head);
    font-weight: 800;
    font-style: italic;
    font-size: 1.35rem;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 18px;
}
.coach-detail__head::after {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    margin-top: 12px;
    border-radius: 2px;
    background: var(--orange);
}

/* Highlights — ringed orange dots on a hanging indent, not default discs */
.coach-detail__list {
    list-style: none;
    display: grid;
    gap: 12px;
}
.coach-detail__list li {
    position: relative;
    padding-left: 26px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--muted-dark);
}
.coach-detail__list li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0.52em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 3px rgba(255, 123, 0, 0.18);
}
.coach-detail__text {
    font-size: 0.97rem;
    line-height: 1.75;
    color: var(--muted-dark);
}
.coach-detail__text + .coach-detail__text { margin-top: 14px; }
.coach-info.is-fading { opacity: 0; transition: opacity 0.18s ease; }
.coach-info { transition: opacity 0.25s ease; }

/* Dots */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 36px;
}
.carousel-dots button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: #b9c6d4;
    cursor: pointer;
    transition: 0.2s ease;
}
.carousel-dots button.is-active {
    background: var(--ink);
    transform: scale(1.35);
}

/* CTA banner */
.page-cta {
    background: var(--navy-850);
    padding-block: 64px;
}
.cta-banner {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    isolation: isolate;
}
.cta-banner__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cta-banner__inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    min-height: 620px;
    padding: 110px 72px 72px;
}
.cta-banner__title { margin-bottom: 46px; }
.cta-banner__line1 {
    display: block;
    color: var(--white);
    font-size: clamp(2.2rem, 3.6vw, 3.4rem);
    margin-bottom: 10px;
}
.cta-banner__line2 {
    display: block;
    font-size: clamp(3.6rem, 7vw, 6.6rem);
    line-height: 0.95;
}
.cta-banner__card {
    flex: 0 0 auto;
    width: 400px;
    max-width: 100%;
    background: rgba(7, 18, 32, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    backdrop-filter: blur(6px);
}
.cta-banner__card .btn { justify-content: space-between; width: 100%; }
.cta-banner__card .welcome__league { font-size: 1.2rem; }

/* ---------------------------------------------------------------------------
   12d. FUNDRAISING PAGE
   --------------------------------------------------------------------------- */
/* Two-line page-hero title variant */
.page-hero__l1 {
    display: block;
    color: var(--white);
    font-size: clamp(1.8rem, 3.2vw, 3rem);
    margin-bottom: 4px;
}
.page-hero__l2 {
    display: block;
    font-size: clamp(2.8rem, 6.2vw, 6rem);
    line-height: 0.95;
}
.page-hero__title:has(.page-hero__l2) { font-size: 1rem; } /* spans carry their own sizes */

/* Bold second paragraph in a dark band */
.staff-band__text .lead-strong {
    color: var(--white);
    font-weight: 700;
}

/* Partnership section (white, badge notch) */
.partner-sec {
    position: relative;
    background: #ffffff;
    color: var(--ink);
    padding-block: 120px 90px;
}
.partner-sec .badge { top: -58px; }

.partner-sec__inner {
    display: grid;
    /* minmax(0,·) defeats the auto min-content floor so the ratio is exact;
       balanced so the square card rows end level with the square photo */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr);
    gap: 64px;
    align-items: start;
}
.partner-sec__media {
    aspect-ratio: 1 / 1;          /* square photo */
    align-self: start;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 18px 38px rgba(11, 36, 64, 0.16);
}
.partner-sec__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.partner-sec__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 34px;
}
.partner-sec__title {
    color: var(--ink);
    font-size: clamp(1.9rem, 3vw, 2.9rem);
}
.partner-sec__title .hl-blue { font-size: 1.55em; }

.benefit-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.benefit-card {
    aspect-ratio: 1 / 1;          /* square cards */
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e2e9f1;
    border-radius: 12px;
    padding: 24px;
    text-align: left;
    box-shadow: 0 6px 18px rgba(11, 36, 64, 0.05);
}
.benefit-card__icon {
    display: inline-flex;
    color: var(--ink);
    margin-bottom: 14px;
}
.benefit-card__icon svg { width: 30px; height: 30px; }
.benefit-card__title {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
}
.benefit-card__text {
    font-size: 0.84rem;
    color: var(--muted-dark);
    line-height: 1.6;
}

/* Mission section (white) */
.mission-sec {
    background: #ffffff;
    color: var(--ink);
    padding-block: 40px 90px;
}
.mission-sec__inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 70px;
    align-items: center;
}
.mission-sec__eyebrow {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 6px;
}
.mission-sec__title {
    color: var(--ink);
    font-size: clamp(3rem, 5vw, 4.8rem);
    margin-bottom: 24px;
}
.mission-sec__content p:not(.mission-sec__eyebrow) {
    color: var(--muted-dark);
    font-size: 0.98rem;
    line-height: 1.7;
    margin-bottom: 16px;
}
.mission-sec__content .mission-sec__lead {
    color: var(--ink);
    font-weight: 700;
}
.mission-sec__donate { margin-top: 16px; }

.mission-sec__media { position: relative; }
.mission-sec__photo {
    width: 100%;
    border-radius: var(--radius);
    display: block;
}
/* Decorative orange bars over the right side of the photo */
.mission-sec__bar {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--orange);
    z-index: 1;
}
.mission-sec__bar--wide { right: 20%; width: 42px; }
.mission-sec__bar--thin { right: 14.5%; width: 16px; }

/* Sponsorship levels */
.sponsor-sec {
    background: var(--navy-850);
    padding-block: 80px 70px;
}
.sponsor-sec__title {
    text-align: center;
    color: var(--white);
    font-size: clamp(2.6rem, 4.4vw, 4rem);
    margin-bottom: 44px;
}
.tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.tier {
    position: relative;
    display: flex;
    flex-direction: column;
    /* fundraising-s5-img-bg photo behind each card, shown plainly (no color fill) */
    background: url("../img/fundraising-img/fundraising-s5-img-bg.webp") center / cover no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 30px 26px;
}
.tier--gold {
    border-color: rgba(245, 200, 90, 0.35);
}
.tier__name {
    color: var(--white);
    font-size: 1.35rem;
    margin-bottom: 6px;
}
.tier__price {
    color: var(--blue);
    font-size: 2.9rem;
    line-height: 1;
    margin-bottom: 14px;
}
.tier__price sup {
    font-size: 0.5em;
    top: -0.55em;
    position: relative;
    color: var(--white);
    margin-right: 2px;
}
.tier__desc {
    color: var(--muted-light);
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 20px;
}
.tier__benefits-label {
    color: var(--white);
    font-size: 1.05rem;
    margin-bottom: 12px;
}
.tier__list {
    margin-bottom: 26px;
    flex: 1;
}
.tier__list li {
    position: relative;
    padding-left: 20px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.84rem;
    line-height: 1.5;
    margin-bottom: 9px;
}
.tier__list li::before {
    content: "★";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--orange);
    font-size: 0.72rem;
}
.tier__btn {
    justify-content: center;
    width: 100%;
    --btn-fs: 0.74rem;
    padding: 14px 12px;
}
.tier__btn--navy {
    background: var(--navy-900);
    color: var(--white);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}
.tier__btn--navy:hover { background: var(--navy-800); }
.tier__crown {
    position: absolute;
    right: 22px;
    bottom: 74px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff0e3;
    color: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
    z-index: 1;
}
.tier__crown svg { width: 20px; height: 20px; }

/* QR panel */
.qr-panel {
    margin-top: 28px;
    background: #ffffff;
    border-radius: var(--radius);
    padding: 48px 56px;
    display: flex;
    align-items: center;
    gap: 52px;
}
.qr-panel__head { flex: 1; text-align: center; }
.qr-panel__title {
    font-size: clamp(3rem, 5vw, 4.6rem);
    line-height: 1;
    margin-bottom: 8px;
}
.qr-panel__code { color: var(--orange); }
.qr-panel__sub {
    color: var(--ink);
    font-size: clamp(1.3rem, 2vw, 1.9rem);
}
.qr-panel__qr {
    flex: 0 0 auto;
    width: 210px;
    height: 210px;
    border: 4px solid #7ab3e0;
    border-radius: 16px;
    padding: 10px;
    background: #ffffff;
}
.qr-panel__qr img { width: 100%; height: 100%; display: block; }
.qr-panel__side { flex: 1; }
.qr-panel__side p {
    color: var(--muted-dark);
    font-size: 0.92rem;
    line-height: 1.65;
    margin-bottom: 20px;
}

/* Zelle donation panel — the target of every "Donate Now" / sponsor-tier button.
   Clears the header, which turns fixed once the page is scrolled. */
.zelle-panel { scroll-margin-top: 110px; }

/* Address card. Sized and bordered to match .qr-panel__qr, so dropping the real
   Zelle QR in beside it (or in place of it) keeps the panel's proportions. */
.zelle-card {
    flex: 0 0 auto;
    width: 290px;
    border: 4px solid #7ab3e0;
    border-radius: 16px;
    padding: 26px 22px;
    background: #ffffff;
    text-align: center;
}
.zelle-card__label {
    color: var(--muted-dark);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.zelle-card__handle {
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 18px;
    /* A mistyped address sends money to a stranger — the full string always shows */
    overflow-wrap: anywhere;
}
.zelle-card__copy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: 999px;
    background: var(--orange);
    color: var(--navy-900);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease;
}
.zelle-card__copy:hover { background: var(--orange-600); }
.zelle-card__copy svg { width: 15px; height: 15px; }
.zelle-card__copy.is-copied { background: #2f9e63; color: #ffffff; }

.zelle-steps {
    list-style: none;      /* the reset only clears <ul> */
    counter-reset: zelle;
    margin-bottom: 18px;
}
.zelle-steps li {
    position: relative;
    counter-increment: zelle;
    padding-left: 36px;
    margin-bottom: 12px;
    color: var(--muted-dark);
    font-size: 0.92rem;
    line-height: 1.55;
}
.zelle-steps li::before {
    content: counter(zelle);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--light-2);
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 700;
}
.zelle-steps strong { color: var(--ink); }

/* Scoped past `.qr-panel__side p`, which would otherwise win on specificity */
.zelle-panel .zelle-note {
    font-size: 0.84rem;
    line-height: 1.6;
    margin-bottom: 0;
}
.zelle-panel .zelle-note a { color: var(--blue-strong); font-weight: 600; }
.zelle-panel .zelle-note a:hover { text-decoration: underline; }

/* Centered CTA banner variant */
.cta-banner--center .cta-banner__inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 480px;
    padding: 80px 56px;
}
.cta-banner--center .cta-banner__title { margin-bottom: 38px; }
.cta-banner--center .cta-banner__line1 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); }
.cta-banner--center .cta-banner__line2 { font-size: clamp(3.6rem, 7vw, 6.6rem); }
.cta-banner__actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   12e. CONTACT PAGE
   --------------------------------------------------------------------------- */
.contact-band__inner {
    display: block; /* Overrides the previous grid-template-columns: 1fr 1.6fr; */
}

.contact-cols {
    display: grid;
    grid-template-columns: repeat(4, max-content); /* Shrinks columns to perfectly fit their content */
    /* Spreads the blocks from the first's left edge to the last's right edge
       instead of bunching them up in the middle. The row is inset from the
       container so the gaps stay generous without feeling stretched, and the
       gap below is the floor — space-between shares out whatever is left. */
    justify-content: space-between;
    max-width: 88%;
    margin-inline: auto;
    gap: clamp(30px, 5vw, 70px);
    padding-top: 10px;
}
.contact-col__icon {
    display: inline-flex;
    color: var(--blue);
    margin-bottom: 14px;
}
.contact-col__icon svg { width: 26px; height: 26px; }
.contact-col__label {
    color: var(--white);
    font-size: 0.98rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.contact-col__value,
.contact-col__value a {
    color: var(--muted-light);
    font-size: 0.88rem;
    line-height: 1.6;
}
.contact-col__value a:hover { color: var(--blue); }

/* Form section (white, badge notch, left watermark) */
.form-sec {
    position: relative;
    background: #ffffff;
    padding-block: 120px 100px;
}
.form-sec .badge { top: -58px; }

.form-sec__wmwrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.form-sec__watermark {
    position: absolute;
    left: -190px;
    top: 60px;
    width: 700px;
    opacity: 0.08;
    filter: grayscale(1);
    transform: scaleX(-1);
}
.form-sec .container { position: relative; z-index: 1; }

.form-card {
    max-width: 880px;
    margin: 0 auto;
    background: var(--navy-900);
    border-radius: 22px;
    padding: 56px 64px 48px;
    text-align: center;
    box-shadow: 0 26px 60px rgba(11, 36, 64, 0.28);
}
.form-card__eyebrow {
    color: var(--blue);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.form-card__title {
    color: var(--white);
    font-size: clamp(2rem, 3.6vw, 3.2rem);
    margin-bottom: 34px;
}

.contact-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    background: var(--navy-750);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    padding: 15px 18px;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(255, 255, 255, 0.45); }
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--blue); }
.contact-form textarea { resize: vertical; }

.contact-form__note {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.76rem;
    margin: 26px 0 16px;
}
.contact-form__submit { margin-inline: auto; }

/* Field wrapper — holds the input plus its validation message */
.contact-form__field { text-align: left; }

/* Honeypot: off-screen rather than display:none, so bots that skip hidden
   fields still fill it in. Never focusable, never announced. */
.contact-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form input.has-error,
.contact-form textarea.has-error { border-color: #ef8f8f; }

.contact-form__err {
    display: block;
    margin-top: 6px;
    font-size: 0.74rem;
    line-height: 1.4;
    color: #f7a9a9;
}

/* Whole-form problem (rate limit, stale page) */
.form-card__alert {
    margin-bottom: 22px;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(224, 96, 96, 0.14);
    box-shadow: inset 0 0 0 1px rgba(224, 96, 96, 0.34);
    color: #f7a9a9;
    font-size: 0.84rem;
    text-align: left;
}

/* Sent state, shown in place of the form */
.form-card__success { padding: 6px 0 4px; }
.form-card__success-ico {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(87, 166, 223, 0.16);
    box-shadow: inset 0 0 0 1px rgba(87, 166, 223, 0.4);
    color: var(--blue);
}
.form-card__success-ico svg { width: 26px; height: 26px; }
.form-card__success-title {
    color: var(--white);
    font-size: 1.05rem;
    font-weight: 700;
}
.form-card__success-text {
    max-width: 430px;
    margin: 8px auto 24px;
    color: var(--muted-light);
    font-size: 0.9rem;
    line-height: 1.65;
}
.form-card__success .btn { margin-inline: auto; }

/* ---------------------------------------------------------------------------
   12f. ABOUT PAGE
   --------------------------------------------------------------------------- */
.seasons-sec {
    background: var(--navy-850);
    padding-block: 72px 90px;
}
.seasons-sec__title {
    text-align: center;
    margin-bottom: 48px;
}
.seasons-sec__l1 {
    display: block;
    color: var(--white);
    font-size: clamp(2rem, 3.4vw, 3.2rem);
    margin-bottom: 6px;
}
.seasons-sec__l2 {
    display: block;
    font-size: clamp(2.7rem, 4.8vw, 4.6rem);
    line-height: 1;
}

.season-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}
.season-card {
    background: var(--navy-750);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 34px 36px;
}
.season-card__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 24px 30px;
    align-items: start;
}
.season-card__name {
    color: var(--white);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.season-card__dates {
    color: var(--blue);
    font-size: 0.88rem;
    font-weight: 600;
}
.season-card__desc {
    color: var(--muted-light);
    font-size: 0.86rem;
    line-height: 1.65;
}
.season-card__label {
    color: var(--white);
    font-weight: 700;
    font-size: 0.9rem;
}
.season-card__value {
    color: var(--muted-light);
    font-style: italic;
    font-size: 0.88rem;
    line-height: 1.6;
}
.season-card__value strong { color: var(--white); font-style: normal; }

.divisions-card {
    background: var(--navy-750);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 40px 36px;
    text-align: center;
}
.divisions-card__title {
    color: var(--white);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.divisions-card__sub {
    color: var(--muted-light);
    font-size: 0.88rem;
    margin-bottom: 30px;
}
.divisions {
    display: flex;
    justify-content: center;
    margin-bottom: 34px;
}
.divisions li {
    flex: 1;
    max-width: 260px;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--white);
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}
.divisions li:last-child { border-right: none; }
.divisions-card__actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* FAQ */
.faq-sec {
    position: relative;
    background: #ffffff;
    color: var(--ink);
    padding-block: 110px 100px;
}
.faq-sec .badge { top: -58px; }

.faq-sec__eyebrow {
    text-align: center;
    color: var(--ink);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.faq-sec__title {
    text-align: center;
    color: var(--ink);
    font-size: clamp(2.7rem, 4.8vw, 4.6rem);
    margin-bottom: 44px;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}
.faq-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.faq-item {
    background: #eef5fb;
    border: 1px solid #e2ecf5;
    border-radius: 12px;
    overflow: hidden;
}
.faq-item__head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 22px 26px;
    font-family: var(--font-body);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink);
    text-align: left;
}
.faq-item__icon {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--ink);
    transition: transform 0.25s ease;
}
.faq-item__icon svg { width: 24px; height: 24px; }
.faq-item.is-open .faq-item__icon { transform: rotate(45deg); }

.faq-item__body {
    display: none;
    padding: 0 26px 24px;
}
.faq-item.is-open .faq-item__body { display: block; }

.faq-item__body p {
    color: var(--muted-dark);
    font-size: 0.9rem;
    line-height: 1.65;
}
.faq-item__link {
    color: var(--blue);
    font-weight: 600;
    word-break: break-word;
}
.faq-item__link:hover { text-decoration: underline; }

.faq-item__list {
    margin-bottom: 14px;
}
.faq-item__list li {
    position: relative;
    padding-left: 20px;
    color: var(--ink);
    font-size: 0.88rem;
    line-height: 1.6;
    margin-bottom: 8px;
}
.faq-item__list li::before {
    content: "★";
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--orange);
    font-size: 0.7rem;
}

/* ---------------------------------------------------------------------------
   12g. COACHES V2 — alternating profile cards
   --------------------------------------------------------------------------- */
.coachv2-sec {
    position: relative;
    background: #ffffff;
    padding-block: 120px 90px;
}
.coachv2-sec .badge { top: -58px; }

.coach-cards {
    display: flex;
    flex-direction: column;
    gap: 44px;
}
.coach-card {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 64px;
    align-items: center;
    border-radius: 26px;
    padding: 64px 72px;
}
.coach-card--navy { background: var(--navy-900); color: var(--white); }
.coach-card--light { background: #e7eef3; color: var(--ink); }

/* photo right on light cards */
.coach-card--light .coach-card__media { order: 2; }
.coach-card--light .coach-card__content { order: 1; padding-left: 24px; }

.coach-card__media img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 24px;
    display: block;
}

.coach-card__first {
    font-size: 1.7rem;
    margin-bottom: 6px;
}
.coach-card--navy .coach-card__first { color: var(--white); }
.coach-card--light .coach-card__first { color: var(--ink); }

.coach-card__last {
    color: var(--blue);
    font-family: var(--font-body);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1;
    font-size: clamp(3rem, 4.8vw, 4.6rem);
    margin-bottom: 12px;
}
.coach-card__role {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 1.45rem;
    font-weight: 500;
    margin-bottom: 22px;
}
.coach-card__bio {
    font-size: 0.94rem;
    line-height: 1.65;
    max-width: 460px;
    margin-bottom: 32px;
}
.coach-card--navy .coach-card__bio { color: rgba(255, 255, 255, 0.88); }
.coach-card--light .coach-card__bio { color: var(--muted-dark); }

/* Career highlights — same orange-dot idiom as .coach-detail__list on /coaches,
   but it has to read on both the navy and the light card. */
.coach-card__highlights {
    list-style: none;
    display: grid;
    gap: 12px;
    max-width: 460px;
}
.coach-card__highlights li {
    position: relative;
    padding-left: 26px;
    font-size: 0.92rem;
    line-height: 1.6;
}
.coach-card__highlights li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0.52em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 3px rgba(255, 123, 0, 0.18);
}
.coach-card--navy .coach-card__highlights li { color: rgba(255, 255, 255, 0.88); }
.coach-card--light .coach-card__highlights li { color: var(--muted-dark); }

/* ---------------------------------------------------------------------------
   12h. SCHEDULE PAGE
   --------------------------------------------------------------------------- */
/* Practice schedule (dark band) */
.practice-sec {
    background: var(--navy-850);
    padding-block: 72px 90px;
}
.practice-sec__title {
    text-align: center;
    margin-bottom: 48px;
}
.practice-sec__l1 {
    display: block;
    color: var(--white);
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    margin-bottom: 6px;
}
.practice-sec__l2 {
    display: block;
    font-size: clamp(2.7rem, 4.8vw, 4.6rem);
    line-height: 1;
}

.practice-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}
.practice-card {
    background: var(--navy-750);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 32px 30px;
}
.practice-card__age {
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 800;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--white);
}
.practice-card__group {
    color: var(--blue);
    font-size: 0.86rem;
    font-weight: 600;
    margin-bottom: 20px;
}
.practice-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.practice-row__label {
    flex: 0 0 auto;
    color: var(--white);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.practice-row__value {
    color: var(--muted-light);
    font-size: 0.86rem;
    text-align: right;
}

/* Fall Ball practice-date calendar. Sits in the white Game Schedule band, so
   it is styled for a light background; chip colours mirror the club's printed
   flyer: Saturdays orange, Wednesdays blue. */
.practice-dates__title {
    text-align: center;
    color: var(--ink);
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    margin-bottom: 24px;
}
.practice-months {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.practice-month {
    background: var(--light-1);
    border: 1px solid rgba(11, 36, 64, 0.08);
    border-radius: 14px;
    padding: 24px 22px;
}
.practice-month__name {
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1.2rem;
    color: var(--ink);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(11, 36, 64, 0.12);
}
.date-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.date-chip {
    flex: 0 0 auto;
    min-width: 54px;
    background: #ffffff;
    border: 1px solid rgba(11, 36, 64, 0.12);
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
}
.date-chip__day {
    display: block;
    padding: 3px 0;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
}
.date-chip--sat .date-chip__day { background: var(--orange); }
.date-chip--wed .date-chip__day { background: var(--blue-strong); }
.date-chip__num {
    display: block;
    padding: 6px 0 8px;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.1;
    color: var(--ink);
}
.practice-dates__note {
    margin-top: 24px;
    text-align: center;
    color: var(--muted-dark);
    font-size: 0.86rem;
}
.practice-dates__note strong { color: var(--ink); }

/* Footnote strip under the practice cards */
.practice-note {
    background: var(--navy-750);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 26px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.practice-note p {
    color: var(--muted-light);
    font-size: 0.88rem;
    line-height: 1.65;
    max-width: 900px;
}
.practice-note strong { color: var(--white); }

/* Game schedule (white band, mascot badge on the boundary) */
.games-sec {
    position: relative;
    background: #ffffff;
    color: var(--ink);
    padding-block: 110px 100px;
}
.games-sec .badge { top: -58px; }

.games-sec__eyebrow {
    text-align: center;
    color: var(--ink);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.games-sec__title {
    text-align: center;
    color: var(--ink);
    font-size: clamp(2.7rem, 4.8vw, 4.6rem);
    margin-bottom: 44px;
}

.games-month { margin-bottom: 34px; }
.games-month:last-of-type { margin-bottom: 0; }
.games-month__name {
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 1.5rem;
    color: var(--ink);
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--light-2);
}

.games {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.game {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    background: #eef5fb;
    border: 1px solid #e2ecf5;
    border-radius: 12px;
    padding: 18px 26px;
}
.game__date { text-align: center; }
.game__dow {
    display: block;
    color: var(--muted-dark);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.game__day {
    display: block;
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 800;
    font-size: 2rem;
    line-height: 1;
    color: var(--ink);
}
.game__teams {
    color: var(--ink);
    font-size: 0.98rem;
    font-weight: 700;
}
/* "vs" / "at" — the quieter word between the two team names */
.game__teams span {
    color: var(--muted-dark);
    font-weight: 600;
    font-style: italic;
    margin-inline: 6px;
}
.game__venue {
    color: var(--muted-dark);
    font-size: 0.85rem;
    margin-top: 2px;
}
.game__side {
    display: flex;
    align-items: center;
    gap: 18px;
}
.game__time {
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
}
.game__tag {
    min-width: 84px;
    text-align: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.game__tag--home { background: var(--orange); color: var(--navy-900); }
.game__tag--away { background: var(--navy-700); color: var(--white); }

.games-sec__foot {
    margin-top: 30px;
    text-align: center;
    color: var(--muted-dark);
    font-size: 0.86rem;
    line-height: 1.65;
}

/* Key dates (dark band) */
.keydates-sec {
    background: var(--navy-850);
    padding-block: 80px;
}
.keydates-sec__title {
    text-align: center;
    color: var(--white);
    font-size: clamp(2.2rem, 3.6vw, 3.4rem);
    margin-bottom: 40px;
}
.keydates {
    display: grid;
    /* Changed from 4 to 3 columns, with a max-width so they don't stretch too far */
    grid-template-columns: repeat(3, minmax(0, 380px)); 
    justify-content: center; /* Centers the grid block perfectly in the container */
    gap: 20px;
}
.keydate {
    background: var(--navy-750);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 28px 26px;
}
.keydate__when {
    color: var(--blue);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.keydate__what {
    color: var(--white);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 6px;
}
/* Cards currently render headline-only (the blurb is commented out in
   schedule.html), so drop the gap when nothing follows. */
.keydate__what:last-child { margin-bottom: 0; }
.keydate__text {
    color: var(--muted-light);
    font-size: 0.86rem;
    line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   13. RESPONSIVE — Tablet (<= 1024px)
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .nav__list { gap: 20px; }
    .nav__list a { font-size: 0.68rem; }
    .nav__right { gap: 16px; }

    .hero__inner { padding-bottom: 130px; }

    .band__inner { grid-template-columns: 1fr; gap: 26px; }

    .gallery__item--side { width: 180px; height: 210px; }
    .gallery__item--tall { width: 240px; height: 250px; }

    .panels { grid-template-columns: 1fr; }
    .welcome__title { font-size: clamp(2.2rem, 7vw, 3.4rem); }

    /* Coaches page */
    .staff-band__inner { grid-template-columns: 1fr; gap: 30px; }
    /* Explicit height here beats the desktop aspect-ratio, as intended */
    .carousel__item { width: 190px; height: 250px; }
    .carousel__item--active { width: 260px; height: 350px; }
    /* Drop back to 3 cards, centred on the active 3rd slot */
    .carousel__item:nth-child(1),
    .carousel__item:nth-child(5) { display: none; }
    .cta-banner__inner { flex-direction: column; align-items: stretch; }
    .cta-banner__card { width: 100%; }

    /* Fundraising page */
    .partner-sec__inner { grid-template-columns: 1fr; gap: 36px; }
    .partner-sec__media { aspect-ratio: auto; max-height: 420px; }
    .benefit-cards { grid-template-columns: repeat(2, 1fr); }
    .mission-sec__inner { grid-template-columns: 1fr; gap: 60px; }
    .tiers { grid-template-columns: repeat(2, 1fr); }
    .qr-panel { flex-direction: column; text-align: center; }
    .qr-panel__side { text-align: center; }
    /* The numbered steps stay left-aligned in a centred column — centring the
       text itself would ragged the edge the step circles line up against. */
    .zelle-steps { text-align: left; max-width: 340px; margin-inline: auto; }
    .zelle-card { width: 100%; max-width: 340px; }

    /* Contact page */
    .contact-band__inner { grid-template-columns: 1fr; gap: 36px; }
    /* Back to the full container width — the desktop inset would just squeeze
       the stacked 2-up layout */
    .contact-cols { grid-template-columns: repeat(2, 1fr); max-width: 100%; }

    /* About page */
    .season-cards { grid-template-columns: 1fr; }
    .faq-grid { grid-template-columns: 1fr; }

    /* Schedule page */
    .practice-cards { grid-template-columns: repeat(2, 1fr); }
    .practice-months { grid-template-columns: repeat(2, 1fr); }
    .keydates { grid-template-columns: repeat(2, 1fr); }
    .practice-note { flex-direction: column; align-items: flex-start; }

    /* Coaches v2 */
    .coach-card { grid-template-columns: 1fr; gap: 30px; padding: 36px; }
    .coach-card--light .coach-card__media { order: 0; }
    .coach-card--light .coach-card__content { order: 1; padding-left: 0; }
    .coach-card__media img { max-height: 460px; }
}

/* ---------------------------------------------------------------------------
   14. RESPONSIVE — Mobile (<= 760px)
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
    .nav { padding: 8px 16px; min-height: 64px; }
    .nav__toggle { display: flex; margin-left: auto; }  /* hamburger to the right */
    /* brand stays centered (inherits desktop left:50% centering) */
    .nav__brand img { height: 54px; }

    .nav__menu {
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: rgba(7, 22, 39, 0.98);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 18px;
        padding: 14px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: 0.25s ease;
        backdrop-filter: blur(10px);
    }
    .is-open .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }

    .nav__list { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
    .nav__list a { display: block; padding: 12px 8px; width: 100%; font-size: 0.8rem; }
    .nav__list li { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
    .nav__right { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
    .nav__cta { margin-top: 14px; text-align: center; justify-content: center; }

    /* Page-wide side breathing space on mobile */
    .container { padding-inline: 32px; }

    /* Hero — full mobile image shown (aspect matches mb-home-hero-section 1500x4404) */
    .hero {
        aspect-ratio: 1500 / 4404;
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 120px 0 86px;   /* extra bottom padding lifts the content group up a little */
        border-bottom-left-radius: 42px;
        border-bottom-right-radius: 42px;
    }
    /* Mobile-specific background images */
    .hero__bg {
        background-image: url("../img/home-img/mobile/mb-home-hero-section.webp");
        background-size: 112%;   /* slight zoom-in — crops edges a touch, stays centered */
    }
    .field__bg { background-image: url("../img/home-img/mobile/mb-home-s7-img-bg.webp"); }

    .hero__inner {                 /* heading + subtitle, below the button */
        order: 2;
        flex-direction: column;
        justify-content: flex-start;
        text-align: left;
        padding: 0 32px;           /* side breathing space — aligns with the button */
        gap: 0;
    }
    .hero__content { text-align: left; max-width: none; }
    .hero__subtitle { margin: 16px 0 0; max-width: none; }

    .hero__cta {                   /* "Support the Stingrays" above the heading */
        position: relative;
        z-index: 3;
        left: auto;
        bottom: auto;
        transform: none;
        order: 1;
        width: 100%;
        padding-inline: 32px;
        margin-bottom: 22px;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .hero__cta .btn {
        justify-content: space-between;
        font-size: 0.9rem;
        letter-spacing: 0.03em;
        padding: 8px 10px 8px 24px;
        gap: 12px;
        min-height: 60px;
    }
    .hero__cta .ico-circle { width: 40px; height: 40px; }
    .hero__cta .btn--orange { display: none; }  /* phone hidden on mobile — it lives in the footer */

    /* Band (section 2) — larger heading, wraps naturally */
    .band { padding-block: 44px 104px; }     /* extra lower breathing space */
    .band__brk { display: none; }            /* let the heading flow & wrap on its own */
    .band__title { font-size: 2.95rem; line-height: 1.05; }
    .band__text p { font-size: 1.05rem; line-height: 1.7; }
    .band__text .lead-strong { color: var(--blue); margin-top: 22px; font-weight: 700; }

    /* Community (section 3) — bigger heading, 3 photos in a row */
    .community { padding-block: 150px 78px; }
    .community__title { font-size: 2.9rem; line-height: 1.05; margin-bottom: 40px; }
    .gallery {
        flex-wrap: nowrap;
        gap: 10px;
        align-items: center;      /* smaller side photos centre against the taller middle */
        margin-bottom: 42px;
    }
    .gallery__item--side,
    .gallery__item--tall {
        width: auto;
        max-width: none;
        min-width: 0;
    }
    .gallery__item--side { flex: 1 1 0; height: 132px; }   /* 1st & 3rd — smaller */
    .gallery__item--tall { flex: 1.3 1 0; height: 184px; } /* middle — larger */

    /* Cards */
    .cards { grid-template-columns: 1fr; }

    /* Field block (section 6 lower) — left-aligned, larger text per reference */
    .field__title { text-align: center; font-size: 3.15rem; line-height: 1.03; margin-bottom: 40px; }
    .steps {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: left;
        margin-bottom: 44px;
    }
    .step {                                    /* thin vertical rule down the numbering's left */
        border-left: 1px solid rgba(255, 255, 255, 0.22);
        padding-left: 22px;
    }
    .step__num { font-size: 3.2rem; margin-bottom: 12px; }
    .step__title { font-size: 1.08rem; margin-bottom: 10px; }
    .step__text { font-size: 1.02rem; line-height: 1.65; max-width: none; margin: 0; }

    /* Welcome */
    .welcome { flex-direction: column; align-items: stretch; gap: 26px; }
    .welcome__title { font-size: 4.2rem; line-height: 0.92; flex: 0 0 auto; }

    /* League card — info, divider line, then centred arrow-over-label CTA.
       Undo the desktop fluid width/padding: stacked here, so go full-bleed. */
    .welcome__card {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        width: 100%;
        padding: 26px 28px;
    }
    .welcome__league {
        width: 100%;
        font-size: 1.5rem;
    }
    .welcome__league span { font-size: 1.02rem; margin-top: 6px; }
    .welcome__card .btn {
        --btn-fs: 0.95rem;
        flex-direction: column-reverse;        /* orange arrow on top, label beneath it */
        justify-content: center;
        align-items: center;
        gap: 14px;
        width: 100%;
        padding: 24px;
        text-align: center;
        border-radius: var(--radius);          /* match the card's corner radius, not a pill */
    }
    .welcome__card .ico-circle { width: 46px; height: 46px; }
    .welcome__card .ico-circle svg { width: 20px; height: 20px; }

    /* Footer — fully centred on mobile */
    .footer__grid { grid-template-columns: 1fr; gap: 34px; text-align: center; }
    .footer__desc { max-width: none; margin-inline: auto; }
    .footer__social { justify-content: center; }
    .footer__linklist { align-items: center; }
    .footer__linkrow { justify-content: center; }
    .footer__contact { text-align: center; justify-self: stretch; }
    .footer__phone { margin: 0 auto; min-width: 0; justify-content: center; }
    .footer__bottom { flex-direction: column; align-items: center; gap: 16px; text-align: center; }
    .celebrate__panel { padding: 40px 22px 44px; }
    .field { padding: 40px 26px 40px; }

    /* Section 6 panels — the photo card is taller; solid card sits shorter below */
    .panel { padding: 30px; }
    .panel--photo {
        min-height: 508px;
        padding: 34px 30px 42px;
    }
    .panel--photo::before {          /* even dark tint so the white text stays readable */
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(180deg, rgba(8, 24, 42, 0.42) 0%, rgba(8, 24, 42, 0.68) 100%);
    }
    .panel--photo .btn { margin-top: 12px; }   /* image breathing room remains below the button */

    /* Larger text inside both section-6 cards (per reference) */
    .panel__title { font-size: 2.25rem; line-height: 1.08; margin-bottom: 18px; }
    .panel__text { font-size: 1.1rem; line-height: 1.72; margin-bottom: 26px; }
    .panel .btn { --btn-fs: 0.96rem; padding: 16px 28px; }

    /* ================= Coaches page ================= */
    /* 1. Hero — left-aligned, content at bottom, stacked title (per reference) */
    .page-hero {
        padding-top: 120px;
        min-height: 82vh;
        align-items: flex-end;
        border-bottom-left-radius: 42px;   /* same curve as the index hero */
        border-bottom-right-radius: 42px;
    }
    .page-hero--coaches .page-hero__bg {   /* mobile-specific hero photo, slightly zoomed in */
        background-image: url("../img/coaches-img/mobile/mb-coaches-hero-section.webp");
        transform: scale(1.08);
    }
    .page-hero--fundraising .page-hero__bg {   /* mobile-specific hero photo */
        background-image: url("../img/fundraising-img/mobile/mb-fundraising-hero-section.webp");
    }
    .page-hero--fundraising { min-height: 62vh; }         /* shorter hero */
    .page-hero--fundraising .page-hero__l1 { font-size: 2.7rem; }   /* bigger white line */
    .page-hero--fundraising .page-hero__l2 { font-size: 3.9rem; line-height: 0.95; }  /* bigger blue line */
    .page-hero--fundraising .page-hero__sub { font-size: 1rem; margin-top: 14px; }

    /* Contact hero — mobile photo, fundraising's height, "GET IN" / "TOUCH" */
    .page-hero--contact .page-hero__bg {
        background-image: url("../img/contact-img/mobile/mb-contact-hero-section.webp");
    }
    .page-hero--contact { min-height: 62vh; }             /* same height as fundraising */
    .page-hero--contact .page-hero__title .hl-blue { display: inline; }  /* keep "In" in flow */

    /* About hero — mobile photo, fundraising's height, big blue title */
    .page-hero--about .page-hero__bg {
        background-image: url("../img/about-img/mobile/mb-about-hero-section.webp");
    }
    .page-hero--about { min-height: 62vh; }               /* same height as fundraising */
    .page-hero--about .page-hero__l1 { font-size: 1.9rem; margin-bottom: 2px; }
    .page-hero--about .page-hero__l2 {
        font-size: 4.1rem;
        line-height: 0.94;
        overflow-wrap: break-word;
    }
    .page-hero--about .page-hero__sub { font-size: 1rem; margin-top: 14px; }

    /* Schedule hero — mobile photo, fundraising's height */
    .page-hero--schedule .page-hero__bg {
        background-image: url("../img/coaches-img/mobile/mb-coaches-s4-img-bg.webp");
    }
    .page-hero--schedule { min-height: 62vh; }            /* same height as fundraising */
    .page-hero--schedule .page-hero__l1 { font-size: 1.9rem; margin-bottom: 2px; }
    .page-hero--schedule .page-hero__l2 { font-size: 4.1rem; line-height: 0.94; }
    .page-hero--schedule .page-hero__sub { font-size: 1rem; margin-top: 14px; }

    .page-hero__inner { text-align: left; padding-bottom: 42px; }
    .page-hero__title { font-size: 4.5rem; line-height: 0.9; }
    .page-hero__title .hl-blue { display: block; }   /* "Coaches" drops under "Our" */
    .page-hero__sub { font-size: 1.02rem; max-width: 330px; margin-top: 16px; }

    /* 2. Staff band — no pills; "A staff built on" / "real experience." (2 lines) */
    .staff-band { padding-block: 40px 96px; }
    .staff-band__title { font-size: 2.7rem; line-height: 1.02; margin-bottom: 30px; }
    .staff-band__title .hl-blue { display: block; }   /* blue phrase drops to its own line */
    .staff-band__title .hl-blue br { display: none; }  /* "real experience." stays on one line */
    .tag-list { display: none; }
    .staff-band__text p { font-size: 0.98rem; line-height: 1.7; margin-bottom: 20px; }

    /* 3. Coach carousel — all three photos sit fully in view */
    .coaches-sec { padding-block: 100px 70px; }
    .coaches-sec__watermark { width: 340px; right: -100px; }
    .carousel { gap: 8px; margin-bottom: 40px; }
    .carousel__item { width: 72px; height: 100px; }
    .carousel__item--active { width: 158px; height: 220px; }
    .coach-info__name { font-size: 2.15rem; }

    /* Detail panel stacks; the column divider becomes a rule between them */
    .coach-detail { margin-top: 22px; padding: 24px 20px; }
    .coach-detail__grid { grid-template-columns: 1fr; }
    .coach-detail__col:first-child { padding-right: 0; }
    .coach-detail__col + .coach-detail__col {
        padding-left: 0;
        border-left: none;
        margin-top: 26px;
        padding-top: 26px;
        border-top: 1px solid rgba(11, 36, 64, 0.1);
    }
    .coach-detail__head { font-size: 1.24rem; margin-bottom: 16px; }
    .coach-detail__list li,
    .coach-detail__text { font-size: 0.95rem; }

    /* 4. CTA — no orange button, larger blue heading (photo shown plainly) */
    .cta-banner__inner { padding: 44px 26px 30px; min-height: 0; }
    /* hide the orange button only on the coaches CTA (plain .cta-banner), not the centered one */
    .cta-banner:not(.cta-banner--center) .cta-banner__content .btn--orange { display: none; }
    .cta-banner__title { margin-bottom: 30px; }
    .cta-banner__line1 { font-size: 2.8rem; margin-bottom: 6px; line-height: 1.02; }
    .cta-banner__line2 { font-size: 4.2rem; line-height: 0.92; }
    .cta-banner__line2 br { display: none; }

    /* Fundraising page */
    .partner-sec { padding-block: 96px 60px; }
    .partner-sec__head { flex-direction: column; }
    .benefit-cards { grid-template-columns: 1fr; }
    .benefit-card { aspect-ratio: auto; }
    .tiers { grid-template-columns: 1fr; }
    .qr-panel { padding: 32px 22px; }
    .qr-panel__qr { width: 180px; height: 180px; }
    .zelle-panel { scroll-margin-top: 90px; }   /* shorter mobile header */
    .zelle-card__handle { font-size: 0.98rem; }
    /* Centered CTA (fundraising, before footer) — left-aligned & larger on mobile */
    .cta-banner--center .cta-banner__inner {
        align-items: flex-start;
        justify-content: flex-end;
        text-align: left;
        min-height: 0;
        padding: 46px 28px 40px;
    }
    .cta-banner--center .cta-banner__title { margin-bottom: 30px; }
    .cta-banner--center .cta-banner__line1 {
        font-size: 2.9rem;
        line-height: 1.02;
        margin-bottom: 6px;
        overflow-wrap: break-word;
    }
    .cta-banner--center .cta-banner__line2 { font-size: 4.4rem; line-height: 0.92; }
    .cta-banner__actions { flex-direction: column; align-items: stretch; gap: 14px; width: 100%; }
    .cta-banner__actions .btn { width: 100%; --btn-fs: 0.9rem; }
    .cta-banner__actions .btn--ghost { justify-content: space-between; }

    /* Contact page */
    /* section-2 heading: keep the blue word in flow (no block gap) & size for 4-line wrap */
    .contact-band__inner .staff-band__title { font-size: 3.35rem; line-height: 1.04; }
    .contact-band__inner .staff-band__title .hl-blue { display: inline; }
    .contact-cols { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }  /* 2x2 grid */
    .form-sec { padding-block: 96px 70px; }
    .form-card { padding: 36px 22px 32px; }
    .contact-form__grid { grid-template-columns: 1fr; }
    .contact-form__submit { width: 100%; justify-content: space-between; }
    /* taller CTA before the footer — content vertically centred (balanced) */
    .cta-banner--center.cta-banner--tall .cta-banner__inner {
        min-height: 600px;
        justify-content: center;
    }

    /* About page */
    /* section heading is redundant with the hero on mobile — hidden per reference */
    .seasons-sec__title { display: none; }
    .seasons-sec { padding-block: 40px 90px; }

    /* Season cards — centred content (per reference) */
    .season-card { padding: 34px 24px; text-align: center; }
    .season-card__grid { grid-template-columns: 1fr; gap: 18px; }
    .season-card__name { font-size: 1.5rem; margin-bottom: 6px; }
    .season-card__dates { font-size: 0.95rem; }
    .season-card__desc { font-size: 0.92rem; }
    .season-card__label { font-size: 1rem; }
    .season-card__value { font-size: 0.92rem; }

    /* Team divisions — single row of 6U | 8U | 10U | 12U, stacked full-width buttons */
    .divisions li { font-size: 1.5rem; }
    .divisions-card__actions { flex-direction: column; align-items: stretch; }
    .divisions-card__actions .btn { width: 100%; }
    .divisions-card__actions .btn--ghost { justify-content: space-between; }

    .faq-sec { padding-block: 96px 70px; }

    /* Schedule page */
    .practice-sec { padding-block: 48px 70px; }
    .practice-sec__l1 { font-size: 1.4rem; }
    .practice-sec__l2 { font-size: 3rem; }
    .practice-cards { grid-template-columns: 1fr; }
    .practice-card { padding: 30px 24px; }
    .practice-months { grid-template-columns: 1fr; }
    .practice-note { padding: 26px 24px; }
    .practice-note .btn { width: 100%; justify-content: space-between; }

    .games-sec { padding-block: 96px 70px; }
    .games-sec__eyebrow { font-size: 0.82rem; }
    .games-sec__title { font-size: 3rem; }
    /* Date + fixture on the top row, time and home/away tag on their own row */
    .game {
        grid-template-columns: 62px minmax(0, 1fr);
        gap: 8px 16px;
        padding: 16px 18px;
    }
    .game__day { font-size: 1.8rem; }
    .game__side {
        grid-column: 1 / -1;
        justify-content: space-between;
        margin-top: 4px;
        padding-top: 12px;
        border-top: 1px solid #dbe7f3;
    }

    .keydates-sec { padding-block: 60px; }
    .keydates { grid-template-columns: 1fr; }

    /* Coaches v2 */
    .coachv2-sec { padding-block: 96px 60px; }
    .coach-cards { gap: 26px; }
    .coach-card { padding: 24px 20px 30px; border-radius: 18px; }
}

/* Small phones */
@media (max-width: 420px) {
    .container { padding-inline: 28px; }
    .hero__inner { padding: 0 28px; }
    .hero__cta { padding-inline: 28px; }
    .hero__title { font-size: 2.1rem; }
}