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

html,
body {
    width: 100%;
    height: 100%;
}

body {
    background: #000;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
}

body.page-ready {
    overflow-x: hidden;
    overflow-y: auto;
}

.intro {
    position: relative;
    width: 100vw;
    height: 100vh;
    background:
        radial-gradient(circle at center, #101010 0%, #050505 45%, #000 75%);
    overflow: hidden;
}


.stage {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

transition:
    opacity .7s ease,
    visibility .7s ease;
}


.stage.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.stage-blueprint.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.stage-blueprint.active .blueprint-svg {
    opacity: 1 !important;

filter:
    brightness(.92)
    contrast(1.02)
    drop-shadow(0 0 3px rgba(0, 160, 255, .30))
    drop-shadow(0 0 8px rgba(0, 100, 255, .15));
}

/* Blueprint stage must become fully visible immediately
   so the animated lines stay bright */
.stage-blueprint {
    transition:
        opacity .15s ease,
        visibility .15s ease;
}

.av-logo {
    display: block;

    width: min(520px, 72vw);
    max-width: 520px;
    height: auto;

    position: relative;
    z-index: 5;

    opacity: 0;
    transform: scale(.75);

    filter:
        drop-shadow(0 0 10px rgba(212,175,55,.28))
        drop-shadow(0 0 30px rgba(212,175,55,.14));

    animation: logoIn 2s ease forwards;
}


@keyframes logoIn {

    0% {
        opacity: 0;
        transform: scale(.75);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }

}

.blueprint-wrap {
    position: relative;

    width: min(1180px, 90vw);
    height: min(680px, 68vh);

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 2;
}


.blueprint-image {
    width: 100%;
    height: 100%;
    object-fit: contain;

    opacity: 0;

    filter:
        brightness(1.05)
        contrast(1.08)
        drop-shadow(0 0 12px rgba(90,150,255,.20));

    animation: blueprintAppear .8s ease forwards .15s;
}


.blueprint-reveal {
    position: absolute;
    inset: 0;

    background: #02060c;

    transform-origin: right center;

    animation: draftReveal 3.8s cubic-bezier(.65,0,.35,1) forwards;
}


.blueprint-scan {
    position: absolute;

    top: 0;
    bottom: 0;

    width: 140px;

    left: -160px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(90,160,255,.08) 20%,
            rgba(150,205,255,.55) 50%,
            rgba(90,160,255,.08) 80%,
            transparent 100%
        );

    filter: blur(2px);

    animation: blueprintScan 3.8s cubic-bezier(.65,0,.35,1) forwards;
}


@keyframes blueprintAppear {

    from {
        opacity: 0;
        transform: scale(.985);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}


@keyframes draftReveal {

    0% {
        transform: scaleX(1);
    }

    100% {
        transform: scaleX(0);
    }

}


@keyframes blueprintScan {

    0% {
        left: -160px;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        left: calc(100% + 160px);
        opacity: 0;
    }

}

.blueprint-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(30,120,255,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30,120,255,.12) 1px, transparent 1px);

    background-size: 45px 45px;

    opacity: .35;
}


.house-placeholder {
    width: min(900px, 80vw);
    height: min(520px, 55vh);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: clamp(24px, 4vw, 55px);
    font-weight: bold;
    letter-spacing: 3px;

    border-radius: 4px;

    transform: scale(.96);
}


.blueprint-house {
    color: #87baff;

    border: 1px solid rgba(100,170,255,.65);

    box-shadow:
        inset 0 0 40px rgba(50,130,255,.15),
        0 0 35px rgba(50,130,255,.08);

    background:
        linear-gradient(
            135deg,
            rgba(10,30,55,.7),
            rgba(5,15,30,.9)
        );
}


.build-house {
    color: #dbeaff;

    border: 1px solid rgba(190,220,255,.5);

    background:
        linear-gradient(
            135deg,
            rgba(20,30,45,.95),
            rgba(8,10,15,.95)
        );

    box-shadow:
        0 0 40px rgba(130,180,255,.15);
}


.finished-house {
    color: #e5c15d;

    border: 1px solid rgba(212,175,55,.35);

    background:
        radial-gradient(
            circle at center,
            rgba(90,55,15,.45),
            rgba(12,12,12,.95)
        );

    box-shadow:
        0 0 50px rgba(212,175,55,.12);
}


.intro-label {
    position: absolute;

    left: 50%;
    bottom: 11%;

    transform: translateX(-50%);

    color: rgba(255,255,255,.8);

    font-size: 12px;
    letter-spacing: 4px;
}


.scroll-prompt {
    position: absolute;

    left: 50%;
    bottom: 4%;

    transform: translateX(-50%);

    color: #d4af37;

    font-size: 11px;
    letter-spacing: 4px;

    opacity: 0;

    transition: opacity 1.5s ease;
}


.scroll-prompt.show {
    opacity: 1;
}


.scroll-prompt span {
    display: block;

    text-align: center;

    font-size: 26px;

    margin-top: 4px;

    animation: bounce 1.4s infinite;
}


@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(7px);
    }

}


@media (max-width: 768px) {

    .house-placeholder {
        width: 88vw;
        height: 48vh;
    }

    .intro-label {
        width: 90%;
        text-align: center;
        font-size: 15px;
    }

}

/* =====================================================
   AV V2 - REAL SVG BLUEPRINT DRAWING
===================================================== */

.svg-blueprint-wrap {
    position: absolute;

    width: min(1200px, 94vw);
    height: min(700px, 74vh);

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 2;
}


.blueprint-svg {
    width: 100%;
    height: 100%;

    overflow: visible;

    filter:
        drop-shadow(0 0 3px rgba(0, 180, 255, .55))
        drop-shadow(0 0 9px rgba(0, 130, 255, .35));
}


.bp-line {
    fill: none;

    stroke: #57bfff;
    stroke-width: 1.2;

    stroke-linecap: round;
    stroke-linejoin: round;

    vector-effect: non-scaling-stroke;

    stroke-dasharray: 1;
    stroke-dashoffset: 1;

    opacity: 0;
}


.bp-line.thin {
    stroke-width: 1.2;
}


/* Only animate while blueprint stage is active */

.stage-blueprint.active .bp-line {
    animation:
        drawBlueprintLine 1.25s cubic-bezier(.65, 0, .35, 1) forwards;
}


@keyframes drawBlueprintLine {

    0% {
        stroke-dashoffset: 1;
        opacity: 0;
    }

    3% {
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

}

/* SEQUENTIAL LINE TIMING */

.stage-blueprint.active .delay-1  { animation-delay: .10s; }
.stage-blueprint.active .delay-2  { animation-delay: .18s; }
.stage-blueprint.active .delay-3  { animation-delay: .26s; }
.stage-blueprint.active .delay-4  { animation-delay: .34s; }

.stage-blueprint.active .delay-5  { animation-delay: .50s; }
.stage-blueprint.active .delay-6  { animation-delay: .60s; }
.stage-blueprint.active .delay-7  { animation-delay: .70s; }
.stage-blueprint.active .delay-8  { animation-delay: .80s; }
.stage-blueprint.active .delay-9  { animation-delay: .90s; }
.stage-blueprint.active .delay-10 { animation-delay: 1.00s; }

.stage-blueprint.active .delay-11 { animation-delay: 1.15s; }
.stage-blueprint.active .delay-12 { animation-delay: 1.25s; }
.stage-blueprint.active .delay-13 { animation-delay: 1.35s; }
.stage-blueprint.active .delay-14 { animation-delay: 1.45s; }

.stage-blueprint.active .delay-15 { animation-delay: 1.60s; }
.stage-blueprint.active .delay-16 { animation-delay: 1.70s; }
.stage-blueprint.active .delay-17 { animation-delay: 1.80s; }
.stage-blueprint.active .delay-18 { animation-delay: 1.90s; }
.stage-blueprint.active .delay-19 { animation-delay: 2.00s; }

.stage-blueprint.active .delay-20 { animation-delay: 2.15s; }
.stage-blueprint.active .delay-21 { animation-delay: 2.25s; }
.stage-blueprint.active .delay-22 { animation-delay: 2.35s; }
.stage-blueprint.active .delay-23 { animation-delay: 2.45s; }

.stage-blueprint.active .delay-24 { animation-delay: 2.60s; }
.stage-blueprint.active .delay-25 { animation-delay: 2.70s; }
.stage-blueprint.active .delay-26 { animation-delay: 2.80s; }
.stage-blueprint.active .delay-27 { animation-delay: 2.90s; }
.stage-blueprint.active .delay-28 { animation-delay: 3.00s; }


/* AV logo stays in FRONT of blueprint */

.blueprint-logo {
    position: absolute;

    width: min(520px, 72vw);
    max-width: 520px;
    height: auto;

    z-index: 10;

    animation: none;
}


.stage-blueprint.active .blueprint-logo {
    animation: blueprintLogoSequence 6.2s ease forwards;
}


@keyframes blueprintLogoSequence {

    0% {
        opacity: 1;
        transform: scale(1);
    }

    55% {
        opacity: 1;
        transform: scale(1);
    }

    75% {
        opacity: .45;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }

}

/* =====================================================
   AV V2 - IMAGE TRANSITION STAGES
===================================================== */

.stage-house-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    opacity: 0;
    transform: scale(1.03);

    transition:
        opacity 1.8s ease,
        transform 3s ease;
}


.stage.active .stage-house-image {
    opacity: 1;
    transform: scale(1);
}


.stage-blueprint-full::after,
.stage-finished::after,
.stage-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at center,
            transparent 35%,
            rgba(0,0,0,.35) 75%,
            rgba(0,0,0,.75) 100%
        );

    pointer-events: none;

    z-index: 2;
}


/* HERO FINAL STAGE */

.stage-hero {
    overflow: hidden;
}


.hero-copy {
    position: absolute;

    left: 7%;
    bottom: 13%;

    z-index: 5;

    max-width: 850px;

    opacity: 0;
    transform: translateY(25px);

    transition:
        opacity 1.4s ease,
        transform 1.4s ease;
}


.stage-hero.active .hero-copy {
    opacity: 1;
    transform: translateY(0);
}


.hero-small {
    color: #d4af37;

    font-size: 12px;
    letter-spacing: 5px;

    margin-bottom: 18px;
}


.hero-copy h1 {
    color: #fff;

    font-size: clamp(30px, 5vw, 72px);
    line-height: 1.02;

    font-weight: 800;
    letter-spacing: -1px;

    text-shadow:
        0 3px 20px rgba(0,0,0,.55);
}


.hero-copy h1 span {
    display: block;

    color: #d4af37;

    margin-top: 8px;
}


/* FINAL SCROLL PROMPT */

.stage-hero .scroll-prompt {
    z-index: 6;
}

/* =====================================================
   SMOOTH FULL BLUEPRINT ENTRANCE
===================================================== */

.stage-blueprint-full .stage-house-image {
    opacity: 0;
    transform: scale(1.015);
    filter: brightness(.55);
}

.stage-blueprint-full.active .stage-house-image {
    animation: fullBlueprintFadeIn 1.8s ease forwards;
}

@keyframes fullBlueprintFadeIn {

    0% {
        opacity: 0;
        transform: scale(1.015);
        filter: brightness(.55);
    }

    45% {
        opacity: .45;
        filter: brightness(.78);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
    }
}

/* =========================================
   AV V2 INTRO SEQUENCE
   ========================================= */

html,
body {
    margin: 0;
    padding: 0;
    background: #000;
    overflow: hidden;
}

#av-intro {
    position: relative;
    width: 100%;
    height: 100vh;
    background: #000;
    overflow: hidden;
}

.intro-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.6s ease-in-out;
}

.intro-slide.active {
    opacity: 1;
    visibility: visible;
}

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

/* AV LOGO SCREEN */
.logo-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.logo-slide img {
    width: min(360px, 60vw);
    height: auto;
    object-fit: contain;
    animation: avLogoIntro 2.4s ease forwards;
}

@keyframes avLogoIntro {
    0% {
        opacity: 0;
        transform: scale(0.82);
        filter: blur(8px);
    }

    35% {
        opacity: 1;
        filter: blur(0);
    }

    75% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.08);
    }
}

/* Slight cinematic movement on house images */
.intro-slide:not(.logo-slide) img {
    transform: scale(1.03);
    transition: transform 6s ease;
}

.intro-slide.active:not(.logo-slide) img {
    transform: scale(1);
}

/* Final hero stays visible */
.final-slide.active {
    opacity: 1;
    visibility: visible;
}

/* Mobile */
@media (max-width: 768px) {
    .intro-slide img {
        object-position: center center;
    }

    .logo-slide img {
        width: min(280px, 68vw);
    }
}

/* Make only the blueprint image smaller */
.intro-slide:nth-child(2) img {
    object-fit: contain;
    width: 89%;
    height: 89%;
    margin: auto;
}

.intro-slide:nth-child(3) img {
    object-fit: contain;
    width: 89%;
    height: 89%;
    margin: auto;
}

/* =========================================
   INTRO STATUS / LOADING TEXT
   ========================================= */

.intro-status {
    position: absolute;
    left: 50%;
    bottom: 42px;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;

    z-index: 20;

    font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;

    letter-spacing: 5px;
    text-transform: uppercase;

    color: #c9a227;

    text-shadow:
        0 0 8px rgba(201, 162, 39, 0.15);

    white-space: nowrap;
    opacity: 0;
}

.intro-slide.active .intro-status {
    animation: statusFade 0.8s ease forwards;
}

@keyframes statusFade {
    from {
        opacity: 0;
        transform: translate(-50%, 8px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}


/* =========================================
   MASTER INTRO LOADING BAR
   ========================================= */

.master-loading-bar {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);

    width: 180px;
    height: 2px;

    background: rgba(255, 255, 255, 0.14);

    overflow: hidden;

    z-index: 99999;

    opacity: 1;
    visibility: visible;
    display: block;

    transition: opacity 0.5s ease;
}

.master-loading-fill {
    width: 0%;
    height: 100%;

    background: #d4af37;

    animation: masterLoad 6.4s linear forwards;
}

@keyframes masterLoad {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}


/* MOBILE */

@media (max-width: 768px) {

    .intro-status {
        bottom: 28px;
        font-size: 9px;
        letter-spacing: 3px;
    }

}

/* =========================================
   FINAL HERO - SCROLL PROMPT
   ========================================= */

.scroll-prompt {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    z-index: 60;

    opacity: 0;
    pointer-events: none;
}

.final-slide.active .scroll-prompt {
    animation: scrollPromptIn 1s ease 0.6s forwards;
}

.scroll-text {
    font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
    font-size: 10px;
    font-weight: 400;

    letter-spacing: 6px;
    text-transform: uppercase;

background: linear-gradient(
    90deg,
    #8f6f1f 0%,
    #d9bd6a 25%,
    #f2df9a 50%,
    #c89f3d 75%,
    #8f6f1f 100%
);

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;

text-shadow:
    0 0 8px rgba(210, 175, 80, 0.12);

    text-shadow:
        0 0 8px rgba(201, 162, 39, 0.18);

    white-space: nowrap;
}

.scroll-arrow {
    font-family: Georgia, serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 1;

background: linear-gradient(
    90deg,
    #8f6f1f 0%,
    #d9bd6a 25%,
    #f2df9a 50%,
    #c89f3d 75%,
    #8f6f1f 100%
);

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;

text-shadow:
    0 0 8px rgba(210, 175, 80, 0.12);

    opacity: 0.9;

    animation: scrollArrowBounce 1.4s ease-in-out infinite;
}

@keyframes scrollPromptIn {
    from {
        opacity: 0;
        transform: translate(-50%, 8px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes scrollArrowBounce {
    0%,
    100% {
        transform: translateY(0);
    }

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

@media (max-width: 768px) {
    .scroll-prompt {
        bottom: 22px;
    }

    .scroll-text {
        font-size: 9px;
        letter-spacing: 3px;
    }
}

/* =========================================
   FINAL HERO AV LOGO
   ========================================= */

.hero-av-logo {
    position: absolute !important;

    top: 30px !important;
    left: 35px !important;

    width: 160px !important;
    height: auto !important;

    max-width: 160px !important;

    object-fit: contain !important;

    z-index: 9999 !important;

    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;

    transform: none !important;

    pointer-events: none;
}

.hero-av-logo {
    position: absolute !important;

    top: 30px !important;
    left: 35px !important;

    width: 160px !important;
    height: auto !important;
    max-width: 160px !important;

    object-fit: contain !important;

    z-index: 9999 !important;

    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;

    transform: none !important;

    pointer-events: none;
}

@media (max-width: 768px) {
    .hero-av-logo {
        top: 18px !important;
        left: 20px !important;

        width: 110px !important;
        max-width: 110px !important;
    }
}

/* =========================================
   FINAL HERO LOGO - ISOLATED VERSION
   ========================================= */

.hero-logo-wrap {
    position: absolute;
    top: 28px;
    left: 32px;

    width: 165px;
    height: auto;

    z-index: 99999;

    opacity: 1;
    visibility: visible;

    pointer-events: none;
}

.hero-logo-wrap img {
    width: 100% !important;
    height: auto !important;

    max-width: none !important;

    object-fit: contain !important;

    display: block !important;

    opacity: 1 !important;
    visibility: visible !important;

    position: relative !important;
    inset: auto !important;

    transform: none !important;
    animation: none !important;
}

@media (max-width: 768px) {
    .hero-logo-wrap {
        top: 18px;
        left: 20px;
        width: 115px;
    }
}

/* =========================================
   CLICK TO EXPLORE - FRONT DOOR HOTSPOT
   ========================================= */

.door-entry {
    position: absolute;

    left: 50%;
    top: 51%;

    transform: translateX(-50%);

    z-index: 80;
}

.door-explore-btn {
    position: relative;
    z-index: 50;

    opacity: 0;
    pointer-events: none;

    border: 0;
    background: rgba(0, 0, 0, 0.36);

    padding: 10px 18px;

    font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;

    letter-spacing: 4px;
    text-transform: uppercase;

    color: #e0c16b;

    border: 1px solid rgba(224, 193, 107, 0.45);

    backdrop-filter: blur(3px);

    cursor: pointer;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
        
        box-shadow:
    0 0 10px rgba(224, 193, 107, 0.35),
    0 0 22px rgba(224, 193, 107, 0.20);

text-shadow:
    0 0 6px rgba(224, 193, 107, 0.55);
}

.door-explore-btn:hover {
    transform: scale(1.04);

    background: rgba(0, 0, 0, 0.5);

    border-color: rgba(224, 193, 107, 0.85);

    box-shadow:
        0 0 14px rgba(224, 193, 107, 0.18);
}

@keyframes exploreGlow {
    0%, 100% {
        box-shadow:
            0 0 10px rgba(224, 193, 107, 0.30),
            0 0 22px rgba(224, 193, 107, 0.18);
    }

    50% {
        box-shadow:
            0 0 16px rgba(224, 193, 107, 0.55),
            0 0 34px rgba(224, 193, 107, 0.30);
    }
}

.door-explore-btn {
    animation: exploreGlow 2.2s ease-in-out infinite;
}

/* =========================================
   REALISTIC FRONT DOORS
   ========================================= */

    /* Positioned over the real front entrance */
.door-panels {
    position: absolute;

    left: -11px;
    top: -112px;

    width: 82px;
    height: 139px;

    transform: translateX(-50%);
    perspective: 900px;

    z-index: 5;
    pointer-events: none;
    opacity: 1;
}


/* BOTH DOOR HALVES */
.door-panel {
    position: absolute;
    top: 0;

    width: 50.5%;
    height: 100%;

    /* Dark luxury wood */
background:
    linear-gradient(
        90deg,
        #170d09 0%,
        #28160f 28%,
        #382016 52%,
        #24130d 78%,
        #140a07 100%
    );
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(0,0,0,0.5);

    box-shadow:
        inset 0 0 12px rgba(0,0,0,0.45);

    backface-visibility: hidden;

    transition:
        transform 1.05s cubic-bezier(.65, 0, .2, 1),
        filter 0.8s ease;
}


/* SUBTLE VERTICAL WOOD DETAIL */
.door-panel::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 10px,
            rgba(255,255,255,0.025) 11px,
            transparent 12px
        );

    pointer-events: none;
}


/* GOLD / METAL CENTER HANDLES */
.door-panel::after {
    content: "";

    position: absolute;

    top: 28%;
    width: 2px;
    height: 48%;

    background: linear-gradient(
        #a98235,
        #eed88c,
        #a98235
    );

    box-shadow:
        0 0 4px rgba(230, 195, 105, 0.25);
}


/* LEFT DOOR */
.door-left {
    left: 0;
    transform-origin: left center;

    border-right: 1px solid rgba(0,0,0,0.65);
}

.door-left::after {
    right: 8px;
}


/* RIGHT DOOR */
.door-right {
    right: 0;
    transform-origin: right center;

    border-left: 1px solid rgba(0,0,0,0.65);
}

.door-right::after {
    left: 8px;
}


/* OPENING ANIMATION */
.door-entry.opening .door-left {
    transform: rotateY(82deg);
    filter: brightness(0.7);
}

.door-entry.opening .door-right {
    transform: rotateY(-82deg);
    filter: brightness(0.7);
}

/* Keep final house perfectly still so CSS doors stay aligned */
.final-slide > .finished-house-image {
    transition: none !important;
}

/* =========================================
   BRING CLICK TO EXPLORE BACK
   ========================================= */

.door-explore-btn {
    opacity: 1;
    pointer-events: auto;
}

/* =========================================
   CAMERA FLY INTO FRONT DOOR
   ========================================= */

.finished-house-image {
    transform-origin: 50% 45% !important;
    will-change: transform;
}

.final-slide.entering-house .finished-house-image {
    animation: none !important;
}

@keyframes exteriorDoorPush {

    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(1.45);
        opacity: 1;
    }
}

@keyframes enterHouseZoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(3.15);
    }
}

/* =========================================
   FORCE DOOR OPENING
   ========================================= */

.door-entry.opening .door-left {
    transform: rotateY(88deg) !important;
}

.door-entry.opening .door-right {
    transform: rotateY(-88deg) !important;
}

/* =========================================
   EXORCIST TEST 😂
   FORCE BUTTON TO RECEIVE CLICKS
   ========================================= */

.door-explore-btn {
    position: relative !important;
    z-index: 999999 !important;

    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;

    pointer-events: auto !important;
    cursor: pointer !important;
}

.door-panels,
.door-panel,
.hero-logo-wrap,
.finished-house-image {
    pointer-events: none !important;
}

.door-entry.opening .door-panels {
    animation: hideDoorPanels 0.25s ease 0.65s forwards;
}

@keyframes hideDoorPanels {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* =========================================
   INTERIOR BEHIND FRONT DOORS
   ========================================= */

.house-interior-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;

    z-index: 4;
    opacity: 1;

    transform: none;
    pointer-events: none;
}

.house-interior-full {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    opacity: 0;
    pointer-events: none;

    z-index: 4;
}

.final-slide.entering-house .house-interior-full {
    opacity: 1;
    transition: opacity 0.7s ease;
}

/* =========================================
   ONE CAMERA SCENE
   House + Interior + Doors travel together
   ========================================= */

.house-camera-scene {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    transform-origin: 50% 45%;

    will-change: transform;
}


/* Interior window sitting BEHIND the fake doors */
/* FULL INTERIOR IMAGE - hidden except through doorway */
.interior-doorway {
    position: absolute;

    left: -11px;
    top: -112px;

    width: 80px;
    height: 137px;

    transform: translateX(-50%);

    overflow: hidden;

    z-index: 4;
    pointer-events: none;
}


/* Interior fills the doorway window */
.interior-doorway .house-interior-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    opacity: 1;

    transform: scale(1);
    pointer-events: none;
}

/* As we enter, reveal the SAME interior image across the whole screen */
.final-slide.entering-house .interior-doorway {
    opacity: 0;
}

/* Fake doors remain above the interior */
.house-camera-scene .door-entry {
    z-index: 5;
}


/* Zoom the ENTIRE WORLD together */
.final-slide.entering-house .house-camera-scene {
    animation: cameraIntoHouse
        cubic-bezier(.45, 0, .25, 1)
        ease-in-out
        forwards;
}


@keyframes cameraIntoHouse {

    0% {
        transform: scale(1);
    }

    62% {
        transform: scale(1.38);
    }

    100% {
        transform: scale(1);
    }
}

/* =========================================
   FINAL FIX - EXPLORE BUTTON POSITION
   ========================================= */

.final-slide .door-entry {
    position: absolute !important;
    left: 50% !important;
    top: 51% !important;
    transform: translate(-50%, -50%) !important;
}

.final-slide .door-explore-btn {
    position: absolute !important;

    left: 50% !important;
    top: 425px !important;

    transform: translateX(-50%) !important;

    width: max-content !important;

    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;

    pointer-events: auto !important;
    z-index: 999999 !important;
}

/* =========================================
   HIDE EXPLORE BUTTON WHEN DOORS OPEN
   ========================================= */

.final-slide .door-entry.opening .door-explore-btn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* =========================================
   FORCE DOORS CLOSED UNTIL CLICK
   ========================================= */

.door-entry:not(.opening) .door-left {
    transform: rotateY(0deg) !important;
    filter: none !important;
}

.door-entry:not(.opening) .door-right {
    transform: rotateY(0deg) !important;
    filter: none !important;
}

.door-entry:not(.opening) .door-panels {
    opacity: 1 !important;
    animation: none !important;
}

/* =========================================
   LOCK CLOSED DOORS ABOVE INTERIOR
   ========================================= */

.door-entry .door-panels {
    z-index: 50 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.door-entry .door-panel {
    opacity: 1 !important;
    visibility: visible !important;
}

.interior-doorway,
.house-interior-full {
    z-index: 4 !important;
}

/* ==================================================
   FINAL DOOR STATE CONTROL
   THIS OVERRIDES ALL OLD DOOR RULES
   ================================================== */

/* CLOSED - before CLICK TO EXPLORE */
.final-slide .door-entry:not(.opening) .door-left {
    transform: rotateY(0deg) !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
}

.final-slide .door-entry:not(.opening) .door-right {
    transform: rotateY(0deg) !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
}

.final-slide .door-entry:not(.opening) .door-panels {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
}

/* KEEP THE ENTIRE DOOR CONTAINER VISIBLE BEFORE CLICK */
.final-slide .door-entry:not(.opening) {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    z-index: 60 !important;
}

/* OPEN - ONLY after button is clicked */
.final-slide .door-entry.opening .door-left {
    transform: rotateY(88deg) !important;
    filter: brightness(0.7) !important;
}

.final-slide .door-entry.opening .door-right {
    transform: rotateY(-88deg) !important;
    filter: brightness(0.7) !important;
}

/* =========================================
   MOBILE FINAL-SLIDE ALIGNMENT
   Desktop remains untouched
   ========================================= */

@media (max-width: 768px) {
    
    /* MOBILE DOOR COORDINATE SYSTEM */
.final-slide .door-entry {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 100% !important;

    transform: none !important;
}

/* MOBILE FAKE FRONT DOORS */
.final-slide .door-panels {
    left: 47.5% !important;
    top: 38.9% !important;

    width: 15.5vw !important;
    height: 15vh !important;

    transform: translateX(-50%) !important;
}

    /* MOBILE INTERIOR PREVIEW BEHIND DOORS */
    .final-slide .interior-doorway {
        left: 47.5% !important;
        top: 38.9% !important;

        width: 15.5vw !important;
        height: 15vh !important;

        transform: translateX(-50%) !important;

        overflow: hidden !important;
    }

    /* MOBILE EXPLORE BUTTON */
    .final-slide .door-explore-btn {
        top: 55% !important;
    }

}

/* ==================================================
   AV MAIN SCROLL EXPERIENCE
   ================================================== */

.av-main {
    position: relative;
    width: 100%;
    background: #000;
    color: #fff;
}

.av-scroll-section {
    position: relative;

    min-height: 100vh;
    width: 100%;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* FIRST MAIN SECTION */
.section-build {
    background-image: url('../images/house-interior.png');
}

/* REMODELING SECTION */
.section-remodel {
    background: url('../images/av-homepage-hero-4k.png') center center / cover no-repeat;
    position: relative;
}
.section-architecture {
    background-image: url('../images/interior-kitchen-02.jpg');
}

.section-outdoor {
    background-image: url('../images/av-homepage-hero-4k.png');
}

.section-estimate {
    background-image: url('../images/render-house.png');
}

.section-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.88) 0%,
            rgba(0, 0, 0, 0.38) 45%,
            rgba(0, 0, 0, 0.08) 75%
        );

    pointer-events: none;
}

.section-content {
    position: relative;

    z-index: 2;

    padding:
        clamp(40px, 7vw, 100px)
        clamp(25px, 7vw, 110px);

    max-width: 850px;
}

.section-kicker {
    display: block;

    margin-bottom: 14px;

    font-size: clamp(11px, 1vw, 15px);
    letter-spacing: 5px;

    color: #e0c16b;

    text-transform: uppercase;
}

.section-content h1,
.section-content h2 {
    margin: 0 0 18px;

    font-size: clamp(50px, 7vw, 110px);
    line-height: 0.92;

    font-weight: 700;

    letter-spacing: -2px;

    text-transform: uppercase;
}

.section-content p {
    margin: 0 0 28px;

    max-width: 650px;

    font-size: clamp(15px, 1.5vw, 21px);
    line-height: 1.5;

    color: rgba(255,255,255,0.86);
}

.section-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 24px;

    border: 1px solid rgba(224, 193, 107, 0.7);

    color: #e0c16b;

    text-decoration: none;

    letter-spacing: 3px;
    font-size: 12px;

    background: rgba(0,0,0,0.32);

    backdrop-filter: blur(4px);

    transition:
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

.section-btn:hover {
    background: rgba(224, 193, 107, 0.12);

    color: #fff;

    box-shadow:
        0 0 18px rgba(224,193,107,0.22);

    transform: translateY(-2px);
}

/* MOBILE */
@media (max-width: 768px) {

    .av-scroll-section {
min-height: 100vh;
        background-position: center;
    }

    .section-content {
        padding: 42px 24px 56px;
    }

    .section-content h1,
    .section-content h2 {
        font-size: clamp(44px, 13vw, 70px);
        line-height: 0.94;
    }

    .section-content p {
        font-size: 15px;
        line-height: 1.45;
    }

    .section-btn {
        padding: 13px 20px;
        font-size: 11px;
    }
}

/* =========================================
   INTERIOR WELCOME MESSAGE
   ========================================= */

.interior-welcome {
    position: absolute;

    left: 50%;
    bottom: 7%;

    transform: translateX(-50%) translateY(18px);

    width: min(90%, 900px);

    text-align: center;

    z-index: 30;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.9s ease,
        transform 0.9s ease,
        visibility 0.9s ease;

    pointer-events: none;
}

.final-slide.entering-house .interior-welcome {
    opacity: 1;
    visibility: visible;

    transform: translateX(-50%) translateY(0);
}

.welcome-kicker {
    display: block;

    margin-bottom: 14px;

    color: #d4af37;

    font-size: 16px;
    font-weight: 700;

    letter-spacing: 5px;
    text-transform: uppercase;

    text-shadow:
        0 2px 8px rgba(0,0,0,0.75),
        0 0 18px rgba(212,175,55,0.20);
}

.interior-welcome h2 {
    margin: 0;

    color: #fff;

    font-size: clamp(28px, 4vw, 54px);
    line-height: 1.02;

    font-weight: 700;

    letter-spacing: -1px;
}

.interior-welcome p {
    margin: 18px 0 0;

    color: rgba(255,255,255,0.88);

    font-size: clamp(14px, 1.2vw, 18px);
    letter-spacing: 1px;
}

.welcome-explore {
    margin-top: 26px;

    display: inline-block;

    padding: 13px 24px;

    color: #d4af37;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 5px;
    text-transform: uppercase;

    background: rgba(0,0,0,0.32);

    border: 1px solid rgba(212,175,55,0.55);

    border-radius: 30px;

    text-shadow:
        0 2px 8px rgba(0,0,0,0.85),
        0 0 14px rgba(212,175,55,0.25);

    box-shadow:
        0 8px 30px rgba(0,0,0,0.20);

    animation: exploreFloat 1.5s ease-in-out infinite;
}

@keyframes exploreFloat {

    0%, 100% {
        transform: translateY(0);
        opacity: 0.82;
    }

    50% {
        transform: translateY(7px);
        opacity: 1;
    }
}

/* ==================================================
   DESKTOP HOUSE + DOORS MOVE AS ONE IMAGE
   ================================================== */

@media (min-width: 769px) {

    .final-slide {
        overflow: hidden;
    }

    .final-slide .house-camera-scene {
        position: absolute !important;

        left: 50% !important;
        top: 50% !important;

        /*
           1.5 = approximate natural aspect ratio
           of our exterior house image.
           Scene grows until it completely covers viewport.
        */
        width: max(100vw, 150vh) !important;
        height: auto !important;
        aspect-ratio: 1.5 / 1 !important;

        transform: translate(-50%, -50%);
        transform-origin: center center;
    }

    .final-slide .finished-house-image,
    .final-slide .house-interior-full {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
    }


    /* DOORS - percentages now follow the HOUSE, not browser */
    .final-slide .door-entry {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        transform: none !important;
    }

    .final-slide .door-panels {
        left: 49.1% !important;
        top: 39% !important;

        width: 5.7% !important;
        height: 15% !important;

        transform: translateX(-50%) !important;
    }

    .final-slide .interior-doorway {
        left: 49.1% !important;
        top: 39% !important;

        width: 5.6% !important;
        height: 15% !important;

        transform: translateX(-50%) !important;
    }
}

/* MOBILE */
@media (max-width: 768px) {

    .interior-welcome {
        bottom: 8%;

        width: 88%;
    }

    .welcome-kicker {
        font-size: 10px;
        letter-spacing: 3px;
    }

    .interior-welcome h2 {
        font-size: clamp(28px, 9vw, 44px);
    }

    .interior-welcome p {
        font-size: 13px;
        line-height: 1.5;
    }

    .welcome-explore {
        font-size: 10px;
        letter-spacing: 4px;
    }
}

/* =========================================
   KEEP AV LOGO FIXED TO SCREEN
   ========================================= */

.final-slide .hero-logo-wrap {
    position: absolute !important;

    top: 35px !important;
    left: 45px !important;

    width: 130px !important;
    height: auto !important;

    z-index: 9999 !important;

    transform: none !important;
}

.final-slide .hero-logo-wrap img {
    display: block !important;
    width: 100% !important;
    height: auto !important;

    opacity: 1 !important;
    visibility: visible !important;
}

/* ==================================================
   AV TOP FLOATING NAVIGATION
   ================================================== */

.av-top-nav {
    position: fixed;

    top: 14px;
    left: 50%;

    width: auto;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 22px;

    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 3px;

    z-index: 999999;

    transform: translate(-50%, -80px);
    opacity: 0;
    visibility: hidden;

    transition:
        transform 0.45s cubic-bezier(.2,.8,.2,1),
        opacity 0.35s ease,
        visibility 0.35s ease;
}


/* Hide nav when scrolling DOWN */
.av-top-nav.nav-hidden {
    transform: translate(-50%, -80px);
    opacity: 0;
}

/* LOGO */
.nav-logo {
    display: flex;
    align-items: center;

    margin-right: 55px;
}

.nav-logo img {
    width: 90px;
    height: auto;
    display: block;
}


/* MAIN MENU ROW */
.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
    gap: 34px;
}

/* EACH MENU ITEM */
.nav-item {
    position: relative;

    display: flex;
    align-items: center;

    height: 100%;
}


.nav-item > a {
    color: #fff;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.6px;

    text-decoration: none;

    transition:
        color 0.25s ease,
        opacity 0.25s ease;
}


.nav-item:hover > a {
    color: #ffd84d;
}


/* =========================================
   DROPDOWN
   ========================================= */

.nav-dropdown {
    position: absolute;

    top: 100% !important;
    left: -20px;

    min-width: 230px;

    padding: 16px 0;

    background: rgba(5, 5, 5, 0.92);
    backdrop-filter: blur(14px);

    border:
        1px solid rgba(255,255,255,0.08);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;
}


.nav-item:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


/* DROPDOWN LINKS */
.nav-dropdown a {
    display: block;

    padding: 11px 20px;

    color: rgba(255,255,255,0.82);

    text-decoration: none;

    font-size: 12px;
    letter-spacing: 1px;

    white-space: nowrap;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        padding-left 0.2s ease;
}


.nav-dropdown a:hover {
    color: #ffd84d;

    background: rgba(255,255,255,0.05);

    padding-left: 25px;
}

/* SHOW NAV ONLY AFTER ENTERING THE HOUSE */
body.page-ready .av-top-nav {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
}

/* =========================================
   MOBILE NAVIGATION
   ========================================= */

.mobile-nav-logo,
.mobile-menu-toggle {
    display: none;
}

@media (max-width: 768px) {

.av-top-nav {
    top: 12px !important;
    left: auto !important;
    right: 14px !important;

    width: 52px !important;
    height: 52px !important;

    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(0, 0, 0, 0.42) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 5px !important;

    transform: translateY(-80px) !important;
}


    /* MOBILE LOGO */
.mobile-nav-logo {
    display: none !important;
}


    /* HAMBURGER */
.mobile-menu-toggle {
    display: flex !important;

position: fixed !important;
top: 18px !important;
right: 18px !important;
z-index: 1000000 !important;

    width: 52px !important;
    height: 52px !important;

    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 5px;

    cursor: pointer;
}

    .mobile-menu-toggle span {
        display: block;

        width: 22px;
        height: 2px;

        background: #fff;

        transition:
            transform 0.3s ease,
            opacity 0.3s ease;
    }


    /* HIDE DESKTOP ROW UNTIL HAMBURGER OPENS */
    .nav-links {
        position: absolute;

        top: 64px;
        left: 0;

        width: 100%;
        height: auto;

        padding: 16px 0;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 0;

        background: rgba(0,0,0,0.92);

        opacity: 0;
        visibility: hidden;

        transform: translateY(-10px);

        transition:
            opacity 0.3s ease,
            transform 0.3s ease,
            visibility 0.3s ease;
    }

    .av-top-nav.mobile-open .nav-links {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-item {
        width: 100%;
        height: auto;
        display: block;
    }

    .nav-item > a {
        display: block;
        padding: 15px 20px;

        font-size: 13px;
        letter-spacing: 1.5px;
    }

    .nav-dropdown {
        position: static;

        min-width: 0;

        padding: 0 0 8px;

        opacity: 1;
        visibility: visible;

        transform: none;

        display: none;

        border: 0;
        background: transparent;
    }

    .nav-item:hover .nav-dropdown {
        display: none;
    }

    .nav-item.mobile-submenu-open .nav-dropdown {
        display: block;
    }

    .nav-dropdown a {
        padding: 10px 34px;
        font-size: 12px;
    }
}

/* =========================================
   EMERGENCY MOBILE HAMBURGER OVERRIDE 😂
   ========================================= */

@media (max-width: 768px) {

    body.page-ready .av-top-nav {
        position: fixed !important;

        top: 14px !important;
        right: 14px !important;
        left: auto !important;

        width: 54px !important;
        height: 54px !important;

        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;

        background: rgba(0, 0, 0, 0.50) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;

        border-radius: 6px !important;

        z-index: 999999 !important;
    }

    body.page-ready .mobile-nav-logo {
        display: none !important;
    }

    body.page-ready .mobile-menu-toggle {
        display: flex !important;

        position: relative !important;
        top: auto !important;
        right: auto !important;

        width: 54px !important;
        height: 54px !important;

        opacity: 1 !important;
        visibility: visible !important;

        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;

        gap: 5px !important;

        z-index: 1000000 !important;
    }

    body.page-ready .mobile-menu-toggle span {
        display: block !important;

        width: 24px !important;
        height: 2px !important;

        background: #fff !important;

        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* =========================================
   FIX MOBILE MENU PANEL
   ========================================= */

@media (max-width: 768px) {

    .av-top-nav .nav-links {
        position: fixed !important;

        top: 76px !important;
        right: 14px !important;
        left: auto !important;

        width: 280px !important;
        max-width: calc(100vw - 28px) !important;
        height: auto !important;

        padding: 10px 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        gap: 0 !important;

        background: rgba(0, 0, 0, 0.94) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;

        border: 1px solid rgba(255,255,255,0.08) !important;
        border-radius: 6px !important;

        opacity: 0 !important;
        visibility: hidden !important;

        transform: translateY(-8px) !important;

        transition:
            opacity 0.25s ease,
            transform 0.25s ease,
            visibility 0.25s ease !important;

        overflow: hidden !important;

        z-index: 999998 !important;
    }

    .av-top-nav.mobile-open .nav-links {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    .av-top-nav .nav-item {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    .av-top-nav .nav-item > a {
        display: block !important;

        width: 100% !important;

        padding: 16px 20px !important;

        color: #fff !important;

        font-size: 13px !important;
        letter-spacing: 1.6px !important;

        text-align: left !important;
    }
}

@media (max-width: 768px) {

    .section-remodel .section-content {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 46px !important;
        padding-right: 28px !important;

        box-sizing: border-box !important;
    }

    .section-remodel .section-content h2 {
        font-size: clamp(46px, 13vw, 72px) !important;
        line-height: 0.98 !important;

        max-width: 100% !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .section-remodel .section-content p {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 15px !important;
        line-height: 1.45 !important;

        white-space: normal !important;
    }
}

/* ==================================================
   MOBILE FINAL SECTION STABILITY + PAGE 3 FIX
   ================================================== */

@media (max-width: 768px) {

    /* STOP MOBILE BROWSER BAR FROM MAKING SECTIONS "ZOOM" */
    .av-scroll-section {
height: var(--av-mobile-height) !important;
min-height: var(--av-mobile-height) !important;
max-height: var(--av-mobile-height) !important;

        background-size: cover !important;
        background-position: center center !important;

        transform: none !important;
    }


    /* PAGE 3 - REMODELING & ADUs */
    .section-remodel .section-content {
        width: calc(100% - 40px) !important;
        max-width: calc(100% - 40px) !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        margin-left: 40px !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;
    }

    .section-remodel .section-content h2 {
        font-size: 11vw !important;
        line-height: 0.98 !important;

        letter-spacing: -1px !important;

        width: 100% !important;
        max-width: 100% !important;

        white-space: normal !important;

        overflow: visible !important;
    }

    .section-remodel .section-content p {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;

        font-size: 14px !important;
        line-height: 1.45 !important;

        white-space: normal !important;
    }
}

@media (max-width: 768px) {

    .av-scroll-section {
        position: relative !important;

height: var(--av-mobile-height) !important;
min-height: var(--av-mobile-height) !important;
max-height: var(--av-mobile-height) !important;

        overflow: hidden !important;

        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center center !important;

        transform: none !important;
        animation: none !important;
    }

    .av-scroll-section::before {
        content: "";
        position: absolute;
        inset: -2px;

        background: inherit;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;

        transform: none !important;
        animation: none !important;

        z-index: 0;
    }

    .av-scroll-section .section-overlay,
    .av-scroll-section .section-content {
        position: relative;
        z-index: 2;
    }
}

@media (max-width: 768px) {

    body.page-ready .final-slide,
    body.page-ready .final-slide .house-camera-scene {
        height: var(--av-mobile-height) !important;
        min-height: var(--av-mobile-height) !important;
        max-height: var(--av-mobile-height) !important;
    }

    body.page-ready .final-slide .house-camera-scene {
        width: 100% !important;

        transform: none !important;
        animation: none !important;

        overflow: hidden !important;
    }

    body.page-ready .final-slide .house-interior-full,
    body.page-ready .final-slide .finished-house-image {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center center !important;

        transform: none !important;
    }
}

/* =========================================
   MOBILE PAGE 1 - REMOVE BLACK GAP
   ========================================= */

@media (max-width: 768px) {

    body.page-ready #av-intro {
        height: var(--av-mobile-height) !important;
        min-height: var(--av-mobile-height) !important;
        max-height: var(--av-mobile-height) !important;

        overflow: hidden !important;
    }

    body.page-ready #av-intro .final-slide {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        min-height: 0 !important;
        max-height: none !important;
    }
}

@media (max-width: 768px) {

    .final-slide .hero-logo-wrap {
        top: 8px !important;
        left: 10px !important;

        width: 105px !important;

        transform: none !important;
    }
}

/* ==========================================================
   SERVICE SPOTLIGHT
   ========================================================== */

.service-spotlight {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100vh;

    background: #080808;

    z-index: 1000000;

    display: grid;
    grid-template-columns: 46% 54%;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.45s ease,
        visibility 0.45s ease;
}


/* OPEN STATE */

.service-spotlight.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* ==========================================================
   CLOSE BUTTON
   ========================================================== */

.spotlight-close {
    position: absolute;

    top: 28px;
    right: 32px;

    width: 48px;
    height: 48px;

    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(0,0,0,0.35);

    color: #fff;

    font-size: 32px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    z-index: 10;

    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.spotlight-close:hover {
    color: #d4af37;
    border-color: #d4af37;
    transform: rotate(90deg);
}


/* ==========================================================
   LEFT SIDE
   ========================================================== */

.spotlight-left {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 70px 7vw;

    background: #080808;

    position: relative;
    z-index: 2;
}


.spotlight-kicker {
    color: #d4af37;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 5px;

    margin-bottom: 24px;
}


.spotlight-left h2 {
    margin: 0;

    color: #fff;

    font-size: clamp(48px, 5vw, 86px);
    line-height: 0.92;

    font-weight: 800;

    letter-spacing: -3px;
}


.spotlight-description {
    color: rgba(255,255,255,0.72);

    font-size: 16px;
    line-height: 1.6;

    max-width: 520px;

    margin: 28px 0 30px;
}


/* ==========================================================
   SERVICE OPTIONS
   ========================================================== */

.spotlight-services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    max-width: 520px;

    border-top: 1px solid rgba(255,255,255,0.15);
}


.spotlight-services button {
    appearance: none;

    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.15);

    color: rgba(255,255,255,0.72);

    padding: 14px 0;

    text-align: left;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.5px;

    cursor: pointer;

    transition:
        color 0.25s ease,
        padding-left 0.25s ease;
}


.spotlight-services button:hover {
    color: #d4af37;
    padding-left: 8px;
}


/* ==========================================================
   BUTTONS
   ========================================================== */

.spotlight-actions {
    display: flex;
    gap: 12px;

    margin-top: 30px;
}


.spotlight-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding: 0 24px;

    border: 1px solid rgba(255,255,255,0.35);

    color: #fff;

    text-decoration: none;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}


.spotlight-btn:hover {
    background: #fff;
    color: #000;
}


.spotlight-btn-gold {
    border-color: #d4af37;
    color: #d4af37;
}


.spotlight-btn-gold:hover {
    background: #d4af37;
    color: #000;
}


/* ==========================================================
   RIGHT IMAGE
   ========================================================== */

.spotlight-right {
    position: relative;

    overflow: hidden;

    background: #111;
}


.spotlight-image-wrap {
    position: absolute;
    inset: 0;

    overflow: hidden;
}


.spotlight-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transform: scale(1.04);

    transition:
        opacity 0.4s ease,
        transform 1.2s cubic-bezier(.2,.8,.2,1);
}


/* subtle luxury gradient */

.spotlight-right::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(8,8,8,0.55) 0%,
            rgba(8,8,8,0.08) 18%,
            rgba(8,8,8,0) 45%
        );
}

.nav-dropdown-btn:hover {
    color: #ffd84d;
    background: rgba(255,255,255,0.05);
    padding-left: 25px;
}

/* ==========================================================
   SPOTLIGHT IMAGE CROSSFADE
   ========================================================== */

.spotlight-image {
    opacity: 1;

    transition:
        opacity 0.35s ease,
        transform 1.2s cubic-bezier(.2,.8,.2,1);
}

.spotlight-image.changing {
    opacity: 0;
    transform: scale(1.07);
}


/* ACTIVE SERVICE */

.spotlight-services button.active-service {
    color: #d4af37;
    padding-left: 8px;
}

/* ==========================================================
   SPOTLIGHT IMAGE + DESCRIPTION TRANSITIONS
   ========================================================== */

.spotlight-image {
    opacity: 1;
    transform: scale(1.04);

    transition:
        opacity 0.35s ease,
        transform 0.8s ease;
}

.spotlight-image.changing {
    opacity: 0;
    transform: scale(1.07);
}


/* ACTIVE SERVICE BUTTON */

.spotlight-services button.active-service {
    color: #d4af37 !important;
    padding-left: 8px;
}


/* DESCRIPTION FADE */

.spotlight-description {
    opacity: 1;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.spotlight-description.changing-text {
    opacity: 0;
    transform: translateY(6px);
}

/* ==========================================================
   SPOTLIGHT LEFT PANEL - TRANSPARENT BLACK
   ========================================================== */

#remodelSpotlight .spotlight-left {
    position: relative;
    z-index: 3;

    background: rgba(0, 0, 0, 0.88) !important;

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* ==========================================================
   SPOTLIGHT - FULL IMAGE BEHIND TRANSPARENT LEFT PANEL
   ========================================================== */

#remodelSpotlight {
    position: fixed;
    overflow: hidden;
}


/* PHOTO NOW FILLS THE ENTIRE SPOTLIGHT */

#remodelSpotlight .spotlight-right {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    z-index: 1 !important;
}


#remodelSpotlight .spotlight-image-wrap {
    width: 100% !important;
    height: 100% !important;
}


#remodelSpotlight .spotlight-image {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center 35% !important;
}

/* LEFT TEXT PANEL SITS OVER THE PHOTO */

#remodelSpotlight .spotlight-left {
    position: relative !important;

    width: 46% !important;
    height: 100% !important;

    z-index: 3 !important;

    background: rgba(0, 0, 0, 0.78) !important;

    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}


/* KEEP CLOSE BUTTON ABOVE EVERYTHING */

#remodelSpotlight .spotlight-close {
    z-index: 10 !important;
}

/* ==========================================================
   FIX SPOTLIGHT LEFT PANEL WIDTH + BUTTON GRID
   ========================================================== */

@media (min-width: 769px) {

    #remodelSpotlight .spotlight-left {
        width: 46vw !important;
        min-width: 560px !important;
        max-width: none !important;

        flex: 0 0 46vw !important;

        padding: 8vh 6.5vw !important;

        box-sizing: border-box !important;

        background: rgba(0, 0, 0, 0.44) !important;
    }


    #remodelSpotlight .spotlight-description {
        width: 100% !important;
        max-width: 470px !important;

        white-space: normal !important;
    }


    #remodelSpotlight .spotlight-services {
        display: grid !important;

        grid-template-columns: 1fr 1fr !important;

        column-gap: 28px !important;

        width: 100% !important;
        max-width: 470px !important;
    }


    #remodelSpotlight .spotlight-services button {
        width: 100% !important;

        text-align: left !important;

        white-space: nowrap !important;

        padding-left: 0 !important;
        padding-right: 8px !important;
    }


    #remodelSpotlight .spotlight-services button.active-service {
        padding-left: 8px !important;
    }


    #remodelSpotlight .spotlight-actions {
        width: 100% !important;
        max-width: 470px !important;

        display: flex !important;
        gap: 12px !important;
    }

}

/* ==========================================================
   HIGH-END REQUEST ESTIMATE SECTION
   ========================================================== */

.section-estimate {
    position: relative !important;
    min-height: 100vh !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;

    background:
        url('../images/house-interior.png')
        center center / cover no-repeat !important;
}


/* DARK IMAGE OVERLAY */

.section-estimate .estimate-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0.88) 0%,
            rgba(0,0,0,0.70) 45%,
            rgba(0,0,0,0.52) 100%
        );

    z-index: 1;
}


/* MAIN 2-COLUMN LAYOUT */

.estimate-layout {
    position: relative;
    z-index: 2;

    width: min(1180px, 88%);
    margin: auto;

    display: grid;
    grid-template-columns: 0.85fr 1.15fr;

    gap: 70px;

    align-items: center;
}


/* ==========================================================
   LEFT SIDE
   ========================================================== */

.estimate-info {
    color: #fff;
}


.estimate-kicker,
.estimate-form-kicker {
    display: block;

    color: #f4d03f;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 5px;

    margin-bottom: 18px;
}


.estimate-info h2 {
    margin: 0 0 24px;

    color: #fff;

    font-size: clamp(48px, 5.2vw, 84px);
    line-height: 0.92;

    font-weight: 800;
    letter-spacing: -2px;
}


.estimate-intro {
    max-width: 470px;

    color: rgba(255,255,255,0.82);

    font-size: 17px;
    line-height: 1.6;

    margin-bottom: 36px;
}


/* CONTACT INFO */

.estimate-contact-block {
    max-width: 440px;

    border-top: 1px solid rgba(255,255,255,0.18);
}


.estimate-contact-item {
    padding: 13px 0;

    display: flex;
    justify-content: space-between;
    gap: 25px;

    border-bottom: 1px solid rgba(255,255,255,0.12);

    font-size: 14px;
}


.estimate-label {
    color: #d4af37;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
}


.estimate-contact-item a,
.estimate-contact-item span:last-child {
    color: rgba(255,255,255,0.88);

    text-decoration: none;

    text-align: right;
}


.estimate-contact-item a:hover {
    color: #f4d03f;
}



/* ==========================================================
   FORM GLASS PANEL
   ========================================================== */

.estimate-form-panel {
    padding: 46px 48px;

    background: rgba(5,5,5,0.70);

    border: 1px solid rgba(255,255,255,0.14);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 25px 70px rgba(0,0,0,0.38);
}


.estimate-form-panel h3 {
    margin: 0 0 30px;

    color: #fff;

    font-size: clamp(34px, 3vw, 54px);

    line-height: 0.98;

    letter-spacing: -1px;
}


/* FORM */

.estimate-form {
    display: flex;
    flex-direction: column;

    gap: 18px;
}


.estimate-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;
}


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

    gap: 7px;
}


.estimate-field label {
    color: rgba(255,255,255,0.65);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;
}


.estimate-field input,
.estimate-field select,
.estimate-field textarea {
    width: 100%;

    box-sizing: border-box;

    color: #fff;

    background: rgba(255,255,255,0.07);

    border: 1px solid rgba(255,255,255,0.18);

    border-radius: 0;

    padding: 14px 15px;

    font-family: inherit;
    font-size: 14px;

    outline: none;

    transition:
        border-color 0.25s ease,
        background 0.25s ease;
}


.estimate-field textarea {
    height: 115px;
    resize: none;
}


.estimate-field input:focus,
.estimate-field select:focus,
.estimate-field textarea:focus {
    border-color: #d4af37;

    background: rgba(255,255,255,0.11);
}


.estimate-field input::placeholder,
.estimate-field textarea::placeholder {
    color: rgba(255,255,255,0.38);
}


.estimate-field select option {
    background: #111;
    color: #fff;
}


/* SUBMIT */

.estimate-submit {
    margin-top: 4px;

    align-self: flex-start;

    min-width: 235px;

    padding: 16px 22px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    color: #111;

    background: #d4af37;

    border: 1px solid #d4af37;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2px;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


.estimate-submit:hover {
    background: #f4d84d;

    transform: translateY(-2px);
}


.estimate-submit span {
    font-size: 18px;
}



/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 768px) {

    .section-estimate {
        min-height: 100vh !important;

        align-items: flex-start !important;

        overflow-y: auto !important;
    }


    .estimate-layout {
        width: calc(100% - 38px);

        display: block;

        padding: 100px 0 55px;
    }


    .estimate-info {
        margin-bottom: 35px;
    }


    .estimate-info h2 {
        font-size: 52px;
    }


    .estimate-contact-item {
        flex-direction: column;
        gap: 4px;
    }


    .estimate-contact-item a,
    .estimate-contact-item span:last-child {
        text-align: left;
    }


    .estimate-form-panel {
        padding: 30px 22px;
    }


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


    .estimate-submit {
        width: 100%;
    }

}

/* ==========================================================
   ESTIMATE FORM STATUS MESSAGES
   ========================================================== */

.estimate-message {
    margin-bottom: 22px;
    padding: 15px 17px;

    border: 1px solid rgba(255,255,255,0.18);

    background: rgba(0,0,0,0.45);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;

    line-height: 1.5;
}

.estimate-message span {
    display: block;

    margin-top: 4px;

    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;

    color: rgba(255,255,255,0.75);
}

.estimate-success {
    border-color: #d4af37;
    color: #f4d03f;
}

.estimate-error {
    border-color: rgba(255,255,255,0.35);
    color: #fff;
}

/* ==========================================================
   ESTIMATE FORM HONEYPOT
   ========================================================== */

.estimate-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================
   REMODEL SPOTLIGHT — MOBILE FIX
   ========================================================== */

@media (max-width: 768px) {

#remodelSpotlight .spotlight-left {
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.08) 0%,
        rgba(0,0,0,0.14) 35%,
        rgba(0,0,0,0.28) 68%,
        rgba(0,0,0,0.48) 100%
    ) !important;
}
/* Main giant title */
#remodelSpotlight .spotlight-left h2 {
    width: 100% !important;
    max-width: 100% !important;

    font-size: clamp(44px, 12.5vw, 62px) !important;
    line-height: 0.93 !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

    /* Description */
    #remodelSpotlight .spotlight-description {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 16px !important;
        line-height: 1.55 !important;

        white-space: normal !important;
        word-break: normal !important;
    }

    /* Service buttons */
    #remodelSpotlight .spotlight-services {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Estimate button */
    #remodelSpotlight .spotlight-actions {
        width: 100% !important;
    }
}

/* ==========================================================
   MOBILE SPOTLIGHT - PHOTO TOP / CONTENT BELOW
   ========================================================== */

#remodelSpotlight {
    background: #080808 !important;
    overflow-y: auto !important;
}


/* PHOTO AREA */

#remodelSpotlight .spotlight-right {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 43vh !important;

    z-index: 1 !important;

    background: #111 !important;
}


#remodelSpotlight .spotlight-image-wrap {
    width: 100% !important;
    height: 100% !important;
}


#remodelSpotlight .spotlight-image {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    background: #111 !important;
}


/* CONTENT AREA */

#remodelSpotlight .spotlight-left {
    position: relative !important;

    z-index: 3 !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: 100vh !important;

    padding:
        calc(43vh + 28px)
        28px
        50px
        28px !important;

    background: linear-gradient(
        to bottom,

        rgba(8,8,8,0) 0px,
        rgba(8,8,8,0.72) 45px,
        rgba(8,8,8,0.94) 120px,
        rgba(8,8,8,1) 220px
    ) !important;

    box-sizing: border-box !important;
}


/* MOBILE TITLE */

#remodelSpotlight .spotlight-left h2 {
    font-size: clamp(42px, 12vw, 58px) !important;
    line-height: 0.92 !important;

    margin-top: 0 !important;
}


/* DESCRIPTION */

#remodelSpotlight .spotlight-description {
    font-size: 16px !important;
    line-height: 1.55 !important;

    max-width: 100% !important;
}


/* SERVICE GRID */

#remodelSpotlight .spotlight-services {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    column-gap: 24px !important;

    width: 100% !important;
}


#remodelSpotlight .spotlight-services button {
    white-space: normal !important;

    line-height: 1.25 !important;
}


/* REQUEST ESTIMATE */

#remodelSpotlight .spotlight-actions {
    width: 100% !important;
}


#remodelSpotlight .spotlight-btn-gold {
    width: 100% !important;

    box-sizing: border-box !important;

    text-align: center !important;
}


/* KEEP X ABOVE PHOTO */

#remodelSpotlight .spotlight-close {
    position: fixed !important;

    top: 115px !important;
    right: 20px !important;

    z-index: 20 !important;
}

/* ===== SERVICES DROPDOWN FIX ===== */

nav ul li ul li a,
nav ul li ul li a:visited,
nav ul li ul li a:focus,
nav ul li ul li a:active {
    background: transparent !important;
    color: #d9d9d9 !important;
    text-decoration: none !important;
    display: block;
}

/* Dropdown item hover */
nav ul li ul li a:hover {
    background: rgba(212, 175, 55, 0.10) !important;
    color: #d4af37 !important;
}

nav ul li ul li {
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

nav ul li ul li:last-child {
    border-bottom: none;
}

/* ===== NAV DROPDOWN ITEMS ===== */

.nav-dropdown a,
.nav-dropdown-btn {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    outline: none;
    background: transparent;
    color: #d9d9d9;
    font: inherit;
    text-decoration: none;
    text-align: left;
    width: 100%;
    padding: 12px 20px;
    display: block;
    cursor: pointer;
    box-sizing: border-box;
}

.nav-dropdown a:hover,
.nav-dropdown-btn:hover {
    background: rgba(212, 175, 55, 0.10);
    color: #d4af37;
}

/* ===== REMODELING SPOTLIGHT IMAGE FIX ===== */

#remodelSpotlight .spotlight-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
    overflow: hidden;
}

#remodelSpotlight .spotlight-image-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#remodelSpotlight .spotlight-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

#remodelSpotlight .spotlight-right::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.75) 0%,
        rgba(0,0,0,0.20) 25%,
        rgba(0,0,0,0) 50%
    );
    z-index: 2;
    pointer-events: none;
}
/* =========================================
   REMODELING SPOTLIGHT — DESKTOP IMAGE FIX
   ========================================= */

#remodelSpotlight .spotlight-right {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;

    width: 58% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}

#remodelSpotlight .spotlight-image-wrap {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}

#remodelSpotlight .spotlight-image-wrap img {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;
    object-position: center center !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;
}

#remodelSpotlight .spotlight-right::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgba(0,0,0,0.95) 0%,
        rgba(0,0,0,0.65) 12%,
        rgba(0,0,0,0.15) 30%,
        rgba(0,0,0,0) 48%
    );
}

/* =========================================
   REMODELING SPOTLIGHT — GLASS / TRANSPARENCY
   ========================================= */

#remodelSpotlight {
    background: rgba(0, 0, 0, 0.25) !important;
}

#remodelSpotlight .spotlight-left {
    background: rgba(5, 5, 5, 0.48) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* =========================================
   REMODELING SPOTLIGHT — FULL IMAGE BACKDROP
   ========================================= */

/* Main spotlight */
#remodelSpotlight {
    position: fixed;
    overflow: hidden;
    background: #000 !important;
}


/* IMAGE NOW FILLS THE ENTIRE SPOTLIGHT */
#remodelSpotlight .spotlight-right {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 0 !important;
}


#remodelSpotlight .spotlight-image-wrap {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


#remodelSpotlight .spotlight-image-wrap img {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;

    max-width: none !important;
    max-height: none !important;
}


/* LEFT TEXT PANEL SITS OVER THE SAME IMAGE */
#remodelSpotlight .spotlight-left {
    position: relative !important;

    width: 46% !important;
    height: 100% !important;

    z-index: 3 !important;

    background: rgba(0, 0, 0, 0.52) !important;

    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

#remodelSpotlight .spotlight-left::after {
    content: "";
    position: absolute;
    top: 0;
    right: -120px;
    width: 120px;
    height: 100%;

    background: linear-gradient(
        to right,
        rgba(0,0,0,0.52),
        rgba(0,0,0,0)
    );

    pointer-events: none;
}

/* ===== MOVE REMODELING SPOTLIGHT CONTENT UP ===== */

#remodelSpotlight .spotlight-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;

    padding-top: 40px !important;
    padding-bottom: 120px !important;
}

#remodelSpotlight .spotlight-left > * {
    transform: translateY(05px);
}

/* =========================================
   REMODELING SECTION — VIDEO BACKGROUND
   ========================================= */

.section-remodel {
    position: relative;
    overflow: hidden;

    /* Fallback while video loads */
    background:
        url('../images/av-homepage-hero-4k.png')
        center center / cover no-repeat;
}

.section-remodel .section-bg-video {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    z-index: 0;

    pointer-events: none;
}

/* Dark cinematic overlay over video */
.section-remodel .section-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.28) 48%,
        rgba(0, 0, 0, 0.08) 78%
    );

    pointer-events: none;
}

/* Keep ALL text above video */
.section-remodel .section-content {
    position: relative;
    z-index: 2;
}

.section-bg-video {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    transform: translateZ(0) scale(1.01);
    -webkit-transform: translateZ(0) scale(1.01);

    will-change: transform;
}

/* ===== OUTDOOR LIVING BACKGROUND ===== */

.section-outdoor {
    background-image: url('../images/av-homepage-hero-4k.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* =====================================================
   MOBILE — FINAL ESTIMATE SECTION FIX
   LET THIS SECTION BE TALLER THAN ONE SCREEN
   ===================================================== */

@media (max-width: 768px) {

    /* Override the global 100vh lock ONLY here */
    .av-scroll-section.section-estimate {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        width: 100% !important;
        max-width: 100% !important;

        display: block !important;

        overflow: visible !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
        box-sizing: border-box !important;
    }


    /* Kill the desktop 2-column layout */
    .section-estimate .estimate-layout {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;

        grid-template-columns: none !important;
        gap: 0 !important;

        transform: none !important;

        box-sizing: border-box !important;
    }


    /* BOTH sides stay inside the phone width */
    .section-estimate .estimate-layout > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;

        transform: none !important;
    }


    /* LET'S BUILD SOMETHING GREAT panel */
    .section-estimate .estimate-layout > :first-child {
        min-height: var(--av-mobile-height) !important;
        height: auto !important;

        padding: 100px 24px 55px !important;

        box-sizing: border-box !important;
    }


    /* FORM AREA BELOW IT */
    .section-estimate .estimate-layout > :last-child {
        height: auto !important;
        min-height: 0 !important;

        padding: 55px 24px 90px !important;

        box-sizing: border-box !important;
    }


    /* Prevent form from making page horizontally scroll */
    .section-estimate form,
    .section-estimate input,
    .section-estimate select,
    .section-estimate textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }
}

/* =====================================================
   MOBILE — REMODELING SPOTLIGHT FINAL FIX
   PHOTO TOP / FULL-WIDTH CONTENT BELOW
   ===================================================== */

@media (max-width: 768px) {

    #remodelSpotlight {
        position: fixed !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        display: block !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        background: #080808 !important;
    }


    /* PHOTO AREA */
    #remodelSpotlight .spotlight-right {
        position: absolute !important;

        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;

        width: 100% !important;
        height: 42svh !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 1 !important;

        overflow: hidden !important;
    }


    #remodelSpotlight .spotlight-image-wrap {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    #remodelSpotlight .spotlight-image-wrap img,
    #remodelSpotlight .spotlight-image {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center center !important;

        max-width: none !important;
        max-height: none !important;

        transform: none !important;
    }


    /* CONTENT BELOW PHOTO */
    #remodelSpotlight .spotlight-left {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        min-height: 0 !important;
        height: auto !important;

        margin: 42svh 0 0 0 !important;

        padding: 38px 24px 80px !important;

        box-sizing: border-box !important;

        background: #080808 !important;

        z-index: 3 !important;

        transform: none !important;
    }


    #remodelSpotlight .spotlight-left > * {
        transform: none !important;
    }


    /* TITLE */
    #remodelSpotlight .spotlight-left h2 {
        width: 100% !important;
        max-width: 100% !important;

        font-size: clamp(42px, 12vw, 58px) !important;
        line-height: 0.93 !important;

        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }


    /* DESCRIPTION */
    #remodelSpotlight .spotlight-description {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 16px !important;
        line-height: 1.5 !important;

        white-space: normal !important;
        word-break: normal !important;
    }


    /* SERVICES */
    #remodelSpotlight .spotlight-services {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        column-gap: 24px !important;
        row-gap: 0 !important;
    }


    /* REQUEST ESTIMATE */
    #remodelSpotlight .spotlight-actions,
    #remodelSpotlight .spotlight-btn-gold {
        width: 100% !important;
        box-sizing: border-box !important;
    }


    /* CLOSE X */
    #remodelSpotlight .spotlight-close {
        position: fixed !important;

        top: 105px !important;
        right: 20px !important;

        z-index: 1000002 !important;
    }
}

/* =====================================================
   ARCHITECTURE SPOTLIGHT
   MATCH REMODELING SPOTLIGHT
   ===================================================== */

#architectureSpotlight {
    position: fixed;
    overflow: hidden;
    background: #000 !important;
}


/* FULL BACKGROUND IMAGE */

#architectureSpotlight .spotlight-right {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 0 !important;
}


#architectureSpotlight .spotlight-image-wrap {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;
}


#architectureSpotlight .spotlight-image-wrap img {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;

    max-width: none !important;
    max-height: none !important;
}


/* DARK GLASS CONTENT PANEL */

#architectureSpotlight .spotlight-left {
    position: relative !important;

    width: 46% !important;
    height: 100% !important;

    z-index: 3 !important;

    background: rgba(5, 5, 5, 0.52) !important;

    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}


/* MOBILE */

@media (max-width: 768px) {

    #architectureSpotlight {
        position: fixed !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        display: block !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        background: #080808 !important;
    }


    #architectureSpotlight .spotlight-right {
        position: absolute !important;

        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;

        width: 100% !important;
        height: 42svh !important;

        z-index: 1 !important;

        overflow: hidden !important;
    }


    #architectureSpotlight .spotlight-image-wrap {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;
    }


    #architectureSpotlight .spotlight-image-wrap img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center center !important;

        transform: none !important;
    }


    #architectureSpotlight .spotlight-left {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 42svh 0 0 0 !important;

        padding: 38px 24px 80px !important;

        background: #080808 !important;

        box-sizing: border-box !important;

        z-index: 3 !important;

        transform: none !important;
    }


    #architectureSpotlight .spotlight-left > * {
        transform: none !important;
    }


    #architectureSpotlight .spotlight-left h2 {
        width: 100% !important;

        font-size: clamp(42px, 12vw, 58px) !important;
        line-height: 0.93 !important;

        white-space: normal !important;
        word-break: normal !important;
    }


    #architectureSpotlight .spotlight-description {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 16px !important;
        line-height: 1.5 !important;
    }


    #architectureSpotlight .spotlight-services {
        width: 100% !important;

        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        column-gap: 24px !important;
    }


    #architectureSpotlight .spotlight-actions,
    #architectureSpotlight .spotlight-btn-gold {
        width: 100% !important;
        box-sizing: border-box !important;
    }


    #architectureSpotlight .spotlight-close {
        position: fixed !important;

        top: 105px !important;
        right: 20px !important;

        z-index: 1000002 !important;
    }
}

/* =====================================================
   ARCHITECTURE SPOTLIGHT — OPEN / CLOSE FIX
   ===================================================== */

#architectureSpotlight {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100vh !important;

    display: grid !important;
    grid-template-columns: 46% 54% !important;

    background: #080808 !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: none !important;
    clip-path: none !important;

    z-index: 1000005 !important;

    overflow: hidden !important;
}


/* WHEN ARCHITECTURAL PLANS IS CLICKED */

#architectureSpotlight.active {
    display: grid !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: none !important;
    clip-path: none !important;

    z-index: 1000005 !important;
}

/* =========================================
   ARCHITECTURE SPOTLIGHT — CLEAN LAYOUT
   ========================================= */

#architectureSpotlight .spotlight-left {
    padding: 70px 55px 45px !important;
    box-sizing: border-box !important;
}

#architectureSpotlight .spotlight-left h2 {
    font-size: clamp(54px, 5vw, 78px) !important;
    line-height: 0.88 !important;
    margin: 18px 0 24px !important;
}

#architectureSpotlight .spotlight-description {
    max-width: 480px !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin-bottom: 28px !important;
}


/* STATIC ARCHITECTURAL SERVICES */

#architectureSpotlight .architecture-services-list {
    width: 100%;
    max-width: 500px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    column-gap: 28px;
    row-gap: 0;

    margin-bottom: 28px;
}

#architectureSpotlight .architecture-services-list div {
    padding: 13px 0;

    border-bottom: 1px solid rgba(255,255,255,0.18);

    color: #d4d4d4;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.1px;
}

@media (max-width: 768px) {

    #architectureSpotlight .spotlight-left {
        padding: 34px 24px 70px !important;
    }

    #architectureSpotlight .spotlight-left h2 {
        font-size: clamp(40px, 11vw, 54px) !important;
        line-height: 0.91 !important;
        margin: 15px 0 20px !important;
    }

    #architectureSpotlight .spotlight-description {
        font-size: 15px !important;
        line-height: 1.5 !important;
        margin-bottom: 24px !important;
    }

    #architectureSpotlight .architecture-services-list {
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        max-width: 100%;
    }

    #architectureSpotlight .architecture-services-list div {
        font-size: 11px;
        line-height: 1.3;
    }
}

/* =====================================================
   ARCHITECTURE SPOTLIGHT — DESKTOP FINAL LAYOUT
   ===================================================== */

@media (min-width: 769px) {

    #architectureSpotlight {
        display: grid !important;
        grid-template-columns: 36% 64% !important;
    }


    /* LEFT INFORMATION PANEL */
    #architectureSpotlight .spotlight-left {
        position: relative !important;

        width: 100% !important;
        max-width: none !important;
        height: 100vh !important;

        padding: 55px 46px 45px 52px !important;
        margin: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        box-sizing: border-box !important;

        background: rgba(3, 7, 12, 0.68) !important;

        z-index: 3 !important;

        transform: none !important;
    }


    /* ARCHITECTURE & PLANNING */
    #architectureSpotlight .spotlight-kicker {
        font-size: 13px !important;
        letter-spacing: 5px !important;
        line-height: 1.2 !important;

        margin: 0 0 24px !important;
    }


    /* MAIN TITLE */
    #architectureSpotlight .spotlight-left h2 {
        width: 100% !important;
        max-width: 520px !important;

        font-size: clamp(52px, 4.5vw, 72px) !important;
        line-height: 0.91 !important;
        letter-spacing: -2px !important;

        margin: 0 0 28px !important;

        white-space: normal !important;
    }


    /* DESCRIPTION */
    #architectureSpotlight .spotlight-description {
        width: 100% !important;
        max-width: 520px !important;

        font-size: 16px !important;
        line-height: 1.55 !important;

        margin: 0 0 30px !important;
    }


    /* SERVICE LIST */
    #architectureSpotlight .architecture-services-list {
        width: 100% !important;
        max-width: 520px !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        column-gap: 34px !important;
        row-gap: 0 !important;

        margin: 0 0 30px !important;
    }


    #architectureSpotlight .architecture-services-list div {
        padding: 13px 0 !important;

        border-bottom: 1px solid rgba(255,255,255,0.16) !important;

        font-size: 12px !important;
        line-height: 1.25 !important;
        letter-spacing: 1.2px !important;

        white-space: normal !important;
    }


    /* REQUEST PLAN ESTIMATE */
    #architectureSpotlight .spotlight-actions {
        width: 100% !important;
        max-width: 520px !important;

        margin: 0 !important;
    }


    #architectureSpotlight .spotlight-btn-gold {
        width: 100% !important;
        box-sizing: border-box !important;

        text-align: center !important;
    }


    /* RIGHT BLUEPRINT IMAGE */
    #architectureSpotlight .spotlight-right {
        position: relative !important;

        width: 100% !important;
        height: 100vh !important;

        inset: auto !important;

        overflow: hidden !important;

        z-index: 1 !important;
    }


    #architectureSpotlight .spotlight-image-wrap {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;
    }


    #architectureSpotlight .spotlight-image {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center center !important;

        transform: none !important;
    }
}

/* =====================================================
   REPAIRS & CONSTRUCTION — DESKTOP
===================================================== */

@media (min-width: 769px) {

    #repairsSpotlight {
        display: grid !important;
        grid-template-columns: 36% 64% !important;
    }

    #repairsSpotlight .spotlight-left {
        position: relative !important;

        width: 100% !important;
        max-width: none !important;
        height: 100vh !important;

        padding: 55px 46px 45px 52px !important;
        margin: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        box-sizing: border-box !important;

        background: rgba(3, 7, 12, 0.72) !important;

        z-index: 3 !important;

        transform: none !important;
    }

    #repairsSpotlight .spotlight-left h2 {
        width: 100% !important;
        max-width: 520px !important;

        font-size: clamp(52px, 4.5vw, 72px) !important;
        line-height: 0.91 !important;
        letter-spacing: -2px !important;

        margin: 0 0 28px !important;
    }

    #repairsSpotlight .spotlight-description {
        width: 100% !important;
        max-width: 520px !important;

        font-size: 16px !important;
        line-height: 1.55 !important;

        margin: 0 0 30px !important;
    }

    #repairsSpotlight .architecture-services-list {
        width: 100% !important;
        max-width: 520px !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        column-gap: 34px !important;

        margin: 0 0 30px !important;
    }

    #repairsSpotlight .architecture-services-list div {
        padding: 13px 0 !important;

        border-bottom: 1px solid rgba(255,255,255,0.16) !important;

        font-size: 12px !important;
        line-height: 1.25 !important;
        letter-spacing: 1.2px !important;
    }

    #repairsSpotlight .spotlight-actions {
        width: 100% !important;
        max-width: 520px !important;
    }

    #repairsSpotlight .spotlight-btn-gold {
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    #repairsSpotlight .spotlight-right {
        position: relative !important;

        width: 100% !important;
        height: 100vh !important;

        inset: auto !important;

        overflow: hidden !important;
        z-index: 1 !important;
    }

    #repairsSpotlight .spotlight-image-wrap,
    #repairsSpotlight .spotlight-image {
        width: 100% !important;
        height: 100% !important;
    }

    #repairsSpotlight .spotlight-image {
        object-fit: cover !important;
        object-position: center !important;
        transform: none !important;
    }
}

/* =========================================================
   REPAIRS & CONSTRUCTION - MOBILE
========================================================= */

@media (max-width: 768px) {

    /* MAIN PAGE */
    #repairsSpotlight {
        display: block !important;

        width: 100% !important;
        height: 100vh !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        background: #070707 !important;
    }


    /* LEFT CONTENT */
    #repairsSpotlight .spotlight-left {
        position: relative !important;

        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;

        display: block !important;

        margin: 0 !important;

        padding:
            115px
            42px
            45px !important;

        box-sizing: border-box !important;

        background: #070707 !important;

        transform: none !important;
    }


    /* GOLD LABEL */
    #repairsSpotlight .spotlight-kicker {
        display: block !important;

        margin: 0 0 28px !important;

        color: #d4af37 !important;

        font-size: 13px !important;
        font-weight: 700 !important;

        line-height: 1.35 !important;
        letter-spacing: 5px !important;
    }


    /* MAIN TITLE */
    #repairsSpotlight .spotlight-left h2 {
        width: 100% !important;
        max-width: none !important;

        margin: 0 0 34px !important;

        font-size: clamp(54px, 14vw, 76px) !important;
        line-height: 0.96 !important;

        letter-spacing: -3px !important;
    }


    /* DESCRIPTION */
    #repairsSpotlight .spotlight-description {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        color: rgba(255,255,255,0.68) !important;

        font-size: 17px !important;
        line-height: 1.65 !important;
    }


    /* IMAGE SECTION */
    #repairsSpotlight .spotlight-right {
        position: relative !important;

        width: calc(100% - 84px) !important;
        height: auto !important;

        inset: auto !important;

        margin: 0 42px 48px !important;

        overflow: hidden !important;

        z-index: 1 !important;
    }


    #repairsSpotlight .spotlight-image-wrap {
        width: 100% !important;
        height: auto !important;

        aspect-ratio: 16 / 10 !important;

        border:
            1px solid
            rgba(212,175,55,0.45) !important;

        overflow: hidden !important;
    }


    #repairsSpotlight .spotlight-image {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center !important;

        transform: none !important;
    }


    /* SERVICE LIST */
    #repairsSpotlight .architecture-services-list {
        width: 100% !important;
        max-width: none !important;

        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        column-gap: 28px !important;
        row-gap: 0 !important;

        margin: 48px 0 34px !important;
    }


    #repairsSpotlight .architecture-services-list div {
        padding: 17px 0 !important;

        border-bottom:
            1px solid
            rgba(255,255,255,0.15) !important;

        font-size: 13px !important;
        font-weight: 700 !important;

        line-height: 1.25 !important;
        letter-spacing: 1.5px !important;
    }


    /* BUTTON AREA */
    #repairsSpotlight .spotlight-actions {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
    }


    #repairsSpotlight .spotlight-btn-gold {
        width: 100% !important;

        box-sizing: border-box !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 24px 18px !important;

        text-align: center !important;
    }


    /* CLOSE BUTTON */
    #repairsSpotlight .spotlight-close {
        position: fixed !important;

        top: 22px !important;
        right: 22px !important;

        width: 54px !important;
        height: 54px !important;

        z-index: 9999999 !important;

        background: rgba(0,0,0,0.72) !important;
    }

}

/* =====================================================
   AV PORTFOLIO EXPERIENCE
===================================================== */

.portfolio-spotlight {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100vh;

    background: #070707;
    color: #fff;

    overflow-y: auto;
    overflow-x: hidden;

    z-index: 1500000;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.45s ease,
        visibility 0.45s ease;
}


.portfolio-spotlight.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* CLOSE */

.portfolio-close {
    position: fixed;

    top: 28px;
    right: 30px;

    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0,0,0,0.55);

    border: 1px solid rgba(255,255,255,0.18);

    color: #fff;

    font-size: 30px;
    line-height: 1;

    cursor: pointer;

    z-index: 20;

    backdrop-filter: blur(10px);
}


/* HEADER */

.portfolio-header {
    padding:
        clamp(90px, 11vh, 130px)
        clamp(28px, 7vw, 110px)
        45px;

    max-width: 1100px;
}


.portfolio-kicker {
    display: block;

    color: #d4af37;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 5px;

    margin-bottom: 22px;
}


.portfolio-header h2 {
    margin: 0;

    font-size: clamp(65px, 8vw, 125px);
    line-height: 0.82;

    letter-spacing: -5px;

    font-weight: 800;
}


.portfolio-header h2 span {
    color: transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,0.8);
}


.portfolio-header p {
    max-width: 650px;

    margin-top: 32px;

    color: rgba(255,255,255,0.65);

    font-size: 18px;
    line-height: 1.6;
}


/* FILTERS */

.portfolio-filters {
    padding:
        5px
        clamp(28px, 7vw, 110px)
        45px;

    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}


.portfolio-filter {
    appearance: none;

    border: 1px solid rgba(255,255,255,0.15);

    background: transparent;

    color: rgba(255,255,255,0.65);

    padding: 12px 18px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.8px;

    cursor: pointer;

    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}


.portfolio-filter:hover,
.portfolio-filter.active {
    color: #d4af37;

    border-color: #d4af37;

    background: rgba(212,175,55,0.06);
}


/* GALLERY */

.portfolio-grid {
    padding:
        0
        clamp(18px, 4vw, 65px)
        90px;

    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    grid-auto-rows: 250px;

    gap: 14px;
}


.portfolio-card {
    position: relative;

    grid-column: span 4;
    grid-row: span 2;

    padding: 0;

    border: 0;

    overflow: hidden;

    background: #111;

    cursor: pointer;

    text-align: left;
}


.portfolio-card-large {
    grid-column: span 8;
    grid-row: span 3;
}


.portfolio-card-wide {
    grid-column: span 8;
}


.portfolio-card-tall {
    grid-column: span 4;
    grid-row: span 3;
}


.portfolio-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform 0.8s cubic-bezier(.2,.7,.2,1),
        filter 0.5s ease;
}


.portfolio-card:hover img {
    transform: scale(1.045);

    filter: brightness(0.72);
}


/* CARD TEXT */

.portfolio-card-overlay {
    position: absolute;
    inset: 0;

    padding: 30px;

    display: flex;
    flex-direction: column;

    justify-content: flex-end;
    align-items: flex-start;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,0.88),
            rgba(0,0,0,0.05) 65%
        );

    opacity: 0;

    transition: opacity 0.35s ease;
}


.portfolio-card:hover .portfolio-card-overlay {
    opacity: 1;
}


.portfolio-card-overlay span {
    color: #d4af37;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 3px;
}


.portfolio-card-overlay h3 {
    margin: 8px 0 14px;

    color: #fff;

    font-size: clamp(24px, 2vw, 38px);
    line-height: 1;

    text-transform: uppercase;
}


.portfolio-card-overlay small {
    color: rgba(255,255,255,0.65);

    font-size: 10px;

    letter-spacing: 2px;
}


/* FILTER HIDING */

.portfolio-card.portfolio-hidden {
    display: none;
}


/* =====================================================
   FULLSCREEN PROJECT VIEWER
===================================================== */

.portfolio-viewer {
    position: fixed;
    inset: 0;

    background: rgba(0,0,0,0.96);

    z-index: 1600000;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 0.35s ease;
}


.portfolio-viewer.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


.portfolio-viewer-image {
    width: min(82vw, 1450px);
    height: 78vh;

    display: flex;
    align-items: center;
    justify-content: center;
}


.portfolio-viewer-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.portfolio-viewer-info {
    position: absolute;

    left: 6vw;
    bottom: 38px;
}


.portfolio-viewer-info span {
    color: #d4af37;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 3px;
}


.portfolio-viewer-info h3 {
    margin: 7px 0 0;

    font-size: clamp(25px, 3vw, 50px);
    line-height: 1;

    text-transform: uppercase;
}


.portfolio-viewer-close {
    position: absolute;

    top: 25px;
    right: 30px;

    width: 52px;
    height: 52px;

    background: rgba(255,255,255,0.05);

    border: 1px solid rgba(255,255,255,0.18);

    color: #fff;

    font-size: 30px;

    cursor: pointer;

    z-index: 5;
}


/* =====================================================
   PORTFOLIO MOBILE
===================================================== */

@media (max-width: 768px) {

    .portfolio-spotlight {
        height: 100svh;
    }


    .portfolio-close {
        top: 18px;
        right: 18px;

        width: 46px;
        height: 46px;
    }


    .portfolio-header {
        padding:
            100px
            22px
            35px;
    }


    .portfolio-kicker {
        font-size: 10px;
        letter-spacing: 3px;
    }


    .portfolio-header h2 {
        font-size: clamp(52px, 17vw, 82px);

        line-height: 0.84;

        letter-spacing: -3px;
    }


    .portfolio-header p {
        font-size: 15px;

        margin-top: 25px;
    }


    .portfolio-filters {
        padding:
            0
            22px
            35px;

        gap: 8px;
    }


    .portfolio-filter {
        padding: 10px 13px;

        font-size: 9px;
    }


    .portfolio-grid {
        display: block;

        padding:
            0
            14px
            60px;
    }


    .portfolio-card,
    .portfolio-card-large,
    .portfolio-card-wide,
    .portfolio-card-tall {
        width: 100%;
        height: 62vw;

        margin-bottom: 12px;

        display: block;
    }


    .portfolio-card-large {
        height: 78vw;
    }


    .portfolio-card-tall {
        height: 100vw;
    }


    .portfolio-card-overlay {
        opacity: 1;

        padding: 20px;

        background:
            linear-gradient(
                to top,
                rgba(0,0,0,0.78),
                rgba(0,0,0,0) 62%
            );
    }


    .portfolio-card-overlay h3 {
        font-size: 24px;
    }


    .portfolio-viewer-image {
        width: 100vw;
        height: 78svh;
    }


    .portfolio-viewer-info {
        left: 20px;
        bottom: 30px;
    }

}

/* =====================================================
   AV TESTIMONIALS EXPERIENCE
===================================================== */

.testimonials-spotlight {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100vh;

    overflow-y: auto;
    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(212,175,55,0.10),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #050505 0%,
            #0b0b0b 55%,
            #111 100%
        );

    color: #fff;

    z-index: 1500000;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;
}


.testimonials-spotlight.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* CLOSE BUTTON */

.testimonials-close {
    position: fixed;

    top: 28px;
    right: 30px;

    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0,0,0,0.55);

    border: 1px solid rgba(255,255,255,0.18);

    color: #fff;

    font-size: 30px;

    cursor: pointer;

    z-index: 30;

    backdrop-filter: blur(10px);
}


/* HERO */

.testimonials-hero {
    padding:
        70px
        clamp(30px, 7vw, 110px)
        25px;

    max-width: 1000px;
}


.testimonials-kicker {
    display: block;

    margin-bottom: 20px;

    color: #d4af37;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 5px;
}


.testimonials-hero h2 {
    margin: 0;

    font-size: clamp(52px, 6vw, 88px);
    line-height: 0.88;

    letter-spacing: -3px;

    font-weight: 800;
}


.testimonials-hero h2 span {
    color: transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,0.75);
}


.testimonials-rating {
    display: flex;
    align-items: center;

    gap: 18px;

    margin-top: 22px;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 3px;
}


.testimonials-stars {
    color: #d4af37;

    font-size: 24px;

    letter-spacing: 3px;
}


.testimonials-hero p {
    max-width: 650px;

    margin: 16px 0 0;

    color: rgba(255,255,255,0.65);

    font-size: 17px;
    line-height: 1.6;
}


/* GOOGLE REVIEWS AREA */

.google-reviews-shell {
    margin:
        -5px
        clamp(25px, 7vw, 110px)
        100px;

    padding: 30px;

    background: rgba(255,255,255,0.035);

    border:
        1px solid rgba(212,175,55,0.20);

    box-shadow:
        0 30px 80px rgba(0,0,0,0.35);

    backdrop-filter: blur(16px);
}


.google-reviews-label {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    padding: 5px 5px 28px;
}


.google-reviews-label span {
    color: #d4af37;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 3px;
}


.google-reviews-label strong {
    color: #fff;

    font-size: clamp(22px, 2vw, 34px);

    font-weight: 600;
}


/* ACTUAL GOOGLE WIDGET */

.google-widget-holder {
    width: 100%;

    overflow: hidden;

    border-radius: 4px;

    background: #fff;
}


.google-widget-holder iframe {
    display: block;

    width: 100% !important;
    min-width: 100% !important;

    border: 0 !important;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    .testimonials-spotlight {
        height: 100svh;
    }


    .testimonials-close {
        top: 18px;
        right: 18px;

        width: 46px;
        height: 46px;
    }


    .testimonials-hero {
        padding:
            100px
            22px
            35px;
    }


    .testimonials-kicker {
        font-size: 10px;
        letter-spacing: 3px;
    }


    .testimonials-hero h2 {
        font-size: clamp(52px, 16vw, 80px);

        line-height: 0.84;

        letter-spacing: -3px;
    }


    .testimonials-rating {
        flex-direction: column;

        align-items: flex-start;

        gap: 8px;
    }


    .testimonials-stars {
        font-size: 20px;
    }


    .testimonials-hero p {
        font-size: 15px;
    }


    .google-reviews-shell {
        margin:
            0
            14px
            60px;

        padding: 12px;
    }


    .google-reviews-label {
        display: block;

        padding: 12px 8px 22px;
    }


    .google-reviews-label strong {
        display: block;

        margin-top: 8px;

        font-size: 23px;
    }

}

/* ===== GOOGLE REVIEWS — SOFTER LUXURY TONE ===== */

.google-widget-holder {
    background: #161513 !important;
    border-radius: 4px;
    overflow: hidden;
}

.google-widget-holder iframe {
    opacity: 0.88;
    filter:
        brightness(0.90)
        contrast(0.96)
        saturate(0.82)
        sepia(0.04);

    transition: opacity 0.3s ease;
}

.google-widget-holder iframe:hover {
    opacity: 0.94;
}

/* =====================================================
   AV REVIEW SUBMISSION
===================================================== */

.av-review-submit {
    margin-top: 50px;

    padding: clamp(32px, 4vw, 60px);

    display: grid;
    grid-template-columns: 0.8fr 1.2fr;

    gap: clamp(40px, 6vw, 90px);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.035),
            rgba(212,175,55,0.025)
        );

    border-top: 1px solid rgba(212,175,55,0.30);
}


/* LEFT SIDE */

.av-review-submit-heading span {
    display: block;

    margin-bottom: 18px;

    color: #d4af37;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 4px;
}


.av-review-submit-heading h3 {
    margin: 0;

    color: #fff;

    font-size: clamp(38px, 4vw, 62px);
    line-height: 0.92;

    letter-spacing: -2px;
}


.av-review-submit-heading h3 em {
    color: transparent;

    font-style: normal;

    -webkit-text-stroke:
        1px rgba(255,255,255,0.65);
}


.av-review-submit-heading p {
    max-width: 480px;

    margin-top: 26px;

    color: rgba(255,255,255,0.58);

    font-size: 15px;
    line-height: 1.6;
}


/* FORM */

.av-review-form {
    width: 100%;
}


.av-review-fields {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}


.av-review-field {
    display: flex;
    flex-direction: column;

    gap: 9px;
}


.av-review-field-full {
    grid-column: 1 / -1;
}


.av-review-field label,
.av-review-rating > span {
    color: #d4af37;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.5px;
}


.av-review-field input,
.av-review-field textarea {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid rgba(255,255,255,0.14);

    outline: none;

    background: rgba(255,255,255,0.045);

    color: #fff;

    padding: 16px 17px;

    font: inherit;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.av-review-field textarea {
    resize: vertical;

    min-height: 145px;
}


.av-review-field input::placeholder,
.av-review-field textarea::placeholder {
    color: rgba(255,255,255,0.30);
}


.av-review-field input:focus,
.av-review-field textarea:focus {
    border-color: rgba(212,175,55,0.75);

    background: rgba(255,255,255,0.065);

    box-shadow:
        0 0 0 3px rgba(212,175,55,0.06);
}


/* STARS */

.av-review-rating {
    margin: 25px 0;

    display: flex;
    align-items: center;

    gap: 25px;
}


.av-review-stars {
    display: inline-flex;

    flex-direction: row-reverse;

    justify-content: flex-end;
}


.av-review-stars input {
    position: absolute;

    opacity: 0;
    pointer-events: none;
}


.av-review-stars label {
    color: rgba(255,255,255,0.20);

    font-size: 34px;

    cursor: pointer;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}


.av-review-stars label:hover,
.av-review-stars label:hover ~ label,
.av-review-stars input:checked ~ label {
    color: #d4af37;
}


.av-review-stars label:hover {
    transform: translateY(-2px);
}


/* BOTTOM */

.av-review-form-bottom {
    margin-top: 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;
}


.av-review-form-bottom small {
    max-width: 330px;

    color: rgba(255,255,255,0.40);

    font-size: 11px;
    line-height: 1.45;
}


.av-review-form-bottom button {
    min-width: 210px;

    padding: 16px 25px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    border: 1px solid #d4af37;

    background: transparent;

    color: #d4af37;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2.5px;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


.av-review-form-bottom button span {
    font-size: 20px;
}


.av-review-form-bottom button:hover {
    background: #d4af37;

    color: #080808;

    transform: translateY(-2px);
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    .av-review-submit {
        margin-top: 30px;

        padding: 35px 20px;

        display: block;
    }


    .av-review-submit-heading {
        margin-bottom: 38px;
    }


    .av-review-submit-heading h3 {
        font-size: clamp(38px, 12vw, 54px);
    }


    .av-review-fields {
        grid-template-columns: 1fr;
    }


    .av-review-field-full {
        grid-column: auto;
    }


    .av-review-rating {
        align-items: flex-start;

        flex-direction: column;

        gap: 12px;
    }


    .av-review-stars label {
        font-size: 38px;
    }


    .av-review-form-bottom {
        flex-direction: column;

        align-items: stretch;
    }


    .av-review-form-bottom button {
        width: 100%;
    }

}

.av-review-success {
    width: 100%;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    gap: 18px;

    margin-top: 24px;
    padding: 18px 22px;

    border: 1px solid rgba(212,175,55,0.45);
    background: rgba(212,175,55,0.06);

    color: #fff;
}

.av-review-success[hidden] {
    display: none !important;
}

.av-review-success > span {
    color: #d4af37;

    font-size: 28px;
    line-height: 1;
}

.av-review-success strong {
    display: block;

    color: #d4af37;

    font-size: 11px;
    letter-spacing: 3px;
}

.av-review-success p {
    margin: 5px 0 0;

    color: rgba(255,255,255,0.72);

    font-size: 13px;
}

/* =====================================================
   APPROVED AV CLIENT REVIEWS
===================================================== */

.av-direct-reviews {
    margin: 58px 0 10px;
    padding: clamp(34px, 4vw, 60px);

    border-top: 1px solid rgba(212,175,55,0.32);
    border-bottom: 1px solid rgba(212,175,55,0.18);

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(212,175,55,0.08),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(255,255,255,0.025),
            rgba(255,255,255,0.008)
        );
}


/* HEADER */

.av-direct-reviews-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 30px;

    margin-bottom: 38px;
}


.av-direct-reviews-head > div > span {
    display: block;

    margin-bottom: 14px;

    color: #d4af37;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 4px;
}


.av-direct-reviews-head h3 {
    margin: 0;

    color: #fff;

    font-size: clamp(38px, 4vw, 62px);
    line-height: 0.92;

    letter-spacing: -2px;
}


.av-direct-reviews-head h3 em {
    color: transparent;

    font-style: normal;

    -webkit-text-stroke:
        1px rgba(255,255,255,0.55);
}


.av-direct-count {
    padding: 12px 16px;

    border: 1px solid rgba(212,175,55,0.28);

    color: rgba(255,255,255,0.48);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;

    white-space: nowrap;
}


/* GRID */

.av-direct-review-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}


/* CARD */

.av-direct-review-card {
    position: relative;

    min-height: 285px;

    padding: 27px;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.012)
        );

    border: 1px solid rgba(255,255,255,0.09);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}


.av-direct-review-card:hover {
    transform: translateY(-4px);

    border-color: rgba(212,175,55,0.40);

    background:
        linear-gradient(
            145deg,
            rgba(212,175,55,0.055),
            rgba(255,255,255,0.015)
        );
}


/* TOP */

.av-direct-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.av-direct-stars {
    color: #d4af37;

    font-size: 18px;

    letter-spacing: 2px;
}


.av-direct-stars span {
    margin-left: 8px;

    color: rgba(255,255,255,0.38);

    font-size: 10px;

    letter-spacing: 1px;
}


.av-direct-badge {
    color: rgba(255,255,255,0.35);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 2px;
}


/* REVIEW */

.av-direct-review-card blockquote {
    flex: 1;

    margin: 32px 0;

    color: rgba(255,255,255,0.82);

    font-size: clamp(17px, 1.35vw, 21px);

    line-height: 1.55;

    font-style: normal;
}


/* FOOTER */

.av-direct-review-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding-top: 20px;

    border-top: 1px solid rgba(255,255,255,0.08);
}


.av-direct-review-footer strong {
    display: block;

    margin-bottom: 6px;

    color: #fff;

    font-size: 13px;

    letter-spacing: 0.5px;
}


.av-direct-review-footer span {
    display: block;

    color: rgba(255,255,255,0.38);

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1.4px;
}


.av-direct-mark {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 38px;

    border: 1px solid rgba(212,175,55,0.4);

    color: #d4af37;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    .av-direct-reviews {
        margin-top: 35px;

        padding: 35px 20px;
    }


    .av-direct-reviews-head {
        display: block;
    }


    .av-direct-count {
        display: inline-block;

        margin-top: 22px;
    }


    .av-direct-review-grid {
        grid-template-columns: 1fr;
    }


    .av-direct-review-card {
        min-height: 0;

        padding: 22px;
    }


    .av-direct-card-top {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;
    }


    .av-direct-review-card blockquote {
        margin: 25px 0;

        font-size: 17px;
    }

}

/* =====================================================
   ABOUT US — AV GENERAL CONSTRUCTION
===================================================== */

.service-spotlight.av-about-spotlight {
    grid-template-columns: 1fr !important;

    padding: 0 !important;

    overflow-y: auto;

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(212,175,55,0.09),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #050505 0%,
            #0b0b0b 45%,
            #12100b 100%
        ) !important;
}


.av-about-inner {
    width: min(1450px, calc(100% - 100px));

    margin: 0 auto;

    padding:
        clamp(90px, 9vh, 135px)
        0
        70px;
}


/* =====================================================
   HERO
===================================================== */

.av-about-hero {
    display: grid;

    grid-template-columns:
        minmax(430px, 0.95fr)
        minmax(300px, 0.7fr);

    align-items: end;

    gap: clamp(60px, 10vw, 170px);

    padding-bottom: 70px;

    border-bottom:
        1px solid rgba(212,175,55,0.20);
}


.av-about-kicker {
    grid-column: 1 / -1;

    color: #d4af37;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 5px;
}


.av-about-hero h2 {
    margin: 0;

    color: #f1eee6;

    font-size:
        clamp(58px, 6.5vw, 108px);

    line-height: 0.84;

    font-weight: 800;

    letter-spacing: -4px;

    text-shadow:
        0 2px 18px rgba(0,0,0,0.35);
}


.av-about-hero h2 em {
    color: transparent;

    font-style: normal;

    -webkit-text-stroke:
        1.3px rgba(212,175,55,0.72);

    text-shadow:
        0 0 8px rgba(212,175,55,0.10),
        0 0 18px rgba(212,175,55,0.06);
}

.av-about-hero > p {
    max-width: 560px;

    margin: 0 0 10px;

    color:
        rgba(255,255,255,0.62);

    font-size:
        clamp(16px, 1.25vw, 20px);

    line-height: 1.75;
}


/* =====================================================
   SERVICE GRID
===================================================== */

.av-about-services {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    margin-top: 0;
}

/* ABOUT - MISSION / VISION / STANDARD */
.av-about-services.av-about-values {
    grid-template-columns: repeat(3, 1fr);
}

.av-about-service {
    min-height: 245px;

    padding:
        38px 32px;

    border-right:
        1px solid rgba(255,255,255,0.08);

    border-bottom:
        1px solid rgba(255,255,255,0.08);

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.av-about-service:first-child {
    border-left:
        1px solid rgba(255,255,255,0.08);
}


.av-about-service:hover {
    background:
        rgba(212,175,55,0.045);

    transform:
        translateY(-4px);
}


.av-about-service > span {
    display: block;

    margin-bottom: 55px;

    color: #d4af37;

    font-size: 10px;

    letter-spacing: 3px;
}


.av-about-service h3 {
    margin:
        0 0 15px;

    color: #fff;

    font-size:
        clamp(17px, 1.5vw, 23px);

    letter-spacing: 0.5px;
}


.av-about-service p {
    margin: 0;

    color:
        rgba(255,255,255,0.45);

    font-size: 13px;

    line-height: 1.7;
}


/* =====================================================
   BOTTOM STORY
===================================================== */

.av-about-bottom {
    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap: clamp(60px, 10vw, 160px);

    padding:
        95px 0 85px;
}


.av-about-bottom-title > span {
    display: block;

    margin-bottom: 22px;

    color: #d4af37;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 4px;
}


.av-about-bottom-title h3 {
    margin: 0;

    color: #f1eee6;

    font-size:
        clamp(48px, 5vw, 82px);

    line-height: 0.9;

    letter-spacing: -3px;

    text-shadow:
        0 2px 18px rgba(0,0,0,0.35);
}

.av-about-bottom-title h3 em {
    color: transparent;

    font-style: normal;

    -webkit-text-stroke:
        1.3px rgba(212,175,55,0.72);

    text-shadow:
        0 0 8px rgba(212,175,55,0.10),
        0 0 18px rgba(212,175,55,0.06);
}

.av-about-bottom-copy p {
    max-width: 650px;

    margin:
        0 0 24px;

    color:
        rgba(255,255,255,0.60);

    font-size: 15px;

    line-height: 1.8;
}


/* =====================================================
   CTA
===================================================== */

.av-about-contact-btn {
    width:
        min(350px, 100%);

    margin-top: 18px;

    padding:
        18px 22px;

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    border:
        1px solid #d4af37;

    background:
        transparent;

    color: #d4af37;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


.av-about-contact-btn span {
    font-size: 20px;
}


.av-about-contact-btn:hover {
    background: #d4af37;

    color: #080808;

    transform:
        translateY(-2px);
}


/* =====================================================
   BOTTOM WORDMARK
===================================================== */

.av-about-footer-line {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 24px;

    padding-top: 35px;

    border-top:
        1px solid rgba(212,175,55,0.18);

    color:
        rgba(212,175,55,0.72);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 5px;

    text-shadow:
        0 0 8px rgba(212,175,55,0.12),
        0 0 16px rgba(212,175,55,0.08);
}


.av-about-footer-line i {
    display: block;

    width: 35px;

    height: 1px;

    background:
        rgba(212,175,55,0.45);
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    .av-about-inner {
        width:
            calc(100% - 36px);

        padding:
            95px 0 45px;
    }

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

    .av-about-hero {
        display: block;

        padding-bottom:
            45px;
    }


    .av-about-kicker {
        margin-bottom:
            25px;
    }


    .av-about-hero h2 {
        font-size:
            clamp(49px, 15vw, 72px);

        letter-spacing:
            -2px;
    }


    .av-about-hero > p {
        margin-top:
            35px;

        font-size:
            15px;
    }


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


    .av-about-service {
        min-height: 0;

        padding:
            28px 5px;

        border-right: 0;

        border-left: 0 !important;
    }


    .av-about-service > span {
        margin-bottom:
            22px;
    }


    .av-about-bottom {
        grid-template-columns:
            1fr;

        gap:
            40px;

        padding:
            65px 0;
    }


    .av-about-bottom-title h3 {
        font-size:
            clamp(44px, 13vw, 65px);
    }


    .av-about-contact-btn {
        width: 100%;
    }


    .av-about-footer-line {
        gap:
            10px;

        letter-spacing:
            2px;

        font-size:
            8px;
    }


    .av-about-footer-line i {
        width:
            15px;
    }

}

/* =========================================================
   ABOUT US - COMPANY INFO FOOTER
========================================================= */

.av-about-company-footer {
    border-top: 1px solid rgba(212,175,55,0.18);
    margin-top: 55px;
    padding: 55px 0 28px;
}

.av-about-company-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.15fr;
    gap: 35px;
    align-items: start;
}

.av-about-company-item span {
    display: block;

    color: #d4af37;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 12px;
}

.av-about-company-item h4 {
    margin: 0 0 8px;

    color: #f1eee6;

    font-size: 17px;
    font-weight: 700;
}

.av-about-company-item p {
    margin: 0;

    color: rgba(255,255,255,0.60);

    font-size: 13px;
    line-height: 1.7;
}

.av-about-payments {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 12px;
}

.av-about-payment {
    border: 1px solid rgba(212,175,55,0.30);

    padding: 7px 10px;

    color: rgba(255,255,255,0.72);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1px;
}

.av-about-company-brand {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.av-about-company-brand img {
    width: 150px;
    max-width: 100%;
    height: auto;
}

.av-about-copyright {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;

    margin-top: 45px;
    padding-top: 10px;

    border-top: none;

    color: rgba(255,255,255,0.58);

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 1.5px;

    text-align: center;
}

.av-about-copyright strong {
    color: rgba(212,175,55,0.70);

    font-weight: 700;

    letter-spacing: 3px;
}


/* ABOUT COMPANY FOOTER - MOBILE */

@media (max-width: 768px) {

    .av-about-company-footer {
        margin-top: 35px;
        padding: 38px 0 24px;
    }

    .av-about-company-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .av-about-company-brand {
        justify-content: flex-start;

        padding-top: 10px;
    }

    .av-about-company-brand img {
        width: 125px;
    }

    .av-about-copyright {
        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

        margin-top: 30px;
    }
}

/* =====================================================
   CONTACT US
===================================================== */

.service-spotlight.av-contact-spotlight {
    grid-template-columns: 1fr !important;

    padding: 0 !important;

    overflow-y: auto;

    background:
        radial-gradient(
            circle at 78% 15%,
            rgba(212,175,55,0.08),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #050505 0%,
            #0a0a09 48%,
            #151109 100%
        ) !important;
}


.av-contact-inner {
    width: min(1450px, calc(100% - 100px));

    margin: 0 auto;

    padding:
        clamp(100px, 10vh, 145px)
        0
        65px;
}


/* =====================================================
   TOP
===================================================== */

.av-contact-intro {
    display: grid;

    grid-template-columns:
        1fr 0.75fr;

    gap: clamp(60px, 10vw, 170px);

    align-items: end;

    padding-bottom: 75px;

    border-bottom:
        1px solid rgba(212,175,55,0.20);
}


.av-contact-kicker {
    grid-column: 1 / -1;

    color: #d4af37;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 5px;
}


.av-contact-intro h2 {
    margin: 0;

    color: #f1eee6;

    font-size:
        clamp(62px, 7vw, 115px);

    line-height: 0.84;

    letter-spacing: -4px;
}


.av-contact-intro h2 em {
    color: transparent;

    font-style: normal;

    -webkit-text-stroke:
        1.3px rgba(212,175,55,0.72);

    text-shadow:
        0 0 8px rgba(212,175,55,0.10);
}


.av-contact-intro p {
    margin: 0 0 8px;

    max-width: 580px;

    color:
        rgba(255,255,255,0.60);

    font-size:
        clamp(15px, 1.25vw, 19px);

    line-height: 1.8;
}


/* =====================================================
   CONTACT CARDS
===================================================== */

.av-contact-details {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);
}


.av-contact-card {
    min-height: 260px;

    padding: 42px;

    border-right:
        1px solid rgba(255,255,255,0.08);

    border-bottom:
        1px solid rgba(255,255,255,0.08);

    transition:
        background .3s ease,
        transform .3s ease;
}


.av-contact-card:nth-child(odd) {
    border-left:
        1px solid rgba(255,255,255,0.08);
}


.av-contact-card:hover {
    background:
        rgba(212,175,55,0.035);

    transform:
        translateY(-3px);
}


.av-contact-card > span {
    display: block;

    margin-bottom: 45px;

    color: #d4af37;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 3px;
}


.av-contact-card h3 {
    margin: 0 0 20px;

    color: #f1eee6;

    font-size:
        clamp(20px, 2vw, 30px);
}


.av-contact-card a {
    display: block;

    width: fit-content;

    margin-bottom: 10px;

    color:
        rgba(255,255,255,0.65);

    font-size:
        clamp(15px, 1.3vw, 19px);

    text-decoration: none;

    transition:
        color .2s ease;
}


.av-contact-card a:hover {
    color: #d4af37;
}


.av-contact-card p {
    margin: 0;

    color:
        rgba(255,255,255,0.52);

    font-size: 15px;

    line-height: 1.8;
}


/* =====================================================
   CTA
===================================================== */

.av-contact-cta {
    display: flex;

    align-items: flex-end;

    justify-content:
        space-between;

    gap: 60px;

    padding:
        90px 0;
}


.av-contact-cta > div > span {
    display: block;

    margin-bottom: 18px;

    color: #d4af37;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 4px;
}


.av-contact-cta h3 {
    margin: 0;

    color: #f1eee6;

    font-size:
        clamp(42px, 5vw, 76px);

    line-height: .9;

    letter-spacing: -3px;
}


.av-contact-cta h3 em {
    color: transparent;

    font-style: normal;

    -webkit-text-stroke:
        1.2px rgba(212,175,55,0.72);
}


.av-contact-estimate {
    width:
        min(380px, 100%);

    padding:
        20px 24px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    flex-shrink: 0;

    border:
        1px solid #d4af37;

    color: #d4af37;

    text-decoration: none;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 3px;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.av-contact-estimate > span {
    font-size: 20px;
}


.av-contact-estimate:hover {
    background: #d4af37;

    color: #080808;

    transform:
        translateY(-3px);
}


/* =====================================================
   FOOTER
===================================================== */

.av-contact-footer {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 24px;

    padding-top: 35px;

    border-top:
        1px solid rgba(212,175,55,0.18);

    color:
        rgba(212,175,55,0.55);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 5px;
}


.av-contact-footer i {
    width: 35px;
    height: 1px;

    background:
        rgba(212,175,55,0.38);
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    .av-contact-inner {
        width:
            calc(100% - 36px);

        padding:
            95px 0 45px;
    }


    .av-contact-intro {
        display: block;

        padding-bottom: 50px;
    }


    .av-contact-kicker {
        display: block;

        margin-bottom: 25px;
    }


    .av-contact-intro h2 {
        font-size:
            clamp(52px, 15vw, 75px);

        letter-spacing: -2px;
    }


    .av-contact-intro p {
        margin-top: 35px;

        font-size: 15px;
    }


    .av-contact-details {
        grid-template-columns: 1fr;
    }


    .av-contact-card {
        min-height: 0;

        padding:
            30px 5px;

        border-left: 0 !important;

        border-right: 0;
    }


    .av-contact-card > span {
        margin-bottom: 22px;
    }


    .av-contact-cta {
        display: block;

        padding:
            65px 0;
    }


    .av-contact-estimate {
        margin-top: 40px;

        width: 100%;
    }


    .av-contact-footer {
        gap: 10px;

        font-size: 8px;

        letter-spacing: 2px;
    }


    .av-contact-footer i {
        width: 15px;
    }

}

/* =====================================================
   ABOUT / CONTACT / TESTIMONIALS — TOP LOGO
===================================================== */

#aboutSpotlight,
#contactSpotlight,
#testimonialsSpotlight {
    position: fixed;
}

.av-section-logo {
    position: absolute;

    top: 95px;
    right: 140px;
    left: auto;

    transform: none;

    width: 170px;

    z-index: 25;

    pointer-events: none;

    opacity: 0.96;
}

.av-section-logo img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(0 0 10px rgba(212,175,55,0.16))
        drop-shadow(0 8px 18px rgba(0,0,0,0.45));
}


/* MOBILE */

@media (max-width: 768px) {

    .av-section-logo {
        top: 20px;
        right: 70px;
        left: auto;

        transform: none;

        width: 90px;
    }

}

/* =====================================================
   REMODELING & ADUs — MOBILE FINAL LAYOUT
===================================================== */

@media (max-width: 768px) {

    /* MAIN PANEL */
    #remodelSpotlight {
        display: block !important;

        padding: 0 !important;
        margin: 0 !important;

        overflow-y: auto !important;

        align-items: initial !important;
        justify-content: flex-start !important;
    }


    /* =========================================
       CLOSE X — STAYS TOP RIGHT
    ========================================= */

    #remodelSpotlight .spotlight-close {
        position: fixed !important;

        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        bottom: auto !important;

        margin: 0 !important;

        width: 50px !important;
        height: 50px !important;

        z-index: 99999 !important;
    }


    /* =========================================
       MAIN TEXT
    ========================================= */

    #remodelSpotlight .spotlight-left {
        width: 100% !important;

        padding:
            64px
            23px
            30px !important;

        margin: 0 !important;

        min-height: 0 !important;

        transform: none !important;
    }


    #remodelSpotlight .spotlight-kicker {
        margin-top: 0 !important;
    }


    /* =========================================
       MOBILE IMAGE PREVIEW
    ========================================= */

    #remodelSpotlight .spotlight-right {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        height: auto !important;

        margin:
            28px
            0
            22px !important;

        padding: 0 !important;

        z-index: 1 !important;

        border:
            1px solid rgba(212,175,55,0.38) !important;

        background:
            #050505 !important;

        box-shadow:
            0 14px 35px
            rgba(0,0,0,0.45) !important;
    }


    #remodelSpotlight .spotlight-image-wrap {
        width: 100% !important;
        height: auto !important;

        min-height: 0 !important;

        overflow: visible !important;
    }


    #remodelSpotlight .spotlight-image {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        max-width: 100% !important;
        max-height: none !important;

        object-fit: contain !important;
        object-position: center !important;
    }


    /* =========================================
       SERVICE BUTTONS
    ========================================= */

    #remodelSpotlight .spotlight-services {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        column-gap: 28px !important;
        row-gap: 0 !important;

        width: 100% !important;

        margin:
            0
            0
            26px !important;

        position: relative !important;

        z-index: 5 !important;
    }


    #remodelSpotlight .spotlight-services button {
        width: 100% !important;

        min-height: 55px !important;

        position: relative !important;

        z-index: 6 !important;
    }


    /* =========================================
       REQUEST ESTIMATE
    ========================================= */

    #remodelSpotlight .spotlight-actions {
        position: relative !important;

        z-index: 5 !important;

        width: 100% !important;

        margin-top: 18px !important;
    }

}

/* =====================================================
   REMODELING MOBILE — RESTORE IMAGE PREVIEW
===================================================== */

@media (max-width: 768px) {

    #remodelSpotlight .spotlight-right {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: relative !important;

        width: 100% !important;
        height: auto !important;

        min-height: 210px !important;

        margin: 28px 0 26px !important;

        overflow: hidden !important;

        background: #080808 !important;

        border: 1px solid rgba(212,175,55,0.38) !important;
    }


    #remodelSpotlight .spotlight-image-wrap {
        display: block !important;

        position: relative !important;

        width: 100% !important;
        height: 210px !important;

        min-height: 210px !important;

        overflow: hidden !important;
    }


    #remodelSpotlight .spotlight-image {
        display: block !important;

        position: relative !important;
        inset: auto !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        transform: none !important;

        width: 100% !important;
        height: 210px !important;

        min-height: 210px !important;

        opacity: 1 !important;
        visibility: visible !important;

        object-fit: contain !important;
        object-position: center !important;

        background: #050505 !important;
    }

}

/* =====================================================
   ARCHITECTURE & PLANNING — MOBILE FINAL LAYOUT
===================================================== */

@media (max-width: 768px) {

    /* MAIN PANEL */
    #architectureSpotlight {
        display: block !important;

        padding: 0 !important;
        margin: 0 !important;

        overflow-y: auto !important;

        align-items: initial !important;
        justify-content: flex-start !important;
    }


    /* CLOSE X */
    #architectureSpotlight .spotlight-close {
        position: fixed !important;

        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        bottom: auto !important;

        margin: 0 !important;

        width: 50px !important;
        height: 50px !important;

        z-index: 99999 !important;
    }


    /* TEXT AREA */
    #architectureSpotlight .spotlight-left {
        width: 100% !important;

        padding:
            62px
            20px
            30px !important;

        margin: 0 !important;

        min-height: 0 !important;

        transform: none !important;
    }


    #architectureSpotlight .spotlight-kicker {
        margin-top: 0 !important;
        margin-bottom: 22px !important;
    }


    /* HEADLINE */
    #architectureSpotlight .spotlight-left h2 {
        margin-top: 0 !important;

        font-size:
            clamp(46px, 14vw, 67px) !important;

        line-height: 0.90 !important;

        letter-spacing: -2px !important;
    }


    /* DESCRIPTION */
    #architectureSpotlight .spotlight-description {
        width: 100% !important;
        max-width: none !important;

        margin:
            34px
            0
            28px !important;

        font-size: 16px !important;
        line-height: 1.55 !important;
    }


    /* =========================================
       BLUEPRINT IMAGE
    ========================================= */

    #architectureSpotlight .spotlight-right {
        display: block !important;

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        height: auto !important;

        min-height: 210px !important;

        margin:
            28px
            0
            30px !important;

        padding: 0 !important;

        overflow: hidden !important;

        z-index: 1 !important;

        background: #050505 !important;

        border:
            1px solid rgba(212,175,55,0.35) !important;

        box-shadow:
            0 14px 35px rgba(0,0,0,0.45) !important;
    }


    #architectureSpotlight .spotlight-image-wrap {
        display: block !important;

        position: relative !important;

        width: 100% !important;
        height: auto !important;

        min-height: 210px !important;

        overflow: hidden !important;
    }


    #architectureSpotlight .spotlight-image {
        display: block !important;

        position: relative !important;

        inset: auto !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        transform: none !important;

        width: 100% !important;
        height: auto !important;

        min-height: 0 !important;
        max-height: none !important;

        object-fit: contain !important;
        object-position: center !important;

        opacity: 1 !important;
        visibility: visible !important;

        background: #050505 !important;
    }


    /* =========================================
       SERVICES
    ========================================= */

    #architectureSpotlight .architecture-services-list {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        column-gap: 22px !important;

        width: 100% !important;

        margin:
            0
            0
            28px !important;
    }


    #architectureSpotlight .architecture-services-list > div {
        min-height: 58px !important;

        display: flex !important;
        align-items: center !important;

        padding:
            12px
            0 !important;

        font-size: 12px !important;
        line-height: 1.2 !important;
    }


    /* REQUEST PLAN ESTIMATE */
    #architectureSpotlight .spotlight-actions {
        width: 100% !important;

        margin:
            20px
            0
            10px !important;
    }


    #architectureSpotlight .spotlight-btn {
        width: 100% !important;
    }

}

/* =====================================================
   ARCHITECTURE MOBILE — WIDTH / IMAGE OVERRIDE
   KEEP THIS AT THE VERY BOTTOM OF STYLE.CSS
===================================================== */

@media (max-width: 768px) {

    /* Give the whole content area the phone width */
    body #architectureSpotlight .spotlight-left {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

        box-sizing: border-box !important;

        padding:
            62px
            18px
            30px !important;
    }


    /* DESCRIPTION — STOP THE SKINNY COLUMN */
    body #architectureSpotlight .spotlight-description {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin:
            32px
            0
            32px !important;

        padding: 0 !important;

        font-size: 16px !important;
        line-height: 1.6 !important;
    }


    /* IMAGE OUTER BOX */
    body #architectureSpotlight .spotlight-right {
        display: block !important;

        position: relative !important;

        width: 100% !important;
        max-width: none !important;

        height: auto !important;
        min-height: 0 !important;

        margin:
            28px
            0
            32px !important;

        padding: 0 !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        border:
            1px solid rgba(212,175,55,0.38) !important;
    }


    /* IMAGE WRAPPER */
    body #architectureSpotlight .spotlight-image-wrap {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        position: relative !important;

        overflow: hidden !important;
    }


    /* ACTUAL BLUEPRINT */
    body #architectureSpotlight #architectureImage {
        display: block !important;

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;

        margin: 0 !important;

        transform: none !important;

        object-fit: contain !important;
        object-position: center !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /* SERVICES — CLEAN 2 COLUMN GRID */
    body #architectureSpotlight .architecture-services-list {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        width: 100% !important;

        column-gap: 24px !important;
        row-gap: 0 !important;

        margin:
            0
            0
            26px !important;
    }


    body #architectureSpotlight .architecture-services-list > div {
        width: 100% !important;
        max-width: none !important;

        box-sizing: border-box !important;

        min-height: 58px !important;

        padding:
            13px
            0 !important;
    }


    /* ESTIMATE BUTTON — FULL WIDTH */
    body #architectureSpotlight .spotlight-actions {
        width: 100% !important;
        max-width: none !important;
    }

    body #architectureSpotlight .spotlight-actions a {
        width: 100% !important;
        max-width: none !important;

        box-sizing: border-box !important;

        text-align: center !important;
    }

}

/* =====================================================
   ARCHITECTURE MOBILE — FINAL WIDTH FIX
   KEEP AT ABSOLUTE BOTTOM OF STYLE.CSS
===================================================== */

@media (max-width: 768px) {

    /* ENTIRE LEFT CONTENT AREA */
    body #architectureSpotlight .spotlight-left {
        display: block !important;

        width: calc(100vw - 36px) !important;
        max-width: calc(100vw - 36px) !important;

        margin: 0 auto !important;

        padding:
            62px
            0
            30px !important;

        box-sizing: border-box !important;
    }


    /* REMOVE OLD WIDTH LIMITS FROM CHILDREN */
    body #architectureSpotlight .spotlight-left > * {
        max-width: none !important;
    }


    /* DESCRIPTION */
    body #architectureSpotlight .spotlight-description,
    body #architectureSpotlight .spotlight-left p {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin:
            34px
            0
            34px !important;

        padding: 0 !important;

        font-size: 16px !important;
        line-height: 1.6 !important;

        box-sizing: border-box !important;
    }


    /* BLUEPRINT OUTER CONTAINER */
    body #architectureSpotlight .spotlight-right {
        display: block !important;

        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin:
            30px
            0
            34px !important;

        padding: 0 !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        border:
            1px solid rgba(212,175,55,0.40) !important;

        background: #050505 !important;
    }


    /* BLUEPRINT WRAPPER */
    body #architectureSpotlight .spotlight-image-wrap {
        display: block !important;

        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }


    /* ACTUAL BLUEPRINT IMAGE */
    body #architectureSpotlight #architectureImage,
    body #architectureSpotlight .spotlight-image {
        display: block !important;

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        max-height: none !important;

        margin: 0 !important;

        transform: none !important;

        object-fit: contain !important;
        object-position: center !important;

        visibility: visible !important;
        opacity: 1 !important;
    }


    /* SERVICES */
    body #architectureSpotlight .architecture-services-list {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;

        column-gap: 24px !important;
        row-gap: 0 !important;

        margin:
            0
            0
            30px !important;

        box-sizing: border-box !important;
    }


    body #architectureSpotlight .architecture-services-list > div {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        min-height: 62px !important;

        padding:
            14px
            0 !important;

        box-sizing: border-box !important;

        font-size: 11px !important;
        line-height: 1.25 !important;

        overflow-wrap: anywhere !important;
    }


    /* REQUEST PLAN ESTIMATE */
    body #architectureSpotlight .spotlight-actions {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin:
            18px
            0
            10px !important;
    }


    body #architectureSpotlight .spotlight-actions a,
    body #architectureSpotlight .spotlight-btn {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: 56px !important;

        box-sizing: border-box !important;

        text-align: center !important;
    }


    /* X — KEEP IT TOP RIGHT */
    body #architectureSpotlight .spotlight-close {
        position: fixed !important;

        top: 12px !important;
        right: 12px !important;

        width: 50px !important;
        height: 50px !important;

        z-index: 999999 !important;
    }

}

/* =========================================
   ARCHITECTURE MOBILE — background style
   paste at VERY BOTTOM of style.css
========================================= */
@media (max-width: 768px) {

    /* keep whole section clean */
    body #architectureSpotlight .spotlight-left {
        position: relative !important;
    }

    /* make the blueprint image look like a background band */
    body #architectureSpotlight .spotlight-right {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 170px !important;

        margin: 24px 0 28px !important;
        padding: 0 !important;

        overflow: hidden !important;
        border: 1px solid rgba(212,175,55,0.35) !important;
        background: #050505 !important;
        border-radius: 0 !important;
    }

    body #architectureSpotlight .spotlight-image-wrap {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body #architectureSpotlight #architectureImage,
    body #architectureSpotlight .spotlight-image {
        width: 100% !important;
        height: 100% !important;
        display: block !important;

        object-fit: cover !important;
        object-position: right center !important;

        margin: 0 !important;
        transform: none !important;
    }

    /* make the feature list breathe better */
    body #architectureSpotlight .architecture-services-list {
        margin: 6px 0 24px !important;
    }

    /* center the button better */
    body #architectureSpotlight .spotlight-actions {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        width: 100% !important;
        margin: 24px 0 10px !important;
    }

    body #architectureSpotlight .spotlight-actions a,
    body #architectureSpotlight .spotlight-btn {
        width: 88% !important;
        max-width: 320px !important;
        min-height: 56px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 auto !important;
        text-align: center !important;
    }
}

/* =====================================================
   CONTACT NAMES BESIDE PHONE NUMBERS
===================================================== */

.av-phone-person {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 10px;
}

.av-phone-person a {
    margin: 0 !important;
}

.av-phone-person span {
    color: #d4af37;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


/* FREE ESTIMATE CONTACT ROWS */

.estimate-contact-person {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.estimate-contact-person a {
    color: #fff;
    text-decoration: none;
}

.estimate-contact-person span {
    color: #d4af37;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}


/* MOBILE */

@media (max-width: 768px) {

    .av-phone-person {
        gap: 14px;
        flex-wrap: wrap;
    }

    .av-phone-person span,
    .estimate-contact-person span {
        font-size: 9px;
    }

}

/* =====================================================
   FREE ESTIMATE — CONTACT PEOPLE
===================================================== */

.estimate-person-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 7px;

    width: 100%;

    padding: 14px 0;

    border-bottom:
        1px solid rgba(255,255,255,0.12);
}

.estimate-person-name {
    color: #d4af37;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}

.estimate-person-contact a {
    color: #f1eee6;

    font-size: 14px;
    font-weight: 500;

    text-decoration: none;

    white-space: nowrap;
}

.estimate-person-contact a:hover {
    color: #d4af37;
}

/* =====================================================
   FREE ESTIMATE — ALIGN CONTACT VALUES
===================================================== */

.estimate-contact-block .estimate-contact-item {
    display: grid !important;

    grid-template-columns:
        170px 1fr !important;

    column-gap: 24px !important;

    align-items: center !important;

    width: 100% !important;
}


/* PHONE NUMBER CONTAINER */
.estimate-contact-block .estimate-contact-person {
    width: 100% !important;

    display: block !important;

    margin: 0 !important;
}


/* PHONE NUMBERS */
.estimate-contact-block .estimate-contact-person a {
    display: block !important;

    margin: 0 !important;

    text-align: left !important;

    white-space: nowrap !important;
}

/* =====================================================
   FREE ESTIMATE — RIGHT ALIGN PHONE NUMBERS
===================================================== */

.estimate-contact-block .estimate-contact-person {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;

    width: 100% !important;
}

.estimate-contact-block .estimate-contact-person a {
    margin-left: auto !important;
    margin-right: 0 !important;

    text-align: right !important;
}

/* =====================================================
   GLOBAL HEADER — ABOVE ALL INTERNAL PAGES
===================================================== */

.av-top-nav {
    z-index: 9999999 !important;
}


/* Permanent AV logo — desktop */
@media (min-width: 769px) {

    .av-top-nav .mobile-nav-logo {
        display: block !important;

        position: fixed !important;

        top: 30px !important;
        left: 48px !important;

        width: 112px !important;
        height: auto !important;

        z-index: 10000000 !important;

        cursor: pointer !important;
    }

    .av-top-nav .mobile-nav-logo img {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        object-fit: contain !important;

        filter:
            drop-shadow(0 5px 10px rgba(0,0,0,0.45))
            drop-shadow(0 0 9px rgba(212,175,55,0.15));
    }


    /*
       Hide old duplicate logo inside the house hero.
       Header logo now replaces it.
    */
    .final-slide .home-logo-wrap {
        visibility: hidden !important;
    }
}

/* =====================================================
   GLOBAL AV LOGO — FINAL DESKTOP POSITION
===================================================== */

@media (min-width: 769px) {

    .av-top-nav .mobile-nav-logo {
        display: block !important;

        position: fixed !important;

        /* compensate for centered navigation container */
        left: calc(50% - 50vw + 48px) !important;
        top: 28px !important;

        width: 112px !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;

        z-index: 10000000 !important;

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;
        cursor: pointer !important;
    }


    .av-top-nav .mobile-nav-logo img {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;

        object-fit: contain !important;
    }


    /*
       Once we're INSIDE the house,
       hide the original duplicate logo.
       This preserves it during the intro/door sequence.
    */
    .final-slide.entering-house .door-logo-wrap {
        visibility: hidden !important;
        opacity: 0 !important;
    }

}

/* =====================================================
   DESKTOP LOGO FOR INTERNAL PAGES
===================================================== */

.desktop-page-logo {
    display: none;
}

@media (min-width: 769px) {

    /* Kill the extra logo that was appearing under the nav */
    .av-top-nav .mobile-nav-logo {
        display: none !important;
    }

    /* Only show this logo while an internal page is open */
    body.av-page-open .desktop-page-logo {
        display: block !important;

        position: fixed !important;
        top: 30px !important;
        left: 48px !important;

        width: 112px !important;
        height: auto !important;

        z-index: 10000001 !important;

        cursor: pointer;
    }

    body.av-page-open .desktop-page-logo img {
        display: block;
        width: 100%;
        height: auto;
    }
}

/* =====================================================
   FINAL DESKTOP LOGO BEHAVIOR
   HOME = ORIGINAL LOGO
   INTERNAL PAGES = NAV LOGO
===================================================== */

@media (min-width: 769px) {

    /* Normally hide navigation logo on desktop */
    body .av-top-nav .mobile-nav-logo {
        display: none !important;
    }


    /* ONLY show it while an internal page is open */
body.av-page-open .av-top-nav .mobile-nav-logo {
    display: block !important;

    position: fixed !important;

    top: 72px !important;
    right: calc(50% - 50vw + 90px) !important;

    left: auto !important;
    bottom: auto !important;

    width: 150px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;
    cursor: pointer !important;

    z-index: 10000000 !important;
}


    body.av-page-open .av-top-nav .mobile-nav-logo img {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
    }


    /* HOME PAGE — absolutely make sure extra nav logo disappears */
    body:not(.av-page-open) .av-top-nav .mobile-nav-logo {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

}

/* =====================================================
   INTERNAL PAGE HOME LOGO — FINAL POSITION
===================================================== */

@media (min-width: 769px) {

    /* HOME PAGE: navigation/home logo MUST disappear */
    body:not(.av-page-open) .av-top-nav .mobile-nav-logo {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }


    /* INTERNAL PAGES ONLY */
    body.av-page-open .av-top-nav .mobile-nav-logo {
        display: block !important;

        position: fixed !important;

        /* upper-right — same general area as Testimonials logo */
        top: 95px !important;
        right: 125px !important;

        left: auto !important;
        bottom: auto !important;

        width: 150px !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;
        cursor: pointer !important;

        z-index: 10000000 !important;
    }


    body.av-page-open .av-top-nav .mobile-nav-logo img {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;

        object-fit: contain !important;

        filter:
            drop-shadow(0 8px 18px rgba(0,0,0,0.45))
            drop-shadow(0 0 10px rgba(212,175,55,0.12));
    }


    /* Hide the old decorative logo on internal pages.
       The clickable Home logo replaces it. */
    body.av-page-open .av-section-logo {
        display: none !important;
    }

}

/* =====================================================
   INTERNAL PAGE HOME LOGO — FINAL DESKTOP FIX
===================================================== */

.desktop-page-logo {
    display: none;
}


@media (min-width: 769px) {

    /*
       Header logo is NOT used on desktop.
       It lives inside the centered nav and causes the
       weird centered positioning.
    */
    .av-top-nav .mobile-nav-logo {
        display: none !important;
    }


    /*
       Dedicated clickable logo ONLY on internal pages
    */
    body.av-page-open .desktop-page-logo {
        display: block !important;

        position: fixed !important;

        top: 78px !important;
        right: 105px !important;

        left: auto !important;
        bottom: auto !important;

        width: 145px !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 10000001 !important;

        opacity: 1 !important;
        visibility: visible !important;

        cursor: pointer !important;
        pointer-events: auto !important;
    }


    body.av-page-open .desktop-page-logo img {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        object-fit: contain !important;

        filter:
            drop-shadow(0 8px 18px rgba(0,0,0,0.50))
            drop-shadow(0 0 10px rgba(212,175,55,0.15));
    }


    /*
       HOME PAGE:
       absolutely no extra page logo
    */
    body:not(.av-page-open) .desktop-page-logo {
        display: none !important;
    }
}

/* =====================================================
   REMOVE OLD DUPLICATE LOGOS
   PORTFOLIO + TESTIMONIALS ONLY
===================================================== */

#portfolioSpotlight .av-section-logo,
#testimonialsSpotlight .av-section-logo {
    display: none !important;
}

/* =====================================================
   FINAL LOGO CLEANUP — DESKTOP
   ONLY .desktop-page-logo SHOWS ON INTERNAL PAGES
===================================================== */

@media (min-width: 769px) {

    /* Kill the OLD logo inside the navigation completely */
    body.av-page-open .av-top-nav .mobile-nav-logo,
    body:not(.av-page-open) .av-top-nav .mobile-nav-logo {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }


    /* Testimonials had its OWN extra decorative logo */
    #testimonialsSpotlight .av-section-logo {
        display: none !important;
    }


    /* Our ONE permanent clickable internal-page logo */
    body.av-page-open .desktop-page-logo {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        position: fixed !important;

        top: 72px !important;
        right: 95px !important;
        left: auto !important;

        width: 145px !important;

        z-index: 10000001 !important;
    }


    /* Main house = don't show internal-page logo */
    body:not(.av-page-open) .desktop-page-logo {
        display: none !important;
    }
}

/* =====================================================
   PORTFOLIO + TESTIMONIALS CLICKABLE HOME LOGO FIX
===================================================== */

@media (min-width: 769px) {

    #portfolioSpotlight,
    #testimonialsSpotlight {
        z-index: 999999 !important;
    }

    body.av-page-open .desktop-page-logo {
        z-index: 2147483647 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    body.av-page-open .desktop-page-logo img {
        pointer-events: auto !important;
    }

}

/* =====================================================
   SMOOTH INTERNAL PAGE -> HOME LOGO TRANSITION
   KEEP LOGO LOCKED IN PLACE DURING FADE
===================================================== */

@media (min-width: 769px) {

    /* Hide the normal Home-page logo underneath
       while the internal page is closing */
    body.av-returning-home img[src="images/av-logo.png"] {
        visibility: hidden !important;
    }


    /* KEEP our internal clickable logo exactly
       where it was, even after av-page-open disappears */
    body.av-returning-home .desktop-page-logo {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: fixed !important;

        top: 72px !important;
        right: 95px !important;

        left: auto !important;
        bottom: auto !important;

        width: 145px !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;

        z-index: 2147483647 !important;

        pointer-events: none !important;
    }


    /* VERY IMPORTANT:
       prevent gigantic native-size PNG during transition */
    body.av-returning-home .desktop-page-logo img {
        display: block !important;

        visibility: visible !important;
        opacity: 1 !important;

        width: 100% !important;
        max-width: 145px !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain !important;
        transform: none !important;
    }

}

/* =========================================================
   GLOBAL NAVIGATION - LOGO HOME BUTTON
   Logo | Services | Portfolio | Testimonials | Contact
========================================================= */


/* Keep global nav above every spotlight/page */
.av-top-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 0 !important;

    z-index: 99999999 !important;
}


/* LOGO INSIDE NAV */
.av-top-nav .mobile-nav-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 58px !important;
    height: 42px !important;

    margin: 0 12px 0 0 !important;
    padding: 3px 12px 3px 4px !important;

    border-right: 1px solid rgba(212,175,55,0.25);

    box-sizing: border-box !important;

    cursor: pointer;
}


/* NAV LOGO IMAGE */
.av-top-nav .mobile-nav-logo img {
    display: block !important;

    width: 44px !important;
    height: 34px !important;

    object-fit: contain !important;

    margin: 0 !important;
}


/* REMOVE OLD STANDALONE LOGOS */
.desktop-page-logo,
.av-section-logo {
    display: none !important;
}


/* REMOVE PAGE CLOSE X BUTTONS */
.spotlight-close,
.portfolio-close {
    display: none !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .av-top-nav {
        justify-content: space-between !important;
    }


    /* Logo stays visible on mobile */
    .av-top-nav .mobile-nav-logo {
        display: flex !important;

        width: 58px !important;
        height: 48px !important;

        margin: 0 !important;
        padding: 4px 10px !important;

        border-right: none;
    }


    .av-top-nav .mobile-nav-logo img {
        width: 46px !important;
        height: 38px !important;
    }


    /* Hamburger stays on right */
    .mobile-menu-toggle {
        display: flex !important;
    }

}

/* =========================================================
   FINAL NAV LOGO FIX - DESKTOP
========================================================= */

@media (min-width: 769px) {

    /* SHOW LOGO INSIDE NAV - HOME */
    html body:not(.av-page-open) .av-top-nav > a.mobile-nav-logo,

    /* SHOW LOGO INSIDE NAV - INTERNAL PAGES */
    html body.av-page-open .av-top-nav > a.mobile-nav-logo {
        display: flex !important;

        position: static !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 54px !important;
        height: 40px !important;

        flex: 0 0 54px !important;

        margin: 0 10px 0 0 !important;
        padding: 3px 10px 3px 3px !important;

        align-items: center !important;
        justify-content: center !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform: none !important;

        border-right: 1px solid rgba(212,175,55,0.28) !important;

        cursor: pointer !important;
    }


    html body:not(.av-page-open) .av-top-nav > a.mobile-nav-logo > img,
    html body.av-page-open .av-top-nav > a.mobile-nav-logo > img {
        display: block !important;

        width: 40px !important;
        height: 32px !important;

        max-width: 40px !important;

        margin: 0 !important;

        object-fit: contain !important;

        opacity: 1 !important;
        visibility: visible !important;
    }

}

/* =========================================================
   REMOVE INTERNAL PAGE CLOSE BUTTONS
========================================================= */

#remodelSpotlight > button[aria-label*="Close"],
#architectureSpotlight > button[aria-label*="Close"],
#repairsSpotlight > button[aria-label*="Close"],
#portfolioSpotlight > button[aria-label*="Close"],
#testimonialsSpotlight > button[aria-label*="Close"],
#aboutSpotlight > button[aria-label*="Close"],
#contactSpotlight > button[aria-label*="Close"] {
    display: none !important;
}

/* =========================================================
   REMOVE OLD INTERNAL PAGE LOGOS
========================================================= */

#remodelSpotlight .av-section-logo,
#architectureSpotlight .av-section-logo,
#repairsSpotlight .av-section-logo,
#portfolioSpotlight .av-section-logo,
#testimonialsSpotlight .av-section-logo,
#aboutSpotlight .av-section-logo,
#contactSpotlight .av-section-logo,

#remodelSpotlight .desktop-page-logo,
#architectureSpotlight .desktop-page-logo,
#repairsSpotlight .desktop-page-logo,
#portfolioSpotlight .desktop-page-logo,
#testimonialsSpotlight .desktop-page-logo,
#aboutSpotlight .desktop-page-logo,
#contactSpotlight .desktop-page-logo {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* =========================================================
   FINAL NAV LOGO SIZE + CLEANUP
========================================================= */

@media (min-width: 769px) {

    /* BIGGER NAV LOGO - NO SEPARATE BOX/BACKGROUND */
    html body .av-top-nav > a.mobile-nav-logo {
        width: 72px !important;
        height: 48px !important;
        flex: 0 0 72px !important;

        margin: 0 8px 0 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: none !important;
        box-shadow: none !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    html body .av-top-nav > a.mobile-nav-logo > img {
        width: 60px !important;
        height: 44px !important;
        max-width: 60px !important;

        object-fit: contain !important;

        background: transparent !important;
        border: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* REMOVE ALL OLD UPPER-CORNER LOGOS */
    html body.av-page-open .desktop-page-logo,
    html body.av-page-open .desktop-page-logo img,
    html body.av-page-open .av-section-logo,
    html body.av-page-open .av-section-logo img,
    html body .service-spotlight .av-section-logo,
    html body .service-spotlight .av-section-logo img,
    html body #portfolioSpotlight .av-section-logo,
    html body #testimonialsSpotlight .av-section-logo,
    html body #aboutSpotlight .av-section-logo,
    html body #contactSpotlight .av-section-logo {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

}

/* REMOVE OLD HOME-PAGE CORNER LOGO */
html body .final-slide .home-logo-wrap,
html body .final-slide .door-logo-wrap {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* =========================================================
   NAV LOGO - BIGGER + NO BOX
========================================================= */

@media (min-width: 769px) {

    html body .av-top-nav > a.mobile-nav-logo {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        position: static !important;

        width: 82px !important;
        height: 48px !important;
        flex: 0 0 82px !important;

        margin: 0 6px 0 0 !important;
        padding: 0 !important;

        background: none !important;
        background-color: transparent !important;

        border: none !important;
        border-right: none !important;

        outline: none !important;
        box-shadow: none !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        overflow: visible !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
    }


    html body .av-top-nav > a.mobile-nav-logo > img {
        display: block !important;

        width: 72px !important;
        height: 52px !important;
        max-width: 72px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        border: none !important;
        box-shadow: none !important;

        object-fit: contain !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
    }

}

/* =========================================================
   DESKTOP NAV LOGO - OUTSIDE MENU BACKGROUND
========================================================= */

@media (min-width: 769px) {

    .av-top-nav {
        overflow: visible !important;
    }

    html body .av-top-nav > a.mobile-nav-logo {
        display: flex !important;

        position: absolute !important;

        left: -88px !important;
        top: 50% !important;

        transform: translateY(-50%) !important;

        width: 78px !important;
        height: 58px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        background-color: transparent !important;

        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;

        cursor: pointer !important;

        z-index: 999999999 !important;
    }

    html body .av-top-nav > a.mobile-nav-logo img {
        display: block !important;

        width: 74px !important;
        height: 56px !important;

        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain !important;

        background: transparent !important;

        border: none !important;
        box-shadow: none !important;

        opacity: 1 !important;
        visibility: visible !important;
    }

}

/* =========================================================
   FINAL DESKTOP NAV APPEARANCE
   Logo has NO background - menu keeps background
========================================================= */

@media (min-width: 769px) {

    /* REMOVE BACKGROUND FROM WHOLE HEADER */
    html body .av-top-nav {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;

        overflow: visible !important;
    }


    /* PUT BACKGROUND ONLY BEHIND MENU WORDS */
    html body .av-top-nav .nav-links {
        background: rgba(8, 8, 8, 0.72) !important;

        border: 1px solid rgba(255,255,255,0.08) !important;
        border-radius: 3px !important;

        box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
    }


    /* AV HOME LOGO */
    html body .av-top-nav > a.mobile-nav-logo {
        position: absolute !important;

        left: -95px !important;
        top: 50% !important;

        transform: translateY(-50%) !important;

        width: 88px !important;
        height: 68px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        background-color: transparent !important;

        border: none !important;
        border-right: none !important;

        outline: none !important;
        box-shadow: none !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        overflow: visible !important;

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;
        cursor: pointer !important;
    }


    /* ACTUAL LOGO IMAGE */
    html body .av-top-nav > a.mobile-nav-logo > img {
        display: block !important;

        width: 82px !important;
        height: 62px !important;

        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain !important;

        background: transparent !important;

        border: none !important;
        outline: none !important;
        box-shadow: none !important;

        opacity: 1 !important;
        visibility: visible !important;
    }

}

/* BIGGER AV LOGO ONLY */
@media (min-width: 769px) {

    html body .av-top-nav > a.mobile-nav-logo {
        width: 105px !important;
        height: 72px !important;
    }

    html body .av-top-nav > a.mobile-nav-logo > img {
        width: 100px !important;
        height: 70px !important;
        max-width: 100px !important;
    }

}

/* =========================================================
   AV NAV LOGO - VISUAL SIZE FIX
========================================================= */

@media (min-width: 769px) {

    html body .av-top-nav > a.mobile-nav-logo {
        overflow: visible !important;
    }

    html body .av-top-nav > a.mobile-nav-logo > img {
        width: 72px !important;
        height: 52px !important;
        max-width: none !important;

        object-fit: contain !important;

        transform: scale(1.9) !important;
        transform-origin: center center !important;
    }

}

/* WIDEN MENU BACKGROUND PAST TEXT */
@media (min-width: 769px) {

    html body .av-top-nav .nav-links {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

}

/* REMOVE BACKGROUND BEHIND NAV LOGO */
@media (min-width: 769px) {

    html body .av-top-nav > a.mobile-nav-logo {
        background: transparent !important;
        background-color: transparent !important;

        border: none !important;
        box-shadow: none !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    html body .av-top-nav > a.mobile-nav-logo::before,
    html body .av-top-nav > a.mobile-nav-logo::after {
        display: none !important;
        content: none !important;
        background: transparent !important;
    }

}

/* =========================================================
   REMOVE OUTER NAV BLUR - KEEP MENU BACKGROUND ONLY
========================================================= */

@media (min-width: 769px) {

    html body .av-top-nav {
        background: transparent !important;
        background-color: transparent !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        border: none !important;
        box-shadow: none !important;
    }

    html body .av-top-nav::before,
    html body .av-top-nav::after {
        display: none !important;
        content: none !important;

        background: transparent !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        box-shadow: none !important;
    }

    /* Keep dark background ONLY behind menu links */
    html body .av-top-nav .nav-links {
        background: rgba(8, 8, 8, 0.82) !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

}

/* =========================================================
   DESKTOP MENU BAR - THINNER
========================================================= */

@media (min-width: 769px) {

    html body .av-top-nav .nav-links {
        height: 42px !important;
        min-height: 42px !important;

        padding: 0 20px !important;

        display: flex !important;
        align-items: center !important;

        box-sizing: border-box !important;
    }

    html body .av-top-nav .nav-item {
        height: 42px !important;

        display: flex !important;
        align-items: center !important;
    }

    html body .av-top-nav .nav-item > a {
        display: flex !important;
        align-items: center !important;

        height: 38px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

}

/* =========================================================
   PORTFOLIO IMAGE PROTECTION
========================================================= */

#portfolioSpotlight img {
    -webkit-user-select: none !important;
    user-select: none !important;

    -webkit-user-drag: none !important;

    pointer-events: none !important;

    -webkit-touch-callout: none !important;
}

/* =========================================================
   GLOBAL IMAGE PROTECTION
========================================================= */

img {
    -webkit-user-select: none !important;
    user-select: none !important;

    -webkit-user-drag: none !important;

    -webkit-touch-callout: none !important;
}

/* =========================================================
   GLOBAL COPY / PRINT PROTECTION
========================================================= */

img {
    -webkit-user-select: none !important;
    user-select: none !important;

    -webkit-user-drag: none !important;
    -webkit-touch-callout: none !important;
}


/* Hide website content if browser Print is opened */
@media print {

    body * {
        display: none !important;
    }

    body::before {
        content: "© 2026 AV General Construction Inc. — Website content is not available for printing.";
        display: block !important;

        padding: 40px;

        font-family: Arial, sans-serif;
        font-size: 16px;

        color: #000;
        background: #fff;
    }

}

/* =========================================================
   SCREENSHOT DETERRENT - AV BRANDED SCREEN
========================================================= */

body.screenshot-blocked::before {
    content: "";

    position: fixed;
    inset: 0;

    background:
        #000
        url('../images/av-logo.png')
        center calc(50% - 70px) / 260px auto
        no-repeat;

    z-index: 2147483646;

    pointer-events: none;
}


body.screenshot-blocked::after {
    content: "© AV General Construction Inc.";

    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding-top: 170px;

    box-sizing: border-box;

    color: #d4af37;

    font-size: 28px;
    font-weight: 700;

    letter-spacing: 4px;

    text-align: center;

    z-index: 2147483647;

    pointer-events: none;
}

@media (max-width: 768px) {

    body.screenshot-blocked::before {
        background-size: 220px auto !important;
        background-position: center calc(50% - 65px) !important;
    }

    body.screenshot-blocked::after {
        padding: 165px 28px 0 !important;

        font-size: 18px !important;
        line-height: 1.4 !important;
        letter-spacing: 2px !important;
    }

}

/* =========================================================
   AV SECRET GAME ENTRANCE
========================================================= */

.av-secret-trigger {
    appearance: none;
    -webkit-appearance: none;

    padding: 0;
    margin: 0;

    background: transparent;
    border: 0;

    cursor: pointer;
}

.av-secret-trigger img {
    display: block;
}

.av-secret-modal {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px;

    box-sizing: border-box;

    background: rgba(0,0,0,0.92);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;

    z-index: 2147483000;
}

.av-secret-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.av-secret-backdrop {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(212,175,55,0.08),
            transparent 38%
        );
}

.av-secret-panel {
    position: relative;

    width: min(620px, 100%);

    padding: 55px 55px 38px;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            rgba(18,18,18,0.98),
            rgba(5,5,5,0.99)
        );

    border: 1px solid rgba(212,175,55,0.42);

    box-shadow:
        0 40px 100px rgba(0,0,0,0.75),
        0 0 70px rgba(212,175,55,0.05);

    overflow: hidden;

    text-align: center;
}

.av-secret-panel::before {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 60%;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #d4af37,
        transparent
    );

    animation: avSecretScan 2.6s linear infinite;
}

@keyframes avSecretScan {

    from {
        left: -60%;
    }

    to {
        left: 120%;
    }

}

.av-secret-logo {
    width: 125px;
    height: 85px;

    object-fit: contain;

    margin: 0 auto 26px;

    display: block;
}

.av-secret-kicker {
    display: block;

    margin-bottom: 17px;

    color: #d4af37;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 5px;
}

.av-secret-panel h2 {
    margin: 0;

    color: #f5f2eb;

    font-size: clamp(36px, 5vw, 58px);

    line-height: 0.95;

    letter-spacing: -2px;
}

.av-secret-panel h2 em {
    display: block;

    margin-top: 12px;

    color: transparent;

    font-style: normal;

    -webkit-text-stroke:
        1px rgba(212,175,55,0.75);
}

.av-secret-panel p {
    max-width: 470px;

    margin: 30px auto 0;

    color: rgba(255,255,255,0.65);

    font-size: 15px;
    line-height: 1.7;
}

.av-secret-question {
    margin-top: 34px;

    color: #fff;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 4px;
}

.av-secret-actions {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 12px;

    margin-top: 20px;
}

.av-secret-actions button {
    min-height: 58px;

    padding: 0 18px;

    cursor: pointer;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2px;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.av-secret-no {
    background: transparent;

    color: rgba(255,255,255,0.58);

    border:
        1px solid rgba(255,255,255,0.18);
}

.av-secret-yes {
    background: transparent;

    color: #d4af37;

    border:
        1px solid #d4af37;
}

.av-secret-actions button:hover {
    transform: translateY(-2px);
}

.av-secret-yes:hover {
    background: #d4af37;
    color: #080808;
}

.av-secret-code {
    margin-top: 30px;

    padding-top: 18px;

    border-top:
        1px solid rgba(255,255,255,0.08);

    color: rgba(212,175,55,0.4);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 3px;
}


/* MOBILE */
@media (max-width: 768px) {

    .av-secret-panel {
        padding:
            42px
            24px
            30px;
    }

    .av-secret-logo {
        width: 105px;
        height: 72px;
    }

    .av-secret-panel h2 {
        font-size: 39px;
    }

    .av-secret-actions {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   CONTACT - TEAM NAMES + PHONE NUMBERS
========================================================= */

.av-contact-team {
    margin-top: 22px;
}

.av-contact-names,
.av-contact-phones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.av-contact-names {
    color: #d4af37;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 14px;
}

.av-contact-names i,
.av-contact-phones i {
    color: rgba(212, 175, 55, 0.65);
    font-style: normal;
}

.av-contact-phones a {
    color: #f1eee6;
    font-size: 18px;
    text-decoration: none;
}

.av-contact-phones a:hover {
    color: #d4af37;
}

@media (max-width: 768px) {

    .av-contact-names,
    .av-contact-phones {
        gap: 7px;
    }

    .av-contact-names {
        font-size: 10px;
        letter-spacing: 1.4px;
    }

    .av-contact-phones a {
        font-size: 16px;
    }
}