/* ============================================================
   Modern polish layer — Lynnaires Hair
   Loaded last so it refines the existing component styles.
   ============================================================ */

/* Content imagery -------------------------------------------------- */

#page-content .img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

#page-content .img:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

/* The small accreditation badge shouldn't carry a card shadow */
#page-content .cent .img,
#page-content .cent .img:hover {
    box-shadow: none;
    border-radius: 0;
    transform: none;
    max-width: 220px;
}

/* Section rhythm --------------------------------------------------- */

#page-content section + section {
    margin-top: 8px;
}

#page-content h1,
#page-content h2 {
    margin-bottom: 4px;
}

/* Pull the sticky-nav anchor a touch tighter on the CTA band */
.colorback .workspace {
    align-items: center;
}

.colorback h2 {
    line-height: 1.35;
}

/* Banner ----------------------------------------------------------- */

#banner-container h1 {
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

/* Gallery ---------------------------------------------------------- */

.gallery-thmb {
    border-radius: var(--radius);
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Testimonials ----------------------------------------------------- */

.testimonial-container {
    padding: 80px 0;
    position: relative;
}

.testimonial-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(20, 21, 18, 0.62);
    z-index: 2;
}

.testimonial {
    padding: 40px 36px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-lg);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.testimonial p {
    font-size: 18px;
    line-height: 1.7;
}

.testimonial p:last-of-type {
    color: var(--gold-soft);
    font-weight: 600;
    letter-spacing: .5px;
    margin-top: 4px;
}

.star {
    font-size: 18px;
    margin: 0 2px;
}

/* Buttons inside content keep comfortable tap targets ------------- */

a:has(> .button-56),
a:has(> .button-562) {
    display: inline-grid;
    justify-self: center;
}

/* Accessibility ---------------------------------------------------- */

a:focus-visible,
button:focus-visible,
.burger-icon:focus-visible,
.gallery-thmb:focus-visible {
    outline: 3px solid var(--gold-soft);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Honour users who prefer less motion ----------------------------- */

@media (prefers-reduced-motion: reduce) {

    :root {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .anim-kenburns-bottom {
        animation: none !important;
        transform: scale(1.05);
    }

    .anim-left,
    .anim-right,
    .anim-fade,
    .anim-scale {
        left: 0 !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Small-screen tuning --------------------------------------------- */

@media (max-width: 600px) {

    #page-content {
        padding: 48px 0;
    }

    .testimonial {
        padding: 28px 22px;
    }

    .slide-txt h2 {
        font-size: 32px;
    }
}