@font-face {
    font-family: 'Notevera Duo Daily';
    src: url('assets/fonts/NoteveraDuoDailyDemo-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Playfair Display', serif;
    background-color: #fff9db;
}

/* Skip to main content (WCAG 2.1 – keyboard / screen reader) */
.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.skip-link:focus {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 9999;
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    background: #000000;
    color: #ffffff;
    border-radius: 0.25rem;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

/* Golden accent - ensure it applies everywhere even if Tailwind loads late */
.text-brand-accent,
[class*="text-brand-accent"] {
    color: var(--brand-yellow);
}

/* Why Choose Our Offers? – brand-yellow circle + white icon */
.offers-icon-circle {
    width: 3rem;
    height: 3rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.75rem;
    border-radius: 9999px;
    background-color: var(--brand-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 640px) {
    .offers-icon-circle {
        width: 4rem;
        height: 4rem;
        margin-bottom: 1rem;
    }
}
.offers-icon-svg {
    width: 1.5rem;
    height: 1.5rem;
    color: #ffffff;
    stroke: #ffffff;
}
.offers-icon-svg path {
    stroke: #ffffff;
}
@media (min-width: 640px) {
    .offers-icon-svg {
        width: 2rem;
        height: 2rem;
    }
}

/* Hero "Our Services" button: white text must turn black on hover/focus so it's visible on white background */
#hero a[href="#services"] {
    color: #ffffff;
}
#hero a[href="#services"]:hover,
#hero a[href="#services"]:focus,
#hero a[href="#services"]:focus-visible,
#hero a[href="#services"]:active {
    background-color: #ffffff;
    color: #000000;
}

/* Anchor targets: sit below fixed header when scrolling from nav */
#hero,
#offers,
#highlights,
#our-story,
#services,
#gallery,
#salon-vibe,
#media,
#artists,
#reviews,
#contact {
    scroll-margin-top: 5rem;
}
@media (min-width: 768px) {
    #hero, #offers, #highlights, #our-story, #services, #gallery, #salon-vibe, #artists, #reviews, #contact {
        scroll-margin-top: 5.5rem;
    }
}

/* Footer: always black background (as original) */
#footer,
#footer footer,
footer#footer {
    background-color: #000000;
    color: #ffffff;
}

.font-sans {
    font-family: 'Inter', sans-serif;
}

.animation-delay-200 {
    animation-delay: 200ms;
}

.animation-delay-400 {
    animation-delay: 400ms;
}

.animation-delay-600 {
    animation-delay: 600ms;
}

/* ========== Interaction: nav links ========== */
#header nav a[href^="#"],
#mobile-menu a[href^="#"] {
    position: relative;
    padding: 0.25rem 0;
    transition: color 0.2s ease, box-shadow 0.2s ease;
}
#header nav a[href^="#"]::after,
#mobile-menu a[href^="#"]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: #000000;
    transform: scaleX(0);
    transition: transform 0.2s ease;
}
#header nav a[href^="#"]:hover::after,
#mobile-menu a[href^="#"]:hover::after {
    transform: scaleX(1);
}
#header nav a[href^="#"]:hover,
#mobile-menu a[href^="#"]:hover {
    color: #000000;
}
#header nav a[href^="#"].nav-current,
#mobile-menu a[href^="#"].nav-current {
    color: #000000;
    font-weight: 600;
}
#header nav a[href^="#"].nav-current::after,
#mobile-menu a[href^="#"].nav-current::after {
    transform: scaleX(1);
}
/* Mobile menu: avoid underline bar that looks like divider */
#mobile-menu a[href^="#"]::after {
    display: none;
}
#header nav a[href^="#"]:focus-visible,
#mobile-menu a[href^="#"]:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 4px;
}

/* ========== Services accordions: compact header, balanced arrow ========== */
/* Accordion visual tokens (default: Editorial Edge) */
:root {
    --acc-bg: linear-gradient(135deg, #fffdf9 0%, #f8f5ef 100%);
    --acc-border: rgba(255, 212, 0, 0.36);
    --acc-shadow: 0 6px 14px rgba(0,0,0,0.06);
    --acc-shadow-open: 0 14px 26px rgba(0,0,0,0.10);
    --acc-border-open: var(--brand-yellow);
    --acc-border-hover: rgba(255, 212, 0, 0.65);
    --acc-summary-bg: rgba(255,255,255,0.78);
    --acc-summary-open-bg: linear-gradient(90deg, rgba(255, 212, 0, 0.22) 0%, rgba(163,20,82,0.08) 100%);
    --acc-summary-hover-bg: rgba(255,255,255,0.96);
    --acc-divider: rgba(255, 212, 0, 0.38);
    --acc-content-bg: rgba(255,255,255,0.94);
    --acc-title: #1d1d1d;
    --acc-subtitle: #3f3a2b;
    --acc-icon: #5b5338;
}

#services details {
    border-radius: 1.1rem;
    border: 1px solid var(--acc-border);
    background: var(--acc-bg);
    box-shadow: var(--acc-shadow);
    overflow: hidden;
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
#services details[open] {
    box-shadow: var(--acc-shadow-open);
    border-color: var(--acc-border-open);
    border-left: 4px solid var(--brand-yellow);
}
#services details:hover {
    transform: translateY(-2px);
    border-color: var(--acc-border-hover);
}
#services details summary {
    list-style: none;
    padding: 1rem 1.25rem;
    gap: 1rem;
    align-items: center;
    background: var(--acc-summary-bg);
    transition: background-color 0.2s ease, color 0.2s ease;
}
#services details summary::-webkit-details-marker {
    display: none;
}
#services details summary > div {
    flex: 1;
    min-width: 0;
}
#services details summary h3 {
    margin-bottom: 0.25rem;
    font-size: 1.28rem;
    line-height: 1.3;
    color: var(--acc-title);
}
#services details summary p {
    margin-top: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--acc-subtitle);
}
@media (min-width: 640px) {
    #services details summary {
        padding: 1rem 1.25rem;
    }
    #services details summary h3 {
        font-size: 1.375rem;
    }
}
#services details summary svg {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    margin-left: 0.5rem;
    color: var(--acc-icon);
    transition: transform 0.25s ease;
}
#services details[open] summary svg {
    transform: rotate(180deg);
}
#services details[open] summary {
    background: var(--acc-summary-open-bg);
    border-bottom: 1px solid var(--acc-divider);
}
#services details summary:hover {
    background-color: var(--acc-summary-hover-bg);
}
#services details summary:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 2px;
}
#services details > div {
    padding: 1.25rem 1.25rem;
    border-top: 1px solid var(--acc-divider);
    background: var(--acc-content-bg);
}
@media (min-width: 640px) {
    #services details > div {
        padding: 1.5rem 1.5rem;
    }
}

/* ========== FAQ accordion: size, spacing, match services polish ========== */
#faqs {
    scroll-margin-top: 5rem;
}
#faqs details {
    border-radius: 0.75rem;
    border: 1px solid var(--acc-border);
    box-shadow: var(--acc-shadow);
    background: var(--acc-bg);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
#faqs details[open] {
    box-shadow: var(--acc-shadow-open);
    border-color: var(--acc-border-open);
    border-left: 4px solid var(--brand-yellow);
}
#faqs details summary {
    list-style: none;
    padding: 1rem 1.25rem;
    align-items: center;
    gap: 1rem;
    background: var(--acc-summary-bg);
    transition: background-color 0.2s ease;
}
#faqs details summary::-webkit-details-marker {
    display: none;
}
#faqs details summary span {
    flex: 1;
    min-width: 0;
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 600;
}
@media (min-width: 640px) {
    #faqs details summary span {
        font-size: 1.125rem;
    }
}
#faqs details summary svg {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.5rem;
    color: var(--acc-icon);
    transition: transform 0.25s ease;
}
#faqs details[open] summary svg {
    transform: rotate(180deg);
}
#faqs details[open] summary {
    background: var(--acc-summary-open-bg);
    border-bottom: 1px solid var(--acc-divider);
}
#faqs details summary:hover {
    background-color: var(--acc-summary-hover-bg);
}
#faqs details summary:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 2px;
}
#faqs details > div {
    padding: 0 1.25rem 1.25rem;
    border-top: none;
    background: var(--acc-content-bg);
}
#faqs details > div p {
    margin: 0;
    padding-top: 0.25rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--acc-subtitle);
}

/* ========== About (#highlights) section: two-column layout, card accent ========== */
.section-title-caps {
    letter-spacing: 0.02em;
}
#highlights .highlights-intro {
    max-width: 36rem;
}
#highlights .highlights-card {
    border-left: 4px solid transparent;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
#highlights .highlights-card:hover {
    border-left-color: var(--brand-yellow);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
#highlights .highlights-card-num {
    color: var(--brand-yellow);
}

/* ========== Our Story (#our-story) ========== */
#our-story {
    background-color: #ffffff !important;
}

#our-story .our-story-grid {
    align-items: stretch;
}

#our-story .our-story-image {
    width: 100%;
    margin: 0;
    min-height: 0;
}

#our-story .our-story-image img,
#our-story .our-story-photo {
    display: block;
    width: 100%;
    height: auto;
}

#our-story .our-story-copy {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    #our-story .our-story-image {
        position: relative;
        align-self: stretch;
    }

    #our-story .our-story-image img,
    #our-story .our-story-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 18%;
    }
}

@media (max-width: 767px) {
    #our-story .our-story-body {
        text-align: left;
        text-align-last: auto;
    }
}

#our-story .our-story-body {
    margin: 0;
    text-align: justify;
    text-align-last: left;
    text-wrap: pretty;
    hyphens: auto;
    -webkit-hyphens: auto;
    line-height: 1.75;
    max-width: none;
}

#our-story .our-story-quote {
    margin: 0.25rem 0;
    padding: 0.75rem 0 0.75rem 1rem;
    border-left: 3px solid var(--brand-yellow);
    text-align: left;
    line-height: 1.55;
    max-width: none;
}

#our-story .our-story-grid > * {
    min-width: 0;
}

#our-story .section-title-caps {
    font-family: 'Playfair Display', serif;
    letter-spacing: 0.01em;
    line-height: 1.08;
}

/* ========== Interaction: cards and buttons ========== */
/* Service/package/highlight cards: subtle yellow border on hover */
#main .bg-neutral-50.border-neutral-200:hover,
#main .bg-brand-secondary.border-neutral-200:hover,
#offers .bg-neutral-50:hover {
    border-color: var(--brand-yellow);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Book Now buttons: slight scale on hover for feedback */
a.bg-green-500 {
    transition: background-color 0.2s ease, transform 0.2s ease;
}
a.bg-green-500:hover {
    transform: scale(1.02);
}
a.bg-green-500:focus-visible,
button:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 2px;
}
#hero a[href="#services"]:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}
#footer a:focus-visible {
    outline: 2px solid var(--brand-yellow);
    outline-offset: 2px;
}

/* ========== Designer polish: section titles, reduced motion, selection ========== */
/* All-caps section titles: subtle letter-spacing for readability */
#faqs .text-center h2,
#services .text-center h2,
#reviews .text-center h2,
#contact .text-center h2,
section[id] .text-center h2.text-4xl {
    letter-spacing: 0.02em;
}

/* ========== Brand refresh: bolder, creative editorial palette ========== */
:root {
    --brand-ink: #0f0f10;
    --brand-black-soft: #1c1c1e;
    --brand-yellow: #ffd400;
    --brand-yellow-deep: var(--brand-yellow);
    --brand-yellow-soft: var(--brand-yellow);
    --brand-accent-2: #b1005a;
    --brand-accent-3: #ff3d81;
    --editorial-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

/* Make nav feel less rigid/corporate */
#header nav a[href^="#"],
#mobile-menu a[href^="#"] {
    text-transform: none;
    letter-spacing: 0.01em;
}
#header nav a[href^="#"]:hover,
#mobile-menu a[href^="#"]:hover {
    color: var(--brand-yellow-deep);
}
#header nav a[href^="#"]:hover::after {
    background: var(--brand-yellow-deep);
}
#header nav a[href^="#"].nav-current,
#mobile-menu a[href^="#"].nav-current {
    color: var(--brand-yellow-deep);
}
#header nav a[href^="#"].nav-current::after {
    background: var(--brand-yellow-deep);
}

/* Stronger editorial heading presence */
section[id] .text-center h2.text-4xl,
#highlights .section-title-caps {
    font-family: 'Playfair Display', serif;
    letter-spacing: 0.01em;
    line-height: 1.08;
}

/* Artistic divider accent under major section titles */
section[id] .text-center h2.text-4xl::after {
    content: "";
    display: block;
    width: 4.5rem;
    height: 4px;
    margin: 0.75rem auto 0;
    background: var(--brand-yellow);
    border-radius: 9999px;
}

/* More expressive cards across gallery/team/reviews/services */
#gallery .group > div:first-child,
#artists .bg-white,
#reviews .bg-brand-secondary,
#services .bg-neutral-50,
#faqs details {
    border-radius: 1rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

#gallery .group:hover > div:first-child,
#artists .bg-white:hover,
#reviews .bg-brand-secondary:hover,
#services .bg-neutral-50:hover,
#faqs details:hover {
    transform: translateY(-4px);
    box-shadow: var(--editorial-shadow);
    border-color: var(--brand-yellow-deep);
}

/* Distinct CTA polish: yellow-forward editorial buttons */
a.bg-green-500 {
    border-radius: 0.75rem;
    background: var(--brand-yellow);
    color: var(--brand-ink);
    border: 1px solid rgba(15, 15, 16, 0.2);
    box-shadow: 0 10px 20px rgba(255, 212, 0, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
a.bg-green-500:hover {
    transform: translateY(-2px) scale(1.01);
    filter: saturate(1.08);
    box-shadow: 0 14px 24px rgba(255, 212, 0, 0.45);
}
a.bg-green-500 svg {
    color: var(--brand-ink);
}

/* Global stripe background should remain visible across sections */
#hero,
#offers,
#highlights,
#services,
#gallery,
#salon-vibe,
#media,
#artists,
#reviews,
#faqs,
#contact {
    background-color: transparent !important;
    background-image: none !important;
}

/* Stripe visuals are intentionally limited to section separators only */

/* CTA strip detail + stronger yellow accents */
#hero a.bg-green-500,
#hero a[href="#services"] {
    position: relative;
    overflow: hidden;
}

#hero a[href="#services"] {
    border-color: var(--brand-yellow);
    background: rgba(15, 15, 16, 0.35);
    color: #ffffff;
}
#hero a[href="#services"]:hover,
#hero a[href="#services"]:focus-visible {
    background-color: var(--brand-yellow);
    color: #101010;
}

/* Vibrant editorial accents on key headings/active labels */
#highlights h3,
#offers h3,
#services > div > .text-center h2,
#gallery .text-center h2 {
    text-shadow: 0 0 0 rgba(0,0,0,0);
}
/* Editorial B&W stripe frame around yellow story cards */
.highlights-stripe-frame {
    height: 100%;
    padding: 6px;
    border-radius: 1.75rem;
    background: repeating-linear-gradient(
        90deg,
        var(--brand-ink) 0 6px,
        #ffffff 6px 12px
    );
    box-shadow: 0 12px 28px rgba(15, 15, 16, 0.1);
}

.highlights-stripe-frame .highlights-card {
    background-color: var(--brand-yellow) !important;
    border: none !important;
    border-radius: 1.35rem;
    box-shadow: none;
    overflow: hidden;
}

#highlights .grid.grid-cols-1.md\:grid-cols-2.gap-8.lg\:gap-12 > .highlights-stripe-frame .highlights-card {
    background-color: var(--brand-yellow) !important;
}
#offers h3,
#gallery .text-center h2,
#reviews .text-center h2 {
    color: var(--brand-ink);
}
#offers .text-center h4,
#reviews .font-semibold {
    color: var(--brand-black-soft);
}

/* ========== Reference-inspired restyle (inspiration-only) ========== */
/* Editorial hierarchy without changing content structure */
#hero h1 {
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 0.95;
}
#hero h2 {
    letter-spacing: 0.01em;
}

section[id] .text-center h2.text-4xl,
#highlights .section-title-caps {
    font-weight: 700;
    font-size: clamp(2rem, 4.6vw, 3.6rem);
    line-height: 1.02;
}

section[id] .text-center p.font-sans {
    font-size: clamp(0.95rem, 1.4vw, 1.1rem);
    color: #303030;
}

/* Tighter editorial spacing rhythm across homepage sections */
#highlights,
#our-story,
#offers,
#services,
#gallery,
#salon-vibe,
#media,
#artists,
#reviews,
#faqs,
#contact {
    border-top: 1px solid rgba(15, 15, 16, 0.08);
}

#highlights .max-w-7xl,
#our-story .max-w-7xl,
#services .max-w-7xl,
#gallery .max-w-7xl,
#media .max-w-7xl,
#artists .max-w-7xl,
#reviews .max-w-7xl,
#contact .max-w-7xl {
    position: relative;
}

/* Monochrome-forward cards with stronger edges */
#services .bg-neutral-50,
#artists .bg-white,
#reviews .bg-brand-secondary,
#gallery .group > div:first-child,
#media .rounded-xl {
    border: 1px solid rgba(15, 15, 16, 0.14);
    background-color: #ffffff;
}


/* CTA hierarchy: primary (yellow-black) and secondary (outlined) */
a.bg-green-500,
#hero a.bg-green-500 {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#hero a[href="#services"] {
    border-width: 2px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

#hero a[href="#services"]:hover,
#hero a[href="#services"]:focus-visible {
    box-shadow: 0 10px 20px rgba(255, 212, 0, 0.28);
    transform: translateY(-2px) scale(1.01);
    filter: saturate(1.08);
}

/* Premium motion and hover language */
#gallery .group,
#artists .bg-white,
#reviews .bg-brand-secondary,
#services .bg-neutral-50 {
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.2s ease;
}

#gallery .group:hover,
#artists .bg-white:hover,
#reviews .bg-brand-secondary:hover,
#services .bg-neutral-50:hover {
    border-color: var(--brand-yellow-deep);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
}

/* ========== Yellow Boxes + Bold Stripes Pass ========== */
:root {
    --box-yellow-1: var(--brand-yellow);
    --box-yellow-2: var(--brand-yellow);
    --box-yellow-3: var(--brand-yellow);
    --ink-strong: #101010;
}

/* White containers with yellow borders for major homepage boxes/cards */
#offers .rounded-2xl,
#services details,
#services .bg-neutral-50,
#faqs details,
#gallery .group > div:first-child,
#artists .bg-white,
#reviews .bg-brand-secondary,
#media .rounded-xl {
    background-color: #ffffff !important;
    border-color: var(--brand-yellow) !important;
}

/* Keep text readable on yellow surfaces */
#services .bg-neutral-50 h4,
#services .bg-neutral-50 p,
#faqs details summary span,
#faqs details > div p,
#artists .bg-white h3,
#artists .bg-white p,
#reviews .bg-brand-secondary p,
#reviews .bg-brand-secondary .font-semibold,
#offers h4,
#offers p {
    color: var(--ink-strong) !important;
}

/* Keep section wrappers positioned */
#highlights,
#our-story,
#offers,
#services,
#gallery,
#salon-vibe,
#media,
#artists,
#reviews,
#faqs,
#contact {
    position: relative;
}

/* Bold CTA stripe strips */
#hero a.bg-green-500,
#hero a[href="#services"],
a.bg-green-500 {
    background-image: none !important;
    background-color: var(--brand-yellow) !important;
    color: var(--ink-strong) !important;
    border-color: rgba(0, 0, 0, 0.5) !important;
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.22), 0 0 0 2px rgba(255, 255, 255, 0.28) inset !important;
}

/* Interaction safeguards for readability/usability */
#gallery .group:hover > div:first-child,
#artists .bg-white:hover,
#reviews .bg-brand-secondary:hover,
#services .bg-neutral-50:hover,
#faqs details:hover,
#media .rounded-xl:hover {
    border-color: var(--brand-yellow) !important;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.28) !important;
}

/* Stronger edge accents for core content cards */
#services .bg-neutral-50,
#artists .bg-white,
#reviews .bg-brand-secondary {
    border-left: 4px solid transparent;
}
#services .bg-neutral-50:hover,
#artists .bg-white:hover,
#reviews .bg-brand-secondary:hover {
    border-left-color: var(--brand-yellow-deep);
}

/* Gallery cards: punchier hover contrast */
#gallery .group > div:first-child {
    border: 1px solid rgba(15, 15, 16, 0.06);
}
#gallery .group:hover > div:first-child {
    border-color: rgba(255, 212, 0, 0.9);
}
/* Refined text selection color (brand accent) */
::selection {
    background-color: rgba(255, 212, 0, 0.28);
    color: inherit;
}

/* ========== Paragraph formatting cleanup (key sections only) ========== */
#hero p:not(.uppercase):not(.hero-tagline),
#highlights p,
#artists p,
#services details > div p,
#faqs details > div p {
    line-height: 1.72;
}

/* Consistent paragraph rhythm */
#hero p:not(.uppercase):not(.hero-tagline),
#highlights p,
#services details > div p,
#artists .bg-white p,
#faqs details > div p {
    margin-bottom: 0.85rem;
}
#hero p:not(.uppercase):not(.hero-tagline):last-child,
#highlights p:last-child,
#services details > div p:last-child,
#artists .bg-white p:last-child,
#faqs details > div p:last-child {
    margin-bottom: 0;
}

/* Comfortable reading measure for dense copy blocks */
#hero p:not(.uppercase):not(.hero-tagline),
#highlights .grid.grid-cols-1.md\:grid-cols-2.gap-8.lg\:gap-12 .highlights-card p,
#services details > div p,
#artists .bg-white p,
#faqs details > div p {
    max-width: 68ch;
}
#hero p:not(.uppercase):not(.hero-tagline) {
    margin-left: auto;
    margin-right: auto;
}
#highlights .grid.grid-cols-1.md\:grid-cols-2.gap-8.lg\:gap-12 .highlights-card p {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}

#hero p.hero-tagline {
    font-family: 'Notevera Duo Daily', 'Dancing Script', cursive;
    font-weight: 400;
    font-size: clamp(1.35rem, 3.5vw, 2.25rem);
    line-height: 1.35;
    letter-spacing: 0.02em;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;
}

/* Keep service and FAQ lists compact but readable */
#services details > div p,
#faqs details > div p {
    font-size: 0.98rem;
}
/* Respect reduced motion for accessibility */
/* Team section — consistent headshot framing across varied source photos */
#artists .artist-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Source ratios: Riddhi 900×1600 (0.56), Roshni 1086×1448 (0.75), Tina 434×610 (0.71), Analisa 1023×1537 (0.67) */
#artists .artist-photo--riddhi  { object-position: center 18%; }
#artists .artist-photo--roshni  { object-position: center 40%; }
#artists .artist-photo--tina    { object-position: center 24%; }
#artists .artist-photo--analisa { object-position: center 20%; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    #header nav a[href^="#"]::after,
    #mobile-menu a[href^="#"]::after {
        transition: none;
    }
    #services details summary svg,
    #faqs details summary svg {
        transition: none;
    }
}