/* =====================================================
   MAC RANDHAWA REAL ESTATE - 2026 VISUAL OVERHAUL
   Public-site design layer only. Backend/admin untouched.
   ===================================================== */

:root {
    --mac-ink: #101827;
    --mac-navy: #14233f;
    --mac-royal: #2457ff;
    --mac-sky: #10b8ff;
    --mac-gold: #ffbd3d;
    --mac-coral: #ff6b4a;
    --mac-mint: #18d6a3;
    --mac-cream: #fff8e8;
    --mac-paper: #fffdf8;
    --mac-line: rgba(16, 24, 39, .1);
    --mac-shadow: 0 24px 70px rgba(16, 24, 39, .14);
    --mac-radius-xl: 34px;
    --mac-radius-lg: 24px;
    --mac-radius-md: 18px;
}

html {
    scroll-behavior: smooth;
}

body.realtor-2026 {
    background:
        radial-gradient(circle at 8% 5%, rgba(255, 189, 61, .20), transparent 28rem),
        radial-gradient(circle at 92% 15%, rgba(36, 87, 255, .16), transparent 26rem),
        linear-gradient(180deg, #fffdf8 0%, #f7fbff 45%, #fffaf1 100%) !important;
    color: var(--mac-ink) !important;
}

body.realtor-2026::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: .45;
    background-image:
        linear-gradient(rgba(20, 35, 63, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 35, 63, .045) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, #000, transparent 70%);
}

body.realtor-2026 .font-display,
body.realtor-2026 h1,
body.realtor-2026 h2,
body.realtor-2026 h3 {
    letter-spacing: -0.035em;
}

body.realtor-2026 .text-navy,
body.realtor-2026 .section-title,
body.realtor-2026 .listing-address,
body.realtor-2026 .listing-price,
body.realtor-2026 .why-card h3,
body.realtor-2026 .testimonial-name {
    color: var(--mac-ink) !important;
}

body.realtor-2026 .text-gold,
body.realtor-2026 .section-label,
body.realtor-2026 .view-all,
body.realtor-2026 .insta-handle {
    color: var(--mac-coral) !important;
}

body.realtor-2026 .bg-navy {
    background: var(--mac-ink) !important;
}

body.realtor-2026 .bg-gold,
body.realtor-2026 .btn-gold {
    background: linear-gradient(135deg, var(--mac-coral), var(--mac-gold)) !important;
    color: #111827 !important;
}

body.realtor-2026 #main-nav {
    background: rgba(255, 253, 248, .72) !important;
    border-bottom: 1px solid rgba(16, 24, 39, .08);
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
}

body.realtor-2026 #main-nav .max-w-7xl {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

body.realtor-2026 nav a[href="index.php"] span:first-child {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: Inter, sans-serif !important;
    letter-spacing: -.04em;
    font-weight: 900 !important;
}

body.realtor-2026 nav a[href="index.php"] span:first-child::before {
    content: "M";
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--mac-royal), var(--mac-sky));
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 14px 28px rgba(36, 87, 255, .24);
}

body.realtor-2026 nav a:not([href="index.php"]):not(.floating-cta) {
    border-radius: 999px;
}

body.realtor-2026 nav .hidden.md\:flex a:not(:last-child) {
    padding: 9px 12px;
}

body.realtor-2026 nav .hidden.md\:flex a:not(:last-child):hover {
    background: rgba(36, 87, 255, .08);
    color: var(--mac-royal) !important;
}

body.realtor-2026 nav a[href="contact.php"],
body.realtor-2026 .floating-cta {
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--mac-royal), var(--mac-sky)) !important;
    color: white !important;
    box-shadow: 0 18px 34px rgba(36, 87, 255, .25) !important;
}

body.realtor-2026 #mobile-menu {
    background:
        radial-gradient(circle at top left, rgba(255, 189, 61, .26), transparent 20rem),
        radial-gradient(circle at bottom right, rgba(36, 87, 255, .16), transparent 22rem),
        #fffdf8 !important;
}

body.realtor-2026 .btn,
body.realtor-2026 .btn-gold,
body.realtor-2026 .btn-outline,
body.realtor-2026 .btn-outline-navy,
body.realtor-2026 .btn-outline-white,
body.realtor-2026 button[type="submit"],
body.realtor-2026 input[type="submit"] {
    border-radius: 999px !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
    min-height: 48px;
    transform: translateZ(0);
}

body.realtor-2026 .btn:hover,
body.realtor-2026 .btn-gold:hover,
body.realtor-2026 button[type="submit"]:hover {
    transform: translateY(-3px) scale(1.01) !important;
}

body.realtor-2026 .btn-outline-navy,
body.realtor-2026 .btn-outline,
body.realtor-2026 .btn-outline-white {
    border: 2px solid rgba(16, 24, 39, .18) !important;
    background: rgba(255, 255, 255, .62) !important;
    color: var(--mac-ink) !important;
    backdrop-filter: blur(16px);
}

body.realtor-2026 .hero {
    position: relative;
    min-height: calc(100vh - 80px) !important;
    background:
        radial-gradient(circle at 20% 15%, rgba(255, 189, 61, .34), transparent 22rem),
        radial-gradient(circle at 70% 16%, rgba(36, 87, 255, .20), transparent 26rem),
        linear-gradient(135deg, #fff9eb 0%, #f5fbff 46%, #fffdf8 100%) !important;
    border-bottom: 1px solid rgba(16, 24, 39, .08);
    overflow: hidden;
}

body.realtor-2026 .hero::before,
body.realtor-2026 .hero::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    filter: blur(2px);
    opacity: .95;
    pointer-events: none;
}

body.realtor-2026 .hero::before {
    width: 160px;
    height: 160px;
    left: -60px;
    top: 120px;
    background: repeating-linear-gradient(45deg, rgba(255, 107, 74, .24) 0 10px, transparent 10px 22px);
}

body.realtor-2026 .hero::after {
    width: 360px;
    height: 360px;
    right: -120px;
    bottom: -140px;
    background: radial-gradient(circle, rgba(24, 214, 163, .24), transparent 68%);
}

body.realtor-2026 .hero-inner {
    max-width: 1240px !important;
    gap: clamp(34px, 5vw, 72px) !important;
}

body.realtor-2026 .hero-badge,
body.realtor-2026 .section-label,
body.realtor-2026 .eyebrow-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    border-radius: 999px !important;
    padding: 10px 16px !important;
    background: rgba(255, 255, 255, .78) !important;
    border: 1px solid rgba(255, 107, 74, .22) !important;
    box-shadow: 0 12px 30px rgba(16, 24, 39, .08);
    color: var(--mac-coral) !important;
    letter-spacing: .12em !important;
}

body.realtor-2026 .hero h1 {
    font-family: Inter, sans-serif !important;
    color: var(--mac-ink) !important;
    font-size: clamp(3.1rem, 8vw, 6.6rem) !important;
    line-height: .92 !important;
    letter-spacing: -.08em !important;
    margin-bottom: 24px !important;
}

body.realtor-2026 .hero h1::after {
    content: "";
    display: block;
    width: min(260px, 54vw);
    height: 14px;
    margin-top: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--mac-coral), var(--mac-gold), var(--mac-mint), var(--mac-sky));
}

body.realtor-2026 .hero-subtext {
    font-size: clamp(1.08rem, 2vw, 1.28rem) !important;
    color: rgba(16, 24, 39, .76) !important;
}

body.realtor-2026 .hero-trust {
    gap: 12px !important;
}

body.realtor-2026 .hero-trust-item,
body.realtor-2026 .stat-pill,
body.realtor-2026 .quiz-fun-fact {
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(16, 24, 39, .08);
    border-radius: 999px;
    padding: 10px 14px;
    color: rgba(16, 24, 39, .72) !important;
    box-shadow: 0 12px 30px rgba(16, 24, 39, .06);
}

body.realtor-2026 .hero-trust-item i,
body.realtor-2026 .stat-pill i,
body.realtor-2026 .quiz-fun-fact i {
    color: var(--mac-royal) !important;
}

body.realtor-2026 .hero-photo {
    max-width: 480px !important;
    isolation: isolate;
}

body.realtor-2026 .hero-photo::before {
    content: "Edmonton move strategist";
    position: absolute;
    z-index: 3;
    top: 28px;
    right: -28px;
    max-width: 170px;
    padding: 14px 16px;
    border-radius: 20px;
    background: var(--mac-ink);
    color: white;
    font-weight: 900;
    font-size: .9rem;
    line-height: 1.1;
    transform: rotate(5deg);
    box-shadow: var(--mac-shadow);
}

body.realtor-2026 .hero-photo::after {
    content: "No boring house hunt.";
    position: absolute;
    z-index: 3;
    left: -22px;
    bottom: 58px;
    padding: 12px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--mac-coral), var(--mac-gold));
    color: #111827;
    font-weight: 1000;
    box-shadow: var(--mac-shadow);
    transform: rotate(-4deg);
}

body.realtor-2026 .hero-photo img {
    border-radius: 38px !important;
    border: 10px solid rgba(255, 255, 255, .9) !important;
    box-shadow: 0 34px 90px rgba(16, 24, 39, .22), 0 0 0 1px rgba(16, 24, 39, .08) !important;
    transform: rotate(1.2deg);
}

body.realtor-2026 .hero-photo-badge {
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .92) !important;
    color: var(--mac-ink) !important;
    box-shadow: var(--mac-shadow) !important;
}

body.realtor-2026 .stats-bar {
    background: var(--mac-ink) !important;
    color: white;
    border: 0 !important;
    padding: 24px 0 !important;
}

body.realtor-2026 .stats-bar .stat-pill {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .12) !important;
    color: white !important;
}

body.realtor-2026 .section,
body.realtor-2026 section.py-20,
body.realtor-2026 section.py-16,
body.realtor-2026 section.py-24 {
    position: relative;
}

body.realtor-2026 .section-header,
body.realtor-2026 .listings-header {
    margin-bottom: clamp(34px, 6vw, 62px) !important;
}

body.realtor-2026 .section-title,
body.realtor-2026 section h2.font-display {
    font-family: Inter, sans-serif !important;
    font-weight: 1000 !important;
    letter-spacing: -.06em !important;
}

body.realtor-2026 .section-subtitle,
body.realtor-2026 p,
body.realtor-2026 li {
    text-wrap: pretty;
}

body.realtor-2026 .card-hover,
body.realtor-2026 .listing-card,
body.realtor-2026 .why-card,
body.realtor-2026 .testimonial-card,
body.realtor-2026 .bg-white,
body.realtor-2026 .contact-card,
body.realtor-2026 .tool-card,
body.realtor-2026 .quiz-card,
body.realtor-2026 article,
body.realtor-2026 form {
    border-radius: var(--mac-radius-lg) !important;
}

body.realtor-2026 .listing-card,
body.realtor-2026 .why-card,
body.realtor-2026 .testimonial-card,
body.realtor-2026 .bg-white,
body.realtor-2026 .contact-card,
body.realtor-2026 .tool-card,
body.realtor-2026 .quiz-card,
body.realtor-2026 article {
    border: 1px solid rgba(16, 24, 39, .09) !important;
    box-shadow: 0 18px 48px rgba(16, 24, 39, .08) !important;
}

body.realtor-2026 .card-hover:hover,
body.realtor-2026 .listing-card:hover,
body.realtor-2026 .why-card:hover,
body.realtor-2026 .testimonial-card:hover,
body.realtor-2026 article:hover {
    transform: translateY(-8px) rotate(.25deg) !important;
    box-shadow: 0 30px 80px rgba(16, 24, 39, .14) !important;
}

body.realtor-2026 .listing-img-wrap,
body.realtor-2026 .listing-image,
body.realtor-2026 .property-image {
    border-radius: 22px 22px 0 0 !important;
}

body.realtor-2026 .listing-badge,
body.realtor-2026 .badge-active,
body.realtor-2026 .badge-sold,
body.realtor-2026 .badge-pending,
body.realtor-2026 .status-badge {
    border-radius: 999px !important;
    padding: 8px 14px !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
}

body.realtor-2026 .badge-active {
    background: linear-gradient(135deg, var(--mac-mint), #0ea472) !important;
}

body.realtor-2026 .badge-pending {
    background: linear-gradient(135deg, var(--mac-gold), var(--mac-coral)) !important;
    color: var(--mac-ink) !important;
}

body.realtor-2026 .why-card {
    text-align: left !important;
    border-top: 0 !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .72)),
        radial-gradient(circle at top right, rgba(36, 87, 255, .12), transparent 14rem) !important;
}

body.realtor-2026 .why-icon,
body.realtor-2026 .testimonial-avatar {
    margin-left: 0 !important;
    background: linear-gradient(135deg, rgba(36, 87, 255, .13), rgba(255, 189, 61, .22)) !important;
    color: var(--mac-royal) !important;
    border: 1px solid rgba(16, 24, 39, .08);
}

body.realtor-2026 .quiz-banner,
body.realtor-2026 .consult-cta,
body.realtor-2026 .insta-section,
body.realtor-2026 footer {
    position: relative;
    overflow: hidden;
}

body.realtor-2026 .quiz-banner {
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 107, 74, .18), transparent 20rem),
        radial-gradient(circle at 80% 10%, rgba(24, 214, 163, .16), transparent 18rem),
        #fff6e7 !important;
}

body.realtor-2026 .consult-cta,
body.realtor-2026 footer {
    background:
        radial-gradient(circle at 10% 0%, rgba(36, 87, 255, .42), transparent 26rem),
        radial-gradient(circle at 90% 20%, rgba(255, 107, 74, .28), transparent 24rem),
        #101827 !important;
}

body.realtor-2026 .consult-cta .btn-gold,
body.realtor-2026 footer .btn-gold {
    color: #101827 !important;
}

body.realtor-2026 input,
body.realtor-2026 textarea,
body.realtor-2026 select {
    border-radius: 16px !important;
    border: 1px solid rgba(16, 24, 39, .12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65) !important;
}

body.realtor-2026 input:focus,
body.realtor-2026 textarea:focus,
body.realtor-2026 select:focus {
    outline: 3px solid rgba(36, 87, 255, .16) !important;
    border-color: rgba(36, 87, 255, .44) !important;
}

body.realtor-2026 .page-hero,
body.realtor-2026 .contact-hero,
body.realtor-2026 .py-16.md\:py-24:first-of-type,
body.realtor-2026 main > section:first-child {
    background:
        radial-gradient(circle at 12% 16%, rgba(255, 189, 61, .26), transparent 22rem),
        radial-gradient(circle at 88% 12%, rgba(36, 87, 255, .16), transparent 26rem),
        linear-gradient(135deg, #fff9eb, #f6fbff) !important;
}

body.realtor-2026 .mac-seo-slab {
    position: relative;
    padding: clamp(70px, 9vw, 110px) 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(36, 87, 255, .14), transparent 24rem),
        radial-gradient(circle at 86% 22%, rgba(255, 107, 74, .18), transparent 22rem),
        linear-gradient(180deg, #ffffff, #fff8e8);
    border-top: 1px solid rgba(16, 24, 39, .08);
    border-bottom: 1px solid rgba(16, 24, 39, .08);
}

body.realtor-2026 .mac-seo-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(26px, 5vw, 58px);
    align-items: start;
}

body.realtor-2026 .mac-seo-panel,
body.realtor-2026 .mac-neighborhood-card,
body.realtor-2026 .mac-faq-card {
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(16, 24, 39, .09);
    border-radius: var(--mac-radius-lg);
    padding: clamp(22px, 3vw, 34px);
    box-shadow: 0 24px 60px rgba(16, 24, 39, .09);
    backdrop-filter: blur(16px);
}

body.realtor-2026 .mac-seo-panel h2,
body.realtor-2026 .mac-guide-hero h1 {
    font-family: Inter, sans-serif !important;
    font-weight: 1000;
    letter-spacing: -.07em;
    line-height: .96;
}

body.realtor-2026 .mac-seo-panel h2 {
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    margin: 14px 0 18px;
}

body.realtor-2026 .mac-seo-panel p {
    color: rgba(16, 24, 39, .74);
    font-size: 1.08rem;
    line-height: 1.75;
}

body.realtor-2026 .mac-neighborhoods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

body.realtor-2026 .mac-neighborhood-card {
    padding: 22px;
}

body.realtor-2026 .mac-neighborhood-card h3 {
    font-family: Inter, sans-serif !important;
    font-size: 1.08rem;
    font-weight: 950;
    margin: 0 0 8px;
    color: var(--mac-ink);
}

body.realtor-2026 .mac-neighborhood-card p {
    margin: 0;
    color: rgba(16, 24, 39, .66);
    font-size: .94rem;
}

body.realtor-2026 .mac-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

body.realtor-2026 .mac-chip-row a,
body.realtor-2026 .mac-chip-row span,
body.realtor-2026 .mac-guide-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .8);
    border: 1px solid rgba(16, 24, 39, .09);
    color: var(--mac-ink);
    font-size: .9rem;
    font-weight: 800;
    text-decoration: none;
}

body.realtor-2026 .mac-chip-row a:hover {
    background: var(--mac-ink);
    color: #fff;
}

body.realtor-2026 .mac-guide-hero {
    padding: clamp(72px, 9vw, 110px) 0 clamp(44px, 8vw, 90px);
    background:
        radial-gradient(circle at 15% 18%, rgba(255, 189, 61, .28), transparent 24rem),
        radial-gradient(circle at 90% 5%, rgba(36, 87, 255, .18), transparent 28rem),
        linear-gradient(135deg, #fff9eb, #f7fbff);
    border-bottom: 1px solid rgba(16, 24, 39, .08);
}

body.realtor-2026 .mac-guide-hero h1 {
    max-width: 920px;
    font-size: clamp(3rem, 7vw, 6.8rem);
    margin: 14px 0 22px;
}

body.realtor-2026 .mac-guide-hero p {
    max-width: 760px;
    font-size: clamp(1.05rem, 2vw, 1.28rem);
    color: rgba(16, 24, 39, .76);
    line-height: 1.75;
}

body.realtor-2026 .mac-guide-section {
    padding: clamp(62px, 8vw, 96px) 0;
}

body.realtor-2026 .mac-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

body.realtor-2026 .mac-guide-card {
    background: rgba(255, 255, 255, .8);
    border: 1px solid rgba(16, 24, 39, .09);
    border-radius: var(--mac-radius-lg);
    padding: 26px;
    box-shadow: 0 24px 60px rgba(16, 24, 39, .08);
}

body.realtor-2026 .mac-guide-card i {
    color: var(--mac-royal);
    font-size: 1.4rem;
    margin-bottom: 14px;
}

body.realtor-2026 .mac-guide-card h2,
body.realtor-2026 .mac-guide-card h3 {
    font-family: Inter, sans-serif !important;
    font-weight: 950;
    margin-bottom: 10px;
}

body.realtor-2026 .mac-faq-wrap {
    display: grid;
    gap: 14px;
}

body.realtor-2026 .mac-faq-card h3 {
    font-family: Inter, sans-serif !important;
    font-weight: 950;
    margin-bottom: 8px;
}

body.realtor-2026 .mac-faq-card p {
    color: rgba(16, 24, 39, .7);
    margin: 0;
}

body.realtor-2026 .mac-local-cta {
    border-radius: var(--mac-radius-xl);
    padding: clamp(32px, 6vw, 58px);
    background:
        radial-gradient(circle at 10% 12%, rgba(255, 189, 61, .34), transparent 20rem),
        linear-gradient(135deg, var(--mac-ink), #1b3159);
    color: #fff;
    box-shadow: var(--mac-shadow);
}

body.realtor-2026 .mac-local-cta h2,
body.realtor-2026 .mac-local-cta p {
    color: #fff !important;
}

body.realtor-2026 footer a:hover {
    color: var(--mac-gold) !important;
}

@media (max-width: 1024px) {
    body.realtor-2026 .mac-seo-grid,
    body.realtor-2026 .mac-guide-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    body.realtor-2026 .hero {
        min-height: auto !important;
    }

    body.realtor-2026 .hero-text {
        text-align: left !important;
    }

    body.realtor-2026 .hero-buttons,
    body.realtor-2026 .hero-trust {
        justify-content: flex-start !important;
    }

    body.realtor-2026 .hero-photo::before,
    body.realtor-2026 .hero-photo::after {
        display: none;
    }

    body.realtor-2026 .hero h1 {
        font-size: clamp(2.8rem, 17vw, 4rem) !important;
    }

    body.realtor-2026 .hero h1::after {
        height: 10px;
    }

    body.realtor-2026 .mac-neighborhoods {
        grid-template-columns: 1fr;
    }

    body.realtor-2026 .floating-cta span {
        display: none;
    }

    body.realtor-2026 .floating-cta {
        width: 54px;
        height: 54px;
        padding: 0 !important;
        justify-content: center;
        right: 14px;
    }
}

@media (max-width: 480px) {
    body.realtor-2026 h1,
    body.realtor-2026 .text-5xl,
    body.realtor-2026 .text-6xl,
    body.realtor-2026 .text-7xl {
        font-size: clamp(2.1rem, 11vw, 3.2rem) !important;
        line-height: 1 !important;
    }

    body.realtor-2026 .mac-guide-card,
    body.realtor-2026 .mac-seo-panel,
    body.realtor-2026 .mac-neighborhood-card,
    body.realtor-2026 .why-card,
    body.realtor-2026 .testimonial-card {
        padding: 22px !important;
    }
}