/* =============================================================================
   Silver Gate Junior Sailing — design system + front-end styles
   Bold, playful, animated. Built around the heritage burgee-blue logo.
   ========================================================================== */

:root {
    /* Brand palette ------------------------------------------------------- */
    --sg-blue:    #1378C2;   /* the logo blue */
    --sg-blue-d:  #0F5E9E;
    --navy:       #0B2A4A;
    --navy-d:     #07182B;
    --teal:       #15B7C7;
    --aqua:       #34D2DE;
    --sun:        #FFB323;
    --sun-l:      #FFD15C;
    --coral:      #FF6B5E;
    --foam:       #EAF6FF;
    --sand:       #FFF6E6;
    --white:      #FFFFFF;
    --ink:        #0B2A4A;
    --ink-soft:   #41617f;

    /* Type --------------------------------------------------------------- */
    --font-display: "Outfit", system-ui, sans-serif;
    --font-body:    "Inter", system-ui, sans-serif;

    /* Geometry ----------------------------------------------------------- */
    --radius:    18px;
    --radius-lg: 30px;
    --shadow-sm: 0 4px 14px rgba(11, 42, 74, .08);
    --shadow:    0 14px 40px rgba(11, 42, 74, .14);
    --shadow-lg: 0 30px 70px rgba(11, 42, 74, .22);
    --maxw: 1180px;
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--white);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Typography ------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; }
.eyebrow {
    font-family: var(--font-display);
    font-weight: 700; font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--sg-blue);
    display: inline-flex; align-items: center; gap: .5rem;
}
.eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: var(--sun); }

/* Layout ----------------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.2rem); }
.section { position: relative; padding-block: clamp(4rem, 9vw, 7.5rem); }
.section-head { max-width: 660px; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section-head h2 { font-size: clamp(2rem, 5vw, 3.4rem); margin-top: .6rem; }
.section-head p { color: var(--ink-soft); font-size: 1.12rem; margin-top: 1rem; }
.center { text-align: center; margin-inline: auto; }

/* Buttons ---------------------------------------------------------------- */
.btn {
    --bg: var(--sun);
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
    padding: .95rem 1.7rem; border-radius: 999px; border: none;
    background: var(--bg); color: var(--navy);
    box-shadow: 0 10px 24px rgba(255, 179, 35, .4);
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, filter .25s;
    will-change: transform;
}
.btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 34px rgba(255, 179, 35, .5); filter: saturate(1.08); }
.btn:active { transform: translateY(0) scale(.99); }
.btn--blue   { --bg: var(--sg-blue); color: #fff; box-shadow: 0 10px 24px rgba(19,120,194,.4); }
.btn--blue:hover { box-shadow: 0 16px 34px rgba(19,120,194,.5); }
.btn--ghost  { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.btn--ghost:hover { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 2px #fff; }
.btn--lg { padding: 1.1rem 2.1rem; font-size: 1.1rem; }

/* =============================================================================
   Top nav
   ========================================================================== */
.nav {
    position: fixed; inset: 0 0 auto 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .85rem clamp(1.1rem, 4vw, 2.2rem);
    transition: background .35s, box-shadow .35s, padding .35s;
}
.nav.is-stuck { background: rgba(255,255,255,.92); box-shadow: var(--shadow-sm); padding-block: .55rem; }
/* The blur lives on a pseudo-element, NOT on .nav itself. backdrop-filter on an
   ancestor establishes a containing block for position:fixed descendants — which
   would trap the mobile drawer inside the nav bar the moment it became "stuck"
   on scroll (the menu collapsed / mis-positioned). Keeping it on ::before frees
   the drawer to stay fixed to the viewport. */
.nav.is-stuck::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.nav__brand { display: flex; align-items: center; gap: .7rem; }
.nav__brand img { height: 40px; width: auto; transition: filter .35s; }
.nav:not(.is-stuck) .nav__brand img { filter: brightness(0) invert(1); }   /* white logo over the hero */
.nav__brand b { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; line-height: 1; }
.nav:not(.is-stuck) .nav__brand b { color: #fff; }
.nav__brand span { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sg-blue); font-weight: 700; }
.nav:not(.is-stuck) .nav__brand span { color: rgba(255,255,255,.8); }
.nav__links { display: flex; align-items: center; gap: 1.6rem; }
.nav__links a { font-weight: 600; font-size: .96rem; color: var(--ink); transition: color .2s; }
.nav:not(.is-stuck) .nav__links a { color: rgba(255,255,255,.92); }
.nav__links a:hover { color: var(--sg-blue); }
.nav:not(.is-stuck) .nav__links a:hover { color: #fff; }
.nav__cta { padding: .6rem 1.2rem; font-size: .95rem; }
.nav__toggle { display: none; background: none; border: none; padding: .4rem; }
.nav__toggle span { display: block; width: 24px; height: 2.5px; border-radius: 2px; background: var(--ink); margin: 5px 0; transition: background .3s; }
.nav:not(.is-stuck) .nav__toggle span { background: #fff; }

@media (max-width: 860px) {
    .nav__links {
        position: fixed; inset: 0 0 0 auto; width: min(78vw, 320px);
        flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.6rem;
        background: var(--navy); padding: 2rem; transform: translateX(100%);
        transition: transform .35s cubic-bezier(.2,.8,.2,1);
    }
    .nav__links.is-open { transform: translateX(0); box-shadow: -20px 0 60px rgba(7,24,43,.4); }
    .nav__links a, .nav:not(.is-stuck) .nav__links a { color: #fff; font-size: 1.2rem; }
    .nav__toggle { display: block; z-index: 101; }
    /* hamburger → X when the drawer is open (toggle follows links in the DOM) */
    .nav__toggle span { transition: transform .3s, opacity .2s, background .3s; }
    .nav__links.is-open ~ .nav__toggle span { background: #fff; }
    .nav__links.is-open ~ .nav__toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
    .nav__links.is-open ~ .nav__toggle span:nth-child(2) { opacity: 0; }
    .nav__links.is-open ~ .nav__toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}

/* =============================================================================
   Hero — full-bleed San Diego Bay photography
   ========================================================================== */
.hero {
    position: relative; min-height: 100svh; display: flex; align-items: flex-end;
    overflow: hidden; background: #8a6a42;   /* avg hero color while the photo loads */
    padding-bottom: clamp(3.5rem, 8vh, 6rem);
}
.hero__img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 60% 45%; z-index: 0;
    animation: heroZoom 22s ease-out forwards;
}
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero__scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(7,24,43,.34) 0%, rgba(7,24,43,0) 28%),
        linear-gradient(90deg, rgba(7,24,43,.62) 0%, rgba(7,24,43,.18) 46%, rgba(7,24,43,0) 72%),
        linear-gradient(0deg, rgba(5,16,28,.72) 0%, rgba(5,16,28,0) 42%);
}

.hero__inner { position: relative; z-index: 5; width: 100%; }
.hero__content { max-width: 640px; color: #fff; }
.hero__badge {
    display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display);
    font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
    padding: .45rem 1rem; border-radius: 999px; backdrop-filter: blur(8px);
}
.hero__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px rgba(255,179,35,.35); }
.hero h1 {
    font-size: clamp(3rem, 9vw, 6.4rem); line-height: .94; margin-top: 1.2rem;
    text-shadow: 0 8px 40px rgba(5,16,28,.4);
}
.hero h1 .pop { color: var(--sun-l); display: inline-block; }
.hero__lede {
    font-size: clamp(1.08rem, 2.2vw, 1.35rem); margin-top: 1.3rem; max-width: 40ch;
    color: rgba(255,255,255,.94); text-shadow: 0 2px 18px rgba(5,16,28,.45);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.1rem; }

.hero__credit {
    position: absolute; right: 1rem; bottom: .7rem; z-index: 5;
    font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.5);
}

.hero__scroll {
    position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 6;
    color: #fff; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
    display: flex; flex-direction: column; align-items: center; gap: .4rem; opacity: .85;
}
.hero__scroll .mouse { width: 24px; height: 38px; border: 2px solid rgba(255,255,255,.7); border-radius: 14px; position: relative; }
.hero__scroll .mouse::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 7px; border-radius: 4px; background: #fff; transform: translateX(-50%); animation: scrollDot 1.6s ease-in-out infinite; }
@keyframes scrollDot { 50% { transform: translate(-50%, 10px); opacity: .3; } }

/* =============================================================================
   Stats strip
   ========================================================================== */
.stats { background: var(--navy); color: #fff; }
.stats .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding-block: 2.4rem; }
.stat { text-align: center; }
.stat b { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--sun); display: block; line-height: 1; }
.stat span { font-size: .92rem; color: rgba(255,255,255,.75); letter-spacing: .02em; }
@media (max-width: 620px) { .stats .container { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } }

.eyebrow--light { color: #fff; }
.eyebrow--light::before { background: var(--sun-l); }

/* =============================================================================
   Immersive full-bleed photo bands (parallax)
   ========================================================================== */
.immersive {
    position: relative; min-height: clamp(440px, 70vh, 640px);
    display: flex; align-items: center; overflow: hidden;
    background-size: cover; background-position: center;
    background-attachment: fixed;   /* parallax on capable devices */
}
.immersive::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(5,16,28,.78) 0%, rgba(5,16,28,.45) 48%, rgba(5,16,28,.15) 100%);
}
.immersive--bay { background-image: url("/assets/img/bay-aerial.jpg"); }
/* background-attachment: fixed is janky on touch/small screens — pin it instead */
@media (max-width: 820px), (hover: none) {
    .immersive { background-attachment: scroll; }
}
.immersive__inner { position: relative; z-index: 2; color: #fff; max-width: 620px; }
.immersive__inner h2 { font-size: clamp(2rem, 5vw, 3.4rem); margin-top: .7rem; text-shadow: 0 6px 30px rgba(5,16,28,.4); }
.immersive__inner p { font-size: 1.15rem; margin-top: 1rem; color: rgba(255,255,255,.92); }
.immersive .hero__credit { color: rgba(255,255,255,.55); }

/* =============================================================================
   Photo split (image + text)
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.split__media { position: relative; min-height: 380px; overflow: hidden; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__body { display: flex; align-items: center; background: var(--foam); padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.4rem, 5vw, 4rem); }
.split__text { max-width: 520px; }
.split__text h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin-top: .7rem; }
.split__text > p { color: var(--ink-soft); font-size: 1.08rem; margin-top: 1rem; }
.split__text .btn { margin-top: 1.6rem; }
.ticks { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .7rem; }
.ticks li { display: flex; align-items: center; gap: .7rem; font-weight: 600; color: var(--ink); }
.ticks li svg { color: var(--sg-blue); flex: none; }
@media (max-width: 820px) {
    .split { grid-template-columns: 1fr; }
    .split__media { min-height: 300px; }
}

/* =============================================================================
   Value props ("why sail")
   ========================================================================== */
.why { background: #fff; }
.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.4rem; }
.value {
    background: #fff; border-radius: var(--radius); padding: 2rem 1.7rem; box-shadow: var(--shadow-sm);
    transition: transform .3s, box-shadow .3s;
}
.value:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.value .ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 1.1rem; color: #fff; }
.value h3 { font-size: 1.3rem; }
.value p { color: var(--ink-soft); margin-top: .5rem; font-size: 1rem; }

/* =============================================================================
   Programs
   ========================================================================== */
.prog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.5rem; }
.prog {
    position: relative; border-radius: var(--radius-lg); padding: 2rem 1.8rem 1.8rem;
    background: #fff; box-shadow: var(--shadow-sm); overflow: hidden;
    border: 1px solid rgba(11,42,74,.06);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
    transform-style: preserve-3d; will-change: transform;
}
.prog:hover { box-shadow: var(--shadow-lg); }
.prog::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 7px; background: var(--accent, var(--sg-blue)); }
.prog__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.prog__ic { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: var(--accent, var(--sg-blue)); box-shadow: 0 10px 22px color-mix(in srgb, var(--accent, var(--sg-blue)) 40%, transparent); }
.prog__tag { font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent, var(--sg-blue)); background: color-mix(in srgb, var(--accent, var(--sg-blue)) 12%, #fff); padding: .35rem .7rem; border-radius: 999px; }
.prog h3 { font-size: 1.5rem; }
.prog__lede { color: var(--accent, var(--sg-blue)); font-weight: 600; margin-top: .15rem; }
.prog p { color: var(--ink-soft); margin-top: .7rem; font-size: .98rem; }
.prog__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.chip { font-size: .8rem; font-weight: 600; color: var(--ink-soft); background: var(--foam); padding: .35rem .75rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .35rem; }
.prog__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px dashed rgba(11,42,74,.14); }
.prog__price { font-family: var(--font-display); font-weight: 700; color: var(--navy); }
.prog__go { font-weight: 700; color: var(--accent, var(--sg-blue)); display: inline-flex; align-items: center; gap: .35rem; transition: gap .2s; }
.prog:hover .prog__go { gap: .65rem; }

/* accent color map */
.a-blue  { --accent: var(--sg-blue); }
.a-teal  { --accent: var(--teal); }
.a-sun   { --accent: #F2A100; }
.a-coral { --accent: var(--coral); }
.a-navy  { --accent: var(--navy); }

/* =============================================================================
   Fleet
   ========================================================================== */
.fleet { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-d) 100%); color: #fff; overflow: hidden; }
.fleet .section-head h2 { color: #fff; }
.fleet .section-head p { color: rgba(255,255,255,.72); }
.fleet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; }
.boat {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius);
    padding: 1.6rem; transition: transform .3s, background .3s; backdrop-filter: blur(4px);
}
.boat:hover { transform: translateY(-6px); background: rgba(255,255,255,.1); }
.boat__hull { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: var(--navy); background: var(--accent, var(--aqua)); margin-bottom: 1rem; }
.boat h3 { font-size: 1.25rem; }
.boat__sub { color: var(--sun-l); font-weight: 600; font-size: .85rem; margin-top: .15rem; }
.boat p { color: rgba(255,255,255,.74); font-size: .92rem; margin-top: .6rem; }
.boat__meta { display: flex; gap: 1.2rem; margin-top: 1rem; font-size: .82rem; color: rgba(255,255,255,.85); }
.boat__meta b { color: #fff; font-family: var(--font-display); }

/* =============================================================================
   Season split (summer vs year-round)
   ========================================================================== */
.seasons { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.season {
    border-radius: var(--radius-lg); padding: clamp(2rem, 4vw, 3rem); color: #fff; position: relative; overflow: hidden;
    min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end;
    background-size: cover; background-position: center;
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.season::before { content: ""; position: absolute; inset: 0; transition: opacity .4s; }
.season:hover { transform: translateY(-6px); }
.season--summer { background-image: url("/assets/img/hero-sail.jpg"); background-position: 30% 50%; }
.season--summer::before { background: linear-gradient(160deg, rgba(255,140,40,.45) 0%, rgba(120,40,10,.35) 40%, rgba(5,16,28,.82) 100%); }
.season--year   { background-image: url("/assets/img/solo-sail.jpg"); }
.season--year::before { background: linear-gradient(160deg, rgba(19,120,194,.4) 0%, rgba(7,24,43,.45) 40%, rgba(5,16,28,.85) 100%); }
.season > * { position: relative; z-index: 1; }
.season .kicker { font-family: var(--font-display); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; opacity: .95; }
.season h3 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-top: .4rem; text-shadow: 0 4px 24px rgba(5,16,28,.5); }
.season p { margin-top: .7rem; max-width: 38ch; color: rgba(255,255,255,.92); }
.season a { margin-top: 1.3rem; align-self: flex-start; }
@media (max-width: 760px) { .seasons { grid-template-columns: 1fr; } }

/* =============================================================================
   CTA banner — full-bleed dusk skyline
   ========================================================================== */
.cta { position: relative; color: #fff; text-align: center; overflow: hidden; background: var(--navy-d); padding-block: clamp(4.5rem, 10vw, 8rem); }
.cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; z-index: 0; }
.cta__scrim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 100% at 50% 50%, rgba(7,24,43,.55), rgba(5,16,28,.82) 80%); }
.cta__inner { position: relative; z-index: 2; }
.cta h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); text-shadow: 0 6px 30px rgba(5,16,28,.5); }
.cta p { font-size: 1.15rem; color: rgba(255,255,255,.92); margin: 1rem auto 2rem; max-width: 46ch; }

/* =============================================================================
   Footer
   ========================================================================== */
.footer { background: var(--navy-d); color: rgba(255,255,255,.72); padding-block: 3.4rem 2.2rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.footer__brand img { height: 46px; filter: brightness(0) invert(1); margin-bottom: 1rem; }
.footer h4 { color: #fff; font-size: 1rem; margin-bottom: .9rem; letter-spacing: .04em; }
.footer a { color: rgba(255,255,255,.72); transition: color .2s; }
.footer a:hover { color: var(--sun); }
.footer ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.footer__bottom { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; }
@media (max-width: 720px) { .footer__grid { grid-template-columns: 1fr; gap: 1.6rem; } }

/* =============================================================================
   Scroll-reveal
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

/* =============================================================================
   Interior page header (signup, etc.)
   ========================================================================== */
.pagehead {
    position: relative; padding: 9rem 0 6rem; color: #fff; text-align: center; overflow: hidden;
    background: var(--sg-blue-d);   /* fallback while the photo loads */
    background-size: cover; background-position: center;
}
/* photo + dark scrim for legible white type */
.pagehead::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(7,24,43,.45) 0%, rgba(7,24,43,.25) 40%, rgba(7,24,43,.55) 100%);
}
.pagehead > * { position: relative; z-index: 1; }
.pagehead__waves { z-index: 2; }
.pagehead--marina { background-image: url("/assets/img/marina.jpg"); background-position: center 62%; }
.pagehead--bay    { background-image: url("/assets/img/bay-aerial.jpg"); }
.pagehead--bridge { background-image: url("/assets/img/bridge-dusk.jpg"); }
.pagehead h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin-top: 1rem; text-shadow: 0 6px 30px rgba(5,16,28,.45); }
.pagehead p { max-width: 46ch; margin: 1rem auto 0; color: rgba(255,255,255,.94); font-size: 1.1rem; text-shadow: 0 2px 16px rgba(5,16,28,.4); }
.pagehead .hero__badge { margin-inline: auto; }
.pagehead__waves { position: absolute; inset: auto 0 -1px 0; line-height: 0; }
.pagehead__waves svg { width: 100%; height: 80px; }

/* =============================================================================
   Forms
   ========================================================================== */
.form-wrap { max-width: 760px; }
.form-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1.6rem, 4vw, 2.8rem); }
.form-title { font-size: 1.7rem; margin-bottom: 1.4rem; }
.field-group { border: none; padding: 0; margin: 0 0 1.6rem; }
.field-group legend { font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-blue); margin-bottom: .9rem; padding: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 540px) { .grid-2 { grid-template-columns: 1fr; } }
.field { display: block; margin-bottom: 1rem; }
.field > span { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .4rem; color: var(--ink); }
.field input, .field select, .field textarea {
    width: 100%; font: inherit; color: var(--ink);
    padding: .85rem 1rem; border: 2px solid #dce7f1; border-radius: 12px; background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--sg-blue); box-shadow: 0 0 0 4px rgba(19,120,194,.14);
}
.field.has-error input, .field.has-error select { border-color: var(--coral); }
.field small { color: var(--coral); font-weight: 600; display: block; margin-top: .35rem; }
.form-alert { background: #fff0ef; color: #c0392b; border: 1px solid #ffd5d1; border-radius: 12px; padding: .9rem 1.1rem; margin-bottom: 1.3rem; font-weight: 600; }
.form-note { text-align: center; color: var(--ink-soft); font-size: .85rem; margin-top: 1rem; }

.success-card { text-align: center; }
.success-ic { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1.2rem; color: #fff; background: linear-gradient(135deg, var(--teal), var(--sg-blue)); box-shadow: 0 16px 34px rgba(19,120,194,.4); }
.success-card h2 { font-size: 2rem; }
.success-card p { color: var(--ink-soft); max-width: 46ch; margin: .8rem auto 1.6rem; font-size: 1.05rem; }

/* =============================================================================
   Calendar (public) + upcoming events
   ========================================================================== */
.cal-legend { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-bottom: 1.4rem; }
.cal-legend__item { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.cal-legend__item i { width: 12px; height: 12px; border-radius: 4px; background: var(--accent, var(--sg-blue)); }

.cal { background: #fff; border: 1px solid #e4ecf3; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.cal__bar { display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.3rem; border-bottom: 1px solid #eef3f8; }
.cal__title { font-size: clamp(1.3rem, 3vw, 1.8rem); min-width: 9ch; }
.cal__nav { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--sg-blue); background: var(--foam); transition: background .2s, color .2s; }
.cal__nav:hover { background: var(--sg-blue); color: #fff; }
.cal__today { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: var(--sg-blue); padding: .5rem .9rem; border-radius: 999px; background: var(--foam); }
.cal__today:hover { background: var(--sg-blue); color: #fff; }

.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__dow { background: #f7fafd; border-bottom: 1px solid #eef3f8; }
.cal__dowcell { padding: .6rem; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.cal__cell { min-height: 112px; border-right: 1px solid #eef3f8; border-bottom: 1px solid #eef3f8; padding: .4rem; display: flex; flex-direction: column; gap: .25rem; }
.cal__cell:nth-child(7n) { border-right: 0; }
.cal__cell--empty { background: #fbfdfe; }
.cal__date { font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: var(--ink-soft); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; }
.cal__cell.is-today .cal__date { background: var(--sg-blue); color: #fff; }
.cal__events { display: flex; flex-direction: column; gap: 3px; }
.cal__chip {
    text-align: left; border: 0; cursor: pointer; width: 100%;
    font-size: .72rem; font-weight: 600; line-height: 1.25; color: #fff;
    padding: .2rem .4rem; border-radius: 6px; background: var(--accent, var(--sg-blue));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: filter .15s;
}
.cal__chip:hover { filter: brightness(1.08); }
.cal__chip b { font-weight: 800; opacity: .9; }
.cal__more { font-size: .68rem; font-weight: 700; color: var(--ink-soft); padding-left: .2rem; }

/* Upcoming list (calendar page) + homepage grid */
.upcoming { background: var(--foam); }
.up-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.1rem; }
.cal-up { margin-top: 2.6rem; }
.cal-up h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1.1rem; }
.cal-up__list { display: grid; gap: .9rem; }
.cal-up__empty { color: var(--ink-soft); }
.cal-up__empty a { color: var(--sg-blue); font-weight: 600; }

.up {
    display: flex; gap: 1rem; background: #fff; border: 1px solid #e4ecf3;
    border-left: 5px solid var(--accent, var(--sg-blue)); border-radius: 14px;
    padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .2s; color: inherit;
}
a.up:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.up__date { flex: none; width: 56px; text-align: center; }
.up__date b { display: block; font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent, var(--sg-blue)); }
.up__date span { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1; color: var(--ink); }
.up__body { flex: 1; min-width: 0; }
.up__top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.up__cat { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--accent, var(--sg-blue)); padding: .2rem .55rem; border-radius: 999px; }
.up__body h3 { font-size: 1.15rem; }
.up__meta { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin-top: .5rem; color: var(--ink-soft); font-size: .88rem; }
.up__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.up__meta svg { color: var(--accent, var(--sg-blue)); flex: none; }
.up__body > p { color: var(--ink-soft); font-size: .92rem; margin-top: .6rem; }
.up.is-flash { animation: upFlash 1.6s ease; }
@keyframes upFlash { 0%, 100% { box-shadow: var(--shadow-sm); } 30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, var(--sg-blue)) 45%, transparent); } }

@media (max-width: 640px) {
    .cal__cell { min-height: 84px; }
    .cal__chip { font-size: 0; padding: 4px; }       /* dots-only on phones */
    .cal__chip b { display: none; }
    .cal__more { font-size: .6rem; }
}

/* =============================================================================
   Map / "Find us" section
   ========================================================================== */
.mapsec { background: var(--foam); }
.mapsec__frame {
    margin: 0 auto clamp(1.6rem, 4vw, 2.6rem); width: 100%;
    max-width: 1320px; padding-inline: clamp(0rem, 2vw, 1rem);
}
.mapsec__map {
    display: block; width: 100%; height: clamp(380px, 56vh, 600px); border: 0;
    border-radius: var(--radius-lg); box-shadow: var(--shadow);
    background: #0b2a4a;
}
.mapsec__pins {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem; margin-bottom: 1.6rem;
}
.mappin {
    display: flex; gap: .8rem; text-align: left; width: 100%; cursor: pointer;
    background: #fff; border: 1px solid #e4ecf3; border-left: 4px solid transparent;
    border-radius: 14px; padding: 1rem 1.1rem; box-shadow: var(--shadow-sm);
    transition: transform .18s, box-shadow .18s, border-color .18s; font: inherit; color: inherit;
}
.mappin:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.mappin.is-active { border-left-color: var(--sg-blue); box-shadow: 0 0 0 3px rgba(19,120,194,.18), var(--shadow); }
.mappin__dot { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.mappin__body { min-width: 0; }
.mappin__body b { display: block; font-family: var(--font-display); font-size: 1.02rem; color: var(--ink); }
.mappin__cat { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.mappin__desc { display: block; color: var(--ink-soft); font-size: .9rem; margin-top: .35rem; }
.mapsec__cta { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* Leaflet custom pins + popups */
.sg-leaflet-pin span {
    display: block; width: 100%; height: 100%; border-radius: 50%;
    border: 3px solid #fff; box-shadow: 0 2px 8px rgba(5,16,28,.5);
    transition: transform .15s;
}
.sg-leaflet-pin.is-big span { transform: scale(1.15); box-shadow: 0 4px 14px rgba(5,16,28,.6); }
.sg-pop { font-family: var(--font-body); max-width: 230px; }
.sg-pop__cat { display: block; font: 700 .72rem/1 var(--font-body); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 3px; }
.sg-pop b { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.sg-pop p { font-size: .88rem; color: var(--ink-soft); margin-top: .3rem; }
.leaflet-container { font-family: var(--font-body); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
}