/* /Layout/BannerText.razor.rz.scp.css */
.banner-text[b-ufexplw26a] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--banner-h);
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    padding-top: calc(var(--nav-h) * 0.55);
}

.banner-text-card[b-ufexplw26a] {
    display: inline-block;
    padding: 1.1rem 1.35rem 1.15rem;
    border-radius: 18px;
    background: rgba(0,0,0,0.38);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(6px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.45);
}

    .banner-text-card[b-ufexplw26a]::after {
        content: "";
        display: block;
        width: 64px;
        height: 2px;
        margin: 0.85rem auto 0;
        background: linear-gradient( 90deg, rgba(227,160,181,0.85), rgba(184,155,107,0.80) );
        opacity: 0.9;
    }

.banner-title[b-ufexplw26a] {
    font-family: var(--font-script);
    font-weight: 400;
    font-size: clamp(2.6rem, 6vw, 4rem);
    line-height: 1.05;
    letter-spacing: 0.02em;
    margin: 0 0 .45rem;
}

.banner-subtitle[b-ufexplw26a] {
    font-family: var(--font-subtitle);
    font-size: 1.05rem;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
    max-width: 60ch;
    margin: 0 auto;
}

@keyframes bannerIn-b-ufexplw26a {
    from {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.banner-in-title[b-ufexplw26a],
.banner-in-subtitle[b-ufexplw26a] {
    opacity: 0;
    animation: bannerIn-b-ufexplw26a 700ms ease-out forwards;
}

.banner-in-title[b-ufexplw26a] {
    animation-delay: 90ms;
}

.banner-in-subtitle[b-ufexplw26a] {
    animation-delay: 240ms;
}

@media (max-width: 480px) {
    .banner-text[b-ufexplw26a] {
        padding-top: calc(var(--banner-h) * 0.22); /* was ~0.30 */
    }

    .banner-text-card[b-ufexplw26a] {
        padding: 0.85rem 1.05rem 0.95rem;
        border-radius: 16px;
    }

    .banner-title[b-ufexplw26a] {
        font-size: clamp(2.0rem, 7vw, 2.6rem);
    }

    .banner-subtitle[b-ufexplw26a] {
        font-size: 0.95rem;
        line-height: 1.5;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* The black panel that eventually covers the banner */
.content-shell[b-fybit4kcnt] {
    position: relative;
    z-index: 1;
    /* Start below the fixed banner so the banner is visible initially */
    margin-top: calc(var(--banner-h) - var(--nav-h));
    background: var(--bg);
    border-top: 1px solid rgba(255,255,255,0.08);
    /* Nice �sheet� feel */
    box-shadow: 0 -30px 60px rgba(0,0,0,0.55);
}

/* Main content spacing */
.site-main[b-fybit4kcnt] {
    min-height: calc(100vh - var(--nav-h));
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}

.page-layer[b-fybit4kcnt] {
    position: relative;
    z-index: 1;
}

@media (max-width: 640px) {
    .site-main[b-fybit4kcnt] {
        padding-top: 0;
    }
}
/* /Layout/SiteBanner.razor.rz.scp.css */
.site-banner[b-7asqg6e9z5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--banner-h);
    z-index: 0;
    overflow: hidden;
}

.banner-img[b-7asqg6e9z5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.02);
}

.banner-overlay[b-7asqg6e9z5] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,11,14,0.55) 0%, rgba(11,11,14,0.28) 55%, rgba(11,11,14,0.10) 78%, rgba(11,11,14,0.06) 100% ), linear-gradient(180deg, rgba(227,160,181,0.08), rgba(184,155,107,0.06) );
}

@media (max-width: 640px) {
    .site-banner[b-7asqg6e9z5] {
        height: auto; /* let it size naturally */
        aspect-ratio: 16 / 9; /* pick a stable ratio; tweak if needed */
    }

    .banner-img[b-7asqg6e9z5] {
        object-fit: contain; /* show full image */
        transform: none; /* no zoom */
        background: #0b0b0e; /* fills letterbox areas */
    }
}

/* /Layout/SiteFooter.razor.rz.scp.css */
/* =========================================================
   SITE FOOTER (SHS)
   - Desktop: 3 columns (Hours | Quick Links | Contact/Follow)
   - Mobile: stacked, centered, with full-width tap targets
   ========================================================= */

.site-footer[b-0um92yybqt] {
    border-top: 1px solid rgba(255,255,255,0.08);
    background: radial-gradient(900px 280px at 20% 0%, rgba(227,160,181,0.08), transparent 60%), radial-gradient(900px 280px at 80% 0%, rgba(184,155,107,0.06), transparent 60%), rgba(0,0,0,0.28);
}

/* Main grid */
.footer-inner[b-0um92yybqt] {
    padding: var(--space-6) 0;
    display: grid;
    grid-template-columns: 1fr 0.9fr 1fr;
    gap: var(--space-6);
    align-items: start;
}

/* Section labels */
.footer-label[b-0um92yybqt] {
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(227,160,181,0.78);
    margin: 0 0 0.75rem;
    text-align: left;
}

.footer-label-spaced[b-0um92yybqt] {
    margin-top: 1.25rem;
}

/* =========================
   HOURS (informational, not button-like)
   ========================= */

.hours-grid[b-0um92yybqt] {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
    max-width: 420px;
}

/* Mobile comfort spacing for hours */
@media (max-width: 920px) {
    .hours-grid[b-0um92yybqt] {
        padding-inline: 0.5rem;
    }
}

.hours-row[b-0um92yybqt] {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 1rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

    .hours-row:last-child[b-0um92yybqt] {
        border-bottom: none;
    }

    .hours-row dt[b-0um92yybqt] {
        margin: 0;
        font-weight: 650;
        color: rgba(255,255,255,0.82);
    }

    .hours-row dd[b-0um92yybqt] {
        margin: 0;
        text-align: right;
        color: rgba(255,255,255,0.70);
        white-space: nowrap;
    }

/* =========================
   QUICK LINKS
   ========================= */

.footer-links[b-0um92yybqt] {
    display: grid;
    gap: 0.6rem;
}

    .footer-links a[b-0um92yybqt] {
        color: rgba(255,255,255,0.78);
        padding: 0.25rem 0;
        width: fit-content;
        position: relative;
        transition: color 140ms ease;
        line-height: 1.4;
    }

        .footer-links a:hover[b-0um92yybqt] {
            color: var(--text);
        }

        .footer-links a[b-0um92yybqt]::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -6px;
            height: 2px;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 160ms ease;
            background: linear-gradient(90deg, rgba(227,160,181,0.9), rgba(184,155,107,0.85));
        }

        .footer-links a:hover[b-0um92yybqt]::after {
            transform: scaleX(0.7);
        }

/* =========================
   CONTACT + FOLLOW (tap targets)
   ========================= */

.footer-contact[b-0um92yybqt] {
    display: grid;
    gap: 0.75rem;
}

/* Phone + Address “cards” */
.footer-phone[b-0um92yybqt],
.footer-address[b-0um92yybqt] {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* centers the text inside */
    font-weight: 650;
    color: rgba(255,255,255,0.88);
    padding: 0.7rem 0.9rem;
    border-radius: 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
    text-align: center;
}

    .footer-phone:hover[b-0um92yybqt],
    .footer-address:hover[b-0um92yybqt] {
        transform: translateY(-1px);
        border-color: rgba(255,255,255,0.18);
        background: rgba(255,255,255,0.06);
    }

/* Social buttons */
.social-row[b-0um92yybqt] {
    display: grid;
    gap: 0.6rem;
}

.social[b-0um92yybqt] {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* center the overall content */
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.80);
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
    text-align: center;
}

    .social:hover[b-0um92yybqt] {
        transform: translateY(-1px);
        background: rgba(255,255,255,0.06);
        border-color: rgba(255,255,255,0.16);
        color: var(--text);
    }

.social-ico[b-0um92yybqt] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.12);
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* =========================
   Bottom bar
   ========================= */

.footer-bottom[b-0um92yybqt] {
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.38);
}

.footer-bottom-inner[b-0um92yybqt] {
    padding: 0.95rem 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: rgba(255,255,255,0.62);
    font-size: 0.92rem;
}

.built-by a[b-0um92yybqt] {
    color: rgba(255,255,255,0.78);
}

    .built-by a:hover[b-0um92yybqt] {
        color: var(--text);
    }

/* =========================================================
   Responsive
   ========================================================= */

/* Stack layout on smaller screens */
@media (max-width: 920px) {
    .footer-inner[b-0um92yybqt] {
        grid-template-columns: 1fr;
        gap: var(--space-5);
        justify-items: center; /* centers each column block */
        text-align: center;
    }

    .footer-label[b-0um92yybqt] {
        text-align: center;
    }

    /* Give sections a consistent “width” so content doesn’t feel squeezed */
    .footer-col[b-0um92yybqt] {
        width: min(520px, 100%);
        padding: 0 0.75rem; /* fixes “pushed against edge” */
    }

    /* Hours should use more of the available width */
    .hours-grid[b-0um92yybqt] {
        max-width: 100%;
    }

    /* Make day/time spacing nicer on small screens */
    .hours-row[b-0um92yybqt] {
        grid-template-columns: 60px 1fr;
        gap: 1.1rem;
    }

    /* Contact + social fill the column width */
    .footer-contact[b-0um92yybqt],
    .social-row[b-0um92yybqt] {
        width: 100%;
    }

    .footer-phone[b-0um92yybqt],
    .footer-address[b-0um92yybqt],
    .social[b-0um92yybqt] {
        width: 100%;
        max-width: 520px; /* keeps it elegant, not massive */
        margin: 0 auto;
    }

    /* Quick links: 2 columns, spread out more */
    .footer-links[b-0um92yybqt] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.9rem 2rem;
        justify-items: center;
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
    }

        .footer-links a[b-0um92yybqt] {
            width: 100%;
            text-align: center;
        }

    .footer-bottom-inner[b-0um92yybqt] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* Extra-small phones: slightly tighter spacing but still full-width */
@media (max-width: 420px) {
    .footer-col[b-0um92yybqt] {
        padding: 0 0.5rem;
    }

    .footer-phone[b-0um92yybqt],
    .footer-address[b-0um92yybqt],
    .social[b-0um92yybqt] {
        padding: 0.75rem 0.9rem;
    }

    .footer-links[b-0um92yybqt] {
        gap: 0.75rem 1.25rem;
    }
}
/* /Layout/SiteHeader.razor.rz.scp.css */
.site-header[b-t40mz0efvn] {
    position: sticky;
    top: 0;
    z-index: 10;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    backdrop-filter: blur(14px);
    background: rgba(10,10,14,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 200ms ease, border-color 200ms ease;
}

    .site-header[b-t40mz0efvn]::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 2px;
        background: linear-gradient( 90deg, rgba(227,160,181,0.65), rgba(184,155,107,0.60) );
        opacity: 0.35;
        pointer-events: none;
    }

.header-row[b-t40mz0efvn] {
    height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Brand */
.brand[b-t40mz0efvn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 0.85rem;
    border-radius: 12px;
    font-weight: 750;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.18);
}

/* Desktop nav links */
.nav-links[b-t40mz0efvn] {
    display: none;
    align-items: center;
    gap: 0.9rem;
}

    .nav-links :deep(a)[b-t40mz0efvn] {
        color: var(--muted);
        text-decoration: none;
        padding: 0.25rem 0.05rem; /* no “button” feel */
        border-radius: 0; /* underline look */
        border: none;
        position: relative;
        transition: color 140ms ease;
    }

    .nav-links :deep(a:hover)[b-t40mz0efvn] {
        color: var(--text);
    }

    .nav-links :deep(a)[b-t40mz0efvn]::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -4px; /* was -8px */
        height: 2px;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 160ms ease;
        background: linear-gradient( 90deg, rgba(227,160,181,0.90), rgba(184,155,107,0.85) );
    }

    .nav-links :deep(a:hover)[b-t40mz0efvn]::after {
        transform: scaleX(0.7);
    }

    .nav-links :deep(a.active)[b-t40mz0efvn] {
        color: var(--text);
    }

        .nav-links :deep(a.active)[b-t40mz0efvn]::after {
            transform: scaleX(1);
        }

/* Show full nav on desktop */
@media (min-width: 920px) {
    .nav-links[b-t40mz0efvn] {
        display: inline-flex;
    }
}

.site-header.scrolled[b-t40mz0efvn] {
    background: rgba(10,10,14,0.82); /* clearly solid */
    border-bottom-color: rgba(255,255,255,0.12);
}
    .site-header.scrolled[b-t40mz0efvn]::after {
        opacity: 0.65;
    }
/* /Pages/Index.razor.rz.scp.css */
/* =========================================================
   INDEX (Home) Page - Scoped Styles
   Applies ONLY to Pages/Index.razor
   ========================================================= */

/* =========================================================
   1) INTRO / ABOUT (image + copy)
   Desktop: 2 columns
   Mobile: stacked
   ========================================================= */

.home-intro-grid[b-134cstg8a2] {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-6);
    align-items: center;
}

/* Intro image "editorial card" */
.home-intro-image[b-134cstg8a2] {
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    box-shadow: 0 22px 55px rgba(0,0,0,0.35);
}

    .home-intro-image img[b-134cstg8a2] {
        width: 100%;
        display: block;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        object-position: center;
    }

/* Intro copy */
.home-intro-copy[b-134cstg8a2] {
    max-width: 58ch;
}

    .home-intro-copy .eyebrow[b-134cstg8a2] {
        margin: 0 0 0.6rem;
        font-size: 0.82rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(227,160,181,0.85);
    }

    .home-intro-copy h2[b-134cstg8a2] {
        margin: 0 0 0.85rem;
        font-size: clamp(1.6rem, 2.6vw, 2.15rem);
        line-height: 1.15;
    }

    .home-intro-copy p[b-134cstg8a2] {
        margin: 0 0 1.25rem;
        color: var(--muted);
        font-size: 1.02rem;
        line-height: 1.75;
    }

/* Intro buttons */
.intro-actions[b-134cstg8a2] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    text-align: center;
}

/* =========================================================
   2) BUTTONS (scoped)
   Later: can be moved to app.css if reused site-wide.
   ========================================================= */

.btn[b-134cstg8a2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.05rem;
    border-radius: 14px;
    border: 1px solid var(--border);
    text-decoration: none;
    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

    .btn:hover[b-134cstg8a2] {
        transform: translateY(-1px);
    }

    .btn.primary[b-134cstg8a2] {
        background: rgba(255,255,255,0.14);
    }

    .btn.ghost[b-134cstg8a2] {
        background: transparent;
    }

    .btn.soft[b-134cstg8a2] {
        background: rgba(255,255,255,0.10);
    }

/* =========================================================
   3) SPECIAL EVENTS HIGHLIGHT
   Gradient border wrapper + glass panel
   Desktop: image + content
   Mobile: stacked
   ========================================================= */

.highlight-wrap[b-134cstg8a2] {
    border-radius: var(--radius-xl);
    padding: 1px; /* shows the gradient border */
    background: linear-gradient(90deg, rgba(227,160,181,0.35), rgba(184,155,107,0.30));
    box-shadow: 0 28px 70px rgba(0,0,0,0.45);
}

/* The actual panel (padding lives here so it’s self-contained) */
.highlight-panel[b-134cstg8a2] {
    border-radius: calc(var(--radius-xl) - 1px);
    border: 1px solid rgba(255,255,255,0.10);
    padding: 1.25rem; /* important: keeps content off edges */
    background: radial-gradient(900px 260px at 20% 0%, rgba(227,160,181,0.12), transparent 60%), radial-gradient(900px 260px at 80% 0%, rgba(184,155,107,0.10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
}

.highlight-grid[b-134cstg8a2] {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr; /* image smaller, text bigger */
    gap: 1.25rem;
    align-items: center;
}

/* Image card */
.highlight-media[b-134cstg8a2] {
    max-width: 360px; /* caps dominance on desktop */
    border-radius: calc(var(--radius-xl) - 6px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.18);
}

    .highlight-media img[b-134cstg8a2] {
        width: 100%;
        display: block;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        object-position: center 25%;
    }

/* Text hierarchy */
.highlight-panel h2[b-134cstg8a2] {
    margin: 0 0 0.4rem;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
}

.highlight-panel p[b-134cstg8a2] {
    margin: 0 0 1rem;
    color: var(--muted);
    line-height: 1.6;
    max-width: 65ch;
}

/* Buttons centered for consistency */
.highlight-actions[b-134cstg8a2] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.25rem;
    text-align: center;
}

/* =========================================================
   4) HOME TILES (Option C - Hybrid)
   Row 1: image tiles
   Row 2: clean utility tiles
   Review CTA banner
   ========================================================= */

.home-tiles[b-134cstg8a2] {
    padding-top: var(--space-6);
}

/* A “group” is a logical chunk separated by dividers */
.tiles-group[b-134cstg8a2] {
    margin-bottom: var(--space-5);
}

    .tiles-group:last-child[b-134cstg8a2] {
        margin-bottom: 0;
    }

/* Grid layout */
.tiles-grid[b-134cstg8a2] {
    display: grid;
    gap: 1.25rem;
}

.tiles-images[b-134cstg8a2],
.tiles-clean[b-134cstg8a2] {
    grid-template-columns: repeat(2, 1fr);
}

/* Shared tile styling */
.tile[b-134cstg8a2] {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.05);
    padding: 1.25rem;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

    .tile:hover[b-134cstg8a2] {
        transform: translateY(-3px);
        border-color: rgba(255,255,255,0.18);
        box-shadow: 0 18px 45px rgba(0,0,0,0.45);
    }

    .tile h3[b-134cstg8a2] {
        margin: 0 0 0.35rem;
        font-size: 1.05rem;
    }

    .tile p[b-134cstg8a2] {
        margin: 0;
        color: var(--muted);
        line-height: 1.5;
    }

/* Image tiles */
.image-tile[b-134cstg8a2] {
    padding: 0;
    min-height: 220px;
}

    .image-tile img[b-134cstg8a2] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Taller on desktop so more photo shows */
@media (min-width: 901px) {
    .image-tile[b-134cstg8a2] {
        min-height: 340px;
    }
}

/* Fine-tune crop per image */
.tile-services img[b-134cstg8a2] {
    object-position: 35% 40%;
}

.tile-showcase img[b-134cstg8a2] {
    object-position: 50% 70%;
}

/* Overlay readability */
.tile-overlay[b-134cstg8a2] {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.65) 85%);
}

.image-tile h3[b-134cstg8a2] {
    color: #fff;
}

.image-tile p[b-134cstg8a2] {
    color: rgba(255,255,255,0.85);
}

/* Clean utility tiles */
/* =========================================================
   CLEAN UTILITY TILES
   “Confident but not loud”
   ========================================================= */

.clean-tile[b-134cstg8a2] {
    /* Base surface (matches your soft card language) */
    background: linear-gradient( 180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.045) );
}

/* Turn the clean tile into a more deliberate “action card” */
.clean-tile-link[b-134cstg8a2] {
    padding: 1.35rem 1.35rem 1.4rem; /* more breathable than default tile padding */
    min-height: 132px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    position: relative;
}

    /* Subtle accent line (ties into your divider brand colors) */
    .clean-tile-link h3[b-134cstg8a2]::after {
        content: "";
        display: block;
        width: 42px;
        height: 2px;
        margin-top: 0.4rem;
        background: linear-gradient( 90deg, rgba(227,160,181,0.65), rgba(184,155,107,0.60) );
        opacity: 0.6;
    }

    /* Quiet affordance arrow */
    .clean-tile-link[b-134cstg8a2]::after {
        content: "→";
        position: absolute;
        right: 18px;
        top: 18px;
        color: rgba(255,255,255,0.70);
        font-size: 1.05rem;
        transform: translateX(0);
        transition: transform 160ms ease, color 160ms ease;
    }

    /* Hierarchy */
    .clean-tile-link h3[b-134cstg8a2] {
        margin: 0;
        font-size: 1.06rem;
        font-weight: 650;
        letter-spacing: 0.01em;
    }

    .clean-tile-link p[b-134cstg8a2] {
        margin: 0;
        color: rgba(255,255,255,0.72);
        line-height: 1.55;
        max-width: 52ch;
    }

    /* Hover: subtle lift + border clarification + arrow nudge */
    .clean-tile-link:hover[b-134cstg8a2] {
        transform: translateY(-3px);
        border-color: rgba(255,255,255,0.20);
        box-shadow: 0 20px 52px rgba(0,0,0,0.45);
    }

        .clean-tile-link:hover[b-134cstg8a2]::after {
            transform: translateX(4px);
            color: rgba(255,255,255,0.92);
        }

/* Mobile: center copy without making it feel like a “button stack” */
@media (max-width: 640px) {
    .clean-tile-link[b-134cstg8a2] {
        text-align: left;
        padding: 1.15rem 1.15rem 1.2rem;
        min-height: 118px;
    }

        .clean-tile-link[b-134cstg8a2]::before {
            left: 14px;
            right: 14px;
        }

        .clean-tile-link[b-134cstg8a2]::after {
            right: 14px;
            top: 14px;
        }
}

/* =========================================================
   GOOGLE REVIEWS PANEL
   - Cohesive “final CTA” block
   - Small Google mark + short trust copy
   - Two CTAs: Read + Leave
   ========================================================= */

.reviews-panel[b-134cstg8a2] {
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255,255,255,0.14);
    background: radial-gradient(900px 260px at 15% 0%, rgba(227,160,181,0.10), transparent 60%), radial-gradient(900px 260px at 85% 0%, rgba(184,155,107,0.08), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
    box-shadow: 0 22px 55px rgba(0,0,0,0.40);
    padding: 1.25rem 1.35rem;
}

.reviews-header[b-134cstg8a2] {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 0.9rem;
}

/* Small “logo-like” mark that won’t fight the two buttons */
.google-mark-img[b-134cstg8a2] {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    padding: 6px;
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.14);
}

.reviews-title[b-134cstg8a2] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 650;
    letter-spacing: 0.01em;
}

    /* Underline accent (matches your Option C tile heading accent style) */
    .reviews-title[b-134cstg8a2]::after {
        content: "";
        display: block;
        width: 46px;
        height: 2px;
        margin-top: 0.45rem;
        background: linear-gradient( 90deg, rgba(227,160,181,0.65), rgba(184,155,107,0.60) );
        opacity: 0.6;
    }

.reviews-subtitle[b-134cstg8a2] {
    margin: 0.55rem 0 0;
    color: var(--muted);
    line-height: 1.6;
    max-width: 70ch;
}

.reviews-actions[b-134cstg8a2] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Mobile: stack buttons nicely */
@media (max-width: 640px) {
    .reviews-panel[b-134cstg8a2] {
        padding: 1.1rem 1.1rem;
    }

    .reviews-actions .btn[b-134cstg8a2] {
        min-width: 220px;
    }
}

/* =========================================================
   6) RESPONSIVE TUNING
   Keep responsive overrides at the bottom for easier studying.
   ========================================================= */

@media (max-width: 900px) {
    /* Intro stack */
    .home-intro-grid[b-134cstg8a2] {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    /* Highlight stack */
    .highlight-grid[b-134cstg8a2] {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }

    .highlight-media[b-134cstg8a2] {
        max-width: 100%;
    }

        .highlight-media img[b-134cstg8a2] {
            aspect-ratio: 16 / 9;
            object-position: center 30%;
        }

    /* Tiles stack */
    .tiles-images[b-134cstg8a2],
    .tiles-clean[b-134cstg8a2] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    /* Reduce global section padding on small screens */
    .section[b-134cstg8a2] {
        padding: var(--space-5) 0;
    }

    /* Remove extra top spacing on intro (so it hugs the banner nicely) */
    .home-intro.section[b-134cstg8a2] {
        padding-top: 0;
        margin-top: 0;
        padding-bottom: var(--space-5);
    }

    /* Special Events: slightly tighter */
    .highlight-wrap[b-134cstg8a2] {
        box-shadow: 0 18px 45px rgba(0,0,0,0.40);
    }

    .highlight-panel[b-134cstg8a2] {
        padding: 1rem;
    }

    /* If highlight buttons stack, keep them comfortable */
    .highlight-actions .btn[b-134cstg8a2] {
        min-width: 220px;
    }
}
/* /Pages/Scheduling.razor.rz.scp.css */
/* =========================================================
   SCHEDULING PAGE
   “App-like” flow: services → contact → preferred time
   ========================================================= */

/* ---------- Header ---------- */

.sched-head .eyebrow[b-1ox9kodr0m] {
    margin: 0 0 0.6rem;
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(227,160,181,0.85);
}

.head-grid[b-1ox9kodr0m] {
    display: grid;
    gap: var(--space-5);
    align-items: start;
}

.head-copy h2[b-1ox9kodr0m] {
    margin: 0 0 0.85rem;
    font-size: clamp(1.7rem, 2.8vw, 2.25rem);
    line-height: 1.15;
}

.lead[b-1ox9kodr0m] {
    margin: 0;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.75;
    max-width: 72ch;
}

/* Pricing note card (matches site vibe) */
.note-card[b-1ox9kodr0m] {
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255,255,255,0.12);
    background: radial-gradient(900px 260px at 20% 0%, rgba(227,160,181,0.10), transparent 60%), radial-gradient(900px 260px at 80% 0%, rgba(184,155,107,0.08), transparent 60%), rgba(255,255,255,0.05);
    box-shadow: 0 22px 55px rgba(0,0,0,0.35);
    padding: 1.1rem 1.15rem;
    max-width: 560px;
}

.note-title[b-1ox9kodr0m] {
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 0 0.45rem;
    color: rgba(255,255,255,0.90);
}

.note-card p[b-1ox9kodr0m] {
    margin: 0 0 1rem;
    color: rgba(255,255,255,0.72);
    line-height: 1.65;
}

.note-actions[b-1ox9kodr0m] {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
}

/* ---------- Panels ---------- */

.panel[b-1ox9kodr0m] {
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    box-shadow: 0 18px 45px rgba(0,0,0,0.30);
    padding: 1.25rem 1.25rem 1.35rem;
    margin-bottom: var(--space-5);
}

.panel-top[b-1ox9kodr0m] {
    margin-bottom: 1rem;
}

.panel-title[b-1ox9kodr0m] {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
}

.panel-sub[b-1ox9kodr0m] {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
    max-width: 72ch;
}

.panel--confirm[b-1ox9kodr0m] {
    position: relative;
}

    .panel--confirm[b-1ox9kodr0m]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 24px;
        right: 24px;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--accent), transparent);
        opacity: 0.6;
    }

.confirm-body[b-1ox9kodr0m] {
    margin-top: 0.75rem;
}

.confirm-line[b-1ox9kodr0m] {
    margin-top: 0.5rem;
    opacity: 0.9;
}

.confirm-meta[b-1ox9kodr0m] {
    margin-top: 1.25rem;
    font-size: 0.85rem;
    opacity: 0.6;
}

/* ---------- Service pills ---------- */

.service-grid[b-1ox9kodr0m] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.pill[b-1ox9kodr0m] {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.18);
    color: rgba(255,255,255,0.86);
    cursor: pointer;
    text-align: left;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

    .pill:hover[b-1ox9kodr0m] {
        transform: translateY(-1px);
        border-color: rgba(255,255,255,0.20);
        background: rgba(255,255,255,0.06);
    }

    .pill.selected[b-1ox9kodr0m] {
        border-color: rgba(227,160,181,0.40);
        background: linear-gradient( 90deg, rgba(227,160,181,0.16), rgba(184,155,107,0.12) ), rgba(255,255,255,0.05);
    }

.pill-text[b-1ox9kodr0m] {
    font-weight: 650;
    letter-spacing: 0.01em;
}

.pill-check[b-1ox9kodr0m] {
    width: 26px;
    height: 26px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(227,160,181,0.95);
    font-weight: 900;
}

/* ---------- Selected chips panel ---------- */

.selected-panel[b-1ox9kodr0m] {
    margin-top: 1rem;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
    padding: 0.95rem 1rem;
}

.selected-top[b-1ox9kodr0m] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.selected-title[b-1ox9kodr0m] {
    font-weight: 750;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.90);
}

.selected-empty[b-1ox9kodr0m] {
    margin: 0;
    color: rgba(255,255,255,0.66);
    line-height: 1.6;
}

.link-btn[b-1ox9kodr0m] {
    background: none;
    border: none;
    color: rgba(255,255,255,0.72);
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 4px;
}

    .link-btn:hover[b-1ox9kodr0m] {
        color: var(--text);
    }

.chip-row[b-1ox9kodr0m] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.chip[b-1ox9kodr0m] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.20);
    color: rgba(255,255,255,0.84);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}

    .chip:hover[b-1ox9kodr0m] {
        border-color: rgba(255,255,255,0.20);
        background: rgba(255,255,255,0.06);
    }

.chip-x[b-1ox9kodr0m] {
    opacity: 0.75;
}

/* Inline service error */
.inline-error[b-1ox9kodr0m] {
    margin-top: 0.8rem;
    color: rgba(255, 130, 130, 0.92);
}

/* ---------- Form fields ---------- */

.form-grid[b-1ox9kodr0m] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.field[b-1ox9kodr0m] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.field--full[b-1ox9kodr0m] {
    grid-column: 1 / -1;
}

label[b-1ox9kodr0m] {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.88);
}

.input[b-1ox9kodr0m] {
    padding: 0.75rem 0.9rem;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.20);
    color: rgba(255,255,255,0.88);
    outline: none;
}

    .input:focus[b-1ox9kodr0m] {
        border-color: rgba(227,160,181,0.45);
        box-shadow: 0 0 0 3px rgba(227,160,181,0.18);
    }

.input--area[b-1ox9kodr0m] {
    min-height: 120px;
    resize: vertical;
}

/* ValidationMessage inherits default styles; keep it readable */
[b-1ox9kodr0m] .validation-message {
    color: rgba(255, 160, 160, 0.95);
    font-size: 0.92rem;
}

/* ---------- Actions ---------- */

.actions[b-1ox9kodr0m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1.15rem;
}

.submit-btn[b-1ox9kodr0m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.05rem;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.16);
    background: linear-gradient( 90deg, rgba(227,160,181,0.22), rgba(184,155,107,0.18) ), rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.92);
    font-weight: 700;
    cursor: pointer;
    min-width: 220px;
}

    .submit-btn:disabled[b-1ox9kodr0m] {
        opacity: 0.7;
        cursor: not-allowed;
    }

.status[b-1ox9kodr0m] {
    font-size: 0.95rem;
    line-height: 1.4;
}

    .status.ok[b-1ox9kodr0m] {
        color: rgba(132, 214, 160, 0.95);
    }

    .status.bad[b-1ox9kodr0m] {
        color: rgba(255, 150, 150, 0.95);
    }

/* ---------- CTA buttons (small) ---------- */

.cta-btn[b-1ox9kodr0m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.7rem 0.9rem;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.86);
    text-decoration: none;
    font-weight: 650;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
    min-width: 140px;
}

    .cta-btn:hover[b-1ox9kodr0m] {
        transform: translateY(-1px);
        border-color: rgba(255,255,255,0.22);
        background: rgba(255,255,255,0.08);
    }

    .cta-btn.primary[b-1ox9kodr0m] {
        background: linear-gradient( 90deg, rgba(227,160,181,0.18), rgba(184,155,107,0.14) ), rgba(255,255,255,0.06);
    }

    .cta-btn.ghost[b-1ox9kodr0m] {
        background: transparent;
    }

.cta-ico[b-1ox9kodr0m] {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.12);
}

    .cta-ico.phone[b-1ox9kodr0m] {
        color: rgba(132, 214, 160, 0.95); /* soft green */
    }

/* ---------- Reveal animation ---------- */

@keyframes schedReveal-b-1ox9kodr0m {
    from {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.reveal[b-1ox9kodr0m] {
    animation: schedReveal-b-1ox9kodr0m 520ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .reveal[b-1ox9kodr0m] {
        animation: none;
    }
}

/* ---------- Responsive ---------- */

@media (min-width: 920px) {
    .head-grid[b-1ox9kodr0m] {
        grid-template-columns: 1.2fr 0.8fr;
        gap: var(--space-6);
        align-items: start;
    }

    /* Pills become a premium grid on desktop */
    .service-grid[b-1ox9kodr0m] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.85rem;
    }

    .form-grid[b-1ox9kodr0m] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .cta-btn[b-1ox9kodr0m] {
        width: 100%;
    }

    .submit-btn[b-1ox9kodr0m] {
        width: 100%;
        max-width: 420px;
    }

    .actions[b-1ox9kodr0m] {
        justify-content: center;
        text-align: center;
    }
}
/* /Pages/Services.razor.rz.scp.css */
/* =========================================================
   SERVICES PAGE
   Premium, minimal, scannable + safe pricing language
   ========================================================= */


/* =========================================================
   1) HEADER / INTRO
   ========================================================= */

.services-head .eyebrow[b-vzjmpqvdt7] {
    margin: 0 0 0.6rem;
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(227,160,181,0.85);
}

.head-grid[b-vzjmpqvdt7] {
    display: grid;
    gap: var(--space-5);
    align-items: start;
}

.head-copy h2[b-vzjmpqvdt7] {
    margin: 0 0 0.85rem;
    font-size: clamp(1.7rem, 2.8vw, 2.25rem);
    line-height: 1.15;
}

.lead[b-vzjmpqvdt7] {
    margin: 0 0 1.25rem;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.75;
    max-width: 68ch;
}


/* =========================================================
   2) TOP CTAs (Buttons + icons)
   ========================================================= */

.services-cta[b-vzjmpqvdt7] {
    display: grid;
    gap: 0.85rem;
    margin-top: 1.15rem;
}

.cta-btn[b-vzjmpqvdt7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.9rem 1.05rem;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.88);
    text-decoration: none;
    font-weight: 650;
    letter-spacing: 0.01em;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
    width: 100%;
    max-width: 360px; /* keeps them consistent & not overly wide */
}

    .cta-btn:hover[b-vzjmpqvdt7] {
        transform: translateY(-1px);
        border-color: rgba(255,255,255,0.22);
        background: rgba(255,255,255,0.08);
    }

    .cta-btn.primary[b-vzjmpqvdt7] {
        background: linear-gradient(90deg, rgba(227,160,181,0.22), rgba(184,155,107,0.18)), rgba(255,255,255,0.06);
        border-color: rgba(255,255,255,0.18);
    }

    .cta-btn.ghost[b-vzjmpqvdt7] {
        background: transparent;
    }

    .cta-btn.soft[b-vzjmpqvdt7] {
        background: rgba(255,255,255,0.07);
    }

/* Icon “chip” keeps emoji/SVG swaps from changing button size */
.cta-ico[b-vzjmpqvdt7] {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.12);
}

    .cta-ico svg[b-vzjmpqvdt7] {
        display: block;
    }

    /* Accent tints per icon type */
    .cta-ico.appt[b-vzjmpqvdt7] {
        color: rgba(99, 179, 237, 0.95); /* calm blue */
    }

    /* phone icon stays neutral (adjust later if desired) */
    .cta-ico.phone[b-vzjmpqvdt7] {
        color: rgba(120, 200, 140, 0.95);
    }


/* =========================================================
   3) PRICING NOTE PANEL
   ========================================================= */

.price-note[b-vzjmpqvdt7] {
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255,255,255,0.12);
    background: radial-gradient(900px 260px at 20% 0%, rgba(227,160,181,0.10), transparent 60%), radial-gradient(900px 260px at 80% 0%, rgba(184,155,107,0.08), transparent 60%), rgba(255,255,255,0.05);
    box-shadow: 0 22px 55px rgba(0,0,0,0.35);
    padding: 1.1rem 1.15rem;
}

.price-note-title[b-vzjmpqvdt7] {
    font-weight: 750;
    letter-spacing: 0.02em;
    margin: 0 0 0.45rem;
    color: rgba(255,255,255,0.90);
}

.price-note p[b-vzjmpqvdt7] {
    margin: 0;
    color: rgba(255,255,255,0.72);
    line-height: 1.65;
}

/* =========================================================
   SERVICES — IMAGE BANDS (cinematic + full-bleed)
   ========================================================= */

.img-band[b-vzjmpqvdt7] {
    position: relative;
    height: clamp(140px, 22vw, 220px); /* short + cinematic */
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

    .img-band img[b-vzjmpqvdt7] {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
        filter: saturate(0.95) contrast(1.05);
    }

    /* Soft gradient overlay to match the site */
    .img-band[b-vzjmpqvdt7]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.10) 35%, rgba(0,0,0,0.55) 100%);
        pointer-events: none;
    }

    /* Full-bleed helper */
    .img-band.bleed[b-vzjmpqvdt7] {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

/* Mobile tweak: slightly taller so it doesn't feel cramped */
@media (max-width: 640px) {
    .img-band[b-vzjmpqvdt7] {
        height: 170px;
    }
}

/* =========================================================
   4) SERVICES CARDS GRID
   ========================================================= */

.cards[b-vzjmpqvdt7] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.service-card[b-vzjmpqvdt7] {
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    padding: 1.15rem 1.15rem 1.1rem;
    box-shadow: 0 18px 45px rgba(0,0,0,0.30);
}

.service-top[b-vzjmpqvdt7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.65rem;
}

.service-card h3[b-vzjmpqvdt7] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 750;
    letter-spacing: 0.01em;
}

/* Price block */
.service-price[b-vzjmpqvdt7] {
    text-align: right;
    min-width: 150px;
}

.price-line[b-vzjmpqvdt7] {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.45rem;
}

.price-label[b-vzjmpqvdt7] {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.62);
}

.price-value[b-vzjmpqvdt7] {
    font-weight: 800;
    color: rgba(255,255,255,0.92);
}

.price-sub[b-vzjmpqvdt7] {
    margin-top: 0.25rem;
    font-size: 0.86rem;
    color: rgba(255,255,255,0.62);
    font-style: italic;
}

.service-desc[b-vzjmpqvdt7] {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
    max-width: 72ch;
}


/* =========================================================
   5) “NOT SURE?” HELP PANEL
   ========================================================= */

.services-help .container[b-vzjmpqvdt7] {
    /* keeps it consistent with the rest of the site spacing */
}

.help-card[b-vzjmpqvdt7] {
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255,255,255,0.12);
    background: radial-gradient(900px 260px at 20% 0%, rgba(227,160,181,0.10), transparent 60%), radial-gradient(900px 260px at 80% 0%, rgba(184,155,107,0.08), transparent 60%), rgba(255,255,255,0.05);
    box-shadow: 0 22px 55px rgba(0,0,0,0.40);
    padding: 1.25rem 1.25rem 1.35rem;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 1.25rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.help-copy h3[b-vzjmpqvdt7] {
    margin: 0 0 0.45rem;
    font-size: 1.1rem;
}

.help-copy p[b-vzjmpqvdt7] {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
    max-width: 70ch;
}

.help-actions[b-vzjmpqvdt7] {
    display: grid;
    gap: 0.75rem;
    justify-items: end;
}

    /* Make help panel buttons same width as each other on desktop */
    .help-actions .cta-btn[b-vzjmpqvdt7] {
        width: 320px;
        max-width: 100%;
    }


/* =========================================================
   6) RESPONSIVE BREAKPOINTS
   ========================================================= */

/* Desktop layout */
@media (min-width: 920px) {
    .head-grid[b-vzjmpqvdt7] {
        grid-template-columns: 1.25fr 0.75fr;
        gap: var(--space-6);
    }

    .services-cta[b-vzjmpqvdt7] {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        justify-content: start;
        align-items: center;
    }

        .services-cta .cta-btn[b-vzjmpqvdt7] {
            width: 320px; /* keeps both top CTAs even */
            max-width: 100%;
        }

    .cards[b-vzjmpqvdt7] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.15rem;
    }
}

/* Mobile adjustments */
@media (max-width: 900px) {
    .services-cta[b-vzjmpqvdt7] {
        justify-items: center;
    }

    .help-card[b-vzjmpqvdt7] {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .help-actions[b-vzjmpqvdt7] {
        justify-items: center;
    }
}

/* Small phones: prevent price layout from feeling cramped */
@media (max-width: 640px) {
    .service-top[b-vzjmpqvdt7] {
        flex-direction: column;
        align-items: flex-start;
    }

    .service-price[b-vzjmpqvdt7] {
        text-align: left;
        min-width: 0;
    }

    .price-line[b-vzjmpqvdt7] {
        justify-content: flex-start;
    }
}
/* /Pages/Showcase.razor.rz.scp.css */
/* =========================================================
   SHOWCASE PAGE
   Option A: clean gallery grid + subtle social strip + calm modal
   ========================================================= */


/* =========================================================
   1) Header (title + lead + follow card)
   ========================================================= */

.showcase-head .eyebrow[b-6ir8smefji] {
    margin: 0 0 0.6rem;
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(227,160,181,0.85);
}

.head-grid[b-6ir8smefji] {
    display: grid;
    gap: var(--space-5);
    align-items: start;
}

.head-copy h2[b-6ir8smefji] {
    margin: 0 0 0.85rem;
    font-size: clamp(1.7rem, 2.8vw, 2.25rem);
    line-height: 1.15;
}

.lead[b-6ir8smefji] {
    margin: 0;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.75;
    max-width: 72ch;
}

/* Follow strip (calm, not loud) */
.follow-card[b-6ir8smefji] {
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    box-shadow: 0 18px 45px rgba(0,0,0,0.30);
    padding: 1rem 1.05rem;
    max-width: 520px;
}

.follow-title[b-6ir8smefji] {
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 0 0.7rem;
    color: rgba(255,255,255,0.90);
}

.follow-row[b-6ir8smefji] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.follow-btn[b-6ir8smefji] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.7rem 0.9rem;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.84);
    text-decoration: none;
    font-weight: 600;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
    min-width: 150px;
}

    .follow-btn:hover[b-6ir8smefji] {
        transform: translateY(-1px);
        border-color: rgba(255,255,255,0.20);
        background: rgba(255,255,255,0.07);
        color: var(--text);
    }

.follow-ico[b-6ir8smefji] {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.12);
    font-weight: 800;
    letter-spacing: 0.02em;
}


/* =========================================================
   2) Gallery grid (clickable tiles)
   ========================================================= */

.gallery[b-6ir8smefji] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Tile is a <button>, so style it like a tile (not a default button) */
.shot-btn[b-6ir8smefji] {
    width: 100%;
    padding: 0;
    cursor: pointer;
    text-align: left;
    background: none;
    border: none;
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.03);
    box-shadow: 0 18px 45px rgba(0,0,0,0.30);
    transform: translateZ(0);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

    .shot-btn:hover[b-6ir8smefji] {
        transform: translateY(-2px);
        border-color: rgba(255,255,255,0.18);
        box-shadow: 0 22px 55px rgba(0,0,0,0.38);
    }

    .shot-btn img[b-6ir8smefji] {
        width: 100%;
        display: block;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        transform: scale(1.01);
        transition: transform 240ms ease, filter 240ms ease;
    }

    .shot-btn:hover img[b-6ir8smefji] {
        transform: scale(1.05);
        filter: saturate(1.03);
    }

/* Category tag badge */
.tag[b-6ir8smefji] {
    position: absolute;
    left: 0.85rem;
    bottom: 0.85rem;
    padding: 0.45rem 0.65rem;
    border-radius: 999px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.88);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    backdrop-filter: blur(8px);
}

/* Accessible keyboard focus */
.shot-btn:focus-visible[b-6ir8smefji] {
    outline: 3px solid rgba(227,160,181,0.35);
    outline-offset: 3px;
    border-radius: var(--radius-xl);
}


/* =========================================================
   3) Bottom CTA (book / call)
   ========================================================= */

.showcase-cta .cta-panel[b-6ir8smefji] {
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255,255,255,0.12);
    background: radial-gradient(900px 260px at 20% 0%, rgba(227,160,181,0.10), transparent 60%), radial-gradient(900px 260px at 80% 0%, rgba(184,155,107,0.08), transparent 60%), rgba(255,255,255,0.05);
    box-shadow: 0 22px 55px rgba(0,0,0,0.40);
    padding: 1.25rem 1.25rem 1.35rem;
    display: grid;
    gap: 1.25rem;
    align-items: center;
}

.showcase-cta h3[b-6ir8smefji] {
    margin: 0 0 0.45rem;
    font-size: 1.1rem;
}

.showcase-cta p[b-6ir8smefji] {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
    max-width: 72ch;
}

.cta-actions[b-6ir8smefji] {
    display: grid;
    gap: 0.75rem;
    justify-items: end;
}

/* Uses your Services-style CTA button system */
.cta-btn[b-6ir8smefji] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.9rem 1.05rem;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.88);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
    min-width: 240px;
}

    .cta-btn:hover[b-6ir8smefji] {
        transform: translateY(-1px);
        border-color: rgba(255,255,255,0.22);
        background: rgba(255,255,255,0.08);
    }

    .cta-btn.primary[b-6ir8smefji] {
        background: linear-gradient(90deg, rgba(227,160,181,0.22), rgba(184,155,107,0.18)), rgba(255,255,255,0.06);
        border-color: rgba(255,255,255,0.18);
    }

    .cta-btn.ghost[b-6ir8smefji] {
        background: transparent;
    }

.cta-ico[b-6ir8smefji] {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.12);
}

    /* Phone icon tint (icon only) */
    .cta-ico.phone[b-6ir8smefji] {
        color: rgba(132, 214, 160, 0.95);
    }


/* =========================================================
   4) Modal viewer (calm: no autoplay, no flashy motion)
   ========================================================= */

.modal-backdrop[b-6ir8smefji] {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0,0,0,0.72);
    display: grid;
    place-items: center;
    padding: 1rem;
    /* Helps prevent scroll chaining on mobile */
    overscroll-behavior: contain;
}

/* NOTE: Uses :has() — modern browsers. If you ever need a fallback,
   you can toggle a body class via JS interop. */
body:has(.modal-backdrop)[b-6ir8smefji] {
    overflow: hidden;
}

.modal[b-6ir8smefji] {
    width: min(980px, 100%);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(10,10,14,0.92);
    box-shadow: 0 30px 80px rgba(0,0,0,0.55);
    position: relative;
    overflow: hidden;
}

.modal-close[b-6ir8smefji] {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.9);
    cursor: pointer;
}

.modal-body[b-6ir8smefji] {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 0.35rem;
    padding: 1rem 0.8rem 0.9rem;
}

.modal-img[b-6ir8smefji] {
    width: 100%;
    max-height: min(78vh, 720px);
    object-fit: contain;
    display: block;
    border-radius: calc(var(--radius-xl) - 10px);
    background: rgba(0,0,0,0.18);
}

.modal-nav[b-6ir8smefji] {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
}


/* =========================================================
   5) Responsive layout
   ========================================================= */

/* Desktop layout */
@media (min-width: 920px) {
    .head-grid[b-6ir8smefji] {
        grid-template-columns: 1.2fr 0.8fr;
        gap: var(--space-6);
        align-items: start;
    }

    .gallery[b-6ir8smefji] {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.15rem;
    }

    .showcase-cta .cta-panel[b-6ir8smefji] {
        grid-template-columns: 1.2fr 0.8fr;
    }
}

@media (min-width: 920px) {
    .cta-actions[b-6ir8smefji] {
        grid-auto-columns: 1fr;
    }

        .cta-actions .cta-btn[b-6ir8smefji] {
            width: 260px;
        }
}


/* Tablet/mobile */
@media (max-width: 900px) {
    .follow-card[b-6ir8smefji] {
        max-width: 100%;
    }

    .follow-row[b-6ir8smefji] {
        justify-content: center;
    }

    .follow-btn[b-6ir8smefji] {
        min-width: 160px;
    }

    .cta-actions[b-6ir8smefji] {
        justify-items: center;
    }

    .cta-btn[b-6ir8smefji] {
        width: 100%;
        max-width: 360px;
    }
}

/* Small phones */
@media (max-width: 640px) {
    /* Wider aspect ratio on small screens so the grid scrolls easier */
    .shot-btn img[b-6ir8smefji] {
        aspect-ratio: 16 / 11;
    }

    /* Hide arrows on mobile (swipe can be added later if desired) */
    .modal-body[b-6ir8smefji] {
        grid-template-columns: 1fr;
        padding: 0.9rem;
    }

    .modal-nav[b-6ir8smefji] {
        display: none;
    }

    .modal-img[b-6ir8smefji] {
        max-height: 78vh;
    }
}
/* /Pages/Stylists.razor.rz.scp.css */
/* =========================================================
   STYLISTS PAGE
   Option D: alternating layout, photo-first, less “card” feel
   ========================================================= */

/* Header */
.stylists-head .eyebrow[b-1uzj692xv4] {
    margin: 0 0 0.6rem;
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(227,160,181,0.85);
}

.stylists-head h2[b-1uzj692xv4] {
    margin: 0 0 0.85rem;
    font-size: clamp(1.7rem, 2.8vw, 2.25rem);
    line-height: 1.15;
}

.stylists-head .lead[b-1uzj692xv4] {
    margin: 0;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.75;
    max-width: 70ch;
}

/* List */
.stylists-list[b-1uzj692xv4] {
    padding-top: var(--space-6);
}

.stylist[b-1uzj692xv4] {
    margin: 0 0 var(--space-6);
}

/* Layout: image + bio */
.stylist-grid[b-1uzj692xv4] {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-6);
    align-items: center;
}

/* Alternate every other stylist */
.stylist:nth-child(even) .stylist-media[b-1uzj692xv4] {
    order: 2;
}

.stylist:nth-child(even) .stylist-bio[b-1uzj692xv4] {
    order: 1;
}

/* Media */
.stylist-media[b-1uzj692xv4] {
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    box-shadow: 0 22px 55px rgba(0,0,0,0.35);
}

    .stylist-media img[b-1uzj692xv4] {
        width: 100%;
        display: block;
        aspect-ratio: 4 / 5; /* portrait-friendly without being huge */
        object-fit: cover;
        object-position: center;
    }

/* Bio */
.stylist-name[b-1uzj692xv4] {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
    letter-spacing: 0.01em;
}

.stylist-sub[b-1uzj692xv4] {
    margin: 0 0 1rem;
    color: rgba(255,255,255,0.72);
    line-height: 1.55;
}

.stylist-text[b-1uzj692xv4] {
    margin: 0 0 1.15rem;
    color: var(--muted);
    line-height: 1.75;
    max-width: 75ch;
}

/* =========================================================
   Per-stylist CTAs (reusing your Services-style vibe)
   ========================================================= */

.stylist-cta[b-1uzj692xv4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
}

/* Button base */
.cta-btn[b-1uzj692xv4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.9rem 1.05rem;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.88);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
    min-width: 220px;
}

    .cta-btn:hover[b-1uzj692xv4] {
        transform: translateY(-1px);
        border-color: rgba(255,255,255,0.22);
        background: rgba(255,255,255,0.08);
    }

    .cta-btn.primary[b-1uzj692xv4] {
        background: linear-gradient( 90deg, rgba(227,160,181,0.22), rgba(184,155,107,0.18) ), rgba(255,255,255,0.06);
        border-color: rgba(255,255,255,0.18);
    }

    .cta-btn.ghost[b-1uzj692xv4] {
        background: transparent;
    }

/* Icon “chip” */
.cta-ico[b-1uzj692xv4] {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.12);
}

    /* Make phone chip feel “green” without relying on emoji colors */
    .cta-ico.phone[b-1uzj692xv4] {
        background: rgba(48, 205, 90, 0.12);
        border-color: rgba(48, 205, 90, 0.24);
        color: rgba(120, 255, 165, 0.95);
    }

/* Divider between stylists (lighter than main page dividers) */
.accent-divider.soft[b-1uzj692xv4] {
    margin: var(--space-6) 0 0;
    opacity: 0.55;
}

/* =========================================================
   STYLISTS — “OPEN CHAIR” CTA (Option C)
   Image + centered copy, matches current site feel
   ========================================================= */

.chair-card[b-1uzj692xv4] {
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    box-shadow: 0 22px 55px rgba(0,0,0,0.35);
    overflow: hidden;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: stretch;
}

/* Image side */
.chair-media[b-1uzj692xv4] {
    background: rgba(0,0,0,0.18);
    border-right: 1px solid rgba(255,255,255,0.10);
}

    .chair-media img[b-1uzj692xv4] {
        width: 100%;
        height: 100%;
        display: block;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;
    }

/* Copy side */
.chair-copy[b-1uzj692xv4] {
    padding: 1.5rem 1.6rem;
    text-align: center;
    display: grid;
    align-content: center;
    gap: 0.75rem;
}

.chair-title[b-1uzj692xv4] {
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: 0.01em;
}

.chair-text[b-1uzj692xv4] {
    margin: 0;
    color: rgba(255,255,255,0.78);
    line-height: 1.7;
    font-size: 1.02rem;
}

.chair-text-strong[b-1uzj692xv4] {
    color: rgba(255,255,255,0.90);
    font-weight: 650;
}

/* Buttons */
.chair-actions[b-1uzj692xv4] {
    margin-top: 0.35rem;
    display: flex;
    gap: 0.85rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Mobile: stack image on top */
@media (max-width: 900px) {
    .chair-card[b-1uzj692xv4] {
        grid-template-columns: 1fr;
    }

    .chair-media[b-1uzj692xv4] {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.10);
    }

        .chair-media img[b-1uzj692xv4] {
            aspect-ratio: 16 / 10;
            object-position: center;
        }

    .chair-copy[b-1uzj692xv4] {
        padding: 1.25rem 1.15rem;
    }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 900px) {
    .stylist-grid[b-1uzj692xv4] {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    /* When stacked, keep image first for all */
    .stylist:nth-child(even) .stylist-media[b-1uzj692xv4],
    .stylist:nth-child(even) .stylist-bio[b-1uzj692xv4] {
        order: initial;
    }

    .stylist-bio[b-1uzj692xv4] {
        text-align: left;
    }

    .stylist-cta[b-1uzj692xv4] {
        justify-content: center;
        text-align: center;
    }

    .cta-btn[b-1uzj692xv4] {
        width: 100%;
        max-width: 360px;
    }

    .stylist-media img[b-1uzj692xv4] {
        aspect-ratio: 16 / 11; /* less tall on phones */
    }
}