/* ========================================
   AVIAN HAVEN RICHMOND HILL
   "Art Deco Glam" Theme
   Gold accents, plum backgrounds, geometric borders
   ======================================== */

/* --- SKIP LINK (Accessibility) --- */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 10000;
    padding: 0.75rem 1.5rem;
    background: var(--color-secondary);
    color: var(--color-primary-dark);
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: var(--radius);
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 1rem;
}

/* --- BREADCRUMB --- */
.breadcrumb {
    background: var(--color-primary-light);
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--color-border);
}
.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.82rem;
}
.breadcrumb li {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-text-light);
}
.breadcrumb li:not(:last-child)::after {
    content: '\203A';
    color: var(--color-text-light);
    opacity: 0.5;
    font-size: 1rem;
}
.breadcrumb a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition);
}
.breadcrumb a:hover {
    color: var(--color-secondary);
}
.breadcrumb li[aria-current="page"] {
    color: var(--color-text);
    font-weight: 600;
}

/* --- GOOGLE FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,700;1,6..96,400&family=Outfit:wght@300;400;500;600;700&display=swap');

/* --- ROOT VARIABLES --- */
:root {
    --color-primary: #6B2D5B;
    --color-primary-dark: #521E46;
    --color-primary-light: rgba(107,45,91,0.10);
    --color-secondary: #D4A843;
    --color-accent: #D4A843;
    --color-bg: #FFF9F0;
    --color-bg-alt: #F5EDE4;
    --color-text: #4A3E46;
    --color-text-light: #7A6E76;
    --color-heading: #2E1A28;
    --color-border: #D8CCC8;
    --color-plum-deep: #3D1A33;
    --color-gold-light: rgba(212,168,67,0.15);
    --font-heading: 'Bodoni Moda', 'Georgia', serif;
    --font-body: 'Outfit', 'Segoe UI', sans-serif;
    --radius: 2px;
    --radius-lg: 4px;
    --shadow-sm: 0 2px 8px rgba(107,45,91,0.06);
    --shadow-md: 0 6px 20px rgba(107,45,91,0.09);
    --shadow-lg: 0 12px 40px rgba(107,45,91,0.12);
    --shadow-xl: 0 24px 64px rgba(107,45,91,0.15);
    --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --max-width: 1200px;
    --header-height: 72px;
    --deco-border: 3px double var(--color-secondary);
}

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

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

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover { color: var(--color-secondary); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-heading);
    line-height: 1.25;
    font-weight: 400;
    letter-spacing: 0.05em;
}

h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
h4 { font-size: 1.1rem; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.25rem; }

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* --- BUTTONS (Art Deco Sharp) --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 2rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    gap: 0.5rem;
    line-height: 1.4;
}

.btn-primary {
    background: var(--color-secondary);
    color: var(--color-primary-dark);
    border-color: var(--color-secondary);
}
.btn-primary:hover {
    background: #C49A38;
    border-color: #C49A38;
    color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(212,168,67,0.3);
}

.btn-secondary {
    background: transparent;
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.btn-secondary:hover {
    background: var(--color-secondary);
    color: var(--color-primary-dark);
    box-shadow: 0 8px 24px rgba(212,168,67,0.25);
}

.btn-lg {
    padding: 1.1rem 2.5rem;
    font-size: 1.05rem;
}

.btn-full { width: 100%; }

/* --- HEADER (Gold ruled lines) --- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: rgba(255,249,240,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 3px solid var(--color-secondary);
    border-bottom: 1px solid var(--color-secondary);
    z-index: 1000;
    transition: box-shadow var(--transition);
}
.site-header.scrolled {
    box-shadow: 0 4px 20px rgba(107,45,91,0.08);
}

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

.logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--color-heading);
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1.15rem;
    letter-spacing: 0.06em;
}
.logo-img {
    height: 38px;
    width: auto;
}
.logo-text {
    white-space: nowrap;
}

/* Navigation */
.main-nav ul {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 0.3rem;
    padding: 0;
}
.main-nav a {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--radius);
    transition: all var(--transition);
}
.main-nav a:hover {
    color: var(--color-secondary);
    background: var(--color-gold-light);
}
.main-nav a.active {
    color: var(--color-secondary);
    border-bottom: 2px solid var(--color-secondary);
}
.main-nav .nav-cta {
    background: var(--color-secondary);
    color: var(--color-primary-dark) !important;
    margin-left: 0.5rem;
    border-radius: var(--radius);
    font-weight: 700;
}
.main-nav .nav-cta:hover {
    background: #C49A38;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(212,168,67,0.3);
}

.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}
.mobile-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-heading);
    border-radius: 1px;
    transition: all var(--transition);
}

/* --- HERO --- */
.hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    padding-top: var(--header-height);
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(82,30,70,0.8) 0%, rgba(107,45,91,0.5) 40%, rgba(61,26,51,0.7) 100%);
}
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
    padding: 4rem 0;
}
.hero h1 {
    color: #fff;
    font-size: clamp(2.2rem, 5.5vw, 3.6rem);
    margin-bottom: 1rem;
    line-height: 1.15;
    letter-spacing: 0.06em;
}
.hero-sub {
    color: rgba(255,255,255,0.9);
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin-bottom: 2rem;
    line-height: 1.6;
}
.hero-cta-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Hero variants */
.hero-centered .hero-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.hero-centered .hero-cta-group { justify-content: center; }
.hero-split { min-height: 75vh; }

/* --- PAGE HERO (inner pages) --- */
.page-hero {
    padding: calc(var(--header-height) + 3rem) 0 3rem;
    background: var(--color-primary);
    position: relative;
}
.page-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--color-secondary), transparent);
}
.page-hero h1 {
    margin-bottom: 0.75rem;
    color: #fff;
}
.page-hero p {
    font-size: 1.1rem;
    color: var(--color-secondary);
    max-width: 640px;
}

/* --- TRUST BAR (Gold on plum) --- */
.trust-bar {
    padding: 2rem 0;
    background: var(--color-primary);
    color: var(--color-secondary);
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(212,168,67,0.3);
    border-bottom: 1px solid rgba(212,168,67,0.3);
}
.trust-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    text-align: center;
}
.trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.65rem 1.5rem;
    background: transparent;
    border: 1px solid rgba(212,168,67,0.3);
    border-radius: var(--radius);
    color: var(--color-secondary);
    transition: all var(--transition);
    letter-spacing: 0.04em;
}
.trust-item:hover {
    background: rgba(212,168,67,0.1);
    border-color: var(--color-secondary);
    transform: translateY(-1px);
}
.trust-icon {
    font-size: 1.2rem;
    opacity: 0.9;
    color: var(--color-secondary);
}

/* --- SECTIONS (Alternating cream & plum) --- */
.section {
    padding: 5rem 0;
    position: relative;
}

/* Geometric art deco divider between sections */
.section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: var(--color-border);
}
.section:first-of-type::before {
    display: none;
}

.section-label {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin-bottom: 0.75rem;
    border: 1px solid var(--color-secondary);
    padding: 0.35rem 1.1rem;
    border-radius: var(--radius);
}
.section-label.centered { display: block; text-align: center; width: fit-content; margin-left: auto; margin-right: auto; }

/* Section title with gold underline + diamond center */
.section-title {
    text-align: center;
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 1.5rem;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: var(--color-secondary);
}
/* Diamond center accent on section title */
.section-title::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: var(--color-secondary);
    z-index: 1;
}

.section-subtitle {
    text-align: center;
    color: var(--color-text-light);
    max-width: 600px;
    margin: 0 auto 3rem;
    font-size: 1.05rem;
}
.section-divider {
    width: 100px;
    height: 2px;
    background: var(--color-secondary);
    margin: 4rem auto;
    position: relative;
}
.section-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background: var(--color-secondary);
}

/* Plum background sections */
.bg-alt {
    background: var(--color-primary);
    color: #fff;
    position: relative;
    overflow: hidden;
}
/* Art deco sunburst pattern on bg-alt sections */
.bg-alt::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: conic-gradient(
        from 0deg at 50% 0%,
        transparent 0deg,
        rgba(212,168,67,0.03) 10deg,
        transparent 20deg,
        rgba(212,168,67,0.03) 30deg,
        transparent 40deg,
        rgba(212,168,67,0.03) 50deg,
        transparent 60deg,
        rgba(212,168,67,0.03) 70deg,
        transparent 80deg,
        rgba(212,168,67,0.03) 90deg,
        transparent 100deg,
        rgba(212,168,67,0.03) 110deg,
        transparent 120deg,
        rgba(212,168,67,0.03) 130deg,
        transparent 140deg,
        rgba(212,168,67,0.03) 150deg,
        transparent 160deg,
        rgba(212,168,67,0.03) 170deg,
        transparent 180deg
    );
    pointer-events: none;
    z-index: 0;
}
.bg-alt > * { position: relative; z-index: 1; }

.bg-alt .section-title,
.bg-alt .section-subtitle,
.bg-alt h2, .bg-alt h3 {
    color: #fff;
}
.bg-alt .section-label {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.bg-alt .section-subtitle {
    color: rgba(255,255,255,0.8);
}

/* --- INTRO GRID --- */
.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.intro-text h2 { margin-bottom: 1.25rem; }
.intro-text p { color: var(--color-text-light); }
.intro-image img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), 4px 4px 0 var(--color-secondary);
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 1rem;
    color: var(--color-secondary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: all var(--transition);
}
.link-arrow::after {
    content: '\2192';
    transition: transform var(--transition);
}
.link-arrow:hover {
    color: var(--color-primary);
}
.link-arrow:hover::after {
    transform: translateX(4px);
}

.bg-alt .link-arrow {
    color: var(--color-secondary);
}
.bg-alt .link-arrow:hover {
    color: #fff;
}

/* --- SERVICE CARDS (Gold top border, geometric corners) --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}
.service-card {
    position: relative;
    background: #fff;
    border: none;
    border-top: 3px solid var(--color-secondary);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    text-align: center;
    transition: all var(--transition);
    box-shadow: var(--shadow-sm);
}
/* Geometric corner accents */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-left: 2px solid var(--color-secondary);
    border-top: 2px solid var(--color-secondary);
    pointer-events: none;
}
.service-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-right: 2px solid var(--color-secondary);
    border-top: 2px solid var(--color-secondary);
    pointer-events: none;
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-secondary);
}
.service-card.featured {
    border-top-width: 4px;
    box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(212,168,67,0.15);
}

/* Plum section service cards */
.bg-alt .service-card {
    background: rgba(255,255,255,0.07);
    border-top-color: var(--color-secondary);
    box-shadow: none;
    border: 1px solid rgba(212,168,67,0.2);
    border-top: 3px solid var(--color-secondary);
}
.bg-alt .service-card::before {
    border-color: var(--color-secondary);
}
.bg-alt .service-card::after {
    border-color: var(--color-secondary);
}
.bg-alt .service-card h3 { color: #fff; }
.bg-alt .service-card p { color: rgba(255,255,255,0.75); }
.bg-alt .service-card:hover {
    background: rgba(255,255,255,0.12);
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}

.service-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-secondary);
    color: var(--color-primary-dark);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.35rem 1.2rem;
    border-radius: var(--radius);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.service-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--color-secondary);
    display: inline-block;
    width: 64px;
    height: 64px;
    line-height: 64px;
    background: var(--color-gold-light);
    border-radius: var(--radius);
    text-align: center;
    border: 1px solid rgba(212,168,67,0.2);
}
.bg-alt .service-icon {
    background: rgba(212,168,67,0.15);
    border-color: rgba(212,168,67,0.3);
}
.service-card h3 {
    margin-bottom: 0.75rem;
    letter-spacing: 0.04em;
}
.service-card p {
    color: var(--color-text-light);
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
}
.service-price {
    font-size: 1.8rem;
    font-weight: 400;
    font-family: var(--font-heading);
    color: var(--color-heading);
    margin-bottom: 1.25rem;
    letter-spacing: 0.02em;
}
.service-price span {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--color-text-light);
    font-family: var(--font-body);
}
.bg-alt .service-price { color: var(--color-secondary); }
.bg-alt .service-price span { color: rgba(255,255,255,0.6); }

/* --- SERVICE DETAIL (services page) --- */
.service-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 2rem 0;
}
.service-detail.reverse { direction: rtl; }
.service-detail.reverse > * { direction: ltr; }
.service-detail-image img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md), 4px 4px 0 var(--color-secondary);
}
.service-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}
.service-features li {
    padding: 0.5rem 0 0.5rem 1.75rem;
    position: relative;
    color: var(--color-text-light);
}
.service-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background: var(--color-secondary);
}
.bg-alt .service-features li { color: rgba(255,255,255,0.8); }
.bg-alt .service-features li::before { background: var(--color-secondary); }

.service-detail-price {
    margin: 1.5rem 0;
}
.price-amount {
    font-size: 2rem;
    font-weight: 400;
    font-family: var(--font-heading);
    color: var(--color-heading);
}
.price-period {
    font-size: 1rem;
    color: var(--color-text-light);
    margin-left: 0.25rem;
}
.bg-alt .price-amount { color: var(--color-secondary); }
.bg-alt .price-period { color: rgba(255,255,255,0.6); }

/* --- INCLUDED GRID --- */
.included-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.included-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.included-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background: var(--color-gold-light);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--color-secondary);
    border: 1px solid rgba(212,168,67,0.2);
}
.bg-alt .included-icon {
    background: rgba(212,168,67,0.15);
    border-color: rgba(212,168,67,0.3);
}
.included-item h4 { margin-bottom: 0.25rem; }
.included-item p { font-size: 0.9rem; color: var(--color-text-light); }
.bg-alt .included-item h4 { color: #fff; }
.bg-alt .included-item p { color: rgba(255,255,255,0.75); }

/* --- BIRDS GRID --- */
.birds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
    text-align: center;
}
.bird-type {
    padding: 1.5rem 1rem;
    background: #fff;
    border-radius: var(--radius);
    transition: all var(--transition);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}
.bird-type:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-secondary);
}
.bg-alt .bird-type {
    background: rgba(255,255,255,0.07);
    border-color: rgba(212,168,67,0.2);
    color: #fff;
}
.bg-alt .bird-type:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--color-secondary);
}
.bird-type-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.bird-type-name { font-weight: 600; font-size: 0.9rem; }
.bg-alt .bird-type-name { color: #fff; }

/* --- WHY GRID --- */
.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.why-item {
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: #fff;
    transition: all var(--transition);
}
.why-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    border-color: var(--color-secondary);
}
.bg-alt .why-item {
    background: rgba(255,255,255,0.07);
    border-color: rgba(212,168,67,0.2);
}
.bg-alt .why-item:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--color-secondary);
}
.why-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    color: var(--color-secondary);
    display: inline-block;
    width: 52px;
    height: 52px;
    line-height: 52px;
    background: var(--color-gold-light);
    border-radius: var(--radius);
    text-align: center;
}
.bg-alt .why-icon {
    background: rgba(212,168,67,0.15);
}
.why-item h3 { margin-bottom: 0.5rem; }
.why-item p { color: var(--color-text-light); font-size: 0.95rem; }
.bg-alt .why-item h3 { color: #fff; }
.bg-alt .why-item p { color: rgba(255,255,255,0.75); }

/* --- TESTIMONIALS --- */
.testimonials-slider {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    margin-top: 2rem;
}
.testimonial-card {
    background: #fff;
    border: none;
    border-top: 3px solid var(--color-secondary);
    border-radius: var(--radius-lg);
    padding: 2rem 2rem 2.5rem;
    position: relative;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
}
.bg-alt .testimonial-card {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(212,168,67,0.2);
    border-top: 3px solid var(--color-secondary);
}
/* Decorative quote mark */
.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 4rem;
    font-family: var(--font-heading);
    color: var(--color-gold-light);
    line-height: 1;
    pointer-events: none;
}
.bg-alt .testimonial-card::before {
    color: rgba(212,168,67,0.15);
}
.testimonial-text {
    font-style: italic;
    color: var(--color-text);
    margin-bottom: 1.25rem;
    padding-top: 0;
    line-height: 1.7;
    font-size: 1rem;
}
.bg-alt .testimonial-text { color: rgba(255,255,255,0.9); }
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    font-size: 1rem;
}
.testimonial-name { font-weight: 600; color: var(--color-heading); }
.testimonial-detail { font-size: 0.85rem; color: var(--color-text-light); }
.bg-alt .testimonial-name { color: #fff; }
.bg-alt .testimonial-detail { color: rgba(255,255,255,0.6); }
.testimonial-stars {
    color: var(--color-secondary);
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    letter-spacing: 0.05em;
}

.testimonials-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 2.5rem;
}

/* --- AREAS --- */
.areas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.area-tag {
    padding: 0.75rem 1.25rem;
    background: #fff;
    border-radius: var(--radius);
    text-align: center;
    font-weight: 500;
    color: var(--color-heading);
    border: 1px solid var(--color-border);
    transition: all var(--transition);
    letter-spacing: 0.03em;
}
.area-tag:hover {
    border-color: var(--color-secondary);
    color: var(--color-primary-dark);
    background: var(--color-secondary);
    transform: translateY(-1px);
}
.bg-alt .area-tag {
    background: rgba(255,255,255,0.07);
    border-color: rgba(212,168,67,0.2);
    color: #fff;
}
.bg-alt .area-tag:hover {
    background: var(--color-secondary);
    color: var(--color-primary-dark);
}

/* --- CTA BANNER --- */
.cta-banner {
    padding: 5rem 0;
    background: var(--color-primary);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}
/* Art deco sunburst on CTA */
.cta-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: conic-gradient(
        from 0deg at 50% 0%,
        transparent 0deg,
        rgba(212,168,67,0.04) 10deg,
        transparent 20deg,
        rgba(212,168,67,0.04) 30deg,
        transparent 40deg,
        rgba(212,168,67,0.04) 50deg,
        transparent 60deg,
        rgba(212,168,67,0.04) 70deg,
        transparent 80deg,
        rgba(212,168,67,0.04) 90deg,
        transparent 100deg,
        rgba(212,168,67,0.04) 110deg,
        transparent 120deg,
        rgba(212,168,67,0.04) 130deg,
        transparent 140deg,
        rgba(212,168,67,0.04) 150deg,
        transparent 160deg,
        rgba(212,168,67,0.04) 170deg,
        transparent 180deg
    );
    pointer-events: none;
}
/* Double-line geometric border */
.cta-banner::after {
    content: '';
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    bottom: 16px;
    border: 1px solid rgba(212,168,67,0.2);
    pointer-events: none;
}
.cta-banner h2 {
    color: #fff;
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}
.cta-banner p {
    color: rgba(255,255,255,0.85);
    font-size: 1.1rem;
    max-width: 560px;
    margin: 0 auto 2rem;
    position: relative;
    z-index: 1;
}
.cta-banner .btn-primary {
    background: var(--color-secondary);
    color: var(--color-primary-dark);
    border-color: var(--color-secondary);
    position: relative;
    z-index: 1;
}
.cta-banner .btn-primary:hover {
    background: #C49A38;
    border-color: #C49A38;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(212,168,67,0.35);
}
.cta-banner .btn-secondary {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
    position: relative;
    z-index: 1;
}
.cta-banner .btn-secondary:hover {
    background: var(--color-secondary);
    color: var(--color-primary-dark);
}

/* --- ABOUT PAGE --- */
.about-story-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem;
    align-items: center;
}
.about-story-text h2 { margin-bottom: 1.25rem; }
.about-story-text p { color: var(--color-text-light); }
.bg-alt .about-story-text h2 { color: #fff; }
.bg-alt .about-story-text p { color: rgba(255,255,255,0.8); }
.about-story-image img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), 4px 4px 0 var(--color-secondary);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.value-card {
    text-align: center;
    padding: 2.5rem 2rem;
    background: #fff;
    border-radius: var(--radius-lg);
    border-top: 3px solid var(--color-secondary);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}
.value-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.bg-alt .value-card {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(212,168,67,0.2);
    border-top: 3px solid var(--color-secondary);
}
.value-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--color-secondary);
    display: inline-block;
    width: 68px;
    height: 68px;
    line-height: 68px;
    background: var(--color-gold-light);
    border-radius: var(--radius);
}
.bg-alt .value-icon {
    background: rgba(212,168,67,0.15);
}
.value-card h3 { margin-bottom: 0.5rem; }
.value-card p { color: var(--color-text-light); font-size: 0.95rem; }
.bg-alt .value-card h3 { color: #fff; }
.bg-alt .value-card p { color: rgba(255,255,255,0.75); }

.approach-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.approach-image img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md), 4px 4px 0 var(--color-secondary);
}
.approach-text h2 { margin-bottom: 1rem; }
.approach-list {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
}
.approach-list li {
    padding: 0.6rem 0 0.6rem 2rem;
    position: relative;
    color: var(--color-text-light);
}
.approach-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 10px;
    height: 10px;
    background: var(--color-secondary);
    transform: translateY(-50%) rotate(45deg);
}
.bg-alt .approach-text h2 { color: #fff; }
.bg-alt .approach-list li { color: rgba(255,255,255,0.8); }

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.team-member {
    text-align: center;
}
.team-photo {
    width: 120px;
    height: 120px;
    border-radius: var(--radius);
    margin: 0 auto 1rem;
    overflow: hidden;
    background: var(--color-bg-alt);
    border: 3px double var(--color-secondary);
    box-shadow: var(--shadow-sm);
}
.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.team-member h3 { font-size: 1.1rem; margin-bottom: 0.2rem; }
.team-role { font-size: 0.9rem; color: var(--color-secondary); font-weight: 500; }
.team-bio { font-size: 0.9rem; color: var(--color-text-light); margin-top: 0.5rem; }
.bg-alt .team-member h3 { color: #fff; }
.bg-alt .team-role { color: var(--color-secondary); }
.bg-alt .team-bio { color: rgba(255,255,255,0.7); }

/* --- FAQ --- */
.faq-container { max-width: 800px; }
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all var(--transition);
    background: #fff;
}
.faq-item.active {
    border-color: var(--color-secondary);
    box-shadow: 0 4px 16px rgba(212,168,67,0.1);
}
.bg-alt .faq-item {
    background: rgba(255,255,255,0.07);
    border-color: rgba(212,168,67,0.2);
}
.bg-alt .faq-item.active {
    border-color: var(--color-secondary);
}
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--color-heading);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: var(--font-body);
    font-size: 1rem;
    gap: 1rem;
    letter-spacing: 0.02em;
}
.faq-question:hover { color: var(--color-secondary); }
.bg-alt .faq-question { color: #fff; }
.bg-alt .faq-question:hover { color: var(--color-secondary); }
.faq-toggle {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    position: relative;
    transition: transform var(--transition);
    background: var(--color-gold-light);
    border-radius: var(--radius);
}
.faq-toggle::before,
.faq-toggle::after {
    content: '';
    position: absolute;
    background: var(--color-secondary);
    border-radius: 1px;
}
.faq-toggle::before {
    width: 12px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.faq-toggle::after {
    width: 2px;
    height: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform var(--transition);
}
.faq-item.active .faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}
.faq-answer-inner {
    padding: 0 1.5rem 1.25rem;
    color: var(--color-text-light);
    line-height: 1.7;
}
.bg-alt .faq-answer-inner { color: rgba(255,255,255,0.8); }

/* --- CONTACT --- */
.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3rem;
    align-items: start;
}
.contact-form-wrap h2 { margin-bottom: 0.5rem; }
.contact-form-wrap > p { color: var(--color-text-light); margin-bottom: 2rem; }

.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-heading);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.required { color: var(--color-secondary); }
.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.85rem 1.2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    background: #fff;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group textarea {
    border-radius: var(--radius);
    resize: vertical;
    min-height: 120px;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(212,168,67,0.15);
}

.form-status {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    display: none;
}
.form-status.success {
    display: block;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}
.form-status.error {
    display: block;
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.contact-info-side {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.info-card {
    padding: 1.75rem;
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-secondary);
}
.info-card h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: var(--color-heading);
}
.info-card p {
    font-size: 0.9rem;
    color: var(--color-text-light);
}

/* --- ARTICLES --- */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}
.article-card {
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition);
    background: #fff;
}
.article-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-secondary);
}
.bg-alt .article-card {
    background: rgba(255,255,255,0.07);
    border-color: rgba(212,168,67,0.2);
    border-top: 3px solid var(--color-secondary);
}
.article-card-image {
    height: 200px;
    overflow: hidden;
}
.article-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition);
}
.article-card:hover .article-card-image img { transform: scale(1.06); }
.article-card-body {
    padding: 1.5rem;
}
.article-card-body h3 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}
.article-card-body h3 a {
    color: var(--color-heading);
}
.article-card-body h3 a:hover {
    color: var(--color-secondary);
}
.bg-alt .article-card-body h3 a { color: #fff; }
.bg-alt .article-card-body h3 a:hover { color: var(--color-secondary); }
.article-card-excerpt {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-bottom: 1rem;
}
.bg-alt .article-card-excerpt { color: rgba(255,255,255,0.7); }
.article-card-meta {
    font-size: 0.8rem;
    color: var(--color-text-light);
}
.bg-alt .article-card-meta { color: rgba(255,255,255,0.5); }

/* Article page */
.article-page { padding-top: calc(var(--header-height) + 3rem); }
.article-header {
    max-width: 720px;
    margin: 0 auto 2rem;
}
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    color: var(--color-secondary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.article-meta {
    display: flex;
    gap: 1.5rem;
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin-top: 0.75rem;
}
.article-featured-image {
    max-width: 720px;
    margin: 0 auto 2.5rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.article-body {
    max-width: 720px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.8;
}
.article-body h2 { margin: 2rem 0 1rem; font-size: 1.5rem; }
.article-body h3 { margin: 1.5rem 0 0.75rem; font-size: 1.25rem; }
.article-body ul, .article-body ol { margin: 1rem 0; padding-left: 1.5rem; }
.article-body li { margin-bottom: 0.5rem; }
.article-body blockquote {
    border-left: 3px solid var(--color-secondary);
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    background: var(--color-gold-light);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: italic;
    color: var(--color-text-light);
}
.article-footer {
    max-width: 720px;
    margin: 3rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}

/* --- FOOTER (Deep plum, gold accents) --- */
.site-footer {
    background: var(--color-plum-deep);
    color: rgba(255,255,255,0.7);
    padding: 5rem 0 0;
    position: relative;
    margin-top: 0;
}
/* Art deco top border */
.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, var(--color-secondary) 20%, var(--color-secondary) 80%, transparent 100%);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 2.5rem;
    padding-bottom: 3rem;
}
.footer-logo {
    height: 36px;
    margin-bottom: 1rem;
    filter: brightness(0) invert(1);
}
.footer-brand p {
    font-size: 0.9rem;
    line-height: 1.6;
}
.footer-nav h4,
.footer-info h4 {
    color: var(--color-secondary);
    font-size: 0.95rem;
    margin-bottom: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--font-body);
    font-weight: 700;
}
.footer-nav ul {
    list-style: none;
    padding: 0;
}
.footer-nav li { margin-bottom: 0.5rem; }
.footer-nav a {
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    transition: color var(--transition);
}
.footer-nav a:hover { color: var(--color-secondary); }
.footer-info p {
    font-size: 0.9rem;
    line-height: 1.7;
}
.footer-bottom {
    border-top: 1px solid rgba(212,168,67,0.15);
    padding: 1.5rem 0;
    text-align: center;
    font-size: 0.85rem;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .intro-grid,
    .about-story-grid,
    .approach-grid,
    .service-detail {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .service-detail.reverse { direction: ltr; }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .services-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .mobile-toggle { display: flex; }
    .main-nav {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: rgba(255,249,240,0.98);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--color-secondary);
        box-shadow: var(--shadow-lg);
        padding: 1rem 0;
    }
    .main-nav.open { display: block; }
    .main-nav ul {
        flex-direction: column;
        padding: 0 1.5rem;
    }
    .main-nav a {
        display: block;
        padding: 0.75rem 0;
        border-radius: 0;
        border-bottom: 1px solid var(--color-border);
    }
    .main-nav .nav-cta {
        margin-left: 0;
        margin-top: 0.5rem;
        text-align: center;
        border-bottom: none;
    }

    .hero { min-height: 70vh; }
    .hero h1 { font-size: clamp(1.8rem, 6vw, 2.8rem); }

    .trust-items {
        flex-direction: column;
        align-items: center;
    }
    .trust-item {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }

    .services-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }

    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }

    .section { padding: 3.5rem 0; }
    .section::before { width: 100px; }

    .cta-banner::after {
        top: 8px;
        left: 8px;
        right: 8px;
        bottom: 8px;
    }
}

@media (max-width: 480px) {
    .hero { min-height: 60vh; }
    .hero-cta-group {
        flex-direction: column;
    }
    .hero-cta-group .btn { width: 100%; }
    .trust-items { gap: 0.5rem; }
    .testimonials-slider,
    .articles-grid,
    .testimonials-page-grid { grid-template-columns: 1fr; }

    .section::before { display: none; }
    .cta-banner::after { display: none; }
    .page-hero::after { display: none; }
}

/* --- LAYOUT VARIANTS --- */
.layout-B .hero { min-height: 80vh; }
.layout-B .hero-overlay {
    background: linear-gradient(135deg, rgba(82,30,70,0.85) 0%, rgba(61,26,51,0.6) 100%);
}
.layout-B .service-card { border-top-width: 4px; }
.layout-B .site-header { box-shadow: var(--shadow-sm); }

.layout-C .hero-overlay {
    background: linear-gradient(160deg, rgba(107,45,91,0.75) 0%, rgba(61,26,51,0.65) 100%);
}
.layout-C .section-label {
    background: var(--color-gold-light);
    border: none;
}
.layout-C .section-label.centered { border-left: none; padding-left: 1.1rem; }

.layout-D .hero h1 { letter-spacing: 0.08em; }
.layout-D .section-title { letter-spacing: 0.06em; }
.layout-D .hero-overlay {
    background: linear-gradient(145deg, rgba(82,30,70,0.8) 0%, rgba(61,26,51,0.5) 100%);
}
.layout-D .testimonial-card { border-top-width: 4px; }

.layout-E .hero { min-height: 90vh; }
.layout-E .hero-overlay {
    background: linear-gradient(135deg, var(--color-primary) 0%, rgba(61,26,51,0.7) 100%);
    opacity: 0.85;
}
.layout-E .trust-bar { background: var(--color-plum-deep); }
.layout-E .cta-banner { background: var(--color-plum-deep); }

/* Mobile header fix — hide long brand name, ensure hamburger visible */
@media (max-width: 768px) {
    .logo-text { display: none; }
    .logo-img { height: 32px; }
    .site-header .container { padding: 0 1rem; }
}
@media (max-width: 480px) {
    .logo-text { display: none; }
}

/* === VISUAL ENHANCEMENTS === */
/* Art Deco Glam — Plum #6B2D5B + Gold #D4A843 */

/* --- 1. Art deco sunburst rays in hero — slow rotating conic-gradient --- */
.hero::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -25%;
    width: 150%;
    height: 200%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.07;
    background: conic-gradient(
        from 0deg at 50% 35%,
        transparent 0deg, var(--color-secondary) 2deg,
        transparent 4deg, transparent 18deg,
        var(--color-secondary) 20deg, transparent 22deg,
        transparent 38deg, var(--color-secondary) 40deg,
        transparent 42deg, transparent 58deg,
        var(--color-secondary) 60deg, transparent 62deg,
        transparent 78deg, var(--color-secondary) 80deg,
        transparent 82deg, transparent 98deg,
        var(--color-secondary) 100deg, transparent 102deg,
        transparent 118deg, var(--color-secondary) 120deg,
        transparent 122deg, transparent 138deg,
        var(--color-secondary) 140deg, transparent 142deg,
        transparent 158deg, var(--color-secondary) 160deg,
        transparent 162deg, transparent 178deg,
        var(--color-secondary) 180deg, transparent 182deg,
        transparent 198deg, var(--color-secondary) 200deg,
        transparent 202deg, transparent 218deg,
        var(--color-secondary) 220deg, transparent 222deg,
        transparent 238deg, var(--color-secondary) 240deg,
        transparent 242deg, transparent 258deg,
        var(--color-secondary) 260deg, transparent 262deg,
        transparent 278deg, var(--color-secondary) 280deg,
        transparent 282deg, transparent 298deg,
        var(--color-secondary) 300deg, transparent 302deg,
        transparent 318deg, var(--color-secondary) 320deg,
        transparent 322deg, transparent 338deg,
        var(--color-secondary) 340deg, transparent 342deg,
        transparent 358deg, var(--color-secondary) 360deg
    );
    animation: ve-deco-spin 60s linear infinite;
}

@keyframes ve-deco-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* --- 2. Gold shimmer effect on buttons (animated gradient sweep) --- */
.btn-primary,
.btn-secondary {
    position: relative;
    overflow: hidden;
}
.btn-primary::after,
.btn-secondary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(212,168,67,0.25) 40%,
        rgba(255,255,255,0.35) 50%,
        rgba(212,168,67,0.25) 60%,
        transparent 100%
    );
    transition: none;
    animation: none;
    pointer-events: none;
}
.btn-primary:hover::after,
.btn-secondary:hover::after {
    animation: ve-gold-shimmer 0.75s ease forwards;
}

@keyframes ve-gold-shimmer {
    0%   { left: -100%; }
    100% { left: 100%; }
}

/* --- 3. Decorative art deco corner brackets on feature cards --- */
.why-item,
.value-card,
.included-item {
    position: relative;
}
.why-item::before,
.value-card::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    border-top: 2px solid var(--color-secondary);
    border-left: 2px solid var(--color-secondary);
    opacity: 0.5;
    transition: opacity var(--transition), width var(--transition), height var(--transition);
    pointer-events: none;
}
.why-item::after,
.value-card::after {
    content: '';
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-bottom: 2px solid var(--color-secondary);
    border-right: 2px solid var(--color-secondary);
    opacity: 0.5;
    transition: opacity var(--transition), width var(--transition), height var(--transition);
    pointer-events: none;
}
.why-item:hover::before,
.value-card:hover::before,
.why-item:hover::after,
.value-card:hover::after {
    opacity: 1;
    width: 32px;
    height: 32px;
}

/* --- 4. Section dividers — art deco diamond chain pattern --- */
.section-divider {
    height: auto;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.section-divider::before {
    content: '';
    display: block;
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-secondary), transparent);
}
.section-divider::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background: var(--color-secondary);
    transform: rotate(45deg);
    flex-shrink: 0;
    margin: 0 -1px;
    box-shadow:
        20px 0 0 -3px var(--color-secondary),
        -20px 0 0 -3px var(--color-secondary);
}

/* --- 5. Testimonial cards — double-line frame that glows gold on hover --- */
.testimonial-card {
    outline: 1px solid transparent;
    outline-offset: 4px;
    transition: all var(--transition), outline-color 0.4s ease, box-shadow 0.4s ease;
}
.testimonial-card:hover {
    outline-color: var(--color-secondary);
    box-shadow:
        var(--shadow-md),
        0 0 20px rgba(212,168,67,0.15),
        inset 0 0 0 1px rgba(212,168,67,0.2);
}
.bg-alt .testimonial-card:hover {
    outline-color: var(--color-secondary);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.3),
        0 0 24px rgba(212,168,67,0.12),
        inset 0 0 0 1px rgba(212,168,67,0.25);
}

/* --- 6. Service prices — gold underline sweeps in from left on hover --- */
.service-price {
    position: relative;
    display: inline-block;
}
.service-price::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-secondary), rgba(212,168,67,0.3));
    transition: width 0.4s ease;
}
.service-card:hover .service-price::after {
    width: 100%;
}

/* --- 7. Trust bar — thin vertical gold lines between items, animated height --- */
.trust-item {
    position: relative;
}
.trust-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 0;
    background: linear-gradient(180deg, transparent, var(--color-secondary), transparent);
    animation: ve-trust-line 1s ease 0.5s forwards;
}

@keyframes ve-trust-line {
    to { height: 70%; }
}

@media (max-width: 768px) {
    .trust-item:not(:last-child)::after { display: none; }
}

/* --- 8. Hero heading — golden text-shadow pulse (subtle, luxurious) --- */
.hero h1 {
    text-shadow: 0 0 40px rgba(212,168,67,0);
    animation: ve-gold-pulse 4s ease-in-out infinite;
}

@keyframes ve-gold-pulse {
    0%, 100% { text-shadow: 0 0 40px rgba(212,168,67,0); }
    50%      { text-shadow: 0 0 50px rgba(212,168,67,0.2), 0 0 80px rgba(212,168,67,0.08); }
}

/* --- 9. Footer — art deco zigzag pattern at top --- */
.site-footer::before {
    height: 14px;
    background:
        linear-gradient(135deg, var(--color-secondary) 33.33%, transparent 33.33%) 0 0,
        linear-gradient(225deg, var(--color-secondary) 33.33%, transparent 33.33%) 0 0,
        linear-gradient(315deg, var(--color-secondary) 33.33%, transparent 33.33%),
        linear-gradient(45deg, var(--color-secondary) 33.33%, transparent 33.33%);
    background-size: 20px 14px;
    background-color: var(--color-plum-deep);
}

/* --- 10. Area tags — art deco border corners + gold fill on hover --- */
.area-tag {
    position: relative;
    overflow: hidden;
}
.area-tag::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    border-top: 1.5px solid var(--color-secondary);
    border-left: 1.5px solid var(--color-secondary);
    opacity: 0;
    transition: opacity var(--transition);
    pointer-events: none;
}
.area-tag::after {
    content: '';
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 10px;
    height: 10px;
    border-bottom: 1.5px solid var(--color-secondary);
    border-right: 1.5px solid var(--color-secondary);
    opacity: 0;
    transition: opacity var(--transition);
    pointer-events: none;
}
.area-tag:hover::before,
.area-tag:hover::after {
    opacity: 1;
}
.area-tag:hover {
    background: var(--color-secondary);
    color: var(--color-primary-dark);
    border-color: var(--color-secondary);
    box-shadow: 0 4px 16px rgba(212,168,67,0.25);
}
.bg-alt .area-tag:hover::before,
.bg-alt .area-tag:hover::after {
    border-color: var(--color-plum-deep);
}

/* === END VISUAL ENHANCEMENTS === */

/* ======================================================
   UNIQUE NAV HOVER — Art Deco Gold Curtain Effect
   ====================================================== */

/* Nav links — gold curtain drops down from top on hover */
.main-nav a {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.3s ease 0.05s !important;
}
.main-nav a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: var(--color-secondary);
    z-index: -1;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-nav a:hover::before,
.main-nav a.active::before {
    height: 100%;
}
.main-nav a:hover {
    color: var(--color-primary-dark) !important;
    background: transparent !important;
}
.main-nav a.active {
    color: var(--color-primary-dark) !important;
    background: transparent !important;
}

/* Gold diamond accent appears above active/hovered link */
.main-nav a::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 50%;
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    transform: translateX(-50%) rotate(45deg) scale(0);
    transition: transform 0.25s ease 0.1s;
}
.main-nav a:hover::after,
.main-nav a.active::after {
    transform: translateX(-50%) rotate(45deg) scale(1);
}

/* CTA button — gold fill with plum text on hover */
.main-nav .nav-cta {
    overflow: visible !important;
}
.main-nav .nav-cta::before {
    display: none !important;
}
.main-nav .nav-cta::after {
    display: none !important;
}
.main-nav .nav-cta:hover {
    background: var(--color-secondary) !important;
    color: var(--color-primary-dark) !important;
    box-shadow: 0 4px 16px rgba(212,168,67,0.35) !important;
}

/* Art deco line under entire nav — animated on page load */
.site-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-secondary), transparent);
    animation: enh-nav-line 1.5s ease-out 0.5s forwards;
}
@keyframes enh-nav-line {
    to { width: 80%; }
}

/* Mobile nav — gold accent on active */
@media (max-width: 768px) {
    .main-nav a::before { display: none; }
    .main-nav a::after { display: none; }
    .main-nav a:hover {
        color: var(--color-secondary) !important;
        padding-left: 1rem !important;
    }
    .main-nav a {
        border-left: 3px solid transparent;
        transition: all 0.25s ease !important;
    }
    .main-nav a:hover,
    .main-nav a.active {
        border-left-color: var(--color-secondary);
    }
}

/* ======================================================
   MOBILE FAQ PAGE — Art Deco Refined Accordion
   ====================================================== */

@media (max-width: 768px) {
    /* FAQ container — full width, no max-width constraint */
    .faq-container {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* FAQ items — card-like with gold accent */
    .faq-item {
        border-radius: 6px !important;
        margin-bottom: 0.5rem;
        background: var(--color-bg) !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    }

    /* Question — larger tap target, gold left bar */
    .faq-question {
        padding: 1.1rem 1.25rem !important;
        font-size: 0.92rem !important;
        min-height: 56px;
        border-left: 3px solid var(--color-secondary) !important;
        border-radius: 6px 0 0 6px;
    }
    .faq-item.active .faq-question {
        background: rgba(212,168,67,0.06);
        border-left-color: var(--color-secondary) !important;
    }

    /* Toggle — larger for touch */
    .faq-toggle {
        width: 32px !important;
        height: 32px !important;
        background: rgba(212,168,67,0.08);
        border-radius: 50%;
        flex-shrink: 0;
    }
    .faq-item.active .faq-toggle {
        background: rgba(212,168,67,0.15);
    }

    /* Answer — indented with left gold line */
    .faq-answer-inner {
        padding: 0.75rem 1.25rem 1.25rem !important;
        font-size: 0.9rem !important;
        border-left: 2px solid rgba(212,168,67,0.2);
        margin-left: 1.25rem;
    }

    /* Page hero — tighter on mobile */
    .page-hero {
        padding: calc(var(--header-height) + 2rem) 0 2rem !important;
    }
    .page-hero h1 {
        font-size: 1.6rem !important;
    }

    /* "Still have questions" section — stacked */
    .faq-extra-section {
        padding: 2rem 1.25rem !important;
    }
}

@media (max-width: 480px) {
    .faq-question {
        font-size: 0.88rem !important;
        padding: 1rem !important;
    }
    .faq-answer-inner {
        margin-left: 0.75rem;
        padding: 0.5rem 1rem 1rem !important;
        font-size: 0.85rem !important;
    }
}

/* Plum section FAQ overrides for mobile */
@media (max-width: 768px) {
    .bg-alt .faq-item {
        background: rgba(255,255,255,0.06) !important;
    }
    .bg-alt .faq-question {
        border-left-color: var(--color-secondary) !important;
    }
    .bg-alt .faq-answer-inner {
        border-left-color: rgba(212,168,67,0.15);
    }
    .bg-alt .faq-toggle {
        background: rgba(212,168,67,0.12);
    }
}

/* ======================================================
   UNIQUE BLOG ARTICLE — Art Deco Editorial Layout
   ====================================================== */

/* Article header — gold frame border */
.article-header {
    padding: 2.5rem 2rem !important;
    margin-bottom: 3rem !important;
    border: 2px solid var(--color-secondary) !important;
    position: relative;
    background: var(--color-bg) !important;
}
/* Decorative corner brackets */
.article-header::before,
.article-header::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: var(--color-secondary);
    border-style: solid;
}
.article-header::before {
    top: -4px;
    left: -4px;
    border-width: 3px 0 0 3px;
}
.article-header::after {
    bottom: -4px;
    right: -4px;
    border-width: 0 3px 3px 0;
}

/* Article title — wide tracked, refined */
.article-header h1 {
    font-family: 'Bodoni Moda', Georgia, serif !important;
    font-size: clamp(1.8rem, 4.5vw, 2.8rem) !important;
    font-weight: 400 !important;
    letter-spacing: 0.03em !important;
    line-height: 1.2 !important;
    color: var(--color-heading) !important;
}

/* Article meta — gold accents */
.article-meta {
    margin-top: 1rem !important;
}
.article-meta span {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-secondary);
    position: relative;
    padding-right: 1.25rem;
}
.article-meta span::after {
    content: '';
    position: absolute;
    right: 0.4rem;
    top: 50%;
    width: 5px;
    height: 5px;
    background: var(--color-secondary);
    transform: translateY(-50%) rotate(45deg);
}
.article-meta span:last-child::after { display: none; }

/* Back link — gold arrow */
.back-link {
    color: var(--color-secondary) !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}
.back-link:hover { color: var(--color-heading) !important; }

/* Featured image — art deco double frame */
.article-featured-image {
    border: 3px solid var(--color-secondary) !important;
    outline: 1px solid var(--color-secondary);
    outline-offset: 4px;
    margin-bottom: 3.5rem !important;
}

/* h2 — gold diamond separator before */
.article-body h2 {
    font-family: 'Bodoni Moda', Georgia, serif !important;
    font-weight: 400 !important;
    font-size: 1.5rem !important;
    letter-spacing: 0.04em !important;
    margin: 3.5rem 0 1.25rem !important;
    text-align: center !important;
    padding-top: 2.5rem;
    position: relative;
}
.article-body h2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: var(--color-secondary);
}

/* h3 — gold left accent */
.article-body h3 {
    padding-left: 1rem !important;
    border-left: 3px solid var(--color-secondary) !important;
    letter-spacing: 0.02em;
}

/* Blockquotes — gold bordered, centered */
.article-body blockquote {
    border: 2px solid var(--color-secondary) !important;
    border-left-width: 2px !important;
    border-radius: 0 !important;
    background: rgba(212,168,67,0.04) !important;
    padding: 2rem !important;
    margin: 2.5rem auto !important;
    max-width: 90%;
    text-align: center;
    font-family: 'Bodoni Moda', Georgia, serif;
    font-size: 1.15rem;
    position: relative;
}
.article-body blockquote::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    width: 16px;
    height: 16px;
    border-top: 3px solid var(--color-secondary);
    border-left: 3px solid var(--color-secondary);
}
.article-body blockquote::after {
    content: '';
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    border-bottom: 3px solid var(--color-secondary);
    border-right: 3px solid var(--color-secondary);
}

/* Lists — gold diamond bullets */
.article-body ul { list-style: none !important; padding-left: 1.5rem !important; }
.article-body ul li { position: relative; margin-bottom: 0.5rem; }
.article-body ul li::before {
    content: '';
    position: absolute;
    left: -1.25rem;
    top: 0.55em;
    width: 7px;
    height: 7px;
    background: var(--color-secondary);
    transform: rotate(45deg);
}

/* Article footer — gold chain divider */
.article-footer {
    border-top: none !important;
    padding-top: 3rem !important;
    position: relative;
}
.article-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cg fill='%23D4A843'%3E%3Crect x='0' y='3' width='8' height='8' transform='rotate(45 4 7)'/%3E%3Crect x='22' y='3' width='8' height='8' transform='rotate(45 26 7)'/%3E%3Crect x='44' y='3' width='8' height='8' transform='rotate(45 48 7)'/%3E%3Crect x='66' y='3' width='8' height='8' transform='rotate(45 70 7)'/%3E%3Crect x='88' y='3' width='8' height='8' transform='rotate(45 92 7)'/%3E%3Crect x='110' y='3' width='8' height='8' transform='rotate(45 114 7)'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
    opacity: 0.4;
}

/* Related cards — gold top border */
.article-page .article-card {
    border-top: 3px solid var(--color-secondary) !important;
}

@media (max-width: 768px) {
    .article-header {
        padding: 1.5rem 1.25rem !important;
    }
    .article-header::before, .article-header::after {
        width: 14px; height: 14px;
    }
    .article-featured-image {
        outline: none;
    }
    .article-body h2 {
        text-align: left !important;
        padding-top: 2rem;
    }
    .article-body blockquote {
        max-width: 100%;
    }
}

/* ======================================================
   UNIQUE CONTACT PAGE — Art Deco Gilded Form
   ====================================================== */

/* Form container — gold double border frame */
.contact-form-wrap {
    background: var(--color-bg) !important;
    border: 2px solid var(--color-secondary) !important;
    outline: 1px solid var(--color-secondary);
    outline-offset: 5px;
    border-radius: 2px !important;
    padding: 2.75rem !important;
    position: relative;
}
/* Gold corner ornaments */
.contact-form-wrap::before,
.contact-form-wrap::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border-color: var(--color-secondary);
    border-style: solid;
}
.contact-form-wrap::before {
    top: 8px; left: 8px;
    border-width: 2px 0 0 2px;
}
.contact-form-wrap::after {
    bottom: 8px; right: 8px;
    border-width: 0 2px 2px 0;
}

/* Headline — serif, gold underline with diamond */
.contact-form-wrap h2 {
    font-family: 'Bodoni Moda', Georgia, serif !important;
    font-weight: 400 !important;
    font-size: 1.7rem !important;
    letter-spacing: 0.05em !important;
    color: var(--color-heading) !important;
    padding-bottom: 1rem;
    margin-bottom: 0.5rem !important;
    position: relative;
}
.contact-form-wrap h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-secondary), transparent);
}

/* Labels — tracked uppercase */
.contact-form .form-group label {
    font-size: 0.75rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    color: var(--color-text) !important;
}

/* Inputs — thin bottom border, gold on focus */
.contact-form .form-group input,
.contact-form .form-group select {
    border: none !important;
    border-bottom: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0.75rem 0.25rem !important;
    color: var(--color-heading) !important;
    transition: border-color 0.4s ease;
}
.contact-form .form-group input:focus,
.contact-form .form-group select:focus {
    border-bottom-color: var(--color-secondary) !important;
    box-shadow: 0 1px 0 var(--color-secondary) !important;
}

/* Textarea — gold border on focus */
.contact-form .form-group textarea {
    border: 1px solid var(--color-border) !important;
    border-radius: 2px !important;
    background: transparent !important;
    padding: 1rem !important;
    color: var(--color-heading) !important;
    transition: border-color 0.4s ease;
}
.contact-form .form-group textarea:focus {
    border-color: var(--color-secondary) !important;
    box-shadow: none !important;
}

/* Submit — gold filled, plum text */
.contact-form .btn-primary {
    background: var(--color-secondary) !important;
    color: var(--color-primary-dark) !important;
    border: none !important;
    border-radius: 2px !important;
    padding: 1rem 2.5rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
    font-size: 0.85rem !important;
    width: auto !important;
    transition: all 0.3s ease;
    box-shadow: none !important;
}
.contact-form .btn-primary:hover {
    background: var(--color-primary) !important;
    color: var(--color-secondary) !important;
    transform: none !important;
    box-shadow: 0 0 20px rgba(212,168,67,0.2) !important;
}

/* Info cards — plum filled with gold text */
.contact-info-side .info-card {
    background: var(--color-primary) !important;
    color: rgba(255,255,255,0.85) !important;
    border: 1px solid rgba(212,168,67,0.2) !important;
    border-radius: 2px !important;
}
.contact-info-side .info-card h3 {
    color: var(--color-secondary) !important;
    font-family: 'Bodoni Moda', serif !important;
    font-weight: 400 !important;
    font-style: italic;
    letter-spacing: 0.05em;
}
.contact-info-side .info-card p {
    color: rgba(255,255,255,0.75) !important;
}

/* Map — gold border */
.contact-map iframe {
    border: 2px solid var(--color-secondary) !important;
    border-radius: 2px !important;
}

/* Form success — gold accent */
.form-status.success {
    border: 1px solid var(--color-secondary) !important;
    background: rgba(212,168,67,0.06) !important;
    color: var(--color-secondary) !important;
    border-radius: 2px;
}

@media (max-width: 768px) {
    .contact-form-wrap {
        padding: 1.75rem 1.25rem !important;
        outline: none;
    }
    .contact-form-wrap::before, .contact-form-wrap::after {
        width: 16px; height: 16px;
    }
    .contact-form .btn-primary {
        width: 100% !important;
    }
}

/* ======================================================
   UNIQUE SCROLL REVEALS — Art Deco Curtain & Gilt Reveal
   Uses animation-timeline: view()
   ====================================================== */

/* Section titles — fade in with gold shimmer sweep */
.section-title {
    animation: deco-title-shimmer linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
}
@keyframes deco-title-shimmer {
    from { opacity: 0; letter-spacing: 0.08em; }
    50% { opacity: 0.6; letter-spacing: 0.04em; }
    to { opacity: 1; letter-spacing: 0.02em; }
}

/* Service cards — curtain reveal from top (clip inset) */
.service-card {
    animation: deco-curtain-down linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
}
.service-card:nth-child(2) { animation-range: entry 8% entry 48%; }
.service-card:nth-child(3) { animation-range: entry 16% entry 56%; }
@keyframes deco-curtain-down {
    from { opacity: 0; clip-path: inset(0 0 100% 0); }
    to { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* Why items — slide in from alternating diagonals */
.why-item {
    animation: deco-diagonal-left linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
}
.why-item:nth-child(even) { animation-name: deco-diagonal-right; }
.why-item:nth-child(2) { animation-range: entry 6% entry 46%; }
.why-item:nth-child(3) { animation-range: entry 12% entry 52%; }
.why-item:nth-child(4) { animation-range: entry 18% entry 58%; }
@keyframes deco-diagonal-left {
    from { opacity: 0; transform: translate(-20px, 20px); }
    to { opacity: 1; transform: translate(0, 0); }
}
@keyframes deco-diagonal-right {
    from { opacity: 0; transform: translate(20px, 20px); }
    to { opacity: 1; transform: translate(0, 0); }
}

/* Testimonials — gold border frame draws in */
.testimonial-card {
    animation: deco-frame-draw linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
}
.testimonial-card:nth-child(2) { animation-range: entry 10% entry 55%; }
.testimonial-card:nth-child(3) { animation-range: entry 20% entry 65%; }
@keyframes deco-frame-draw {
    from { opacity: 0; transform: scale(0.95); border-color: transparent; }
    70% { opacity: 1; transform: scale(1); }
    to { opacity: 1; transform: scale(1); }
}

/* Area tags — gilt flash cascade */
.area-tag {
    animation: deco-gilt-flash linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}
.area-tag:nth-child(2) { animation-range: entry 3% entry 33%; }
.area-tag:nth-child(3) { animation-range: entry 6% entry 36%; }
.area-tag:nth-child(4) { animation-range: entry 9% entry 39%; }
.area-tag:nth-child(5) { animation-range: entry 12% entry 42%; }
@keyframes deco-gilt-flash {
    from { opacity: 0; transform: translateY(10px); }
    80% { opacity: 1; box-shadow: 0 0 8px rgba(212,168,67,0.3); }
    to { opacity: 1; transform: translateY(0); box-shadow: none; }
}

/* Images — elegant zoom reveal */
.intro-image img,
.about-story-image img {
    animation: deco-zoom-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
}
@keyframes deco-zoom-reveal {
    from { opacity: 0; transform: scale(1.08); filter: sepia(0.3); }
    to { opacity: 1; transform: scale(1); filter: sepia(0); }
}

/* CTA — text appears with gold spread */
.cta-banner h2 {
    animation: deco-gold-spread linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
}
@keyframes deco-gold-spread {
    from { opacity: 0; letter-spacing: 0.12em; }
    to { opacity: 1; letter-spacing: 0.02em; }
}

/* Fallback */
@supports not (animation-timeline: view()) {
    .section-title, .service-card, .why-item, .testimonial-card,
    .area-tag, .intro-image img, .about-story-image img, .cta-banner h2 {
        opacity: 1; transform: none; clip-path: none; filter: none; animation: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .section-title, .service-card, .why-item, .testimonial-card,
    .area-tag, .intro-image img, .about-story-image img, .cta-banner h2 {
        animation: none !important; opacity: 1 !important;
        transform: none !important; clip-path: none !important; filter: none !important;
    }
}

/* ======================================================
   UNIQUE SVG DECORATIONS — Art Deco Fan & Geometric Motifs
   ====================================================== */

/* Art deco fan on intro section */
.intro-grid::before {
    content: '';
    position: absolute;
    top: -2rem;
    right: 3%;
    width: 80px;
    height: 80px;
    opacity: 0.04;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M40 75 L10 30 Q25 10 40 5 Q55 10 70 30Z' fill='none' stroke='%23D4A843' stroke-width='1.5'/%3E%3Cpath d='M40 75 L20 35 Q30 18 40 12 Q50 18 60 35Z' fill='none' stroke='%23D4A843' stroke-width='1' opacity='0.6'/%3E%3Cpath d='M40 75 L30 42 Q35 28 40 22 Q45 28 50 42Z' fill='none' stroke='%236B2D5B' stroke-width='1' opacity='0.5'/%3E%3C/svg%3E") no-repeat;
}
.intro-grid { position: relative; }

/* Zigzag line above services section */
.services-grid::before {
    content: '';
    position: absolute;
    top: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 12px;
    opacity: 0.06;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12'%3E%3Cpolyline points='0,10 12,2 24,10 36,2 48,10 60,2 72,10 84,2 100,10' fill='none' stroke='%23D4A843' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
}
.services-grid { position: relative; }

/* Deco keystone arch on CTA */
.cta-banner::after {
    content: '';
    position: absolute;
    top: 1rem;
    right: 5%;
    width: 50px;
    height: 60px;
    opacity: 0.06;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 60'%3E%3Cpath d='M5 60 L5 25 Q5 5 25 5 Q45 5 45 25 L45 60' fill='none' stroke='%23D4A843' stroke-width='1.5'/%3E%3Cline x1='5' y1='35' x2='45' y2='35' stroke='%23D4A843' stroke-width='1' opacity='0.5'/%3E%3Crect x='20' y='30' width='10' height='10' transform='rotate(45 25 35)' fill='none' stroke='%23D4A843' stroke-width='1' opacity='0.7'/%3E%3C/svg%3E") no-repeat;
}

/* Palmette/leaf on about story */
.about-story-grid::before {
    content: '';
    position: absolute;
    top: -1rem;
    left: 2%;
    width: 50px;
    height: 70px;
    opacity: 0.035;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 70'%3E%3Cpath d='M25 65 L25 20' stroke='%23D4A843' stroke-width='1.5' fill='none'/%3E%3Cpath d='M25 20 C15 10 5 15 8 25 C10 32 20 30 25 25' fill='none' stroke='%23D4A843' stroke-width='1'/%3E%3Cpath d='M25 20 C35 10 45 15 42 25 C40 32 30 30 25 25' fill='none' stroke='%23D4A843' stroke-width='1'/%3E%3Cpath d='M25 35 C18 28 10 30 13 38 C15 42 22 40 25 37' fill='none' stroke='%236B2D5B' stroke-width='1' opacity='0.6'/%3E%3Cpath d='M25 35 C32 28 40 30 37 38 C35 42 28 40 25 37' fill='none' stroke='%236B2D5B' stroke-width='1' opacity='0.6'/%3E%3C/svg%3E") no-repeat;
}
.about-story-grid { position: relative; }

/* Small diamond chain under areas */
.areas-grid::after {
    content: '';
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 10px;
    opacity: 0.06;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10'%3E%3Cg fill='%23D4A843'%3E%3Crect x='2' y='1' width='6' height='6' transform='rotate(45 5 4)'/%3E%3Crect x='20' y='1' width='6' height='6' transform='rotate(45 23 4)'/%3E%3Crect x='38' y='1' width='6' height='6' transform='rotate(45 41 4)'/%3E%3Crect x='56' y='1' width='6' height='6' transform='rotate(45 59 4)'/%3E%3Crect x='74' y='1' width='6' height='6' transform='rotate(45 77 4)'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
}
.areas-grid { position: relative; }

/* Hide on mobile */
@media (max-width: 768px) {
    .intro-grid::before,
    .services-grid::before,
    .cta-banner::after,
    .about-story-grid::before,
    .areas-grid::after {
        display: none;
    }
}

/* ======================================================
   MOBILE SERVICES PAGE — Art Deco Gilded Layout
   ====================================================== */

@media (max-width: 768px) {
    /* Service detail — image with gold bottom border, content below */
    .service-detail { gap: 0 !important; }
    .service-detail.reverse { direction: ltr !important; }
    .service-detail-image { order: -1; }
    .service-detail-image img {
        border: 2px solid var(--color-secondary) !important;
        border-bottom: none !important;
        max-height: 230px; width: 100%; object-fit: cover;
    }
    .service-detail-content {
        border: 2px solid var(--color-secondary) !important;
        border-top: 3px solid var(--color-secondary) !important;
        padding: 1.5rem !important;
        position: relative;
    }
    /* Gold corner accents on content block */
    .service-detail-content::before {
        content: ''; position: absolute; top: 6px; left: 6px;
        width: 14px; height: 14px;
        border-top: 2px solid var(--color-secondary); border-left: 2px solid var(--color-secondary);
    }
    .service-detail-content::after {
        content: ''; position: absolute; bottom: 6px; right: 6px;
        width: 14px; height: 14px;
        border-bottom: 2px solid var(--color-secondary); border-right: 2px solid var(--color-secondary);
    }

    /* Service cards — gold top border, stacked */
    .service-card {
        border: 1px solid var(--color-border) !important;
        border-top: 3px solid var(--color-secondary) !important;
        padding: 1.5rem !important;
        text-align: left !important;
        margin-bottom: 0.75rem;
    }
    .service-badge {
        position: static !important; transform: none !important;
        display: inline-block; margin-bottom: 0.75rem;
        background: var(--color-secondary) !important;
        color: var(--color-primary-dark) !important;
    }
    .service-price {
        font-family: 'Bodoni Moda', Georgia, serif !important;
        font-weight: 400 !important;
    }

    /* Included items — gold left accent */
    .included-grid { grid-template-columns: 1fr !important; gap: 0.5rem !important; }
    .included-item {
        border-left: 3px solid var(--color-secondary) !important;
        padding: 0.75rem 1rem !important;
    }

    /* Bird types — 2-col with gold accent */
    .birds-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; }
    .bird-type {
        border: 1px solid var(--color-border) !important;
        border-top: 2px solid var(--color-secondary) !important;
    }

    /* Service CTA — gold ghost button */
    .service-detail .btn {
        border: 1px solid var(--color-secondary) !important;
        background: transparent !important;
        color: var(--color-secondary) !important;
        width: 100%; text-align: center;
        font-family: 'Bodoni Moda', serif !important;
        font-weight: 400 !important;
        letter-spacing: 0.06em;
    }
}

@media (max-width: 480px) {
    .service-card { padding: 1.25rem !important; }
    .birds-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .bird-type { padding: 0.75rem 0.25rem !important; }
    .service-detail-content::before, .service-detail-content::after {
        width: 10px; height: 10px;
    }
}

/* Plum section overrides for mobile */
@media (max-width: 768px) {
    .bg-alt .service-card {
        border-color: rgba(212,168,67,0.2) !important;
        border-top-color: var(--color-secondary) !important;
    }
    .bg-alt .included-item { border-left-color: var(--color-secondary) !important; }
}

/* --- COMPETITOR COMPARISON PAGE --- */
.competitors-list {
    display: grid;
    gap: 1.5rem;
    margin-top: 2rem;
}
.competitor-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 2rem 2.5rem;
    border-left: 4px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}
.competitor-card:hover {
    border-left-color: var(--color-secondary);
    box-shadow: var(--shadow-md);
    transform: translateX(4px);
}
.bg-alt .competitor-card {
    background: rgba(255,255,255,0.07);
    border-left-color: rgba(212,168,67,0.3);
}
.bg-alt .competitor-card:hover {
    border-left-color: var(--color-secondary);
    background: rgba(255,255,255,0.1);
}
.competitor-card h3 {
    margin-bottom: 0.75rem;
    font-size: 1.3rem;
}
.bg-alt .competitor-card h3 { color: #fff; }
.competitor-card p {
    color: var(--color-text-light);
    font-size: 0.95rem;
    line-height: 1.7;
}
.bg-alt .competitor-card p { color: rgba(255,255,255,0.75); }
.competitor-meta {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.competitor-type,
.competitor-location {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius);
    background: var(--color-gold-light);
    color: var(--color-primary-dark);
}
.competitor-location {
    background: var(--color-primary-light);
    color: var(--color-primary);
}
.bg-alt .competitor-type {
    background: rgba(212,168,67,0.2);
    color: var(--color-secondary);
}
.bg-alt .competitor-location {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
}
@media (max-width: 768px) {
    .competitor-card { padding: 1.5rem; }
}

/* --- PRICING PAGE --- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.pricing-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    text-align: center;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    position: relative;
}
.pricing-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--color-secondary);
}
.pricing-card.featured {
    border-color: var(--color-secondary);
    border-width: 2px;
    box-shadow: var(--shadow-md);
    transform: scale(1.03);
}
.pricing-card.featured:hover {
    transform: scale(1.03) translateY(-4px);
    box-shadow: var(--shadow-xl);
}
.pricing-card .service-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-secondary);
    color: var(--color-primary-dark);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.35rem 1.25rem;
    border-radius: var(--radius);
}
.pricing-card-name {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--color-heading);
    margin-bottom: 0.5rem;
}
.pricing-card-desc {
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}
.pricing-card-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}
.pricing-card-price .amount {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: var(--color-heading);
    line-height: 1;
}
.pricing-card-price .period {
    font-size: 1rem;
    color: var(--color-text-light);
}
.pricing-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    text-align: left;
}
.pricing-card-features li {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.92rem;
    color: var(--color-text);
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}
.pricing-card-features li:last-child { border-bottom: none; }
.pricing-card-features li::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 2px;
    background: var(--color-gold-light);
    border-radius: var(--radius);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23D4A843' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}
.pricing-note {
    text-align: center;
    margin-top: 2rem;
    padding: 1.5rem 2rem;
    background: var(--color-gold-light);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(212,168,67,0.3);
}
.pricing-note p {
    font-size: 0.95rem;
    color: var(--color-text);
}
@media (max-width: 768px) {
    .pricing-card.featured {
        transform: none;
    }
    .pricing-card.featured:hover {
        transform: translateY(-4px);
    }
}

/* --- FOOTER SOCIAL --- */
.footer-social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}
.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    background: rgba(212,168,67,0.1);
    color: var(--color-secondary);
    transition: all var(--transition);
}
.footer-social a:hover {
    background: var(--color-secondary);
    color: var(--color-primary-dark);
    transform: translateY(-2px);
}

/* --- STATS SECTION --- */
.stats-section {
    padding: 3.5rem 0;
    background: var(--color-primary);
    position: relative;
    overflow: hidden;
}
.stats-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(212,168,67,0.08) 0%, transparent 50%, rgba(212,168,67,0.05) 100%);
    pointer-events: none;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    position: relative;
    z-index: 1;
}
.stat-item {
    text-align: center;
    padding: 1.5rem 1rem;
    border-right: 1px solid rgba(212,168,67,0.2);
}
.stat-item:last-child { border-right: none; }
.stat-number {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    color: var(--color-secondary);
    line-height: 1.1;
    margin-bottom: 0.4rem;
    letter-spacing: 0.02em;
}
.stat-label {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
}
@media (max-width: 768px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-item { border-right: none; }
    .stat-item:nth-child(1), .stat-item:nth-child(2) {
        border-bottom: 1px solid rgba(212,168,67,0.2);
    }
}
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .stats-section { padding: 2.5rem 0; }
}

/* --- HOW IT WORKS / STEPS --- */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 2.5rem;
    counter-reset: step;
}
.step-item {
    text-align: center;
    padding: 2rem 1.5rem;
    position: relative;
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}
.step-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-secondary);
}
.bg-alt .step-item {
    background: rgba(255,255,255,0.07);
    border-color: rgba(212,168,67,0.2);
}
.bg-alt .step-item:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--color-secondary);
}
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--color-primary-dark);
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(212,168,67,0.3);
}
.step-item h3 {
    margin-bottom: 0.75rem;
    font-size: 1.15rem;
}
.bg-alt .step-item h3 { color: #fff; }
.step-item p {
    font-size: 0.9rem;
    color: var(--color-text-light);
    line-height: 1.65;
}
.bg-alt .step-item p { color: rgba(255,255,255,0.75); }
@media (max-width: 900px) {
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .steps-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* --- GROOMING SERVICES --- */
.grooming-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.grooming-card {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.75rem;
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}
.grooming-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-secondary);
    transform: translateY(-2px);
}
.grooming-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: var(--radius);
    background: var(--color-gold-light);
    color: var(--color-secondary);
}
.grooming-card h4 {
    margin-bottom: 0.4rem;
    font-size: 1.05rem;
}
.grooming-card p {
    font-size: 0.9rem;
    color: var(--color-text-light);
    line-height: 1.6;
}
.grooming-card .grooming-price {
    display: inline-block;
    margin-top: 0.5rem;
    font-weight: 600;
    color: var(--color-primary);
    font-size: 0.9rem;
}

/* --- TESTIMONIAL PLATFORM BADGE --- */
.testimonial-platform {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
}
.testimonial-platform.google {
    background: rgba(66,133,244,0.1);
    color: #4285F4;
}
.testimonial-platform.facebook {
    background: rgba(24,119,242,0.1);
    color: #1877F2;
}
.testimonial-platform.trustpilot {
    background: rgba(0,182,122,0.1);
    color: #00B67A;
}

/* --- TIPS GRID (Homepage) --- */
.tips-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}
.tip-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all var(--transition);
}
.tip-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-secondary);
}
.tip-card-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
}
.tip-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.tip-card:hover .tip-card-image img {
    transform: scale(1.05);
}
.tip-card-content {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.tip-card-content h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: var(--color-primary-dark);
    line-height: 1.35;
}
.tip-card-content p {
    font-size: 0.85rem;
    color: var(--color-text-light);
    line-height: 1.6;
    flex: 1;
}
.tip-card-content .link-arrow {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-secondary);
    transition: color var(--transition);
}
.tip-card:hover .link-arrow {
    color: var(--color-primary);
}
@media (max-width: 900px) {
    .tips-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .tips-grid { grid-template-columns: 1fr; }
    .tip-card-image { height: 160px; }
}

/* ======================================================
   ENHANCED SCROLL REVEALS — Staggered Cascade
   ====================================================== */

/* Staggered reveal delays for grid children */
.reveal-init { opacity: 0; transform: translateY(28px); transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.revealed { opacity: 1 !important; transform: translateY(0) !important; }

/* Auto-stagger: nth-child delays for cards in grids */
.services-grid .reveal-init:nth-child(2),
.why-grid .reveal-init:nth-child(2),
.articles-grid .reveal-init:nth-child(2),
.values-grid .reveal-init:nth-child(2),
.included-grid .reveal-init:nth-child(2),
.testimonials-slider .reveal-init:nth-child(2) { transition-delay: 0.1s; }

.services-grid .reveal-init:nth-child(3),
.why-grid .reveal-init:nth-child(3),
.articles-grid .reveal-init:nth-child(3),
.values-grid .reveal-init:nth-child(3),
.included-grid .reveal-init:nth-child(3),
.testimonials-slider .reveal-init:nth-child(3) { transition-delay: 0.2s; }

.services-grid .reveal-init:nth-child(4),
.why-grid .reveal-init:nth-child(4),
.articles-grid .reveal-init:nth-child(4),
.values-grid .reveal-init:nth-child(4),
.included-grid .reveal-init:nth-child(4) { transition-delay: 0.3s; }

.services-grid .reveal-init:nth-child(n+5),
.articles-grid .reveal-init:nth-child(n+5) { transition-delay: 0.35s; }

/* Section titles get a subtle fade-in from below */
.section-title,
.section-label,
.section-subtitle { transition: opacity 0.7s ease, transform 0.7s ease; }

/* Smooth image loading */
.article-card-image img,
.intro-image img,
.about-story-image img,
.service-detail-image img {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

/* ======================================================
   REFINED TYPOGRAPHY — Bodoni Moda Enhancements
   ====================================================== */

/* Bodoni Moda italic for emphasized headings */
.page-hero h1 {
    font-weight: 400;
    letter-spacing: 0.04em;
}

/* Section titles — refined spacing for Bodoni */
.section-title {
    letter-spacing: 0.03em;
    font-weight: 400;
}

/* Footer social links — enhanced hover */
.footer-social a {
    transition: all 0.3s ease;
    opacity: 0.7;
}
.footer-social a:hover {
    opacity: 1;
    transform: translateY(-2px);
    color: var(--color-secondary);
}

/* Smooth page-hero gradient overlay */
.page-hero {
    background: linear-gradient(135deg, #521E46 0%, #6B2D5B 50%, #3D1A33 100%);
}

/* Enhanced focus states for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}