/*
Theme Name: New ProFX Website 2.0 Theme
Theme URI: https://profxphotobooth.com
Author: Pro-FX Photo Booth LLC
Author URI: https://profxphotobooth.com
Description: Custom WordPress theme for Pro-FX Photo Booth — Arizona's premier photo booth rental company serving weddings, corporate events, brand activations, private parties, and community events across Mesa, Gilbert, Chandler, Queen Creek, Scottsdale, and the greater Phoenix Metro area.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: profx-theme
Tags: custom-theme, single-page, one-page, mobile-first
*/

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */

:root {
    --color-bg:               #FAF7F4;
    --color-bg-dark:          #1A1A1A;
    --color-text:             #1A1A1A;
    --color-text-muted:       #5C5C5C;
    --color-accent:           #C09A5A;
    --color-accent-light:     #E8D5B0;
    --color-accent-hover:     #A8843E;
    --color-white:            #FFFFFF;
    --color-border:           #E8E0D8;
    --color-btn-primary-text: #1A1A1A;

    --font-heading: 'Georgia', serif;
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;

    --space-xs:  0.5rem;
    --space-sm:  1rem;
    --space-md:  1.5rem;
    --space-lg:  2.5rem;
    --space-xl:  4rem;
    --space-2xl: 6rem;

    --max-width: 1200px;
    --radius:    8px;
    --radius-lg: 16px;
}

/* ============================================================
   COLOR SCHEME OVERRIDES
   Classic Champagne is the default (:root above).
   Each preset below overrides only the color variables.
   No layout, font, spacing, or structure is affected.
   ============================================================ */

body.scheme-black_gold {
    --color-bg:               #141414;
    --color-bg-dark:          #0A0A0A;
    --color-text:             #EDE8E0;
    --color-text-muted:       #9A9080;
    --color-accent:           #C09A5A;
    --color-accent-light:     #2A2318;
    --color-accent-hover:     #D4AA6A;
    --color-white:            #1E1C18;
    --color-border:           #2E2A22;
    --color-btn-primary-text: #1A1A1A;
}

body.scheme-ivory_sage {
    --color-bg:               #F5F2EA;
    --color-bg-dark:          #2A3328;
    --color-text:             #1A1E18;
    --color-text-muted:       #5A5F55;
    --color-accent:           #6A8F5A;
    --color-accent-light:     #CDD9C5;
    --color-accent-hover:     #527A45;
    --color-white:            #FAFDF8;
    --color-border:           #D4D8CC;
    --color-btn-primary-text: #1A1E18;
}

body.scheme-desert_rustic {
    --color-bg:               #F5EDE0;
    --color-bg-dark:          #2A1E14;
    --color-text:             #2A1E14;
    --color-text-muted:       #6B5242;
    --color-accent:           #A84E2A;
    --color-accent-light:     #EDD8C8;
    --color-accent-hover:     #8C4020;
    --color-white:            #FFFAF5;
    --color-border:           #DCCEBB;
    --color-btn-primary-text: #FFFAF5;
}

body.scheme-modern_mocha {
    --color-bg:               #F2EDE7;
    --color-bg-dark:          #1E1510;
    --color-text:             #1E1510;
    --color-text-muted:       #6B5A50;
    --color-accent:           #9E7A52;
    --color-accent-light:     #DDD0BF;
    --color-accent-hover:     #846040;
    --color-white:            #FAF6F2;
    --color-border:           #D4C8BB;
    --color-btn-primary-text: #1E1510;
}

body.scheme-editorial_cream_black {
    --color-bg:               #F8F5F0;
    --color-bg-dark:          #161412;
    --color-text:             #161412;
    --color-text-muted:       #6B6560;
    --color-accent:           #B89A6A;
    --color-accent-light:     #E4D8C0;
    --color-accent-hover:     #9A8050;
    --color-white:            #FFFFFF;
    --color-border:           #E0D8CE;
    --color-btn-primary-text: #161412;
}

body.scheme-mocha_mousse {
    --color-bg:               #F5EFE8;
    --color-bg-dark:          #1C1008;
    --color-text:             #1C1008;
    --color-text-muted:       #6E5A4A;
    --color-accent:           #7E5E3C;
    --color-accent-light:     #D9C8B0;
    --color-accent-hover:     #664A28;
    --color-white:            #FBF8F4;
    --color-border:           #D8C8B4;
    --color-btn-primary-text: #FBF8F4;
}

body.scheme-blush_luxe {
    --color-bg:               #FAF4F2;
    --color-bg-dark:          #1A1416;
    --color-text:             #1A1416;
    --color-text-muted:       #6B5A58;
    --color-accent:           #C4907A;
    --color-accent-light:     #EDD9D4;
    --color-accent-hover:     #A87560;
    --color-white:            #FFFFFF;
    --color-border:           #E8D8D4;
    --color-btn-primary-text: #1A1416;
}

body.scheme-midnight_champagne {
    --color-bg:               #0F1218;
    --color-bg-dark:          #070A0D;
    --color-text:             #ECE8E0;
    --color-text-muted:       #9A9488;
    --color-accent:           #C4A060;
    --color-accent-light:     #26211A;
    --color-accent-hover:     #D8B474;
    --color-white:            #1A1F28;
    --color-border:           #2A2E38;
    --color-btn-primary-text: #0F1218;
}

body.scheme-emerald_ivory {
    --color-bg:               #F8F6EE;
    --color-bg-dark:          #14201A;
    --color-text:             #14201A;
    --color-text-muted:       #4A6055;
    --color-accent:           #2D6B50;
    --color-accent-light:     #C8DDD4;
    --color-accent-hover:     #1F5040;
    --color-white:            #FAFFF8;
    --color-border:           #CCDBD2;
    --color-btn-primary-text: #FAFFF8;
}

body.scheme-terracotta_linen {
    --color-bg:               #F7F0E8;
    --color-bg-dark:          #241810;
    --color-text:             #241810;
    --color-text-muted:       #6E5240;
    --color-accent:           #A84E30;
    --color-accent-light:     #EED8C8;
    --color-accent-hover:     #8C3E22;
    --color-white:            #FFFCF8;
    --color-border:           #DECCB4;
    --color-btn-primary-text: #FFFCF8;
}

body.scheme-soft_taupe_gold {
    --color-bg:               #F0EBE4;
    --color-bg-dark:          #2A2520;
    --color-text:             #2A2520;
    --color-text-muted:       #6B6258;
    --color-accent:           #B09060;
    --color-accent-light:     #E0D4C0;
    --color-accent-hover:     #947848;
    --color-white:            #FAF7F2;
    --color-border:           #DDD5C8;
    --color-btn-primary-text: #2A2520;
}

/* ============================================================
   BASE RESET + MOBILE-FIRST FOUNDATION
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

/* ============================================================
   TYPOGRAPHY — mobile-first with fluid scaling
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: 1.2;
    color: var(--color-text);
}

h1 { font-size: clamp(2rem,   6vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.75rem); }

p {
    max-width: 65ch;
    color: var(--color-text-muted);
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

.section {
    padding-block: var(--space-xl);
}

@media (min-width: 1024px) {
    .section {
        padding-block: var(--space-2xl);
    }
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
    display: inline-block;
    padding: 0.875rem 1.75rem;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    text-align: center;
    min-width: 160px;
    touch-action: manipulation;
}

.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-btn-primary-text);
    border-color: var(--color-accent);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-btn-primary-text);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-text);
    border-color: var(--color-text);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--color-text);
    color: var(--color-white);
}

.btn:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

/* ============================================================
   SITE HEADER — scaffold
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    padding-block: var(--space-sm);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.site-logo {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: 0.02em;
}

/* Skip link — accessibility */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    position: static;
    width: auto;
    height: auto;
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-accent);
    color: var(--color-white);
    font-weight: 600;
    z-index: 9999;
}

/* Hamburger toggle button */

.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: var(--radius);
    flex-shrink: 0;
}

.nav-toggle:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

.nav-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--color-text);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile navigation — hidden by default, opens on toggle */

.site-nav {
    display: none;
    width: 100%;
    padding: var(--space-xs) 0 var(--space-md);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-xs);
}

.site-nav.is-open {
    display: flex;
    flex-direction: column;
}

.site-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.site-nav__link {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    min-height: 44px;
    text-decoration: none;
}

.site-nav__link:hover {
    color: var(--color-accent);
}

.site-nav__link:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.site-nav__cta {
    margin-top: var(--space-md);
    width: 100%;
    text-align: center;
    min-width: 0;
}

/* Desktop navigation — hamburger replaced by inline nav at 1024px */

@media (min-width: 1024px) {
    .nav-toggle {
        display: none;
    }

    .site-nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-xs);
        width: auto;
        padding: 0;
        border-top: none;
        margin-top: 0;
    }

    .site-nav__list {
        display: flex;
        flex-direction: row;
        width: auto;
    }

    .site-nav__link {
        padding: 0.5rem 0.625rem;
        font-size: 0.875rem;
        border-bottom: none;
        min-height: auto;
        white-space: nowrap;
    }

    .site-nav__cta {
        display: none; /* 8 nav links fill the header at 1024px; each section has its own CTA */
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-toggle__bar {
        transition: none;
    }
}

/* ============================================================
   SITE FOOTER — scaffold
   ============================================================ */

.site-footer {
    background-color: var(--color-bg-dark);
    color: var(--color-white);
    padding-block: var(--space-lg);
    text-align: center;
    font-size: 0.875rem;
}

.site-footer p {
    max-width: none;
    color: #B0B0B0;
    margin-block: 0.25rem;
}

.site-footer a {
    color: var(--color-accent-light);
}

/* ============================================================
   HERO SECTION
   ============================================================ */

.section--hero {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-xl);
    text-align: center;
}

.hero__inner {
    max-width: 740px;
    margin-inline: auto;
}

.hero__eyebrow {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    max-width: none;
    margin-bottom: var(--space-sm);
}

.hero__headline {
    font-size: clamp(2.25rem, 7vw, 4rem);
    letter-spacing: -0.01em;
    margin-bottom: var(--space-md);
}

.hero__sub {
    font-size: 1.0625rem;
    color: var(--color-text-muted);
    line-height: 1.75;
    max-width: 58ch;
    margin-inline: auto;
    margin-bottom: var(--space-lg);
}

.hero__ctas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

@media (min-width: 480px) {
    .hero__ctas {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
}

.hero__highlights {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem var(--space-md);
    padding: 0;
}

.hero__highlights li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.hero__highlights li::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-accent);
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .section--hero {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-2xl);
    }

    .hero__highlights {
        gap: 0.625rem var(--space-lg);
    }
}

/* ============================================================
   SECTION INTRO — reusable centered heading block
   ============================================================ */

.section-intro {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: var(--space-lg);
}

.section-intro__heading {
    margin-bottom: var(--space-sm);
}

.section-intro__sub {
    font-size: 1.0625rem;
    line-height: 1.7;
    margin-inline: auto;
}

@media (min-width: 1024px) {
    .section-intro {
        margin-bottom: var(--space-xl);
    }
}

/* ============================================================
   TRUST / VALUE STRIP
   ============================================================ */

.section--trust {
    padding-block: var(--space-lg);
    background-color: var(--color-bg-dark);
}

@media (min-width: 1024px) {
    .section--trust {
        padding-block: var(--space-lg);
    }
}

.trust__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 480px) {
    .trust__grid {
        grid-template-columns: 1fr 1fr;
    }

    .trust__item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (min-width: 960px) {
    .trust__grid {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--space-sm);
    }

    .trust__item:last-child:nth-child(odd) {
        grid-column: auto;
    }
}

.trust__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-sm);
}

.trust__icon {
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.trust__label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.4;
}

.trust__desc {
    font-size: 0.8125rem;
    color: #9A9A9A;
    line-height: 1.5;
    max-width: 18ch;
    margin: 0 auto;
}

/* ============================================================
   EXPERIENCES SECTION
   ============================================================ */

.experiences__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 640px) {
    .experiences__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .experiences__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.exp-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.exp-card--featured {
    border-color: var(--color-accent);
    border-width: 2px;
}

.exp-card__top {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.exp-card__name {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    line-height: 1.2;
    color: var(--color-text);
    margin: 0;
}

.exp-card__tagline {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    max-width: none;
    margin: 0;
}

.exp-card__price {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin: var(--space-xs) 0 0;
    max-width: none;
}

.exp-card__price strong {
    color: var(--color-text);
    font-size: 1.25rem;
    font-weight: 700;
}

.exp-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.exp-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.exp-card__features li::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-accent);
    flex-shrink: 0;
    margin-top: 0.5em;
}

.exp-card__cta {
    width: 100%;
    text-align: center;
}

/* ============================================================
   WEDDINGS SECTION
   ============================================================ */

.section--weddings {
    background-color: var(--color-white);
}

.weddings__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .weddings__inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
    }
}

@media (min-width: 1024px) {
    .weddings__inner {
        gap: var(--space-xl);
    }
}

.weddings__eyebrow {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    max-width: none;
    margin-bottom: var(--space-sm);
}

.weddings__heading {
    margin-bottom: var(--space-md);
}

.weddings__lead {
    font-size: 1.0625rem;
    line-height: 1.75;
    margin-bottom: var(--space-md);
}

.weddings__highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.weddings__highlights li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.weddings__highlights li::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-accent);
    flex-shrink: 0;
    margin-top: 0.55em;
}

.weddings__addon {
    font-size: 0.875rem;
    font-style: italic;
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}

.weddings__visual {
    background-color: var(--color-accent-light);
    border-radius: var(--radius-lg);
    aspect-ratio: 4 / 3;
    width: 100%;
    position: relative;
    overflow: hidden;
    min-height: 240px;
}

@media (min-width: 768px) {
    .weddings__visual {
        aspect-ratio: unset;
        min-height: 300px;
    }
}

.weddings__visual::after {
    content: 'Wedding Photography';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    white-space: nowrap;
}

/* ============================================================
   BOOTH SPOTLIGHT SECTIONS
   ============================================================ */

.section--booth-spotlight {
    background-color: var(--color-bg);
}

.booth-spotlight--white {
    background-color: var(--color-white);
}

.booth-spotlight__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .booth-spotlight__inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
    }

    .booth-spotlight--reverse .booth-spotlight__visual {
        order: -1;
    }
}

@media (min-width: 1024px) {
    .booth-spotlight__inner {
        gap: var(--space-xl);
    }
}

.booth-spotlight__eyebrow {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    max-width: none;
    margin-bottom: var(--space-sm);
}

.booth-spotlight__heading {
    margin-bottom: var(--space-md);
}

.booth-spotlight__lead {
    font-size: 1.0625rem;
    line-height: 1.75;
    margin-bottom: var(--space-md);
}

.booth-spotlight__highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.booth-spotlight__highlights li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.booth-spotlight__highlights li::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-accent);
    flex-shrink: 0;
    margin-top: 0.55em;
}

.booth-spotlight__note {
    font-size: 0.875rem;
    font-style: italic;
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}

.booth-spotlight__visual {
    background-color: var(--color-accent-light);
    border-radius: var(--radius-lg);
    aspect-ratio: 4 / 3;
    width: 100%;
    position: relative;
    overflow: hidden;
    min-height: 240px;
}

@media (min-width: 768px) {
    .booth-spotlight__visual {
        aspect-ratio: unset;
        min-height: 300px;
    }
}

.booth-spotlight__visual::after {
    content: attr(data-placeholder);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    white-space: nowrap;
}

/* ============================================================
   BACKDROPS SECTION
   ============================================================ */

.section--backdrops {
    background-color: var(--color-bg-dark);
}

.section--backdrops .section-intro__heading {
    color: var(--color-white);
}

.section--backdrops .section-intro__sub {
    color: #9A9A9A;
}

.backdrops__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

@media (min-width: 640px) {
    .backdrops__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .backdrops__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.backdrop-cat {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.backdrop-cat__name {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0;
}

.backdrop-cat__tagline {
    font-size: 1.0625rem;
    font-family: var(--font-heading);
    color: var(--color-white);
    line-height: 1.4;
    max-width: none;
    margin: 0;
}

.backdrop-cat__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.backdrop-cat__list li {
    font-size: 0.875rem;
    color: #9A9A9A;
    line-height: 1.5;
    padding-left: 1rem;
    position: relative;
}

.backdrop-cat__list li::before {
    content: '\2014';
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-size: 0.75rem;
    line-height: 1.75;
}

.backdrops__cta {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.backdrops__cta-note {
    color: #9A9A9A;
    font-size: 0.9375rem;
    max-width: 44ch;
    margin: 0;
}

/* ============================================================
   PACKAGES / PRICING SECTION
   ============================================================ */

.packages__list {
    border-top: 1px solid var(--color-border);
    margin-bottom: var(--space-xl);
}

.pkg-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
}

@media (min-width: 640px) {
    .pkg-row {
        grid-template-columns: 160px 1fr auto;
        align-items: center;
        gap: var(--space-md);
    }
}

.pkg-row__info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pkg-row__name {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    color: var(--color-text);
    font-weight: 700;
}

.pkg-row__tag {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.pkg-row__desc {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    max-width: none;
    margin: 0;
}

.pkg-row__price {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    max-width: none;
    margin: 0;
}

.pkg-row__price strong {
    font-size: 1.375rem;
    color: var(--color-text);
    font-weight: 700;
}

.packages__addons {
    margin-bottom: var(--space-lg);
}

.packages__addons-heading {
    font-size: 1rem;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

.packages__addons-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem var(--space-md);
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 768px) {
    .packages__addons-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

.packages__addons-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.packages__addons-list li::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-accent);
    flex-shrink: 0;
}

.packages__disclaimer {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-style: italic;
    border-left: 3px solid var(--color-accent);
    padding-left: var(--space-sm);
    margin-bottom: var(--space-lg);
    max-width: 60ch;
}

.packages__disclaimer a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.packages__cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
}

@media (min-width: 480px) {
    .packages__cta {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* ============================================================
   HOW BOOKING WORKS SECTION
   ============================================================ */

.section--booking {
    background-color: var(--color-white);
}

.booking__steps {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-xl);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .booking__steps {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-md);
    }
}

@media (min-width: 1024px) {
    .booking__steps {
        gap: var(--space-xl);
    }
}

.booking__step {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.booking__step-num {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
}

.booking__step-heading {
    margin: 0 0 0.375rem;
}

.booking__step-desc {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    max-width: none;
    margin: 0;
}

.booking__cta {
    text-align: center;
}

/* ============================================================
   ABOUT SECTION
   ============================================================ */

.section--about {
    background-color: var(--color-bg);
}

.about__inner {
    max-width: 680px;
    margin-inline: auto;
    text-align: center;
}

.about__eyebrow {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    max-width: none;
    margin: 0 0 var(--space-sm);
}

.about__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.2;
    color: var(--color-text);
    margin: 0 0 var(--space-lg);
}

.about__body p {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    text-align: left;
    max-width: none;
    margin: 0 0 var(--space-sm);
}

.about__body p:last-child {
    margin-bottom: 0;
}

.about__tags {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
    margin: var(--space-lg) 0 0;
}

.about__tag {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: 100px;
    padding: 0.375rem 1rem;
}

/* ============================================================
   FAQ SECTION
   ============================================================ */

.section--faqs {
    background-color: var(--color-white);
}

.faq__list {
    max-width: 720px;
    margin-inline: auto;
}

.faq__item {
    border-bottom: 1px solid var(--color-border);
}

.faq__item:first-child {
    border-top: 1px solid var(--color-border);
}

.faq__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) 0;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
    line-height: 1.4;
    min-height: 44px; /* touch target minimum */
}

.faq__question::-webkit-details-marker {
    display: none;
}

.faq__question::marker {
    content: '';
}

.faq__question::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23C09A5A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s ease;
}

details[open] > .faq__question::after {
    transform: rotate(180deg);
}

.faq__question:hover {
    color: var(--color-accent);
}

.faq__question:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

.faq__answer {
    padding: 0 0 var(--space-md);
}

.faq__answer p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    max-width: none;
    margin: 0;
}

.faq__answer p + p {
    margin-top: var(--space-xs);
}

.faq__answer a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.faq__answer a:hover {
    color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
    .faq__question::after {
        transition: none;
    }
}

/* ============================================================
   CONTACT / INQUIRY SECTION
   ============================================================ */

.section--contact {
    background-color: var(--color-bg);
}

.contact__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .contact__inner {
        grid-template-columns: 2fr 3fr;
        align-items: start;
    }
}

@media (min-width: 1024px) {
    .contact__inner {
        gap: var(--space-xl);
    }
}

.contact__info-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    max-width: none;
    margin: 0 0 var(--space-sm);
}

.contact__info-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.contact__info-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.contact__info-list li::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-accent);
    flex-shrink: 0;
    margin-top: 0.55em;
}

.contact__info-note {
    font-size: 0.9375rem;
    font-style: italic;
    color: var(--color-text-muted);
    line-height: 1.6;
    max-width: 38ch;
    margin: 0;
}

.contact__form-area {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
}

@media (min-width: 768px) {
    .contact__form-area {
        padding: var(--space-lg);
    }
}

.contact__form-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    padding: var(--space-lg) var(--space-md);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius);
    text-align: center;
}

.contact__form-placeholder p {
    font-size: 0.875rem;
    font-style: italic;
    color: var(--color-text-muted);
    line-height: 1.6;
    max-width: 44ch;
    margin: 0;
}

.contact__form-placeholder code {
    font-family: monospace;
    font-size: 0.8125rem;
    background-color: var(--color-bg);
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-style: normal;
    color: var(--color-text);
}

/* ============================================================
   SCAFFOLD PLACEHOLDER — remove when sections are built
   ============================================================ */

.section-placeholder {
    padding: var(--space-lg);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
    background-color: var(--color-white);
}

/* ============================================================
   ACF IMAGE CONTAINERS
   Styles for optional images added via ACF admin fields.
   These containers only render when an image has been set.
   ============================================================ */

/* Hero image — appears below the trust highlights when set */
.hero__image {
    margin-top: var(--space-lg);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.hero__image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
}

/* About / Our Story image — appears below the body paragraphs when set */
.about__image {
    margin: var(--space-lg) 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.about__image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
    border-radius: inherit;
}

/* Weddings and booth spotlight visuals — real images fill the placeholder containers */
.weddings__visual img,
.booth-spotlight__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Hide the ::after placeholder text once a real image is present */
.weddings__visual:has(img)::after,
.booth-spotlight__visual:has(img)::after {
    display: none;
}

/* Backdrop category images — appear above each category heading when set */
.backdrop-cat__image {
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    margin-bottom: var(--space-sm);
}

.backdrop-cat__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
   PREMIUM INTERACTION EFFECTS
   All motion is scoped to prefers-reduced-motion: no-preference.
   Hover effects are visual enhancements only — no content requires
   hover to be understood or accessed. Scroll reveal requires JS;
   all content is fully visible without it.
   ============================================================ */

/* --- Header scroll shadow ---
   .is-scrolled is toggled by effects.js when scrollY > 10px. */

.site-header {
    transition: box-shadow 0.25s ease;
}

.site-header.is-scrolled {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    .site-header {
        transition: none;
    }
}

/* --- Button polish ---
   Extends the existing color transition to include lift on hover
   and a press feel on active. Color transitions still apply in
   reduced-motion mode; transform/shadow are suppressed. */

@media (prefers-reduced-motion: no-preference) {
    .btn {
        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
                    transform 0.15s ease, box-shadow 0.15s ease;
    }

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    }

    .btn-primary:hover {
        box-shadow: 0 4px 18px rgba(192, 154, 90, 0.35);
    }

    .btn:active {
        transform: scale(0.97);
        box-shadow: none;
        transition-duration: 0.08s;
    }
}

/* --- Experience card hover lift ---
   transform and box-shadow only — no layout properties animated. */

@media (prefers-reduced-motion: no-preference) {
    .exp-card {
        transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .exp-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
    }

    .exp-card--featured:hover {
        box-shadow: 0 8px 28px rgba(192, 154, 90, 0.22);
    }
}

/* --- Backdrop category card hover lift --- */

@media (prefers-reduced-motion: no-preference) {
    .backdrop-cat {
        transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    }

    .backdrop-cat:hover {
        transform: translateY(-4px);
        border-color: rgba(192, 154, 90, 0.5);
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.2);
    }
}

/* --- Trust strip icon scale on item hover --- */

@media (prefers-reduced-motion: no-preference) {
    .trust__icon svg {
        transition: transform 0.2s ease;
    }

    .trust__item:hover .trust__icon svg {
        transform: scale(1.18);
    }
}

/* --- Image hover zoom ---
   Containers already have overflow: hidden.
   Scoped to (hover: hover) so touch-primary devices are unaffected. */

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .weddings__visual img,
    .booth-spotlight__visual img,
    .backdrop-cat__image img,
    .about__image img,
    .hero__image img {
        transition: transform 0.55s ease;
    }

    .weddings__visual:hover img,
    .booth-spotlight__visual:hover img {
        transform: scale(1.04);
    }

    .backdrop-cat__image:hover img {
        transform: scale(1.06);
    }

    .about__image:hover img,
    .hero__image:hover img {
        transform: scale(1.04);
    }
}

/* --- FAQ item background on hover and open state --- */

@media (prefers-reduced-motion: no-preference) {
    .faq__item {
        transition: background-color 0.15s ease;
    }
}

.faq__item:hover,
details[open].faq__item {
    background-color: var(--color-bg);
}

/* --- Scroll reveal ---
   .js-reveal is added to <html> by effects.js ONLY when both:
     — IntersectionObserver is supported
     — prefers-reduced-motion is not reduce
   Without JS, or when motion is reduced, every element is fully
   visible at all times; none of the rules below ever apply.

   Hidden state: :not(.is-visible) — stopped matching once is-visible
   is added, which restores the element's normal computed style and
   allows hover transitions (e.g. card lift) to work without the
   longer reveal timing bleeding in. */

@media (prefers-reduced-motion: no-preference) {

    .js-reveal .section-intro:not(.is-visible),
    .js-reveal .exp-card:not(.is-visible),
    .js-reveal .trust__item:not(.is-visible),
    .js-reveal .backdrop-cat:not(.is-visible),
    .js-reveal .booking__step:not(.is-visible),
    .js-reveal .about__inner:not(.is-visible),
    .js-reveal .weddings__inner:not(.is-visible),
    .js-reveal .booth-spotlight__inner:not(.is-visible),
    .js-reveal .pkg-row:not(.is-visible),
    .js-reveal .contact__inner:not(.is-visible),
    .js-reveal .faq__list:not(.is-visible) {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.55s ease, transform 0.55s ease;
    }

    /* Visible state: only opacity needed.
       transform is intentionally omitted — it resolves to the CSS
       initial value (none), keeping specificity low enough that
       hover rules on .exp-card and .backdrop-cat can override it. */
    .js-reveal .section-intro.is-visible,
    .js-reveal .exp-card.is-visible,
    .js-reveal .trust__item.is-visible,
    .js-reveal .backdrop-cat.is-visible,
    .js-reveal .booking__step.is-visible,
    .js-reveal .about__inner.is-visible,
    .js-reveal .weddings__inner.is-visible,
    .js-reveal .booth-spotlight__inner.is-visible,
    .js-reveal .pkg-row.is-visible,
    .js-reveal .contact__inner.is-visible,
    .js-reveal .faq__list.is-visible {
        opacity: 1;
    }

    /* Stagger delays — scoped to :not(.is-visible) so they stop
       applying after reveal and don't slow down hover transitions. */

    .js-reveal .exp-card:not(.is-visible):nth-child(2)       { transition-delay: 0.08s; }
    .js-reveal .exp-card:not(.is-visible):nth-child(3)       { transition-delay: 0.16s; }
    .js-reveal .exp-card:not(.is-visible):nth-child(4)       { transition-delay: 0.24s; }

    .js-reveal .trust__item:not(.is-visible):nth-child(2)    { transition-delay: 0.07s; }
    .js-reveal .trust__item:not(.is-visible):nth-child(3)    { transition-delay: 0.14s; }
    .js-reveal .trust__item:not(.is-visible):nth-child(4)    { transition-delay: 0.21s; }
    .js-reveal .trust__item:not(.is-visible):nth-child(5)    { transition-delay: 0.28s; }

    .js-reveal .backdrop-cat:not(.is-visible):nth-child(2)   { transition-delay: 0.08s; }
    .js-reveal .backdrop-cat:not(.is-visible):nth-child(3)   { transition-delay: 0.16s; }
    .js-reveal .backdrop-cat:not(.is-visible):nth-child(4)   { transition-delay: 0.24s; }

    .js-reveal .booking__step:not(.is-visible):nth-child(2)  { transition-delay: 0.10s; }
    .js-reveal .booking__step:not(.is-visible):nth-child(3)  { transition-delay: 0.20s; }

    .js-reveal .pkg-row:not(.is-visible):nth-child(2)        { transition-delay: 0.06s; }
    .js-reveal .pkg-row:not(.is-visible):nth-child(3)        { transition-delay: 0.12s; }
    .js-reveal .pkg-row:not(.is-visible):nth-child(4)        { transition-delay: 0.18s; }
}