/* Emerald Coast Dog Shows — site styles */

:root {
    --emerald-deep: #0e6f58;
    --emerald: #1f9a78;
    --emerald-bright: #34c09a;
    --emerald-light: #4fd8a0;
    --teal: #4da9c8;
    --navy: #0f3553;
    --ink: #1a2330;
    --muted: #5a6470;
    --cream: #f5efe4;
    --sand: #c9a875;
    --bg: #faf6ef;
    --line: #e6dfd1;
    --line-strong: #c9c0ac;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

@media (max-width: 480px) {
    html {
        scroll-padding-top: 76px;
    }
}

body {
    font-family: 'Instrument Sans', system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.55;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.display {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.02;
}

    .display em {
        font-style: normal;
        font-weight: 700;
        color: var(--emerald);
        letter-spacing: -0.015em;
    }

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ===== NAV ===== */
nav.site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 246, 239, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    max-width: 1280px;
    margin: 0 auto;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--ink);
}

.brand-icon {
    height: 52px;
    width: auto;
    display: block;
}

.brand-wordmark {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 21px;
    letter-spacing: -0.01em;
    line-height: 1.05;
    color: var(--navy);
}

    .brand-wordmark small {
        display: block;
        font-family: 'Instrument Sans', sans-serif;
        font-weight: 400;
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: var(--emerald);
        margin-top: 4px;
    }

@media (max-width: 900px) {
    .brand-wordmark {
        display: none;
    }

    .brand-icon {
        height: 44px;
    }
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 22px;
    list-style: none;
}

    .nav-links a {
        color: var(--ink);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: color 0.2s;
        white-space: nowrap;
    }

        .nav-links a:hover {
            color: var(--emerald);
        }

.nav-cta {
    background: var(--emerald-deep);
    color: var(--cream) !important;
    padding: 11px 22px;
    border-radius: 999px;
    font-weight: 500;
    transition: background 0.2s, transform 0.2s;
}

    .nav-cta:hover {
        background: var(--emerald);
        transform: translateY(-1px);
    }

.mobile-toggle {
    display: none;
}

/* ===== HERO ===== */
.hero {
    padding: 100px 0 120px;
    position: relative;
    overflow: hidden;
}

    .hero::before {
        content: '';
        position: absolute;
        top: -200px;
        right: -200px;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(79, 216, 160, 0.22) 0%, transparent 65%);
        border-radius: 50%;
        pointer-events: none;
        animation: drift 20s ease-in-out infinite alternate;
    }

    .hero::after {
        content: '';
        position: absolute;
        bottom: -300px;
        left: -100px;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(77, 169, 200, 0.18) 0%, transparent 65%);
        border-radius: 50%;
        pointer-events: none;
        animation: drift 25s ease-in-out infinite alternate-reverse;
    }

@keyframes drift {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(-40px, 30px);
    }
}

.hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 80px;
    align-items: end;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--emerald);
    font-weight: 500;
    margin-bottom: 32px;
}

    .eyebrow::before {
        content: '';
        width: 24px;
        height: 1px;
        background: var(--emerald);
    }

.hero h1 {
    font-size: clamp(38px, 4.4vw, 58px);
    margin-bottom: 36px;
    line-height: 1.1;
    text-wrap: balance;
}

.hero-meta {
    border-left: 1px solid var(--line-strong);
    padding-left: 28px;
    padding-bottom: 12px;
}

    .hero-meta p {
        font-size: 18px;
        color: var(--muted);
        margin-bottom: 32px;
        max-width: 380px;
    }

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 26px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.25s;
    border: 1px solid transparent;
    cursor: pointer;
}

.btn-primary {
    background: var(--emerald-deep);
    color: var(--cream);
}

    .btn-primary:hover {
        background: var(--emerald);
        transform: translateY(-2px);
        box-shadow: 0 10px 30px -10px rgba(11, 61, 46, 0.4);
    }

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line-strong);
}

    .btn-ghost:hover {
        border-color: var(--emerald-deep);
        color: var(--emerald-deep);
    }

.btn .arrow {
    transition: transform 0.25s;
}

.btn:hover .arrow {
    transform: translateX(3px);
}

/* ===== WAVE DIVIDER ===== */
.wave-divider {
    display: block;
    width: 100%;
    height: 60px;
    color: var(--line);
}

/* ===== SERVICES ===== */
.section-services {
    padding: 120px 0;
    background: var(--cream);
    position: relative;
}

.section-head {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 80px;
}

.section-num {
    font-family: 'Playfair Display', serif;
    font-weight: 300;
    font-size: 14px;
    color: var(--emerald);
    letter-spacing: 0.1em;
    margin-bottom: 16px;
    display: block;
}

.section-head h2 {
    font-size: clamp(40px, 5vw, 64px);
}

.section-head .lede {
    font-size: 19px;
    color: var(--muted);
    max-width: 480px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    background: var(--line);
    border: 1px solid var(--line);
}

.service {
    background: var(--cream);
    padding: 56px 48px;
    transition: background 0.3s;
    position: relative;
}

    .service:hover {
        background: var(--bg);
    }

.service-num {
    font-family: 'Playfair Display', serif;
    font-weight: 300;
    font-style: italic;
    font-size: 15px;
    color: var(--sand);
    margin-bottom: 24px;
    display: block;
}

.service h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 30px;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
    color: var(--emerald-deep);
}

.service ul {
    list-style: none;
}

.service li {
    padding: 10px 0;
    padding-left: 24px;
    position: relative;
    font-size: 15.5px;
    color: var(--ink);
    border-bottom: 1px dashed var(--line-strong);
}

    .service li:last-child {
        border-bottom: none;
    }

    .service li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 18px;
        width: 10px;
        height: 1px;
        background: var(--emerald);
    }

/* ===== APP FEATURE ===== */
.section-app {
    background: var(--emerald-deep);
    color: var(--cream);
    padding: 140px 0;
    position: relative;
    overflow: hidden;
}

    .section-app::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at 20% 30%, rgba(74, 155, 126, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(201, 168, 117, 0.15) 0%, transparent 50%);
        pointer-events: none;
    }

.app-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.app-left .section-num {
    color: var(--sand);
}

.app-left .eyebrow {
    color: var(--sand);
}

    .app-left .eyebrow::before {
        background: var(--sand);
    }

.app-left h2 {
    font-size: clamp(42px, 5.5vw, 72px);
    color: var(--cream);
    margin-bottom: 32px;
}

    .app-left h2 em {
        color: var(--sand);
    }

.app-left p {
    color: rgba(245, 239, 228, 0.75);
    font-size: 18px;
    margin-bottom: 40px;
    max-width: 460px;
}

.app-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 40px;
    margin-bottom: 48px;
}

.app-feature h4 {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 17px;
    color: var(--cream);
    margin-bottom: 8px;
}

.app-feature p {
    color: rgba(245, 239, 228, 0.65);
    font-size: 14.5px;
    margin: 0;
}

.app-stores {
    display: flex;
    gap: 14px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.store-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px 12px 18px;
    background: rgba(245, 239, 228, 0.08);
    border: 1px solid rgba(245, 239, 228, 0.25);
    border-radius: 10px;
    color: var(--cream);
    text-decoration: none;
    transition: all 0.2s;
}

    .store-btn:hover {
        background: rgba(245, 239, 228, 0.14);
        border-color: var(--sand);
        transform: translateY(-2px);
    }

    .store-btn svg {
        flex-shrink: 0;
        color: var(--cream);
    }

    .store-btn span {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-family: 'Playfair Display', serif;
        font-weight: 500;
        font-size: 17px;
        line-height: 1.1;
        letter-spacing: -0.01em;
    }

    .store-btn small {
        font-family: 'Instrument Sans', sans-serif;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: rgba(245, 239, 228, 0.7);
        font-weight: 400;
        margin-bottom: 2px;
    }

.app-docs {
    font-size: 14px;
    color: rgba(245, 239, 228, 0.6);
    margin: 0;
    white-space: nowrap;
    overflow-x: auto;
}

    .app-docs a {
        color: var(--sand);
        text-decoration: underline;
        text-decoration-color: rgba(201, 168, 117, 0.4);
        text-underline-offset: 3px;
        transition: text-decoration-color 0.2s;
    }

        .app-docs a:hover {
            text-decoration-color: var(--sand);
        }

/* Phone mockup */
.phone-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.phone {
    width: 280px;
    height: 580px;
    background: linear-gradient(160deg, #0a1929, #1a2940);
    border-radius: 42px;
    padding: 12px;
    box-shadow: 0 50px 100px -20px rgba(0,0,0,0.5), 0 30px 60px -30px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(245, 239, 228, 0.1);
    position: relative;
}

.phone-screen {
    background: var(--cream);
    height: 100%;
    border-radius: 32px;
    overflow: hidden;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.phone-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--ink);
    margin-bottom: 8px;
}

.phone-title {
    font-family: 'Playfair Display', serif;
    font-size: 17px;
    color: var(--emerald-deep);
    font-weight: 500;
    margin-bottom: 4px;
}

.phone-sub {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 12px;
}

.phone-ring {
    background: white;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 12px;
}

    .phone-ring.active {
        background: var(--emerald-deep);
        color: var(--cream);
        border-color: var(--emerald-deep);
    }

.ring-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.ring-num {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 13px;
}

.ring-status {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
}

.ring-class {
    font-size: 11px;
    opacity: 0.85;
}

.ring-pulse {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--sand);
    border-radius: 50%;
    margin-right: 6px;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(1.3);
    }
}

.phone-notch {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 24px;
    background: #0a1929;
    border-radius: 999px;
    z-index: 2;
}

/* ===== RIBBONS & ROSETTES ===== */


.section-ribbons::before {
    content: '';
    position: absolute;
    top: 10%;
    left: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(201, 168, 117, 0.12) 0%, transparent 65%);
    pointer-events: none;
}



.pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
    padding: 16px 22px;
    background: var(--cream);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    text-decoration: none;
    color: var(--ink);
    transition: all 0.2s;
}

    .pdf-link:hover {
        border-color: var(--emerald);
        background: white;
        transform: translateY(-2px);
        box-shadow: 0 10px 30px -15px rgba(15, 53, 83, 0.25);
    }

    .pdf-link svg {
        color: var(--emerald);
        flex-shrink: 0;
    }

    .pdf-link span {
        display: flex;
        flex-direction: column;
        font-family: 'Playfair Display', serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.2;
    }

    .pdf-link small {
        font-family: 'Instrument Sans', sans-serif;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--muted);
        font-weight: 400;
        margin-top: 4px;
    }

/* ===== PACKAGE CTA ===== */
.section-package {
    padding: 140px 0;
}

.package-card {
    background: var(--navy);
    color: var(--cream);
    border-radius: 4px;
    padding: 80px;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 60px;
    align-items: center;
}

    .package-card::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(74, 155, 126, 0.25) 0%, transparent 60%);
        pointer-events: none;
    }

    .package-card h2 {
        font-size: clamp(34px, 4vw, 52px);
        color: var(--cream);
        margin-bottom: 24px;
        position: relative;
    }

        .package-card h2 em {
            color: var(--emerald-light);
        }

    .package-card p {
        color: rgba(245, 239, 228, 0.75);
        font-size: 17px;
        max-width: 540px;
        position: relative;
    }

.package-right {
    position: relative;
}

.package-list {
    list-style: none;
    border-top: 1px solid rgba(245, 239, 228, 0.15);
}

    .package-list li {
        padding: 18px 0;
        border-bottom: 1px solid rgba(245, 239, 228, 0.15);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 15px;
    }

    .package-list .check {
        color: var(--emerald-light);
        font-family: 'Playfair Display', serif;
        font-size: 18px;
    }

/* ===== ABOUT ===== */
.section-about {
    padding: 140px 0;
    background: var(--cream);
}

.about-inner {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
}

.about-image {
    aspect-ratio: 4/5;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(0,0,0,0.3);
    background: var(--emerald-deep);
}

    .about-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .about-image::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(10, 25, 41, 0.55) 0%, transparent 50%);
        pointer-events: none;
    }

    .about-image .label {
        position: absolute;
        bottom: 24px;
        left: 24px;
        color: var(--cream);
        font-family: 'Playfair Display', serif;
        font-style: italic;
        font-size: 14px;
        letter-spacing: 0.05em;
        z-index: 2;
        text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }

.about-right h2 {
    font-size: clamp(38px, 4.5vw, 58px);
    margin-bottom: 32px;
}

.about-right p {
    color: var(--muted);
    font-size: 17.5px;
    margin-bottom: 20px;
    max-width: 560px;
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid var(--line-strong);
}

.stat-num {
    font-family: 'Playfair Display', serif;
    font-weight: 300;
    font-size: 48px;
    color: var(--emerald-deep);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 8px;
}

    .stat-num em {
        font-style: italic;
        color: var(--sand);
        font-size: 36px;
    }

.stat-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
}

/* ===== FOOTER ===== */
footer {
    background: var(--navy);
    color: var(--cream);
    padding: 100px 0 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 80px;
}

.footer-icon {
    height: 70px;
    width: auto;
    display: block;
    margin-bottom: 20px;
    opacity: 0.9;
}

.footer-brand .display {
    font-size: 32px;
    color: var(--cream);
    margin-bottom: 16px;
}

.footer-brand p {
    color: rgba(245, 239, 228, 0.6);
    font-size: 15px;
    max-width: 320px;
}

.footer-col h5 {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--sand);
    margin-bottom: 24px;
    font-weight: 500;
}

.footer-col ul {
    list-style: none;
}

.footer-col li {
    margin-bottom: 12px;
}

.footer-col a {
    color: rgba(245, 239, 228, 0.75);
    text-decoration: none;
    font-size: 15px;
    transition: color 0.2s;
}

    .footer-col a:hover {
        color: var(--cream);
    }

.footer-bottom {
    border-top: 1px solid rgba(245, 239, 228, 0.12);
    padding-top: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: rgba(245, 239, 228, 0.5);
    flex-wrap: wrap;
    gap: 16px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 968px) {
    .hero-inner,
    .section-head,
    .app-inner,
    .ribbons-inner,
    .package-card,
    .about-inner,
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .app-features {
        grid-template-columns: 1fr;
    }

    .hero {
        padding: 60px 0 80px;
    }

    .section-services, .section-app, .section-ribbons, .section-package, .section-about {
        padding: 80px 0;
    }

    .package-card {
        padding: 48px 32px;
    }

    .service {
        padding: 40px 28px;
    }

    .hero-meta {
        border-left: none;
        border-top: 1px solid var(--line-strong);
        padding-left: 0;
        padding-top: 28px;
    }

    .footer-grid {
        gap: 40px;
    }

    .nav-links {
        display: none;
    }
}

/* HAMBURGER & MOBILE MENU */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    z-index: 102;
    position: relative;
}

    .nav-toggle .line {
        display: block;
        width: 26px;
        height: 2px;
        background: var(--ink);
        transition: transform 0.35s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.2s ease;
        transform-origin: center;
    }

.mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 100;
    padding: 110px 32px 80px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
    overflow-y: auto;
}

    .mobile-menu.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .mobile-menu::before {
        content: '';
        position: absolute;
        top: -200px;
        right: -200px;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(79, 216, 160, 0.18) 0%, transparent 65%);
        border-radius: 50%;
        pointer-events: none;
    }

.mobile-menu-inner {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.mobile-menu-links {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--line);
}

    .mobile-menu-links li {
        border-bottom: 1px solid var(--line);
    }

    .mobile-menu-links a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 22px 4px;
        text-decoration: none;
        color: var(--ink);
        font-family: 'Playfair Display', serif;
        font-weight: 400;
        font-size: 26px;
        letter-spacing: -0.01em;
        transition: color 0.2s, padding 0.2s;
    }

        .mobile-menu-links a:hover,
        .mobile-menu-links a.active {
            color: var(--emerald);
            padding-left: 8px;
        }

        .mobile-menu-links a::after {
            content: '→';
            font-family: 'Instrument Sans', sans-serif;
            font-size: 20px;
            color: var(--muted);
            opacity: 0.4;
            transition: opacity 0.2s, color 0.2s, transform 0.2s;
        }

        .mobile-menu-links a:hover::after {
            opacity: 1;
            color: var(--emerald);
            transform: translateX(4px);
        }

.mobile-menu-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 44px;
    padding: 16px 30px;
    background: var(--emerald-deep);
    color: var(--cream);
    border-radius: 999px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}

    .mobile-menu-cta:hover {
        background: var(--emerald);
        transform: translateY(-2px);
    }

.mobile-menu-meta {
    margin-top: 60px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

    .mobile-menu-meta a {
        color: var(--ink);
        text-decoration: none;
    }

body.menu-open {
    overflow: hidden;
}

    /* HAMBURGER X STACKING FIX (robust version)
   When the mobile menu is open, force .site-nav (and therefore .nav-toggle
   inside it) ABOVE .mobile-menu so the close-X stays visible. The previous
   version of this rule just zeroed out .site-nav's z-index and removed its
   backdrop-filter, which *should* be enough to release .nav-toggle from
   the containing-block trap. But some mobile browsers (notably iOS Safari)
   cache the containing block that backdrop-filter establishes for fixed
   descendants and don't recompute it when the property is dynamically
   removed. So the button stayed trapped inside .site-nav's now-stale
   stacking context and the menu painted over it.

   Fix: explicitly bump .site-nav's z-index above .mobile-menu's z-index:100.
   Now the entire nav (button included) paints above the menu regardless of
   whether the containing-block recompute happens. !important defends
   against the duplicate nav.site-nav declaration further down the file.
   Transparent background + zero border so the menu shows cleanly through
   the nav strip. */
    body.menu-open nav.site-nav {
        z-index: 10000 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: transparent !important;
        border-bottom-color: transparent !important;
    }

@media (max-width: 1080px) {
    .nav-toggle {
        display: flex;
    }
}

@media (max-width: 1080px) {
    .nav-links {
        display: none;
    }
}

@media (max-width: 540px) {
    .container, .nav-inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    .about-stats {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .phone {
        width: 240px;
        height: 500px;
    }
}

/* ========== MOBILE IMPROVEMENTS PASS ========== */

/* Make brand link click-through even when menu is open, so users can tap logo to go home */
.brand {
    position: relative;
    z-index: 101;
}

/* Phone-portrait improvements (up to ~600px) */
@media (max-width: 600px) {
    .container, .nav-inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Hero */
    .hero {
        padding: 50px 0 60px;
    }

        .hero h1 {
            margin-bottom: 28px;
        }

    .hero-actions {
        gap: 10px;
    }

        .hero-actions .btn {
            padding: 13px 20px;
            font-size: 14.5px;
        }

    /* Section padding compression */
    .section-services,
    .section-app,
    .section-ribbons,
    .section-package,
    .section-about,
    .page-header {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .page-header {
        padding-top: 40px !important;
        padding-bottom: 24px !important;
    }

    .links-content, .contact-content {
        padding-top: 40px !important;
        padding-bottom: 70px !important;
    }

    /* Section headers */
    .section-head {
        gap: 24px;
        margin-bottom: 44px;
    }

    /* Service cards tighter */
    .service {
        padding: 32px 22px;
    }

        .service h3 {
            font-size: 24px;
            margin-bottom: 18px;
        }

        .service li {
            font-size: 14.5px;
            padding: 9px 0 9px 22px;
        }

    .service-num {
        margin-bottom: 16px;
        font-size: 14px;
    }

    /* App section */
    .section-app {
        padding-left: 0;
        padding-right: 0;
    }

    .app-features {
        gap: 24px 0;
    }

    .app-feature h4 {
        font-size: 16px;
    }

    .app-feature p {
        font-size: 13.5px;
    }

    .app-stores {
        gap: 10px;
    }

    .store-btn {
        padding: 10px 18px 10px 14px;
    }

        .store-btn span {
            font-size: 15px;
        }

    /* Phone mockup smaller and centered */
    .phone {
        width: 220px;
        height: 460px;
        padding: 10px;
    }

    .phone-screen {
        padding: 18px 14px;
        border-radius: 28px;
    }

    .phone-notch {
        width: 70px;
        height: 20px;
        top: 20px;
    }

    .phone-title {
        font-size: 15px;
    }

    .phone-ring {
        padding: 10px 12px;
        font-size: 11px;
    }

    /* Ribbons section */
    .pdf-link {
        padding: 14px 18px;
        margin-top: 24px;
    }

        .pdf-link span {
            font-size: 15px;
        }

    /* Package card */
    .package-card {
        padding: 36px 24px;
        gap: 32px;
    }

        .package-card h2 {
            font-size: 30px;
        }

    .package-list li {
        padding: 14px 0;
        font-size: 14.5px;
    }

    /* About section: switch image to landscape so it doesn't dominate phone screen */
    .about-image {
        aspect-ratio: 4/3;
    }

    .about-right h2 {
        font-size: 34px;
        margin-bottom: 22px;
    }

    .about-right p {
        font-size: 16.5px;
    }

    /* Footer */
    footer {
        padding: 70px 0 30px;
    }

    .footer-grid {
        gap: 36px;
        margin-bottom: 50px;
    }

    .footer-brand .display {
        font-size: 28px;
    }

    .footer-icon {
        height: 56px;
        margin-bottom: 14px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        font-size: 12px;
        text-align: left;
    }

    /* Page header (Events / Results / Useful Links / Contact) */
    .page-header h1 {
        margin-bottom: 12px;
    }

    .page-header .lede {
        font-size: 16px;
    }

    /* Useful Links page */
    .section-label {
        gap: 14px;
        margin-bottom: 22px;
    }

        .section-label h2 {
            font-size: 24px;
        }

    .discipline .section-label h2 {
        font-size: 21px;
    }

    .link-list a {
        padding: 17px 4px;
        gap: 18px;
    }

    .link-list .title {
        font-size: 16.5px;
        line-height: 1.3;
    }

    .discipline-grid {
        gap: 48px;
    }

    .links-section {
        margin-bottom: 56px;
    }

    /* Contact form */
    .contact-form {
        padding: 28px 20px;
    }

    .form-intro {
        margin-bottom: 28px;
        padding-bottom: 22px;
    }

        .form-intro h2 {
            font-size: 24px;
        }

        .form-intro p {
            font-size: 14.5px;
        }

    .field input, .field select, .field textarea {
        font-size: 16px;
        padding: 12px 14px;
    }

    .field label {
        font-size: 11px;
    }

    .submit-row {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-top: 28px;
        padding-top: 22px;
    }

    .submit-btn {
        justify-content: center;
        padding: 14px 20px;
    }

    .submit-note {
        text-align: center;
        font-size: 12.5px;
    }

    .info-value {
        font-size: 20px;
    }

    .info-detail {
        font-size: 14px;
    }

    .callout {
        padding: 22px;
    }

        .callout h4 {
            font-size: 19px;
        }

    /* Iframe placeholder pages */
    .iframe-frame {
        min-height: 400px;
    }

    .iframe-placeholder {
        padding: 60px 24px;
    }

        .iframe-placeholder svg {
            width: 38px;
            height: 38px;
            margin-bottom: 18px;
        }

        .iframe-placeholder h3 {
            font-size: 18px;
        }

    /* Mobile menu typography slightly smaller for narrow phones */
    .mobile-menu {
        padding: 100px 22px 60px;
    }

    .mobile-menu-links a {
        font-size: 23px;
        padding: 19px 4px;
    }

    .mobile-menu-cta {
        margin-top: 36px;
        padding: 14px 26px;
        font-size: 15px;
    }

    .mobile-menu-meta {
        margin-top: 44px;
        padding-top: 22px;
        font-size: 13.5px;
    }

    /* Wave divider thinner */
    .wave-divider {
        height: 40px;
    }
}

/* Very small phones (iPhone SE first-gen, narrow Android, etc.) */
@media (max-width: 380px) {
    .hero h1 {
        font-size: 42px;
        line-height: 1.05;
    }

    .about-right h2,
    .package-card h2 {
        font-size: 30px;
    }

    .section-head h2 {
        font-size: 34px;
    }

    .service {
        padding: 26px 18px;
    }

        .service h3 {
            font-size: 22px;
        }

    .nav-inner {
        padding: 16px 20px;
    }

    .brand-icon {
        height: 38px;
    }

    .mobile-menu-links a {
        font-size: 21px;
        padding: 17px 4px;
    }
}

/* Landscape-orientation tablets and short viewports: reduce vertical padding */
@media (max-height: 600px) and (orientation: landscape) {
    .hero {
        padding: 40px 0 50px;
    }

    .mobile-menu {
        padding: 80px 24px 40px;
    }
}

/* iOS safe-area + touch polish */
.mobile-menu {
    -webkit-overflow-scrolling: touch;
    padding-top: max(110px, calc(env(safe-area-inset-top, 0) + 90px));
    padding-bottom: max(80px, calc(env(safe-area-inset-bottom, 0) + 40px));
}

/* Disable lift/translate hovers on touch-only devices to avoid sticky hover states */
@media (hover: none) {
}

/* Better tap response */
a, button {
    -webkit-tap-highlight-color: rgba(31, 154, 120, 0.18);
}

/* ========== MOBILE FIX PASS ========== */

/* (1) Hamburger ALWAYS visible: pull it out of nav stacking context on mobile */
@media (max-width: 1080px) {
    .nav-toggle {
        position: fixed;
        top: 22px;
        right: 18px;
        z-index: 200;
        background: rgba(250, 246, 239, 0.6);
        border-radius: 8px;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

        .nav-toggle .line {
            background: var(--navy);
        }
}

/* (2) Restore wordmark on mobile, just scaled down */
@media (max-width: 1080px) {
    .brand-wordmark {
        display: block !important;
        font-size: 17px;
        line-height: 1.1;
    }

        .brand-wordmark small {
            font-size: 9.5px;
            letter-spacing: 0.14em;
            margin-top: 3px;
        }
}

@media (max-width: 700px) {
    .brand-wordmark {
        font-size: 15px;
    }

        .brand-wordmark small {
            font-size: 9px;
            letter-spacing: 0.12em;
        }

    .brand-icon {
        height: 42px;
    }
    /* Leave room for fixed hamburger button on the right */
    .nav-inner {
        padding-right: 72px;
    }
}

@media (max-width: 480px) {
    .brand-wordmark {
        font-size: 13.5px;
    }

        .brand-wordmark small {
            font-size: 8.5px;
            letter-spacing: 0.1em;
        }

    .brand-icon {
        height: 38px;
    }
}

@media (max-width: 360px) {
    .brand-wordmark small {
        display: none;
    }
    /* only on tiniest phones */
    .brand-icon {
        height: 34px;
    }
}

/* (3) Kill the no-wrap on app docs — allow normal wrapping on mobile.
         Also ensure long words can break in the entire app section so nothing gets cut off. */
@media (max-width: 700px) {
    .app-docs {
        white-space: normal !important;
        overflow-x: visible !important;
    }

    .section-app,
    .app-left,
    .app-features,
    .app-feature h4,
    .app-feature p,
    .app-docs,
    .app-stores,
    .store-btn {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}

/* Desktop: keep the docs line on one line where it fits */
@media (min-width: 701px) {
    .app-docs {
        white-space: nowrap;
    }
}

/* App docs: natural wrapping, but keep the link as one unit */
.app-docs {
    white-space: normal !important;
    overflow-x: visible !important;
}

    .app-docs a {
        white-space: nowrap;
    }

/* Override the earlier nowrap-on-desktop rule too */
@media (min-width: 701px) {
    .app-docs {
        white-space: normal !important;
    }
}

/* ========== HAMBURGER X — DISPLAY TOGGLE APPROACH ========== */
@media (max-width: 1080px) {
    .nav-toggle {
        position: fixed !important;
        top: 18px !important;
        right: 16px !important;
        z-index: 9999 !important;
        width: 52px !important;
        height: 52px !important;
        padding: 0 !important;
        background: #f5efe4 !important;
        border: 2px solid #0e6f58 !important;
        border-radius: 12px !important;
        box-shadow: 0 6px 18px -4px rgba(15, 53, 83, 0.25) !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

        .nav-toggle[aria-expanded="true"] {
            background: #0e6f58 !important;
            border-color: #0e6f58 !important;
            box-shadow: 0 8px 22px -4px rgba(15, 53, 83, 0.35) !important;
        }
}



/* ========== "ENTER ONLINE" NAV HINT ========== */

/* DESKTOP: the badge sits below the Events nav link inside .nav-links.
   Position relative on the LI, position absolute on the badge. */
.nav-links .nav-item-hint {
    position: relative;
}

    .nav-links .nav-item-hint > a.nav-events-link {
        position: relative; /* positioning context for the badge inside */
        display: inline-block;
    }

.nav-hint-badge {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 14px;
    background: var(--emerald);
    color: #fff !important;
    text-decoration: none !important;
    padding: 5px 13px;
    border-radius: 999px;
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    animation: nav-hint-bob 2.6s ease-in-out infinite;
    box-shadow: 0 6px 16px -4px rgba(31, 154, 120, 0.42);
    z-index: 50;
    transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

    .nav-hint-badge:hover {
        background: var(--emerald-deep);
        color: #fff !important;
        box-shadow: 0 8px 22px -4px rgba(14, 111, 88, 0.55);
    }

    .nav-hint-badge::before {
        content: '';
        position: absolute;
        top: -4px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 8px;
        height: 8px;
        background: var(--emerald);
        border-radius: 1px;
    }

    .nav-hint-badge .arrow {
        display: inline-block;
        margin-left: 4px;
        animation: nav-hint-arrow 1.2s ease-in-out infinite;
    }

/* MOBILE: badge appears inline next to the Events link text in the hamburger menu */
.mobile-menu .nav-hint-badge-mobile {
    display: inline-block;
    margin-left: 12px;
    padding: 4px 11px;
    background: var(--emerald);
    color: #fff;
    border-radius: 999px;
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    animation: nav-hint-bob-mobile 2.6s ease-in-out infinite;
    box-shadow: 0 4px 10px -2px rgba(31, 154, 120, 0.45);
}

@keyframes nav-hint-bob {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-5px);
    }
}

@keyframes nav-hint-bob-mobile {
    0%, 100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(4px);
    }
}

@keyframes nav-hint-arrow {
    0%, 100% {
        transform: translateX(0);
        opacity: 1;
    }

    50% {
        transform: translateX(2px);
        opacity: 0.7;
    }
}

/* Hide hint on the events page itself (you're already there) */
body.page-events .nav-hint-badge,
body.page-events .nav-hint-badge-mobile {
    display: none;
}

/* Hide DESKTOP hint on mobile (Events isn't visible in collapsed nav) */
@media (max-width: 1080px) {
}

@keyframes nav-hint-bob {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-5px);
    }
}

@keyframes nav-hint-arrow {
    0%, 100% {
        transform: translateX(0);
        opacity: 1;
    }

    50% {
        transform: translateX(2px);
        opacity: 0.7;
    }
}

/* Hide hint on the events page itself (you're already there) */

/* Hide on mobile — Events is inside the hamburger menu, no nav link visible to point to */
@media (max-width: 1080px) {
    .nav-hint-badge {
        display: none;
    }
}





@media (max-width: 968px) {
}

/* ===== Page-specific additions ===== */


/* --- from news.html --- */
body {
    font-family: 'Instrument Sans', system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.55;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    width: 100%;
}

/* NAV */
nav.site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 246, 239, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}

.nav-links a.active {
    color: var(--emerald);
}

/* PAGE HEADER */
.page-header {
    padding: 80px 0 50px;
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}

    .page-header::before {
        content: '';
        position: absolute;
        top: -150px;
        right: -150px;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(79, 216, 160, 0.18) 0%, transparent 65%);
        border-radius: 50%;
        pointer-events: none;
    }

.page-header-inner {
    position: relative;
    z-index: 2;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--emerald);
    font-weight: 500;
    margin-bottom: 24px;
}

.page-header h1 {
    font-size: clamp(48px, 6.5vw, 88px);
    margin-bottom: 16px;
}

.page-header .lede {
    font-size: 18px;
    color: var(--muted);
    max-width: 580px;
}

/* CONTENT (IFRAME PLACEHOLDER) */
.page-content {
    padding: 60px 0 100px;
    flex: 1;
}

.iframe-frame {
    background: white;
    border: 1px solid var(--line);
    border-radius: 6px;
    min-height: 600px;
    box-shadow: 0 20px 50px -30px rgba(15, 53, 83, 0.2);
    overflow: hidden;
    position: relative;
}

.iframe-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 32px;
    text-align: center;
    color: var(--muted);
}

    .iframe-placeholder svg {
        color: var(--line-strong);
        margin-bottom: 24px;
    }

    .iframe-placeholder h3 {
        font-family: 'Playfair Display', serif;
        font-weight: 400;
        font-size: 22px;
        color: var(--ink);
        margin-bottom: 8px;
    }

    .iframe-placeholder p {
        font-size: 14px;
        max-width: 420px;
        margin: 0 auto;
    }

/* FOOTER */
footer {
    background: var(--navy);
    color: var(--cream);
    padding: 100px 0 40px;
    margin-top: auto;
}

@media (max-width: 968px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .nav-links {
        display: none;
    }

    .page-header {
        padding: 50px 0 30px;
    }

    .page-content {
        padding: 40px 0 60px;
    }
}

/* ========== NEWS PAGE ========== */
.news-content {
    padding: 70px 0 110px;
    flex: 1;
}

.news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px 60px;
}

.news-card-featured {
    grid-column: 1 / -1;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
}

    .news-card-featured .news-title {
        font-size: clamp(34px, 3.6vw, 48px);
        line-height: 1.1;
        text-wrap: balance;
    }

    .news-card-featured .news-excerpt {
        font-size: 18px;
        max-width: 720px;
    }

.news-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 18px;
}

    .news-meta time {
        color: var(--emerald);
    }

.news-dot {
    color: var(--line-strong);
    letter-spacing: 0;
}

.news-cat {
    color: var(--ink);
}

.news-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin-bottom: 16px;
    color: var(--ink);
}

.news-excerpt {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 22px;
    max-width: 540px;
}

.news-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 500;
    color: var(--emerald-deep);
    text-decoration: none;
    transition: gap 0.2s, color 0.2s;
}

    .news-read-more:hover {
        color: var(--emerald);
        gap: 12px;
    }

.news-pagination {
    margin-top: 80px;
    padding-top: 36px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: center;
}

.news-page-indicator {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--muted);
}

@media (max-width: 968px) {
    .news-content {
        padding: 50px 0 80px;
    }

    .news-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .news-card-featured {
        padding-bottom: 36px;
        margin-bottom: 0;
    }

        .news-card-featured .news-title {
            font-size: 30px;
        }

        .news-card-featured .news-excerpt {
            font-size: 16px;
        }

    .news-title {
        font-size: 24px;
    }

    .news-pagination {
        margin-top: 56px;
    }
}

@media (max-width: 540px) {
    .news-meta {
        font-size: 11px;
        letter-spacing: 0.13em;
    }

    .news-card-featured .news-title {
        font-size: 26px;
    }

    .news-title {
        font-size: 22px;
    }
}

/* ========== NEWS / FACEBOOK EMBED ========== */
.news-content {
    padding: 70px 0 110px;
    flex: 1;
}

.fb-intro {
    max-width: 600px;
    margin: 0 auto 56px;
    text-align: center;
}

.fb-intro-eyebrow {
    display: inline-block;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--emerald);
    font-weight: 600;
    margin-bottom: 14px;
}

.fb-intro-text {
    font-size: 17px;
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: 28px;
}

.fb-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    background: #1877f2;
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    box-shadow: 0 6px 18px -6px rgba(24, 119, 242, 0.4);
}

    .fb-follow-btn:hover {
        background: #1465d4;
        transform: translateY(-2px);
        box-shadow: 0 10px 24px -6px rgba(24, 119, 242, 0.5);
    }

.fb-note {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.6;
}

    .fb-note a {
        color: var(--emerald);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

@media (max-width: 700px) {
    .news-content {
        padding: 50px 0 80px;
    }

    .fb-intro {
        margin-bottom: 40px;
    }

    .fb-intro-text {
        font-size: 15.5px;
    }
}


/* --- from contact.html --- */
/* CONTACT GRID */
.contact-content {
    padding: 70px 0 110px;
    flex: 1;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 80px;
    align-items: start;
}

/* FORM */
.contact-form {
    background: white;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 48px;
    box-shadow: 0 20px 50px -30px rgba(15, 53, 83, 0.18);
}

.form-intro {
    margin-bottom: 36px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--line);
}

    .form-intro h2 {
        font-family: 'Playfair Display', serif;
        font-weight: 400;
        font-size: 30px;
        letter-spacing: -0.01em;
        color: var(--navy);
        margin-bottom: 10px;
    }

    .form-intro p {
        color: var(--muted);
        font-size: 15.5px;
    }

.form-row {
    margin-bottom: 22px;
}

    .form-row.split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        margin-bottom: 22px;
    }

        .form-row.split .field {
            margin-bottom: 0;
        }

.field {
    display: flex;
    flex-direction: column;
}

    .field label {
        font-size: 12px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--muted);
        margin-bottom: 8px;
    }

        .field label .req {
            color: var(--emerald);
            margin-left: 2px;
        }

    .field input,
    .field select,
    .field textarea {
        font-family: inherit;
        font-size: 16px;
        color: var(--ink);
        padding: 13px 16px;
        background: var(--bg);
        border: 1px solid var(--line-strong);
        border-radius: 4px;
        transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
        width: 100%;
    }

    .field textarea {
        resize: vertical;
        min-height: 140px;
        font-family: inherit;
        line-height: 1.5;
    }

        .field input:focus,
        .field select:focus,
        .field textarea:focus {
            outline: none;
            border-color: var(--emerald);
            background: white;
            box-shadow: 0 0 0 3px rgba(31, 154, 120, 0.12);
        }

    .field select {
        appearance: none;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%231f9a78' d='M6 8L0 0h12z'/></svg>");
        background-repeat: no-repeat;
        background-position: right 18px center;
        padding-right: 44px;
    }

.submit-row {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    background: var(--emerald-deep);
    color: var(--cream);
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s;
}

    .submit-btn:hover {
        background: var(--emerald);
        transform: translateY(-2px);
        box-shadow: 0 10px 30px -10px rgba(14, 111, 88, 0.4);
    }

.submit-note {
    font-size: 13px;
    color: var(--muted);
}

/* SIDEBAR */
.contact-sidebar {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.info-block {
    border-top: 1px solid var(--line-strong);
    padding-top: 24px;
}

.info-label {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--emerald);
    margin-bottom: 12px;
    font-weight: 500;
}

.info-value {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 24px;
    letter-spacing: -0.01em;
    color: var(--ink);
    line-height: 1.3;
}

    .info-value a {
        color: var(--ink);
        text-decoration: none;
        transition: color 0.2s;
    }

        .info-value a:hover {
            color: var(--emerald);
        }

.info-detail {
    font-size: 15px;
    color: var(--muted);
    margin-top: 8px;
    line-height: 1.55;
}

.callout {
    background: var(--navy);
    color: var(--cream);
    padding: 28px;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

    .callout::before {
        content: '';
        position: absolute;
        top: -80px;
        right: -80px;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(79, 216, 160, 0.25) 0%, transparent 65%);
        pointer-events: none;
    }

    .callout h4 {
        font-family: 'Playfair Display', serif;
        font-weight: 400;
        font-size: 22px;
        color: var(--cream);
        margin-bottom: 10px;
        position: relative;
    }

    .callout p {
        color: rgba(245, 239, 228, 0.75);
        font-size: 14.5px;
        line-height: 1.55;
        position: relative;
    }

@media (max-width: 1080px) {
    .nav-links {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }
}

@media (max-width: 968px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .contact-sidebar {
        position: static;
    }

    .page-header {
        padding: 50px 0 30px;
    }

    .contact-content {
        padding: 50px 0 80px;
    }

    .contact-form {
        padding: 32px 24px;
    }
}

@media (max-width: 540px) {
    .container, .nav-inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    .form-row.split {
        grid-template-columns: 1fr;
    }
}


/* --- from events.html --- */
/* ========== IFRAME EMBED CONTAINER ========== */
.iframe-loading {
    text-align: center;
    padding: 80px 24px;
    color: var(--muted);
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(180deg, rgba(31, 154, 120, 0.04), transparent);
    border-radius: 12px;
}


/* --- from useful-links.html --- */
.page-header .lede {
    font-size: 18px;
    color: var(--muted);
    max-width: 620px;
}

/* LINK SECTIONS */
.links-content {
    padding: 70px 0 110px;
    flex: 1;
}

.links-section {
    margin-bottom: 80px;
}

    .links-section:last-child {
        margin-bottom: 0;
    }

.section-label {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
}

    .section-label h2 {
        font-family: 'Playfair Display', serif;
        font-weight: 400;
        font-size: 30px;
        color: var(--navy);
        letter-spacing: -0.015em;
        white-space: nowrap;
    }

    .section-label .rule {
        flex: 1;
        height: 1px;
        background: var(--line-strong);
    }

/* LINK LIST */
.link-list {
    list-style: none;
    border-top: 1px solid var(--line);
}

    .link-list li {
        border-bottom: 1px solid var(--line);
    }

    .link-list a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 4px;
        text-decoration: none;
        color: var(--ink);
        transition: color 0.2s, padding 0.2s;
        gap: 24px;
    }

        .link-list a:hover {
            color: var(--emerald-deep);
            padding-left: 12px;
        }

    .link-list .title {
        font-family: 'Playfair Display', serif;
        font-weight: 400;
        font-size: 20px;
        letter-spacing: -0.005em;
        line-height: 1.3;
    }

    .link-list .ext {
        color: var(--muted);
        flex-shrink: 0;
        transition: color 0.2s, transform 0.2s;
    }

    .link-list a:hover .ext {
        color: var(--emerald);
        transform: translate(2px, -2px);
    }

/* DISCIPLINE GRID */
.discipline-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px 80px;
}

.discipline {
    /* uses .links-section heading inside */
}

    .discipline .section-label h2 {
        font-size: 26px;
    }

@media (max-width: 968px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .nav-links {
        display: none;
    }

    .page-header {
        padding: 50px 0 30px;
    }

    .links-content {
        padding: 50px 0 80px;
    }

    .discipline-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .links-section {
        margin-bottom: 60px;
    }
}

@media (max-width: 540px) {
    .container, .nav-inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    .section-label h2 {
        font-size: 24px;
    }

    .discipline .section-label h2 {
        font-size: 22px;
    }

    .link-list .title {
        font-size: 17px;
    }
}



/* ========== RIBBONS SECTION (intro + masonry gallery) ========== */
.section-ribbons {
    padding: 96px 0 120px;
    background: var(--bg);
}

.ribbons-intro {
    max-width: 760px;
    margin: 0 auto 56px;
    text-align: center;
}

    .ribbons-intro h2 {
        font-size: clamp(34px, 4.6vw, 52px);
        line-height: 1.05;
        margin: 0 0 18px;
        letter-spacing: -0.01em;
    }

        .ribbons-intro h2 em {
            color: var(--emerald);
            font-style: normal;
            font-weight: 700;
        }

.ribbons-lede {
    font-size: 17px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0 0 28px;
}

.ribbons-meta {
    display: flex;
    gap: 36px;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    flex-wrap: wrap;
}

    .ribbons-meta .ribbons-list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 28px;
        font-size: 14.5px;
        color: var(--ink);
    }

        .ribbons-meta .ribbons-list li {
            position: relative;
            padding-left: 18px;
        }

            .ribbons-meta .ribbons-list li::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0.6em;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: var(--emerald);
            }

    .ribbons-meta .pdf-link {
        flex-shrink: 0;
    }

/* ========== RIBBONS TWO-COLUMN GRID ========== */
.section-ribbons .container.ribbons-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
}

/* Intro column overrides (was centered, now left-aligned in left column) */
.section-ribbons .ribbons-intro {
    max-width: none;
    margin: 0;
    text-align: left;
}

/* Features list: single column on the left side */
.section-ribbons .ribbons-list {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    font-size: 15.5px;
    color: var(--ink);
}

    .section-ribbons .ribbons-list li {
        position: relative;
        padding-left: 22px;
        list-style: none;
    }

        .section-ribbons .ribbons-list li::marker {
            content: '';
        }

        .section-ribbons .ribbons-list li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.55em;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--emerald);
        }

/* ========== CAROUSEL ========== */
.ribbons-carousel {
    position: relative;
    border-radius: 14px;
    background: var(--cream);
    box-shadow: 0 14px 36px -16px rgba(15, 53, 83, 0.25);
    overflow: hidden;
}

.ribbons-carousel-track {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .ribbons-carousel-track::-webkit-scrollbar {
        display: none;
    }

    .ribbons-carousel-track .ribbon-item {
        flex: 0 0 100%;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        aspect-ratio: 4 / 5;
        margin: 0;
        background: var(--cream);
        cursor: zoom-in;
        position: relative;
        overflow: hidden;
    }

        .ribbons-carousel-track .ribbon-item img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
            display: block;
            transition: transform 0.4s ease;
        }

        .ribbons-carousel-track .ribbon-item:hover img {
            transform: scale(1.02);
        }

/* Prev / Next arrow buttons */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 53, 83, 0.1);
    box-shadow: 0 4px 14px -4px rgba(15, 53, 83, 0.2);
    color: var(--emerald-deep);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
    padding: 0 0 3px 0;
}

    .carousel-nav:hover {
        background: #ffffff;
        transform: translateY(-50%) scale(1.06);
    }

    .carousel-nav:disabled {
        opacity: 0;
        pointer-events: none;
    }

.carousel-prev {
    left: 12px;
}

.carousel-next {
    right: 12px;
}

@media (max-width: 900px) {
    .section-ribbons .container.ribbons-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ribbons-carousel {
        max-width: 520px;
        margin: 0 auto;
    }
}

@media (max-width: 540px) {
    .section-ribbons {
        padding: 72px 0 88px;
    }

    .carousel-nav {
        width: 38px;
        height: 38px;
        font-size: 22px;
    }
}

/* ========== TIGHTEN EVENTS/RESULTS PAGE HEADER ========== */
/* Less vertical padding so iframe content gets more room above the fold */
body.page-events .page-header,
body.page-results .page-header {
    padding-top: 36px !important;
    padding-bottom: 24px !important;
}

    body.page-events .page-header h1,
    body.page-results .page-header h1 {
        margin-bottom: 12px !important;
    }

    body.page-events .page-header .lede,
    body.page-results .page-header .lede {
        margin-bottom: 0 !important;
    }

@media (max-width: 700px) {
    body.page-events .page-header,
    body.page-results .page-header {
        padding-top: 24px !important;
        padding-bottom: 16px !important;
    }
}



/* ========== CAROUSEL DISCOVERABILITY HINT ========== */
.carousel-hint {
    position: absolute;
    right: 68px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--emerald-deep);
    color: #ffffff;
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 8px 12px;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 6px 16px -4px rgba(14, 111, 88, 0.5);
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 6;
    opacity: 0;
    /* Animation triggered by .show class, added by JS when carousel enters viewport */
}

    .carousel-hint.show {
        animation: carousel-hint-cycle 6s ease-out 0s forwards;
    }
    /* Little arrow tail pointing right toward the > button */
    .carousel-hint::after {
        content: '';
        position: absolute;
        right: -6px;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        width: 10px;
        height: 10px;
        background: var(--emerald-deep);
        border-radius: 2px;
        z-index: -1;
    }

.carousel-hint-arrow {
    font-size: 16px;
    line-height: 1;
    display: inline-block;
    margin-top: -1px;
    animation: hint-arrow-bob 1.4s ease-in-out infinite;
}

@keyframes carousel-hint-cycle {
    0% {
        opacity: 0;
        transform: translateY(-50%) translateX(8px);
    }

    12% {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }

    82% {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-50%) translateX(4px);
    }
}

@keyframes hint-arrow-bob {
    0%, 100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(3px);
    }
}

.carousel-hint.dismissed {
    animation: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Touch/mouse aware hint text */
.carousel-hint .hint-text {
    display: none;
}

.carousel-hint .hint-touch {
    display: inline;
}
/* default to touch wording */

/* Override for mouse-capable devices (desktop with real mouse) */
@media (hover: hover) and (pointer: fine) {
    .carousel-hint .hint-touch {
        display: none;
    }

    .carousel-hint .hint-mouse {
        display: inline;
    }
}

@media (max-width: 540px) {
    .carousel-hint {
        right: 56px;
        font-size: 11px;
        padding: 6px 10px;
    }
}

/* ========== RIBBON LIGHTBOX ========== */
.ribbon-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(15, 35, 48, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s;
    cursor: zoom-out;
    padding: 40px 20px;
}

    .ribbon-lightbox.open {
        opacity: 1;
        visibility: visible;
    }

    .ribbon-lightbox img {
        max-width: min(95vw, 1200px);
        max-height: 92vh;
        width: auto;
        height: auto;
        object-fit: contain;
        border-radius: 6px;
        box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
        transform: scale(0.96);
        transition: transform 0.32s cubic-bezier(0.2, 0, 0.2, 1);
    }

    .ribbon-lightbox.open img {
        transform: scale(1);
    }

.ribbon-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, transform 0.18s ease;
}

    .ribbon-lightbox-close:hover {
        background: rgba(255, 255, 255, 0.22);
        transform: scale(1.06);
    }

.ribbon-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #ffffff;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, transform 0.18s ease;
}

    .ribbon-lightbox-nav:hover {
        background: rgba(255, 255, 255, 0.22);
    }

.ribbon-lightbox-prev {
    left: 20px;
}

.ribbon-lightbox-next {
    right: 20px;
}

@media (max-width: 600px) {
    .ribbon-lightbox-nav {
        width: 44px;
        height: 44px;
    }

    .ribbon-lightbox-prev {
        left: 8px;
    }

    .ribbon-lightbox-next {
        right: 8px;
    }
}

body.lightbox-open {
    overflow: hidden;
}


/* ========== MOBILE QUICK-ACTION BAR ==========
   On desktop, the floating "Enter Online" badge below the Events nav link
   gives high-intent visitors a one-tap route into entering an event. On
   mobile, the regular nav links collapse into the hamburger, so that
   floating badge isn't visible until the user opens the menu, which
   defeats the purpose.

   This bar sits in normal flow right below .site-nav and provides the
   two highest-intent shortcuts on mobile:
     - "Enter Online" (primary): full-width emerald pill, eye-catching
       pulse animation. The main action visitors come here to perform.
     - "Results" (secondary): compact ghost pill, no animation. Less
       obvious than Enter Online but still visible without having to
       discover the hamburger menu.

   Each link auto-hides on its own page (no point showing "Enter Online"
   when the user is already on events.html). The bar is hidden entirely
   on desktop, where both shortcuts already exist in the nav. */

.mobile-quick-bar {
    display: none;
}

@media (max-width: 1080px) {
    .mobile-quick-bar {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-items: center;
        padding: 12px 20px;
        background: linear-gradient(135deg, var(--bg) 0%, var(--cream) 100%);
        border-bottom: 1px solid var(--line);
    }

    .mqb-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 18px;
        border-radius: 999px;
        font-family: 'Instrument Sans', system-ui, sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        text-decoration: none;
        white-space: nowrap;
        transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    }

    .mqb-primary {
        background: var(--emerald);
        color: #ffffff !important;
        box-shadow: 0 6px 16px -4px rgba(31, 154, 120, 0.45);
        animation: mqb-pulse 2.6s ease-in-out infinite;
    }

        .mqb-primary:hover,
        .mqb-primary:active {
            background: var(--emerald-deep);
            transform: translateY(-1px);
            box-shadow: 0 8px 20px -4px rgba(14, 111, 88, 0.55);
        }

        .mqb-primary .mqb-arrow {
            font-size: 16px;
            line-height: 1;
            display: inline-block;
            animation: mqb-arrow-bob 1.4s ease-in-out infinite;
        }

    .mqb-secondary {
        background: transparent;
        color: var(--navy) !important;
        border: 1px solid var(--line-strong);
        letter-spacing: 0.08em;
    }

        .mqb-secondary:hover,
        .mqb-secondary:active {
            border-color: var(--emerald);
            color: var(--emerald-deep) !important;
            background: rgba(255, 255, 255, 0.4);
        }
}

@keyframes mqb-pulse {
    0%, 100% {
        box-shadow: 0 6px 16px -4px rgba(31, 154, 120, 0.45);
    }

    50% {
        box-shadow: 0 6px 22px -2px rgba(31, 154, 120, 0.6), 0 0 0 4px rgba(79, 216, 160, 0.18);
    }
}

@keyframes mqb-arrow-bob {
    0%, 100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(3px);
    }
}

/* Hide each link on its own page; let the remaining one fill the row */
body.page-events .mqb-primary,
body.page-results .mqb-secondary {
    display: none;
}

@media (max-width: 1080px) {
    body.page-events .mobile-quick-bar,
    body.page-results .mobile-quick-bar {
        grid-template-columns: 1fr;
    }
}

/* Phone-portrait tweaks: tighter padding, slightly smaller text */
@media (max-width: 540px) {
    .mobile-quick-bar {
        padding: 10px 16px;
        gap: 8px;
    }

    .mqb-link {
        padding: 11px 14px;
        font-size: 12.5px;
        letter-spacing: 0.08em;
    }

    .mqb-primary {
        letter-spacing: 0.1em;
    }
}

/* Very narrow phones: drop letterspacing further */
@media (max-width: 380px) {
    .mqb-link {
        letter-spacing: 0.06em;
        padding: 11px 12px;
        font-size: 12px;
    }

    .mqb-primary {
        letter-spacing: 0.08em;
    }
}