:root {
    /* Brand Metals */
    --color-bright-sun: #FECB3E;
    --color-old-gold: #D4AF37;
    --color-gold: #FFD700;
    /* New addition */

    /* Core Dark Backgrounds */
    --color-diesel: #010000;
    --color-black: #050505;
    --color-cod-gray: #121212;

    /* Neutral System */
    --color-tundora: #494949;
    --color-shuttle-gray: #596164;
    --color-dusty-gray: #999999;
    --color-silver-chalice-light: #A6A6A6;
    --color-silver-chalice-dark: #AAAAAA;
    --color-nobel: #B3B3B3;
    --color-cotton-seed: #C0BBB6;
    --color-silver: #CCCBCC;
    --color-white: #FFFFFF;

    /* Logo-Related Accents */
    --color-double-colonial: #ECE1AA;
    --color-roti: #C2A553;
    --color-soya-bean: #615A46;
    --color-olive: #836A00;
    --color-hampton: #F4F0B3;
    --color-saddle-brown: #5A4800;

    /* Blue */
    --color-stripe-blue-ribbon: #0070F3;
    --color-signal-blue: #2563EB;

    /* System States */
    --color-warm-amber: #FFB703;
    --color-emergency-red: #E11D48;
    --color-accent-emergency-red: #FF3B30;

    /* Base Typography Stack */
    --font-main: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Arial, "Calibri", sans-serif;
    --font-heading: "Century Gothic", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Arial, sans-serif;
}

/* ==========================================================================
   GLOBAL COMPONENTS
   ========================================================================== */

/* INTRO NAV — site-wide centered header */
.intro {
    text-align: center;
    padding: 48px 24px 24px;
}
.intro-logo { display: inline-block; text-decoration: none; }
.intro-logo img { height: 80px; width: auto; }
.intro-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 18px;
    list-style: none;
    padding: 0;
}
.intro-nav a:not(.intro-cta) {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #666;
    text-decoration: none;
    transition: color .2s;
}
.intro-nav a:not(.intro-cta):hover { color: var(--color-old-gold, #d4af37); }
.intro-nav a:not(.intro-cta).active { color: var(--color-old-gold, #d4af37); }
.intro-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 22px;
    background: var(--color-old-gold, #d4af37);
    color: #120e00;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 100px;
    box-shadow: 0 4px 24px rgba(212, 175, 55, .2);
    transition: background .2s, box-shadow .2s, transform .2s;
    min-height: 40px;
}
.intro-cta:hover {
    background: var(--color-bright-sun, #fecb3e);
    color: #120e00;
    box-shadow: 0 6px 32px rgba(254, 203, 62, .35);
    transform: translateY(-1px);
}
.intro-cta--setup {
    background: var(--color-stripe-blue-ribbon, #0070F3);
    color: #fff;
    box-shadow: 0 4px 24px rgba(0, 112, 243, .2);
}
.intro-cta--setup:hover {
    background: #1a85ff;
    color: #fff;
    box-shadow: 0 6px 32px rgba(0, 112, 243, .35);
}
@media (max-width: 600px) {
    .intro-nav a:not(.intro-cta) { display: none; }
}

/* FOOTER — Structured 4-column layout */
footer {
    width: 100%;
    background-color: #0a0a0a;
    padding: 0;
    border-top: 1px solid #1a1a1a;
    font-size: 0.8rem;
    color: #bbb;
    box-sizing: border-box;
    position: relative;
    text-align: left;
}
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-old-gold, #D4AF37), transparent);
}

/* ── Footer inner wrapper ── */
.ft-wrap {
    max-width: 1040px;
    margin: 0 auto;
    padding: 52px 28px 20px;
}

/* ── 4-column grid ── */
.ft-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 36px 32px;
    margin-bottom: 40px;
}

/* ── Column headers ── */
.ft-col-label {
    font-family: var(--font-heading, "Century Gothic", "Segoe UI", sans-serif);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-old-gold, #d4af37);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(212, 175, 55, .1);
}

/* ── Column links ── */
.ft-col a {
    display: block;
    padding: 5px 0;
    color: #999;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.5;
    transition: color .2s, padding-left .2s;
}
.ft-col a:hover {
    color: #fff;
    padding-left: 4px;
}
.ft-col a.ft-active {
    color: var(--color-old-gold, #d4af37);
}

/* ── Legal column: smaller, muted ── */
.ft-col-legal a {
    font-size: 11px;
    color: #555;
    padding: 3px 0;
}
.ft-col-legal a:hover {
    color: #999;
}

/* ── Social row ── */
.ft-social {
    display: flex;
    gap: 16px;
    margin-top: 14px;
}
.ft-social a {
    color: #555;
    font-size: 14px;
    padding: 0;
    transition: color .2s;
}
.ft-social a:hover {
    color: var(--color-old-gold, #d4af37);
    padding-left: 0;
}
.ft-social a svg {
    width: 14px;
    height: 14px;
    display: block;
    fill: currentColor;
}

/* ── Bottom bar ── */
.ft-bottom {
    border-top: 1px solid rgba(255, 255, 255, .04);
    padding: 20px 0 24px;
    text-align: center;
    color: #555;
    font-size: 12px;
    line-height: 1.7;
}
.ft-bottom .ft-brand {
    color: #888;
}
.ft-bottom .ft-awards {
    margin-top: 6px;
    font-size: 11px;
    color: #444;
}

/* ── Responsive: 2-col on tablet, 1-col on mobile ── */
@media (max-width: 768px) {
    .ft-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px 24px;
    }
}
@media (max-width: 480px) {
    .ft-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .ft-wrap {
        padding: 40px 20px 16px;
    }
}

/* ── STICKY BAR: mobile single-CTA ── */
/* On mobile, hide the secondary button so the primary CTA gets full space.
   Pages with data-sbar-primary="secondary" reverse this (e.g., HOA page). */
@media (max-width: 768px) {
    .sbar .sbo { display: none; }
    .sbar .sbp { white-space: nowrap; }
    /* HOA page override: show its own CTA, hide waitlist */
    .sbar.sbar-hoa .sbo { display: inline-flex; }
    .sbar.sbar-hoa .sbp { display: none; }
}

/* ── Legacy support: keep .legal-links working on pages not yet updated ── */
.legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
}
.legal-links a {
    color: #aaa;
    text-decoration: none;
    transition: color 0.2s;
}
.legal-links a:hover {
    color: #D4AF37;
    text-decoration: underline;
}

.copyright {
    margin-top: 20px;
    opacity: 1.0;
    color: #999;
}

/* ── SCROLL-TO-TOP BUTTON (global) ── */
.scroll-top {
    -webkit-appearance: none;
    appearance: none;
    position: fixed;
    bottom: 80px;
    right: 24px;
    z-index: 250;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(212, 175, 55, .12);
    border-radius: 50%;
    background: rgba(212, 175, 55, .10);
    color: var(--color-old-gold, #d4af37);
    font-size: 18px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .3s, transform .3s, background .2s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.scroll-top:hover {
    background: rgba(212, 175, 55, .25);
}

.chevron-up {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-left: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: 4px;
}

/* ==========================================================================
   MOBILE HAMBURGER NAV — Global overlay for all pages
   Hidden on desktop (≥769px), visible on mobile (≤768px)
   ========================================================================== */

/* ── TRIGGER BUTTON ── */
.mnav-trigger {
    display: none;
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 9000;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(212, 175, 55, .15);
    border-radius: 12px;
    background: rgba(1, 0, 0, .82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: border-color .25s, background .25s;
}
.mnav-trigger:hover,
.mnav-trigger:focus-visible {
    border-color: rgba(212, 175, 55, .35);
    background: rgba(1, 0, 0, .92);
    outline: none;
}
.mnav-trigger .bar {
    display: block;
    width: 18px;
    height: 1.5px;
    background: #999;
    border-radius: 1px;
    transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s, background .2s;
}
.mnav-trigger.open .bar { background: var(--color-old-gold, #d4af37); }
.mnav-trigger.open .bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mnav-trigger.open .bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mnav-trigger.open .bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 768px) {
    .mnav-trigger { display: flex; }
}

/* ── OVERLAY PANEL ── */
.mnav-overlay {
    position: fixed;
    inset: 0;
    z-index: 8999;
    background: rgba(1, 0, 0, .97);
    background-image: radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, .03) 0%, transparent 60%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s cubic-bezier(.4,0,.2,1), visibility .35s;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 80px 32px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mnav-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* ── LOGO ── */
.mnav-logo {
    margin-bottom: 36px;
}
.mnav-logo img {
    height: 72px;
    width: auto;
}

/* ── SECTIONS ── */
.mnav-section {
    width: 100%;
    max-width: 320px;
    margin-bottom: 28px;
}
.mnav-label {
    font-family: var(--font-heading, "Century Gothic", "Segoe UI", sans-serif);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-old-gold, #d4af37);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(212, 175, 55, .1);
    display: flex;
    align-items: center;
    gap: 8px;
}
.mnav-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(212, 175, 55, .08);
}

/* ── LINKS ── */
.mnav-section a {
    display: block;
    padding: 11px 0;
    font-family: var(--font-main, "Segoe UI", sans-serif);
    font-size: 15px;
    font-weight: 500;
    color: #b3b3b3;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .03);
    transition: color .2s, padding-left .25s;
    line-height: 1.3;
}
.mnav-section a:last-child { border-bottom: none; }
.mnav-section a:hover,
.mnav-section a:focus {
    color: #fff;
    padding-left: 6px;
}
.mnav-section a.mnav-active {
    color: var(--color-old-gold, #d4af37);
    font-weight: 600;
}
.mnav-section a .mnav-sub {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: #666;
    margin-top: 2px;
    transition: color .2s;
}
.mnav-section a:hover .mnav-sub { color: #888; }

/* ── CTA ── */
.mnav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    max-width: 320px;
    padding: 14px 28px;
    margin: 8px 0 32px;
    background: var(--color-old-gold, #d4af37);
    color: #120e00 !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 100px;
    box-shadow: 0 4px 24px rgba(212, 175, 55, .2);
    transition: background .2s, box-shadow .2s, transform .2s;
    min-height: 48px;
}
.mnav-cta:hover {
    background: var(--color-bright-sun, #fecb3e);
    box-shadow: 0 6px 32px rgba(254, 203, 62, .35);
    transform: translateY(-1px);
}
.mnav-cta--setup {
    background: var(--color-stripe-blue-ribbon, #0070F3);
    color: #fff !important;
    box-shadow: 0 4px 24px rgba(0, 112, 243, .2);
    margin-top: 0;
}
.mnav-cta--setup:hover {
    background: #1a85ff;
    box-shadow: 0 6px 32px rgba(0, 112, 243, .35);
}

/* ── SOCIAL ROW ── */
.mnav-social {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 24px;
}
.mnav-social a {
    color: #555;
    font-size: 16px;
    transition: color .2s;
    text-decoration: none;
    border: none;
    padding: 0;
}
.mnav-social a:hover { color: var(--color-old-gold, #d4af37); }
.mnav-social a svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* ── LEGAL FOOTER ── */
.mnav-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 14px;
    max-width: 320px;
}
.mnav-legal a {
    font-size: 10px;
    color: #444;
    text-decoration: none;
    transition: color .2s;
    border: none;
    padding: 0;
}
.mnav-legal a:hover { color: #888; }

/* ── STAGGER ANIMATION ── */
.mnav-overlay.open .mnav-logo { animation: mnavFadeUp .4s .05s both; }
.mnav-overlay.open .mnav-section:nth-child(1) { animation: mnavFadeUp .4s .1s both; }
.mnav-overlay.open .mnav-section:nth-child(2) { animation: mnavFadeUp .4s .18s both; }
.mnav-overlay.open .mnav-section:nth-child(3) { animation: mnavFadeUp .4s .26s both; }
.mnav-overlay.open .mnav-cta { animation: mnavFadeUp .4s .32s both; }
.mnav-overlay.open .mnav-cta.mnav-cta--setup { animation: mnavFadeUp .4s .36s both; }
.mnav-overlay.open .mnav-social { animation: mnavFadeUp .4s .38s both; }
.mnav-overlay.open .mnav-legal { animation: mnavFadeUp .4s .42s both; }

@keyframes mnavFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── BODY SCROLL LOCK ── */
body.mnav-locked {
    overflow: hidden;
    touch-action: none;
}