/* ============================================================
   ForWardAI.Sites.Template — site.css
   Theme values injected via CSS custom properties from MainLayout.
   ============================================================ */

/* --- Reset & Base ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--font-family, 'Inter', system-ui, sans-serif);
    color: #1a1a2e;
    background: #ffffff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* #22 item 5 -- standard visually-hidden pattern (content read by screen
   readers, removed from visual layout without display:none, which would
   also hide it from assistive tech). Used for the nav landmark's sr-only
   heading, matching the real site's accessibility pattern. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Container --------------------------------------------- */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* --- Buttons ----------------------------------------------- */
.btn {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    transition: opacity 0.2s, transform 0.15s;
    text-align: center;
}
.btn:hover { opacity: 0.88; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: var(--color-primary, #1a5276);
    color: #fff;
}
.btn-accent {
    background: var(--color-accent, #e74c3c);
    color: #fff;
}
.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

/* --- Navbar ------------------------------------------------ */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.navbar-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 84px;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}
/* Issue #17 second pass: 48px still read as small against a 70px bar. The source
   asset is 292x292 and already cropped of its padding (PR #20), so there is real
   detail to show. Logo up to 60px, bar to 84px so it keeps 12px of breathing room
   above and below rather than crowding the edges. Tune the two numbers together --
   the logo should stay ~12px shorter than .navbar-inner's height. */
.navbar-logo { height: 60px; width: auto; }
.navbar-brand-text {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary, #1a5276);
    letter-spacing: -0.02em;
}

.navbar-links {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}
.navbar-link {
    padding: 0.4rem 0.85rem;
    border-radius: 5px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #444;
    transition: color 0.15s, background 0.15s;
}
.navbar-link:hover {
    color: var(--color-primary);
    background: rgba(0,0,0,0.04);
}
/* Pro multi-page: mark the route the visitor is on. */
.navbar-link.active {
    color: var(--color-primary);
    font-weight: 600;
    background: rgba(0,0,0,0.05);
}

.navbar-cta {
    margin-left: 1rem;
    padding: 0.45rem 1.1rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: opacity 0.2s;
}
.navbar-cta:hover { opacity: 0.85; }

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    margin-left: auto;
    padding: 0;
}
.hamburger span {
    display: block;
    height: 2px;
    background: var(--color-primary, #1a5276);
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
}
.hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
    display: none;
    background: #fff;
    border-top: 1px solid #eee;
    padding: 1rem 1.5rem 1.5rem;
    flex-direction: column;
    gap: 0.25rem;
}
.mobile-menu.open { display: flex; }
.mobile-link {
    display: block;
    padding: 0.65rem 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}
.mobile-link:last-child { border-bottom: none; }
.mobile-link.active { color: var(--color-primary); font-weight: 600; }
.mobile-cta {
    display: block;
    margin-top: 1rem;
    padding: 0.75rem;
    text-align: center;
    background: var(--color-primary);
    color: #fff;
    border-radius: 6px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .navbar-links, .navbar-cta { display: none; }
    .hamburger { display: flex; }
}

/* --- Hero -------------------------------------------------- */
.hero {
    min-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 1.5rem;
    color: #fff;
    position: relative;
}

.hero-content {
    max-width: 780px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.hero-headline {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.hero-subheadline {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    font-weight: 400;
    opacity: 0.9;
    max-width: 580px;
    line-height: 1.65;
}

.hero-cta {
    font-size: 1.05rem;
    padding: 0.9rem 2.2rem;
    box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}

/* --- Page header (Pro multi-page subpages) ------------------ */
/* Stands in for the hero on /about, /services, etc. so a subpage still
   opens with a titled band instead of dropping straight into a section. */
.page-header {
    background: var(--color-primary);
    color: #fff;
    padding: 4rem 0 3.25rem;
    text-align: center;
}
.page-header-title {
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.page-header-subtitle {
    max-width: 640px;
    margin: 0.75rem auto 0;
    font-size: 1.05rem;
    opacity: 0.9;
}

/* --- Sections ---------------------------------------------- */
.section {
    padding: 5rem 0;
}
/* Default even-stripe applies only when the client theme has not opted in
   to its own section rhythm — a Starter site keeps the light-gray stripe,
   the JZ theme controls each block's bg explicitly. */
main:not(.theme-cyan-silver) .section:nth-child(even) {
    background: #f7f9fc;
}

.section-title {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}
.section-intro {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.5rem;
    color: #555;
    font-size: 1.05rem;
}

/* Services */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: start;
    gap: 1.5rem;
    margin-top: 2.5rem;
}
.service-card {
    background: #fff;
    border-radius: 12px;
    padding: 2rem 1.75rem;
    box-shadow: 0 2px 20px rgba(0,0,0,0.07);
    transition: transform 0.2s, box-shadow 0.2s;
    text-align: center;
}
.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.service-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.service-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.5rem; color: #1a1a2e; }
.service-desc { color: #666; font-size: 0.95rem; line-height: 1.6; }

/* Features */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
}
.feature-card {
    background: #fff;
    border-radius: 10px;
    padding: 1.75rem;
    border-left: 4px solid var(--color-accent, #e74c3c);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.feature-icon { font-size: 1.8rem; margin-bottom: 0.75rem; }
.feature-title { font-size: 1rem; font-weight: 700; margin-bottom: 0.4rem; color: #1a1a2e; }
.feature-desc { color: #666; font-size: 0.9rem; line-height: 1.6; }

/* About */
.about-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.about-text .section-title { text-align: left; }
.about-body { color: #555; font-size: 1.05rem; line-height: 1.8; margin-top: 1rem; }
.about-image img { border-radius: 12px; box-shadow: 0 8px 40px rgba(0,0,0,0.12); }

@media (max-width: 700px) {
    .about-inner { grid-template-columns: 1fr; }
}

/* Contact */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 3rem;
    margin-top: 2.5rem;
    align-items: start;
}
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1rem;
    color: #444;
}
.contact-icon { font-size: 1.3rem; flex-shrink: 0; line-height: 1.4; }
.contact-link {
    color: var(--color-primary);
    font-weight: 500;
    transition: opacity 0.15s;
}
.contact-link:hover { opacity: 0.75; }

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.form-group label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.form-group input,
.form-group textarea {
    padding: 0.7rem 0.9rem;
    border: 1.5px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: #fff;
    color: #1a1a2e;
    resize: vertical;
}
.form-group input:focus-visible,
.form-group textarea:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(26,82,118,0.12);
}
.form-success {
    margin-top: 0.5rem;
    color: #27ae60;
    font-weight: 500;
    font-size: 0.95rem;
}

@media (max-width: 700px) {
    .contact-grid { grid-template-columns: 1fr; }
}

/* --- Footer ------------------------------------------------ */
.footer {
    background: #1a1a2e;
    color: #ccc;
}
.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 1.5rem 2rem;
}
/* Legacy 3-column shape (brand/nav/contact) needs footer-inner itself to be
   the grid, its .footer-col children are direct grid items. The 4-column
   shape (.footer-columns) brings its OWN nested grid — if footer-inner were
   ALSO a 3-column grid here, .footer-columns would sit as a single grid item
   squeezed into one third of the width, then divide THAT into 4 sub-columns,
   which is what was squashing every column down to ~1-2 words per line. */
.footer-inner:not(:has(.footer-columns)) {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

/* Columns */
.footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.footer-col-heading {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Left col: brand */
.footer-col-brand { align-items: flex-start; }
.footer-logo { height: 60px; }
.footer-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}
.footer-partner-badge { display: inline-block; }
.footer-badge-img { height: 80px; width: auto; }

/* Center col: nav */
.footer-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.footer-nav-link {
    color: #aac;
    font-size: 0.95rem;
    transition: color 0.15s;
    text-decoration: none;
}
.footer-nav-link:hover { color: #fff; }

/* Right col: contact */
.footer-col-contact { gap: 0.6rem; }
.footer-link {
    color: #aac;
    font-size: 0.95rem;
    transition: color 0.15s;
    text-decoration: none;
}
.footer-link:hover { color: #fff; }

.footer-socials {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.25rem;
}
.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: #ccc;
    transition: background 0.2s, color 0.2s;
}
.social-link:hover {
    background: var(--color-accent, #e74c3c);
    color: #fff;
}

/* ForWardAI attribution */
.footer-forwardai {
    display: inline-block;
    margin-top: 0.5rem;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.2s;
    width: fit-content;
}
.footer-forwardai:hover { opacity: 1; }
.footer-forwardai-img {
    height: 40px;
    width: auto;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    text-align: center;
    padding: 1.25rem 1.5rem;
    font-size: 0.85rem;
    color: #666;
}

/* Footer responsive */
@media (max-width: 768px) {
    .footer-inner {
        grid-template-columns: 1fr;
    }
    .footer-col-nav { text-align: center; align-items: center; }
    .footer-col-contact { align-items: center; }
}

/* --- About enhancements (#3) ------------------------------- */
.about-inner.no-image .about-title { text-align: center; }
.about-inner.no-image .about-body { text-align: center; max-width: 680px; margin-left: auto; margin-right: auto; }

.about-highlights {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1.5rem;
}
.about-highlights li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.97rem;
    color: #333;
}
.highlight-icon { font-size: 1.15rem; }

/* --- Services image variant (#4) --------------------------- */
.service-card-image {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
    aspect-ratio: 16/9;
}
.service-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s;
}
.service-card:hover .service-card-image img { transform: scale(1.04); }

/* --- Services inline before/after slider (#36, #38) --------------------- */
/* Reuses .bas-slider (the interactive drag-to-compare widget from
   before-after-slider), sized down to sit inside a service card instead of
   the full-width standalone grid. See ServicesSection.razor RenderBasSlider. */
.service-card-bas {
    margin-bottom: 1rem;
    aspect-ratio: 4 / 3;
    box-shadow: none;
    border: 1px solid var(--color-border, #e0e0e0);
}
.service-card-before-after-pairs .service-card-bas:not(:last-of-type) {
    margin-bottom: 0.75rem;
}

/* --- Testimonials (#5) ------------------------------------- */
.section-testimonials { }

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}
@media (max-width: 900px) {
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
    .testimonials-grid { grid-template-columns: 1fr; }
}

.testimonial-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: 0 2px 20px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    border-top: 3px solid var(--color-accent, #e74c3c);
}

.testimonial-stars {
    display: flex;
    gap: 2px;
    color: var(--color-accent, #e74c3c);
    font-size: 1.1rem;
    line-height: 1;
}

.testimonial-quote {
    font-size: 0.97rem;
    line-height: 1.75;
    color: #444;
    font-style: italic;
    flex: 1;
    margin: 0;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f0f0f0;
}

.testimonial-photo {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.testimonial-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-primary, #1a5276);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}
.testimonial-byline { display: flex; flex-direction: column; gap: 0.1rem; }
.testimonial-name { font-weight: 700; font-size: 0.9rem; color: #1a1a2e; }
.testimonial-role { font-size: 0.8rem; color: #888; }

/* --- Before/After Gallery (#6) ----------------------------- */
.before-after-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 2rem;
    margin-top: 2.5rem;
}

.before-after-pair {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 28px rgba(0,0,0,0.1);
    margin: 0;
}

.before-after-images {
    display: grid;
    grid-template-columns: 1fr 3px 1fr;
    align-items: stretch;
}

.ba-divider {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.ba-divider::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: rgba(255,255,255,0.8);
}

.ba-panel {
    position: relative;
    overflow: hidden;
}
.ba-panel img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
.ba-label {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    background: rgba(0,0,0,0.62);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.ba-caption {
    background: #fff;
    padding: 0.8rem 1rem;
    text-align: center;
    font-size: 0.88rem;
    color: #555;
    font-style: italic;
    border-top: 1px solid #eee;
}

@media (max-width: 500px) {
    .before-after-images { grid-template-columns: 1fr; }
    .ba-divider { height: 3px; width: 100%; }
    .ba-panel img { height: 180px; }
}

/* --- Contact enhancements (#7) ----------------------------- */
.contact-map {
    margin-top: 1.5rem;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.contact-map iframe {
    display: block;
    width: 100%;
    height: 220px;
    border: none;
}
.form-group select {
    padding: 0.7rem 0.9rem;
    border: 1.5px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: #1a1a2e;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-group select:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(26,82,118,0.12);
}
.required { color: var(--color-accent, #e74c3c); margin-left: 2px; }
.optional { color: #999; font-weight: 400; font-size: 0.82em; }
.form-error {
    color: #c0392b;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 0;
}
.form-success-box {
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    border-radius: 10px;
    padding: 2rem 1.75rem;
    text-align: center;
    color: #166534;
}
.form-success-box h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}
.form-success-box p { font-size: 0.95rem; opacity: 0.85; margin: 0; }

/* Honeypot: visually hidden from humans, invisible to screen readers too */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
}

/* --- Service Area (#8) ------------------------------------- */
.section-service-area { text-align: center; }

.service-area-desc {
    color: #555;
    font-size: 1.05rem;
    line-height: 1.75;
    max-width: 640px;
    margin: 1.25rem auto 2rem;
}

.cities-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: center;
    margin: 0 auto 2rem;
    max-width: 760px;
}
.city-tag {
    background: var(--color-primary, #1a5276);
    color: #fff;
    padding: 0.4rem 1.1rem;
    border-radius: 100px;
    font-size: 0.88rem;
    font-weight: 500;
    white-space: nowrap;
}

.map-embed {
    max-width: 860px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 28px rgba(0,0,0,0.1);
}
.map-embed iframe {
    display: block;
    width: 100%;
    height: 340px;
    border: none;
}

/* --- Site-wide top bar ------------------------------------- */
.top-bar {
    width: 100%;
    font-size: 0.85rem;
    line-height: 1.5;
}
.top-bar-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.55rem 1.5rem;
    text-align: center;
    letter-spacing: 0.01em;
}
@media (max-width: 720px) {
    .top-bar-inner { font-size: 0.78rem; padding: 0.6rem 1rem; text-align: left; }
}

/* --- Nav CTA as a cyan pill button --------------------------- */
.navbar-cta-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1.35rem;
    background: var(--color-accent, #00A9E0);
    color: #fff;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 12px rgba(0, 169, 224, 0.35);
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.navbar-cta-pill:hover {
    background: #0088b8;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 169, 224, 0.45);
}

/* --- Hero image (hero-image section) ------------------------- */
.hero-image {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 1.5rem;
    color: #fff;
    overflow: hidden;
    background: #101010;
}
.hero-image .hero-image-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: grayscale(0.65) brightness(0.55) contrast(1.05);
    z-index: 0;
}
.hero-image .hero-image-tint {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.35) 0%,
        rgba(0, 0, 0, 0.55) 100%);
    z-index: 1;
}
.hero-image .hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.hero-image .hero-headline {
    color: var(--color-accent, #00A9E0);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
    font-size: clamp(2.2rem, 5.5vw, 4rem);
}
.hero-image .hero-subheadline {
    color: var(--color-accent, #00A9E0);
    opacity: 0.95;
    font-size: clamp(1rem, 2.5vw, 1.35rem);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}
.hero-image .btn-hero-cta,
.hero-image .hero-microcopy {
    color: #fff;
}
.btn-hero-cta {
    display: inline-block;
    padding: 0.9rem 2.2rem;
    background: var(--color-accent, #00A9E0);
    color: #fff;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1.05rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.btn-hero-cta:hover { background: #0088b8; }

/* --- CTA banner section (cyan strip between hero & services) - */
.section-cta-banner {
    background: var(--color-accent, #00A9E0);
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: #fff;
}
.cta-banner-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}
.cta-banner-headline {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}
.cta-banner-btn {
    display: inline-block;
    background: #000;
    color: var(--color-accent, #00A9E0);
    padding: 0.85rem 2.25rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.cta-banner-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* --- Section rhythm on JZ pages: cyan / silver alternation ---- */
/* Applied via the .theme-cyan-silver class on <main>. Kept scoped so the
   Sparkling Star Starter site doesn't inherit the stripes. */
.theme-cyan-silver .section-services {
    background: var(--color-accent, #00A9E0);
    color: #fff;
}
.theme-cyan-silver .section-services .section-title,
.theme-cyan-silver .section-services .section-intro { color: #fff; }
.theme-cyan-silver .section-services .service-card {
    background: #fff;
    color: #1a1a1a;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
}
.theme-cyan-silver .section-services .service-title { color: #101010; }
.theme-cyan-silver .section-services .service-desc { color: #444; }
.theme-cyan-silver .section-services .btn-outline {
    background: transparent;
    color: #fff;
    border-color: #fff;
}
.theme-cyan-silver .section-services .btn-outline:hover {
    background: #fff;
    color: var(--color-accent, #00A9E0);
}
.theme-cyan-silver .section-services .btn-accent {
    background: #000;
    color: #fff;
}
.theme-cyan-silver .section-services .btn-accent:hover { background: #222; }
.theme-cyan-silver .section-locations {
    background: linear-gradient(180deg, #d4d4d4 0%, #b8b8b8 100%);
    color: #101010;
}
.theme-cyan-silver .section-locations .section-title { color: #101010; }
.theme-cyan-silver .section-locations .section-intro { color: #202020; }
.theme-cyan-silver .section-locations .location-card {
    background: #fff;
    color: #101010;
}
.theme-cyan-silver .section-locations .location-name { color: #101010; }
.theme-cyan-silver .section-locations .location-address-label {
    font-style: italic;
    font-weight: 600;
}
.theme-cyan-silver .section-locations .btn-accent {
    background: var(--color-accent, #00A9E0);
    color: #fff;
}
.theme-cyan-silver .footer {
    background: linear-gradient(180deg, #b8b8b8 0%, #101010 60%);
}
/* (default even/odd stripe is already scoped to main:not(.theme-cyan-silver)) */

/* --- Map iframe inside location cards ------------------------ */
.location-map-embed {
    margin-top: 0.75rem;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
}
.location-map-embed iframe {
    display: block;
    width: 100%;
    height: 320px;
    border: 0;
}

/* --- Section CTA row (bottom of Services / Locations) ------ */
.section-cta-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

/* --- Hero microcopy (small line under primary CTA) --------- */
.hero-microcopy {
    margin-top: -0.25rem;
    font-size: 0.9rem;
    opacity: 0.85;
    letter-spacing: 0.01em;
}

/* --- Locations (2-card section) ---------------------------- */
.section-locations .locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.location-card {
    background: #fff;
    border-radius: 12px;
    padding: 2rem 1.75rem;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.08);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.location-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

.location-address {
    font-size: 0.98rem;
    color: #333;
    margin: 0;
}

.location-hours {
    font-size: 0.92rem;
    color: #666;
    margin: 0;
}

.location-map-link {
    color: var(--color-accent);
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 0.25rem;
}
.location-map-link:hover { text-decoration: underline; }

/* --- Footer 4-column layout -------------------------------- */
.footer-taglines {
    text-align: center;
    padding: 2rem 1.5rem 1rem;
    max-width: 900px;
    margin: 0 auto;
    color: #eee;
}
.footer-tagline {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}
.footer-subtagline {
    font-size: 0.95rem;
    opacity: 0.85;
    margin-bottom: 0.5rem;
}
.footer-copyright-top {
    font-size: 0.82rem;
    opacity: 0.7;
    margin: 0;
}
.footer-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 2rem 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}
@media (max-width: 900px) {
    .footer-columns { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .footer-columns { grid-template-columns: 1fr; }
}
.footer-columns .footer-col { text-align: left; }
.footer-columns .footer-col-heading {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.85rem;
    color: #fff;
}
.footer-columns .footer-line,
.footer-columns .footer-link {
    display: block;
    font-size: 0.9rem;
    color: #cbd0d6;
    line-height: 1.55;
    margin-bottom: 0.4rem;
}
.footer-columns .footer-link:hover { color: #fff; }
.footer-columns .footer-nav-list { padding: 0; margin: 0; list-style: none; }
.footer-columns .footer-nav-list li { margin-bottom: 0.3rem; }
.footer-columns .footer-nav-link {
    font-size: 0.9rem;
    color: #cbd0d6;
}
.footer-columns .footer-nav-link:hover { color: #fff; text-decoration: underline; }

.footer-credit { margin-top: 0.5rem; font-size: 0.82rem; opacity: 0.65; }
.footer-credit a { color: inherit; text-decoration: underline; }
.footer-credit a:hover { color: #fff; }

/* --- Hero video (hero-video section) ----------------------- */
/* Full-viewport hero with a background <video>. Same headline/subhead layout
   as the regular .hero, but the background is a video element rather than a
   background-image. Overlay layer darkens the video for text legibility. */
.hero-video {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 1.5rem;
    color: #fff;
    overflow: hidden;
    background: #0f0f10;
}

.hero-video .hero-video-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.hero-video .hero-video-poster {
    background-repeat: no-repeat;
}

.hero-video .hero-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* rgba fill set inline from OverlayOpacity */
}

.hero-video .hero-content {
    position: relative;
    z-index: 2;
    max-width: 780px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* --- Before/After interactive slider (before-after-slider) --- */
.section-before-after-slider .bas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 2rem;
    margin-top: 2.5rem;
}

.bas-slider {
    position: relative;
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.14);
    aspect-ratio: 4 / 3;
    background: #111;
    user-select: none;
    -webkit-user-select: none;
    cursor: ew-resize;
}

.bas-slider .bas-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.bas-slider .bas-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
}

.bas-slider .bas-before-image {
    z-index: 2;
    /* clip-path set inline; JS drags it */
    transition: clip-path 0.05s linear;
}

.bas-slider .bas-label {
    position: absolute;
    top: 0.8rem;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.28rem 0.72rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    z-index: 4;
    pointer-events: none;
}

.bas-slider .bas-label-before { left: 0.8rem; }
.bas-slider .bas-label-after { right: 0.8rem; }

.bas-slider .bas-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #fff;
    z-index: 3;
    transform: translateX(-50%);
    cursor: ew-resize;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
    outline: none;
}

.bas-slider .bas-handle-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
}

.bas-slider .bas-handle-arrow {
    position: absolute;
    top: 50%;
    color: #1a1a1a;
    font-size: 1rem;
    line-height: 1;
    transform: translateY(-50%);
    pointer-events: none;
    font-weight: 700;
}
.bas-slider .bas-handle-arrow-left { left: -14px; }
.bas-slider .bas-handle-arrow-right { right: -14px; }

.bas-slider:focus-within .bas-handle-dot {
    box-shadow: 0 0 0 4px rgba(0, 169, 224, 0.35), 0 3px 14px rgba(0, 0, 0, 0.35);
}

.bas-slider .bas-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
    color: #fff;
    padding: 2.5rem 1rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    z-index: 4;
    pointer-events: none;
}

@media (max-width: 600px) {
    .bas-slider { aspect-ratio: 1 / 1; }
}

/* --- Gallery + lightbox ------------------------------------ */
.section-gallery .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 2.5rem;
}

.section-gallery .gallery-tile {
    position: relative;
    border: 0;
    padding: 0;
    background: #111;
    border-radius: 10px;
    overflow: hidden;
    cursor: zoom-in;
    aspect-ratio: 4 / 3;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
    transition: transform 0.15s, box-shadow 0.15s;
}
.section-gallery .gallery-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
}
.section-gallery .gallery-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.section-gallery .gallery-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
    color: #fff;
    padding: 2.5rem 0.75rem 0.75rem;
    font-size: 0.83rem;
    font-weight: 500;
    text-align: left;
    line-height: 1.3;
}

/* Lightbox overlay — injected once by gallery-lightbox.js. */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.lightbox-overlay.is-open { display: flex; }
.lightbox-overlay .lightbox-figure {
    max-width: min(1200px, 95vw);
    max-height: 90vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.lightbox-overlay .lightbox-img {
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}
.lightbox-overlay .lightbox-caption {
    color: #eee;
    font-size: 0.95rem;
    text-align: center;
    max-width: 80ch;
}
.lightbox-overlay .lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    width: 3rem;
    height: 3rem;
}
.lightbox-overlay .lightbox-nav {
    background: rgba(0, 0, 0, 0.35);
    border: 0;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    padding: 1rem 1.15rem;
    border-radius: 50%;
    line-height: 1;
    transition: background 0.15s;
}
.lightbox-overlay .lightbox-nav:hover { background: rgba(255, 255, 255, 0.15); }
.lightbox-overlay .lightbox-prev { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-overlay .lightbox-next { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); }

/* --- Blazor error UI --------------------------------------- */
#blazor-error-ui {
    background: #ffedcc;
    border-top: 1px solid #f5b800;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; float: right; font-weight: bold; }

/* ---------------------------------------------------------------------------
   Issue #16: the box that flashes around the hero headline on page load.

   Routes.razor uses Blazor's stock <FocusOnNavigate Selector="h1" />, which adds
   tabindex="-1" to the first h1 and focuses it on every navigation so screen
   readers announce the new page. That programmatic focus draws the browser's
   default focus ring -- a white box around the headline. Nothing was overriding
   it, because no rule targets .hero-headline focus at all.

   Do NOT fix this by removing FocusOnNavigate: the announcement is the point,
   and screen-reader users lose it.

   :focus-visible is what separates the two cases. Programmatic focus on a
   tabindex="-1" heading is not "visible" focus, so the ring is suppressed. A
   keyboard user who somehow tabs to it still gets an indicator.
   --------------------------------------------------------------------------- */
/* First fix used :focus:not(:focus-visible) -- NOT ENOUGH. On initial page load,
   before any user interaction, Chrome's heuristic treats script-driven focus as
   focus-visible, so the ring still flashed on every fresh visit and only cleared
   after the first tap (Joey saw exactly this on his phone). tabindex="-1" means
   these headings can never be reached by keyboard, so removing the outline
   entirely loses nothing for keyboard users. */
h1[tabindex="-1"]:focus,
.hero-headline:focus {
    outline: none;
}