/* ==========================================================================
   HAILIFU PREMIUM LAYER (2026 rebuild)
   Loaded after style.css + inline <style> blocks. Selectors are prefixed with
   `html body` so they win without !important. Only public-site surfaces are
   styled here, plus the admin login + media manager (bottom of file).
   Accent follows --brand-primary so Admin > Site Control branding still works.
   ========================================================================== */

:root {
    --p-accent: var(--brand-primary, #ff7a18);
    --p-accent-strong: color-mix(in srgb, var(--p-accent) 88%, #000);
    --p-accent-soft: color-mix(in srgb, var(--p-accent) 14%, transparent);
    --p-on-accent: #160d04;

    --p-bg: #0f1012;
    --p-bg-2: #131417;
    --p-surface: #17191c;
    --p-surface-2: #1e2125;
    --p-line: rgba(255, 255, 255, 0.08);
    --p-line-strong: rgba(255, 255, 255, 0.14);
    --p-text: #f2f1ee;
    --p-muted: #a4a7ae;
    --p-link: var(--p-accent);
    --p-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 48px -24px rgba(0, 0, 0, 0.6);

    --p-radius: 16px;
    --p-radius-sm: 10px;
    --p-pill: 999px;
    --p-max: 1240px;
    --p-gutter: clamp(16px, 4vw, 40px);
    --p-section: clamp(72px, 10vw, 128px);

    --p-font: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --p-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --p-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme='light'] {
    --p-accent-strong: color-mix(in srgb, var(--p-accent) 78%, #000);
    --p-bg: #f4f4f2;
    --p-bg-2: #eeeeec;
    --p-surface: #ffffff;
    --p-surface-2: #f0f0ee;
    --p-line: rgba(18, 19, 22, 0.09);
    --p-line-strong: rgba(18, 19, 22, 0.16);
    --p-text: #131417;
    --p-muted: #575a61;
    --p-link: color-mix(in srgb, var(--p-accent) 72%, #000);
    --p-shadow: 0 1px 2px rgba(18, 19, 22, 0.04), 0 20px 40px -24px rgba(18, 19, 22, 0.18);
}

/* ---------- Base ---------- */
html body {
    background: var(--p-bg);
    color: var(--p-text);
    font-family: var(--p-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

html body :where(h1, h2, h3, h4, p, a, button, span, li, label, input, select, textarea) {
    font-family: var(--p-font);
}

html body ::selection { background: var(--p-accent); color: var(--p-on-accent); }

html body :focus-visible {
    outline: 2px solid var(--p-accent);
    outline-offset: 3px;
}

html { scroll-padding-top: 88px; }

/* ---------- Navigation ---------- */
html body .main-nav {
    top: 12px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(calc(100% - 24px), var(--p-max));
    height: 64px;
    padding: 0 10px 0 14px;
    display: flex;
    align-items: center;
    gap: 24px;
    border-radius: var(--p-pill);
    background: color-mix(in srgb, var(--p-bg) 72%, transparent);
    border: 1px solid var(--p-line);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}

html body .main-nav.is-hidden { transform: translateX(-50%) translateY(-120%); }

html body .main-nav .logo {
    font-family: var(--p-font);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--p-text);
    gap: 10px;
    white-space: nowrap;
}
html body .main-nav .logo span:not(.whatsapp-logo) { color: var(--p-accent); font-weight: 800; }
html body .main-nav .logo .whatsapp-logo {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: var(--p-surface-2) !important;
    border: 1px solid var(--p-line) !important;
}

html body .premium-nav-links {
    display: flex;
    gap: 4px;
    margin-left: auto;
}
html body .premium-nav-links a {
    padding: 8px 14px;
    border-radius: var(--p-pill);
    color: var(--p-muted);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}
html body .premium-nav-links a:hover { color: var(--p-text); background: var(--p-line); }

html body .main-nav-actions {
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

html body .premium-nav-cta {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 18px;
    border-radius: var(--p-pill);
    background: var(--p-accent);
    color: var(--p-on-accent);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s var(--p-ease), background-color 0.2s ease;
}
html body .premium-nav-cta:hover { background: var(--p-accent-strong); color: var(--p-on-accent); }
html body .premium-nav-cta:active { transform: scale(0.97); }

html body .main-nav .site-share-btn,
html body .main-nav .theme-toggle {
    height: 42px;
    min-width: 42px;
    border-radius: var(--p-pill);
    background: transparent;
    border: 1px solid var(--p-line-strong);
    color: var(--p-text);
    box-shadow: none;
}
html body .main-nav .site-share-btn .site-share-btn-icon { background: transparent; color: var(--p-text); border: 0; box-shadow: none; }
html body .main-nav .site-share-btn .site-share-btn-label { color: var(--p-text); letter-spacing: 0; text-transform: none; font-weight: 500; }

@media (max-width: 1080px) {
    html body .premium-nav-links { display: none; }
    html body .main-nav-actions { margin-left: auto; }
}
@media (max-width: 640px) {
    html body .main-nav { height: 58px; gap: 8px; top: 8px; width: calc(100% - 16px); }
    html body .main-nav .logo { font-size: 0.95rem; }
    html body .main-nav .logo .whatsapp-logo { width: 36px !important; height: 36px !important; }
    html body .main-nav .site-share-btn { display: none; }
    html body .premium-nav-cta { height: 38px; padding: 0 14px; font-size: 0.85rem; }
    html body .main-nav .theme-toggle { height: 38px; min-width: 38px; width: 38px; }
}
@media (max-width: 400px) {
    html body .main-nav .logo > span:not(.whatsapp-logo) { display: none; }
}

/* ---------- Hero ---------- */
html body .hero {
    position: relative;
    min-height: min(100dvh, 920px);
    padding: 120px var(--p-gutter) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    text-align: left;
    overflow: hidden;
    background: #0b0b0c;
}
html body .hero::before,
html body .hero::after { display: none; }

html body .hero-video-container { position: absolute; inset: 0; z-index: 0; }
html body .hero-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;
    opacity: 1;
}
html body .hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(10, 10, 11, 0.92) 0%, rgba(10, 10, 11, 0.72) 42%, rgba(10, 10, 11, 0.2) 100%),
        linear-gradient(0deg, rgba(10, 10, 11, 0.9) 0%, rgba(10, 10, 11, 0) 35%);
}

html body .hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--p-max);
    margin: 0 auto;
    padding: 0 0 clamp(72px, 12vh, 132px);
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-align: left;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    animation: none;
}
html body .hero-content > * { max-width: 680px; }

html body .hero .brand-tagline {
    margin: 0 0 20px;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--p-accent);
    background: none;
    border: 0;
    text-shadow: none;
}

html body .hero h1 {
    margin: 0;
    font-family: var(--p-font);
    font-size: clamp(2.6rem, 6vw, 4.75rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: #f5f4f1;
    text-transform: none;
    text-shadow: none;
    background: none;
    -webkit-text-fill-color: currentColor;
}

html body .hero .hero-slogan {
    margin: 14px 0 0;
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-transform: none;
    color: rgba(245, 244, 241, 0.62);
    text-shadow: none;
    background: none;
    -webkit-text-fill-color: currentColor;
}
html body .hero .hero-slogan::first-letter { text-transform: uppercase; }
html body .hero .hero-security {
    color: var(--p-accent);
    -webkit-text-fill-color: currentColor;
    background: none;
    text-shadow: none;
}

html body .hero .hero-slogan-sub {
    margin: 24px 0 0;
    max-width: 52ch;
    font-size: 1.08rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(245, 244, 241, 0.78);
    text-shadow: none;
}

html body .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 36px;
}

html body .hero .btn,
html body .hero-actions .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 26px;
    margin: 0;
    border-radius: var(--p-pill);
    font-family: var(--p-font);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.25s var(--p-ease), background-color 0.2s ease, border-color 0.2s ease;
    animation: none;
}
html body .hero .btn {
    background: var(--p-accent);
    color: var(--p-on-accent);
    border: 0;
    box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--p-accent) 70%, transparent);
}
html body .hero .btn:hover { background: var(--p-accent-strong); color: var(--p-on-accent); transform: translateY(-2px); }
html body .hero-actions .btn-ghost {
    color: #f5f4f1;
    border: 1px solid rgba(245, 244, 241, 0.28);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
html body .hero-actions .btn-ghost:hover { border-color: rgba(245, 244, 241, 0.6); background: rgba(255, 255, 255, 0.1); }
html body .hero .btn:active,
html body .hero-actions .btn-ghost:active { transform: scale(0.98); }

/* Role marquee: the single marquee on the page, docked to the hero's bottom edge */
html body .hero > .service-bar {
    position: relative;
    z-index: 2;
    width: calc(100% + 2 * var(--p-gutter));
    max-width: none;
    margin: 0 calc(-1 * var(--p-gutter));
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(10, 10, 11, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    mask-image: none;
    -webkit-mask-image: none;
}
html body .hero > .service-bar .service-bar-inner {
    display: flex;
    width: max-content;
    gap: 48px;
    animation: premium-marquee 38s linear infinite;
}
html body .hero > .service-bar .service-chip {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: rgba(245, 244, 241, 0.7);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    white-space: nowrap;
}
html body .hero > .service-bar .service-chip::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 48px;
    border-radius: 50%;
    background: var(--p-accent);
    vertical-align: middle;
    opacity: 0.8;
}
@keyframes premium-marquee { to { transform: translateX(-50%); } }

@media (max-width: 768px) {
    html body .hero { padding-top: 96px; min-height: 100dvh; }
    html body .hero-scrim {
        background: linear-gradient(0deg, rgba(10, 10, 11, 0.95) 0%, rgba(10, 10, 11, 0.7) 55%, rgba(10, 10, 11, 0.45) 100%);
    }
    html body .hero-content { justify-content: flex-end; flex: 1; padding-bottom: 40px; }
    html body .hero h1 { font-size: clamp(2.3rem, 11vw, 3rem); }
    html body .hero .hero-slogan-sub { font-size: 1rem; }
    html body .hero-actions { width: 100%; }
    html body .hero .btn,
    html body .hero-actions .btn-ghost { flex: 1 1 100%; }
}

/* ---------- Shared section rhythm ---------- */
html body .section,
html body section.showcase,
html body section.modern-review-section {
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    margin: 0 auto;
    max-width: none;
    padding: var(--p-section) var(--p-gutter);
}
html body .glass-panel { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

html body .section-title,
html body .showcase-heading h2 {
    max-width: var(--p-max);
    margin: 0 auto 14px;
    font-family: var(--p-font);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-align: left;
    text-transform: none;
    color: var(--p-text);
    background: none;
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
}
html body .section-title::after,
html body .section-title::before,
html body .showcase-heading h2::after { display: none; }
html body .section-title a { color: inherit; -webkit-text-fill-color: currentColor; background: none; text-decoration: none; }

html body .section-subtitle,
html body .showcase-heading .section-description {
    max-width: var(--p-max);
    margin: 0 auto 48px;
    padding-right: max(0px, calc(100% - 60ch));
    font-size: 1.08rem;
    line-height: 1.6;
    text-align: left;
    color: var(--p-muted);
}

/* ---------- Trust strip: three commitments separated by hairlines ---------- */
html body #trust-strip { padding-top: 0; padding-bottom: 0; }
html body .premium-trust-grid {
    max-width: var(--p-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-bottom: 1px solid var(--p-line);
}
html body .premium-trust-card {
    padding: 40px 32px 44px 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
}
html body .premium-trust-card + .premium-trust-card { padding-left: 32px; border-left: 1px solid var(--p-line); }
html body .premium-trust-card i {
    display: inline-flex;
    margin: 0 0 16px;
    font-size: 1.1rem;
    color: var(--p-accent);
    background: none;
    box-shadow: none;
}
html body .premium-trust-card h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--p-text); text-transform: none; }
html body .premium-trust-card p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--p-muted); }
@media (max-width: 768px) {
    html body .premium-trust-grid { grid-template-columns: 1fr; }
    html body .premium-trust-card,
    html body .premium-trust-card + .premium-trust-card { padding: 28px 0; border-left: 0; }
    html body .premium-trust-card + .premium-trust-card { border-top: 1px solid var(--p-line); }
}

/* ---------- Featured work ---------- */
html body #featured-work .featured-bento { max-width: var(--p-max); margin: 0 auto; }
html body #featured-work .featured-loop-viewport,
html body #featured-work .featured-card,
html body #featured-work .featured-loop-slide {
    border-radius: var(--p-radius);
    border-color: var(--p-line);
}

/* ---------- Showcase ---------- */
html body #showcase .showcase-content,
html body #showcase .showcase-header,
html body #showcase .showcase-heading { max-width: var(--p-max); margin-left: auto; margin-right: auto; text-align: left; }
html body #showcase .showcase-heading { display: block; }
html body .showcase-filters {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    margin: 0 0 32px;
    padding: 2px 2px 8px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}
html body .showcase-filters::-webkit-scrollbar { display: none; }
html body .showcase-filters .filter-btn {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 16px;
    border-radius: var(--p-pill);
    border: 1px solid var(--p-line-strong);
    background: transparent;
    color: var(--p-muted);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    scroll-snap-align: start;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
html body .showcase-filters .filter-btn:hover { color: var(--p-text); border-color: var(--p-muted); }
html body .showcase-filters .filter-btn.active {
    background: var(--p-text);
    border-color: var(--p-text);
    color: var(--p-bg);
}

html body .showcase-grid {
    max-width: var(--p-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
html body .showcase-item.card {
    position: relative;
    aspect-ratio: 4 / 3;
    min-height: 0;
    height: auto;
    padding: 0;
    border-radius: var(--p-radius);
    border: 1px solid var(--p-line);
    background: var(--p-surface);
    box-shadow: none;
    overflow: hidden;
    transform: none;
    transition: transform 0.4s var(--p-ease), border-color 0.3s ease;
}
html body .showcase-item.card:hover { transform: translateY(-4px); border-color: var(--p-line-strong); }
html body .showcase-item.card img,
html body .showcase-item.card video { transition: transform 0.8s var(--p-ease); }
html body .showcase-item.card:hover img,
html body .showcase-item.card:hover video { transform: scale(1.04); }
html body .showcase-item .project-category {
    top: 14px;
    left: 14px;
    padding: 5px 10px;
    border-radius: var(--p-pill);
    background: rgba(10, 10, 11, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #f5f4f1;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    box-shadow: none;
}
html body .showcase-item .showcase-overlay {
    background: linear-gradient(0deg, rgba(10, 10, 11, 0.88) 0%, rgba(10, 10, 11, 0) 60%);
    padding: 20px;
    justify-content: flex-end;
    text-align: left;
    align-items: flex-start;
}
html body .showcase-item .showcase-title {
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #f5f4f1;
    text-transform: none;
    text-shadow: none;
}
html body .showcase-item .showcase-description { color: rgba(245, 244, 241, 0.75); font-size: 0.9rem; line-height: 1.5; }

/* ---------- About / Why Hailifu ---------- */
html body #about .about-grid {
    max-width: var(--p-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 6vw, 88px);
    align-items: start;
}
html body #about .about-visual { position: sticky; top: 100px; }
html body #about .about-visual-panel {
    border-radius: var(--p-radius);
    background: var(--p-surface);
    border: 1px solid var(--p-line);
    box-shadow: var(--p-shadow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html body #about .about-visual-image-wrap { border-radius: var(--p-radius-sm); overflow: hidden; aspect-ratio: 4 / 5; max-height: 560px; }
html body #about .about-visual-image,
html body #about .about-visual-video { width: 100%; height: 100%; object-fit: cover; }
html body #about .about-visual-ring,
html body #about .about-visual-lines { display: none; }
html body #about .about-visual-eyebrow { color: var(--p-muted); font-family: var(--p-mono); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.72rem; }
html body #about .about-visual-title { color: var(--p-text); font-weight: 600; }
html body #about .about-visual-badge {
    border-radius: var(--p-pill);
    background: var(--p-accent-soft);
    color: var(--p-link);
    border: 0;
    box-shadow: none;
    font-family: var(--p-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
}
html body #about .about-visual-stat { background: var(--p-surface-2); border: 1px solid var(--p-line); border-radius: var(--p-radius-sm); }
html body #about .about-visual-stat span { color: var(--p-muted); font-size: 0.75rem; text-transform: none; letter-spacing: 0; }
html body #about .about-visual-stat strong { color: var(--p-text); font-family: var(--p-mono); font-weight: 500; }

html body #about .about-details .section-title,
html body #about .about-details .section-subtitle { margin-left: 0; padding-right: 0; }
html body #about .about-benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
    counter-reset: benefit;
}
html body #about .about-benefits li {
    display: block;
    margin: 0;
    padding: 24px 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--p-line);
    border-radius: 0;
    box-shadow: none;
    transform: none;
}
html body #about .about-benefits li:last-child { grid-column: 1 / -1; }
html body #about .about-benefits li > i {
    display: inline-flex;
    margin: 0 0 12px;
    font-size: 1rem;
    color: var(--p-accent);
    background: none;
    box-shadow: none;
}
html body #about .about-benefit-content h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--p-text); text-transform: none; }
html body #about .about-benefit-content p { margin: 0; color: var(--p-muted); line-height: 1.6; font-size: 0.95rem; }
@media (max-width: 900px) {
    html body #about .about-grid { grid-template-columns: 1fr; }
    html body #about .about-visual { position: static; order: 2; }
    html body #about .about-details { order: 1; }
    html body #about .about-benefits { grid-template-columns: 1fr; }
}

/* ---------- Services: 7-cell bento (CCTV hero tile, then 6) ---------- */
html body #services { padding-top: var(--p-section); }
html body #services .services-grid {
    max-width: var(--p-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(250px, auto);
    gap: 16px;
}
html body #services .services-grid > .card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    min-height: 250px;
    height: auto;
    margin: 0;
    padding: 24px;
    text-align: left;
    border-radius: var(--p-radius);
    border: 1px solid var(--p-line);
    background: var(--p-surface);
    box-shadow: none;
    overflow: hidden;
    isolation: isolate;
    transform: none;
    animation: none;
    opacity: 1;
    transition: border-color 0.3s ease, transform 0.4s var(--p-ease);
}
html body #services .services-grid > .card:hover { transform: translateY(-3px); border-color: var(--p-line-strong); }
html body #services .services-grid > .card::before,
html body #services .services-grid > .card::after,
html body #services .card-glow { display: none; }

html body #services #service-cctv { grid-column: span 2; grid-row: span 2; }
html body #services #service-blindcurtain,
html body #services #service-gates { grid-column: span 2; }

html body #services .services-grid > .card > i {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 2;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 12px;
    font-size: 1.05rem;
    color: var(--p-accent);
    background: color-mix(in srgb, var(--p-bg) 70%, transparent);
    border: 1px solid var(--p-line);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: none;
    text-shadow: none;
}
html body #services .services-grid > .card h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 6px;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--p-text);
    text-transform: none;
}
html body #services #service-cctv h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
html body #services .services-grid > .card p {
    position: relative;
    z-index: 2;
    margin: 0 0 18px;
    max-width: 42ch;
    color: var(--p-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}
html body #services .services-grid > .card .request-quote-btn {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    height: 40px;
    margin: 0;
    padding: 0 16px;
    border-radius: var(--p-pill);
    border: 1px solid var(--p-line-strong);
    background: transparent;
    color: var(--p-text);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
html body #services .services-grid > .card .request-quote-btn:hover { background: var(--p-accent); border-color: var(--p-accent); color: var(--p-on-accent); }

/* Project media injected by script.js becomes the tile background */
html body #services .services-grid > .card .service-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    border-radius: 0;
    border: 0;
}
html body #services .services-grid > .card .service-media img,
html body #services .services-grid > .card .service-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s var(--p-ease);
}
html body #services .services-grid > .card:hover .service-media img,
html body #services .services-grid > .card:hover .service-media video { transform: scale(1.04); }
html body #services .services-grid > .card.has-media::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(0deg, rgba(10, 10, 11, 0.94) 0%, rgba(10, 10, 11, 0.55) 45%, rgba(10, 10, 11, 0.1) 100%);
    pointer-events: none;
}
html body #services .services-grid > .card.has-media h3 { color: #f5f4f1; }
html body #services .services-grid > .card.has-media p { color: rgba(245, 244, 241, 0.78); }
html body #services .services-grid > .card.has-media .request-quote-btn { color: #f5f4f1; border-color: rgba(245, 244, 241, 0.3); }

@media (max-width: 1024px) {
    html body #services .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body #services #service-cctv { grid-column: 1 / -1; grid-row: span 1; min-height: 340px; }
    html body #services #service-blindcurtain { grid-column: span 1; }
    html body #services #service-gates { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    html body #services .services-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    html body #services .services-grid > .card { grid-column: 1 / -1; min-height: 240px; }
}

/* ---------- Reviews ---------- */
html body .modern-review-section { background: var(--p-bg-2); }
html body .modern-review-container { max-width: var(--p-max); margin: 0 auto; }
html body .modern-review-header { text-align: left; }
html body .modern-review-header .section-title,
html body .modern-review-header .section-subtitle { margin-left: 0; }
html body .modern-review-header .section-subtitle { margin-bottom: 20px; }
html body .header-star-rating {
    margin: 0 0 32px;
    font-size: 1.4rem;
    letter-spacing: 0.12em;
    color: var(--p-accent);
    text-align: left;
    animation: none;
}
html body .review-command-bar {
    display: inline-flex;
    gap: 0;
    padding: 0;
    margin: 0 0 32px;
    border-radius: var(--p-radius);
    border: 1px solid var(--p-line);
    background: var(--p-surface);
    box-shadow: none;
    overflow: hidden;
}
html body .review-command-item { padding: 16px 28px; background: none; border: 0; }
html body .review-command-item + .review-command-item { border-left: 1px solid var(--p-line); }
html body .review-command-label {
    display: block;
    font-family: var(--p-font);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--p-muted);
    word-spacing: 0;
}
html body .review-command-label { font-size: 0; }
html body .review-command-item:first-child .review-command-label::before { content: 'Average rating'; font-size: 0.78rem; }
html body .review-command-item:nth-child(2) .review-command-label::before { content: 'Total reviews'; font-size: 0.78rem; }
html body .review-command-value {
    font-family: var(--p-font);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--p-text);
    text-shadow: none;
}
html body .review-command-value--glow { color: var(--p-accent); text-shadow: none; }

html body .modern-review-section :is(.google-review-card, .review-terminal-box, .review-terminal-window, .featured-review-card, .review-stats-card, .stats-card, .stats-dashboard) {
    border-radius: var(--p-radius);
    border-color: var(--p-line);
    box-shadow: none;
}
html body .modern-review-section :is([class*='terminal'], .stats-value, .stats-label, .stats-meta, .review-command-value) {
    font-family: var(--p-font);
}
html body .modern-review-section .google-review-card { background: var(--p-surface); }

html body .modern-review-section .primary-cta-btn,
html body .modern-review-section .secondary-cta-btn {
    height: 48px;
    padding: 0 22px;
    border-radius: var(--p-pill);
    font-family: var(--p-font);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    white-space: nowrap;
}
html body .modern-review-section .primary-cta-btn { background: var(--p-accent); color: var(--p-on-accent); border: 0; }
html body .modern-review-section .secondary-cta-btn { background: transparent; color: var(--p-text); border: 1px solid var(--p-line-strong); }

/* ---------- Footer ---------- */
html body .site-footer {
    background: var(--p-bg);
    border-top: 1px solid var(--p-line);
    padding: 72px var(--p-gutter) 0;
    box-shadow: none;
}
html body .site-footer::before,
html body .site-footer::after { display: none; }
html body .footer-content {
    max-width: var(--p-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 48px;
    text-align: left;
}
html body .footer-brand h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--p-text); }
html body .footer-brand p,
html body .footer-tagline { color: var(--p-muted); max-width: 44ch; line-height: 1.6; }
html body .footer-section h4 {
    margin: 0 0 16px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--p-text);
}
html body .footer-section h4::after { display: none; }
html body .footer-links { display: grid; gap: 10px; }
html body .footer-links a { color: var(--p-muted); text-decoration: none; transition: color 0.2s ease; }
html body .footer-links a:hover { color: var(--p-text); transform: none; }
html body .footer-contact .contact-item i { color: var(--p-accent); background: none; box-shadow: none; }
html body .footer-contact-label { color: var(--p-muted); font-size: 0.78rem; text-transform: none; letter-spacing: 0; }
html body .footer-contact-value { color: var(--p-text); text-decoration: none; }
html body .footer-status { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius-sm); box-shadow: none; }
html body .footer-bottom {
    max-width: var(--p-max);
    margin: 56px auto 0;
    padding: 24px 0 32px;
    border-top: 1px solid var(--p-line);
    background: none;
}
html body .footer-bottom-content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
html body .footer-bottom p { margin: 0; color: var(--p-muted); font-size: 0.85rem; }
html body .footer-bottom-tagline { color: var(--p-muted); }
@media (max-width: 860px) {
    html body .footer-content { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- Quote popup ---------- */
html body .popup-overlay { background: rgba(8, 8, 9, 0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
html body .popup-form {
    border-radius: 20px;
    background: var(--p-surface);
    border: 1px solid var(--p-line);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}
html body .popup-form :is(input, select, textarea) {
    border-radius: var(--p-radius-sm);
    border: 1px solid var(--p-line-strong);
    background: var(--p-bg);
    color: var(--p-text);
    font-family: var(--p-font);
}
html body .popup-form :is(input, textarea)::placeholder { color: color-mix(in srgb, var(--p-muted) 85%, transparent); }
html body .popup-form :is(input, select, textarea):focus { border-color: var(--p-accent); box-shadow: 0 0 0 3px var(--p-accent-soft); outline: none; }
html body .popup-form label { color: var(--p-text); font-weight: 500; font-size: 0.88rem; text-transform: none; letter-spacing: 0; }
html body .popup-submit-btn {
    border-radius: var(--p-pill);
    background: var(--p-accent);
    color: var(--p-on-accent);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
}
html body .popup-submit-btn:hover { background: var(--p-accent-strong); color: var(--p-on-accent); }

/* ---------- Floating buttons: calmer, no neon glow ---------- */
html body #chatbotToggle.chatbot-toggle,
html body #brilliantChatBtn.brilliant-chat-btn {
    width: 54px;
    height: 54px;
    border: 1px solid var(--p-line-strong);
    background: var(--p-surface);
    color: var(--p-accent);
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.55);
}
html body #chatbotToggle.chatbot-toggle:hover,
html body #brilliantChatBtn.brilliant-chat-btn:hover {
    background: var(--p-surface-2);
    color: var(--p-accent);
    box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.6);
}

/* ---------- Scroll reveal (script.js adds .animate-on-scroll / visible states) ---------- */
@media (prefers-reduced-motion: reduce) {
    html body .hero > .service-bar .service-bar-inner { animation: none; }
    html body *,
    html body *::before,
    html body *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Specificity fixes (legacy rules in style.css re-stack these) ---------- */
html body { padding-top: 0; }
html body :is(#trust-strip, #featured-work, #showcase, #about, #services, #reviews) {
    background: transparent;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: none;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}
html body #reviews { background: var(--p-bg-2); }
html body #services .services-grid > .card > .service-media { z-index: 0 !important; }
html body #services .services-grid > .card.has-media::after { z-index: 1 !important; }
html body #services .services-grid > .card > :is(h3, p, .request-quote-btn) { position: relative !important; z-index: 2 !important; }
html body #services .services-grid > .card > i { position: absolute !important; z-index: 2 !important; }
html body :is(#trust-strip, #featured-work, #showcase, #about, #services, #reviews) { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
html body :is(.section-title, .section-subtitle) { display: block; width: auto; }
html body .section-subtitle { margin-left: auto; margin-right: auto; }
html body .hero-actions { justify-content: flex-start; }
html body .hero-content { flex: 1 1 auto; justify-content: center; }
html body .hero > .service-bar { border-radius: 0; margin-top: 0; }
html body #services .services-grid > .card > i,
html body #services .services-grid > .card > i::before,
html body .premium-trust-card i::before,
html body #about .about-benefits li > i::before { -webkit-text-fill-color: currentColor; background: none; }

/* Showcase: 8 categories = 2 even rows of 4; icon placeholder only when there is no photo */
html body .showcase-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { html body .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { html body .showcase-grid { grid-template-columns: 1fr; } }
html body .showcase-item.card:has(img, video) .showcase-placeholder i { display: none; }
html body .showcase-item .showcase-placeholder { background: var(--p-surface); }
html body .showcase-item .showcase-placeholder i { color: var(--p-accent); -webkit-text-fill-color: currentColor; font-size: 2rem; opacity: 0.9; }
html body .showcase-item.card:not(:has(img, video)) { background: linear-gradient(160deg, var(--p-surface-2), var(--p-surface)); }

/* Footer alignment with the page grid */
html body .footer-content { padding: 0; }
html body .footer-brand { padding: 0; }
html body .footer-brand h3 { color: var(--p-text); -webkit-text-fill-color: currentColor; background: none; }
html body .footer-tagline { text-transform: none; letter-spacing: 0; font-size: 0.95rem; }
html body .footer-bottom-content { padding: 0; }
html body .footer-bottom-tagline { color: var(--p-muted); }
html body #showcase .showcase-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--p-max); }
@media (max-width: 1100px) { html body #showcase .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { html body #showcase .showcase-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
    html body .hero :is(.brand-tagline, h1, .hero-slogan, .hero-slogan-sub) { text-align: left; margin-left: 0; margin-right: 0; }
    html body .hero .brand-tagline { font-size: 0.72rem; }
}

/* ==========================================================================
   MATTE DARK + ORANGE (2026-09-28, owner's brand direction)
   Flat solid fills, no gloss, no glow, no metallic gradients.
   Photo scrims stay: they are for text legibility, not decoration.
   ========================================================================== */
:root {
    --brand-primary: #e8741e;          /* matte burnt orange (default; Admin > Site Control can still override) */
    --orange: var(--brand-primary);
    --p-on-accent: #140c05;
    --p-bg: #111112;
    --p-bg-2: #141415;
    --p-surface: #19191b;
    --p-surface-2: #202023;
    --p-line: rgba(255, 255, 255, 0.07);
    --p-line-strong: rgba(255, 255, 255, 0.13);
    --p-text: #f0eeea;
    --p-muted: #a09d98;
    --p-shadow: none;
}
html[data-theme='light'] {
    /* Matte stone light theme: soft grey, not bright white (owner feedback: "too white") */
    --p-bg: #e7e5e1;
    --p-bg-2: #dedbd6;
    --p-surface: #f2f1ee;
    --p-surface-2: #e0ded9;
    --p-text: #161617;
    --p-muted: #4e4c48;
    --p-line: rgba(22, 22, 23, 0.11);
    --p-line-strong: rgba(22, 22, 23, 0.2);
}

/* Matte grain: one fixed, non-interactive layer (no repaint on scroll) */
html body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme='light'] body::after { opacity: 0.05; }

/* Flat buttons everywhere (the ID rule #heroQuoteBtn in style.css used a glossy gradient) */
html body #heroQuoteBtn,
html body .premium-nav-cta,
html body .popup-submit-btn,
html body .modern-review-section .primary-cta-btn,
html body #services .services-grid > .card .request-quote-btn:hover {
    background: var(--p-accent);
    background-image: none;
    color: var(--p-on-accent);
    box-shadow: none;
    text-shadow: none;
}
html body #heroQuoteBtn:hover,
html body .premium-nav-cta:hover,
html body .popup-submit-btn:hover,
html body .modern-review-section .primary-cta-btn:hover {
    background: var(--p-accent-strong);
    color: var(--p-on-accent);
    box-shadow: none;
}
html body .showcase-filters .filter-btn.active { box-shadow: none; background-image: none; }

/* Solid (not glassy) nav */
html body .main-nav {
    background: color-mix(in srgb, var(--p-surface) 94%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

/* Remove remaining glows */
html body :is(.whatsapp-fab-pill, .floating-whatsapp, .back-to-top, #chatbotToggle, #brilliantChatBtn) { box-shadow: none; }
html body :is(#chatbotToggle, #brilliantChatBtn)::after { display: none; }
html body .showcase-item.card:not(:has(img, video)) { background: var(--p-surface-2); }
html body .footer-status { box-shadow: none; }

/* ==========================================================================
   ADMIN: login screen + media manager (2026). Matte dark + orange.
   Scoped to #hmAdminLogin and #hmMedia only; the rest of the admin portal
   keeps its existing styles.
   ========================================================================== */
.hm-login {
    position: fixed;
    inset: 0;
    z-index: 2147483100;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(9, 9, 10, 0.78);
    font-family: var(--p-font);
}
.hm-login-card {
    width: min(400px, 100%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 32px 28px 24px;
    border-radius: 20px;
    background: #19191b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f0eeea;
}
.hm-login-logo { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; margin-bottom: 8px; }
.hm-login-card h2 { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: #f0eeea; }
.hm-login-sub { margin: 0 0 16px; color: #a09d98; font-size: 0.92rem; }
.hm-login-card label { margin-top: 6px; font-size: 0.85rem; font-weight: 500; color: #f0eeea; }
.hm-login-card input {
    height: 46px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: #111112;
    color: #f0eeea;
    font: inherit;
}
.hm-login-card input:focus { outline: none; border-color: var(--p-accent); box-shadow: 0 0 0 3px var(--p-accent-soft); }
.hm-login-error { margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(220, 70, 60, 0.12); color: #ff9a8f; font-size: 0.88rem; }
.hm-login-submit {
    margin-top: 14px;
    height: 48px;
    border: 0;
    border-radius: 999px;
    background: var(--p-accent);
    color: var(--p-on-accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.hm-login-submit:hover { background: var(--p-accent-strong); color: var(--p-on-accent); }
.hm-login-submit:disabled { opacity: 0.6; cursor: progress; }
.hm-login-cancel { height: 40px; border: 0; background: none; color: #a09d98; font: inherit; cursor: pointer; }
.hm-login-cancel:hover { color: #f0eeea; }

#hmMedia { font-family: var(--p-font); color: var(--a-text, #f0eeea); }
#hmMedia .hm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
#hmMedia .hm-head h2 { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; color: var(--a-text, #f0eeea); }
#hmMedia .hm-head p { margin: 4px 0 0; color: var(--a-muted, #a09d98); font-size: 0.9rem; }

#hmMedia .hm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--a-line-2, rgba(255, 255, 255, 0.14));
    background: transparent;
    color: var(--a-text, #f0eeea);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
#hmMedia .hm-btn:hover { border-color: rgba(255, 255, 255, 0.3); }
#hmMedia .hm-btn:active { transform: scale(0.97); }
#hmMedia .hm-btn.is-primary { background: var(--p-accent); border-color: var(--p-accent); color: var(--p-on-accent); }
#hmMedia .hm-btn.is-primary:hover { background: var(--p-accent-strong); color: var(--p-on-accent); }
#hmMedia .hm-btn.is-danger { background: #c8453a; border-color: #c8453a; color: #fff; }
#hmMedia .hm-btn.is-danger:hover { background: #a9372e; }

#hmMedia .hm-drop {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 28px 16px;
    border: 1.5px dashed rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    background: #151516;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
#hmMedia .hm-drop:hover,
#hmMedia .hm-drop:focus-visible,
#hmMedia .hm-drop.is-dragging { border-color: var(--p-accent); background: color-mix(in srgb, var(--p-accent) 8%, #151516); outline: none; }
#hmMedia .hm-drop i { font-size: 1.6rem; color: var(--p-accent); }
#hmMedia .hm-drop p { margin: 0; color: var(--a-text, #f0eeea); }
#hmMedia .hm-drop span { color: var(--a-muted, #a09d98); font-size: 0.82rem; }

#hmMedia .hm-queue { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
#hmMedia .hm-job { padding: 10px 14px; border-radius: 12px; background: var(--a-panel-2, #19191b); border: 1px solid var(--a-line-2, rgba(255, 255, 255, 0.07)); }
#hmMedia .hm-job-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.85rem; }
#hmMedia .hm-job-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hmMedia .hm-job-state { color: var(--a-muted, #a09d98); flex-shrink: 0; }
#hmMedia .hm-job.is-done .hm-job-state { color: #6fcf8f; }
#hmMedia .hm-job.is-error .hm-job-state { color: var(--a-bad-text, #ff9a8f); }
#hmMedia .hm-bar { height: 4px; margin-top: 8px; border-radius: 4px; background: var(--a-raise, rgba(255, 255, 255, 0.07)); overflow: hidden; }
#hmMedia .hm-bar span { display: block; height: 100%; background: var(--p-accent); transition: width 0.2s ease; }
#hmMedia .hm-job.is-done .hm-bar span { background: #4fb874; }
#hmMedia .hm-job.is-error .hm-bar span { width: 100% !important; background: #c8453a; }

#hmMedia .hm-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 14px; }
#hmMedia .hm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
#hmMedia .hm-chip {
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--a-line-2, rgba(255, 255, 255, 0.12));
    background: transparent;
    color: var(--a-muted, #a09d98);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}
#hmMedia .hm-chip span { margin-left: 4px; opacity: 0.7; }
#hmMedia .hm-chip.is-active { background: var(--a-text, #f0eeea); border-color: var(--a-text, #f0eeea); color: var(--a-bg, #111112); }
#hmMedia .hm-bulk { display: none; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--a-text, #f0eeea); }
#hmMedia .hm-bulk.is-visible { display: flex; }

#hmMedia .hm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
#hmMedia .hm-tile {
    position: relative;
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--a-panel-2, #19191b);
    border: 1px solid var(--a-line-2, rgba(255, 255, 255, 0.07));
    transition: border-color 0.15s ease;
}
#hmMedia .hm-tile.is-selected { border-color: var(--p-accent); }
#hmMedia .hm-thumb { position: relative; aspect-ratio: 4 / 3; background: #111112; display: grid; place-items: center; }
#hmMedia .hm-thumb img,
#hmMedia .hm-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
#hmMedia .hm-file-icon { font-size: 1.8rem; color: var(--a-muted, #a09d98); }
#hmMedia .hm-badge {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(9, 9, 10, 0.75);
    color: var(--a-text, #f0eeea);
    font-size: 0.72rem;
}
#hmMedia .hm-check { position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgba(9, 9, 10, 0.7); cursor: pointer; }
#hmMedia .hm-check input { width: 16px; height: 16px; accent-color: var(--p-accent); cursor: pointer; margin: 0; }
#hmMedia figcaption { display: grid; gap: 2px; padding: 10px 12px 4px; }
#hmMedia .hm-name { font-size: 0.82rem; color: var(--a-text, #f0eeea); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hmMedia .hm-meta { font-size: 0.75rem; color: var(--a-muted, #a09d98); }
#hmMedia .hm-actions { display: flex; gap: 4px; padding: 4px 8px 10px; }
#hmMedia .hm-icon-btn {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 0;
    background: transparent;
    color: var(--a-muted, #a09d98);
    cursor: pointer;
}
#hmMedia .hm-icon-btn:hover { background: var(--a-raise, rgba(255, 255, 255, 0.07)); color: var(--a-text, #f0eeea); }
#hmMedia .hm-icon-btn.is-danger { margin-left: auto; }
#hmMedia .hm-icon-btn.is-danger:hover { background: rgba(200, 69, 58, 0.16); color: var(--a-bad-text, #ff9a8f); }
#hmMedia .hm-confirm {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(17, 17, 18, 0.92);
    text-align: center;
}
#hmMedia .hm-confirm p { margin: 0; font-weight: 600; }
#hmMedia .hm-confirm div { display: flex; gap: 8px; }
#hmMedia .hm-tile.is-confirming .hm-confirm { display: flex; }

#hmMedia .hm-state { display: grid; justify-items: center; gap: 8px; padding: 56px 16px; text-align: center; border-radius: 16px; background: #151516; }
#hmMedia .hm-state i { font-size: 1.8rem; color: var(--a-muted, #a09d98); }
#hmMedia .hm-state.is-offline i { color: var(--p-accent); }
#hmMedia .hm-state h3 { margin: 4px 0 0; font-size: 1.1rem; color: var(--a-text, #f0eeea); }
#hmMedia .hm-state p { margin: 0 0 8px; max-width: 46ch; color: var(--a-muted, #a09d98); line-height: 1.5; }

#hmMedia .hm-thumb { overflow: hidden; }
#hmMedia .hm-thumb img { font-size: 0; color: transparent; }

/* Admin shell: matte dark, flat orange active state (replaces glossy brown gradients) */
#adminPanel.premium-admin-v3 { background: #111112; }
#adminPanel.premium-admin-v3 .admin-sidebar-v2 {
    background: #161617;
    background-image: none;
    border-right: 1px solid var(--a-line-2, rgba(255, 255, 255, 0.07));
    box-shadow: none;
}
#adminPanel.premium-admin-v3 .admin-main-v2,
#adminPanel.premium-admin-v3 .main-content-scroll { background: #111112; background-image: none; }
#adminPanel.premium-admin-v3 .main-header { background: #111112; border-bottom: 1px solid var(--a-line-2, rgba(255, 255, 255, 0.07)); box-shadow: none; }
#adminPanel.premium-admin-v3 .nav-item { font-family: var(--p-font); color: var(--a-muted, #a09d98); border-radius: 12px; box-shadow: none; }
#adminPanel.premium-admin-v3 .nav-item:hover { background: var(--a-raise, rgba(255, 255, 255, 0.05)); color: var(--a-text, #f0eeea); }
#adminPanel.premium-admin-v3 .nav-item.active {
    background: var(--p-accent);
    background-image: none;
    color: var(--p-on-accent);
    box-shadow: none;
}
#adminPanel.premium-admin-v3 .nav-item.active i { color: var(--p-on-accent); }
#adminPanel.premium-admin-v3 .header-search input { background: var(--a-panel-2, #19191b); border-color: var(--a-line-2, rgba(255, 255, 255, 0.1)); color: var(--a-text, #f0eeea); }

@media (max-width: 640px) {
    #hmMedia .hm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #hmMedia .hm-head { align-items: flex-start; }
}

/* ==========================================================================
   OWNER REQUEST (2026-09-28, part 3)
   1. Headers + intro text centered on every section (hero included)
   2. Big star rating that pulses big/small and blinks
   3. Light and dark mode applied to every public section
   4. Gentle scroll reveal so sections arrive instead of just being there
   Body lists (benefits, footer) stay left-aligned for readability.
   ========================================================================== */

:root { --p-ease-out: cubic-bezier(0.23, 1, 0.32, 1); }

/* ---- 1. Centered headers ---- */
html body :is(.section-title, .showcase-heading h2) {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
html body :is(.section-subtitle, .showcase-heading .section-description) {
    text-align: center;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
    padding-right: 0;
}
/* Short orange rule under every section title ties the page together */
html body .section-title::after,
html body .showcase-heading h2::after {
    content: '';
    display: block;
    position: static;
    width: 44px;
    height: 3px;
    margin: 18px auto 0;
    border-radius: 3px;
    background: var(--p-accent);
    opacity: 1;
    transform: none;
    box-shadow: none;
}
html body .modern-review-header { text-align: center; }
html body .modern-review-header :is(.section-title, .section-subtitle) { margin-left: auto; margin-right: auto; }
html body #about .about-header { max-width: var(--p-max); margin: 0 auto clamp(40px, 6vw, 64px); }
html body #about .about-grid { align-items: center; }

html body .review-command-bar { display: flex; width: fit-content; margin: 0 auto 40px; }
html body .showcase-filters { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
html body .premium-trust-card { text-align: center; }
html body .premium-trust-card p { margin-left: auto; margin-right: auto; max-width: 34ch; }

/* Hero centered */
html body .hero-content { align-items: center; text-align: center; }
html body .hero-content > * { max-width: 820px; margin-left: auto; margin-right: auto; }
html body .hero .hero-slogan-sub { margin-left: auto; margin-right: auto; }
html body .hero-actions { justify-content: center; }
html body .hero-scrim {
    background:
        radial-gradient(ellipse 70% 60% at 50% 48%, rgba(10, 10, 11, 0.8) 0%, rgba(10, 10, 11, 0.58) 60%, rgba(10, 10, 11, 0.4) 100%),
        linear-gradient(0deg, rgba(10, 10, 11, 0.92) 0%, rgba(10, 10, 11, 0) 32%);
}
@media (max-width: 768px) {
    html body .hero :is(.brand-tagline, h1, .hero-slogan, .hero-slogan-sub) { text-align: center; margin-left: auto; margin-right: auto; }
    html body .hero-content { align-items: center; }
}

/* ---- 2. Star rating: big, pulsing, blinking, staggered ---- */
html body .header-star-rating {
    display: flex;
    justify-content: center;
    gap: clamp(6px, 1.2vw, 14px);
    margin: 10px 0 36px;
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    line-height: 1;
    letter-spacing: 0;
    color: var(--p-accent);
    text-align: center;
    animation: none;
}
html body .header-star-rating .hm-star {
    display: inline-block;
    transform-origin: 50% 55%;
    animation: hm-star-pulse 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    animation-delay: calc(var(--i, 0) * 0.16s);
    will-change: transform, opacity;
}
@keyframes hm-star-pulse {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    40% { transform: scale(1.2); opacity: 1; }
    55% { transform: scale(1.06); opacity: 0.92; }
    70% { transform: scale(1.12); opacity: 1; }
}

/* ---- 3. Light / dark on every section ---- */
html body :is(#trust-strip, #featured-work, #showcase, #about, #services) {
    background: var(--p-bg) !important;
    background-image: none !important;
}
html body #reviews { background: var(--p-bg-2) !important; background-image: none !important; }
html body #featured-work::before,
html body #featured-work::after,
html body #reviews::before,
html body #reviews::after { display: none !important; }
html body :is(.section, .showcase, .modern-review-section) { color: var(--p-text); }

/* Hero in light mode: keep the video crisp under the same dark scrim as dark mode
   (a white veil made it look blurred/foggy). Old light rules are neutralised here. */
html[data-theme='light'] body .hero { background: #0b0b0c; }
html[data-theme='light'] body .hero-content { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme='light'] body .hero h1 { color: #f5f4f1; text-shadow: none; }
html[data-theme='light'] body .hero .hero-slogan { color: rgba(245, 244, 241, 0.62); text-shadow: none; }
html[data-theme='light'] body .hero .hero-slogan-sub { color: rgba(245, 244, 241, 0.8); text-shadow: none; }
html[data-theme='light'] body .hero .brand-tagline { color: var(--p-accent); text-shadow: none; }

/* Light page body: an old rule forced pure white here */
html[data-theme='light'] body { background: var(--p-bg); }

/* Showcase filter hover: old rule filled the button orange AND made the text orange (invisible) */
html body #showcase .showcase-filters .filter-btn:hover {
    background: var(--p-accent-soft);
    border-color: var(--p-accent);
    color: var(--p-text);
    -webkit-text-fill-color: currentColor;
}
html body #showcase .showcase-filters .filter-btn.active,
html body #showcase .showcase-filters .filter-btn.active:hover {
    background: var(--p-accent);
    border-color: var(--p-accent);
    color: var(--p-on-accent);
    -webkit-text-fill-color: currentColor;
}

/* Reviews area: every card on theme surfaces with theme text */
html body .modern-review-section :is(.review-command-bar, .review-terminal-box, .featured-reviews-feed, .featured-reviews-window, .stats-card, .google-fallback-ui) {
    background: var(--p-surface);
    background-image: none;
    border: 1px solid var(--p-line);
    color: var(--p-text);
    box-shadow: none;
}
html body .modern-review-section .featured-reviews-window { background: transparent; border: 0; }
html body .modern-review-section .google-fallback-ui { border-style: dashed; border-color: var(--p-line-strong); color: var(--p-muted); }
html body .modern-review-section .featured-review-card {
    background: var(--p-bg);
    background-image: none;
    border: 1px solid var(--p-line);
    color: var(--p-text);
    box-shadow: none;
}
html body .modern-review-section :is(.review-terminal-slide, .review-terminal-slide p, .featured-review-card p, .stats-meta) { color: var(--p-text); }
html body .modern-review-section :is(.stats-label, .featured-review-card time, .review-terminal-subtitle) { color: var(--p-muted); }
html body .modern-review-section .stats-value { color: var(--p-accent); text-shadow: none; }
html body .modern-review-section .stats-icon { background: var(--p-accent-soft); color: var(--p-accent); box-shadow: none; }
html body .modern-review-section .review-share-btn { background: var(--p-surface-2); color: var(--p-accent); border: 1px solid var(--p-line); box-shadow: none; }
html body .modern-review-section .hailifu-review-link {
    background: var(--p-accent);
    background-image: none;
    color: var(--p-on-accent);
    border-radius: 999px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    box-shadow: none;
}
html body .modern-review-section .hailifu-review-link:hover { background: var(--p-accent-strong); color: var(--p-on-accent); }
html body .modern-review-section .review-command-bar { background: var(--p-surface); }
html body .modern-review-section .review-command-label::before { color: var(--p-muted); }
html body .modern-review-section .review-command-value { color: var(--p-text); }
html body .modern-review-section .review-command-value--glow { color: var(--p-accent); }

/* Showcase / about / footer leftovers from the old light theme */
html body .showcase-item.card { box-shadow: none; }
html body #about .about-visual-panel { background: var(--p-surface); background-image: none; }
html body #about .about-visual-panel::before,
html body #about .about-visual-panel::after { display: none; }
html body .footer-logo,
html body .footer-logo-img { box-shadow: none; }
html body .footer-status { background: var(--p-surface); border-color: var(--p-line); }
html body .footer-status .status-label { color: var(--p-muted); }
html body .footer-status strong { color: var(--p-text); }

/* ---- 4. Scroll reveal (CSS scroll-driven; browsers without support just show content) ---- */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        html body :is(.section-title, .section-subtitle, .showcase-heading h2, .showcase-heading .section-description, .premium-trust-card, .showcase-item.card, #services .services-grid > .card, #about .about-benefits li, #about .about-visual-panel, .stats-card) {
            animation: hm-reveal linear backwards;
            animation-timeline: view();
            animation-range: entry 0% entry 38%;
        }
    }
}
@keyframes hm-reveal {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}

/* Press feedback on every pill button */
html body :is(.showcase-filters .filter-btn, .request-quote-btn, .primary-cta-btn, .secondary-cta-btn, .hailifu-review-link):active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
    html body .showcase-item.card:hover { transform: translateY(-4px); }
}

/* Fixes from the light/dark review pass */
html body #showcase .showcase-heading,
html body #showcase .showcase-heading h2,
html body #showcase .showcase-heading .section-description { text-align: center; margin-left: auto; margin-right: auto; }
html body .modern-review-section .review-terminal-box { text-align: center; }
html body .modern-review-section :is(.review-terminal-name, .review-terminal-text) { color: var(--p-text); text-shadow: none; }
html body .modern-review-section .review-terminal-name { font-weight: 600; font-size: 1.05rem; }
html body .modern-review-section .review-terminal-stars-inline { justify-content: center; color: var(--p-accent); fill: var(--p-accent); }
html body .modern-review-section .review-terminal-stars-inline svg { fill: var(--p-accent); }
html body .modern-review-section .review-terminal-badge { color: var(--p-muted); }
html body #showcase .showcase-item.card,
html body #showcase .showcase-item .showcase-placeholder { background-color: transparent; }
html body #showcase .showcase-item:not(:has(.showcase-bg img, .showcase-bg video)) .showcase-placeholder { background-color: var(--p-surface-2); }
html body #showcase .showcase-item .showcase-placeholder span,
html body #showcase .showcase-item .showcase-title { color: #f5f4f1; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55); }
html body #showcase .showcase-item.card:not(:has(img, video)) .showcase-placeholder span { color: var(--p-text); text-shadow: none; }

@media (prefers-reduced-motion: reduce) {
    html body .header-star-rating .hm-star { animation: none !important; opacity: 1; transform: none; }
}

html body .whatsapp-fab-pill { color: var(--p-accent); }

/* Hover text on bright orange must be dark (white on #E8741E is ~3:1) */
html body #services .services-grid > .card .request-quote-btn:hover,
html body #services .services-grid > .card.has-media .request-quote-btn:hover,
html body #showcase .view-project-btn,
html body #showcase .view-project-btn:hover {
    background: var(--p-accent);
    border-color: var(--p-accent);
    color: var(--p-on-accent);
    -webkit-text-fill-color: currentColor;
}

/* ==========================================================================
   OWNER REQUEST (2026-09-29): bigger hero text + more hero animation,
   and the review/contact block rebuilt from scratch (#reviewCta).
   ========================================================================== */

/* ---- Hero: bigger type ---- */
html body .hero-content > * { max-width: 1040px; }
html body .hero h1 {
    font-size: clamp(3rem, 7.4vw, 6.4rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
}
html body .hero .hero-slogan {
    margin-top: 18px;
    font-size: clamp(1.5rem, 3.1vw, 2.6rem);
    letter-spacing: -0.025em;
}
html body .hero .hero-slogan-sub {
    margin-top: 22px;
    max-width: 56ch;
    font-size: clamp(1.05rem, 1.45vw, 1.3rem);
}
html body .hero .brand-tagline { font-size: 0.86rem; margin-bottom: 22px; }
html body .hero-actions { margin-top: 40px; gap: 14px; }
html body .hero .btn,
html body .hero-actions .btn-ghost { height: 58px; padding: 0 32px; font-size: 1.06rem; }
@media (max-width: 768px) {
    html body .hero h1 { font-size: clamp(2.6rem, 12.5vw, 3.6rem); line-height: 1; }
    html body .hero .hero-slogan { font-size: clamp(1.3rem, 6vw, 1.7rem); }
    html body .hero .btn,
    html body .hero-actions .btn-ghost { height: 54px; }
}

/* "security" gets a matte underline that draws itself */
html body .hero .hero-security {
    position: relative;
    display: inline-block;
    text-shadow: none;
}
html body .hero .hero-security::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.08em;
    height: 0.09em;
    min-height: 3px;
    border-radius: 3px;
    background: var(--p-accent);
    transform-origin: left center;
}

/* ---- Hero: entrance + living background ---- */
@media (prefers-reduced-motion: no-preference) {
    html body .hero-content > * {
        animation: hm-hero-in 1s var(--p-ease-out) both;
    }
    html body .hero-content > .brand-tagline { animation-delay: 0.1s; }
    html body .hero-content > h1 { animation-delay: 0.22s; }
    html body .hero-content > .hero-slogan { animation-delay: 0.4s; }
    html body .hero-content > .hero-slogan-sub { animation-delay: 0.54s; }
    html body .hero-content > .hero-actions { animation-delay: 0.68s; }
    html body .hero > .service-bar { animation: hm-fade-in 1.2s ease 0.9s both; }

    html body .hero .hero-security::after {
        animation: hm-underline 0.8s var(--p-ease-out) 1.15s both;
    }

    /* Slow push-in on the video so the hero never feels static */
    html body .hero-video-container video {
        animation: hm-kenburns 24s ease-in-out infinite alternate;
        transform-origin: 60% 45%;
    }

    html body .hero .btn,
    html body .hero-actions .btn-ghost { transition: transform 0.25s var(--p-ease-out), background-color 0.2s ease, border-color 0.2s ease; }
}
@media (hover: hover) and (pointer: fine) {
    html body .hero .btn:hover,
    html body .hero-actions .btn-ghost:hover { transform: translateY(-2px); }
}

@keyframes hm-hero-in {
    from { opacity: 0; transform: translateY(28px); filter: blur(10px); }
    to { opacity: 1; transform: none; filter: none; }
}
@keyframes hm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hm-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hm-kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }

/* ---- Review + contact block (rebuilt) ---- */
html body #reviewCta { max-width: var(--p-max); margin: clamp(56px, 8vw, 96px) auto 0; }
html body #reviewCta .hm-cta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 16px;
}
html body #reviewCta .hm-cta-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: clamp(28px, 4vw, 48px);
    border-radius: 24px;
    border: 1px solid var(--p-line);
    text-align: left;
    overflow: hidden;
    transition: transform 0.35s var(--p-ease-out), border-color 0.25s ease;
}
html body #reviewCta .hm-cta-card h3 {
    margin: 0;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-transform: none;
}
html body #reviewCta .hm-cta-card p { margin: 0 0 12px; max-width: 42ch; font-size: 1.02rem; line-height: 1.6; }

/* Review card: calm surface */
html body #reviewCta .hm-cta-review { background: var(--p-surface); color: var(--p-text); }
html body #reviewCta .hm-cta-review h3 { color: var(--p-text); }
html body #reviewCta .hm-cta-review p { color: var(--p-muted); }
html body #reviewCta .hm-cta-stars {
    display: flex;
    gap: 6px;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--p-accent);
}
html body #reviewCta .hm-cta-stars .hm-star { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
    html body #reviewCta .hm-cta-stars .hm-star {
        animation: hm-star-pulse 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
        animation-delay: calc(var(--i, 0) * 0.14s);
    }
}

/* Contact card: the solid orange conversion block */
html body #reviewCta .hm-cta-contact {
    background: var(--p-accent);
    border-color: var(--p-accent);
    color: var(--p-on-accent);
}
html body #reviewCta .hm-cta-contact h3,
html body #reviewCta .hm-cta-contact p { color: var(--p-on-accent); }
html body #reviewCta .hm-cta-contact p { opacity: 0.82; }
html body #reviewCta .hm-cta-contact::after {
    /* big quiet wrench mark, part of the card surface, not a glow */
    content: "\f0ad";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: -18px;
    bottom: -34px;
    font-size: 11rem;
    line-height: 1;
    color: rgba(20, 12, 5, 0.08);
    pointer-events: none;
    transform: rotate(-12deg);
}
html body #reviewCta .hm-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; position: relative; z-index: 1; }

/* Buttons */
html body #reviewCta .hm-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid var(--p-line-strong);
    background: transparent;
    color: var(--p-text);
    font-family: var(--p-font);
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: transform 0.2s var(--p-ease-out), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
html body #reviewCta .hm-cta-btn:active { transform: scale(0.97); }
html body #reviewCta .hm-cta-review .hm-cta-btn.is-primary { background: var(--p-accent); border-color: var(--p-accent); color: var(--p-on-accent); }
html body #reviewCta .hm-cta-review .hm-cta-btn.is-primary:hover { background: var(--p-accent-strong); border-color: var(--p-accent-strong); color: var(--p-on-accent); }
html body #reviewCta .hm-cta-contact .hm-cta-btn { color: var(--p-on-accent); border-color: rgba(20, 12, 5, 0.3); }
html body #reviewCta .hm-cta-contact .hm-cta-btn:hover { background: rgba(20, 12, 5, 0.08); border-color: rgba(20, 12, 5, 0.55); color: var(--p-on-accent); }
html body #reviewCta .hm-cta-contact .hm-cta-btn.is-primary { background: #141415; border-color: #141415; color: #f5f4f1; }
html body #reviewCta .hm-cta-contact .hm-cta-btn.is-primary:hover { background: #242427; border-color: #242427; color: #fff; }
html body #reviewCta .hm-cta-btn i { -webkit-text-fill-color: currentColor; }
html body #reviewCta .hm-cta-arrow { font-size: 0.85em; transition: transform 0.25s var(--p-ease-out); }
@media (hover: hover) and (pointer: fine) {
    html body #reviewCta .hm-cta-card:hover { transform: translateY(-4px); }
    html body #reviewCta .hm-cta-btn:hover .hm-cta-arrow { transform: translateX(4px); }
}

/* Stats strip under the cards (count-up animation comes from script.js) */
html body #reviewCta .hm-cta-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 16px 0 0;
    padding: 0;
    border-radius: 24px;
    border: 1px solid var(--p-line);
    background: var(--p-surface);
    box-shadow: none;
}
html body #reviewCta .hm-cta-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: clamp(22px, 3vw, 34px) 12px;
    text-align: center;
}
html body #reviewCta .hm-cta-stat + .hm-cta-stat { border-left: 1px solid var(--p-line); }
html body #reviewCta .hm-cta-stat dd,
html body #reviewCta .stats-value {
    margin: 0;
    font-family: var(--p-font);
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--p-text);
    background: none;
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
}
html body #reviewCta #statsOperationalExcellence { color: var(--p-accent); }
html body #reviewCta .hm-cta-stat dt { margin: 0; font-size: 0.9rem; color: var(--p-muted); text-transform: none; letter-spacing: 0; }

@media (max-width: 860px) {
    html body #reviewCta .hm-cta-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    html body #reviewCta .hm-cta-stat { padding: 20px 6px; }
    html body #reviewCta .hm-cta-stat dt { font-size: 0.78rem; }
    html body #reviewCta .hm-cta-actions .hm-cta-btn.is-primary { flex: 1 1 100%; justify-content: center; }
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        html body #reviewCta :is(.hm-cta-card, .hm-cta-stats) {
            animation: hm-reveal linear backwards;
            animation-timeline: view();
            animation-range: entry 0% entry 38%;
        }
    }
}

/* Pass fixes (2026-09-29) */
html body #reviewCta .hm-cta-stats { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
html[data-theme='light'] body .site-footer { background: var(--p-bg); }
html[data-theme='light'] body .site-footer :is(.footer-logo, .footer-brand .footer-logo) { background: var(--p-surface); }
/* Slogan underline works even when Site Control replaces the slogan text */
html body .hero .hero-security::after { display: none; }
html body .hero .hero-slogan::after {
    content: '';
    display: block;
    width: 72px;
    height: 3px;
    margin: 20px auto 0;
    border-radius: 3px;
    background: var(--p-accent);
    transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
    html body .hero .hero-slogan::after { animation: hm-underline 0.8s var(--p-ease-out) 1.15s both; }
}

/* ==========================================================================
   OWNER REQUEST (2026-09-29, part 2)
   1. Quote form rebuilt simple (#popupOverlay .hm-quote)
   2. Advert banner in Reviews (#hmAds) that gently grows/shrinks
   3. Admin > Adverts tab (#hmAdsAdmin)
   4. Orange buttons are glassmorphism (translucent orange, blur, light edge)
   5. More tile animation (entrance stagger, tilt + light, icon pop, re-filter pop)
   ========================================================================== */

/* ---------- 1. Quote form ---------- */
html body #popupOverlay { background: rgba(8, 8, 9, 0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
html body #popupOverlay .hm-quote {
    position: relative;
    width: min(580px, calc(100% - 24px));
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 34px clamp(20px, 4vw, 36px) 26px;
    border-radius: 26px;
    background: var(--p-surface);
    border: 1px solid var(--p-line);
    color: var(--p-text);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.55);
    font-family: var(--p-font);
}
@media (prefers-reduced-motion: no-preference) {
    html body #popupOverlay.active .hm-quote { animation: hm-quote-in 0.38s var(--p-ease-out) both; }
}
@keyframes hm-quote-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }

html body #popupOverlay .popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--p-line);
    background: var(--p-surface-2);
    color: var(--p-text);
    cursor: pointer;
    box-shadow: none;
    transition: transform 0.2s var(--p-ease-out), background-color 0.2s ease;
}
html body #popupOverlay .popup-close:hover { background: var(--p-bg); transform: rotate(90deg); }
html body #popupOverlay .hm-quote-head { text-align: center; margin-bottom: 22px; }
html body #popupOverlay .hm-quote-logo { width: 48px; height: 48px; border-radius: 14px; object-fit: cover; margin: 0 auto 12px; display: block; }
html body #popupOverlay .hm-quote-head h2 { margin: 0 0 6px; font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 700; letter-spacing: -0.03em; color: var(--p-text); text-transform: none; }
html body #popupOverlay .hm-quote-head p { margin: 0 auto; max-width: 40ch; color: var(--p-muted); font-size: 0.96rem; line-height: 1.5; }
html body #popupOverlay .hm-quote-form { display: grid; gap: 14px; }
html body #popupOverlay .hm-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
html body #popupOverlay .hm-quote-services { margin: 0; padding: 0; border: 0; min-width: 0; }
html body #popupOverlay .hm-quote-services legend { padding: 0; margin: 0 0 10px; font-size: 0.88rem; font-weight: 600; color: var(--p-text); }
html body #popupOverlay .hm-quote-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
html body #popupOverlay .hm-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 74px;
    padding: 10px 6px;
    border-radius: 14px;
    border: 1px solid var(--p-line-strong);
    background: var(--p-bg);
    color: var(--p-text);
    font-family: var(--p-font);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: transform 0.18s var(--p-ease-out), border-color 0.2s ease, background-color 0.2s ease;
}
html body #popupOverlay .hm-chip i { font-size: 1.1rem; color: var(--p-accent); -webkit-text-fill-color: currentColor; transition: transform 0.25s var(--p-ease-out); }
html body #popupOverlay .hm-chip:hover { border-color: var(--p-accent); }
html body #popupOverlay .hm-chip:hover i { transform: translateY(-2px) scale(1.08); }
html body #popupOverlay .hm-chip:active { transform: scale(0.96); }
html body #popupOverlay .hm-chip.is-selected i { color: var(--p-on-accent); }
html body #popupOverlay .hm-sr-select,
html body #popupOverlay .custom-select { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; opacity: 0 !important; pointer-events: none !important; }
html body #popupOverlay .hm-quote-error { margin: 8px 0 0; font-size: 0.85rem; color: #d9483b; }
html[data-theme='dark'] body #popupOverlay .hm-quote-error,
html:not([data-theme='light']) body #popupOverlay .hm-quote-error { color: #ff9a8f; }
html body #popupOverlay .hm-quote-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
html body #popupOverlay .hm-field { display: grid; gap: 6px; }
html body #popupOverlay .hm-field label { font-size: 0.86rem; font-weight: 600; color: var(--p-text); text-transform: none; letter-spacing: 0; }
html body #popupOverlay .hm-field label span { font-weight: 400; color: var(--p-muted); }
html body #popupOverlay .hm-field :is(input, textarea) {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--p-line-strong);
    background: var(--p-bg);
    color: var(--p-text);
    font-family: var(--p-font);
    font-size: 1rem;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
html body #popupOverlay .hm-field textarea { min-height: 88px; resize: vertical; }
html body #popupOverlay .hm-field :is(input, textarea)::placeholder { color: color-mix(in srgb, var(--p-muted) 80%, transparent); }
html body #popupOverlay .hm-field :is(input, textarea):focus { outline: none; border-color: var(--p-accent); box-shadow: 0 0 0 3px var(--p-accent-soft); }
html body #popupOverlay .popup-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 56px;
    margin-top: 4px;
    border-radius: 999px;
    font-family: var(--p-font);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}
html body #popupOverlay .hm-quote-note { margin: -4px 0 0; text-align: center; font-size: 0.82rem; color: var(--p-muted); }
html body #popupOverlay .popup-success {
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--p-accent-soft);
    border: 1px solid var(--p-accent);
    color: var(--p-text);
    font-size: 0.92rem;
    text-align: center;
}
@media (max-width: 560px) {
    html body #popupOverlay .hm-quote-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body #popupOverlay .hm-chip { flex-direction: row; justify-content: flex-start; min-height: 50px; padding: 10px 12px; font-size: 0.84rem; gap: 10px; text-align: left; }
    html body #popupOverlay .hm-quote-row { grid-template-columns: 1fr; }
}

/* ---------- 2. Advert banner ---------- */
html body #hmAds { position: relative; max-width: var(--p-max); margin: 40px auto; }
html body #hmAds:empty { display: none; }
html body #hmAds .hm-ads-track { display: grid; }
@media (prefers-reduced-motion: no-preference) {
    /* owner request: the advert gently grows and shrinks */
    html body #hmAds .hm-ads-track { animation: hm-breathe 4s ease-in-out infinite; transform-origin: center; }
    html body #hmAds .hm-ad.is-active .hm-ad-media img { animation: hm-ad-zoom 12s ease-out both; }
}
@keyframes hm-breathe { 0%, 100% { scale: 0.985; } 50% { scale: 1.015; } }
@keyframes hm-ad-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
html body #hmAds .hm-ad {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 320px;
    border-radius: 28px;
    overflow: hidden;
    background: #151516;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f3f1ed;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s var(--p-ease-out), visibility 0s linear 0.6s;
}
html body #hmAds .hm-ad.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 0.6s ease, transform 0.6s var(--p-ease-out), visibility 0s; }
html body #hmAds .hm-ad.no-media { grid-template-columns: 1fr; border-left: 6px solid var(--p-accent); }
html body #hmAds .hm-ad-media { position: relative; overflow: hidden; min-height: 240px; }
html body #hmAds .hm-ad-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html body #hmAds .hm-ad-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21, 21, 22, 0) 55%, #151516 100%); }
html body #hmAds .hm-ad-body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: clamp(28px, 4vw, 52px); text-align: left; }
html body #hmAds .hm-ad-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--p-accent);
    font-size: 0.78rem;
    font-weight: 600;
}
html body #hmAds .hm-ad h3 { margin: 0; font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.035em; color: #f5f4f1; text-transform: none; }
html body #hmAds .hm-ad p { margin: 0; max-width: 44ch; font-size: 1.05rem; line-height: 1.6; color: rgba(243, 241, 237, 0.74); }
html body #hmAds .hm-ad-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    margin-top: 6px;
    padding: 0 26px;
    border-radius: 999px;
    font-family: var(--p-font);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
html body #hmAds .hm-ad-cta i { transition: transform 0.25s var(--p-ease-out); }
@media (hover: hover) and (pointer: fine) {
    html body #hmAds .hm-ad-cta:hover i { transform: translateX(4px); }
}
html body #hmAds .hm-ads-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
html body #hmAds .hm-ads-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 999px;
    border: 0;
    background: var(--p-line-strong);
    cursor: pointer;
    transition: width 0.35s var(--p-ease-out), background-color 0.3s ease;
}
html body #hmAds .hm-ads-dot.is-active { width: 30px; background: var(--p-accent); }
@media (max-width: 760px) {
    html body #hmAds .hm-ad { grid-template-columns: 1fr; }
    html body #hmAds .hm-ad-media { aspect-ratio: 16 / 9; min-height: 0; }
    html body #hmAds .hm-ad-media::after { background: linear-gradient(0deg, #151516 0%, rgba(21, 21, 22, 0) 45%); }
}

/* ---------- 3. Admin > Adverts (reuses the media-manager look) ---------- */
#hmAdsAdmin { font-family: var(--p-font); color: var(--a-text, #f0eeea); }
#hmAdsAdmin .hm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
#hmAdsAdmin .hm-head h2 { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; color: var(--a-text, #f0eeea); }
#hmAdsAdmin .hm-head p { margin: 4px 0 0; color: var(--a-muted, #a09d98); font-size: 0.9rem; }
#hmAdsAdmin .hm-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px;
    border-radius: 999px; border: 1px solid var(--a-line-2, rgba(255, 255, 255, 0.14)); background: transparent;
    color: var(--a-text, #f0eeea); font: inherit; font-size: 0.88rem; font-weight: 600; white-space: nowrap; cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
#hmAdsAdmin .hm-btn:hover { border-color: rgba(255, 255, 255, 0.3); }
#hmAdsAdmin .hm-btn:active { transform: scale(0.97); }
#hmAdsAdmin .hm-btn.is-danger { background: #c8453a; border-color: #c8453a; color: #fff; }
#hmAdsAdmin .hm-btn.is-danger-outline { color: var(--a-bad-text, #ff9a8f); border-color: rgba(200, 69, 58, 0.45); }
#hmAdsAdmin .hm-btn.is-danger-outline:hover { background: rgba(200, 69, 58, 0.14); }
#hmAdsAdmin .hm-btn:disabled { opacity: 0.6; cursor: progress; }
#hmAdsAdmin .hm-ad-form { padding: 24px; margin-bottom: 22px; border-radius: 18px; background: var(--a-panel-2, #19191b); border: 1px solid var(--a-line-2, rgba(255, 255, 255, 0.07)); }
#hmAdsAdmin .hm-ad-form h3 { margin: 0 0 16px; font-size: 1.1rem; color: var(--a-text, #f0eeea); }
#hmAdsAdmin .hm-ad-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
#hmAdsAdmin .hm-ad-field { display: grid; gap: 6px; }
#hmAdsAdmin .hm-ad-field--wide { grid-column: 1 / -1; }
#hmAdsAdmin .hm-ad-field label { font-size: 0.85rem; font-weight: 600; color: var(--a-text, #f0eeea); }
#hmAdsAdmin .hm-ad-field label span { font-weight: 400; color: var(--a-muted, #a09d98); }
#hmAdsAdmin .hm-ad-field :is(input:not([type='file']), textarea) {
    min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--a-line-2, rgba(255, 255, 255, 0.14));
    background: #111112; color: var(--a-text, #f0eeea); font: inherit; font-size: 0.95rem;
}
#hmAdsAdmin .hm-ad-field :is(input, textarea):focus { outline: none; border-color: var(--p-accent); box-shadow: 0 0 0 3px var(--p-accent-soft); }
#hmAdsAdmin .hm-ad-image-row { display: flex; align-items: center; gap: 14px; color: var(--a-muted, #a09d98); font-size: 0.88rem; }
#hmAdsAdmin .hm-ad-image-row img { width: 96px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--a-line-2, rgba(255, 255, 255, 0.1)); }
#hmAdsAdmin .hm-ad-check { display: flex; align-items: center; gap: 10px; color: var(--a-text, #f0eeea); font-size: 0.9rem; cursor: pointer; }
#hmAdsAdmin .hm-ad-check input { width: 18px; height: 18px; accent-color: var(--p-accent); }
#hmAdsAdmin .hm-ad-error { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: rgba(220, 70, 60, 0.12); color: var(--a-bad-text, #ff9a8f); font-size: 0.88rem; }
#hmAdsAdmin .hm-ad-rows { display: grid; gap: 10px; }
#hmAdsAdmin .hm-ad-row {
    position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr) auto auto; align-items: center; gap: 16px;
    padding: 12px 14px; border-radius: 16px; background: var(--a-panel-2, #19191b); border: 1px solid var(--a-line-2, rgba(255, 255, 255, 0.07));
}
#hmAdsAdmin .hm-ad-row.is-paused { opacity: 0.62; }
#hmAdsAdmin .hm-ad-thumb { width: 88px; height: 60px; border-radius: 10px; overflow: hidden; background: #111112; display: grid; place-items: center; color: var(--p-accent); }
#hmAdsAdmin .hm-ad-thumb img { width: 100%; height: 100%; object-fit: cover; }
#hmAdsAdmin .hm-ad-info { display: grid; gap: 2px; min-width: 0; }
#hmAdsAdmin .hm-ad-info strong { color: var(--a-text, #f0eeea); font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hmAdsAdmin .hm-ad-info span { color: var(--a-muted, #a09d98); font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hmAdsAdmin .hm-ad-info small { color: #7d7a75; font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hmAdsAdmin .hm-ad-status { padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: rgba(79, 184, 116, 0.14); color: #6fcf8f; }
#hmAdsAdmin .hm-ad-row.is-paused .hm-ad-status { background: var(--a-raise, rgba(255, 255, 255, 0.07)); color: var(--a-muted, #a09d98); }
#hmAdsAdmin .hm-ad-row-actions { display: flex; gap: 8px; }
#hmAdsAdmin .hm-ad-confirm {
    position: absolute; inset: 0; display: none; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 0 14px; border-radius: 16px; background: rgba(17, 17, 18, 0.94); color: var(--a-text, #f0eeea); font-weight: 600;
}
#hmAdsAdmin .hm-ad-row.is-confirming .hm-ad-confirm { display: flex; }
#hmAdsAdmin .hm-state { display: grid; justify-items: center; gap: 8px; padding: 48px 16px; text-align: center; border-radius: 16px; background: #151516; }
#hmAdsAdmin .hm-state i { font-size: 1.8rem; color: var(--a-muted, #a09d98); }
#hmAdsAdmin .hm-state.is-offline i { color: var(--p-accent); }
#hmAdsAdmin .hm-state h3 { margin: 4px 0 0; font-size: 1.1rem; color: var(--a-text, #f0eeea); }
#hmAdsAdmin .hm-state p { margin: 0 0 8px; max-width: 46ch; color: var(--a-muted, #a09d98); line-height: 1.5; }
@media (max-width: 720px) {
    #hmAdsAdmin .hm-ad-form-grid { grid-template-columns: 1fr; }
    #hmAdsAdmin .hm-ad-row { grid-template-columns: 64px minmax(0, 1fr); }
    #hmAdsAdmin .hm-ad-thumb { width: 64px; height: 48px; }
    #hmAdsAdmin .hm-ad-status,
    #hmAdsAdmin .hm-ad-row-actions { grid-column: 2; }
}

/* ---------- 4. Glassmorphism for every orange button ----------
   Owner request. Translucent orange (84%) + backdrop blur + light top edge.
   Text is dark (#140c05): >= 4.5:1 over both the dark and light page colours.
   !important is deliberate here: this is the single source of truth for
   orange buttons and must beat the many older per-button rules. */
html body :is(
    #heroQuoteBtn,
    .premium-nav-cta,
    #popupOverlay .popup-submit-btn,
    #popupOverlay .hm-chip.is-selected,
    #hmAds .hm-ad-cta,
    #reviewCta .hm-cta-review .hm-cta-btn.is-primary,
    #showcase .showcase-filters .filter-btn.active,
    #showcase .view-project-btn,
    .modern-review-section .hailifu-review-link,
    .hm-login-submit,
    #hmMedia .hm-btn.is-primary,
    #hmAdsAdmin .hm-btn.is-primary
) {
    position: relative;
    isolation: isolate;
    background-color: color-mix(in srgb, var(--p-accent) 84%, transparent) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.08) 46%, rgba(255, 255, 255, 0) 54%, rgba(0, 0, 0, 0.06) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: var(--p-on-accent) !important;
    -webkit-text-fill-color: var(--p-on-accent) !important;
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.14),
        0 10px 28px -12px color-mix(in srgb, var(--p-accent) 70%, transparent) !important;
    text-shadow: none !important;
    transition: transform 0.2s var(--p-ease-out), box-shadow 0.25s ease, background-color 0.2s ease !important;
}
html body :is(
    #heroQuoteBtn,
    .premium-nav-cta,
    #popupOverlay .popup-submit-btn,
    #popupOverlay .hm-chip.is-selected,
    #hmAds .hm-ad-cta,
    #reviewCta .hm-cta-review .hm-cta-btn.is-primary,
    #showcase .showcase-filters .filter-btn.active,
    #showcase .view-project-btn,
    .modern-review-section .hailifu-review-link,
    .hm-login-submit,
    #hmMedia .hm-btn.is-primary,
    #hmAdsAdmin .hm-btn.is-primary
):hover {
    background-color: color-mix(in srgb, var(--p-accent) 94%, transparent) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -1px 0 rgba(0, 0, 0, 0.14),
        0 14px 34px -12px color-mix(in srgb, var(--p-accent) 85%, transparent) !important;
    color: var(--p-on-accent) !important;
    -webkit-text-fill-color: var(--p-on-accent) !important;
}
html body :is(#heroQuoteBtn, .premium-nav-cta, #popupOverlay .popup-submit-btn, #hmAds .hm-ad-cta, #reviewCta .hm-cta-review .hm-cta-btn.is-primary, .hm-login-submit):active { transform: scale(0.97) !important; }
html body :is(#heroQuoteBtn, .premium-nav-cta, #popupOverlay .popup-submit-btn, #hmAds .hm-ad-cta, #reviewCta .hm-cta-btn, #popupOverlay .hm-chip) i { color: inherit; -webkit-text-fill-color: currentColor !important; }
/* Service tile "Request a Quote" turns glass orange on hover */
html body #services .services-grid > .card .request-quote-btn:hover {
    background-color: color-mix(in srgb, var(--p-accent) 84%, transparent) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.08) 46%, rgba(255, 255, 255, 0) 54%) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: var(--p-on-accent) !important;
    -webkit-text-fill-color: var(--p-on-accent) !important;
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}
@media (prefers-reduced-transparency: reduce) {
    html body :is(#heroQuoteBtn, .premium-nav-cta, #popupOverlay .popup-submit-btn, #hmAds .hm-ad-cta, #reviewCta .hm-cta-review .hm-cta-btn.is-primary, #showcase .filter-btn.active, .hm-login-submit) {
        background-color: var(--p-accent) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ---------- 5. Tile animations (driven by premium.js) ---------- */
html body :is(#showcase .showcase-item.card, #services .services-grid > .card) {
    --lift: 0px;
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift));
    transform-style: preserve-3d;
    transition: transform 0.3s var(--p-ease-out), border-color 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
    html body #showcase .showcase-item.card:hover,
    html body #services .services-grid > .card:hover {
        --lift: -6px;
        transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift));
        border-color: color-mix(in srgb, var(--p-accent) 55%, transparent);
    }
}
html body :is(#showcase .showcase-item.card, #services .services-grid > .card).is-tilting { transition: transform 0.12s linear, border-color 0.3s ease; }

/* Soft light that follows the pointer (matte, low opacity) */
html body #showcase .showcase-item.card::before,
html body #services .services-grid > .card::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.16), transparent 45%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
html body :is(#showcase .showcase-item.card, #services .services-grid > .card).is-tilting::before { opacity: 1; }

/* Icon / label micro-motion on hover */
html body #services .services-grid > .card > i { transition: transform 0.35s var(--p-ease-out), background-color 0.3s ease; }
html body #services .services-grid > .card:hover > i { transform: translateY(-3px) rotate(-8deg) scale(1.1); background-color: var(--p-accent-soft); }
html body #showcase .showcase-item .project-category { transition: transform 0.35s var(--p-ease-out), background-color 0.3s ease; }
html body #showcase .showcase-item.card:hover .project-category { transform: translateX(4px); background-color: color-mix(in srgb, var(--p-accent) 70%, rgba(10, 10, 11, 0.6)); }
html body #showcase .showcase-item .showcase-placeholder span { display: inline-block; transition: transform 0.4s var(--p-ease-out); }
html body #showcase .showcase-item.card:hover .showcase-placeholder span { transform: translateY(-6px) scale(1.03); }

/* Staggered entrance (premium.js adds .hm-anim to <html> and .hm-in per tile) */
html.hm-anim body :is(#showcase .showcase-item.card, #services .services-grid > .card) {
    animation: none;
    opacity: 0;
    translate: 0 40px;
    scale: 0.95;
    transition:
        opacity 0.7s ease-out var(--hm-delay, 0ms),
        translate 0.9s var(--p-ease-out) var(--hm-delay, 0ms),
        scale 0.9s var(--p-ease-out) var(--hm-delay, 0ms),
        transform 0.3s var(--p-ease-out),
        border-color 0.3s ease;
}
html.hm-anim body :is(#showcase .showcase-item.card, #services .services-grid > .card).hm-in { opacity: 1; translate: 0 0; scale: 1; }

/* Re-filter pop when a Work Showcase filter is clicked */
html.hm-anim body #showcase .showcase-grid.hm-refilter > .showcase-item.card.hm-in {
    animation: hm-pop 0.5s var(--p-ease-out) var(--hm-pop-delay, 0ms) both;
}
@keyframes hm-pop { from { opacity: 0; scale: 0.9; } to { opacity: 1; scale: 1; } }

html body .modern-review-section #hmAds { background: transparent; border: 0; box-shadow: none; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Performance: the advert breathes forever, so avoid re-blurring its button every frame */
html body #hmAds .hm-ad-cta { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html body #hmAds .hm-ads-track { will-change: scale; }

/* ==========================================================================
   OWNER REQUEST (2026-09-29, part 3)
   Showcase + gallery rebuilt, review popup rebuilt, popup animations,
   Featured Work + scroll animation, admin portal rebuilt (design system).
   ========================================================================== */

/* ---------- Shared motion ---------- */
@keyframes hm-modal-in { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes hm-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hm-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hm-page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hm-star-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-8deg); } 100% { transform: scale(1); } }
html body .hm-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Scroll progress + scroll-driven motion ---------- */
.hm-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 10005;
    pointer-events: none;
    background: var(--p-accent);
    transform-origin: left center;
    transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .hm-scroll-progress { animation: hm-progress linear both; animation-timeline: scroll(root block); }
        /* Hero content drifts up and fades as you scroll past it */
        html body .hero .hero-content {
            animation: hm-hero-leave linear both;
            animation-timeline: scroll(root block);
            animation-range: 0 90vh;
        }
        /* More sections arrive as they enter the screen */
        html body :is(#featured-work .featured-bento, #hmAds, .modern-review-header, .featured-reviews-feed, .footer-content > *, #hmScChips, .hm-sc-search) {
            animation: hm-reveal linear backwards;
            animation-timeline: view();
            animation-range: entry 0% entry 40%;
        }
    }
}
@keyframes hm-progress { to { transform: scaleX(1); } }
@keyframes hm-hero-leave { to { transform: translateY(-80px); opacity: 0.1; } }

/* ---------- Featured Work animation ---------- */
@media (prefers-reduced-motion: no-preference) {
    html body #featured-work .featured-loop-slide .featured-card-media :is(img, video) {
        transition: transform 1.2s var(--p-ease-out), filter 0.8s ease;
        transform: scale(1.12);
        filter: saturate(0.6) brightness(0.7);
    }
    html body #featured-work .featured-loop-slide.is-active .featured-card-media :is(img, video) {
        animation: hm-feat-zoom 7s ease-out both;
        filter: none;
    }
    html body #featured-work .featured-loop-slide .featured-card-content > * { opacity: 0; transform: translateY(18px); }
    html body #featured-work .featured-loop-slide.is-active .featured-card-content > * { animation: hm-rise 0.7s var(--p-ease-out) both; }
    html body #featured-work .featured-loop-slide.is-active .featured-card-content > :nth-child(1) { animation-delay: 0.25s; }
    html body #featured-work .featured-loop-slide.is-active .featured-card-content > :nth-child(2) { animation-delay: 0.38s; }
    html body #featured-work .featured-loop-slide.is-active .featured-card-content > :nth-child(3) { animation-delay: 0.5s; }
}
@keyframes hm-feat-zoom { from { transform: scale(1.14); } to { transform: scale(1); } }
html body #featured-work .featured-loop-viewport { border-radius: 24px; overflow: hidden; }
html body #featured-work .featured-card-content {
    background: linear-gradient(0deg, rgba(10, 10, 11, 0.92) 0%, rgba(10, 10, 11, 0.5) 55%, rgba(10, 10, 11, 0) 100%);
    padding: clamp(20px, 3vw, 36px);
}
html body #featured-work .featured-card-title { font-family: var(--p-font); font-size: clamp(1.4rem, 2.6vw, 2.2rem); font-weight: 700; letter-spacing: -0.03em; text-transform: none; color: #f5f4f1; }
html body #featured-work .featured-card-description { color: rgba(245, 244, 241, 0.78); font-size: 1rem; }
html body #featured-work .featured-card-category {
    display: inline-flex; align-items: center; gap: 6px; width: fit-content;
    padding: 5px 12px; border-radius: 999px; background: rgba(10, 10, 11, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.16); color: var(--p-accent); font-size: 0.78rem; font-weight: 600; text-transform: none; letter-spacing: 0;
}
html body #featured-work .featured-loop-nav {
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(10, 10, 11, 0.5); border: 1px solid rgba(255, 255, 255, 0.2); color: #f5f4f1;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: transform 0.2s var(--p-ease-out), background-color 0.2s ease;
}
html body #featured-work .featured-loop-nav:hover { background: rgba(10, 10, 11, 0.75); transform: scale(1.06); }

/* ---------- Work Showcase (rebuilt) ---------- */
html body #showcase .hm-sc { max-width: var(--p-max); margin: 0 auto; }
html body #showcase .hm-sc-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin-bottom: 14px; }
html body #showcase .hm-sc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
html body #showcase .hm-sc-chip {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
    border-radius: 999px; border: 1px solid var(--p-line-strong); background: transparent;
    color: var(--p-text); font-family: var(--p-font); font-size: 0.9rem; font-weight: 500; cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s var(--p-ease-out);
}
html body #showcase .hm-sc-chip span { min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--p-surface-2); color: var(--p-muted); font-size: 0.75rem; }
html body #showcase .hm-sc-chip:hover { border-color: var(--p-accent); background: var(--p-accent-soft); }
html body #showcase .hm-sc-chip:active { transform: scale(0.96); }
html body #showcase .hm-sc-chip.is-active {
    background-color: color-mix(in srgb, var(--p-accent) 84%, transparent);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0) 55%);
    border-color: rgba(255, 255, 255, 0.4); color: var(--p-on-accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 8px 22px -10px color-mix(in srgb, var(--p-accent) 70%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
html body #showcase .hm-sc-chip.is-active span { background: rgba(20, 12, 5, 0.14); color: var(--p-on-accent); }
html body #showcase .hm-sc-search {
    display: flex; align-items: center; gap: 10px; height: 44px; width: min(280px, 100%);
    padding: 0 16px; border-radius: 999px; border: 1px solid var(--p-line-strong); background: var(--p-surface); color: var(--p-muted);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
html body #showcase .hm-sc-search:focus-within { border-color: var(--p-accent); box-shadow: 0 0 0 3px var(--p-accent-soft); }
html body #showcase .hm-sc-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--p-text); font-family: var(--p-font); font-size: 0.95rem; }
html body #showcase .hm-sc-count { text-align: center; color: var(--p-muted); font-size: 0.88rem; margin: 0 0 22px; min-height: 1.2em; }
html body #showcase .hm-sc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 260px;
    grid-auto-flow: dense;
    gap: 16px;
}
html body #showcase .hm-sc-card {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: var(--p-surface-2);
    border: 1px solid var(--p-line);
    cursor: pointer;
    isolation: isolate;
    outline-offset: 4px;
}
html body #showcase .hm-sc-card.is-feature { grid-column: span 2; grid-row: span 2; }
html body #showcase .hm-sc-media { position: absolute; inset: 0; z-index: 0; }
html body #showcase .hm-sc-media :is(img, video) { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--p-ease-out), filter 0.6s ease; }
html body #showcase .hm-sc-card::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(0deg, rgba(10, 10, 11, 0.92) 0%, rgba(10, 10, 11, 0.35) 45%, rgba(10, 10, 11, 0) 70%);
    transition: opacity 0.4s ease;
}
html body #showcase .hm-sc-cat,
html body #showcase .hm-sc-badge {
    position: absolute; top: 14px; z-index: 2;
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px;
    background: rgba(10, 10, 11, 0.55); border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: #f5f4f1; font-size: 0.76rem; font-weight: 600;
    transition: transform 0.35s var(--p-ease-out), background-color 0.3s ease;
}
html body #showcase .hm-sc-cat { left: 14px; }
html body #showcase .hm-sc-badge { right: 14px; }
html body #showcase .hm-sc-badge i { color: var(--p-accent); }
html body #showcase .hm-sc-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px 20px 20px; color: #f5f4f1; }
html body #showcase .hm-sc-info h3 { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: #f5f4f1; text-transform: none; }
html body #showcase .hm-sc-card.is-feature .hm-sc-info h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
html body #showcase .hm-sc-info p {
    margin: 6px 0 0; font-size: 0.9rem; line-height: 1.5; color: rgba(245, 244, 241, 0.75);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html body #showcase .hm-sc-actions {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    max-height: 0; opacity: 0; margin-top: 0; overflow: hidden;
    transition: max-height 0.4s var(--p-ease-out), opacity 0.3s ease, margin-top 0.4s var(--p-ease-out);
}
html body #showcase .hm-sc-open { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; color: #f5f4f1; }
html body #showcase .hm-sc-open i { transition: transform 0.25s var(--p-ease-out); color: var(--p-accent); }
html body #showcase .hm-sc-quote {
    height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
    font-family: var(--p-font); font-size: 0.82rem; font-weight: 700; color: var(--p-on-accent);
    background-color: color-mix(in srgb, var(--p-accent) 84%, transparent);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0) 55%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
html body #showcase .hm-sc-card:is(:hover, :focus-visible) .hm-sc-media :is(img, video) { transform: scale(1.07); }
html body #showcase .hm-sc-card:is(:hover, :focus-visible) .hm-sc-actions { max-height: 60px; opacity: 1; margin-top: 12px; }
html body #showcase .hm-sc-card:is(:hover, :focus-visible) .hm-sc-open i { transform: translateX(4px); }
html body #showcase .hm-sc-card:is(:hover, :focus-visible) .hm-sc-cat { transform: translateX(4px); background: color-mix(in srgb, var(--p-accent) 70%, rgba(10, 10, 11, 0.6)); color: var(--p-on-accent); }
@media (hover: none) {
    html body #showcase .hm-sc-actions { max-height: 60px; opacity: 1; margin-top: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
    html body #showcase .hm-sc-grid.is-animating > .hm-sc-card { animation: hm-sc-in 0.55s var(--p-ease-out) both; animation-delay: calc(min(var(--i, 0), 8) * 45ms); }
}
@keyframes hm-sc-in { from { opacity: 0; scale: 0.94; translate: 0 16px; } to { opacity: 1; scale: 1; translate: 0 0; } }
html body #showcase .hm-sc-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 8px; padding: 56px 16px; border-radius: 22px; background: var(--p-surface); border: 1px dashed var(--p-line-strong); text-align: center; }
html body #showcase .hm-sc-empty i { font-size: 1.6rem; color: var(--p-accent); }
html body #showcase .hm-sc-empty h3 { margin: 0; color: var(--p-text); font-size: 1.15rem; }
html body #showcase .hm-sc-empty p { margin: 0 0 6px; color: var(--p-muted); }
html body #showcase :is(.hm-sc-reset, .hm-sc-more) {
    height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--p-line-strong);
    background: var(--p-surface); color: var(--p-text); font-family: var(--p-font); font-size: 0.95rem; font-weight: 600; cursor: pointer;
    transition: border-color 0.2s ease, transform 0.15s var(--p-ease-out);
}
html body #showcase :is(.hm-sc-reset, .hm-sc-more):hover { border-color: var(--p-accent); }
html body #showcase :is(.hm-sc-reset, .hm-sc-more):active { transform: scale(0.97); }
html body #showcase .hm-sc-more-wrap { display: flex; justify-content: center; margin-top: 26px; }
@media (max-width: 960px) {
    html body #showcase .hm-sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 230px; }
}
@media (max-width: 600px) {
    html body #showcase .hm-sc-grid { grid-template-columns: 1fr; grid-auto-rows: 250px; }
    html body #showcase .hm-sc-card.is-feature { grid-column: auto; grid-row: span 1; }
    html body #showcase .hm-sc-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; width: 100%; padding-bottom: 4px; scrollbar-width: none; }
    html body #showcase .hm-sc-chip { flex: 0 0 auto; }
    html body #showcase .hm-sc-search { width: 100%; }
}

/* ---------- Gallery viewer ---------- */
.hm-gal {
    position: fixed; inset: 0; z-index: 10030;
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
    background: rgba(9, 9, 10, 0.96);
    color: #f5f4f1; font-family: var(--p-font);
    opacity: 0; transition: opacity 0.26s ease;
}
.hm-gal.is-open { opacity: 1; }
.hm-gal[hidden] { display: none; }
.hm-gal-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px clamp(16px, 3vw, 28px); }
.hm-gal-heading { min-width: 0; }
.hm-gal-cat { font-size: 0.78rem; font-weight: 600; color: var(--p-accent); }
.hm-gal-heading h3 { margin: 2px 0 0; font-size: clamp(1.05rem, 2vw, 1.4rem); font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #f5f4f1; }
.hm-gal-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hm-gal-counter { font-size: 0.88rem; color: rgba(245, 244, 241, 0.7); font-variant-numeric: tabular-nums; margin-right: 6px; }
.hm-gal-btn, .hm-gal-nav {
    width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); color: #f5f4f1;
    cursor: pointer; transition: background-color 0.2s ease, transform 0.15s var(--p-ease-out);
}
.hm-gal-btn:hover, .hm-gal-nav:hover { background: rgba(255, 255, 255, 0.14); }
.hm-gal-btn:active, .hm-gal-nav:active { transform: scale(0.94); }
.hm-gal-stage { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 clamp(8px, 2vw, 20px); min-height: 0; touch-action: pan-y; }
.hm-gal-nav { flex-shrink: 0; width: 52px; height: 52px; }
.hm-gal-nav[hidden] { display: none; }
.hm-gal-figure { margin: 0; flex: 1; height: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 16px; }
.hm-gal-figure :is(img, video) { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; transition: transform 0.35s var(--p-ease-out); cursor: zoom-in; }
.hm-gal-figure iframe { width: min(100%, 1100px); aspect-ratio: 16 / 9; border: 0; border-radius: 12px; }
.hm-gal-figure.is-zoomed :is(img) { transform: scale(2.2); cursor: zoom-out; }
@media (prefers-reduced-motion: no-preference) {
    .hm-gal.is-open .hm-gal-figure { animation: hm-modal-in 0.4s var(--p-ease-out) both; }
    .hm-gal-figure.from-right :is(img, video, iframe) { animation: hm-slide-r 0.35s var(--p-ease-out) both; }
    .hm-gal-figure.from-left :is(img, video, iframe) { animation: hm-slide-l 0.35s var(--p-ease-out) both; }
}
@keyframes hm-slide-r { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes hm-slide-l { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.hm-gal-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(16px, 3vw, 28px) 6px; }
.hm-gal-desc { margin: 0; max-width: 70ch; color: rgba(245, 244, 241, 0.75); font-size: 0.95rem; line-height: 1.5; }
.hm-gal-quote {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 999px; cursor: pointer;
    font-family: var(--p-font); font-size: 0.95rem; font-weight: 700; color: var(--p-on-accent);
    background-color: color-mix(in srgb, var(--p-accent) 86%, transparent);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0) 55%);
    border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.hm-gal-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 10px clamp(16px, 3vw, 28px) 18px; scrollbar-width: thin; justify-content: safe center; }
.hm-gal-thumbs:empty { display: none; }
.hm-gal-thumb {
    flex: 0 0 auto; width: 76px; height: 56px; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer;
    border: 2px solid transparent; background: rgba(255, 255, 255, 0.08); color: #f5f4f1; opacity: 0.55;
    transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s var(--p-ease-out);
}
.hm-gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hm-gal-thumb:hover { opacity: 0.9; }
.hm-gal-thumb.is-active { opacity: 1; border-color: var(--p-accent); transform: translateY(-2px); }
body.hm-gal-open { overflow: hidden; }
@media (max-width: 640px) {
    .hm-gal-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 42px; height: 42px; background: rgba(10, 10, 11, 0.6); }
    .hm-gal-nav.is-prev { left: 8px; }
    .hm-gal-nav.is-next { right: 8px; }
    .hm-gal-nav:active { transform: translateY(-50%) scale(0.94); }
    .hm-gal-bottom { flex-direction: column; align-items: stretch; }
    .hm-gal-quote { justify-content: center; }
}

/* ---------- Write a Review popup (rebuilt) ---------- */
html body #reviewModal.hm-review { background: rgba(8, 8, 9, 0.66); background-image: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 16px; }
html body #reviewModal.hm-review.active { animation: hm-backdrop-in 0.25s ease both; }
html body #reviewModal .review-modal-dialog {
    width: min(600px, 100%); max-height: calc(100dvh - 32px); border-radius: 26px;
    background: var(--p-surface); background-image: none; border: 1px solid var(--p-line);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6); color: var(--p-text); font-family: var(--p-font);
}
@media (prefers-reduced-motion: no-preference) {
    html body #reviewModal.active .review-modal-dialog { animation: hm-modal-in 0.42s var(--p-ease-out) both; }
    html body #reviewModal.active .hm-review-step { animation: hm-rise 0.5s var(--p-ease-out) both; animation-delay: calc(0.12s + var(--i, 0) * 0.06s); }
}
html body #reviewModal .review-modal-header {
    position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 14px;
    padding: 26px 26px 18px; background: var(--p-surface); background-image: none; border-bottom: 1px solid var(--p-line);
}
html body #reviewModal .hm-review-brand { display: flex; align-items: center; gap: 14px; padding-right: 48px; }
html body #reviewModal .hm-review-logo { width: 46px; height: 46px; border-radius: 14px; object-fit: cover; }
html body #reviewModal .hm-review-brand h2 { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; color: var(--p-text); text-transform: none; }
html body #reviewModal .hm-review-brand p { margin: 2px 0 0; font-size: 0.88rem; color: var(--p-muted); }
html body #reviewModal .review-modal-identity-overlay {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px;
    background: var(--p-bg); border: 1px solid var(--p-line); position: static;
}
html body #reviewModal .review-modal-identity-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--p-surface-2); }
html body #reviewModal .review-modal-identity-copy { display: grid; gap: 1px; }
html body #reviewModal .review-modal-identity-copy strong { font-size: 0.9rem; color: var(--p-text); }
html body #reviewModal .review-modal-identity-copy span { font-size: 0.78rem; color: var(--p-muted); }
html body #reviewModal .review-modal-close {
    position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; display: grid; place-items: center;
    border-radius: 50%; border: 1px solid var(--p-line); background: var(--p-surface-2); color: var(--p-text); cursor: pointer;
    transition: transform 0.2s var(--p-ease-out);
}
html body #reviewModal .review-modal-close:hover { transform: rotate(90deg); }
html body #reviewModal .review-modal-body { padding: 20px 26px 26px; overflow-y: auto; background: var(--p-surface); }
html body #reviewModal .review-composer { display: grid; gap: 20px; }
html body #reviewModal .hm-review-label { display: block; margin-bottom: 10px; font-size: 0.92rem; font-weight: 600; color: var(--p-text); }
html body #reviewModal .review-sublabel { font-weight: 400; color: var(--p-muted); }
html body #reviewModal .hm-review-rating { display: grid; justify-items: center; text-align: center; margin-bottom: 20px; }
html body #reviewModal .google-star-rating { display: flex; gap: 6px; }
html body #reviewModal .google-star {
    width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 14px;
    background: transparent; color: var(--p-line-strong); font-size: 2rem; cursor: pointer;
    transition: color 0.15s ease, transform 0.2s var(--p-ease-out);
}
html body #reviewModal .google-star i { color: inherit; -webkit-text-fill-color: currentColor; }
html body #reviewModal .google-star:hover { transform: translateY(-2px) scale(1.08); }
html body #reviewModal .google-star[aria-checked='true'] { color: var(--p-accent); }
html body #reviewModal .google-star.is-pop { animation: hm-star-pop 0.4s var(--p-ease-out); }
html body #reviewModal .hm-rating-word { margin-top: 8px; min-height: 1.3em; font-size: 0.95rem; font-weight: 600; color: var(--p-muted); transition: color 0.2s ease; }
html body #reviewModal .hm-rating-word:not([data-rating='0']):not(:empty)[data-rating] { color: var(--p-accent); }
html body #reviewModal textarea {
    width: 100%; min-height: 110px; padding: 12px 14px; border-radius: 14px; resize: vertical;
    border: 1px solid var(--p-line-strong); background: var(--p-bg); color: var(--p-text);
    font-family: var(--p-font); font-size: 1rem; line-height: 1.5;
}
html body #reviewModal textarea:focus { outline: none; border-color: var(--p-accent); box-shadow: 0 0 0 3px var(--p-accent-soft); }
html body #reviewModal textarea::placeholder { color: color-mix(in srgb, var(--p-muted) 80%, transparent); }
html body #reviewModal .review-tag-group,
html body #reviewModal .review-service-grid { display: flex; flex-wrap: wrap; gap: 8px; }
html body #reviewModal .google-pill {
    display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--p-line-strong); background: var(--p-bg); color: var(--p-text);
    font-family: var(--p-font); font-size: 0.86rem; font-weight: 500; cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s var(--p-ease-out);
}
html body #reviewModal .google-pill:active { transform: scale(0.96); }
html body #reviewModal .google-pill:hover { border-color: var(--p-accent); }
html body #reviewModal .google-pill[aria-pressed='true'],
html body #reviewModal .review-service-option:has(input:checked) {
    background: var(--p-accent-soft); border-color: var(--p-accent); color: var(--p-text); font-weight: 600;
}
html body #reviewModal .review-service-option input { position: absolute; opacity: 0; pointer-events: none; }
html body #reviewModal .hm-review-photos { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
html body #reviewModal .review-photo-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px;
    border: 1px dashed var(--p-line-strong); background: transparent; color: var(--p-text); font-family: var(--p-font); font-weight: 600; cursor: pointer;
}
html body #reviewModal .review-photo-btn:hover { border-color: var(--p-accent); }
html body #reviewModal .review-photo-status { font-size: 0.85rem; color: var(--p-muted); }
html body #reviewModal .submit-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; border-radius: 999px; cursor: pointer;
    font-family: var(--p-font); font-size: 1.05rem; font-weight: 700; color: var(--p-on-accent); text-transform: none; letter-spacing: 0;
    background-color: color-mix(in srgb, var(--p-accent) 84%, transparent) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.08) 46%, rgba(255, 255, 255, 0) 54%) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 10px 28px -12px color-mix(in srgb, var(--p-accent) 70%, transparent) !important;
    backdrop-filter: blur(14px) saturate(170%); -webkit-backdrop-filter: blur(14px) saturate(170%);
    transition: transform 0.2s var(--p-ease-out);
}
html body #reviewModal .submit-btn:active { transform: scale(0.97); }
html body #reviewModal .form-success { display: none; padding: 18px; border-radius: 16px; background: var(--p-accent-soft); border: 1px solid var(--p-accent); color: var(--p-text); text-align: center; font-weight: 600; }
html body #reviewModal .form-success i { display: block; font-size: 1.8rem; color: var(--p-accent); margin-bottom: 8px; }
@media (max-width: 520px) {
    html body #reviewModal .google-star { width: 46px; height: 46px; font-size: 1.7rem; }
    html body #reviewModal .review-modal-header, html body #reviewModal .review-modal-body { padding-left: 18px; padding-right: 18px; }
}

/* ---------- Other popups: animated entrances ---------- */
@media (prefers-reduced-motion: no-preference) {
    html body #popupOverlay.active { animation: hm-backdrop-in 0.25s ease both; }
    html body #projectModal.active .project-modal-content,
    html body #projectModal.active > div:first-child { animation: hm-modal-in 0.42s var(--p-ease-out) both; }
    html body #photoGalleryModal.active .gallery-container { animation: hm-modal-in 0.42s var(--p-ease-out) both; }
    html body .hm-login { animation: hm-backdrop-in 0.25s ease both; }
    html body .hm-login .hm-login-card { animation: hm-modal-in 0.42s var(--p-ease-out) both; }
    html body .hm-login-card.is-switching > * { animation: hm-rise 0.35s var(--p-ease-out) both; }
    html body #chatbotContainer.active { animation: hm-modal-in 0.35s var(--p-ease-out) both; transform-origin: bottom left; }
    html body #adminPanel.active { animation: hm-backdrop-in 0.3s ease both; }
}
.hm-login-link { height: 36px; border: 0; background: none; color: var(--p-accent); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.hm-login-link:hover { text-decoration: underline; }
.hm-login-ok { margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(79, 184, 116, 0.14); color: #7fdc9e; font-size: 0.88rem; }
.hm-login-hint { margin: 2px 0 0; font-size: 0.8rem; color: #a09d98; }
.hm-login-pwblock { display: flex; flex-direction: column; gap: 8px; }
.hm-login-pwblock[hidden] { display: none; }
.hm-pw-wrap { position: relative; display: flex; }
.hm-pw-wrap input { flex: 1; padding-right: 48px !important; }
.hm-pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #a09d98; cursor: pointer; }
.hm-pw-toggle:hover { color: #f0eeea; }
.hm-pw-meter { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.hm-pw-meter span { display: block; height: 100%; width: 0; background: #c8453a; transition: width 0.3s var(--p-ease-out), background-color 0.3s ease; }
.hm-pw-meter span[data-score='2'] { background: #d9a13b; }
.hm-pw-meter span[data-score='3'], .hm-pw-meter span[data-score='4'] { background: #4fb874; }

/* ==========================================================================
   ADMIN PORTAL design system (rebuilt). Always dark, matte, orange accent.
   ========================================================================== */
#adminPanel.hm-admin {
    --a-bg: #0f0f10; --a-panel: #17171a; --a-panel-2: #1e1e22; --a-line: rgba(255, 255, 255, 0.07); --a-line-2: rgba(255, 255, 255, 0.13);
    --a-text: #f0eeea; --a-muted: #9d9a95;
    background: var(--a-bg) !important; color: var(--a-text); font-family: var(--p-font);
}
#adminPanel.hm-admin .admin-sidebar-v2 {
    background: #131315 !important; background-image: none !important; border-right: 1px solid var(--a-line); box-shadow: none !important;
    display: flex; flex-direction: column; padding: 20px 14px;
}
#adminPanel.hm-admin .sidebar-header { display: flex; align-items: center; gap: 12px; padding: 4px 8px 22px; border: 0; background: none; }
#adminPanel.hm-admin .sidebar-logo img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; }
#adminPanel.hm-admin .sidebar-brand h2 { margin: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--a-text); -webkit-text-fill-color: currentColor; background: none; }
#adminPanel.hm-admin .sidebar-brand span { font-size: 0.78rem; color: var(--p-accent); text-transform: none; letter-spacing: 0; }
#adminPanel.hm-admin .sidebar-nav { position: relative; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
#adminPanel.hm-admin .hm-nav-group { margin: 16px 12px 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6f6c68; }
#adminPanel.hm-admin .nav-item {
    position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; width: 100%; height: 42px; padding: 0 12px;
    border: 0; border-radius: 12px; background: transparent !important; color: var(--a-muted); font-family: var(--p-font); font-size: 0.92rem; font-weight: 500;
    text-align: left; cursor: pointer; box-shadow: none !important; transition: color 0.2s ease, background-color 0.2s ease;
}
#adminPanel.hm-admin .nav-item i { width: 18px; text-align: center; font-size: 0.95rem; color: inherit; }
#adminPanel.hm-admin .nav-item:hover { color: var(--a-text); background: var(--a-raise, rgba(255, 255, 255, 0.04)) !important; }
#adminPanel.hm-admin .nav-item.active { color: var(--p-on-accent); font-weight: 600; }
#adminPanel.hm-admin .nav-item.active i { color: var(--p-on-accent); }
#adminPanel.hm-admin .hm-nav-indicator {
    position: absolute; left: 0; right: 0; top: 0; height: 42px; z-index: 0; border-radius: 12px; pointer-events: none;
    background-color: color-mix(in srgb, var(--p-accent) 88%, transparent);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0) 55%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 22px -10px color-mix(in srgb, var(--p-accent) 70%, transparent);
    opacity: 0; transform: translateY(var(--hm-ind-top, 0)); height: var(--hm-ind-h, 42px);
    transition: transform 0.4s var(--p-ease-out), height 0.4s var(--p-ease-out), opacity 0.2s ease;
}
#adminPanel.hm-admin .sidebar-nav.has-indicator .hm-nav-indicator { opacity: 1; }
#adminPanel.hm-admin .sidebar-nav.has-indicator .nav-item.active { background: transparent !important; }
#adminPanel.hm-admin .sidebar-nav:not(.has-indicator) .nav-item.active { background: var(--p-accent) !important; }
#adminPanel.hm-admin .sidebar-footer { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--a-line); }
#adminPanel.hm-admin .hm-side-link,
#adminPanel.hm-admin .admin-exit-btn {
    display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: 12px; border: 0;
    background: transparent !important; color: var(--a-muted) !important; font-family: var(--p-font); font-size: 0.9rem; font-weight: 500; text-decoration: none; cursor: pointer; box-shadow: none !important;
}
#adminPanel.hm-admin .hm-side-link:hover { color: var(--a-text) !important; background: var(--a-raise, rgba(255, 255, 255, 0.04)) !important; }
#adminPanel.hm-admin .admin-exit-btn:hover { color: var(--a-bad-text, #ff9a8f) !important; background: rgba(200, 69, 58, 0.1) !important; }
#adminPanel.hm-admin .admin-main-v2 { background: var(--a-bg) !important; background-image: none !important; }
#adminPanel.hm-admin .main-header {
    display: flex; align-items: center; gap: 16px; padding: 18px clamp(16px, 3vw, 32px);
    background: rgba(15, 15, 16, 0.9) !important; border-bottom: 1px solid var(--a-line); box-shadow: none !important;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
#adminPanel.hm-admin .hm-admin-title { flex: 1; min-width: 0; }
#adminPanel.hm-admin .hm-admin-title h1 { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; color: var(--a-text); }
#adminPanel.hm-admin .hm-admin-title p { margin: 2px 0 0; font-size: 0.86rem; color: var(--a-muted); }
#adminPanel.hm-admin .header-search {
    display: flex; align-items: center; gap: 10px; width: min(300px, 32vw); height: 42px; padding: 0 14px; border-radius: 999px;
    background: var(--a-panel) !important; border: 1px solid var(--a-line); color: var(--a-muted);
}
#adminPanel.hm-admin .header-search input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; color: var(--a-text); font-family: var(--p-font); outline: none; box-shadow: none !important; }
#adminPanel.hm-admin .header-user { position: relative; }
#adminPanel.hm-admin .hm-account {
    display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 6px; border-radius: 999px;
    border: 1px solid var(--a-line); background: var(--a-panel); color: var(--a-text); font-family: var(--p-font); font-size: 0.86rem; cursor: pointer;
}
#adminPanel.hm-admin .hm-account .user-avatar img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
#adminPanel.hm-admin .hm-account-email { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#adminPanel.hm-admin .hm-account i { font-size: 0.7rem; color: var(--a-muted); }
#adminPanel.hm-admin .hm-account-menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 210px; padding: 6px; border-radius: 14px;
    background: var(--a-panel-2); border: 1px solid var(--a-line-2); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
    animation: hm-modal-in 0.22s var(--p-ease-out) both; transform-origin: top right;
}
#adminPanel.hm-admin .hm-account-menu[hidden] { display: none; }
#adminPanel.hm-admin .hm-account-menu button {
    display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: 10px;
    background: transparent; color: var(--a-text); font-family: var(--p-font); font-size: 0.9rem; text-align: left; cursor: pointer;
}
#adminPanel.hm-admin .hm-account-menu button:hover { background: var(--a-raise, rgba(255, 255, 255, 0.06)); }
#adminPanel.hm-admin .hm-account-menu button i { width: 16px; color: var(--p-accent); }
#adminPanel.hm-admin .hm-admin-menu { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--a-line); background: var(--a-panel); color: var(--a-text); cursor: pointer; }
#adminPanel.hm-admin .main-content-scroll { padding: clamp(18px, 3vw, 32px); background: transparent !important; }
@media (prefers-reduced-motion: no-preference) {
    #adminPanel.hm-admin #adminMainContent > * { animation: hm-page-in 0.35s var(--p-ease-out) both; }
    #adminPanel.hm-admin .hm-kpi,
    #adminPanel.hm-admin .hm-panel,
    #adminPanel.hm-admin .hm-lead { animation: hm-rise 0.5s var(--p-ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }
}

/* Shared admin building blocks (every tab) */
#adminPanel.hm-admin .admin-v2-section { display: grid; gap: 18px; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0; }
#adminPanel.hm-admin .section-header-v2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
#adminPanel.hm-admin .section-header-v2 h2 { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--a-text); -webkit-text-fill-color: currentColor; background: none; }
#adminPanel.hm-admin :is(.admin-card-v2, .moderation-card, .admin-control-card, .admin-notification-item, .project-card-v2, .hm-panel) {
    background: var(--a-panel) !important; background-image: none !important; border: 1px solid var(--a-line) !important;
    border-radius: 18px !important; box-shadow: none !important; color: var(--a-text);
}
#adminPanel.hm-admin :is(.admin-card-v2, .moderation-card, .admin-control-card, .admin-notification-item) { padding: 20px; }
#adminPanel.hm-admin .card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 12px; margin-bottom: 12px; border-bottom: 1px solid var(--a-line); background: none !important; }
#adminPanel.hm-admin :is(.card-header h3, .moderation-card h3, .admin-control-card h3) { margin: 0; font-size: 1rem; font-weight: 600; color: var(--a-text); }
#adminPanel.hm-admin .card-body { padding: 0; }
#adminPanel.hm-admin .form-group-v2 { display: grid; gap: 6px; margin-bottom: 14px; }
#adminPanel.hm-admin .form-group-v2 label { font-size: 0.85rem; font-weight: 600; color: var(--a-text); text-transform: none; letter-spacing: 0; }
#adminPanel.hm-admin :is(.admin-input-v2, .metadata-input, .status-badge-select) {
    min-height: 42px; padding: 10px 12px; border-radius: 10px !important; border: 1px solid var(--a-line-2) !important;
    background: var(--a-bg) !important; color: var(--a-text) !important; font-family: var(--p-font); font-size: 0.92rem; box-shadow: none !important;
}
#adminPanel.hm-admin :is(.admin-input-v2, .metadata-input, .status-badge-select):focus { outline: none; border-color: var(--p-accent) !important; box-shadow: 0 0 0 3px var(--p-accent-soft) !important; }
#adminPanel.hm-admin input[type='color'].admin-input-v2 { padding: 4px; height: 42px; width: 64px; }
#adminPanel.hm-admin :is(.admin-btn-premium, .admin-btn-small) {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px !important;
    border: 1px solid var(--a-line-2) !important; background: var(--a-panel-2) !important; background-image: none !important; color: var(--a-text) !important;
    font-family: var(--p-font); font-size: 0.88rem; font-weight: 600; text-transform: none; letter-spacing: 0; box-shadow: none !important; cursor: pointer;
    transition: border-color 0.2s ease, transform 0.15s var(--p-ease-out), background-color 0.2s ease;
}
#adminPanel.hm-admin :is(.admin-btn-premium, .admin-btn-small):hover { border-color: var(--p-accent) !important; background: color-mix(in srgb, var(--p-accent) 12%, var(--a-panel-2)) !important; }
#adminPanel.hm-admin :is(.admin-btn-premium, .admin-btn-small):active { transform: scale(0.97); }
#adminPanel.hm-admin .admin-btn-small { height: 32px; padding: 0 12px; font-size: 0.8rem; }
#adminPanel.hm-admin .btn-icon { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--a-line) !important; background: transparent !important; color: var(--a-muted) !important; cursor: pointer; }
#adminPanel.hm-admin .btn-icon:hover { color: var(--a-text) !important; background: var(--a-raise, rgba(255, 255, 255, 0.06)) !important; }
#adminPanel.hm-admin .btn-icon.delete:hover { color: var(--a-bad-text, #ff9a8f) !important; background: rgba(200, 69, 58, 0.12) !important; }
#adminPanel.hm-admin :is(.projects-grid-v2, .settings-grid-v2, .admin-control-cards, .review-stack-v2, .admin-notification-list) { display: grid; gap: 14px; }
#adminPanel.hm-admin .projects-grid-v2 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
#adminPanel.hm-admin .settings-grid-v2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
#adminPanel.hm-admin .project-card-v2 { overflow: hidden; transition: transform 0.25s var(--p-ease-out), border-color 0.2s ease; }
#adminPanel.hm-admin .project-card-v2:hover { transform: translateY(-3px); border-color: var(--a-line-2) !important; }
#adminPanel.hm-admin .project-thumbnail { aspect-ratio: 16 / 10; overflow: hidden; background: var(--a-bg); }
#adminPanel.hm-admin .project-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
#adminPanel.hm-admin .project-info { padding: 14px 16px 16px; }
#adminPanel.hm-admin .project-category { color: var(--p-accent) !important; font-size: 0.78rem; font-weight: 600; text-transform: none; letter-spacing: 0; background: none !important; }
#adminPanel.hm-admin .admin-empty,
#adminPanel.hm-admin .empty-state { padding: 40px 16px; text-align: center; color: var(--a-muted); border: 1px dashed var(--a-line-2); border-radius: 18px; background: transparent !important; }
#adminPanel.hm-admin .admin-notification-item.is-unread { border-left: 3px solid var(--p-accent) !important; }
#adminPanel.hm-admin .admin-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Dashboard */
#adminPanel.hm-admin .hm-dash { gap: 20px; }
#adminPanel.hm-admin .hm-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
#adminPanel.hm-admin .hm-kpi {
    position: relative; display: grid; justify-items: start; gap: 4px; padding: 18px; text-align: left; cursor: pointer;
    border-radius: 18px; border: 1px solid var(--a-line); background: var(--a-panel); color: var(--a-text); font-family: var(--p-font);
    transition: transform 0.25s var(--p-ease-out), border-color 0.2s ease;
}
#adminPanel.hm-admin .hm-kpi:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--p-accent) 50%, transparent); }
#adminPanel.hm-admin .hm-kpi-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--p-accent-soft); color: var(--p-accent); margin-bottom: 8px; transition: transform 0.3s var(--p-ease-out); }
#adminPanel.hm-admin .hm-kpi:hover .hm-kpi-icon { transform: rotate(-8deg) scale(1.08); }
#adminPanel.hm-admin .hm-kpi-value { font-size: 2rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
#adminPanel.hm-admin .hm-kpi-label { font-size: 0.9rem; font-weight: 600; }
#adminPanel.hm-admin .hm-kpi-note { font-size: 0.78rem; color: var(--a-muted); }
#adminPanel.hm-admin .hm-dash-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-areas: 'leads actions' 'leads activity'; gap: 14px; }
#adminPanel.hm-admin .hm-dash-leads { grid-area: leads; }
#adminPanel.hm-admin .hm-dash-actions { grid-area: actions; }
#adminPanel.hm-admin .hm-dash-activity { grid-area: activity; }
#adminPanel.hm-admin .hm-panel { padding: 18px 20px; }
#adminPanel.hm-admin .hm-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#adminPanel.hm-admin .hm-panel-head h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--a-text); }
#adminPanel.hm-admin .hm-link { border: 0; background: none; color: var(--p-accent); font-family: var(--p-font); font-size: 0.86rem; font-weight: 600; cursor: pointer; }
#adminPanel.hm-admin .hm-link i { transition: transform 0.2s var(--p-ease-out); }
#adminPanel.hm-admin .hm-link:hover i { transform: translateX(3px); }
#adminPanel.hm-admin .hm-mini-leads { list-style: none; margin: 0; padding: 0; display: grid; }
#adminPanel.hm-admin .hm-mini-leads li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--a-line); }
#adminPanel.hm-admin .hm-mini-leads li:first-child { border-top: 0; }
#adminPanel.hm-admin .hm-mini-leads div { display: grid; min-width: 0; }
#adminPanel.hm-admin .hm-mini-leads strong { font-size: 0.92rem; }
#adminPanel.hm-admin .hm-mini-leads span:not(.hm-avatar) { font-size: 0.8rem; color: var(--a-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#adminPanel.hm-admin .hm-mini-leads time { font-size: 0.78rem; color: var(--a-muted); white-space: nowrap; }
#adminPanel.hm-admin .hm-avatar { width: 38px; height: 38px; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; background: var(--p-accent-soft); color: var(--p-accent); font-size: 0.82rem; font-weight: 700; }
#adminPanel.hm-admin .hm-icon-link { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #4fb874; background: rgba(79, 184, 116, 0.1); }
#adminPanel.hm-admin .hm-actions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#adminPanel.hm-admin .hm-action {
    display: grid; justify-items: start; gap: 10px; padding: 14px; border-radius: 14px; border: 1px solid var(--a-line);
    background: var(--a-bg); color: var(--a-text); font-family: var(--p-font); font-size: 0.88rem; font-weight: 600; text-align: left; cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s var(--p-ease-out);
}
#adminPanel.hm-admin .hm-action i { color: var(--p-accent); font-size: 1.1rem; }
#adminPanel.hm-admin .hm-action:hover { border-color: var(--p-accent); transform: translateY(-2px); }
#adminPanel.hm-admin .hm-activity { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
#adminPanel.hm-admin .hm-activity li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; font-size: 0.84rem; }
#adminPanel.hm-admin .hm-activity time { color: var(--a-muted); font-variant-numeric: tabular-nums; }
#adminPanel.hm-admin .hm-empty-mini { display: grid; justify-items: center; gap: 6px; padding: 24px 8px; text-align: center; color: var(--a-muted); font-size: 0.88rem; }
#adminPanel.hm-admin .hm-empty-mini i { font-size: 1.4rem; color: var(--p-accent); }
#adminPanel.hm-admin .hm-empty-mini p { margin: 0; }

/* Leads */
#adminPanel.hm-admin .hm-toolbar-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
#adminPanel.hm-admin .hm-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
#adminPanel.hm-admin .hm-chip-f {
    display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--a-line-2); background: transparent; color: var(--a-muted); font-family: var(--p-font); font-size: 0.86rem; font-weight: 500;
}
#adminPanel.hm-admin .hm-chip-f span { min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--a-panel-2); font-size: 0.74rem; }
#adminPanel.hm-admin .hm-chip-f.is-active { background: var(--a-text); border-color: var(--a-text); color: var(--a-bg, #111112); }
#adminPanel.hm-admin .hm-chip-f.is-active span { background: rgba(17, 17, 18, 0.12); }
#adminPanel.hm-admin .hm-search { display: flex; align-items: center; gap: 10px; width: min(320px, 100%); height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--a-line-2); background: var(--a-panel); color: var(--a-muted); }
#adminPanel.hm-admin .hm-search:focus-within { border-color: var(--p-accent); }
#adminPanel.hm-admin .hm-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--a-text); font-family: var(--p-font); font-size: 0.9rem; }
#adminPanel.hm-admin .hm-leads { display: grid; gap: 10px; }
#adminPanel.hm-admin .hm-lead {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 16px 18px;
    border-radius: 18px; background: var(--a-panel); border: 1px solid var(--a-line); border-left: 3px solid var(--a-line-2);
}
#adminPanel.hm-admin .hm-lead.is-new { border-left-color: var(--p-accent); }
#adminPanel.hm-admin .hm-lead.is-contacted { border-left-color: #d9a13b; }
#adminPanel.hm-admin .hm-lead.is-completed { border-left-color: #4fb874; }
#adminPanel.hm-admin .hm-lead-main { min-width: 0; display: grid; gap: 6px; }
#adminPanel.hm-admin .hm-lead-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#adminPanel.hm-admin .hm-lead-top strong { font-size: 1rem; color: var(--a-text); }
#adminPanel.hm-admin .hm-lead-top time { font-size: 0.78rem; color: var(--a-muted); white-space: nowrap; }
#adminPanel.hm-admin .hm-lead-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.82rem; color: var(--a-muted); }
#adminPanel.hm-admin .hm-lead-meta i { color: var(--p-accent); margin-right: 4px; width: 12px; }
#adminPanel.hm-admin .hm-lead-msg { margin: 2px 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--a-text); opacity: 0.85; }
#adminPanel.hm-admin .hm-lead-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#adminPanel.hm-admin .hm-lead-status { height: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--a-line-2); background: var(--a-bg); color: var(--a-text); font-family: var(--p-font); font-size: 0.84rem; cursor: pointer; }
#adminPanel.hm-admin :is(.hm-leads-page, .hm-dash) .hm-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--a-line-2);
    background: transparent; color: var(--a-text); font-family: var(--p-font); font-size: 0.84rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
#adminPanel.hm-admin .hm-leads-page .hm-btn:hover { border-color: var(--a-text); }
#adminPanel.hm-admin .hm-leads-page .hm-btn-wa { color: #7fdc9e; border-color: rgba(79, 184, 116, 0.4); }
#adminPanel.hm-admin .hm-leads-page .hm-btn.is-danger { background: #c8453a; border-color: #c8453a; color: #fff; }
#adminPanel.hm-admin .hm-leads-page .hm-icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 0; background: transparent; color: var(--a-muted); cursor: pointer; }
#adminPanel.hm-admin .hm-leads-page .hm-icon-btn.is-danger:hover { color: var(--a-bad-text, #ff9a8f); background: rgba(200, 69, 58, 0.14); }
#adminPanel.hm-admin .hm-lead-confirm { position: absolute; inset: 0; display: none; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 18px; border-radius: 18px; background: rgba(17, 17, 18, 0.95); font-weight: 600; }
#adminPanel.hm-admin .hm-lead.is-confirming .hm-lead-confirm { display: flex; animation: hm-backdrop-in 0.2s ease both; }
#adminPanel.hm-admin .hm-state { display: grid; justify-items: center; gap: 8px; padding: 48px 16px; text-align: center; border-radius: 18px; background: var(--a-panel); color: var(--a-muted); }
#adminPanel.hm-admin .hm-state i { font-size: 1.6rem; color: var(--p-accent); }
#adminPanel.hm-admin .hm-state h3 { margin: 0; color: var(--a-text); font-size: 1.1rem; }
#adminPanel.hm-admin .hm-state p { margin: 0; }

/* Adverts banner switch */
#hmAdsAdmin .hm-head { align-items: center; }
.hm-switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.hm-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hm-switch-track { position: relative; width: 52px; height: 30px; border-radius: 999px; background: #3a3a3e; transition: background-color 0.25s ease; flex-shrink: 0; }
.hm-switch-thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #f0eeea; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); transition: transform 0.3s var(--p-ease-out); }
.hm-switch input:checked + .hm-switch-track { background: var(--p-accent); }
.hm-switch input:checked + .hm-switch-track .hm-switch-thumb { transform: translateX(22px); }
.hm-switch input:focus-visible + .hm-switch-track { outline: 2px solid var(--p-accent); outline-offset: 3px; }
.hm-switch-label { font-size: 0.9rem; font-weight: 600; color: #f0eeea; }

/* Admin on small screens: slide-in sidebar */
@media (max-width: 900px) {
    #adminPanel.hm-admin .admin-sidebar-v2 {
        position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: 260px;
        transform: translateX(-102%); transition: transform 0.35s var(--p-ease-out);
    }
    #adminPanel.hm-admin.is-nav-open .admin-sidebar-v2 { transform: none; box-shadow: 20px 0 60px rgba(0, 0, 0, 0.5) !important; }
    #adminPanel.hm-admin .hm-admin-menu { display: grid; place-items: center; }
    #adminPanel.hm-admin .header-search { display: none; }
    #adminPanel.hm-admin .hm-account-email { display: none; }
    #adminPanel.hm-admin .hm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #adminPanel.hm-admin .hm-dash-grid { grid-template-columns: 1fr; grid-template-areas: 'leads' 'actions' 'activity'; }
    #adminPanel.hm-admin .hm-lead { grid-template-columns: auto minmax(0, 1fr); }
    #adminPanel.hm-admin .hm-lead-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (min-width: 901px) and (max-width: 1200px) {
    #adminPanel.hm-admin .hm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Pass fixes (round 6) */
.hm-gal { background: #0b0b0c; }
html body #reviewModal :is(label, .hm-review-label, .review-sublabel, legend) { font-family: var(--p-font) !important; text-transform: none !important; letter-spacing: 0 !important; }
html body #reviewModal :is(.review-flow-shell, .review-shared-fields, .review-composer, .review-questionnaire-section, .form-group) { background: none !important; border: 0 !important; box-shadow: none !important; padding-left: 0; padding-right: 0; }
html body #reviewModal .review-modal-identity-avatar:not([src]), html body #reviewModal .review-modal-identity-avatar[src=""] { display: none; }

/* Admin pass fixes */
body:has(#adminPanel.active) :is(#chatbotToggle, #brilliantChatBtn, .whatsapp-fab-pill, .floating-whatsapp, .back-to-top, #chatbotContainer, #brilliantChatWindow) { display: none !important; }
#adminPanel.hm-admin .nav-item span, #adminPanel.hm-admin .sidebar-brand, #adminPanel.hm-admin .hm-side-link span, #adminPanel.hm-admin .admin-exit-btn span { display: inline !important; opacity: 1 !important; visibility: visible !important; }
#adminPanel.hm-admin .sidebar-brand { display: block !important; }
#adminPanel.hm-admin .nav-item, #adminPanel.hm-admin .hm-side-link, #adminPanel.hm-admin .admin-exit-btn { justify-content: flex-start !important; }
#adminPanel.hm-admin .hm-chip-f { width: auto !important; flex: 0 0 auto; }
@media (max-width: 900px) {
    #adminPanel.hm-admin .hm-chip-row { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
    #adminPanel.hm-admin .hm-search { width: 100%; }
}
#adminPanel.hm-admin .admin-v2-section, #adminPanel.hm-admin .admin-v2-section > *, #adminPanel.hm-admin .hm-toolbar-row > * { min-width: 0; max-width: 100%; }
#adminPanel.hm-admin .admin-main-v2, #adminPanel.hm-admin .main-content-scroll { min-width: 0; }

/* ==========================================================================
   ROUND 7 (2026-09-29) — fixes, liquid-glass nav, top bar, chat, motion, admin
   ========================================================================== */
:root {
    --r7-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --r7-ease-inout: cubic-bezier(0.77, 0, 0.175, 1);
    --r7-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------- 7.1 Light mode: crisp, not blurry ----------
   The "blur" was a stack of soft effects that read fine on dark but smear on
   light grey: page grain, orange glow halos, 10px text shadows, star glows and
   a see-through nav letting text show through. All removed in light mode. */
html[data-theme='light'] body::after { display: none; }
html[data-theme='light'] body :is(
    #heroQuoteBtn, .premium-nav-cta, #popupOverlay .popup-submit-btn, #popupOverlay .hm-chip.is-selected,
    #hmAds .hm-ad-cta, #reviewCta .hm-cta-review .hm-cta-btn.is-primary, #showcase .view-project-btn,
    .modern-review-section .hailifu-review-link, .hm-login-submit, #hmMedia .hm-btn.is-primary,
    #hmAdsAdmin .hm-btn.is-primary, #hmScChips .hm-sc-chip.is-active
), html[data-theme='light'] body :is(
    #heroQuoteBtn, .premium-nav-cta, #popupOverlay .popup-submit-btn, #hmAds .hm-ad-cta,
    #reviewCta .hm-cta-review .hm-cta-btn.is-primary, .modern-review-section .hailifu-review-link, .hm-login-submit
):hover {
    background-color: var(--p-accent) !important;
    background-image: none !important;
    border-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 1px 2px rgba(22, 22, 23, 0.18) !important;
}
html[data-theme='light'] body :is(.hm-star, .featured-review-stars, .stats-value, .hero-security, h1, h2, h3, .section-title) { text-shadow: none !important; }
html[data-theme='light'] body #services .services-grid > .card :is(h3, p, .btn) { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
html[data-theme='light'] body #services .services-grid > .card > i { filter: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme='light'] body .section-subtitle,
html[data-theme='light'] body :is(.about-content p, .premium-trust-card p) { color: #3f3d3a; }

/* ---------- 7.2 Featured Reviews feed: cards match the main cards ----------
   Main cards (#reviewCta): theme surface, hairline border, 20-24px radius, no glow.
   #reviews-level selectors beat the old style.css rules (0,4,1). */
html body :is(#reviews, .modern-review-section) .featured-reviews-feed {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .featured-reviews-header { padding: 0 4px 16px; background: none; border: 0; }
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .featured-reviews-window {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .featured-reviews-window::before,
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .featured-reviews-window::after { display: none !important; }
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .featured-review-card {
    background: var(--p-surface) !important;
    background-image: none !important;
    border: 1px solid var(--p-line) !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    color: var(--p-text) !important;
    transition: border-color 0.2s ease, transform 0.25s var(--r7-ease-out);
}
@media (hover: hover) and (pointer: fine) {
    html body :is(#reviews, .modern-review-section) .featured-reviews-feed .featured-review-card:hover { border-color: var(--p-line-strong) !important; transform: translateY(-3px); }
}
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .featured-review-card p { color: var(--p-text) !important; }
html body :is(#reviews, .modern-review-section) .featured-reviews-feed :is(.review-source, .review-time, .featured-review-card time) { color: var(--p-muted) !important; }
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .reviewer-name { color: var(--p-accent) !important; }
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .featured-review-stars { color: var(--p-accent) !important; text-shadow: none !important; }
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .review-share-btn {
    background: var(--p-surface-2) !important;
    border: 1px solid var(--p-line) !important;
    box-shadow: none !important;
}
html body :is(#reviews, .modern-review-section) .featured-reviews-feed :is(.featured-reviews-label) { color: var(--p-text) !important; }
html body :is(#reviews, .modern-review-section) .featured-reviews-feed :is(.featured-reviews-subtitle) { color: var(--p-muted) !important; }

/* ---------- 7.3 Typography: display face for brand, menu and headings ---------- */
:root { --r7-display: 'Bricolage Grotesque', var(--p-font); }
html body :is(h1, h2, .section-title, .section-title a, .main-nav .logo, .premium-nav-links a, .r7-sheet-links a) {
    font-family: var(--r7-display);
    font-optical-sizing: auto;
}
html body :is(h1, h2, .section-title) { letter-spacing: -0.025em; }

/* ---------- 7.4 Menu bar: liquid glass ----------
   Layers: tinted translucent fill, strong backdrop blur + saturation, a specular
   top edge, a soft inner rim and a slow sheen. Readable in both themes. */
html body .main-nav {
    z-index: 1200;
    height: 64px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%),
        color-mix(in srgb, var(--p-bg) 58%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        0 12px 40px -16px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(22px) saturate(180%) brightness(1.04);
    -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(1.04);
    isolation: isolate;
    transition: height 0.35s var(--r7-ease-out), top 0.35s var(--r7-ease-out), transform 0.45s var(--r7-ease-drawer), box-shadow 0.3s ease;
    animation: r7-nav-in 0.8s var(--r7-ease-out) backwards;
}
/* slow specular sheen across the glass */
html body .main-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background-image: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 255, 0.02) 52%, transparent 60%);
    background-size: 250% 100%;
    background-position: 120% 0;
    animation: r7-sheen 1.8s var(--r7-ease-out) 0.9s 1 both;
}
html[data-theme='light'] body .main-nav {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.5) 100%),
        color-mix(in srgb, var(--p-bg) 55%, transparent);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow:
        inset 0 1px 0 #fff,
        inset 0 -1px 0 rgba(22, 22, 23, 0.05),
        0 1px 2px rgba(22, 22, 23, 0.06),
        0 14px 36px -18px rgba(22, 22, 23, 0.28);
}
html[data-theme='light'] body .main-nav::before { background-image: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.7) 45%, rgba(255, 255, 255, 0.2) 52%, transparent 60%); }
html body .main-nav.is-scrolled { height: 56px; top: 8px; }
html body .main-nav.is-hidden { transform: translateX(-50%) translateY(calc(-100% - 24px)); }
@keyframes r7-nav-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-24px) scale(0.98); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes r7-sheen {
    0% { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

/* brand */
html body .main-nav .logo { font-size: 1.08rem; font-weight: 800; letter-spacing: -0.02em; }
html body .main-nav .logo .whatsapp-logo {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: transform 0.4s var(--r7-ease-out);
}
@media (hover: hover) and (pointer: fine) {
    html body .main-nav .logo:hover .whatsapp-logo { transform: rotate(-8deg) scale(1.06); }
}
html[data-theme='light'] body .main-nav .logo .whatsapp-logo { background: #fff !important; border-color: rgba(22, 22, 23, 0.08) !important; }

/* links + sliding pill for the section you are in */
html body .premium-nav-links { position: relative; gap: 2px; padding: 4px; border-radius: var(--p-pill); }
html body .premium-nav-links a {
    position: relative;
    z-index: 1;
    padding: 8px 16px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: color-mix(in srgb, var(--p-text) 70%, transparent);
    background: transparent !important;
    transition: color 0.25s ease;
}
html body .premium-nav-links a:hover,
html body .premium-nav-links a.is-active { color: var(--p-text); }
html body .premium-nav-links a::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--p-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--r7-ease-out);
}
@media (hover: hover) and (pointer: fine) {
    html body .premium-nav-links a:not(.is-active):hover::after { transform: scaleX(1); }
}
html body .r7-nav-pill {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: var(--r7-pill-w, 0px);
    transform: translateX(var(--r7-pill-x, 0px));
    border-radius: var(--p-pill);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: transform 0.45s var(--r7-ease-out), width 0.45s var(--r7-ease-out), opacity 0.25s ease;
    pointer-events: none;
}
html body .premium-nav-links.has-active .r7-nav-pill { opacity: 1; }
html[data-theme='light'] body .r7-nav-pill { background: #fff; box-shadow: 0 1px 2px rgba(22, 22, 23, 0.1), 0 0 0 1px rgba(22, 22, 23, 0.05); }

/* action buttons: glass chips */
html body .main-nav :is(.site-share-btn, .theme-toggle) {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
    transition: transform 0.16s var(--r7-ease-out);
}
html body .main-nav :is(.site-share-btn, .theme-toggle):active { transform: scale(0.95); }
html[data-theme='light'] body .main-nav :is(.site-share-btn, .theme-toggle) { background: rgba(255, 255, 255, 0.8) !important; border-color: rgba(22, 22, 23, 0.1) !important; box-shadow: 0 1px 2px rgba(22, 22, 23, 0.06) !important; }
html body .main-nav .theme-toggle .theme-toggle-icon { transition: transform 0.5s var(--r7-ease-out); }
html body .main-nav .theme-toggle:active .theme-toggle-icon { transform: rotate(40deg); }
html body .premium-nav-cta { font-weight: 700; letter-spacing: -0.01em; }

/* burger (tablet + phone) */
html body .r7-burger {
    display: none;
    position: relative;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: var(--p-pill);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    cursor: pointer;
    transition: transform 0.16s var(--r7-ease-out);
}
html body .r7-burger:active { transform: scale(0.94); }
html body .r7-burger span {
    position: absolute;
    left: 12px;
    right: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--p-text);
    transition: transform 0.35s var(--r7-ease-out), top 0.35s var(--r7-ease-out);
}
html body .r7-burger span:first-child { top: calc(50% - 4px); }
html body .r7-burger span:last-child { top: calc(50% + 2px); }
html body .r7-burger[aria-expanded="true"] span:first-child { top: calc(50% - 1px); transform: rotate(45deg); }
html body .r7-burger[aria-expanded="true"] span:last-child { top: calc(50% - 1px); transform: rotate(-45deg); }
html[data-theme='light'] body .r7-burger { background: #fff; border-color: rgba(22, 22, 23, 0.1); }
@media (max-width: 1080px) {
    html body .r7-burger { display: inline-block; }
}
@media (max-width: 640px) {
    html body .main-nav { height: 58px; }
    html body .main-nav.is-scrolled { height: 54px; }
    html body .r7-burger { width: 40px; height: 40px; flex-basis: 40px; }
}
@media (max-width: 420px) {
    html body .main-nav .premium-nav-cta { display: none; }
}

/* sheet */
html body .r7-sheet { position: fixed; inset: 0; z-index: 1150; }
html body .r7-sheet[hidden] { display: none; }
html body .r7-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 9, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.3s ease;
}
html body .r7-sheet-panel {
    position: absolute;
    top: 78px;
    left: 12px;
    right: 12px;
    max-width: 520px;
    margin-left: auto;
    padding: 10px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
        color-mix(in srgb, var(--p-bg) 72%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 30px 60px -20px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    transform-origin: top right;
    transform: translateY(-10px) scale(0.96);
    opacity: 0;
    transition: transform 0.4s var(--r7-ease-out), opacity 0.25s ease;
}
html[data-theme='light'] body .r7-sheet-panel {
    background: rgba(255, 255, 255, 0.86);
    border-color: #fff;
    box-shadow: 0 30px 60px -24px rgba(22, 22, 23, 0.35), 0 0 0 1px rgba(22, 22, 23, 0.05);
}
html body .r7-sheet.is-open .r7-sheet-backdrop { opacity: 1; }
html body .r7-sheet.is-open .r7-sheet-panel { transform: none; opacity: 1; }
html body .r7-sheet.is-closing .r7-sheet-panel { transition-duration: 0.2s, 0.18s; }
html body .r7-sheet-links { display: grid; }
html body .r7-sheet-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-radius: 18px;
    color: var(--p-text);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.35s ease, transform 0.45s var(--r7-ease-out), background-color 0.2s ease;
}
html body .r7-sheet-links a i { font-size: 0.9rem; color: var(--p-accent); transition: transform 0.3s var(--r7-ease-out); }
html body .r7-sheet-links a:hover, html body .r7-sheet-links a.is-active { background: rgba(255, 255, 255, 0.06); }
html[data-theme='light'] body .r7-sheet-links a:hover, html[data-theme='light'] body .r7-sheet-links a.is-active { background: rgba(22, 22, 23, 0.04); }
html body .r7-sheet-links a:hover i { transform: translateX(4px); }
html body .r7-sheet.is-open .r7-sheet-links a { opacity: 1; transform: none; }
html body .r7-sheet.is-open .r7-sheet-links a:nth-child(1) { transition-delay: 0.04s; }
html body .r7-sheet.is-open .r7-sheet-links a:nth-child(2) { transition-delay: 0.08s; }
html body .r7-sheet.is-open .r7-sheet-links a:nth-child(3) { transition-delay: 0.12s; }
html body .r7-sheet.is-open .r7-sheet-links a:nth-child(4) { transition-delay: 0.16s; }
html body .r7-sheet-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--p-line);
}
html body .r7-sheet-cta {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    border-radius: var(--p-pill);
    background: var(--p-accent);
    color: var(--p-on-accent);
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.16s var(--r7-ease-out);
}
html body .r7-sheet-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    border-radius: var(--p-pill);
    border: 1px solid var(--p-line-strong);
    background: transparent;
    color: var(--p-text);
    font: 600 0.95rem var(--p-font);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.16s var(--r7-ease-out);
}
html body :is(.r7-sheet-cta, .r7-sheet-btn):active { transform: scale(0.97); }
html.r7-lock, html.r7-lock body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    html body .main-nav, html body .main-nav::before { animation: none; }
    html body :is(.r7-sheet-panel, .r7-sheet-links a, .r7-nav-pill) { transition-property: opacity; transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
    html body :is(.main-nav, .r7-sheet-panel) { background: var(--p-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------- 7.5 Top advert bar (Admin > Adverts > Top bar) ---------- */
html body .r7-topbar {
    --tb-bg: var(--p-accent);
    --tb-fg: #140c05;
    --tb-btn-bg: #140c05;
    --tb-btn-fg: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1210;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 6px 52px 6px 16px;
    background: var(--tb-bg);
    color: var(--tb-fg);
    transform: translateY(-105%);
    transition: transform 0.55s var(--r7-ease-drawer);
}
html body .r7-topbar[data-tone='dark'] { --tb-bg: #111112; --tb-fg: #f2f1ee; --tb-btn-bg: var(--p-accent); --tb-btn-fg: #140c05; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
html body .r7-topbar[data-tone='light'] { --tb-bg: #f2f1ee; --tb-fg: #161617; --tb-btn-bg: #161617; --tb-btn-fg: #fff; border-bottom: 1px solid rgba(22, 22, 23, 0.1); }
html body .r7-topbar.is-in { transform: none; }
html body:has(.main-nav.is-hidden) .r7-topbar.is-in:not(.is-preview) { transform: translateY(-105%); }
html body .r7-topbar-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.4s ease 0.25s, transform 0.5s var(--r7-ease-out) 0.25s;
}
html body .r7-topbar.is-in .r7-topbar-inner,
html body .r7-topbar.is-preview .r7-topbar-inner { opacity: 1; transform: none; }
html body .r7-topbar-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.8;
    animation: r7-dot 2.4s ease-in-out infinite;
}
html body .r7-topbar[data-tone='dark'] .r7-topbar-dot { background: var(--p-accent); opacity: 1; }
@keyframes r7-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.6); } }
html body .r7-topbar-text {
    margin: 0;
    font: 600 0.92rem/1.3 var(--p-font);
    color: inherit;
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html body .r7-topbar-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--p-pill);
    background: var(--tb-btn-bg);
    color: var(--tb-btn-fg) !important;
    -webkit-text-fill-color: currentColor;
    font: 700 0.82rem var(--p-font);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.16s var(--r7-ease-out);
}
html body .r7-topbar-cta i { font-size: 0.72rem; transition: transform 0.25s var(--r7-ease-out); }
@media (hover: hover) and (pointer: fine) { html body .r7-topbar-cta:hover i { transform: translateX(3px); } }
html body .r7-topbar-cta:active { transform: scale(0.96); }
html body .r7-topbar-close {
    position: absolute;
    right: 8px;
    top: 50%;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.16s var(--r7-ease-out);
}
html body .r7-topbar-close:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
html body .r7-topbar-close:active { transform: scale(0.9); }
/* push the floating menu below the bar while it is showing */
html.r7-has-topbar body .main-nav { top: calc(var(--r7-topbar-h, 0px) + 10px); }
html.r7-has-topbar body .main-nav.is-scrolled { top: calc(var(--r7-topbar-h, 0px) + 6px); }
html.r7-has-topbar body .r7-sheet-panel { top: calc(var(--r7-topbar-h, 0px) + 76px); }
@media (max-width: 640px) {
    html body .r7-topbar { padding: 6px 44px 6px 12px; min-height: 48px; }
    html body .r7-topbar-inner { gap: 10px; }
    html body .r7-topbar-dot { display: none; }
    html body .r7-topbar-text { white-space: normal; font-size: 0.84rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    html body .r7-topbar-close { right: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    html body .r7-topbar, html body .r7-topbar-inner { transition-duration: 0.01s; }
    html body .r7-topbar-dot { animation: none; }
}

/* admin panel */
#adminPanel .r7-tb-admin {
    margin: 0 0 20px;
    padding: 22px;
    border-radius: 20px;
    background: var(--a-surface, #19191b);
    border: 1px solid var(--a-line, rgba(255, 255, 255, 0.07));
}
#adminPanel .r7-tb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
#adminPanel .r7-tb-head h3 { margin: 0 0 4px; font-size: 1.05rem; }
#adminPanel .r7-tb-head p { margin: 0; font-size: 0.88rem; color: var(--a-muted, #a09d98); }
#adminPanel #r7TbStatus[data-live='true'] { color: #3fc57a; }
#adminPanel .r7-tb-preview {
    position: relative;
    margin-bottom: 18px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px dashed var(--a-line-strong, rgba(255, 255, 255, 0.14));
}
#adminPanel .r7-tb-preview .r7-topbar { position: relative; transform: none; z-index: auto; }
#adminPanel .r7-tb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#adminPanel .r7-tb-wide { grid-column: 1 / -1; }
#adminPanel .r7-tb-grid label span, #adminPanel #r7TbCount { color: var(--a-muted, #a09d98); font-weight: 400; }
#adminPanel .r7-tb-grid label { display: flex; justify-content: space-between; }
#adminPanel .r7-tb-tones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
#adminPanel .r7-tb-tones legend { width: 100%; margin-bottom: 8px; font-weight: 600; font-size: 0.88rem; }
#adminPanel .r7-tb-tone {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px 0 8px;
    border-radius: 999px;
    border: 1px solid var(--a-line-strong, rgba(255, 255, 255, 0.14));
    cursor: pointer;
    font-size: 0.88rem;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
#adminPanel .r7-tb-tone input { position: absolute; opacity: 0; pointer-events: none; }
#adminPanel .r7-tb-tone:has(input:checked) { border-color: var(--p-accent); background: color-mix(in srgb, var(--p-accent) 12%, transparent); }
#adminPanel .r7-tb-tone:has(input:focus-visible) { outline: 2px solid var(--p-accent); outline-offset: 2px; }
#adminPanel .r7-tb-swatch { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--a-line-2, rgba(255, 255, 255, 0.2)); }
#adminPanel .r7-tb-tone[data-tone='orange'] .r7-tb-swatch { background: var(--p-accent); }
#adminPanel .r7-tb-tone[data-tone='dark'] .r7-tb-swatch { background: #111112; }
#adminPanel .r7-tb-tone[data-tone='light'] .r7-tb-swatch { background: #f2f1ee; }
#adminPanel .r7-tb-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
#adminPanel .r7-tb-hint { font-size: 0.82rem; color: var(--a-muted, #a09d98); }
#adminPanel .r7-tb-admin input[type='date'] { color-scheme: dark; }
@media (max-width: 700px) {
    #adminPanel .r7-tb-grid { grid-template-columns: 1fr; }
    #adminPanel .r7-tb-head { flex-direction: column; }
}

/* ---------- 7.6 Chat assistant (rebuilt) ----------
   Liquid-glass panel that grows out of the toggle (bottom-left), progress bar,
   tap-to-answer chips, typing dots, full screen on phones. */
html body #chatbotToggle.r7-chat-toggle {
    position: fixed;
    left: 20px;
    right: auto;
    bottom: 20px;
    z-index: 1100;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)),
        color-mix(in srgb, var(--p-bg) 60%, transparent);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 14px 34px -12px rgba(0, 0, 0, 0.6);
    color: var(--p-accent);
    cursor: pointer;
    transition: transform 0.2s var(--r7-ease-out), background-color 0.2s ease;
}
html[data-theme='light'] body #chatbotToggle.r7-chat-toggle { background: rgba(255, 255, 255, 0.82); border-color: #fff; box-shadow: 0 1px 2px rgba(22, 22, 23, 0.08), 0 14px 30px -14px rgba(22, 22, 23, 0.35); }
html body #chatbotToggle.r7-chat-toggle:active { transform: scale(0.94); }
html body #chatbotToggle.r7-chat-toggle i {
    grid-area: 1 / 1;
    font-size: 1.3rem;
    transition: transform 0.35s var(--r7-ease-out), opacity 0.2s ease;
}
html body #chatbotToggle .r7-ico-close { opacity: 0; transform: rotate(-90deg) scale(0.6); color: var(--p-text); }
html body #chatbotToggle[aria-expanded='true'] .r7-ico-open { opacity: 0; transform: rotate(90deg) scale(0.6); }
html body #chatbotToggle[aria-expanded='true'] .r7-ico-close { opacity: 1; transform: none; }

html body #chatbotContainer.r7-chat {
    position: fixed;
    left: 20px;
    right: auto;
    bottom: 90px;
    z-index: 1250;
    width: min(390px, calc(100vw - 40px));
    height: min(620px, calc(100dvh - 200px));
    min-height: 380px;
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 30%),
        color-mix(in srgb, var(--p-bg) 84%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 40px 80px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    transform-origin: bottom left;
    opacity: 0;
    transform: translateY(16px) scale(0.92);
    filter: blur(4px);
    pointer-events: none;
    animation: none;
    transition: opacity 0.22s ease, transform 0.42s var(--r7-ease-out), filter 0.3s ease;
}
html body #chatbotContainer.r7-chat[hidden] { display: none; }
html body #chatbotContainer.r7-chat.active { opacity: 1; transform: none; filter: none; pointer-events: auto; }
html body #chatbotContainer.r7-chat.is-closing { transition-duration: 0.18s, 0.22s, 0.18s; transform: translateY(10px) scale(0.95); }
html[data-theme='light'] body #chatbotContainer.r7-chat {
    background: rgba(250, 249, 247, 0.9);
    border-color: #fff;
    box-shadow: 0 40px 80px -34px rgba(22, 22, 23, 0.45), 0 0 0 1px rgba(22, 22, 23, 0.06);
}

/* header */
html body .r7-chat-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 16px;
    border-bottom: 1px solid var(--p-line);
    background: none;
}
html body .r7-chat-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 13px;
    background: var(--p-surface-2);
    border: 1px solid var(--p-line);
    display: grid;
    place-items: center;
}
html body .r7-chat-avatar img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; }
html body .r7-chat-id { flex: 1; min-width: 0; }
html body .r7-chat-id h3 { margin: 0; font: 700 0.98rem/1.2 var(--r7-display); color: var(--p-text); letter-spacing: -0.01em; }
html body .r7-chat-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--p-muted); }
html body .r7-chat-online { width: 7px; height: 7px; border-radius: 50%; background: #3fc57a; box-shadow: 0 0 0 3px rgba(63, 197, 122, 0.18); }
html body .r7-chat-icon-btn {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--p-line);
    background: transparent;
    color: var(--p-text);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.16s var(--r7-ease-out);
}
html body .r7-chat-icon-btn:hover { background: var(--p-line); }
html body .r7-chat-icon-btn:active { transform: scale(0.92); }
html body .r7-chat-icon-btn[hidden] { display: none; }
html body .r7-chat-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; overflow: hidden; }
html body .r7-chat-progress span {
    display: block;
    height: 100%;
    background: var(--p-accent);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.6s var(--r7-ease-out);
}

/* log */
html body #chatbotMessages.r7-chat-log {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 14px 10px;
    background: none;
    scrollbar-width: thin;
}
html body .r7-chat-log .message.r7-msg {
    max-width: 84%;
    margin: 0;
    padding: 11px 14px;
    border-radius: 18px;
    font: 400 0.93rem/1.45 var(--p-font);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    box-shadow: none;
    animation: r7-msg-in 0.4s var(--r7-ease-out) both;
}
html body .r7-chat-log .message.bot.r7-msg { align-self: flex-start; background: var(--p-surface-2); color: var(--p-text); border: 1px solid var(--p-line); border-bottom-left-radius: 6px; transform-origin: bottom left; }
html body .r7-chat-log .message.user.r7-msg { align-self: flex-end; background: var(--p-accent); color: var(--p-on-accent); border: 0; border-bottom-right-radius: 6px; font-weight: 500; transform-origin: bottom right; }
html body .r7-chat-log .message.r7-msg.is-note {
    align-self: center;
    max-width: none;
    padding: 2px 10px;
    border: 0;
    background: none;
    color: var(--p-muted);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
html body .r7-chat-log .message.r7-msg.is-card { padding: 4px 14px; max-width: 92%; }
html body .r7-summary { margin: 0; display: grid; }
html body .r7-summary > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--p-line); }
html body .r7-summary > div:last-child { border-bottom: 0; }
html body .r7-summary dt { color: var(--p-muted); font-size: 0.82rem; }
html body .r7-summary dd { margin: 0; font-weight: 600; text-align: right; }
@keyframes r7-msg-in {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to { opacity: 1; transform: none; }
}
html body #typingIndicator.r7-typing {
    display: flex;
    align-self: flex-start;
    gap: 4px;
    padding: 13px 14px;
    border-radius: 18px;
    border-bottom-left-radius: 6px;
    background: var(--p-surface-2);
    border: 1px solid var(--p-line);
}
html body #typingIndicator.r7-typing .typing-dot {
    width: 7px;
    height: 7px;
    margin: 0;
    border-radius: 50%;
    background: var(--p-muted);
    animation: r7-typing 1.1s ease-in-out infinite;
}
html body #typingIndicator.r7-typing .typing-dot:nth-child(2) { animation-delay: 0.15s; }
html body #typingIndicator.r7-typing .typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes r7-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* quick replies */
html body .r7-chat-replies {
    display: grid;
    gap: 10px;
    max-height: 42%;
    overflow-y: auto;
    padding: 4px 14px 10px;
    scrollbar-width: none;
}
html body .r7-chat-replies[hidden] { display: none; }
html body .r7-reply-group { display: flex; flex-wrap: wrap; gap: 6px; }
html body .r7-reply-title { width: 100%; margin: 2px 0 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--p-muted); }
html body .r7-reply {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--p-accent) 45%, var(--p-line));
    background: color-mix(in srgb, var(--p-accent) 8%, transparent);
    color: var(--p-text);
    font: 600 0.85rem var(--p-font);
    text-align: left;
    cursor: pointer;
    animation: r7-msg-in 0.35s var(--r7-ease-out) both;
    animation-delay: calc(var(--i, 0) * 35ms);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.16s var(--r7-ease-out);
}
html body .r7-reply i { color: var(--p-accent); font-size: 0.85rem; }
@media (hover: hover) and (pointer: fine) { html body .r7-reply:hover { background: color-mix(in srgb, var(--p-accent) 18%, transparent); border-color: var(--p-accent); } }
html body .r7-reply:active { transform: scale(0.96); }
html body .r7-reply-group.is-faq .r7-reply { border-color: var(--p-line-strong); background: transparent; font-weight: 500; }
html body .r7-reply-group.is-faq .r7-reply .fa-whatsapp { color: #25d366; }

/* input */
html body .r7-chat-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--p-line);
    background: none;
}
html body .r7-chat-form .chat-input {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--p-line-strong);
    background: var(--p-surface);
    color: var(--p-text);
    font: 400 16px var(--p-font);
    outline: none;
    box-shadow: none;
    transition: border-color 0.2s ease;
}
html body .r7-chat-form .chat-input:focus { border-color: var(--p-accent); }
html body .r7-chat-form .chat-send-btn {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--p-accent);
    color: var(--p-on-accent);
    cursor: pointer;
    box-shadow: none;
    transition: transform 0.16s var(--r7-ease-out);
}
html body .r7-chat-form .chat-send-btn:active { transform: scale(0.9); }

/* teaser bubble */
html body .r7-chat-teaser {
    position: fixed;
    left: 88px;
    bottom: 30px;
    z-index: 1099;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 4px 4px 4px;
    border-radius: 999px;
    background: var(--p-surface);
    border: 1px solid var(--p-line-strong);
    box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateX(-8px) scale(0.95);
    transform-origin: left center;
    transition: opacity 0.25s ease, transform 0.4s var(--r7-ease-out);
}
html body .r7-chat-teaser.is-in { opacity: 1; transform: none; }
html body .r7-chat-teaser[hidden] { display: none; }
html body .r7-chat-teaser-body { border: 0; background: none; color: var(--p-text); font: 500 0.88rem var(--p-font); padding: 6px 6px 6px 12px; cursor: pointer; }
html body .r7-chat-teaser-body strong { color: var(--p-accent); }
html body .r7-chat-teaser-x { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--p-muted); cursor: pointer; }

/* phones: full-screen sheet that slides up */
@media (max-width: 560px) {
    html body #chatbotContainer.r7-chat {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100dvh;
        border-radius: 0;
        border: 0;
        transform-origin: bottom center;
        transform: translateY(100%);
        filter: none;
        transition: transform 0.5s var(--r7-ease-drawer), opacity 0.2s ease;
        opacity: 1;
    }
    html body #chatbotContainer.r7-chat.is-closing { transform: translateY(100%); transition-duration: 0.3s; }
    html body .r7-chat-head { padding-top: max(14px, env(safe-area-inset-top)); }
    html body .r7-chat-form { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
    html body #chatbotToggle.r7-chat-toggle { left: 14px; bottom: 16px; width: 54px; height: 54px; }
    html.r7-chat-open body #chatbotToggle.r7-chat-toggle { opacity: 0; pointer-events: none; }
    html.r7-chat-open, html.r7-chat-open body { overflow: hidden; }
    html body .r7-chat-teaser { left: 76px; bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    html body #chatbotContainer.r7-chat { transition: opacity 0.15s ease; transform: none !important; filter: none; }
    html body :is(.r7-chat-log .message.r7-msg, .r7-reply, #typingIndicator .typing-dot) { animation: none; }
}
html body #chatbotToggle.r7-chat-toggle::before,
html body #chatbotToggle.r7-chat-toggle::after { display: none !important; content: none !important; }
html.r7-chat-open body :is(.whatsapp-fab-pill, .floating-whatsapp, .back-to-top, .r7-chat-teaser) { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.2s ease; }

/* ---------- 7.7 Popups: richer entrance + a real exit ----------
   Entrance: backdrop fades in, dialog rises + scales from 94% out of a light blur,
   then its content staggers in. Exit: premium.js keeps the popup on screen for
   ~240ms with .r7-leaving so it can fade/scale away instead of vanishing. */
@keyframes r7-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes r7-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes r7-dialog-in {
    0% { opacity: 0; transform: translateY(28px) scale(0.94); filter: blur(6px); }
    55% { filter: blur(0); }
    100% { opacity: 1; transform: none; filter: none; }
}
@keyframes r7-dialog-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(14px) scale(0.96); }
}
@keyframes r7-item-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
    html body :is(#popupOverlay, #reviewModal, #projectModal).active { animation: r7-backdrop-in 0.3s ease both !important; }
    html body #popupOverlay.active > .popup-form,
    html body #reviewModal.active > .review-modal-dialog,
    html body #projectModal.active > .project-modal-dialog {
        animation: r7-dialog-in 0.55s var(--r7-ease-out) both !important;
        transform-origin: 50% 60%;
    }
    html body #popupOverlay.active > .popup-form > *,
    html body #reviewModal.active .review-modal-dialog > * { animation: r7-item-in 0.5s var(--r7-ease-out) both; }
    html body #popupOverlay.active > .popup-form > :nth-child(1), html body #reviewModal.active .review-modal-dialog > :nth-child(1) { animation-delay: 0.08s; }
    html body #popupOverlay.active > .popup-form > :nth-child(2), html body #reviewModal.active .review-modal-dialog > :nth-child(2) { animation-delay: 0.13s; }
    html body #popupOverlay.active > .popup-form > :nth-child(3), html body #reviewModal.active .review-modal-dialog > :nth-child(3) { animation-delay: 0.18s; }
    html body #popupOverlay.active > .popup-form > :nth-child(4), html body #reviewModal.active .review-modal-dialog > :nth-child(4) { animation-delay: 0.23s; }
    html body #popupOverlay.active > .popup-form > :nth-child(n+5), html body #reviewModal.active .review-modal-dialog > :nth-child(n+5) { animation-delay: 0.28s; }

    html body :is(#popupOverlay, #reviewModal, #projectModal).r7-leaving {
        display: flex !important;
        pointer-events: none !important;
        animation: r7-backdrop-out 0.24s ease forwards !important;
    }
    html body #popupOverlay.r7-leaving > .popup-form,
    html body #reviewModal.r7-leaving > .review-modal-dialog,
    html body #projectModal.r7-leaving > .project-modal-dialog { animation: r7-dialog-out 0.22s var(--r7-ease-out) forwards !important; }
    html body #popupOverlay.r7-leaving > .popup-form { display: block !important; opacity: 1; }

    html body .hm-gal.is-open { animation: r7-backdrop-in 0.3s ease both; }
    html body .hm-gal.is-open .hm-gal-stage { animation: r7-dialog-in 0.55s var(--r7-ease-out) both; }
    html body .hm-gal.r7-leaving { display: grid !important; pointer-events: none; animation: r7-backdrop-out 0.24s ease forwards; }
    html body .hm-gal.r7-leaving .hm-gal-stage { animation: r7-dialog-out 0.22s var(--r7-ease-out) forwards; }
}
/* close buttons: rotate on hover, press feedback */
html body :is(#popupClose, #reviewModalClose, #projectModalClose, .hm-gal-close) { transition: transform 0.3s var(--r7-ease-out), background-color 0.2s ease; }
@media (hover: hover) and (pointer: fine) {
    html body :is(#popupClose, #reviewModalClose, #projectModalClose, .hm-gal-close):hover { transform: rotate(90deg); }
}
html body :is(#popupClose, #reviewModalClose, #projectModalClose, .hm-gal-close):active { transform: scale(0.9); }

/* ---------- 7.8 Featured Work: 3D cube flip between projects ----------
   Outgoing slide folds away on its edge while the next swings in (desktop).
   Touch screens keep native swiping with a softer depth effect. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    html body #featured-work .featured-loop-viewport { perspective: 1800px; perspective-origin: 50% 50%; }
    html body #featured-work .featured-loop-track { transform-style: preserve-3d; transition-duration: 0.95s !important; transition-timing-function: var(--r7-ease-inout) !important; }
    html body #featured-work .featured-loop.no-transition .featured-loop-track { transition-duration: 0s !important; }
    html body #featured-work .featured-loop-slide {
        transform-origin: 100% 50%;
        transform: rotateY(-75deg);
        opacity: 0.35;
        filter: brightness(0.55);
        backface-visibility: hidden;
        transition: transform 0.95s var(--r7-ease-inout), opacity 0.95s ease, filter 0.95s ease;
        will-change: transform;
    }
    html body #featured-work .featured-loop-slide.is-active { transform: none; opacity: 1; filter: none; }
    html body #featured-work .featured-loop-slide.is-active ~ .featured-loop-slide { transform-origin: 0% 50%; transform: rotateY(75deg); }
    html body #featured-work .featured-loop.no-transition .featured-loop-slide { transition: none; }
}
@media (hover: none) and (prefers-reduced-motion: no-preference) {
    html body #featured-work .featured-loop-slide { transition: transform 0.6s var(--r7-ease-out), opacity 0.6s ease; transform: scale(0.94); opacity: 0.6; }
    html body #featured-work .featured-loop-slide.is-active { transform: none; opacity: 1; }
}

/* ---------- 7.9 Work Showcase: editorial masonry (different from Services) ----------
   Services = full-bleed photo tiles with text on the photo.
   Showcase = staggered masonry, photo on top, solid info panel below; the lead
   project spans the full width as a split card. */
html body #showcase .hm-sc-grid {
    display: block;
    column-count: 3;
    column-gap: 20px;
    grid-auto-rows: auto;
}
html body #showcase .hm-sc-grid > .hm-sc-empty { column-span: all; }
html body #showcase .hm-sc-card {
    display: flex;
    flex-direction: column;
    break-inside: avoid;
    margin: 0 0 20px;
    border-radius: 20px;
    background: var(--p-surface);
    border: 1px solid var(--p-line);
    overflow: hidden;
    transform: none;
    transition: border-color 0.3s ease, translate 0.45s var(--r7-ease-out), box-shadow 0.45s ease;
}
html body #showcase .hm-sc-card::after,
html body #showcase .hm-sc-card::before { display: none !important; }
html body #showcase .hm-sc-media {
    position: relative;
    inset: auto;
    order: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--p-surface-2);
}
html body #showcase .hm-sc-card:nth-child(3n + 2) .hm-sc-media { aspect-ratio: 1 / 1; }
html body #showcase .hm-sc-card:nth-child(3n) .hm-sc-media { aspect-ratio: 4 / 3; }
html body #showcase .hm-sc-card:nth-child(5n + 4) .hm-sc-media { aspect-ratio: 3 / 4; }
html body #showcase .hm-sc-media :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html body #showcase .hm-sc-cat {
    position: static;
    order: 1;
    align-self: flex-start;
    height: auto;
    margin: 18px 20px 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--p-accent) !important;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transform: none !important;
}
html body #showcase .hm-sc-badge { top: 12px; right: 12px; }
html body #showcase .hm-sc-info {
    position: static;
    order: 2;
    padding: 6px 20px 20px;
    color: var(--p-text);
}
html body #showcase .hm-sc-info h3 { color: var(--p-text); font-family: var(--r7-display); font-size: 1.2rem; letter-spacing: -0.02em; }
html body #showcase .hm-sc-info p { color: var(--p-muted); }
html body #showcase .hm-sc-actions {
    max-height: none;
    opacity: 1;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--p-line);
    overflow: visible;
}
html body #showcase .hm-sc-open { color: var(--p-text); }
html body #showcase .hm-sc-quote {
    height: 34px;
    padding: 0 14px;
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--p-line-strong) !important;
    box-shadow: none !important;
    color: var(--p-text) !important;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.16s var(--r7-ease-out);
}
html body #showcase .hm-sc-quote:hover { border-color: var(--p-accent) !important; background: var(--p-accent-soft) !important; }
html body #showcase .hm-sc-quote:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
    html body #showcase .hm-sc-card:hover { translate: 0 -4px; border-color: var(--p-line-strong); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.6); }
    html body #showcase .hm-sc-card:hover .hm-sc-media :is(img, video) { transform: scale(1.05); }
}
/* lead project: full-width split card */
html body #showcase .hm-sc-card.is-feature {
    column-span: all;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    min-height: 400px;
    margin-bottom: 20px;
}
html body #showcase .hm-sc-card.is-feature .hm-sc-media { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; min-height: 400px; }
html body #showcase .hm-sc-card.is-feature .hm-sc-cat { grid-column: 2; grid-row: 1; align-self: end; margin: 0 32px 10px; }
html body #showcase .hm-sc-card.is-feature .hm-sc-info { grid-column: 2; grid-row: 2; padding: 0 32px 32px; }
html body #showcase .hm-sc-card.is-feature .hm-sc-info h3 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.1; }
html body #showcase .hm-sc-card.is-feature .hm-sc-info p { -webkit-line-clamp: 4; font-size: 1rem; }
html body #showcase .hm-sc-card.is-feature .hm-sc-badge { right: auto; left: 12px; }
html[data-theme='light'] body #showcase .hm-sc-card { background: #fbfaf8; }
@media (max-width: 960px) {
    html body #showcase .hm-sc-grid { column-count: 2; column-gap: 14px; }
    html body #showcase .hm-sc-card { margin-bottom: 14px; }
    html body #showcase .hm-sc-card.is-feature { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: 0; }
    html body #showcase .hm-sc-card.is-feature .hm-sc-media { grid-row: 1; min-height: 0; aspect-ratio: 16 / 10; }
    html body #showcase .hm-sc-card.is-feature .hm-sc-cat { grid-column: 1; grid-row: 2; margin: 18px 20px 0; }
    html body #showcase .hm-sc-card.is-feature .hm-sc-info { grid-column: 1; grid-row: 3; padding: 6px 20px 20px; }
}
@media (max-width: 600px) {
    html body #showcase .hm-sc-grid { column-count: 1; }
    html body #showcase .hm-sc-card .hm-sc-media { aspect-ratio: 4 / 3 !important; }
}

/* ---------- 7.10 Scroll motion ----------
   Section titles reveal word by word, the orange rule under them draws in,
   subtitles follow; photos drift slightly slower than the page (parallax via
   scroll-driven `translate`, so hover `transform` still works). */
html body .r7-split .r7-word { display: inline-block; white-space: pre; }
@media (prefers-reduced-motion: no-preference) {
    html.r7-motion body .r7-split .r7-word {
        opacity: 0;
        transform: translateY(0.45em) rotate(2deg);
        filter: blur(4px);
        transition: opacity 0.6s ease, transform 0.8s var(--r7-ease-out), filter 0.6s ease;
        transition-delay: calc(var(--w, 0) * 60ms);
    }
    html.r7-motion body .r7-split.r7-in .r7-word { opacity: 1; transform: none; filter: none; }
    html.r7-motion body .r7-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease 0.2s, transform 0.8s var(--r7-ease-out) 0.2s; }
    html.r7-motion body .r7-reveal.r7-in { opacity: 1; transform: none; }
    html.r7-motion body .section-title.r7-split::after { transform: scaleX(0); transition: transform 0.8s var(--r7-ease-out) 0.35s; }
    html.r7-motion body .section-title.r7-split.r7-in::after { transform: scaleX(1); }

    @supports (animation-timeline: view()) {
        html body :is(#services .services-grid > .card .service-media img, #showcase .hm-sc-media img, #about img, #reviewCta .hm-cta-card) {
            animation: r7-parallax linear both;
            animation-timeline: view();
            animation-range: cover 0% cover 100%;
        }
        html body #reviewCta .hm-cta-card { animation-name: r7-rise-scroll; animation-range: entry 0% cover 35%; }
        html body :is(#services .services-grid > .card .service-media img, #showcase .hm-sc-media img, #about img) { scale: 1.12; }
    }
}
@keyframes r7-parallax { from { translate: 0 -5%; } to { translate: 0 5%; } }
@keyframes r7-rise-scroll { from { translate: 0 40px; opacity: 0.4; } to { translate: 0 0; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
    html body .hm-gal:not(.is-open) .hm-gal-stage { transform: translateY(12px) scale(0.96); opacity: 0; transition: transform 0.24s var(--r7-ease-out), opacity 0.2s ease; }
}

/* ==========================================================================
   7.11 ADMIN PORTAL — operations console (round 7 redesign)
   Full-bleed, calm, precise. Brand lives in details: a thin orange active bar,
   orange focus rings, primary actions. No glows, no glass, no gradients.
   ========================================================================== */
#adminPanel.hm-admin {
    --a-bg: #0b0b0c;
    --a-panel: #131315;
    --a-panel-2: #1a1a1d;
    --a-raise: #202024;
    --a-line: rgba(255, 255, 255, 0.065);
    --a-line-2: rgba(255, 255, 255, 0.11);
    --a-line-strong: rgba(255, 255, 255, 0.16);
    --a-text: #f2f0ec;
    --a-muted: #8f8c87;
    --a-soft: #b9b6b0;
    --a-surface: var(--a-panel);
    --a-ok: #46c37b;
    --a-warn: #e0a53c;
    --a-bad: #ef6b5e;
    --a-radius: 14px;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--a-bg) !important;
    color: var(--a-text);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
#adminPanel.hm-admin ::selection { background: var(--p-accent); color: var(--p-on-accent); }
#adminPanel.hm-admin :focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }

/* sidebar */
#adminPanel.hm-admin .admin-sidebar-v2 {
    width: 248px;
    padding: 16px 12px 12px;
    background: var(--a-bg) !important;
    border-right: 1px solid var(--a-line) !important;
}
#adminPanel.hm-admin .sidebar-header { padding: 4px 8px 18px; margin-bottom: 4px; border-bottom: 1px solid var(--a-line); }
#adminPanel.hm-admin .sidebar-logo img { width: 34px; height: 34px; border-radius: 10px; }
#adminPanel.hm-admin .sidebar-brand h2 { font-family: var(--r7-display); font-size: 1.02rem; font-weight: 700; }
#adminPanel.hm-admin .sidebar-brand span { display: inline-flex !important; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 500; color: var(--a-muted); }
#adminPanel.hm-admin .sidebar-brand span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--a-ok); box-shadow: 0 0 0 3px rgba(70, 195, 123, 0.16); }
#adminPanel.hm-admin .hm-nav-group { margin: 18px 10px 6px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em; color: #5f5c58; }
#adminPanel.hm-admin .nav-item {
    height: 36px;
    padding: 0 10px;
    gap: 11px;
    border-radius: 9px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--a-soft);
}
#adminPanel.hm-admin .nav-item i { width: 16px; font-size: 0.86rem; color: #6f6c68; transition: color 0.2s ease; }
#adminPanel.hm-admin .nav-item:hover { color: var(--a-text); background: rgba(255, 255, 255, 0.035) !important; }
#adminPanel.hm-admin .nav-item:hover i { color: var(--a-soft); }
#adminPanel.hm-admin .nav-item.active,
#adminPanel.hm-admin .nav-item.active i { color: var(--a-text) !important; font-weight: 600; }
#adminPanel.hm-admin .nav-item.active i { color: var(--p-accent) !important; }
#adminPanel.hm-admin .hm-nav-indicator {
    background: var(--a-raise, rgba(255, 255, 255, 0.06)) !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    border-radius: 9px;
    transition: transform 0.35s var(--r7-ease-out), height 0.35s var(--r7-ease-out), opacity 0.2s ease;
}
#adminPanel.hm-admin .hm-nav-indicator::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--p-accent);
}
#adminPanel.hm-admin .sidebar-nav:not(.has-indicator) .nav-item.active { background: var(--a-raise, rgba(255, 255, 255, 0.06)) !important; }
#adminPanel.hm-admin .sidebar-footer { gap: 2px; padding-top: 10px; }
#adminPanel.hm-admin :is(.hm-side-link, .admin-exit-btn) { height: 36px; border-radius: 9px; font-size: 0.86rem; color: var(--a-muted) !important; }

/* header */
#adminPanel.hm-admin .admin-main-v2 { background: var(--a-bg) !important; }
#adminPanel.hm-admin .main-header {
    min-height: 64px;
    padding: 12px clamp(16px, 3vw, 32px);
    background: color-mix(in srgb, var(--a-bg) 88%, transparent) !important;
    border-bottom: 1px solid var(--a-line);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}
#adminPanel.hm-admin .hm-admin-title h1 { font-family: var(--r7-display); font-size: 1.28rem; font-weight: 700; letter-spacing: -0.02em; }
#adminPanel.hm-admin .hm-admin-title p { font-size: 0.8rem; color: var(--a-muted); }
#adminPanel.hm-admin .header-search { height: 36px; border-radius: 9px; background: var(--a-panel) !important; border-color: var(--a-line-2); }
#adminPanel.hm-admin .header-search:focus-within { border-color: var(--p-accent); box-shadow: 0 0 0 3px var(--p-accent-soft); }
#adminPanel.hm-admin .hm-account { height: 38px; border-radius: 10px; padding: 0 10px 0 4px; background: var(--a-panel); border-color: var(--a-line-2); }
#adminPanel.hm-admin .hm-account .user-avatar img { width: 30px; height: 30px; border-radius: 8px; }
#adminPanel.hm-admin .hm-account-menu { border-radius: 12px; background: var(--a-raise); }
#adminPanel.hm-admin .hm-admin-menu { width: 38px; height: 38px; border-radius: 10px; }

/* content canvas */
#adminPanel.hm-admin .main-content-scroll { padding: clamp(16px, 2.6vw, 28px) clamp(16px, 3vw, 32px) 48px; }
#adminPanel.hm-admin #adminMainContent { max-width: 1320px; margin: 0 auto; }
#adminPanel.hm-admin .admin-v2-section { gap: 16px; }
#adminPanel.hm-admin :is(.section-header-v2 h2, .hm-head h2) { font-family: var(--r7-display); font-size: 1.12rem; font-weight: 700; letter-spacing: -0.015em; }
#adminPanel.hm-admin :is(.admin-card-v2, .moderation-card, .admin-control-card, .admin-notification-item, .project-card-v2, .hm-panel, .hm-kpi, .hm-lead, .hm-state, .r7-tb-admin, .hm-ad-form, .hm-ad-row, #hmMedia .hm-drop, #hmMedia .hm-tile) {
    border-radius: var(--a-radius) !important;
    background: var(--a-panel) !important;
    border: 1px solid var(--a-line) !important;
    box-shadow: none !important;
}
#adminPanel.hm-admin :is(.card-header h3, .moderation-card h3, .admin-control-card h3, .hm-panel-head h3, .hm-ad-form h3, .r7-tb-head h3) {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--a-soft) !important;
}
#adminPanel.hm-admin .card-header { border-bottom-color: var(--a-line); }

/* KPIs: numbers lead */
#adminPanel.hm-admin .hm-kpis { gap: 12px; }
#adminPanel.hm-admin .hm-kpi { padding: 16px 16px 14px; gap: 2px; }
#adminPanel.hm-admin .hm-kpi-icon { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; margin: 0; border-radius: 8px; font-size: 0.8rem; background: var(--a-raise, rgba(255, 255, 255, 0.04)); color: var(--a-muted); }
#adminPanel.hm-admin .hm-kpi:hover .hm-kpi-icon { color: var(--p-accent); background: var(--p-accent-soft); transform: none; }
#adminPanel.hm-admin .hm-kpi-label { order: -1; margin-bottom: 10px; font-size: 0.78rem; font-weight: 500; color: var(--a-muted); }
#adminPanel.hm-admin .hm-kpi-value { font-family: var(--r7-display); font-size: 2.1rem; font-weight: 700; letter-spacing: -0.03em; }
#adminPanel.hm-admin .hm-kpi-note { margin-top: 4px; font-size: 0.74rem; }
#adminPanel.hm-admin .hm-kpi:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--p-accent) 40%, transparent) !important; }
#adminPanel.hm-admin .hm-action { border-radius: 11px; background: var(--a-bg); }
#adminPanel.hm-admin .hm-avatar { border-radius: 10px; width: 36px; height: 36px; }

/* buttons: one solid primary, quiet secondaries */
#adminPanel.hm-admin :is(#hmMedia, #hmAdsAdmin, #r7TbForm, .hm-leads-page, .hm-dash) .hm-btn.is-primary,
#adminPanel.hm-admin .hm-btn.is-primary {
    height: 38px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    background: var(--p-accent) !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    color: var(--p-on-accent) !important;
    -webkit-text-fill-color: var(--p-on-accent) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset !important;
    font-weight: 650;
    transition: filter 0.2s ease, transform 0.15s var(--r7-ease-out) !important;
}
#adminPanel.hm-admin .hm-btn.is-primary:hover { filter: brightness(1.08); }
#adminPanel.hm-admin .hm-btn.is-primary:active { transform: scale(0.97); }
#adminPanel.hm-admin :is(.hm-btn:not(.is-primary):not(.is-danger), .admin-btn-premium, .admin-btn-small) {
    height: 36px;
    border-radius: 10px !important;
    background: var(--a-panel-2) !important;
    border: 1px solid var(--a-line-2) !important;
    color: var(--a-text) !important;
    font-weight: 600;
}
#adminPanel.hm-admin :is(.hm-btn:not(.is-primary):not(.is-danger), .admin-btn-premium, .admin-btn-small):hover { border-color: var(--a-line-strong) !important; background: var(--a-raise) !important; }
#adminPanel.hm-admin .admin-btn-small { height: 30px; padding: 0 12px; border-radius: 8px !important; font-size: 0.78rem; }
#adminPanel.hm-admin .hm-btn.is-danger { border-radius: 10px !important; background: #b8392e !important; border-color: #b8392e !important; }
#adminPanel.hm-admin .hm-chip-f { height: 32px; border-radius: 8px; font-size: 0.82rem; }
#adminPanel.hm-admin .hm-chip-f.is-active { background: var(--a-text); color: var(--a-bg, #111112); }
#adminPanel.hm-admin .hm-search { height: 36px; border-radius: 9px; }

/* form controls: one consistent style for every tab (incl. the older ones) */
#adminPanel.hm-admin #adminMainContent :is(input[type='text'], input[type='email'], input[type='url'], input[type='tel'], input[type='number'], input[type='date'], input[type='search']:not(.hm-search input), input:not([type]), textarea, select):not(.hm-search input):not(#hmLeadSearch) {
    min-height: 40px;
    padding: 9px 12px;
    border-radius: 10px !important;
    border: 1px solid var(--a-line-2) !important;
    background: var(--a-bg) !important;
    color: var(--a-text) !important;
    font: 400 0.9rem/1.4 var(--p-font);
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    color-scheme: dark;
}
#adminPanel.hm-admin #adminMainContent textarea { min-height: 84px; resize: vertical; }
#adminPanel.hm-admin #adminMainContent :is(input, textarea, select):focus { outline: none; border-color: var(--p-accent) !important; box-shadow: 0 0 0 3px var(--p-accent-soft) !important; }
#adminPanel.hm-admin #adminMainContent :is(input, textarea)::placeholder { color: #66635f; }
#adminPanel.hm-admin #adminMainContent select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238f8c87' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    cursor: pointer;
}
#adminPanel.hm-admin #adminMainContent :is(input[type='checkbox'], input[type='radio']):not(.hm-switch input):not(.r7-tb-tone input) {
    width: 18px;
    height: 18px;
    margin: 0 8px 0 0;
    accent-color: var(--p-accent);
    vertical-align: -3px;
    cursor: pointer;
}
#adminPanel.hm-admin #adminMainContent input[type='file'] {
    width: 100%;
    padding: 6px;
    border-radius: 10px;
    border: 1px dashed var(--a-line-strong);
    background: var(--a-bg);
    color: var(--a-muted);
    font: 400 0.84rem var(--p-font);
    cursor: pointer;
}
#adminPanel.hm-admin #adminMainContent input[type='file']::file-selector-button {
    margin-right: 12px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--a-line-2);
    border-radius: 8px;
    background: var(--a-panel-2);
    color: var(--a-text);
    font: 600 0.82rem var(--p-font);
    cursor: pointer;
    transition: border-color 0.2s ease;
}
#adminPanel.hm-admin #adminMainContent input[type='file']:hover::file-selector-button { border-color: var(--p-accent); }
#adminPanel.hm-admin #adminMainContent input[type='color'] { width: 56px; height: 40px; padding: 4px; border-radius: 10px; border: 1px solid var(--a-line-2); background: var(--a-bg); cursor: pointer; }
#adminPanel.hm-admin #adminMainContent :is(label, .form-group-v2 label, .hm-ad-field label) { font-size: 0.82rem; font-weight: 600; color: var(--a-soft); }
#adminPanel.hm-admin .hm-switch-track { width: 44px; height: 26px; background: #2e2e32; }
#adminPanel.hm-admin .hm-switch-thumb { width: 20px; height: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
#adminPanel.hm-admin .hm-switch input:checked + .hm-switch-track .hm-switch-thumb { transform: translateX(18px); }
#adminPanel.hm-admin .hm-switch-label { font-size: 0.85rem; }

/* older tabs: Site Control section list, notifications, control center */
#adminPanel.hm-admin :is(.section-order-item, .section-item, .section-row, [class*='section-order'] > div) {
    border-radius: 11px !important;
    background: var(--a-bg) !important;
    border: 1px solid var(--a-line) !important;
    box-shadow: none !important;
}
#adminPanel.hm-admin :is(.drag-handle, .section-drag, [class*='drag']) { border-radius: 6px !important; border-color: var(--a-line-2) !important; color: var(--a-muted) !important; background: transparent !important; }
#adminPanel.hm-admin .admin-notification-item.is-unread { border-left: 1px solid var(--a-line) !important; box-shadow: inset 3px 0 0 var(--p-accent) !important; }
#adminPanel.hm-admin .status-badge,
#adminPanel.hm-admin .hm-ad-status { border-radius: 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; }

/* Adverts page */
#adminPanel.hm-admin #hmAdsAdmin .hm-head { padding-bottom: 4px; }
#adminPanel.hm-admin .r7-tb-admin { padding: 20px; }
#adminPanel.hm-admin .hm-ad-form { padding: 20px !important; }

/* page transition: fade + slight rise, fast */
@media (prefers-reduced-motion: no-preference) {
    #adminPanel.hm-admin #adminMainContent > * { animation: r7-admin-page 0.32s var(--r7-ease-out) both; }
    #adminPanel.hm-admin :is(.hm-kpi, .hm-panel, .hm-lead) { animation: r7-admin-page 0.4s var(--r7-ease-out) both; animation-delay: calc(var(--i, 0) * 35ms); }
}
@keyframes r7-admin-page { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#adminPanel.hm-admin .loading-skeleton :is(.skeleton-header, .skeleton-card) {
    border-radius: var(--a-radius);
    background: linear-gradient(90deg, var(--a-panel) 0%, var(--a-panel-2) 50%, var(--a-panel) 100%);
    background-size: 200% 100%;
    animation: r7-shimmer 1.2s linear infinite;
}
@keyframes r7-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (max-width: 900px) {
    #adminPanel.hm-admin .admin-sidebar-v2 { width: 264px; border-right: 1px solid var(--a-line-2) !important; }
    #adminPanel.hm-admin .main-header { gap: 10px; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    html body .main-nav:hover::before { animation: r7-sheen-hover 1.4s var(--r7-ease-out) 1 both; }
}
@keyframes r7-sheen-hover { from { background-position: 120% 0; } to { background-position: -120% 0; } }
#adminPanel.hm-admin #adminMainContent.main-content-scroll {
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
    padding-left: max(clamp(16px, 3vw, 32px), calc((100% - 1320px) / 2));
    padding-right: max(clamp(16px, 3vw, 32px), calc((100% - 1320px) / 2));
}
/* lead status stripe (inset so it survives the uniform card border) */
#adminPanel.hm-admin .hm-lead { box-shadow: inset 3px 0 0 var(--a-line-strong) !important; }
#adminPanel.hm-admin .hm-lead.is-new { box-shadow: inset 3px 0 0 var(--p-accent) !important; }
#adminPanel.hm-admin .hm-lead.is-contacted { box-shadow: inset 3px 0 0 var(--a-warn) !important; }
#adminPanel.hm-admin .hm-lead.is-completed { box-shadow: inset 3px 0 0 var(--a-ok) !important; }
#adminPanel.hm-admin .hm-lead-status { height: 36px !important; min-height: 36px !important; padding: 0 32px 0 12px !important; border-radius: 10px !important; }
#adminPanel.hm-admin .settings-grid-v2 :is(h3, h4) { font-family: var(--r7-display); font-size: 1rem; letter-spacing: -0.01em; }
#adminPanel.hm-admin .hm-panel-head h3 { white-space: nowrap; }
#adminPanel.hm-admin .hm-panel-head { gap: 12px; }

/* ---------- 7.12 Small-screen fixes from the size audit ---------- */
@media (max-width: 520px) {
    html body .main-nav .premium-nav-cta { display: none; }
    html body .main-nav { gap: 8px; padding: 0 8px 0 10px; }
    html body .main-nav-actions { gap: 6px; }
}
@media (max-width: 360px) {
    html body .main-nav .logo > span:not(.whatsapp-logo) { display: none; }
}
/* bigger tap areas without changing how the dots look */
html body #hmAds .hm-ads-dot { position: relative; }
html body #hmAds .hm-ads-dot::after { content: ''; position: absolute; inset: -14px -6px; }
html body .r7-chat-teaser-x { width: 36px; height: 36px; }
html body .r7-chat-teaser-body { min-height: 36px; }

/* ==========================================================================
   7.13 ADMIN MOTION (round 7b)
   The admin is used many times a day, so motion is quick (150-450ms), strong
   ease-out, transform/opacity only, and always explains something: where you
   are, what changed, what was removed. Everything off with "reduce motion".
   ========================================================================== */

/* --- project delete: inline confirm + removal --- */
#adminPanel.hm-admin .project-card-v2 { position: relative; }
#adminPanel.hm-admin .r7-proj-confirm {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 16px;
    border-top: 1px solid var(--a-line-2);
    background: rgba(19, 19, 21, 0.97);
    font-weight: 600;
    visibility: hidden;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.28s var(--r7-ease-out), opacity 0.2s ease, visibility 0s linear 0.28s;
}
#adminPanel.hm-admin .r7-proj-confirm span { margin-right: auto; font-size: 0.86rem; }
#adminPanel.hm-admin .project-card-v2.is-confirming .r7-proj-confirm { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
#adminPanel.hm-admin .project-card-v2.is-confirming { border-color: rgba(239, 107, 94, 0.45) !important; }
#adminPanel.hm-admin .project-card-v2.is-deleting { pointer-events: none; }
#adminPanel.hm-admin .project-card-v2.is-deleting .r7-proj-confirm [data-action='project-confirm-delete'] { opacity: 0.7; }
#adminPanel.hm-admin .project-card-v2.is-removed {
    opacity: 0;
    transform: scale(0.94) translateY(8px) !important;
    filter: blur(2px);
    transition: opacity 0.3s ease, transform 0.36s var(--r7-ease-out), filter 0.3s ease !important;
}
#adminPanel.hm-admin .project-card-v2 .btn-icon { transition: transform 0.16s var(--r7-ease-out), color 0.2s ease, background-color 0.2s ease; }
#adminPanel.hm-admin .project-card-v2 .btn-icon:active { transform: scale(0.9); }

/* --- toast: slides up with an icon and a countdown bar --- */
.admin-media-toast {
    left: auto !important;
    right: 24px;
    bottom: 24px;
    z-index: 2147483001;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
    max-width: min(420px, calc(100vw - 32px));
    padding: 12px 16px 14px !important;
    border-radius: 12px !important;
    background: #1c1c20 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f2f0ec !important;
    font: 500 0.88rem/1.35 var(--p-font);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7) !important;
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px) scale(0.97) !important;
    transition: opacity 0.2s ease, transform 0.35s var(--r7-ease-out) !important;
    pointer-events: none;
}
.admin-media-toast.active { opacity: 1; transform: none !important; }
.admin-media-toast::before {
    font: 900 0.8rem 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    content: '\f00c';
    background: rgba(70, 195, 123, 0.16);
    color: #46c37b;
}
.admin-media-toast.is-warning::before { content: '!'; font-family: var(--p-font); background: rgba(224, 165, 60, 0.16); color: #e0a53c; }
.admin-media-toast.is-error::before { content: '\f00d'; background: rgba(239, 107, 94, 0.16); color: #ef6b5e; }
.admin-media-toast::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: #46c37b;
    transform-origin: left;
    transform: scaleX(0);
}
.admin-media-toast.is-warning::after { background: #e0a53c; }
.admin-media-toast.is-error::after { background: #ef6b5e; }
.admin-media-toast.active::after { animation: r7-toast-timer var(--toast-ms, 2400ms) linear both; }
@keyframes r7-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 600px) { .admin-media-toast { right: 16px; left: 16px !important; bottom: 16px; max-width: none; } }

@media (prefers-reduced-motion: no-preference) {
    /* --- portal opens: sidebar slides in, header drops, content rises --- */
    #adminPanel.hm-admin.r7-opening .admin-sidebar-v2 { animation: r7-a-side 0.55s var(--r7-ease-out) both; }
    #adminPanel.hm-admin.r7-opening .main-header { animation: r7-a-drop 0.5s var(--r7-ease-out) 0.08s both; }
    #adminPanel.hm-admin.r7-opening .sidebar-nav > * { animation: r7-a-item 0.45s var(--r7-ease-out) both; animation-delay: calc(0.12s + var(--n, 0) * 28ms); }
    @keyframes r7-a-side { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
    @keyframes r7-a-drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
    @keyframes r7-a-item { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

    /* --- page title swaps with a quick rise when you change tab --- */
    #adminPanel.hm-admin .hm-admin-title.r7-swap h1 { animation: r7-a-title 0.4s var(--r7-ease-out) both; }
    #adminPanel.hm-admin .hm-admin-title.r7-swap p { animation: r7-a-title 0.4s var(--r7-ease-out) 0.05s both; }
    @keyframes r7-a-title { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }

    /* --- sidebar: icons nudge on hover, the active icon pops --- */
    #adminPanel.hm-admin .nav-item i { transition: color 0.2s ease, transform 0.25s var(--r7-ease-out); }
    #adminPanel.hm-admin .nav-item:hover i { transform: translateX(2px); }
    #adminPanel.hm-admin .nav-item.active i { animation: r7-a-pop 0.35s var(--r7-ease-out); }
    @keyframes r7-a-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
    #adminPanel.hm-admin .hm-nav-indicator::before { transition: transform 0.3s var(--r7-ease-out); }

    /* --- cards and rows: staggered rise (all tabs, not just the dashboard) --- */
    #adminPanel.hm-admin :is(.project-card-v2, .moderation-card, .admin-control-card, .admin-notification-item, .admin-card-v2, .hm-ad-row, #hmMedia .hm-tile, .r7-tb-admin, .hm-ad-form) {
        animation: r7-admin-page 0.42s var(--r7-ease-out) both;
    }
    #adminPanel.hm-admin :is(.projects-grid-v2, .settings-grid-v2, .admin-notification-list, .review-stack-v2, .hm-ad-rows, #hmMedia .hm-grid) > :nth-child(2) { animation-delay: 0.04s; }
    #adminPanel.hm-admin :is(.projects-grid-v2, .settings-grid-v2, .admin-notification-list, .review-stack-v2, .hm-ad-rows, #hmMedia .hm-grid) > :nth-child(3) { animation-delay: 0.08s; }
    #adminPanel.hm-admin :is(.projects-grid-v2, .settings-grid-v2, .admin-notification-list, .review-stack-v2, .hm-ad-rows, #hmMedia .hm-grid) > :nth-child(4) { animation-delay: 0.12s; }
    #adminPanel.hm-admin :is(.projects-grid-v2, .settings-grid-v2, .admin-notification-list, .review-stack-v2, .hm-ad-rows, #hmMedia .hm-grid) > :nth-child(n+5) { animation-delay: 0.16s; }

    /* --- hover: cards lift, thumbnails zoom --- */
    @media (hover: hover) and (pointer: fine) {
        #adminPanel.hm-admin :is(.project-card-v2, .hm-lead, .hm-ad-row) { transition: transform 0.25s var(--r7-ease-out), border-color 0.2s ease; }
        #adminPanel.hm-admin :is(.project-card-v2, .hm-lead):hover { transform: translateY(-2px); border-color: var(--a-line-strong) !important; }
        #adminPanel.hm-admin .project-thumbnail img { transition: transform 0.6s var(--r7-ease-out); }
        #adminPanel.hm-admin .project-card-v2:hover .project-thumbnail img { transform: scale(1.05); }
        #adminPanel.hm-admin .hm-action i { transition: transform 0.3s var(--r7-ease-out); }
        #adminPanel.hm-admin .hm-action:hover i { transform: translateY(-2px) scale(1.1); }
    }

    /* --- press feedback on every admin button --- */
    #adminPanel.hm-admin :is(button, .hm-btn, a.hm-btn):not(:disabled):active { transform: scale(0.97); }
    #adminPanel.hm-admin :is(button, .hm-btn) { transition-property: transform, background-color, border-color, color, filter; transition-duration: 0.16s; transition-timing-function: var(--r7-ease-out); }

    /* --- switch: springy thumb --- */
    #adminPanel .hm-switch-thumb { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.2s ease; }
    #adminPanel .hm-switch:active .hm-switch-thumb { width: 24px; }

    /* --- lead delete confirm slides in from the right --- */
    #adminPanel.hm-admin .hm-lead.is-confirming .hm-lead-confirm { animation: r7-a-slide 0.28s var(--r7-ease-out) both; }
    @keyframes r7-a-slide { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

    /* --- account menu grows from its button --- */
    #adminPanel.hm-admin .hm-account-menu:not([hidden]) { animation: r7-a-menu 0.2s var(--r7-ease-out) both; transform-origin: top right; }
    @keyframes r7-a-menu { from { opacity: 0; transform: scale(0.95) translateY(-4px); } to { opacity: 1; transform: none; } }

    /* --- KPI: a thin accent line draws under the number as it counts --- */
    #adminPanel.hm-admin .hm-kpi::after {
        content: '';
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 0;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--p-accent), transparent);
        transform: scaleX(0);
        transform-origin: left;
        animation: r7-a-line 0.9s var(--r7-ease-out) both;
        animation-delay: calc(0.2s + var(--i, 0) * 60ms);
        opacity: 0.7;
    }
    @keyframes r7-a-line { to { transform: scaleX(1); } }

    /* --- login card: rises in, fields follow --- */
    .hm-login-card { animation: r7-dialog-in 0.6s var(--r7-ease-out) both; }
    .hm-login-card > * { animation: r7-item-in 0.5s var(--r7-ease-out) both; }
    .hm-login-card > :nth-child(1) { animation-delay: 0.1s; }
    .hm-login-card > :nth-child(2) { animation-delay: 0.14s; }
    .hm-login-card > :nth-child(3) { animation-delay: 0.18s; }
    .hm-login-card > :nth-child(n+4) { animation-delay: 0.22s; }
    .hm-login-error:not([hidden]) { animation: r7-a-shake 0.4s ease both; }
    @keyframes r7-a-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
}

/* --- phones: sidebar drawer gets a dimmed backdrop --- */
@media (max-width: 900px) {
    #adminPanel.hm-admin .admin-sidebar-v2 { transition: transform 0.42s var(--r7-ease-drawer) !important; }
    #adminPanel.hm-admin .admin-main-v2::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 29;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    #adminPanel.hm-admin.is-nav-open .admin-main-v2::after { opacity: 1; pointer-events: auto; }
}

/* --- Projects tab: clean card layout (category label, stacked fields, actions row) --- */
#adminPanel.hm-admin .projects-grid-v2 { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
#adminPanel.hm-admin .project-card-v2 { display: flex; flex-direction: column; overflow: hidden; }
#adminPanel.hm-admin .project-thumbnail { position: relative; aspect-ratio: 16 / 10; cursor: zoom-in; }
#adminPanel.hm-admin .project-overlay {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: rgba(0, 0, 0, 0.35); color: #fff; opacity: 0; transition: opacity 0.25s ease;
}
#adminPanel.hm-admin .project-thumbnail:hover .project-overlay { opacity: 1; }
#adminPanel.hm-admin .project-info { flex: 1; display: flex; flex-direction: column; gap: 0; padding: 14px 16px 12px !important; }
#adminPanel.hm-admin .project-info h3 { order: 1; margin: 0 0 12px; font-family: var(--r7-display); font-size: 1rem; font-weight: 700; line-height: 1.25; color: var(--a-text); }
#adminPanel.hm-admin .project-info .project-category {
    order: 0; position: static !important; display: block; width: auto; height: auto; margin: 0 0 4px;
    padding: 0 !important; border: 0 !important; border-radius: 0; box-shadow: none !important;
    background: none !important; font-size: 0.7rem !important; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase !important;
}
#adminPanel.hm-admin .project-metadata {
    order: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0 !important;
    border: 0 !important; background: none !important; box-shadow: none !important;
}
#adminPanel.hm-admin .metadata-field { display: grid; gap: 5px; min-width: 0; margin: 0; }
#adminPanel.hm-admin .metadata-field label { font-size: 0.72rem !important; font-weight: 600; color: var(--a-muted) !important; }
#adminPanel.hm-admin .metadata-field :is(input, select) { width: 100%; min-width: 0; min-height: 36px !important; padding: 7px 10px !important; font-size: 0.84rem !important; }
#adminPanel.hm-admin .metadata-field select { padding-right: 30px !important; }
#adminPanel.hm-admin .project-actions {
    order: 3; display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; padding-top: 10px;
    border-top: 1px solid var(--a-line);
}
#adminPanel.hm-admin .project-actions .btn-icon { width: 34px; height: 34px; border-radius: 9px; }
#adminPanel.hm-admin .r7-proj-confirm .hm-btn { height: 34px !important; padding: 0 14px !important; font-size: 0.82rem; }
#adminPanel.hm-admin #adminMainContent .project-card-v2 .project-info .project-category { display: block !important; background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 0 !important; }
#adminPanel.hm-admin .r7-proj-confirm span { flex: 1 0 100%; margin: 0 0 2px; }
#adminPanel.hm-admin .r7-proj-confirm .hm-btn { flex: 1; justify-content: center; }
#adminPanel.hm-admin .r7-proj-confirm .hm-btn.is-danger { background: #c4392e !important; border-color: #c4392e !important; background-image: none !important; box-shadow: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* ==========================================================================
   7.14 SERVICE GALLERIES (admin). One radius system: 14px panels, 10px controls, pill tabs.
   ========================================================================== */
#adminPanel.hm-admin .sg-admin { gap: 16px; }
#adminPanel.hm-admin .sg-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}
#adminPanel.hm-admin .sg-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px 0 14px;
    border-radius: 999px !important;
    border: 1px solid var(--a-line-2) !important;
    background: transparent !important;
    color: var(--a-soft) !important;
    font: 600 0.84rem var(--p-font);
    cursor: pointer;
}
#adminPanel.hm-admin .sg-tab span {
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--a-panel-2);
    color: var(--a-muted);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}
#adminPanel.hm-admin .sg-tab:hover { border-color: var(--a-line-strong) !important; color: var(--a-text) !important; }
#adminPanel.hm-admin .sg-tab.is-active { background: var(--a-text) !important; border-color: var(--a-text) !important; color: var(--a-bg, #111112) !important; }
#adminPanel.hm-admin .sg-tab.is-active span { background: rgba(17, 17, 18, 0.12); color: var(--a-bg, #111112); }

#adminPanel.hm-admin .sg-add { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
#adminPanel.hm-admin .sg-drop {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    min-height: 168px;
    padding: 22px;
    border-radius: 14px;
    border: 1.5px dashed var(--a-line-strong);
    background: var(--a-panel);
    color: var(--a-muted);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.25s var(--r7-ease-out);
}
#adminPanel.hm-admin .sg-drop i { font-size: 1.5rem; color: var(--p-accent); transition: transform 0.3s var(--r7-ease-out); }
#adminPanel.hm-admin .sg-drop strong { color: var(--a-text); font-size: 0.95rem; }
#adminPanel.hm-admin .sg-drop span { font-size: 0.8rem; max-width: 42ch; }
#adminPanel.hm-admin .sg-drop:hover, #adminPanel.hm-admin .sg-drop.is-over { border-color: var(--p-accent); background: color-mix(in srgb, var(--p-accent) 7%, var(--a-panel)); }
#adminPanel.hm-admin .sg-drop.is-over { transform: scale(1.01); }
#adminPanel.hm-admin .sg-drop.is-over i, #adminPanel.hm-admin .sg-drop:hover i { transform: translateY(-3px); }
#adminPanel.hm-admin .sg-drop:focus-within { outline: 2px solid var(--p-accent); outline-offset: 2px; }
#adminPanel.hm-admin .sg-drop input[type='file'] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0 !important; padding: 0 !important; }
#adminPanel.hm-admin .sg-links {
    display: grid;
    gap: 8px;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--a-line);
    background: var(--a-panel);
}
#adminPanel.hm-admin .sg-links textarea { min-height: 72px !important; font-size: 0.82rem !important; }
#adminPanel.hm-admin .sg-links .hm-btn { justify-self: start; }
#adminPanel.hm-admin .sg-links-msg { margin: 0; font-size: 0.8rem; color: var(--a-soft); }

#adminPanel.hm-admin .sg-queue { display: grid; gap: 6px; }
#adminPanel.hm-admin .sg-queue:empty { display: none; }
#adminPanel.hm-admin .sg-q {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px 11px;
    border-radius: 10px;
    background: var(--a-panel);
    border: 1px solid var(--a-line);
    font-size: 0.82rem;
    overflow: hidden;
    animation: r7-admin-page 0.3s var(--r7-ease-out) both;
}
#adminPanel.hm-admin .sg-q-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--a-text); }
#adminPanel.hm-admin .sg-q-state { flex: 0 0 auto; color: var(--a-muted); font-variant-numeric: tabular-nums; }
#adminPanel.hm-admin .sg-q.is-done .sg-q-state { color: var(--a-ok); }
#adminPanel.hm-admin .sg-q.is-error .sg-q-state { color: var(--a-bad); }
#adminPanel.hm-admin .sg-q-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--p-accent); transform-origin: left; transform: scaleX(calc(var(--pct, 0%) / 100%)); transition: transform 0.25s ease; }
#adminPanel.hm-admin .sg-q.is-done .sg-q-bar { background: var(--a-ok); }
#adminPanel.hm-admin .sg-q.is-error .sg-q-bar { background: var(--a-bad); }

#adminPanel.hm-admin .sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
#adminPanel.hm-admin .sg-grid > .sg-empty { grid-column: 1 / -1; }
#adminPanel.hm-admin .sg-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    border-radius: 14px;
    background: var(--a-panel);
    border: 1px solid var(--a-line);
    transition: border-color 0.2s ease, transform 0.25s var(--r7-ease-out);
    animation: r7-admin-page 0.4s var(--r7-ease-out) both;
    animation-delay: calc(var(--i, 0) * 30ms);
}
#adminPanel.hm-admin .sg-tile.is-featured { border-color: color-mix(in srgb, var(--p-accent) 55%, transparent); }
#adminPanel.hm-admin .sg-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--a-bg); overflow: hidden; }
#adminPanel.hm-admin .sg-thumb :is(img, video) { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--r7-ease-out); }
#adminPanel.hm-admin .sg-kind, #adminPanel.hm-admin .sg-cover-badge {
    position: absolute;
    top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(11, 11, 12, 0.72);
    color: #f2f0ec;
    font-size: 0.7rem;
    font-weight: 600;
}
#adminPanel.hm-admin .sg-kind { left: 8px; }
#adminPanel.hm-admin .sg-cover-badge { right: 8px; background: var(--p-accent); color: var(--p-on-accent); }
#adminPanel.hm-admin .sg-caption {
    margin: 10px 10px 0;
    min-height: 34px !important;
    padding: 6px 10px !important;
    font-size: 0.82rem !important;
    background: transparent !important;
    border-color: transparent !important;
}
#adminPanel.hm-admin .sg-caption:hover { border-color: var(--a-line-2) !important; }
#adminPanel.hm-admin .sg-caption:focus { background: var(--a-bg) !important; }
#adminPanel.hm-admin .sg-tools { display: flex; align-items: center; gap: 4px; padding: 8px 10px 10px; }
#adminPanel.hm-admin .sg-tool {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--a-muted);
    cursor: pointer;
    font-size: 0.8rem;
}
#adminPanel.hm-admin .sg-tool:hover:not(:disabled) { color: var(--a-text); background: var(--a-raise, rgba(255, 255, 255, 0.06)); }
#adminPanel.hm-admin .sg-tool:disabled { opacity: 0.3; cursor: default; }
#adminPanel.hm-admin .sg-tool.is-on { color: var(--p-accent); }
#adminPanel.hm-admin .sg-tool.is-danger { margin-left: auto; }
#adminPanel.hm-admin .sg-tool.is-danger:hover { color: var(--a-bad); background: rgba(239, 107, 94, 0.12); }
#adminPanel.hm-admin .sg-move { flex: 1 1 auto; min-width: 0; min-height: 32px !important; height: 32px; padding: 0 26px 0 8px !important; font-size: 0.78rem !important; background-position: right 8px center !important; }
#adminPanel.hm-admin .sg-confirm {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--a-line-2);
    background: rgba(19, 19, 21, 0.97);
    visibility: hidden;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.28s var(--r7-ease-out), opacity 0.2s ease, visibility 0s linear 0.28s;
}
#adminPanel.hm-admin .sg-confirm span { flex: 1 0 100%; font-size: 0.84rem; font-weight: 600; }
#adminPanel.hm-admin .sg-confirm .hm-btn { flex: 1; justify-content: center; height: 34px !important; }
#adminPanel.hm-admin .sg-confirm .hm-btn.is-danger { background: #c4392e !important; border-color: #c4392e !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
#adminPanel.hm-admin .sg-tile.is-confirming { border-color: rgba(239, 107, 94, 0.45); }
#adminPanel.hm-admin .sg-tile.is-confirming .sg-confirm { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
#adminPanel.hm-admin .sg-tile.is-removed { opacity: 0; transform: scale(0.94); transition: opacity 0.3s ease, transform 0.36s var(--r7-ease-out); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
    #adminPanel.hm-admin .sg-tile:hover { transform: translateY(-2px); border-color: var(--a-line-strong); }
    #adminPanel.hm-admin .sg-tile:hover .sg-thumb :is(img, video) { transform: scale(1.04); }
}
@media (max-width: 900px) {
    #adminPanel.hm-admin .sg-add { grid-template-columns: 1fr; }
    #adminPanel.hm-admin .sg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 480px) {
    #adminPanel.hm-admin .sg-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    #adminPanel.hm-admin :is(.sg-tile, .sg-q) { animation: none; }
}

/* 7.14 public: service cards already name the service in the title */
html body #hmShowcase.is-services .hm-sc-cat { display: none !important; }
html body #hmShowcase.is-services .hm-sc-info { padding-top: 18px; }
#adminPanel.hm-admin .sg-tab { width: auto !important; flex: 0 0 auto !important; }
#adminPanel.hm-admin .sg-drop strong span { font-size: inherit; max-width: none; color: var(--p-accent); }
#adminPanel.hm-admin .sg-toolbar { display: flex; align-items: center; gap: 12px; min-width: 0; }
#adminPanel.hm-admin .sg-toolbar .sg-tabs { flex: 1; min-width: 0; }
#adminPanel.hm-admin .sg-import { flex: 0 0 auto; }
#adminPanel.hm-admin .sg-hint { margin: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--p-accent) 35%, transparent); background: color-mix(in srgb, var(--p-accent) 8%, transparent); color: var(--a-soft); font-size: 0.85rem; }
#adminPanel.hm-admin .sg-hint strong { color: var(--a-text); }
#hmMedia .hm-tile { position: relative; }
#hmMedia .hm-togal { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: 1fr auto auto; gap: 6px; padding: 10px; border-top: 1px solid var(--a-line-2, rgba(255, 255, 255, 0.11)); background: rgba(19, 19, 21, 0.97); visibility: hidden; opacity: 0; transform: translateY(100%); transition: transform 0.28s var(--r7-ease-out), opacity 0.2s ease, visibility 0s linear 0.28s; }
#hmMedia .hm-tile.is-picking .hm-togal { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
#hmMedia .hm-togal select { min-width: 0; min-height: 34px !important; font-size: 0.8rem !important; }
#hmMedia .hm-togal .hm-btn { height: 34px !important; padding: 0 12px !important; font-size: 0.8rem; }
@media (max-width: 700px) { #adminPanel.hm-admin .sg-toolbar { flex-direction: column; align-items: stretch; } #adminPanel.hm-admin .sg-import { align-self: flex-start; } }

/* 7.14 public: placeholder cards while galleries load (no flash of old projects) */
html body #hmScGrid .hm-sc-skel { break-inside: avoid; margin: 0 0 20px; aspect-ratio: 4 / 3; border-radius: 20px; background: linear-gradient(90deg, var(--p-surface) 0%, var(--p-surface-2) 50%, var(--p-surface) 100%); background-size: 200% 100%; animation: r7-shimmer 1.2s linear infinite; }
@media (prefers-reduced-motion: reduce) { html body #hmScGrid .hm-sc-skel { animation: none; } #adminPanel.hm-admin .sg-tile.is-removed { transition: none; } }

/* ==========================================================================
   7.15 LIQUID GLASS MENU (round 8, both themes) + extra motion
   Web approximation of liquid glass: very translucent tint, strong blur with
   saturation/brightness boost, bright specular top rim, inner edge ring, and a
   soft light that follows the pointer. Solid fallback for reduced transparency.
   ========================================================================== */
html body .main-nav {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0.02) 100%),
        rgba(18, 18, 20, 0.26);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 18px rgba(255, 255, 255, 0.05),
        0 10px 36px -12px rgba(0, 0, 0, 0.55),
        0 2px 6px -2px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(22px) saturate(200%) brightness(1.1) contrast(1.05);
    -webkit-backdrop-filter: blur(22px) saturate(200%) brightness(1.1) contrast(1.05);
}
/* inner edge ring (the "thickness" of the glass) + pointer light */
html body .main-nav::after {
    content: '';
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: radial-gradient(160px 90px at var(--lx, 50%) var(--ly, 0%), rgba(255, 255, 255, 0.16), transparent 70%);
    opacity: var(--lo, 0);
    transition: opacity 0.35s ease;
}
html body .main-nav :is(.logo, .premium-nav-links a, .site-share-btn-label) { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }

html[data-theme='light'] body .main-nav {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.28) 55%, rgba(255, 255, 255, 0.22) 100%),
        rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow:
        inset 0 1px 0 #fff,
        inset 0 -1px 0 rgba(22, 22, 23, 0.06),
        inset 0 0 20px rgba(255, 255, 255, 0.35),
        0 12px 34px -14px rgba(22, 22, 23, 0.32),
        0 1px 3px rgba(22, 22, 23, 0.08);
    backdrop-filter: blur(22px) saturate(180%) brightness(1.06);
    -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(1.06);
}
html[data-theme='light'] body .main-nav::after {
    border-color: rgba(255, 255, 255, 0.6);
    background: radial-gradient(160px 90px at var(--lx, 50%) var(--ly, 0%), rgba(255, 255, 255, 0.7), transparent 70%);
}
html[data-theme='light'] body .main-nav :is(.logo, .premium-nav-links a, .site-share-btn-label) { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
html[data-theme='light'] body .premium-nav-links a { color: #2b2a28; }
html[data-theme='light'] body .premium-nav-links a:is(:hover, .is-active) { color: #111112; }
html[data-theme='light'] body .main-nav .logo { color: #111112; }
html[data-theme='light'] body .r7-nav-pill { background: rgba(255, 255, 255, 0.75); box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(22, 22, 23, 0.12), 0 0 0 1px rgba(22, 22, 23, 0.05); }
html body .r7-nav-pill {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 8px -2px rgba(0, 0, 0, 0.35);
    /* springy glide between sections */
    transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1), width 0.45s var(--r7-ease-out), opacity 0.25s ease;
}
html body .main-nav :is(.site-share-btn, .theme-toggle, .r7-burger) {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
html[data-theme='light'] body .main-nav :is(.site-share-btn, .theme-toggle, .r7-burger) {
    background: rgba(255, 255, 255, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(22, 22, 23, 0.1) !important;
}
/* phone menu sheet matches the glass */
html body .r7-sheet-panel { background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)), rgba(18, 18, 20, 0.5); border-color: rgba(255, 255, 255, 0.2); }
html[data-theme='light'] body .r7-sheet-panel { background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.6)); border-color: #fff; }
@media (prefers-reduced-transparency: reduce) {
    html body .main-nav, html body .r7-sheet-panel { background: #19191b !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    html[data-theme='light'] body .main-nav, html[data-theme='light'] body .r7-sheet-panel { background: #fbfaf8 !important; }
}

@media (prefers-reduced-motion: no-preference) {
    /* links rise a touch on hover, logo settles in on load */
    html body .premium-nav-links a { transition: color 0.25s ease, transform 0.25s var(--r7-ease-out); }
    @media (hover: hover) and (pointer: fine) {
        html body .premium-nav-links a:hover { transform: translateY(-1px); }
    }
    html body .main-nav .logo .whatsapp-logo { animation: r8-logo-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s backwards; }
    @keyframes r8-logo-in { from { transform: scale(0.6) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }

    /* quote button: a light sweeps across on hover */
    html body .premium-nav-cta { overflow: hidden; }
    html body .premium-nav-cta::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: -60%;
        width: 50%;
        background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
        transform: skewX(-18deg) translateX(0);
        pointer-events: none;
    }
    @media (hover: hover) and (pointer: fine) {
        html body .premium-nav-cta:hover::after { transform: skewX(-18deg) translateX(420%); transition: transform 0.75s var(--r7-ease-out); }
    }

    /* top advert bar: drops with a soft bounce, lifts quickly */
    html body .r7-topbar { transition: transform 0.38s var(--r7-ease-out); }
    html body .r7-topbar.is-in { transition: transform 0.7s cubic-bezier(0.34, 1.35, 0.64, 1); }
    html body .main-nav { transition: height 0.35s var(--r7-ease-out), top 0.6s cubic-bezier(0.34, 1.25, 0.64, 1), transform 0.45s var(--r7-ease-drawer), box-shadow 0.3s ease; }

    /* contact card: phone icon rings, WhatsApp breathes */
    @media (hover: hover) and (pointer: fine) {
        html body #reviewCta .hm-cta-btn[href^="tel:"]:hover .fa-phone { animation: r8-ring 0.7s ease both; }
    }
    @keyframes r8-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-18deg); } 40% { transform: rotate(14deg); } 60% { transform: rotate(-10deg); } 80% { transform: rotate(6deg); } }
    html body #reviewCta .hm-cta-btn[href*="wa.me"] { position: relative; }
    html body #reviewCta .hm-cta-btn[href*="wa.me"]::before {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        border: 2px solid rgba(20, 12, 5, 0.35);
        animation: r8-breathe 2.6s ease-out infinite;
        pointer-events: none;
    }
    @keyframes r8-breathe { 0% { opacity: 0.8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.12); } }
    html body #reviewCta .hm-cta-btn { transition: transform 0.25s var(--r7-ease-out), background-color 0.2s ease; }
    @media (hover: hover) and (pointer: fine) {
        html body #reviewCta .hm-cta-btn:hover { transform: translateY(-2px); }
    }
}

/* 7.15 clarity: the advert banner no longer scales up and down (scaled text renders soft);
   the photo still slowly zooms, and the card lifts slightly on hover instead */
html body #hmAds .hm-ads-track { animation: none !important; transform: none !important; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    html body #hmAds .hm-ad { transition: transform 0.35s var(--r7-ease-out), box-shadow 0.35s ease; }
    html body #hmAds .hm-ad.is-active:hover { transform: translateY(-3px); }
}
/* orange brand word stays sharp on light glass */
html[data-theme='light'] body .main-nav .logo span:not(.whatsapp-logo) { text-shadow: none; }html[data-theme='light'] body .site-footer :is(.footer-logo, .footer-brand .footer-logo) { box-shadow: 0 1px 2px rgba(22, 22, 23, 0.08), 0 0 0 1px rgba(22, 22, 23, 0.06) !important; }
html[data-theme='light'] body .site-footer .footer-status { box-shadow: 0 0 0 1px rgba(70, 160, 110, 0.35) !important; }
/* ==========================================================================
   7.16 Galleries: select several + Move button (round 9)
   ========================================================================== */
#adminPanel.hm-admin .sg-bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-height: 44px;
    padding: 6px 8px;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}
#adminPanel.hm-admin .sg-bulk:empty { display: none; }
#adminPanel.hm-admin .sg-bulk.has-selection { position: sticky; top: 8px; z-index: 5; background: var(--a-raise); border-color: color-mix(in srgb, var(--p-accent) 45%, transparent); box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.7); animation: r8-bulk-in 0.35s cubic-bezier(0.34, 1.4, 0.64, 1); }
@keyframes r8-bulk-in { from { transform: translateY(-6px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
#adminPanel.hm-admin .sg-bulk strong { font-size: 0.88rem; margin-right: 4px; }
#adminPanel.hm-admin .sg-bulk-hint { font-size: 0.8rem; color: var(--a-muted); }
#adminPanel.hm-admin .sg-bulk .hm-btn { height: 34px !important; font-size: 0.82rem; }
#adminPanel.hm-admin .sg-bulk .hm-btn.is-danger { background: #c4392e !important; border-color: #c4392e !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
#adminPanel.hm-admin .sg-bulk-move select { min-height: 34px !important; height: 34px; padding: 0 30px 0 10px !important; font-size: 0.82rem !important; }

/* tick box on each photo */
#adminPanel.hm-admin .sg-check { position: absolute; left: 8px; bottom: 8px; z-index: 2; width: 30px; height: 30px; cursor: pointer; }
#adminPanel.hm-admin .sg-check input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
#adminPanel.hm-admin .sg-check span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background: rgba(11, 11, 12, 0.45);
    color: transparent;
    font-size: 0.8rem;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, border-color 0.2s ease;
}
#adminPanel.hm-admin .sg-check input:checked + span { background: var(--p-accent); border-color: var(--p-accent); color: var(--p-on-accent); transform: scale(1.08); }
#adminPanel.hm-admin .sg-check input:focus-visible + span { outline: 2px solid var(--p-accent); outline-offset: 2px; }
#adminPanel.hm-admin .sg-check:active span { transform: scale(0.88); }
#adminPanel.hm-admin .sg-tile.is-selected { border-color: var(--p-accent) !important; box-shadow: 0 0 0 1px var(--p-accent) !important; }
#adminPanel.hm-admin .sg-tile.is-selected .sg-thumb :is(img, video) { transform: scale(0.96); border-radius: 10px; transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), border-radius 0.3s ease; }
#adminPanel.hm-admin .sg-tile.is-deleting { opacity: 0.45; pointer-events: none; }

/* Move button + list of services */
#adminPanel.hm-admin .sg-move-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
#adminPanel.hm-admin .sg-move-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--a-line-2);
    background: var(--a-panel-2);
    color: var(--a-text);
    font: 600 0.8rem var(--p-font);
    cursor: pointer;
}
#adminPanel.hm-admin .sg-move-btn i { font-size: 0.75rem; color: var(--p-accent); }
#adminPanel.hm-admin .sg-move-btn:hover { border-color: var(--a-line-strong); }
#adminPanel.hm-admin .sg-move-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    z-index: 6;
    display: grid;
    min-width: 190px;
    padding: 6px;
    border-radius: 12px;
    background: var(--a-raise);
    border: 1px solid var(--a-line-2);
    box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.75);
    transform-origin: bottom left;
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px) scale(0.96);
    transition: opacity 0.18s ease, transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1), visibility 0s linear 0.3s;
}
#adminPanel.hm-admin .sg-tile.is-moving { overflow: visible; z-index: 4; }
#adminPanel.hm-admin .sg-tile.is-moving .sg-move-menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
#adminPanel.hm-admin .sg-move-title { padding: 4px 8px 6px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a-muted); }
#adminPanel.hm-admin .sg-move-menu button { height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--a-text); font: 500 0.85rem var(--p-font); text-align: left; cursor: pointer; }
#adminPanel.hm-admin .sg-move-menu button:hover, #adminPanel.hm-admin .sg-move-menu button:focus-visible { background: color-mix(in srgb, var(--p-accent) 16%, transparent); outline: none; }
/* tooltips as visible labels on the icon buttons (hover/focus) */
@media (hover: hover) and (pointer: fine) {
    #adminPanel.hm-admin .sg-tool { position: relative; }
    #adminPanel.hm-admin .sg-tool[title]::after {
        content: attr(title);
        position: absolute;
        bottom: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%) translateY(4px);
        padding: 4px 8px;
        border-radius: 6px;
        background: #f2f0ec;
        color: var(--a-bg, #111112);
        font: 600 0.7rem var(--p-font);
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease, transform 0.2s var(--r7-ease-out);
        z-index: 7;
    }
    #adminPanel.hm-admin .sg-tool[title]:hover::after { opacity: 1; transform: translateX(-50%); transition-delay: 0.25s; }
}
/* Move gets its own full-width row under the icon buttons (tiles are too narrow for one row) */
#adminPanel.hm-admin .sg-tools { flex-wrap: wrap; row-gap: 8px; }
#adminPanel.hm-admin .sg-move-wrap { order: 10; flex: 1 1 100%; }
#adminPanel.hm-admin .sg-move-btn { width: 100%; justify-content: center; }
#adminPanel.hm-admin .sg-move-menu { left: 0; right: 0; min-width: 0; }#adminPanel.hm-admin .sg-check input { z-index: 1; }
#adminPanel.hm-admin .sg-check span { pointer-events: none; }
/* ==========================================================================
   7.17 Reviews: simple form + owner approval (round 9)
   ========================================================================== */
html body #reviewModal .hm-review-contact { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
html body #reviewModal .hm-review-contact .form-group { margin: 0; }
html body #reviewModal .hm-review-contact input {
    width: 100%; height: 48px; padding: 0 14px; border-radius: 14px;
    border: 1px solid var(--p-line-strong); background: var(--p-bg); color: var(--p-text);
    font-family: var(--p-font); font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
html body #reviewModal .hm-review-contact input:focus { outline: none; border-color: var(--p-accent); box-shadow: 0 0 0 3px var(--p-accent-soft); }
html body #reviewModal .hm-review-contact input::placeholder { color: color-mix(in srgb, var(--p-muted) 80%, transparent); }
html body #reviewModal .hm-review-photos[hidden] { display: none !important; }
@media (max-width: 520px) { html body #reviewModal .hm-review-contact { grid-template-columns: 1fr; } }
/* notices: plain message, or a warm thank-you */
html body #reviewModal .form-success { margin-top: 14px; padding: 12px 14px; font-weight: 600; font-size: 0.92rem; background: color-mix(in srgb, #c4392e 12%, transparent); border-color: color-mix(in srgb, #c4392e 55%, transparent); }
html body #reviewModal .form-success.is-thanks { padding: 20px 16px; font-size: 1rem; background: var(--p-accent-soft); border-color: var(--p-accent); }
html body #reviewModal .form-success.is-thanks::before { content: '\f058'; display: block; margin-bottom: 8px; font: 900 1.9rem 'Font Awesome 6 Free'; color: var(--p-accent); }
html body #reviewModal .review-form.is-sent .review-flow-shell { display: none; }
@media (prefers-reduced-motion: no-preference) {
    html body #reviewModal .form-success { animation: r9-notice-in 0.4s cubic-bezier(0.34, 1.4, 0.64, 1); }
    html body #reviewModal .form-success.is-thanks::before { animation: r9-thanks-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.1s; }
}
@keyframes r9-notice-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes r9-thanks-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

/* Admin > Reviews */
#adminPanel.hm-admin .rv-admin { display: grid; gap: 22px; }
#adminPanel.hm-admin .rv-lead { margin: 4px 0 0; color: var(--a-muted); font-size: 0.9rem; }
#adminPanel.hm-admin .rv-error { padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(196, 57, 46, 0.5); background: rgba(196, 57, 46, 0.12); color: #ffb3aa; font-size: 0.88rem; }
#adminPanel.hm-admin .rv-group h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--a-soft, var(--a-muted)); }
#adminPanel.hm-admin .rv-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--a-panel-2); color: var(--a-text); font-size: 0.74rem; letter-spacing: 0; }
#adminPanel.hm-admin .rv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
#adminPanel.hm-admin .rv-empty { padding: 22px; border-radius: 14px; border: 1px dashed var(--a-line-2); color: var(--a-muted); font-size: 0.88rem; text-align: center; }
#adminPanel.hm-admin .rv-card { display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: var(--a-panel); border: 1px solid var(--a-line); transition: border-color 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1); }
#adminPanel.hm-admin .rv-card.is-waiting { border-color: color-mix(in srgb, var(--p-accent) 40%, transparent); box-shadow: inset 3px 0 0 var(--p-accent); }
#adminPanel.hm-admin .rv-card:hover { transform: translateY(-2px); }
#adminPanel.hm-admin .rv-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#adminPanel.hm-admin .rv-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--p-accent-soft); color: var(--p-accent); font-weight: 700; }
#adminPanel.hm-admin .rv-who { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
#adminPanel.hm-admin .rv-who strong { font-size: 0.95rem; overflow-wrap: anywhere; }
#adminPanel.hm-admin .rv-meta { font-size: 0.78rem; color: var(--a-muted); }
#adminPanel.hm-admin .rv-stars { color: var(--p-accent); letter-spacing: 1px; }
#adminPanel.hm-admin .rv-phone { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--a-text); text-decoration: none; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--a-line-2); }
#adminPanel.hm-admin .rv-comment { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--a-text); white-space: pre-wrap; overflow-wrap: anywhere; }
#adminPanel.hm-admin .rv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
#adminPanel.hm-admin .rv-tags span { padding: 3px 9px; border-radius: 999px; background: var(--a-panel-2); font-size: 0.74rem; color: var(--a-muted); }
#adminPanel.hm-admin .rv-reply { display: grid; gap: 6px; font-size: 0.78rem; color: var(--a-muted); }
#adminPanel.hm-admin .rv-reply textarea { min-height: 56px !important; font-size: 0.88rem !important; }
#adminPanel.hm-admin .rv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#adminPanel.hm-admin .rv-actions .hm-btn { height: 34px !important; font-size: 0.82rem; }
#adminPanel.hm-admin .rv-actions .hm-btn.is-ghost-danger { margin-left: auto; color: var(--a-bad-text, #ff9a8f) !important; -webkit-text-fill-color: var(--a-bad-text, #ff9a8f) !important; }
#adminPanel.hm-admin .rv-actions .hm-btn.is-danger { color: #fff !important; -webkit-text-fill-color: #fff !important; }
#adminPanel.hm-admin .rv-confirm-text { font-size: 0.86rem; font-weight: 600; margin-right: auto; }
#adminPanel.hm-admin .rv-nav-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: auto; padding: 0 6px; border-radius: 999px; background: var(--p-accent); color: var(--p-on-accent); font-size: 0.72rem; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
    #adminPanel.hm-admin .rv-card { animation: r9-rv-in 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) both; }
    #adminPanel.hm-admin .rv-nav-badge { animation: r9-thanks-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
}
@keyframes r9-rv-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
/* review form: the old Google identity strip no longer applies */
html body #reviewModal #reviewModalIdentityOverlay { display: none !important; }
#adminPanel.hm-admin .rv-group { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
#adminPanel.hm-admin .rv-actions .hm-btn { display: inline-flex; align-items: center; gap: 7px; padding: 0 13px !important; }

/* ==========================================================================
   7.18 Google reviews (Places API New) + Site Control card (round 9)
   ========================================================================== */
html body #google-reviews-grid .google-review-card { position: relative; }
html body #google-reviews-grid .google-reviewer-name { color: var(--p-text); }
html body #google-reviews-grid .google-review-date { color: var(--p-muted); }
html body #google-reviews-grid .google-review-text { color: color-mix(in srgb, var(--p-text) 86%, transparent); white-space: pre-line; overflow-wrap: anywhere; }
html body #google-reviews-grid .google-reviewer-avatar { flex: 0 0 auto; }
html body #google-reviews-grid .google-reviewer-avatar.is-initial { display: grid; place-items: center; background: var(--p-accent); color: var(--p-on-accent); font-weight: 700; font-size: 1rem; }
html body #google-reviews-grid .google-fallback-ui { display: grid; justify-items: center; gap: 10px; }
html body #google-reviews-grid .google-fallback-ui > i { font-size: 1.8rem; color: var(--p-accent); }
html body #google-reviews-grid .google-fallback-ui p { margin: 0; color: var(--p-text); }
@media (prefers-reduced-motion: no-preference) {
    html body #google-reviews-grid .google-review-card { animation: r9-rv-in 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) both; }
    html body #google-reviews-grid .google-review-card:nth-child(2) { animation-delay: 0.06s; }
    html body #google-reviews-grid .google-review-card:nth-child(3) { animation-delay: 0.12s; }
    html body #google-reviews-grid .google-review-card:nth-child(4) { animation-delay: 0.18s; }
    html body #google-reviews-grid .google-review-card:nth-child(5) { animation-delay: 0.24s; }
}
#adminPanel.hm-admin .gp-help { margin: 0 0 12px; color: var(--a-muted); font-size: 0.85rem; line-height: 1.5; }
#adminPanel.hm-admin .gp-actions { display: flex; gap: 8px; margin-top: 4px; }
#adminPanel.hm-admin .gp-actions .hm-btn { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px !important; }
#adminPanel.hm-admin .gp-status { margin: 12px 0 0; min-height: 1.2em; font-size: 0.84rem; line-height: 1.5; color: var(--a-muted); }
#adminPanel.hm-admin .gp-status[data-tone='ok'] { color: #7fd99a; }
#adminPanel.hm-admin .gp-status[data-tone='error'] { color: var(--a-bad-text, #ff9a8f); }

/* ==========================================================================
   7.19 Brand colour card (round 9): one site-wide colour, readable text on it
   ========================================================================== */
#adminPanel.hm-admin .br-row { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; flex-wrap: wrap; }
#adminPanel.hm-admin .br-swatch { inline-size: 56px; block-size: 44px; padding: 3px; border: 1px solid var(--a-line, rgba(255, 255, 255, 0.12)); border-radius: 12px; background: transparent; cursor: pointer; }
#adminPanel.hm-admin .br-swatch::-webkit-color-swatch-wrapper { padding: 0; }
#adminPanel.hm-admin .br-swatch::-webkit-color-swatch { border: 0; border-radius: 9px; }
#adminPanel.hm-admin .br-sample { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--p-accent); color: var(--p-on-accent); font-weight: 700; font-size: 0.9rem; }
#adminPanel.hm-admin .gp-actions { flex-wrap: wrap; }

/* ==========================================================================
   7.20 Site health (round 9, was Control Center): green / amber / red checks
   ========================================================================== */
#adminPanel.hm-admin .sh-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
#adminPanel.hm-admin .sh-summary { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--a-text); }
#adminPanel.hm-admin .sh-summary[data-state='ok'] { color: #7fd99a; }
#adminPanel.hm-admin .sh-summary[data-state='warn'] { color: #f2c46d; }
#adminPanel.hm-admin .sh-summary[data-state='bad'] { color: var(--a-bad-text, #ff9a8f); }
#adminPanel.hm-admin .sh-head .hm-btn,
#adminPanel.hm-admin .sh-row .hm-btn { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px !important; white-space: nowrap; }
#adminPanel.hm-admin .sh-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
#adminPanel.hm-admin .sh-row {
    display: grid; grid-template-columns: 10px 22px minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: 14px;
    background: var(--a-surface, rgba(255, 255, 255, 0.03)); border: 1px solid var(--a-line, rgba(255, 255, 255, 0.08));
}
#adminPanel.hm-admin .sh-dot { width: 10px; height: 10px; border-radius: 50%; background: #6b6d73; }
#adminPanel.hm-admin .sh-row[data-state='ok'] .sh-dot { background: #3fbf6b; }
#adminPanel.hm-admin .sh-row[data-state='warn'] .sh-dot { background: #e8a93a; }
#adminPanel.hm-admin .sh-row[data-state='bad'] .sh-dot { background: #e0493c; }
#adminPanel.hm-admin .sh-row[data-state='bad'] { border-color: rgba(224, 73, 60, 0.45); }
#adminPanel.hm-admin .sh-icon { color: var(--a-muted); text-align: center; }
#adminPanel.hm-admin .sh-body { display: grid; gap: 2px; min-width: 0; }
#adminPanel.hm-admin .sh-body strong { font-size: 0.95rem; color: var(--a-text); }
#adminPanel.hm-admin .sh-text { font-size: 0.86rem; line-height: 1.45; color: var(--a-muted); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
    #adminPanel.hm-admin .sh-row[data-state='busy'] .sh-dot { animation: sh-pulse 1s ease-in-out infinite alternate; }
}
@keyframes sh-pulse { from { opacity: 0.35; } to { opacity: 1; } }
@media (max-width: 640px) {
    #adminPanel.hm-admin .sh-row { grid-template-columns: 10px 22px minmax(0, 1fr); }
    #adminPanel.hm-admin .sh-fix-slot { grid-column: 3; }
    #adminPanel.hm-admin .sh-fix-slot:empty { display: none; }
}

/* ==========================================================================
   7.21 Round 9 polish: wordmark font, Aftercare card, account email,
   showcase tilt + entrance, light liquid glass v2, spring hover/press
   ========================================================================== */

/* Menu wordmark: Unbounded (wide, geometric display face) */
html body .main-nav .logo {
    font-family: 'Unbounded', 'Bricolage Grotesque', var(--p-font), sans-serif;
    font-weight: 700;
    font-size: clamp(0.84rem, 0.72rem + 0.35vw, 1.02rem);
    letter-spacing: 0.02em;
    white-space: nowrap;
}
html body .main-nav .logo > span:not(.whatsapp-logo) { font-weight: 600; letter-spacing: 0.06em; }

/* Aftercare card (was "System Integrity"): photo + three real facts */
html body #about .hm-aftercare .about-visual-title { font-size: 1.05rem; letter-spacing: -0.01em; }
html body #about .hm-aftercare .about-visual-badge { text-transform: none; letter-spacing: 0; }
html body #about .hm-aftercare-facts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html body #about .hm-aftercare-facts .about-visual-stat { display: grid; gap: 4px; align-content: start; padding: 14px; text-align: left; }
html body #about .hm-aftercare-facts i { font-size: 1.05rem; color: var(--p-accent); margin-bottom: 4px; }
html body #about .hm-aftercare-facts strong { font-family: var(--p-font); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; }
html body #about .hm-aftercare-facts span { font-size: 0.8rem; line-height: 1.4; color: var(--p-muted); }
@media (max-width: 520px) {
    html body #about .hm-aftercare-facts { grid-template-columns: 1fr; }
    html body #about .hm-aftercare-facts .about-visual-stat { grid-template-columns: 26px auto; column-gap: 12px; }
    html body #about .hm-aftercare-facts i { grid-row: span 2; align-self: center; margin: 0; }
}

/* Account menu: who is signed in (visible on every screen size) */
#adminPanel.hm-admin .hm-account-who { margin: 0 0 6px; padding: 8px 12px 10px; border-bottom: 1px solid var(--a-line, rgba(255, 255, 255, 0.08)); font-size: 0.78rem; color: var(--a-muted); line-height: 1.4; }
#adminPanel.hm-admin .hm-account-who strong { display: block; color: var(--a-text); font-size: 0.86rem; font-weight: 600; overflow-wrap: anywhere; }

/* Work Showcase: Services-style tilt, pointer light and entrance */
html body #showcase .hm-sc-card {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transform-style: preserve-3d;
    transition: border-color 0.3s ease, translate 0.45s var(--r7-ease-out), box-shadow 0.45s ease, transform 0.3s var(--p-ease-out);
}
html body #showcase .hm-sc-card.is-tilting { transition: border-color 0.3s ease, translate 0.45s var(--r7-ease-out), box-shadow 0.45s ease, transform 0.12s linear; }
html body #showcase .hm-sc-media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.18), transparent 45%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
html body #showcase .hm-sc-card.is-tilting .hm-sc-media::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
    html.hm-anim body #showcase .hm-sc-card {
        opacity: 0;
        translate: 0 40px;
        scale: 0.95;
        transition:
            opacity 0.7s ease-out var(--hm-delay, 0ms),
            translate 0.9s var(--p-ease-out) var(--hm-delay, 0ms),
            scale 0.9s var(--p-ease-out) var(--hm-delay, 0ms),
            transform 0.3s var(--p-ease-out),
            border-color 0.3s ease,
            box-shadow 0.45s ease;
    }
    html.hm-anim body #showcase .hm-sc-card.hm-in { opacity: 1; translate: 0 0; scale: 1; }
    html.hm-anim body #showcase .hm-sc-card.hm-in.is-tilting { transition: opacity 0.7s ease-out, translate 0.45s var(--r7-ease-out), scale 0.9s var(--p-ease-out), transform 0.12s linear, border-color 0.3s ease, box-shadow 0.45s ease; }
    @media (hover: hover) and (pointer: fine) {
        html.hm-anim body #showcase .hm-sc-card.hm-in:hover { translate: 0 -6px; }
    }
}

/* Light mode: clearer liquid glass (more see-through, brighter refraction rim) */
html[data-theme='light'] body .main-nav {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.16) 52%, rgba(255, 255, 255, 0.1) 100%),
        rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow:
        inset 0 1px 0 #fff,
        inset 0 -1px 0 rgba(255, 255, 255, 0.75),
        inset 1px 0 0 rgba(255, 255, 255, 0.6),
        inset -1px 0 0 rgba(255, 255, 255, 0.6),
        inset 0 0 26px rgba(255, 255, 255, 0.42),
        0 14px 36px -16px rgba(22, 22, 23, 0.3),
        0 1px 3px rgba(22, 22, 23, 0.08);
    backdrop-filter: blur(28px) saturate(220%) brightness(1.08) contrast(1.04);
    -webkit-backdrop-filter: blur(28px) saturate(220%) brightness(1.08) contrast(1.04);
}
html[data-theme='light'] body .main-nav :is(.site-share-btn, .theme-toggle, .r7-burger) { background: rgba(255, 255, 255, 0.38) !important; }
html[data-theme='light'] body .r7-sheet-panel { background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.42)); }
@media (prefers-reduced-transparency: reduce) {
    html[data-theme='light'] body .main-nav, html[data-theme='light'] body .r7-sheet-panel { background: #fbfaf8 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* Spring feedback site-wide: a small overshoot pop on hover, squash + bounce
   on press (premium.js adds .hm-pressing / .hm-bounce, so taps work on phones).
   Uses the separate `scale` property so it never fights existing transforms. */
@media (prefers-reduced-motion: no-preference) {
    @media (hover: hover) and (pointer: fine) {
        html body :is(.hm-btn, .hm-chip, .hm-sc-chip, .filter-btn, .premium-nav-cta, .hm-cta-btn, .request-quote-btn, .hm-ad-cta, .hm-sc-quote, .hm-gal-quote, .btn, .submit-btn, .site-share-btn, .theme-toggle, .r7-burger, .social-links a, .hm-sc-more):not(:disabled):hover {
            animation: hm-spring-hover 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
    }
    html body .hm-pressing { animation: hm-spring-press 0.12s ease-out forwards !important; }
    html body .hm-bounce { animation: hm-spring-release 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
}
@keyframes hm-spring-hover { 0% { scale: 1; } 40% { scale: 1.06; } 70% { scale: 0.985; } 100% { scale: 1; } }
@keyframes hm-spring-press { to { scale: 0.93; } }
@keyframes hm-spring-release { 0% { scale: 0.93; } 45% { scale: 1.05; } 75% { scale: 0.99; } 100% { scale: 1; } }

/* Account menu was drawn under the page cards (the blurred header makes its own layer): lift the header above the content */
#adminPanel.hm-admin .main-header { position: relative; z-index: 40; }

/* ==========================================================================
   7.22 Round 10: page stays still behind popups (premium.js initScrollLock)
   ========================================================================== */
html.hm-scroll-locked { overflow: hidden; }
html.hm-scroll-locked body { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
/* scrolling inside a popup never carries on to the page behind it */
html body :is(#popupOverlay, #reviewModal, #hmGallery, #photoGalleryModal, #r7NavSheet, #hmAdminLogin, #hmSetPassword, #adminPanel, #chatbotContainer, #adminMainContent, .r7-chat-log) { overscroll-behavior: contain; }

/* 7.23 Round 10: Aftercare photo card (Site Control) */
#adminPanel.hm-admin .af-preview { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--a-surface, rgba(255, 255, 255, 0.03)); border: 1px solid var(--a-line, rgba(255, 255, 255, 0.08)); margin: 4px 0 14px; }
#adminPanel.hm-admin .af-preview :is(img, video) { width: 100%; height: 100%; object-fit: cover; display: block; }
#adminPanel.hm-admin .af-card.is-busy .af-preview { opacity: 0.55; transition: opacity 0.2s ease; }
#adminPanel.hm-admin .af-library { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; max-height: 260px; overflow: auto; margin: 12px 0 0; padding: 2px; }
#adminPanel.hm-admin .af-library[hidden] { display: none; }
#adminPanel.hm-admin .af-pick { aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: var(--a-surface, #1a1a1c); cursor: pointer; }
#adminPanel.hm-admin .af-pick:is(:hover, :focus-visible) { border-color: var(--p-accent); }
#adminPanel.hm-admin .af-pick :is(img, video) { width: 100%; height: 100%; object-fit: cover; display: block; }
#adminPanel.hm-admin .af-library-note { grid-column: 1 / -1; margin: 0; font-size: 0.84rem; color: var(--a-muted); }
#adminPanel.hm-admin .af-link-row { display: flex; gap: 8px; margin-top: 12px; }
#adminPanel.hm-admin .af-link-row .admin-input-v2 { flex: 1; min-width: 0; margin: 0; }
#adminPanel.hm-admin .af-link-row .hm-btn,
#adminPanel.hm-admin .af-reset { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px !important; white-space: nowrap; }
#adminPanel.hm-admin .af-reset { margin-top: 10px; }

/* 7.24 Round 10: gallery viewer swipe (photo follows the finger, neighbours peek in) */
.hm-gal-stage { --gal-dx: 0px; touch-action: pan-y pinch-zoom; overflow: hidden; }
.hm-gal-stage.is-swiping { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.hm-gal-stage .hm-gal-figure { translate: var(--gal-dx) 0; }
.hm-gal-peek {
    position: absolute; z-index: 1; display: none; align-items: center; justify-content: center;
    pointer-events: none; border-radius: 16px; overflow: hidden;
}
.hm-gal-stage.is-swiping .hm-gal-peek:not([hidden]) { display: flex; }
.hm-gal-peek.is-prev { translate: calc(var(--gal-dx) - var(--gal-w, 100vw)) 0; }
.hm-gal-peek.is-next { translate: calc(var(--gal-dx) + var(--gal-w, 100vw)) 0; }
.hm-gal-peek img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; }
.hm-gal-peek i { position: absolute; font-size: 2rem; color: rgba(255, 255, 255, 0.85); }
.hm-gal-stage.is-swiping .hm-gal-nav { opacity: 0; transition: opacity 0.15s ease; }
.hm-gal-stage.is-settling .hm-gal-figure,
.hm-gal-stage.is-settling .hm-gal-peek { transition: translate 0.34s cubic-bezier(0.22, 1, 0.36, 1); }
.hm-gal-stage.is-springing .hm-gal-figure,
.hm-gal-stage.is-springing .hm-gal-peek { transition: translate 0.45s cubic-bezier(0.34, 1.4, 0.64, 1); }
.hm-gal-stage.is-swiping .hm-gal-figure :is(img, video) { animation: none !important; }

/* ==========================================================================
   7.25 Round 10: Google-style review form, photos on review cards
   ========================================================================== */
html body #reviewModal .hm-review-public { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 0.82rem; color: var(--p-muted); }
html body #reviewModal .hm-review-public i { font-size: 0.8rem; }
html body #reviewModal .hm-rv-media-list { display: flex; flex-wrap: wrap; gap: 10px; }
html body #reviewModal .hm-rv-add {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    width: 96px; height: 96px; padding: 8px; border-radius: 14px; cursor: pointer;
    border: 1.5px dashed color-mix(in srgb, var(--p-accent) 55%, transparent);
    background: color-mix(in srgb, var(--p-accent) 7%, transparent); color: var(--p-text);
    font: 600 0.72rem/1.25 var(--p-font); text-align: center;
}
html body #reviewModal .hm-rv-add i { font-size: 1.2rem; color: var(--p-accent); }
html body #reviewModal .hm-rv-add:hover { background: color-mix(in srgb, var(--p-accent) 13%, transparent); }
html body #reviewModal .hm-rv-thumb { position: relative; width: 96px; height: 96px; border-radius: 14px; overflow: hidden; background: var(--p-surface-2); }
html body #reviewModal .hm-rv-thumb :is(img, video) { width: 100%; height: 100%; object-fit: cover; display: block; }
html body #reviewModal .hm-rv-thumb > i { position: absolute; inset: 0; margin: auto; width: 1em; height: 1em; color: #fff; font-size: 1.3rem; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); pointer-events: none; }
html body #reviewModal .hm-rv-remove {
    position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
    display: grid; place-items: center; background: rgba(10, 10, 11, 0.72); color: #fff; font-size: 0.8rem;
}
html body #reviewModal .hm-rv-media-note { margin: 8px 0 0; min-height: 1em; font-size: 0.8rem; color: #e8a93a; }
html body #reviewModal .hm-rv-media-note:empty { display: none; }
/* selected answers look like the other selected chips (soft tint, readable on hover) */
html body #reviewModal [data-review-single] .google-pill[aria-checked='true'] {
    background: var(--p-accent-soft); border-color: var(--p-accent); color: var(--p-text); font-weight: 600;
}
html body #reviewModal .hm-rv-google {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 16px; border-radius: 999px;
    border: 1px solid var(--p-line-strong); color: var(--p-text); font-weight: 600; font-size: 0.88rem; text-decoration: none;
}
html body #reviewModal .hm-rv-google:hover { border-color: var(--p-accent); }

/* public review cards */
html body .featured-review-card .hm-rv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
html body .featured-review-card .hm-rv-tags span { padding: 4px 10px; border-radius: 999px; font-size: 0.74rem; background: var(--p-surface-2); border: 1px solid var(--p-line); color: var(--p-muted); }
html body .featured-review-card .hm-rv-media { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
html body .featured-review-card .hm-rv-media :is(img, video) { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; display: block; flex: none; }
html body .featured-review-card .hm-rv-media > a { display: block; flex: none; border-radius: 10px; overflow: hidden; }

/* admin review cards */
#adminPanel.hm-admin .rv-comment.is-empty { color: var(--a-muted); font-style: italic; }
#adminPanel.hm-admin .rv-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
#adminPanel.hm-admin .rv-facts span { padding: 4px 10px; border-radius: 999px; font-size: 0.76rem; color: var(--a-text); background: color-mix(in srgb, var(--p-accent) 14%, transparent); }
#adminPanel.hm-admin .rv-media { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#adminPanel.hm-admin .rv-media :is(img, video) { width: 92px; height: 92px; object-fit: cover; border-radius: 10px; display: block; }

/* ==========================================================================
   7.26 Round 10: admin login (glass card over a blurred site photo)
   Built from emil-design-eng + impeccable + taste-skill rules: strong ease-out,
   0.97 press, motion only for feedback, labels above inputs, 16px inputs
   (no iOS zoom), solid fallback for reduced transparency, light + dark.
   ========================================================================== */
html body .hm-login {
    --lg-ease: cubic-bezier(0.23, 1, 0.32, 1);
    display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
    overflow-y: auto; background: #0c0c0d;
}
html body .hm-login-backdrop {
    position: fixed; inset: -48px; z-index: 0; pointer-events: none;
    background:
        radial-gradient(60% 50% at 50% 30%, color-mix(in srgb, var(--p-accent) 16%, transparent), transparent 70%),
        linear-gradient(180deg, rgba(12, 12, 13, 0.5), rgba(12, 12, 13, 0.9)),
        url('/assets/img/field-technician.webp') center / cover no-repeat;
    filter: blur(20px) saturate(115%);
}
html body .hm-login .hm-login-card {
    position: relative; z-index: 1; width: min(100%, 420px);
    display: flex; flex-direction: column; gap: 0; margin: auto;
    padding: 30px 28px 18px; border-radius: 24px; text-align: left;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)), rgba(20, 20, 22, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 30px 80px -30px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
}
html body .hm-login .hm-login-mark {
    width: 56px; height: 56px; margin: 0 0 18px; border-radius: 16px; display: grid; place-items: center;
    background: rgba(255, 255, 255, 0.05); border: 1px solid color-mix(in srgb, var(--p-accent) 45%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
html body .hm-login .hm-login-mark .hm-login-logo { width: 34px; height: 34px; margin: 0; border-radius: 9px; }
html body .hm-login .hm-login-card h2 { margin: 0; font-family: var(--r7-display, var(--p-font)); font-size: 1.7rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: #f2f0ec; }
html body .hm-login .hm-login-sub { margin: 6px 0 22px; font-size: 0.93rem; line-height: 1.5; color: #a8a5a0; }
html body .hm-login .hm-login-field { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
html body .hm-login .hm-login-field label { margin: 0; font-size: 0.82rem; font-weight: 600; color: #dcd9d4; }
html body .hm-login .hm-login-input { position: relative; display: flex; align-items: center; }
html body .hm-login .hm-login-input > i { position: absolute; left: 15px; z-index: 1; font-size: 0.88rem; color: #8b8883; pointer-events: none; transition: color 0.2s ease; }
html body .hm-login .hm-login-input:focus-within > i { color: var(--p-accent); }
html body .hm-login .hm-login-input input {
    width: 100%; height: 50px; margin: 0; padding: 0 48px 0 42px; border-radius: 13px;
    background: rgba(8, 8, 9, 0.55); border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f2f0ec; font: 500 1rem/1 var(--p-font);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
html body .hm-login .hm-login-input input:hover { border-color: rgba(255, 255, 255, 0.2); }
html body .hm-login .hm-login-input input:focus { outline: none; border-color: var(--p-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--p-accent) 22%, transparent); background: rgba(8, 8, 9, 0.7); }
html body .hm-login .hm-login-eye {
    position: absolute; right: 6px; z-index: 1; width: 38px; height: 38px; display: grid; place-items: center;
    border: 0; border-radius: 10px; background: transparent; color: #a09d98; cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.16s var(--lg-ease);
}
html body .hm-login .hm-login-eye:hover { color: #f2f0ec; background: rgba(255, 255, 255, 0.07); }
html body .hm-login .hm-login-eye:active { transform: scale(0.92); }
html body .hm-login .hm-login-eye:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 1px; }
html body .hm-login .hm-login-caps { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.8rem; font-weight: 600; color: #f2c46d; }
html body .hm-login .hm-login-caps[hidden] { display: none; }
html body .hm-login :is(.hm-login-error, .hm-login-ok) { margin: 0 0 14px; }
html body .hm-login .hm-login-error:not([hidden]) { animation: none; }
html body .hm-login .hm-login-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 50px; margin: 4px 0 0; border-radius: 13px; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em;
    transition: transform 0.16s var(--lg-ease), background-color 0.2s ease, opacity 0.2s ease;
}
html body .hm-login .hm-login-submit:active:not(:disabled) { transform: scale(0.97); }
html body .hm-login .hm-login-submit.is-busy:disabled { opacity: 0.88; cursor: progress; }
html body .hm-login .hm-login-spin { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; }
html body .hm-login .hm-login-submit.is-busy .hm-login-spin { display: inline-block; animation: hm-login-spin 0.6s linear infinite; }
@keyframes hm-login-spin { to { transform: rotate(360deg); } }
html body .hm-login .hm-login-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
html body .hm-login .hm-login-foot :is(.hm-login-link, .hm-login-cancel) { height: 40px; padding: 0 4px; font-size: 0.88rem; }
html body .hm-login .hm-login-cancel { display: inline-flex; align-items: center; gap: 7px; }
html body .hm-login .hm-login-cancel i { font-size: 0.78rem; transition: transform 0.2s var(--lg-ease); }
@media (hover: hover) and (pointer: fine) {
    html body .hm-login .hm-login-cancel:hover i { transform: translateX(-3px); }
}
@media (prefers-reduced-motion: no-preference) {
    html body .hm-login .hm-login-card.is-shake { animation: hm-login-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
}
@media (prefers-reduced-motion: reduce) {
    html body .hm-login .hm-login-card.is-shake { border-color: rgba(224, 73, 60, 0.6); }
}
@keyframes hm-login-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(3px); }
    30%, 50%, 70% { transform: translateX(-6px); }
    40%, 60% { transform: translateX(6px); }
}
/* light mode */
html[data-theme='light'] body .hm-login { background: #f3f2ef; }
html[data-theme='light'] body .hm-login-backdrop {
    background:
        radial-gradient(60% 50% at 50% 30%, color-mix(in srgb, var(--p-accent) 14%, transparent), transparent 70%),
        linear-gradient(180deg, rgba(246, 245, 242, 0.55), rgba(246, 245, 242, 0.88)),
        url('/assets/img/field-technician.webp') center / cover no-repeat;
}
html[data-theme='light'] body .hm-login .hm-login-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.7));
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: inset 0 1px 0 #fff, 0 30px 70px -30px rgba(40, 32, 24, 0.35), 0 1px 3px rgba(40, 32, 24, 0.08);
}
html[data-theme='light'] body .hm-login .hm-login-card h2 { color: #141414; }
html[data-theme='light'] body .hm-login .hm-login-sub { color: #5b5853; }
html[data-theme='light'] body .hm-login .hm-login-field label { color: #2e2d2a; }
html[data-theme='light'] body .hm-login .hm-login-mark { background: #fff; }
html[data-theme='light'] body .hm-login .hm-login-input input { background: #fff; border-color: rgba(20, 20, 20, 0.14); color: #141414; }
html[data-theme='light'] body .hm-login .hm-login-input input:focus { background: #fff; }
html[data-theme='light'] body .hm-login .hm-login-input > i,
html[data-theme='light'] body .hm-login .hm-login-eye { color: #6f6c67; }
html[data-theme='light'] body .hm-login .hm-login-eye:hover { color: #141414; background: rgba(20, 20, 20, 0.06); }
html[data-theme='light'] body .hm-login .hm-login-caps { color: #9a6a00; }
html[data-theme='light'] body .hm-login .hm-login-cancel { color: #5b5853; }
html[data-theme='light'] body .hm-login .hm-login-cancel:hover { color: #141414; }
@media (prefers-reduced-transparency: reduce) {
    html body .hm-login .hm-login-card { background: #19191b; backdrop-filter: none; -webkit-backdrop-filter: none; }
    html[data-theme='light'] body .hm-login .hm-login-card { background: #fff; }
}

/* ==========================================================================
   7.27 Round 10: one switch for every on/off control (admin + site)
   Thumb springs across, squashes while pressed, 44px tap target, keyboard.
   ========================================================================== */
:is(#adminPanel.hm-admin, html body) .hm-switch {
    --sw-w: 46px; --sw-h: 28px; --sw-pad: 3px;
    --sw-thumb: calc(var(--sw-h) - 2 * var(--sw-pad));
    --sw-thumb-w: var(--sw-thumb);
    position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
    cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
:is(#adminPanel.hm-admin, html body) .hm-switch.is-compact { --sw-w: 40px; --sw-h: 24px; gap: 10px; }
:is(#adminPanel.hm-admin, html body) .hm-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
:is(#adminPanel.hm-admin, html body) .hm-switch-track {
    position: relative; flex: none; width: var(--sw-w); height: var(--sw-h); border-radius: 999px;
    background: #2c2c30;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 1px 2px rgba(0, 0, 0, 0.35);
    transition: background-color 0.22s ease, box-shadow 0.22s ease;
}
:is(#adminPanel.hm-admin, html body) .hm-switch-thumb {
    position: absolute; top: var(--sw-pad); left: var(--sw-pad);
    width: var(--sw-thumb-w); height: var(--sw-thumb); border-radius: 999px;
    background: #f5f3ef; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 3px 8px rgba(0, 0, 0, 0.18);
    transform: translateX(0);
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
:is(#adminPanel.hm-admin, html body) .hm-switch input:checked + .hm-switch-track { background: var(--p-accent); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), inset 0 1px 2px rgba(0, 0, 0, 0.18); }
:is(#adminPanel.hm-admin, html body) .hm-switch input:checked + .hm-switch-track .hm-switch-thumb { transform: translateX(calc(var(--sw-w) - var(--sw-thumb-w) - 2 * var(--sw-pad))); }
:is(#adminPanel.hm-admin, html body) .hm-switch:active { --sw-thumb-w: calc(var(--sw-thumb) + 6px); }
:is(#adminPanel.hm-admin, html body) .hm-switch input:focus-visible + .hm-switch-track { outline: 2px solid var(--p-accent); outline-offset: 3px; }
:is(#adminPanel.hm-admin, html body) .hm-switch input:disabled + .hm-switch-track { opacity: 0.45; }
@media (hover: hover) and (pointer: fine) {
    :is(#adminPanel.hm-admin, html body) .hm-switch:hover input:not(:checked) + .hm-switch-track { background: #36363b; }
}
:is(#adminPanel.hm-admin, html body) .hm-switch-label { font-size: 0.9rem; font-weight: 600; line-height: 1.3; color: var(--a-text, #f0eeea); }
:is(#adminPanel.hm-admin, html body) .hm-switch.is-compact .hm-switch-label { font-size: 0.84rem; font-weight: 500; }
html[data-theme='light'] :is(#adminPanel.hm-admin, body) .hm-switch-track { background: #d6d4cf; box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.06), inset 0 1px 2px rgba(20, 20, 20, 0.12); }
html[data-theme='light'] :is(#adminPanel.hm-admin, body) .hm-switch-thumb { background: #fff; }
@media (prefers-reduced-motion: reduce) {
    :is(#adminPanel.hm-admin, html body) .hm-switch-thumb { transition: transform 0.15s ease-out; }
    :is(#adminPanel.hm-admin, html body) .hm-switch:active { --sw-thumb-w: var(--sw-thumb); }
}

/* review form header: compact on phones (round 10) */
@media (max-width: 520px) {
    html body #reviewModal .hm-review-brand h2 { font-size: 1.12rem; line-height: 1.25; letter-spacing: -0.015em; }
    html body #reviewModal .hm-review-brand .hm-review-public { font-size: 0.78rem; }
}

/* =====================================================================
   ROUND 11 (2026-10-01) - r11- prefix
   ===================================================================== */

/* 11.1 Featured Work on phones: one sliding track (like desktop), swipe by touch. */
@media (max-width: 768px) {
    html body #featured-work .featured-loop-viewport {
        overflow: hidden;
        scroll-snap-type: none;
        scroll-behavior: auto;
        touch-action: pan-y;
    }
    html body #featured-work .featured-loop-track {
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    html body #featured-work .featured-loop.no-transition .featured-loop-track { transition: none; }
    html body #featured-work .featured-loop-slide { scroll-snap-align: none; }
}

/* 11.2 Photos and videos in full, site-wide (premium.js initFullMedia adds the classes).
   Never cropped: the picture is contained; a blurred copy of it fills the space around. */
html body .r11-fit-host { overflow: hidden; isolation: isolate; background-color: #0d0d0e; }
html body .r11-fit-host > .r11-fill {
    position: absolute;
    inset: -24px;
    z-index: -1;
    background-size: cover;
    background-position: center;
    filter: blur(22px) saturate(1.15) brightness(0.62);
    transform: scale(1.08);
    pointer-events: none;
}
html body .r11-fit-host > .r11-fit {
    object-fit: contain !important;
    object-position: center !important;
}
@media (prefers-reduced-transparency: reduce) {
    html body .r11-fit-host > .r11-fill { filter: blur(22px) brightness(0.35); }
}
/* Featured Work: the category chip sat on top of the title (shared .project-category
   rule pins it absolutely). Keep it in the flow, above the title. */
html body #featured-work .featured-card-content > .featured-card-category {
    position: static;
    inset: auto;
    align-self: flex-start;
    display: inline-flex;
    width: max-content;
    margin: 0 0 10px;
}

/* 11.4 Aftercare: no built-in photo. With nothing saved the photo area is hidden. */
html body #about .about-visual-image-wrap.integrity-empty { display: none; }
#adminPanel.hm-admin .af-preview .af-empty {
    margin: 0;
    height: 100%;
    display: grid;
    place-content: center;
    gap: 8px;
    padding: 16px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--a-muted, rgba(245, 244, 241, 0.7));
}
#adminPanel.hm-admin .af-preview .af-empty i { font-size: 1.4rem; opacity: 0.6; }

/* 11.5 Top advert = a small square paper note that drops from the top (calm, not a bar).
   Floats under the menu on the right; never pushes the menu. Tones: orange (cream paper,
   orange tape), dark (charcoal paper), light (white paper). */
html body .r7-topbar {
    --tb-bg: #fbf6ea;
    --tb-fg: #1d1b16;
    --tb-btn-bg: var(--p-accent);
    --tb-btn-fg: var(--p-on-accent, #140c05);
    --tb-tape: color-mix(in srgb, var(--p-accent) 62%, transparent);
    left: auto;
    right: 16px;
    top: 86px;
    width: min(232px, calc(100vw - 32px));
    min-height: 0;
    display: block;
    padding: 20px 16px 14px;
    border: 0;
    border-radius: 3px 3px 12px 3px;
    background: linear-gradient(170deg, color-mix(in srgb, var(--tb-bg) 100%, #fff 0%) 0%, color-mix(in srgb, var(--tb-bg) 92%, #000) 100%);
    color: var(--tb-fg);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), 0 14px 28px -12px rgba(0, 0, 0, 0.55);
    transform-origin: 50% 0;
    transform: translateY(calc(-100% - 120px)) rotate(-7deg);
    opacity: 0;
    transition: transform 0.38s cubic-bezier(0.55, 0, 0.75, 0.2), opacity 0.3s ease, top 0.45s var(--r7-ease-out);
}
html body .r7-topbar[data-tone='dark'] { --tb-bg: #1e1e20; --tb-fg: #f2f1ee; border: 0; }
html body .r7-topbar[data-tone='light'] { --tb-bg: #ffffff; --tb-fg: #161617; --tb-btn-bg: #161617; --tb-btn-fg: #fff; --tb-tape: rgba(120, 120, 120, 0.28); border: 0; }
html body .r7-topbar::before {
    content: '';
    position: absolute;
    top: -9px;
    left: 50%;
    width: 58px;
    height: 18px;
    margin-left: -29px;
    background: var(--tb-tape);
    border-radius: 2px;
    transform: rotate(-4deg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
html body .r7-topbar.is-in {
    opacity: 1;
    transform: rotate(-1.5deg);
    transition: transform 0.75s cubic-bezier(0.22, 1.25, 0.36, 1), opacity 0.25s ease, top 0.45s var(--r7-ease-out);
}
/* when the menu hides on scroll, the note moves up into its place instead of vanishing */
html body:has(.main-nav.is-hidden) .r7-topbar.is-in:not(.is-preview) { transform: rotate(-1.5deg); top: 16px; }
html body .r7-topbar-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
html body .r7-topbar-dot { display: none; }
html body .r7-topbar-text {
    padding-right: 14px;
    white-space: normal;
    font: 600 0.9rem/1.38 var(--p-font);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}
html body .r7-topbar-cta { height: 30px; font-size: 0.8rem; }
html body .r7-topbar-close { top: 6px; right: 6px; margin-top: 0; width: 28px; height: 28px; font-size: 0.8rem; opacity: 0.7; }
html body .r7-topbar-close:hover { opacity: 1; }
@media (max-width: 640px) {
    html body .r7-topbar { top: 78px; right: 12px; width: min(196px, calc(100vw - 24px)); padding: 18px 14px 12px; }
    html body .r7-topbar-text { font-size: 0.82rem; -webkit-line-clamp: 4; }
    html body .r7-topbar-close { right: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    html body .r7-topbar, html body .r7-topbar.is-in { transform: rotate(-1.5deg); transition: opacity 0.3s ease; }
}
/* admin preview: the note sits still in the middle of the preview box */
#adminPanel .r7-tb-preview { display: grid; place-items: center; padding: 26px 16px 18px; overflow: visible; }
#adminPanel .r7-tb-preview .r7-topbar { position: relative; top: auto; right: auto; left: auto; opacity: 1; transform: rotate(-1.5deg); }
/* square, like a sticky note: grows only if the message is long */
html body .r7-topbar { width: 200px; aspect-ratio: 1 / 1; display: flex; flex-direction: column; }
html body .r7-topbar-inner { flex: 1 1 auto; }
html body .r7-topbar-cta { margin-top: auto; }
@media (max-width: 640px) {
    html body .r7-topbar { width: 168px; }
}

/* 11.6 Switches in colour: green = on, red = off. The knob also shows a tick / cross,
   so on/off never depends on colour alone (red-green colour blindness). */
:is(#adminPanel.hm-admin, html body) .hm-switch { --sw-on: #22a55b; --sw-off: #d0453c; }
:is(#adminPanel.hm-admin, html body) .hm-switch .hm-switch-track,
html[data-theme='light'] :is(#adminPanel.hm-admin, body) .hm-switch .hm-switch-track {
    background: var(--sw-off);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
:is(#adminPanel.hm-admin, html body) .hm-switch input:checked + .hm-switch-track,
html[data-theme='light'] :is(#adminPanel.hm-admin, body) .hm-switch input:checked + .hm-switch-track { background: var(--sw-on); }
@media (hover: hover) and (pointer: fine) {
    :is(#adminPanel.hm-admin, html body) .hm-switch:hover input:not(:checked) + .hm-switch-track { background: color-mix(in srgb, var(--sw-off) 88%, #fff); }
    :is(#adminPanel.hm-admin, html body) .hm-switch:hover input:checked + .hm-switch-track { background: color-mix(in srgb, var(--sw-on) 88%, #fff); }
}
:is(#adminPanel.hm-admin, html body) .hm-switch-thumb { display: grid; place-items: center; background: #fff; }
:is(#adminPanel.hm-admin, html body) .hm-switch-thumb::after {
    content: '\2715';
    font: 700 calc(var(--sw-thumb) * 0.45) / 1 system-ui, sans-serif;
    color: var(--sw-off);
    transition: color 0.2s ease;
}
:is(#adminPanel.hm-admin, html body) .hm-switch input:checked + .hm-switch-track .hm-switch-thumb::after { content: '\2713'; color: var(--sw-on); }
:is(#adminPanel.hm-admin, html body) .hm-switch input:focus-visible + .hm-switch-track { outline-color: var(--p-accent); }

/* 11.7 Review spam trap: off-screen, never seen or tabbed to by people */
html body .hm-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 11.9 Galleries: add files from the Media Library */
#adminPanel.hm-admin .sg-lib { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; grid-column: 1 / -1; }
#adminPanel.hm-admin .sg-lib-help { font-size: 0.82rem; color: var(--a-muted, #a09d98); }
#adminPanel.hm-admin .sg-lib-panel { margin: 4px 0 18px; padding: 14px; border: 1px solid var(--a-line, rgba(255, 255, 255, 0.08)); border-radius: 14px; background: var(--a-panel, #151517); }
#adminPanel.hm-admin .sg-lib-note { margin: 0; font-size: 0.86rem; color: var(--a-muted, #a09d98); }
#adminPanel.hm-admin .sg-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; max-height: 340px; overflow: auto; overscroll-behavior: contain; padding: 2px; }
#adminPanel.hm-admin .sg-lib-item { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; cursor: pointer; background: #0d0d0e; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color 0.15s ease, transform 0.15s var(--r7-ease-out, ease); }
#adminPanel.hm-admin .sg-lib-item:active { transform: scale(0.97); }
#adminPanel.hm-admin .sg-lib-item :is(img, video) { width: 100%; height: 100%; object-fit: cover; display: block; }
#adminPanel.hm-admin .sg-lib-item input { position: absolute; top: 6px; left: 6px; z-index: 2; width: 20px; height: 20px; margin: 0; accent-color: var(--p-accent); }
#adminPanel.hm-admin .sg-lib-item:has(input:checked) { outline-color: var(--p-accent); }
#adminPanel.hm-admin .sg-lib-item.is-added { cursor: default; opacity: 0.5; }
#adminPanel.hm-admin .sg-lib-added { position: absolute; inset: auto 0 0; padding: 4px 6px; font-size: 0.7rem; font-weight: 600; text-align: center; background: rgba(0, 0, 0, 0.7); color: #fff; }
#adminPanel.hm-admin .sg-lib-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
#adminPanel.hm-admin .sg-lib-msg { font-size: 0.82rem; color: var(--a-muted, #a09d98); }
#adminPanel.hm-admin :is(.sg-lib, .sg-lib-actions) .hm-btn { min-height: 38px; padding: 0 14px; gap: 8px; }

/* 11.11 Theme: Auto (device), Light, Dark. The icon shows the current mode. */
html body .theme-toggle .theme-icon { opacity: 0; transform: scale(0.6) rotate(-30deg); transition: opacity 0.2s ease, transform 0.3s var(--r7-ease-out, ease); }
html[data-theme-mode='dark'] body .theme-toggle .theme-icon--moon,
html[data-theme-mode='light'] body .theme-toggle .theme-icon--sun,
html[data-theme-mode='system'] body .theme-toggle .theme-icon--auto,
html:not([data-theme-mode]) body .theme-toggle .theme-icon--auto { opacity: 1; transform: none; }

/* 11.13 Review cards redesign: nothing is cut off any more.
   Was: fixed 220 px height, so the comment (the only shrinkable part) collapsed to
   nothing and photos / owner reply were hidden. Now: the card grows with its content,
   cards in the row share the tallest height, and the header reads like a person. */
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .featured-review-card {
    min-height: 236px !important;
    max-height: none !important;
    height: auto !important;
    width: min(340px, 82vw);
    max-width: 340px !important;
    padding: 20px !important;
    gap: 12px;
}
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .featured-review-card > * { flex-shrink: 0; margin: 0; }
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .featured-review-meta {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 2px;
    padding-right: 40px; /* room for the share button */
}
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .featured-review-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .reviewer-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; }
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .featured-review-meta-copy { display: flex; flex-direction: column-reverse; min-width: 0; }
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .reviewer-name {
    color: var(--p-text) !important;
    font: 650 0.98rem/1.25 var(--p-font) !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body :is(#reviews, .modern-review-section) .featured-reviews-feed :is(.review-source, .review-time) {
    font: 500 0.76rem/1.3 var(--p-font) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .review-time { position: static !important; padding-left: 52px; }
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .featured-review-stars { font-size: 1rem; letter-spacing: 2px; }
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .featured-review-card p {
    font-size: 0.95rem;
    line-height: 1.55;
    -webkit-line-clamp: 5 !important;
}
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .featured-review-card .hm-rv-tags { margin-top: 0; }
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .featured-review-card .hm-rv-media { margin-top: 0; }
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .featured-review-card .hm-rv-media :is(img, video) { width: 72px; height: 72px; }
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .featured-review-response {
    margin-top: auto !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-left: 3px solid var(--p-accent) !important;
    border-radius: 0 10px 10px 0;
    background: var(--p-surface-2);
}
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .featured-review-response-label {
    font: 650 0.72rem/1.2 var(--p-font) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--p-accent) !important;
}
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .featured-review-response p { font-size: 0.86rem !important; color: var(--p-muted) !important; -webkit-line-clamp: 3 !important; }
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .featured-reviews-track { align-items: stretch !important; }
/* owner replies were hidden site-wide by an old style.css rule although Admin says they show */
html body :is(#reviews, .modern-review-section) .featured-reviews-feed .featured-review-response { display: block !important; }

/* 12.2 Site logo card (Site Control): the logo on a dark and a light tile */
#adminPanel.hm-admin .lg-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 14px; }
#adminPanel.hm-admin .lg-tile { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border-radius: 12px; border: 1px solid var(--a-line, rgba(255, 255, 255, 0.08)); }
#adminPanel.hm-admin .lg-tile.is-dark { background: #111112; }
#adminPanel.hm-admin .lg-tile.is-light { background: #f4f2ef; }
#adminPanel.hm-admin .lg-tile img { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; }
#adminPanel.hm-admin .lg-card.is-busy .lg-preview { opacity: 0.55; transition: opacity 0.2s ease; }

/* ============================================================
   ROUND 14
   ============================================================ */
/* 14.1 Homepage sections card (Site Control): numbered rows, arrows, Show switch */
#adminPanel.hm-admin .sc-list { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 6px; container-type: inline-size; }
#adminPanel.hm-admin .sc-row {
    display: flex; align-items: center; gap: 12px;
    min-height: 56px; padding: 8px 10px 8px 12px;
    border: 1px solid var(--a-line-2); border-radius: 12px;
    background: var(--a-panel-2);
    transition: opacity 0.2s ease, border-color 0.2s ease;
}
#adminPanel.hm-admin .sc-pos {
    flex: none; width: 26px; height: 26px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font: 600 0.8rem/1 var(--p-font); font-variant-numeric: tabular-nums;
    color: var(--a-text); background: var(--a-raise, rgba(255, 255, 255, 0.06));
}
#adminPanel.hm-admin .sc-name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 0.92rem; color: var(--a-text); }
#adminPanel.hm-admin .sc-name small { display: block; margin-top: 2px; font-weight: 400; font-size: 0.78rem; line-height: 1.35; color: var(--a-muted); }
#adminPanel.hm-admin .sc-row.is-locked { background: transparent; border-style: dashed; }
#adminPanel.hm-admin .sc-lock { flex: none; color: var(--a-muted); font-size: 0.85rem; margin-right: 6px; }
#adminPanel.hm-admin .sc-row.is-hidden .sc-pos,
#adminPanel.hm-admin .sc-row.is-hidden .sc-name { opacity: 0.55; }
#adminPanel.hm-admin .sc-ctrl { flex: none; display: inline-flex; align-items: center; gap: 6px; }
#adminPanel.hm-admin .sc-move {
    width: 40px; height: 40px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--a-line-2); background: transparent; color: var(--a-text);
    padding: 0; min-height: 0; min-width: 0;
    cursor: pointer; transition: background-color 0.15s ease, transform 0.1s ease;
}
#adminPanel.hm-admin .sc-move:hover:not(:disabled) { background: var(--a-raise, rgba(255, 255, 255, 0.06)); }
#adminPanel.hm-admin .sc-move:active:not(:disabled) { transform: scale(0.94); }
#adminPanel.hm-admin .sc-move:disabled { opacity: 0.28; cursor: default; }
#adminPanel.hm-admin .sc-move:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
#adminPanel.hm-admin .sc-ctrl .hm-switch { margin-left: 6px; }
/* narrow card (phone, or the side column on desktop): controls go on their own line */
@container (max-width: 460px) {
    #adminPanel.hm-admin .sc-row { flex-wrap: wrap; row-gap: 8px; }
    #adminPanel.hm-admin .sc-ctrl { width: 100%; padding-left: 38px; }
    #adminPanel.hm-admin .sc-ctrl .hm-switch { margin-left: auto; }
    #adminPanel.hm-admin .sc-row.is-locked { flex-wrap: nowrap; }
}

/* ============================================================
   ROUND 17
   ============================================================ */
/* 17.1 Top advert note: optional picture above the message (flyer or offer photo).
   The whole picture is shown (contain), never cropped, so text on a flyer stays readable. */
html body .r7-topbar.has-img { aspect-ratio: auto; }
html body .r7-topbar-img {
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    background: color-mix(in srgb, var(--tb-fg) 6%, transparent);
}
html body .r7-topbar-img img { display: block; width: 100%; height: auto; max-height: 150px; object-fit: contain; }
html body .r7-topbar.has-img .r7-topbar-inner { gap: 10px; }
html body .r7-topbar.has-img .r7-topbar-close {
    background: color-mix(in srgb, var(--tb-bg) 85%, transparent);
    border-radius: 50%;
    opacity: 0.9;
    z-index: 1;
}
@media (max-width: 640px) {
    html body .r7-topbar-img img { max-height: 120px; }
}
/* admin: picture field */
#adminPanel .r7-tb-image-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#adminPanel .r7-tb-image-row input[type='file'] { flex: 1 1 220px; min-width: 0; }
#adminPanel .r7-tb-image-row [hidden] { display: none !important; }
#adminPanel .r7-tb-image-help { display: block; margin-top: 6px; color: var(--a-muted, #a09d98); font-size: 0.8rem; line-height: 1.4; }

/* ============================================================
   ROUND 18
   ============================================================ */
/* 18.1 Services grid with the Smart Home card (9 cards, no gaps).
   Desktop (4 columns): CCTV 2x2 with Electrical, Networking, Fence, AC beside it;
   then Solar + Blinds; then Gates + Smart Home (each wide). Tablet: CCTV full width,
   the other 8 in pairs. Phone: one column (unchanged). */
html body #services #service-solar,
html body #services #service-blindcurtain,
html body #services #service-gates,
html body #services #service-smarthome { grid-column: span 2; }
@media (max-width: 1024px) {
    html body #services #service-solar,
    html body #services #service-blindcurtain,
    html body #services #service-gates,
    html body #services #service-smarthome { grid-column: span 1; }
}
@media (max-width: 640px) {
    html body #services .services-grid > .card { grid-column: 1 / -1; }
}

/* 18.2 Browser controls follow the brand colour (owner: "Select Service Card popup colour
   doesn't match the brand colour, not only there"). The drawn admin already used the brand;
   what didn't were the browser's own parts: the open list of a dropdown (Windows blue),
   ticks, radios, sliders and date pickers. */
html { accent-color: var(--p-accent); }
/* Dropdowns: Chrome/Edge 135+ let the open list be styled (appearance: base-select).
   Other browsers (e.g. Safari on iPhone) keep their own list. */
@supports (appearance: base-select) {
    html body select:not([hidden]):not(.hm-sr-select),
    html body select:not([hidden]):not(.hm-sr-select)::picker(select) { appearance: base-select !important; -webkit-appearance: base-select !important; }
    html body select:not(.hm-sr-select)::picker-icon { display: none; } /* the site draws its own arrow */
    html body select:not(.hm-sr-select)::picker(select) {
        margin-top: 6px;
        padding: 6px;
        max-height: min(360px, 60vh);
        border: 1px solid var(--p-line-strong, rgba(255, 255, 255, 0.16));
        border-radius: 12px;
        background: var(--p-surface, #17171a);
        color: var(--p-text, #f2f1ee);
        box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.55);
    }
    #adminPanel.hm-admin select::picker(select) { background: var(--a-panel-2); color: var(--a-text); border-color: var(--a-line-2); }
    html body select:not(.hm-sr-select) option {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 38px;
        padding: 8px 12px;
        border-radius: 8px;
        font: 500 0.9rem/1.3 var(--p-font);
        color: inherit;
        background: transparent;
        cursor: pointer;
    }
    html body select:not(.hm-sr-select) option:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--p-accent) 18%, transparent); outline: none; }
    html body select:not(.hm-sr-select) option:checked { background: var(--p-accent); color: var(--p-on-accent); font-weight: 600; }
    html body select:not(.hm-sr-select) option::checkmark { color: currentColor; }
    html body select:not(.hm-sr-select) option:disabled { opacity: 0.45; cursor: default; }
}

/* ============================================================
   ROUND 19
   ============================================================ */
/* 19.1 Review form: an old opening animation (style.css) capped the questions at 620px, so on
   phones the questions spilled out of the form and any message landed on top of them. */
html body #reviewModal .review-form.is-composer-ready :is(.review-composer, .review-shared-fields) { max-height: none; overflow: visible; }
/* old dark-only rule made the service choices white on light paper */
html body #reviewModal .review-service-option span { color: inherit; }

/* 19.2 Problem card under the Post button: icon, what happened, what to do */
html body #reviewModal .form-success.is-error {
    margin-top: 14px;
    padding: 14px;
    text-align: left;
    font-weight: 400;
    border-radius: 16px;
    background: color-mix(in srgb, #d0453c 8%, var(--p-surface, #fff));
    border: 1px solid color-mix(in srgb, #d0453c 35%, transparent);
    color: var(--p-text);
}
html body #reviewModal .hm-rv-notice { display: flex; align-items: flex-start; gap: 12px; }
html body #reviewModal .hm-rv-notice-icon { flex: none; margin-top: 1px; font-size: 1.25rem; color: #d0453c; }
html body #reviewModal .hm-rv-notice-copy { display: grid; gap: 3px; min-width: 0; }
html body #reviewModal .hm-rv-notice-copy strong { font: 700 0.98rem/1.3 var(--p-font); color: var(--p-text); }
html body #reviewModal .hm-rv-notice-copy span { font-size: 0.88rem; line-height: 1.45; color: var(--p-muted, #6b6862); }
html body #reviewModal .hm-rv-notice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-left: 32px; }
html body #reviewModal .hm-rv-notice-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 16px; border-radius: 999px;
    border: 1px solid var(--p-line-strong); background: transparent; color: var(--p-text);
    font: 600 0.88rem var(--p-font); cursor: pointer;
    transition: background-color 0.15s ease, transform 0.12s ease;
}
html body #reviewModal .hm-rv-notice-btn.is-primary { background: var(--p-accent); border-color: var(--p-accent); color: var(--p-on-accent); }
html body #reviewModal .hm-rv-notice-btn:active { transform: scale(0.97); }
html body #reviewModal .hm-rv-notice-btn:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
@media (max-width: 420px) {
    html body #reviewModal .hm-rv-notice-actions { padding-left: 0; }
    html body #reviewModal .hm-rv-notice-btn { flex: 1 1 auto; }
}
/* the old ".form-success i" rule made every icon in the card big and on its own line */
html body #reviewModal .form-success.is-error .hm-rv-notice-btn i { display: inline-block; margin: 0; font-size: 0.9em; color: inherit; }
html body #reviewModal .form-success.is-error .hm-rv-notice-icon { display: block; margin: 1px 0 0; font-size: 1.25rem; color: #d0453c; }

/* ============================================================
   ROUND 20
   ============================================================ */
/* 20.1 Admin portal follows Light / Dark / Auto (it was dark-only). Light = warm paper,
   same calm, flat look; the brand colour stays the accent. */
html[data-theme='light'] #adminPanel.hm-admin {
    --a-bg: #f3f1ec;
    --a-panel: #ffffff;
    --a-panel-2: #f8f6f2;
    --a-raise: #efece6;
    --a-line: rgba(28, 26, 22, 0.08);
    --a-line-2: rgba(28, 26, 22, 0.14);
    --a-line-strong: rgba(28, 26, 22, 0.22);
    --a-text: #1c1a16;
    --a-muted: #66625b;
    --a-soft: #45423c;
    --a-ok: #1d8a4b;
    --a-warn: #9a6200;
    --a-bad: #c4392e;
    color-scheme: light;
}
html[data-theme='light'] #adminPanel.hm-admin #adminMainContent :is(input, textarea, select) { color-scheme: light; }
html[data-theme='light'] #adminPanel.hm-admin #adminMainContent :is(input, textarea)::placeholder { color: #8a867f; }

/* 20.2 Light / Dark / Auto switch in the sidebar */
#adminPanel.hm-admin .hm-admin-theme {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin: 0 0 10px;
    padding: 3px;
    border-radius: 12px;
    background: var(--a-raise, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--a-line);
}
#adminPanel.hm-admin .hm-admin-theme button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 36px; padding: 0 6px; border: 0; border-radius: 9px;
    background: transparent; color: var(--a-muted);
    font: 600 0.78rem var(--p-font); cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
#adminPanel.hm-admin .hm-admin-theme button:hover { color: var(--a-text); }
#adminPanel.hm-admin .hm-admin-theme button[aria-pressed='true'] {
    background: var(--a-panel); color: var(--a-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 0 1px var(--a-line-2);
}
#adminPanel.hm-admin .hm-admin-theme button[aria-pressed='true'] i { color: var(--p-accent); }
#adminPanel.hm-admin .hm-admin-theme button:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 1px; }
/* red text for delete buttons and errors: soft pink on dark, deep red on light */
#adminPanel.hm-admin { --a-bad-text: #ff9a8f; }
html[data-theme='light'] #adminPanel.hm-admin { --a-bad-text: #b42318; }
/* round 18 dropdowns: keep the chosen value vertically centred in the closed box */
@supports (appearance: base-select) {
    html body select:not([hidden]):not(.hm-sr-select) { display: inline-flex; align-items: center; }
    #adminPanel.hm-admin select:not([hidden]) { display: flex; }
}
/* show the dropdown arrow (the drawn one doesn't render on styled dropdowns) */
@supports (appearance: base-select) {
    html body select:not(.hm-sr-select)::picker-icon {
        display: block;
        color: var(--a-muted, var(--p-muted, #8f8c87));
        margin-left: auto;
        padding-left: 8px;
        transition: rotate 0.2s ease;
    }
    html body select:not(.hm-sr-select):open::picker-icon { rotate: 180deg; }
    html body select:not([hidden]):not(.hm-sr-select) { background-image: none !important; padding-right: 12px !important; }
}
/* logo card: while it saves or redraws the link preview picture, its buttons are visibly paused
   (a click then used to be ignored without a sign) */
#adminPanel.hm-admin .lg-card.is-busy [data-lg-action] { opacity: 0.55; pointer-events: none; cursor: progress; }

/* ==========================================================================
   2026-10-02: service photo grid
   A service card (Services section) or a Work Showcase card opens the gallery
   viewer as a grid of all that service's photos; a tile opens the photo, the
   grid button in the top bar goes back. Hooks: .hm-gal.is-grid, #hmGalGrid,
   [data-gal-tile], [data-gal="grid"], .hm-svc-open, .hm-svc-hint.
   ========================================================================== */
html body #services .services-grid > .card.hm-svc-open { cursor: pointer; }
html body #services .services-grid > .card.hm-svc-open:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 3px; }
html body #services .services-grid > .card .hm-svc-hint {
    position: relative; z-index: 2;
    display: inline-flex; align-items: center; gap: 7px;
    margin: 0 0 14px;
    font-size: 0.84rem; font-weight: 600; color: var(--p-accent);
    transition: gap 0.25s var(--p-ease-out);
}
html body #services .services-grid > .card .hm-svc-hint i { font-size: 0.8em; }
html body #services .services-grid > .card.hm-svc-open:hover .hm-svc-hint { gap: 10px; }

.hm-gal.is-grid { grid-template-rows: auto minmax(0, 1fr) auto; }
.hm-gal.is-grid .hm-gal-stage,
.hm-gal.is-grid .hm-gal-thumbs { display: none; }
.hm-gal.is-grid .hm-gal-grid { grid-row: 2; }
.hm-gal.is-grid .hm-gal-bottom { grid-row: 3; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.hm-gal-grid[hidden], .hm-gal-btn[hidden] { display: none; }
.hm-gal-grid {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 44vw), 1fr));
    grid-auto-rows: max-content; gap: 10px; align-content: start;
    padding: 6px clamp(12px, 3vw, 28px) 16px;
    scrollbar-width: thin;
}
.hm-gal-tile {
    position: relative; display: block; width: 100%; aspect-ratio: 4 / 3;
    padding: 0; margin: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in;
    background: rgba(255, 255, 255, 0.06); color: #f5f4f1;
}
.hm-gal-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--p-ease-out), opacity 0.2s ease; }
.hm-gal-tile-blank { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.08); }
.hm-gal-tile-play {
    position: absolute; left: 50%; top: 50%; translate: -50% -50%;
    width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(9, 9, 10, 0.6); border: 1px solid rgba(255, 255, 255, 0.25); font-size: 0.95rem;
}
.hm-gal-tile-cap {
    position: absolute; inset: auto 0 0 0; padding: 22px 10px 8px; text-align: left;
    font-size: 0.78rem; line-height: 1.3; color: #f5f4f1;
    background: linear-gradient(0deg, rgba(9, 9, 10, 0.85), rgba(9, 9, 10, 0));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-gal-tile:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
@media (hover: hover) {
    .hm-gal-tile:hover img { transform: scale(1.05); }
}
.hm-gal-tile:active img { opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
    .hm-gal.is-open.is-grid .hm-gal-tile { animation: hm-gal-tile-in 0.45s var(--p-ease-out) both; animation-delay: calc(var(--i, 0) * 35ms); }
}
@keyframes hm-gal-tile-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 560px) {
    .hm-gal-grid { gap: 6px; padding-inline: 8px; }
    .hm-gal-tile { border-radius: 10px; aspect-ratio: 1; }
    .hm-gal.is-grid .hm-gal-bottom { flex-direction: column; align-items: stretch; gap: 10px; }
}

/* Photo grid + viewer follow the site theme (Light / Dark / System). html[data-theme] is
   always the resolved theme (System is resolved by the head script), so these rules also
   switch live when the visitor flips the theme or the phone changes to night mode. */
.hm-gal { color-scheme: dark; }
html[data-theme='light'] .hm-gal { color-scheme: light; background: var(--p-bg, #f4f4f2); color: var(--p-text, #131417); }
html[data-theme='light'] .hm-gal-heading h3 { color: var(--p-text, #131417); }
html[data-theme='light'] .hm-gal-counter,
html[data-theme='light'] .hm-gal-desc { color: var(--p-muted, #575a61); }
html[data-theme='light'] :is(.hm-gal-btn, .hm-gal-nav) {
    border-color: rgba(18, 19, 22, 0.14); background: rgba(18, 19, 22, 0.05); color: var(--p-text, #131417);
}
html[data-theme='light'] :is(.hm-gal-btn, .hm-gal-nav):hover { background: rgba(18, 19, 22, 0.1); }
html[data-theme='light'] .hm-gal-thumb { background: rgba(18, 19, 22, 0.06); color: var(--p-text, #131417); }
html[data-theme='light'] .hm-gal-tile { background: rgba(18, 19, 22, 0.06); color: var(--p-text, #131417); box-shadow: 0 1px 2px rgba(18, 19, 22, 0.08); }
html[data-theme='light'] .hm-gal-tile-blank { background: rgba(18, 19, 22, 0.06); }
html[data-theme='light'] .hm-gal-peek i { color: rgba(18, 19, 22, 0.7); }
@media (max-width: 640px) {
    html[data-theme='light'] .hm-gal-nav { background: rgba(255, 255, 255, 0.82); }
}

/* ==========================================================================
   2026-10-02: admin login redesign (#hmAdminLogin.hm-login--split)
   Design read: owner sign-in, Operate mode, matte dark + brand orange.
   Split screen: real site photo + wordmark | quiet form, no card.
   Shape rule: controls 12px, theme switch is a pill, panels are full bleed.
   Motion: one entrance (photo settles, fields rise 8px with a 40ms stagger,
   ease-out, under 450ms), 0.97 press, shake on a wrong password. All movement
   is off under prefers-reduced-motion. The set-password screen keeps its own look.
   ========================================================================== */
html body .hm-login.hm-login--split {
    --lg-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --lg-bg: #111112; --lg-text: #f2f0ec; --lg-muted: #a9a6a0; --lg-label: #dcd9d4;
    --lg-field: #1b1b1d; --lg-line: rgba(255, 255, 255, 0.12); --lg-line-2: rgba(255, 255, 255, 0.22);
    --lg-icon: #8d8a85; --lg-seg: rgba(255, 255, 255, 0.06);
    display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); place-items: stretch;
    padding: 0; overflow: hidden; background: var(--lg-bg); color: var(--lg-text);
}
html[data-theme='light'] body .hm-login.hm-login--split {
    --lg-bg: #f4f4f2; --lg-text: #141416; --lg-muted: #5c5a56; --lg-label: #2c2b29;
    --lg-field: #ffffff; --lg-line: rgba(20, 20, 22, 0.14); --lg-line-2: rgba(20, 20, 22, 0.28);
    --lg-icon: #6f6c67; --lg-seg: rgba(20, 20, 22, 0.05);
}

/* photo side: stays dark in both themes (it is a photograph) */
html body .hm-login--split .hm-login-art { position: relative; overflow: hidden; min-height: 0; background: #0b0b0c; isolation: isolate; }
html body .hm-login--split .hm-login-art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
html body .hm-login--split .hm-login-art::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(10, 10, 11, 0.15) 0%, rgba(10, 10, 11, 0.25) 45%, rgba(10, 10, 11, 0.9) 100%);
}
html body .hm-login--split .hm-login-art-copy {
    position: absolute; z-index: 2; left: clamp(28px, 4vw, 56px); right: clamp(28px, 4vw, 56px); bottom: clamp(28px, 5vh, 56px);
    display: flex; flex-direction: column; gap: 6px; color: #f5f3ef;
}
html body .hm-login--split .hm-login-word {
    font-family: 'Unbounded', 'Bricolage Grotesque', var(--p-font), sans-serif; font-weight: 700;
    font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1; letter-spacing: -0.02em;
}
html body .hm-login--split .hm-login-word-sub { font-size: 1rem; font-weight: 600; color: var(--p-accent); }
html body .hm-login--split .hm-login-art-copy p { margin: 12px 0 0; max-width: 34ch; font-size: 0.98rem; line-height: 1.5; color: rgba(245, 243, 239, 0.8); }

/* form side */
html body .hm-login--split .hm-login-pane {
    position: relative; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    display: grid; grid-template-rows: auto 1fr auto; justify-items: center;
    padding: max(20px, env(safe-area-inset-top)) clamp(20px, 5vw, 64px) max(20px, env(safe-area-inset-bottom));
}
html body .hm-login--split .hm-login-top { width: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
html body .hm-login--split .hm-login-top .hm-login-logo { width: 40px; height: 40px; margin: 0; border-radius: 12px; object-fit: contain; }
html body .hm-login--split .hm-login-theme { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--lg-seg); border: 1px solid var(--lg-line); }
html body .hm-login--split .hm-login-theme button {
    width: 36px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px;
    background: transparent; color: var(--lg-muted); font-size: 0.85rem; cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.16s var(--lg-ease);
}
html body .hm-login--split .hm-login-theme button:hover { color: var(--lg-text); }
html body .hm-login--split .hm-login-theme button:active { transform: scale(0.94); }
html body .hm-login--split .hm-login-theme button[aria-pressed='true'] { background: var(--lg-field); color: var(--p-accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), inset 0 0 0 1px var(--lg-line); }
html body .hm-login--split .hm-login-theme button:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 1px; }

html body .hm-login.hm-login--split .hm-login-card {
    align-self: center; width: min(100%, 380px); margin: 32px 0; padding: 0;
    display: flex; flex-direction: column; gap: 0; text-align: left;
    background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
html body .hm-login.hm-login--split .hm-login-card h2 {
    margin: 0; font-family: var(--r7-display, var(--p-font)); font-size: clamp(1.9rem, 3vw, 2.4rem);
    font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; color: var(--lg-text);
}
html body .hm-login.hm-login--split .hm-login-sub { margin: 8px 0 28px; font-size: 0.97rem; line-height: 1.5; color: var(--lg-muted); }
html body .hm-login.hm-login--split .hm-login-field { gap: 8px; margin: 0 0 18px; }
/* reset mode hides the password block: [hidden] must beat the field's display: flex */
html body .hm-login .hm-login-field[hidden] { display: none; }
html body .hm-login.hm-login--split .hm-login-field label { font-size: 0.86rem; font-weight: 600; color: var(--lg-label); }
html body .hm-login--split .hm-login-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
html body .hm-login.hm-login--split .hm-login-input > i { color: var(--lg-icon); }
html body .hm-login.hm-login--split .hm-login-input:focus-within > i { color: var(--p-accent); }
html body .hm-login.hm-login--split .hm-login-input input {
    height: 52px; border-radius: 12px; background: var(--lg-field); border: 1px solid var(--lg-line); color: var(--lg-text);
}
html body .hm-login.hm-login--split .hm-login-input input:hover { border-color: var(--lg-line-2); }
html body .hm-login.hm-login--split .hm-login-input input:focus { background: var(--lg-field); border-color: var(--p-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--p-accent) 22%, transparent); }
html body .hm-login.hm-login--split .hm-login-eye { color: var(--lg-icon); }
html body .hm-login.hm-login--split .hm-login-eye:hover { color: var(--lg-text); background: var(--lg-seg); }
html body .hm-login.hm-login--split .hm-login-submit {
    height: 52px; margin: 6px 0 0; border-radius: 12px;
    /* colours come from the site-wide orange glass button (owner request, section 4) */
}
html body .hm-login.hm-login--split .hm-login-submit:active:not(:disabled) { transform: scale(0.97); }
html body .hm-login.hm-login--split .hm-login-submit:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 3px; }
html body .hm-login.hm-login--split .hm-login-link {
    height: auto; padding: 2px 0; border: 0; background: none; cursor: pointer;
    font: 600 0.86rem/1.3 var(--p-font); color: var(--p-accent); text-underline-offset: 3px;
}
html body .hm-login.hm-login--split .hm-login-link:hover { text-decoration: underline; }
html body .hm-login.hm-login--split .hm-login-link:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; border-radius: 4px; }
html body .hm-login.hm-login--split .hm-login-link[hidden] { display: none; }
html body .hm-login.hm-login--split .hm-login-back-signin { align-self: center; margin-top: 16px; }
html body .hm-login.hm-login--split .hm-login-cancel {
    height: 40px; padding: 0 4px; border: 0; background: none; cursor: pointer;
    font: 500 0.9rem/1 var(--p-font); color: var(--lg-muted);
}
html body .hm-login.hm-login--split .hm-login-cancel:hover { color: var(--lg-text); }
html body .hm-login.hm-login--split .hm-login-caps { color: #f2c46d; }
html[data-theme='light'] body .hm-login.hm-login--split .hm-login-caps { color: #8a5d00; }

/* one entrance: the photo settles, the form rises in order */
@media (prefers-reduced-motion: no-preference) {
    html body .hm-login--split .hm-login-art-img { animation: hm-lg-settle 1.1s var(--lg-ease) both; }
    html body .hm-login--split .hm-login-art-copy { animation: hm-lg-rise 0.5s var(--lg-ease) 0.12s both; }
    html body .hm-login--split .hm-login-card > * { animation: hm-lg-rise 0.42s var(--lg-ease) both; }
    html body .hm-login--split .hm-login-card > :nth-child(2) { animation-delay: 40ms; }
    html body .hm-login--split .hm-login-card > :nth-child(3) { animation-delay: 80ms; }
    html body .hm-login--split .hm-login-card > :nth-child(4) { animation-delay: 120ms; }
    html body .hm-login--split .hm-login-card > :nth-child(n+5) { animation-delay: 160ms; }
}
@keyframes hm-lg-settle { from { transform: scale(1.06); opacity: 0.6; } to { transform: none; opacity: 1; } }
@keyframes hm-lg-rise { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

/* tablets and phones: the photo becomes a short band on top, the form follows */
@media (max-width: 899px) {
    html body .hm-login.hm-login--split { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); overflow-y: auto; }
    html body .hm-login--split .hm-login-art { height: clamp(150px, 26vh, 240px); }
    html body .hm-login--split .hm-login-art-copy { left: 20px; right: 20px; bottom: 18px; gap: 4px; }
    html body .hm-login--split .hm-login-word { font-size: clamp(1.7rem, 8vw, 2.4rem); }
    html body .hm-login--split .hm-login-art-copy p { display: none; }
    html body .hm-login--split .hm-login-pane { overflow: visible; padding-top: 16px; }
    html body .hm-login.hm-login--split .hm-login-card { align-self: start; margin: 24px 0 20px; }
}

/* ==========================================================================
   2026-10-02 (owner request): admin login, bouncy + liquid glass
   The photo now fills the whole screen; the form sits on a liquid-glass panel
   that springs in. HAILIFU letters drop in and bounce, fields bounce up in turn,
   inputs give a jelly pop on focus, the Light / Dark / Auto thumb springs between
   options, buttons squish and bounce back, a soft light follows the mouse.
   Movement plays on arrival and on touch only: nothing loops behind the blurred
   glass (looping under backdrop-filter made the site slow before).
   Everything that moves is off under prefers-reduced-motion.
   ========================================================================== */
html body .hm-login.hm-login--split {
    --lg-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --lg-glass: linear-gradient(140deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 55%, rgba(255, 255, 255, 0.08)), rgba(17, 17, 19, 0.58);
    --lg-glass-edge: rgba(255, 255, 255, 0.2);
    --lg-glass-shine: rgba(255, 255, 255, 0.32);
    --lg-field: rgba(10, 10, 12, 0.5);
    --lg-seg: rgba(255, 255, 255, 0.07);
    --lg-thumb: rgba(255, 255, 255, 0.14);
}
@supports (animation-timing-function: linear(0, 1)) {
    /* a real spring: overshoots ~16%, settles with one small wobble */
    html body .hm-login.hm-login--split {
        --lg-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
    }
}
html[data-theme='light'] body .hm-login.hm-login--split {
    --lg-glass: linear-gradient(140deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.62) 55%, rgba(255, 255, 255, 0.78));
    --lg-glass-edge: rgba(255, 255, 255, 0.85);
    --lg-glass-shine: #ffffff;
    --lg-field: rgba(255, 255, 255, 0.82);
    --lg-seg: rgba(20, 20, 22, 0.06);
    --lg-thumb: #ffffff;
}

/* the photo fills the screen behind the glass */
html body .hm-login.hm-login--split .hm-login-art { grid-column: 1 / -1; grid-row: 1 / -1; }
html body .hm-login.hm-login--split .hm-login-art::after {
    background:
        linear-gradient(90deg, rgba(10, 10, 11, 0.1) 0%, rgba(10, 10, 11, 0.2) 45%, rgba(10, 10, 11, 0.55) 100%),
        linear-gradient(180deg, rgba(10, 10, 11, 0) 50%, rgba(10, 10, 11, 0.85) 100%);
}
html body .hm-login.hm-login--split .hm-login-art-copy { right: auto; max-width: min(44vw, 560px); z-index: 3; }

/* liquid colour behind the glass (drawn once, then still) */
html body .hm-login--split .hm-login-blob {
    position: absolute; z-index: 2; pointer-events: none; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
    background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--p-accent) 70%, #fff 10%), color-mix(in srgb, var(--p-accent) 35%, transparent) 45%, transparent 70%);
    opacity: 0.55; mix-blend-mode: screen;
}
html body .hm-login--split .hm-login-blob.is-a { width: 34vmax; height: 34vmax; right: 18%; top: -6%; }
html body .hm-login--split .hm-login-blob.is-b { width: 26vmax; height: 26vmax; right: -4%; bottom: -8%; opacity: 0.4; border-radius: 58% 42% 38% 62% / 52% 61% 39% 48%; }
html[data-theme='light'] body .hm-login--split .hm-login-blob { opacity: 0.35; }

/* the glass panel */
html body .hm-login.hm-login--split .hm-login-pane {
    grid-column: 2; grid-row: 1; z-index: 4; isolation: isolate;
    margin: clamp(14px, 2.4vw, 28px); border-radius: 30px;
    background: var(--lg-glass);
    border: 1px solid var(--lg-glass-edge);
    box-shadow: inset 0 1px 0 var(--lg-glass-shine), inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 40px 100px -30px rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(28px) saturate(175%);
    -webkit-backdrop-filter: blur(28px) saturate(175%);
}
/* curved highlight along the top edge, like light on a water drop */
html body .hm-login.hm-login--split .hm-login-pane::before {
    content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(120% 60% at 20% -10%, rgba(255, 255, 255, 0.22), transparent 55%);
}
/* soft light under the mouse */
html body .hm-login.hm-login--split .hm-login-pane::after {
    content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(260px circle at var(--lg-mx, 50%) var(--lg-my, 0%), rgba(255, 255, 255, 0.13), transparent 65%);
    opacity: 0; transition: opacity 0.35s ease;
}
html body .hm-login.hm-login--split .hm-login-pane.is-lit::after { opacity: 1; }
html body .hm-login.hm-login--split .hm-login-pane > * { position: relative; z-index: 1; }

/* Light / Dark / Auto: a liquid thumb slides under the chosen option */
html body .hm-login--split .hm-login-theme { position: relative; }
html body .hm-login--split .hm-login-theme button { position: relative; z-index: 1; }
html body .hm-login--split .hm-login-theme-thumb { display: none; }
@supports selector(:has(*)) {
    html body .hm-login--split .hm-login-theme-thumb {
        display: block; position: absolute; z-index: 0; top: 3px; left: 3px; width: 36px; height: 32px; border-radius: 999px;
        background: var(--lg-thumb); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    }
    html body .hm-login--split .hm-login-theme:has([data-theme-set='dark'][aria-pressed='true']) .hm-login-theme-thumb { translate: 38px 0; }
    html body .hm-login--split .hm-login-theme:has([data-theme-set='system'][aria-pressed='true']) .hm-login-theme-thumb { translate: 76px 0; }
    html body .hm-login--split .hm-login-theme button[aria-pressed='true'] { background: transparent; box-shadow: none; }
}

html body .hm-login.hm-login--split .hm-login-input input { backdrop-filter: none; }
html body .hm-login--split .hm-login-word { display: inline-flex; }
html body .hm-login--split .hm-login-word > span { display: inline-block; font: inherit; letter-spacing: inherit; } /* a site-wide span rule would swap in the body font */

@media (prefers-reduced-motion: no-preference) {
    /* until the screen is ready (script adds .is-ready), the animated parts wait unseen */
    html body .hm-login.hm-login--split:not(.is-ready) :is(.hm-login-pane, .hm-login-blob, .hm-login-word > span, .hm-login-word-sub, .hm-login-art-copy p, .hm-login-art-img) { opacity: 0; animation-play-state: paused; }
    html body .hm-login.hm-login--split:not(.is-ready) .hm-login-pane * { animation-play-state: paused; }
    /* the glass springs up into place */
    html body .hm-login.hm-login--split .hm-login-pane { animation: hm-lq-panel 0.95s var(--lg-spring) 0.05s both; }
    /* the liquid colour swells in and settles its shape */
    html body .hm-login--split .hm-login-blob { animation: hm-lq-blob 1.6s var(--lg-spring) 0.1s both; }
    html body .hm-login--split .hm-login-blob.is-b { animation-delay: 0.3s; }
    /* HAILIFU: letters drop in one by one and bounce */
    html body .hm-login--split .hm-login-word > span { animation: hm-lq-drop 0.85s cubic-bezier(0.23, 1, 0.32, 1) calc(0.25s + var(--i, 0) * 70ms) both; transform-origin: 50% 100%; }
    html body .hm-login.hm-login--split .hm-login-word-sub,
    html body .hm-login.hm-login--split .hm-login-art-copy p { animation: hm-lq-up 0.8s var(--lg-spring) 0.8s both; }
    html body .hm-login.hm-login--split .hm-login-art-copy { animation: none; }
    /* form lines bounce up in turn, after the glass lands */
    html body .hm-login.hm-login--split .hm-login-card > * { animation: hm-lq-up 0.8s var(--lg-spring) 0.32s both; }
    html body .hm-login.hm-login--split .hm-login-card > :nth-child(2) { animation-delay: 0.38s; }
    html body .hm-login.hm-login--split .hm-login-card > :nth-child(3) { animation-delay: 0.44s; }
    html body .hm-login.hm-login--split .hm-login-card > :nth-child(4) { animation-delay: 0.5s; }
    html body .hm-login.hm-login--split .hm-login-card > :nth-child(n+5) { animation-delay: 0.56s; }
    html body .hm-login.hm-login--split .hm-login-top,
    html body .hm-login.hm-login--split .hm-login-cancel { animation: hm-lq-up 0.8s var(--lg-spring) 0.6s both; }
    /* Forgot password / back: the heading bounces in again */
    html body .hm-login.hm-login--split .hm-login-card.is-switching > :is(h2, .hm-login-sub) { animation: hm-lq-up-again 0.7s var(--lg-spring) both; }
    /* tapping a field: a small jelly pop */
    html body .hm-login.hm-login--split .hm-login-input:focus-within { animation: hm-lq-jelly 0.55s var(--lg-spring); }
    /* the eye icon pops when it changes */
    html body .hm-login.hm-login--split .hm-login-eye i { animation: hm-lq-pop 0.5s var(--lg-spring); }
    /* messages bounce in */
    html body .hm-login.hm-login--split :is(.hm-login-error, .hm-login-ok, .hm-login-caps):not([hidden]) { animation: hm-lq-up-again 0.55s var(--lg-spring) both; }
    /* the theme thumb springs across */
    html body .hm-login--split .hm-login-theme-thumb { transition: translate 0.6s var(--lg-spring); }
    html body .hm-login--split .hm-login-theme button i { transition: scale 0.45s var(--lg-spring); }
    html body .hm-login--split .hm-login-theme button[aria-pressed='true'] i { scale: 1.15; }
    /* Sign in: lifts on hover, squishes on press, bounces back on release */
    html body .hm-login.hm-login--split .hm-login-submit { transition: scale 0.55s var(--lg-spring), translate 0.55s var(--lg-spring), opacity 0.2s ease; }
    html body .hm-login.hm-login--split .hm-login-submit:active:not(:disabled) { scale: 0.94 0.9; transition-duration: 0.12s; }
    html body .hm-login.hm-login--split :is(.hm-login-eye, .hm-login-theme button, .hm-login-cancel, .hm-login-link) { transition: scale 0.5s var(--lg-spring), color 0.2s ease, background-color 0.2s ease; }
    html body .hm-login.hm-login--split :is(.hm-login-eye, .hm-login-theme button, .hm-login-cancel, .hm-login-link):active { scale: 0.88; transition-duration: 0.1s; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    html body .hm-login.hm-login--split .hm-login-submit:hover:not(:disabled) { translate: 0 -2px; }
}
@keyframes hm-lq-panel { from { opacity: 0; translate: 0 56px; scale: 0.9; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes hm-lq-blob {
    from { opacity: 0; scale: 0.3; border-radius: 50%; }
    to { scale: 1; }
}
@keyframes hm-lq-drop {
    0% { opacity: 0; translate: 0 -90%; scale: 1 1; }
    45% { opacity: 1; translate: 0 0; scale: 1.12 0.82; }
    65% { translate: 0 -14%; scale: 0.95 1.06; }
    82% { translate: 0 0; scale: 1.04 0.96; }
    100% { translate: 0 0; scale: 1 1; }
}
@keyframes hm-lq-up { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes hm-lq-up-again { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes hm-lq-jelly { 0% { scale: 0.97 1.03; } 100% { scale: 1 1; } }
@keyframes hm-lq-pop { from { scale: 0.4; rotate: -20deg; } to { scale: 1; rotate: 0deg; } }

/* phones and tablets: wordmark on the photo at the top, glass panel below */
@media (max-width: 899px) {
    html body .hm-login.hm-login--split { grid-template-columns: 1fr; grid-template-rows: clamp(150px, 24vh, 220px) auto; overflow-y: auto; }
    html body .hm-login.hm-login--split .hm-login-art { grid-row: 1 / -1; height: auto; min-height: 100%; }
    html body .hm-login.hm-login--split .hm-login-art-copy { top: auto; bottom: auto; position: absolute; left: 20px; right: 20px; max-width: none; top: max(28px, calc(env(safe-area-inset-top) + 16px)); }
    html body .hm-login.hm-login--split .hm-login-pane { grid-column: 1; grid-row: 2; margin: 0 10px max(10px, env(safe-area-inset-bottom)); border-radius: 26px; overflow: visible; padding: 16px 18px 12px; }
    html body .hm-login.hm-login--split .hm-login-card { margin: 18px 0 8px; }
    html body .hm-login--split .hm-login-blob.is-a { right: -20%; top: 10%; width: 70vmax; height: 70vmax; }
    html body .hm-login--split .hm-login-blob.is-b { display: none; }
    /* keeps the wordmark readable over bright photos */
    html body .hm-login.hm-login--split .hm-login-art::after { background: linear-gradient(180deg, rgba(10, 10, 11, 0.78) 0%, rgba(10, 10, 11, 0.35) 22%, rgba(10, 10, 11, 0.15) 45%, rgba(10, 10, 11, 0.6) 100%); }
}
@media (prefers-reduced-transparency: reduce) {
    html body .hm-login.hm-login--split .hm-login-pane { background: #19191b; backdrop-filter: none; -webkit-backdrop-filter: none; }
    html[data-theme='light'] body .hm-login.hm-login--split .hm-login-pane { background: #ffffff; }
}

/* ==========================================================================
   2026-10-02: simpler review form
   On screen: stars, comment, photos, Post review. The six optional questions
   (likes, used, services, price, amount, speed) wait in a closed
   "Add more details (optional)" section (#reviewMoreDetails).
   ========================================================================== */
html body #reviewModal .hm-rv-more { border: 1px solid var(--p-line); border-radius: 14px; background: color-mix(in srgb, var(--p-text) 3%, transparent); }
html body #reviewModal .hm-rv-more > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 52px; padding: 0 16px; cursor: pointer; list-style: none;
    font-size: 0.95rem; font-weight: 600; color: var(--p-text);
    border-radius: 14px; transition: background-color 0.2s ease;
}
html body #reviewModal .hm-rv-more > summary::-webkit-details-marker { display: none; }
html body #reviewModal .hm-rv-more > summary:hover { background: color-mix(in srgb, var(--p-text) 5%, transparent); }
html body #reviewModal .hm-rv-more > summary:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
html body #reviewModal .hm-rv-more > summary i { font-size: 0.8rem; color: var(--p-muted); transition: rotate 0.3s cubic-bezier(0.23, 1, 0.32, 1); }
html body #reviewModal .hm-rv-more[open] > summary i { rotate: 180deg; }
html body #reviewModal .hm-rv-more-body { display: grid; gap: 20px; padding: 6px 16px 18px; }
@media (prefers-reduced-motion: no-preference) {
    html body #reviewModal .hm-rv-more[open] .hm-rv-more-body > * { animation: hm-rv-more-in 0.35s cubic-bezier(0.23, 1, 0.32, 1) both; }
    html body #reviewModal .hm-rv-more[open] .hm-rv-more-body > :nth-child(2) { animation-delay: 40ms; }
    html body #reviewModal .hm-rv-more[open] .hm-rv-more-body > :nth-child(3) { animation-delay: 80ms; }
    html body #reviewModal .hm-rv-more[open] .hm-rv-more-body > :nth-child(n+4) { animation-delay: 120ms; }
}
@keyframes hm-rv-more-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
html body #reviewModal #reviewComment { min-height: 88px; } /* a line shorter so Post fits on a phone screen */

/* 2026-10-02: admin Refresh button (top bar). Reloads the page; the admin reopens on the same tab. */
#adminPanel.hm-admin .hm-admin-refresh {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; height: 38px; padding: 0 12px; margin-left: auto;
    border-radius: 10px; border: 1px solid var(--a-line-2); background: var(--a-panel); color: var(--a-text);
    font: 600 0.86rem/1 var(--p-font); cursor: pointer;
    transition: background-color 0.2s ease, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
#adminPanel.hm-admin .hm-admin-refresh i { font-size: 0.85rem; color: var(--p-accent); }
#adminPanel.hm-admin .hm-admin-refresh:hover { background: var(--a-raise, var(--a-panel)); }
#adminPanel.hm-admin .hm-admin-refresh:active { transform: scale(0.95); }
#adminPanel.hm-admin .hm-admin-refresh:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
#adminPanel.hm-admin .hm-admin-refresh:disabled { cursor: progress; opacity: 0.8; }
@media (prefers-reduced-motion: no-preference) {
    #adminPanel.hm-admin .hm-admin-refresh.is-spinning i { animation: hm-login-spin 0.6s linear infinite; }
}
/* phones: icon only */
@media (max-width: 640px) {
    #adminPanel.hm-admin .hm-admin-refresh { width: 38px; padding: 0; justify-content: center; }
    #adminPanel.hm-admin .hm-admin-refresh span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ==========================================================================
   2026-10-02: reviews with Google accounts (#hmRvGate, #hmRvDone, #hmRvWho)
   ========================================================================== */
html body #reviewModal .hm-rv-gate {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
    padding: 18px 8px 8px;
}
html body #reviewModal .hm-rv-gate[hidden],
html body #reviewModal .hm-rv-who[hidden],
html body #reviewModal #reviewForm[hidden] { display: none; }
html body #reviewModal .hm-rv-gate-icon {
    width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px;
    background: color-mix(in srgb, var(--p-accent) 14%, transparent); color: var(--p-accent); font-size: 1.4rem;
}
html body #reviewModal .hm-rv-gate-icon.is-done { background: color-mix(in srgb, #1f9d55 16%, transparent); color: #1f9d55; }
html body #reviewModal .hm-rv-gate h3 { margin: 4px 0 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--p-text); }
html body #reviewModal .hm-rv-gate p { margin: 0; max-width: 36ch; font-size: 0.95rem; line-height: 1.5; color: var(--p-muted); }
html body #reviewModal .hm-rv-google {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: min(100%, 320px); height: 50px; margin-top: 8px; padding: 0 20px; border-radius: 999px;
    border: 1px solid var(--p-line-strong); background: var(--p-surface); color: var(--p-text);
    font: 600 0.98rem/1 var(--p-font); cursor: pointer;
    transition: background-color 0.2s ease, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
html body #reviewModal .hm-rv-google i { color: #ea4335; font-size: 1.05rem; }
html body #reviewModal .hm-rv-google:hover { background: color-mix(in srgb, var(--p-text) 5%, var(--p-surface)); }
html body #reviewModal .hm-rv-google:active { transform: scale(0.97); }
html body #reviewModal .hm-rv-google:focus-visible,
html body #reviewModal .hm-rv-switch:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
html body #reviewModal .hm-rv-google.is-busy { opacity: 0.7; cursor: progress; }
html body #reviewModal .hm-rv-gate-note { min-height: 1.2em; font-size: 0.85rem; }
html body #reviewModal .hm-rv-switch {
    border: 0; background: none; padding: 6px 4px; cursor: pointer;
    font: 600 0.88rem/1.2 var(--p-font); color: var(--p-accent); text-underline-offset: 3px;
}
html body #reviewModal .hm-rv-switch:hover { text-decoration: underline; }
/* "Posting as" row above the form */
html body #reviewModal .hm-rv-who {
    display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; padding: 10px 12px;
    border-radius: 14px; border: 1px solid var(--p-line); background: color-mix(in srgb, var(--p-text) 3%, transparent);
}
html body #reviewModal .hm-rv-who-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
html body #reviewModal .hm-rv-who-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
html body #reviewModal .hm-rv-who-copy strong { font-size: 0.95rem; color: var(--p-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #reviewModal .hm-rv-who-copy span { font-size: 0.8rem; color: var(--p-muted); }
/* "1 review · 2 photos" under the reviewer's name, like Google Business */
html body .featured-review-card .hm-rv-count { display: block; margin-top: 2px; font-size: 0.8rem; color: var(--p-muted); }

/* 2026-10-03: every close (X) button acts like the top "Leave a Review" button:
   brand-colour fill on hover/focus, squash + bounce on press (premium.js PRESS_SELECTOR). */
html body :is(#reviewModalClose, #popupClose, #projectModalClose, #chatbotClose, #brilliantChatClose, #galleryCloseBtn, .preview-close, .r7-topbar-close, .r7-teaser-close, .media-lightbox-close, [data-gal="close"], .hm-gal-close, #hmAdViewClose) {
    transition: transform 0.2s var(--p-ease), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
html body :is(#reviewModalClose, #popupClose, #projectModalClose, #chatbotClose, #brilliantChatClose, #galleryCloseBtn, .preview-close, .r7-topbar-close, .r7-teaser-close, .media-lightbox-close, [data-gal="close"], .hm-gal-close, #hmAdViewClose):is(:hover, :focus-visible) {
    background: var(--p-accent-strong) !important;
    border-color: var(--p-accent-strong) !important;
    color: var(--p-on-accent) !important;
}
html body :is(#reviewModalClose, #popupClose, #projectModalClose, #chatbotClose, #brilliantChatClose, #galleryCloseBtn, .preview-close, .r7-topbar-close, .r7-teaser-close, .media-lightbox-close, [data-gal="close"], .hm-gal-close, #hmAdViewClose):is(:hover, :focus-visible) i {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}
html body :is(#reviewModalClose, #popupClose, #projectModalClose, #chatbotClose, #brilliantChatClose, #galleryCloseBtn, .preview-close, .r7-topbar-close, .r7-teaser-close, .media-lightbox-close, [data-gal="close"], .hm-gal-close, #hmAdViewClose):active { transform: scale(0.97); }
/* X animation (2026-10-03): spins + pops in when its popup opens, turns 90deg and grows on
   hover, twists on tap. The second keyframe name restarts it when a popup gains .active/.is-open. */
@media (prefers-reduced-motion: no-preference) {
    html body :is(#reviewModalClose, #popupClose, #projectModalClose, #chatbotClose, #brilliantChatClose, #galleryCloseBtn, .preview-close, .r7-topbar-close, .r7-teaser-close, .media-lightbox-close, [data-gal="close"], .hm-gal-close, #hmAdViewClose) { animation: hm-x-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s both; }
    html body :is(.active, .is-open, [open]) :is(#reviewModalClose, #popupClose, #projectModalClose, #chatbotClose, #brilliantChatClose, #galleryCloseBtn, .preview-close, .r7-topbar-close, .r7-teaser-close, .media-lightbox-close, [data-gal="close"], .hm-gal-close, #hmAdViewClose) { animation-name: hm-x-in-open; }
    /* the quote form's slide-in for each row (r7-item-in) is more specific; the X spins instead */
    html body #popupOverlay.active > .popup-form > #popupClose { animation: hm-x-in-open 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s both; }
    @media (hover: hover) and (pointer: fine) {
        html body :is(#reviewModalClose, #popupClose, #projectModalClose, #chatbotClose, #brilliantChatClose, #galleryCloseBtn, .preview-close, .r7-topbar-close, .r7-teaser-close, .media-lightbox-close, [data-gal="close"], .hm-gal-close, #hmAdViewClose):hover { transform: rotate(90deg) scale(1.08) !important; }
    }
    html body :is(#reviewModalClose, #popupClose, #projectModalClose, #chatbotClose, #brilliantChatClose, #galleryCloseBtn, .preview-close, .r7-topbar-close, .r7-teaser-close, .media-lightbox-close, [data-gal="close"], .hm-gal-close, #hmAdViewClose):active { transform: rotate(90deg) scale(0.9) !important; }
}
@keyframes hm-x-in { 0% { opacity: 0; rotate: -180deg; scale: 0.3; } 100% { opacity: 1; rotate: 0deg; scale: 1; } }
@keyframes hm-x-in-open { 0% { opacity: 0; rotate: -180deg; scale: 0.3; } 100% { opacity: 1; rotate: 0deg; scale: 1; } }

/* 2026-10-04: advert product view (script.js openAdvertView). Clicking an advert opens
   the advertised product: photo, title, text, Request a Quote and WhatsApp. */
html body #hmAdView { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 16px; overscroll-behavior: contain; }
html body #hmAdView[hidden] { display: none !important; }
html body #hmAdView .hm-adview-backdrop { position: absolute; inset: 0; background: rgba(8, 8, 9, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
html body #hmAdView .hm-adview-panel {
    position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
    border-radius: 24px; background: var(--p-surface); color: var(--p-text); border: 1px solid var(--p-line); box-shadow: var(--p-shadow);
}
html body #hmAdView .hm-adview-close {
    position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center;
    border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(12, 12, 13, 0.55); color: #fff; cursor: pointer;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 1.05rem;
}
html body #hmAdView .hm-adview-media { background: #0d0d0e; }
html body #hmAdView .hm-adview-media img { display: block; width: 100%; max-height: 62dvh; object-fit: contain; }
html body #hmAdView .hm-adview-body { display: grid; gap: 12px; justify-items: start; padding: 22px 24px 26px; }
html body #hmAdView .hm-adview-panel:not(:has(.hm-adview-media)) .hm-adview-body { padding-top: 64px; }
html body #hmAdView .hm-ad-tag {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--p-line); color: var(--p-accent); font-size: 0.78rem; font-weight: 600;
}
html body #hmAdView h3 { margin: 0; font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; color: var(--p-text); text-transform: none; }
html body #hmAdView p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--p-muted); white-space: pre-line; }
html body #hmAdView .hm-adview-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; width: 100%; }
html body #hmAdView .hm-adview-actions > * {
    flex: 1 1 200px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 22px;
    border-radius: 999px; font-family: var(--p-font); font-size: 0.98rem; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: transform 0.2s var(--p-ease), background-color 0.2s ease, border-color 0.2s ease;
}
html body #hmAdView .hm-ad-cta { border: 0; background: var(--p-accent); color: var(--p-on-accent); }
html body #hmAdView .hm-ad-cta:hover { background: var(--p-accent-strong); }
html body #hmAdView .hm-adview-wa { border: 1px solid var(--p-line); background: transparent; color: var(--p-text); }
html body #hmAdView .hm-adview-wa i { color: #25d366; font-size: 1.15rem; }
html body #hmAdView .hm-adview-wa:hover { border-color: #25d366; }
html body #hmAdView .hm-adview-actions > *:active { transform: scale(0.97); }
html body #hmAds .hm-ad-media[data-ad-view] { cursor: zoom-in; }
@media (prefers-reduced-motion: no-preference) {
    html body #hmAdView.active .hm-adview-backdrop { animation: hm-backdrop-in 0.25s ease both; }
    html body #hmAdView.active .hm-adview-panel { animation: hm-adview-in 0.42s cubic-bezier(0.23, 1, 0.32, 1) both; }
}
@keyframes hm-adview-in { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: none; } }

/* =====================================================================
   2026-10-04 PHONE SPEED: Featured Work draws only 3 slides
   The carousel holds every featured photo (62 on the live site). Each slide had a
   blurred background copy, colour filters and two endless "loading" shimmer
   animations, all redrawn on every frame, which froze phones. Now only the shown
   slide and its two neighbours (.is-near, set in script.js) are drawn at all.
   ===================================================================== */
html body #featured-work .featured-loop-slide:not(.is-active):not(.is-near) {
    visibility: hidden;
}
html body #featured-work .featured-loop-slide:not(.is-active):not(.is-near) *,
html body #featured-work .featured-loop-slide:not(.is-active):not(.is-near) *::before,
html body #featured-work .featured-loop-slide:not(.is-active):not(.is-near) *::after {
    animation: none !important;
    filter: none !important;
}
html body #featured-work .featured-loop-slide:not(.is-active):not(.is-near) .r11-fill { display: none; }