/* Premier Living Centers pilot — incremental Modern theme. */
body.site-modern {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
.site-modern main :is(h1, h2, h3, h4) {
    font-family: inherit;
    text-transform: none;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.2;
    overflow-wrap: break-word;
    text-wrap: balance;
}
.site-modern main h1 { font-size: clamp(2.25rem, 4.5vw, 4.25rem); line-height: 1.08; }
.site-modern main h2 { font-size: clamp(1.75rem, 3vw, 2.75rem); }
.site-modern main h3 { font-size: clamp(1.2rem, 1.6vw, 1.5rem); }
.site-modern main p { line-height: 1.75; }
.site-modern main :is(input, select, textarea, button) { font-family: inherit; }

/* Step 2: consistent content-section rhythm. Hero and trust strip retain their sizing. */
.site-modern .site-home > section:is(.py-16, .dib-shop, .featured-bargains) {
    padding-top: clamp(4rem, 7.5vw, 7rem);
    padding-bottom: clamp(4rem, 7.5vw, 7rem);
}
.site-modern .site-home > section.featured-bargains {
    padding-top: clamp(2rem, 3.75vw, 3.5rem);
    padding-bottom: clamp(2rem, 3.75vw, 3.5rem);
}
.site-modern .site-home > section > .max-w-7xl {
    padding-left: clamp(1.25rem, 4vw, 3rem);
    padding-right: clamp(1.25rem, 4vw, 3rem);
}
.site-modern .site-home > section > .grid.lg\:grid-cols-2 {
    column-gap: clamp(2rem, 6vw, 6rem);
    row-gap: 2.5rem;
}
.site-modern .site-home > section > div > h2 {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.site-modern .site-home > section > .grid > .space-y-6 > p {
    max-width: 60ch;
}
@media (max-width: 639px) {
    .site-modern .site-home > section.py-12 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}

/* Step 3: a restrained header with the existing navigation and brand colors. */
.site-modern .site-utility {
    border-bottom: 0;
    padding: 0.65rem clamp(1.25rem, 4vw, 3rem);
    letter-spacing: 0.015em;
}
.site-modern .site-utility > div { row-gap: 0.65rem; }
.site-modern .site-utility > div > div > :is(a, span),
.site-modern .site-utility > div > div > div > button { color: inherit; }
.site-modern .site-utility > div > div > :is(a, span) > i,
.site-modern .site-utility button > i { color: inherit; opacity: 0.8; }
.site-modern .site-header {
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    box-shadow: 0 3px 16px rgb(15 23 42 / 0.04);
}
.site-modern .site-header-row {
    min-height: 96px;
    gap: 1.5rem;
    padding: 1rem clamp(1.25rem, 4vw, 3rem);
}
.site-modern .site-brand { min-width: 0; flex-shrink: 1; letter-spacing: -0.025em; }
.site-modern .site-brand img { max-width: 240px; height: 64px; width: auto; object-fit: contain; }
.site-modern .site-desktop-nav { font-weight: 500; letter-spacing: 0; gap: clamp(0.65rem, 1vw, 1.25rem); }
.site-modern .site-desktop-nav > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 0; }
.site-modern .site-desktop-nav > a { padding-block: 1rem; }
.site-modern .site-estimate-action {
    padding: 0.85rem 1.15rem;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.045em;
    white-space: nowrap;
}
.site-modern .site-header :is(a, button, summary):focus-visible,
.site-modern .site-utility :is(a, button):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}
@media (max-width: 1279px) {
    .site-modern .site-header-row { min-height: 80px; gap: 1rem; padding-block: 0.75rem; }
    .site-modern .site-brand { max-width: calc(100% - 64px); }
    .site-modern .site-brand img { max-width: 100%; height: 54px; }
    .site-modern #mobile-menu-btn { min-height: 44px; min-width: 44px; }
    .site-modern #mobile-menu { box-shadow: none; }
    .site-modern #mobile-menu > nav { font-weight: 500; letter-spacing: 0; }
    .site-modern #mobile-menu a { min-height: 44px; padding-block: 0.65rem; }
}

/* Step 4: quieter cards and consistent actions on the homepage. */
.site-modern .site-home :is(.home-action-card, .home-estimate-card, .fb-card) {
    border-radius: 6px;
    box-shadow: 0 4px 20px rgb(15 23 42 / 0.05), inset 0 0 0 1px rgb(15 23 42 / 0.08);
}
.site-modern .site-home :is(.home-action-card, .home-estimate-card) {
    padding: clamp(1.5rem, 2.5vw, 2rem);
    align-items: flex-start;
    text-align: left;
}
.site-modern .site-home .home-action-card {
    align-items: center;
    text-align: center;
}
.site-modern .site-home .home-action-card > i { font-size: 1.75rem; margin-bottom: 1.5rem; }
.site-modern .site-home :is(.home-action-card, .home-estimate-card) > h3 { margin-bottom: 1rem; }
.site-modern .site-home :is(.home-action-card, .home-estimate-card) > p { margin-bottom: 1.75rem; }
.site-modern .site-home .home-inspiration-card { align-items: flex-start; text-align: left; }
.site-modern .site-home .home-inspiration-card > div {
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    box-shadow: none;
    margin-bottom: 1.5rem;
}
.site-modern .site-home .home-estimate-card > a:first-child {
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 4px;
    box-shadow: none;
}
.site-modern .site-home :is(.home-action-card, .home-estimate-card, .home-inspiration-card) > a:last-child,
.site-modern .site-home .fb-button {
    min-height: 44px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: none;
    border-radius: 4px;
}
.site-modern .site-home .home-inspiration-card > a:last-child { border-width: 1px; }
.site-modern .site-home :is(.home-action-card, .home-estimate-card, .home-inspiration-card) a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* Step 5: footer hierarchy, balanced columns and comfortable mobile links. */
.site-modern .site-footer {
    background: #202320;
    color: #c9cdc7;
    border-top: 1px solid rgb(255 255 255 / 0.12);
    padding-top: clamp(3rem, 6vw, 5.5rem);
    padding-bottom: 1.75rem;
}
.site-modern .site-footer-grid {
    gap: 3rem;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.site-modern .site-footer-grid > div { min-width: 0; }
.site-modern .site-footer h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.25; }
.site-modern .site-footer :is(h3, h4) {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.4;
    margin-bottom: 1.25rem;
}
.site-modern .site-footer p { line-height: 1.75; }
.site-modern .site-footer :is(.site-footer-links, .site-footer-products) {
    display: grid;
    row-gap: 0.2rem;
}
.site-modern .site-footer-links > :not([hidden]) ~ :not([hidden]) { margin-top: 0; }
.site-modern :is(.site-footer-links, .site-footer-products) a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0.5rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.site-modern .site-footer a:hover { color: #fff; }
.site-modern .site-footer a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.site-modern .site-footer-bottom {
    margin-top: 3rem;
    padding-top: 1.5rem;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    border-color: rgb(255 255 255 / 0.12);
    font-size: 0.75rem;
    color: #b5bcb3;
}
@media (min-width: 1024px) {
    .site-modern .site-footer-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.7fr) minmax(0, 1.2fr); column-gap: clamp(2rem, 5vw, 5rem); }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .site-modern .site-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-modern .site-footer-grid > div:last-child { grid-column: 1 / -1; }
}

/* Step 6: photographic hero with a readable, editorial text area. */
.site-modern #hero-slider { min-height: clamp(35rem, 65vw, 46rem); }
.site-modern #hero-slider .slide > img { opacity: 1; }
.site-modern #hero-slider .hero-image-overlay {
    background: linear-gradient(90deg, rgb(10 17 14 / 0.82) 0%, rgb(10 17 14 / 0.65) 55%, rgb(10 17 14 / 0.18) 100%);
}
.site-modern #hero-slider .hero-copy {
    width: 100%;
    max-width: 1280px;
    align-items: flex-start;
    text-align: left;
    padding: 3rem clamp(1.25rem, 4vw, 3rem) 7rem;
}
.site-modern #hero-slider .hero-copy h1 {
    max-width: 18ch;
    margin-bottom: 1.5rem;
    text-shadow: none;
}
.site-modern #hero-slider .hero-copy p {
    max-width: 48ch;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-weight: 400;
    color: #f2f3ef;
    margin-bottom: 2rem;
    text-shadow: none;
}
.site-modern #hero-slider .hero-copy > a {
    min-height: 48px;
    padding: 0.9rem 1.6rem;
    border-radius: 4px;
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0.025em;
}
.site-modern #hero-slider :is(#prevSlide, #nextSlide) {
    top: auto;
    bottom: 1.75rem;
    transform: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 0.45);
    background: rgb(0 0 0 / 0.25);
}
.site-modern #hero-slider #prevSlide { left: max(1.25rem, calc((100% - 1280px) / 2 + 3rem)); }
.site-modern #hero-slider #nextSlide { left: max(4.75rem, calc((100% - 1280px) / 2 + 6.5rem)); right: auto; }
.site-modern #hero-slider :is(a, button):focus-visible { outline: 2px solid white; outline-offset: 4px; }
@media (max-width: 639px) {
    .site-modern #hero-slider .hero-image-overlay { background: linear-gradient(90deg, rgb(10 17 14 / 0.85), rgb(10 17 14 / 0.6)); }
}

/* Gentle homepage feedback for pointer users; touch layouts stay still. */
@media (hover: hover) and (pointer: fine) {
    .site-modern .site-home :is(.home-action-card, .home-estimate-card, .fb-card) {
        transition: transform 240ms ease, box-shadow 200ms ease;
    }
    .site-modern .site-home :is(.home-action-card, .home-estimate-card, .fb-card):hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 26px rgb(15 23 42 / 0.09), inset 0 0 0 1px rgb(15 23 42 / 0.1);
    }
    .site-modern .site-home :is(.home-inspiration-card > div, .home-estimate-card > a:first-child) img {
        transition: transform 350ms ease;
    }
    .site-modern .site-home .home-inspiration-card:hover > div img,
    .site-modern .site-home .home-estimate-card:hover > a:first-child img {
        transform: scale(1.04);
    }
    .site-modern .site-home .hero-copy > a,
    .site-modern .site-home .home-inspiration-card > a:last-child,
    .site-modern .site-home .fb-button {
        transition: transform 240ms ease, box-shadow 200ms ease, background-color 200ms ease, color 200ms ease;
    }
    .site-modern .site-home .hero-copy > a:hover,
    .site-modern .site-home .home-inspiration-card > a:last-child:hover,
    .site-modern .site-home .fb-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 14px rgb(15 23 42 / 0.12);
    }
}
@media (prefers-reduced-motion: reduce) {
    .site-modern .site-home :is(.home-action-card, .home-estimate-card, .fb-card),
    .site-modern .site-home :is(.home-inspiration-card, .home-estimate-card) img,
    .site-modern .site-home .hero-copy > a,
    .site-modern .site-home .home-inspiration-card > a:last-child,
    .site-modern .site-home .fb-button {
        transition: none;
        transform: none !important;
    }
}

/* Interior pages: reuse the approved Modern rhythm without changing layouts. */
.site-modern main:not(.site-home) > section:is(.py-16, .py-20) {
    padding-block: clamp(3.5rem, 7vw, 6rem);
}
.site-modern .site-page-heading { padding-block: clamp(1.8rem, 3.6vw, 3rem); }
.site-modern .site-page-heading h1 { text-transform: uppercase; max-width: 28ch; margin-inline: auto; margin-bottom: 0.5rem; font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.15; }
.site-modern .site-page-heading nav { flex-wrap: wrap; margin-bottom: 0.5rem; row-gap: 0.25rem; line-height: 1.5; }
.site-modern .site-page-heading p { line-height: 1.55; }
.site-modern main:not(.site-home) > section > :is(.max-w-7xl, .max-w-6xl, .max-w-5xl) {
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.site-modern main:not(.site-home) :is(.grid > a.group, .gallery-item, [id^="bargain-item-"], .grid > div.border.shadow-sm, .grid > div.border.shadow-md) {
    border-radius: 6px;
    box-shadow: 0 4px 20px rgb(15 23 42 / 0.05);
}
.site-modern main .tier1-modal > div { border-radius: 8px; }
.site-modern main .tier1-modal .grid > div.border { border-radius: 6px; }
.site-modern main:not(.site-home) :is(a, button):is(.bg-primary, .bg-slate-900, .bg-white.inline-block) {
    min-height: 44px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.025em;
}
.site-modern main form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]), select, textarea) {
    min-height: 46px;
    max-width: 100%;
    border-radius: 6px;
    font-size: 1rem;
    line-height: 1.5;
}
.site-modern main form :is(input, select, textarea):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}
.site-modern main:not(.site-home) :is(a, button):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
    .site-modern main:not(.site-home) :is(.grid > a.group, .gallery-item, [id^="bargain-item-"]) {
        transition: transform 240ms ease, box-shadow 200ms ease;
    }
    .site-modern main:not(.site-home) :is(.grid > a.group, .gallery-item, [id^="bargain-item-"]):hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 26px rgb(15 23 42 / 0.09);
    }
    .site-modern main:not(.site-home) :is(.grid > a.group, .gallery-item, [id^="bargain-item-"]) img {
        transition: transform 350ms ease;
    }
    .site-modern main:not(.site-home) :is(.grid > a.group, .gallery-item, [id^="bargain-item-"]):hover img {
        transform: scale(1.04);
    }
    .site-modern main:not(.site-home) :is(a, button):is(.bg-primary, .bg-slate-900):not(.rounded-full) {
        transition: transform 240ms ease, background-color 200ms ease, color 200ms ease;
    }
    .site-modern main:not(.site-home) :is(a, button):is(.bg-primary, .bg-slate-900):not(.rounded-full):hover {
        transform: translateY(-3px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .site-modern main:not(.site-home) :is(.grid > a.group, .gallery-item, [id^="bargain-item-"], a.bg-primary, button.bg-primary, a.bg-slate-900, button.bg-slate-900),
    .site-modern main:not(.site-home) :is(.grid > a.group, .gallery-item, [id^="bargain-item-"]) img {
        transition: none;
        transform: none !important;
    }
}