/*
Theme Name: SRDA Tourism LLC
Theme URI: https://srda-tourism.com/
Author: SRDA
Description: A premium WordPress theme for Tours and Transport Services in Dubai. Features a sophisticated dual-font headline system with dynamic typography controls via Redux Framework.
Version: 1.4.0
Text Domain: srda-tourism

Typography System:
- Primary Heading Font (H1, H2): Controlled via Redux > Primary Heading Typography
- Secondary Heading Font (H3-H6): Controlled via Redux > Secondary Heading Typography
- Body Font: Controlled via Redux > Body Typography
- CSS Variables are dynamically generated via inc/enqueue.php
- Utility classes are static for optimal caching
*/

/* ============================================
   CSS VARIABLES (Dynamically Generated)
   ============================================ */
:root {
    /* Colors - LUXE Palette */
    --primary-color: #72383D;
    /* Burgundy */
    --secondary-color: #322D29;
    /* Ebony */
    --accent-color: #AC9C8D;
    /* Taupe */
    --sand-color: #D1C7BD;
    /* Sand */
    --gray-light: #D9D9D9;
    /* Light Gray */
    --white: #EFE9E1;
    /* Cream */

    /* Effects */
    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    --shadow-soft: 0 10px 30px rgba(50, 45, 41, 0.05);
    /* Uses ebony tint */
    --shadow-bold: 0 20px 40px rgba(50, 45, 41, 0.15);
    /* Uses ebony tint */
    --glass-bg: rgba(239, 233, 225, 0.1);
    /* Uses cream tint */
    --glass-border: rgba(239, 233, 225, 0.2);
    /* Uses cream tint */
}

/* ============================================
   BASE STYLES
   ============================================ */
body {
    font-family: var(--body-font);
    color: var(--secondary-color);
    margin: 0;
    padding: 0;
    background-color: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

html {
    scroll-behavior: smooth;
}

[x-cloak] {
    display: none !important;
}

/* ============================================
   TYPOGRAPHY HIERARCHY
   H1, H2: Primary Heading Font
   H3-H6: Secondary Heading Font
   ============================================ */
h1,
h2 {
    font-family: var(--heading-font) !important;
    color: var(--secondary-color);
}

h3,
h4,
h5,
h6 {
    font-family: var(--secondary-heading-font) !important;
    color: var(--secondary-color);
}

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

/* Container */
.max-w-7xl {
    max-width: var(--container-width) !important;
}

/* Shadow */
.shadow-premium {
    box-shadow: var(--shadow-dynamic);
}

/* Section Padding */
.section-padding {
    padding: 6rem 1rem;
}

@media (min-width: 768px) {
    .section-padding {
        padding: 8rem 0;
    }
}

/* ============================================
   BACKGROUND UTILITIES
   ============================================ */
.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-secondary {
    background-color: var(--secondary-color) !important;
}

.bg-accent {
    background-color: var(--accent-color) !important;
}

.bg-neutral {
    background-color: var(--neutral-color) !important;
}

.bg-light {
    background-color: var(--white) !important;
    /* Cream */
}

.bg-sand {
    background-color: var(--sand-color) !important;
}

.bg-gray-fade {
    background-color: var(--gray-light) !important;
}

/* ============================================
   TYPOGRAPHY UTILITIES
   ============================================ */

/* Font Family Classes */
.font-sans,
.font-body {
    font-family: var(--body-font) !important;
    letter-spacing: var(--body-letter-spacing);
}

.font-serif,
.font-heading,
.font-display {
    font-family: var(--heading-font) !important;
    letter-spacing: var(--heading-letter-spacing);
}

.font-heading-secondary {
    font-family: var(--secondary-heading-font) !important;
    letter-spacing: var(--secondary-heading-letter-spacing);
}

/* Typography Presets */
.heading-luxury {
    font-family: var(--heading-font) !important;
    letter-spacing: var(--heading-letter-spacing);
    font-style: italic;
}

.text-body-luxury {
    font-family: var(--body-font) !important;
    letter-spacing: var(--body-letter-spacing);
    font-weight: 300;
}

.uppercase-tracking {
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-weight: 700;
    font-size: 0.75rem;
}

/* Dynamic Headline Utilities */
.heading-primary {
    font-family: var(--heading-font) !important;
    letter-spacing: var(--heading-letter-spacing);
}

.heading-secondary {
    font-family: var(--secondary-heading-font) !important;
    letter-spacing: var(--secondary-heading-letter-spacing);
}

/* ============================================
   EFFECT UTILITIES
   ============================================ */

/* Glass Effect */
.glass-effect,
.glass-premium {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
}

/* Text Gradient */
.text-gradient {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hover Lift Effect */
.hover-lift {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-dynamic);
}

/* ============================================
   BUTTON COMPONENTS
   ============================================ */
.srda-btn {
    position: relative;
    overflow: hidden;
    transition: var(--transition);
    z-index: 1;
}

.srda-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: var(--primary-color);
    transition: var(--transition);
    z-index: -1;
}

.srda-btn:hover::after {
    height: 100%;
}

.btn-luxury {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 2.5rem;
    background: var(--primary-color);
    color: var(--secondary-color);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}

.btn-luxury:hover {
    background: var(--white);
    color: var(--primary-color);
    transform: scale(1.05);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes subtle-zoom {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}

.animate-subtle-zoom {
    animation: subtle-zoom 20s infinite alternate ease-in-out;
}

/* ============================================
   ADVANCED UTILITIES
   ============================================ */

/* Text Colors */
.text-primary {
    color: var(--primary-color) !important;
}

.text-secondary {
    color: var(--secondary-color) !important;
}

.text-accent {
    color: var(--accent-color) !important;
}

.text-neutral {
    color: var(--neutral-color) !important;
}

.text-light {
    color: var(--light-color) !important;
}

/* Border Utilities */
.border-primary {
    border-color: var(--primary-color) !important;
}

.border-secondary {
    border-color: var(--secondary-color) !important;
}

.border-accent {
    border-color: var(--accent-color) !important;
}

/* Opacity Utilities */
.opacity-10 {
    opacity: 0.1;
}

.opacity-20 {
    opacity: 0.2;
}

.opacity-30 {
    opacity: 0.3;
}

.opacity-40 {
    opacity: 0.4;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-60 {
    opacity: 0.6;
}

.opacity-70 {
    opacity: 0.7;
}

.opacity-80 {
    opacity: 0.8;
}

.opacity-90 {
    opacity: 0.9;
}

/* Transform Utilities */
.scale-105:hover {
    transform: scale(1.05);
}

.scale-110:hover {
    transform: scale(1.1);
}

.rotate-3 {
    transform: rotate(3deg);
}

.rotate-6 {
    transform: rotate(6deg);
}

.-rotate-3 {
    transform: rotate(-3deg);
}

.-rotate-6 {
    transform: rotate(-6deg);
}

/* Filter Utilities */
.blur-sm {
    filter: blur(4px);
}

.blur-md {
    filter: blur(8px);
}

.blur-lg {
    filter: blur(16px);
}

.brightness-110 {
    filter: brightness(1.1);
}

.brightness-125 {
    filter: brightness(1.25);
}

.grayscale {
    filter: grayscale(100%);
}

.grayscale:hover {
    filter: grayscale(0%);
}

/* Backdrop Blur */
.backdrop-blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.backdrop-blur-md {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.backdrop-blur-lg {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.backdrop-blur-xl {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* Gradient Backgrounds */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
}

.bg-gradient-secondary {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
}

.bg-gradient-radial {
    background: radial-gradient(circle at center, var(--primary-color) 0%, var(--secondary-color) 100%);
}

/* Aspect Ratios */
.aspect-square {
    aspect-ratio: 1 / 1;
}

.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-4-3 {
    aspect-ratio: 4 / 3;
}

.aspect-3-2 {
    aspect-ratio: 3 / 2;
}

/* Object Fit */
.object-cover {
    object-fit: cover;
}

.object-contain {
    object-fit: contain;
}

.object-fill {
    object-fit: fill;
}

/* Grid Utilities */
.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.grid-auto-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
}

/* Flexbox Utilities */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Spacing Utilities */
.space-y-4>*+* {
    margin-top: 1rem;
}

.space-y-6>*+* {
    margin-top: 1.5rem;
}

.space-y-8>*+* {
    margin-top: 2rem;
}

.space-x-4>*+* {
    margin-left: 1rem;
}

.space-x-6>*+* {
    margin-left: 1.5rem;
}

.space-x-8>*+* {
    margin-left: 2rem;
}

/* Line Clamp */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Transitions */
.transition-all {
    transition: all 0.3s ease;
}

.transition-colors {
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.transition-transform {
    transition: transform 0.3s ease;
}

.transition-opacity {
    transition: opacity 0.3s ease;
}

/* Cursor Utilities */
.cursor-pointer {
    cursor: pointer;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

/* Overflow Utilities */
.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

/* Z-Index Utilities */
.z-0 {
    z-index: 0;
}

.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}

.z-30 {
    z-index: 30;
}

.z-40 {
    z-index: 40;
}

.z-50 {
    z-index: 50;
}

/* Responsive Visibility */
@media (max-width: 767px) {
    .hidden-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .hidden-desktop {
        display: none !important;
    }
}

/* Print Utilities */
@media print {
    .print-hidden {
        display: none !important;
    }
}

/* ============================================
   HEADER STYLES - Dynamic Transparent/Solid
   ============================================ */

/* Transparent Header (for pages with hero sections) */
.header-transparent {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.header-transparent .logo img {
    filter: brightness(0) invert(1) !important;
}

.header-transparent nav#site-navigation ul li a,
.header-transparent .hamburger-menu {
    color: #ffffff !important;
}

/* Solid Header (for pages without hero sections) */
.header-solid {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.header-solid .logo img {
    filter: none !important;
}

.header-solid nav#site-navigation ul li a,
.header-solid .hamburger-menu {
    color: #322D29 !important;
}


/* Header scroll behavior */
#masthead.scrolled {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}


/* Logo transitions */
.logo img {
    transition: opacity 0.3s ease, filter 0.3s ease !important;
}

.logo-white {
    filter: brightness(0) invert(1) !important;
}


/* Active Header State (Scrolled or Menu Open) */
.header-active {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.header-active .logo img {
    filter: none !important;
}

.header-active nav#site-navigation ul li a,
.header-active .hamburger-menu {
    color: #322D29 !important;
}


#masthead.header-active {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}



/* Ensure menu items are visible on transparent header */
.header-transparent .text-white {
    color: #ffffff !important;
}

/* Hover Opacity Utility */
.hover\:opacity-70:hover {
    opacity: 0.7 !important;
}

/* ============================================
   LUXURY DESIGN SYSTEM COMPONENTS
   ============================================ */

/* 1. Luxury Card - Minimalist & Airy */
.luxe-card {
    background: #FBFBFB;
    border: 1px solid rgba(50, 45, 41, 0.05);
    padding: 2.5rem;
    border-radius: 2px;
    transition: var(--transition);
}

.luxe-card:hover {
    background: #FFFFFF;
    box-shadow: var(--shadow-soft);
    border-color: rgba(50, 45, 41, 0.1);
}

/* 2. Editorial Heading - Spaced & Sophisticated */
.luxe-heading-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    font-weight: 700;
    color: var(--primary-color);
    display: inline-block;
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

/* 3. Narrative Typography for the_content() - COMPLETE EDITOR STYLES */
.luxe-narrative {
    font-family: var(--body-font);
}

.luxe-narrative p {
    font-size: 1.125rem;
    line-height: 2;
    font-weight: 300;
    margin-bottom: 2.5rem;
    color: rgba(50, 45, 41, 0.7);
}

.luxe-narrative p strong,
.luxe-narrative p b {
    font-weight: 600;
    color: rgba(50, 45, 41, 0.85);
}

.luxe-narrative h1,
.luxe-narrative h2,
.luxe-narrative h3,
.luxe-narrative h4,
.luxe-narrative h5,
.luxe-narrative h6 {
    font-family: var(--heading-font);
    font-weight: 500;
    color: var(--secondary-color);
    margin-top: 4rem;
    margin-bottom: 2rem;
    letter-spacing: -0.02em;
    scroll-margin-top: 100px;
}

.luxe-narrative h1 {
    font-size: 3.5rem;
}

.luxe-narrative h2 {
    font-size: 2.5rem;
}

.luxe-narrative h3 {
    font-size: 2rem;
}

/* Lists */
.luxe-narrative ul,
.luxe-narrative ol {
    margin-bottom: 2.5rem;
    padding-left: 1.5rem;
}

.luxe-narrative li {
    margin-bottom: 1rem;
    color: rgba(50, 45, 41, 0.6);
    line-height: 1.8;
}

.luxe-narrative ul li {
    list-style-type: square;
}

.luxe-narrative ul li::marker {
    color: var(--primary-color);
}

/* Quotes */
.luxe-narrative blockquote {
    border-left: 2px solid var(--primary-color);
    padding: 2rem 0 2rem 3rem;
    margin: 4rem 0;
    background: #F9F9F9;
}

.luxe-narrative blockquote p {
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 0;
}

.luxe-narrative blockquote cite {
    display: block;
    margin-top: 1.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-style: normal;
    color: var(--primary-color);
}

/* Data Tables */
.luxe-narrative table {
    width: 100%;
    margin-bottom: 3rem;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.luxe-narrative th {
    text-align: left;
    padding: 1.5rem;
    background: #FAFAFA;
    border-bottom: 1px solid rgba(50, 45, 41, 0.1);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.luxe-narrative td {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(50, 45, 41, 0.05);
}

/* Media & Alignments */
.luxe-narrative img {
    height: auto;
    max-width: 100%;
    border-radius: 2px;
    margin-bottom: 2.5rem;
}

.luxe-narrative .alignleft {
    float: left;
    margin: 0.5rem 2rem 2rem 0;
    max-width: 50%;
}

.luxe-narrative .alignright {
    float: right;
    margin: 0.5rem 0 2rem 2rem;
    max-width: 50%;
}

.luxe-narrative .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.luxe-narrative figcaption {
    font-size: 0.75rem;
    color: rgba(50, 45, 41, 0.4);
    text-align: center;
    margin-top: -1.5rem;
    margin-bottom: 2.5rem;
    font-style: italic;
}

/* Buttons (Gutenberg Blocks) */
.luxe-narrative .wp-block-button__link {
    background-color: var(--secondary-color);
    color: #FFF !important;
    padding: 1.25rem 2.5rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 10px;
    font-weight: 700;
    border-radius: 0;
    transition: var(--transition);
}

.luxe-narrative .wp-block-button__link:hover {
    background-color: var(--primary-color);
    transform: translateY(-2px);
}

/* Separators */
.luxe-narrative hr {
    border: none;
    height: 1px;
    background: rgba(50, 45, 41, 0.05);
    margin: 5rem 0;
}

.luxe-narrative hr.is-style-wide {
    width: 100%;
}

.luxe-narrative hr.is-style-dots::before {
    content: "\00b7 \00b7 \00b7";
    font-size: 2rem;
    color: var(--primary-color);
    letter-spacing: 1rem;
}

/* ============================================
   LUXE-NARRATIVE SUB-CLASSES
   Modifiers and variants for content styling
   ============================================ */

/* ===== SIZE VARIANTS ===== */

/* Small/Compact Narrative */
.luxe-narrative-sm p {
    font-size: 0.9375rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.luxe-narrative-sm h1 {
    font-size: 2.5rem;
}

.luxe-narrative-sm h2 {
    font-size: 2rem;
}

.luxe-narrative-sm h3 {
    font-size: 1.5rem;
}

.luxe-narrative-sm h4 {
    font-size: 1.25rem;
}

/* Large Narrative */
.luxe-narrative-lg p {
    font-size: 1.25rem;
    line-height: 2.1;
    margin-bottom: 3rem;
}

.luxe-narrative-lg h1 {
    font-size: 4rem;
}

.luxe-narrative-lg h2 {
    font-size: 3rem;
}

.luxe-narrative-lg h3 {
    font-size: 2.25rem;
}

.luxe-narrative-lg h4 {
    font-size: 1.75rem;
}

/* Extra Large Narrative */
.luxe-narrative-xl p {
    font-size: 1.5rem;
    line-height: 2.2;
    margin-bottom: 3.5rem;
}

.luxe-narrative-xl h1 {
    font-size: 4.5rem;
}

.luxe-narrative-xl h2 {
    font-size: 3.5rem;
}

.luxe-narrative-xl h3 {
    font-size: 2.75rem;
}

/* ===== SPACING VARIANTS ===== */

/* Compact Spacing */
.luxe-narrative-compact p {
    margin-bottom: 1.25rem;
}

.luxe-narrative-compact h1,
.luxe-narrative-compact h2,
.luxe-narrative-compact h3,
.luxe-narrative-compact h4,
.luxe-narrative-compact h5,
.luxe-narrative-compact h6 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.luxe-narrative-compact ul,
.luxe-narrative-compact ol {
    margin-bottom: 1.5rem;
}

/* Relaxed Spacing */
.luxe-narrative-relaxed p {
    margin-bottom: 3.5rem;
}

.luxe-narrative-relaxed h1,
.luxe-narrative-relaxed h2,
.luxe-narrative-relaxed h3,
.luxe-narrative-relaxed h4,
.luxe-narrative-relaxed h5,
.luxe-narrative-relaxed h6 {
    margin-top: 5rem;
    margin-bottom: 2.5rem;
}

.luxe-narrative-relaxed ul,
.luxe-narrative-relaxed ol {
    margin-bottom: 3.5rem;
}

/* ===== STYLE VARIANTS ===== */

/* Elegant/Refined Style */
.luxe-narrative-elegant p {
    font-weight: 300;
    font-style: italic;
    color: rgba(50, 45, 41, 0.65);
}

.luxe-narrative-elegant h1,
.luxe-narrative-elegant h2,
.luxe-narrative-elegant h3 {
    font-style: italic;
    font-weight: 500;
}

/* Bold/Strong Style */
.luxe-narrative-bold p {
    font-weight: 400;
    color: rgba(50, 45, 41, 0.85);
}

.luxe-narrative-bold h1,
.luxe-narrative-bold h2,
.luxe-narrative-bold h3,
.luxe-narrative-bold h4,
.luxe-narrative-bold h5,
.luxe-narrative-bold h6 {
    font-weight: 700;
}

/* ===== COLOR VARIANTS ===== */

/* Dark Text */
.luxe-narrative-dark p {
    color: rgba(50, 45, 41, 0.9);
}

.luxe-narrative-dark h1,
.luxe-narrative-dark h2,
.luxe-narrative-dark h3,
.luxe-narrative-dark h4,
.luxe-narrative-dark h5,
.luxe-narrative-dark h6 {
    color: var(--secondary-color);
}

/* Light Text */
.luxe-narrative-light p {
    color: rgba(50, 45, 41, 0.5);
}

.luxe-narrative-light h1,
.luxe-narrative-light h2,
.luxe-narrative-light h3,
.luxe-narrative-light h4,
.luxe-narrative-light h5,
.luxe-narrative-light h6 {
    color: rgba(50, 45, 41, 0.7);
}

/* Muted Text */
.luxe-narrative-muted p {
    color: rgba(50, 45, 41, 0.45);
}

.luxe-narrative-muted h1,
.luxe-narrative-muted h2,
.luxe-narrative-muted h3,
.luxe-narrative-muted h4,
.luxe-narrative-muted h5,
.luxe-narrative-muted h6 {
    color: rgba(50, 45, 41, 0.6);
}

/* ===== ALIGNMENT VARIANTS ===== */

/* Centered Content */
.luxe-narrative-center {
    text-align: center;
}

.luxe-narrative-center h1,
.luxe-narrative-center h2,
.luxe-narrative-center h3,
.luxe-narrative-center h4,
.luxe-narrative-center h5,
.luxe-narrative-center h6 {
    text-align: center;
}

/* Justified Text */
.luxe-narrative-justify p {
    text-align: justify;
}

/* ===== SPECIAL MODIFIERS ===== */

/* Drop Cap First Letter */
.luxe-narrative-dropcap p:first-of-type::first-letter {
    font-size: 4.5rem;
    line-height: 1;
    float: left;
    margin: 0 0.75rem 0 0;
    font-family: var(--heading-font);
    color: var(--primary-color);
    font-weight: 700;
}

/* Highlighted First Paragraph */
.luxe-narrative-highlight-first p:first-of-type {
    font-size: 1.375rem;
    line-height: 1.8;
    font-weight: 400;
    color: rgba(50, 45, 41, 0.85);
}

/* Columns Layout */
.luxe-narrative-columns {
    column-count: 2;
    column-gap: 3rem;
}

.luxe-narrative-columns h1,
.luxe-narrative-columns h2,
.luxe-narrative-columns h3,
.luxe-narrative-columns h4,
.luxe-narrative-columns h5,
.luxe-narrative-columns h6 {
    column-span: all;
}

/* No Margins (for tight layouts) */
.luxe-narrative-no-margins p {
    margin-bottom: 0;
}

.luxe-narrative-no-margins h1,
.luxe-narrative-no-margins h2,
.luxe-narrative-no-margins h3,
.luxe-narrative-no-margins h4,
.luxe-narrative-no-margins h5,
.luxe-narrative-no-margins h6 {
    margin-top: 0;
    margin-bottom: 0;
}

/* Serif Paragraphs */
.luxe-narrative-serif-body p {
    font-family: var(--heading-font);
    font-style: italic;
    font-weight: 400;
}

/* Sans-serif Headings */
.luxe-narrative-sans-headings h1,
.luxe-narrative-sans-headings h2,
.luxe-narrative-sans-headings h3,
.luxe-narrative-sans-headings h4,
.luxe-narrative-sans-headings h5,
.luxe-narrative-sans-headings h6 {
    font-family: var(--body-font);
    font-style: normal;
}

/* Accent Headings */
.luxe-narrative-accent-headings h1,
.luxe-narrative-accent-headings h2,
.luxe-narrative-accent-headings h3 {
    color: var(--primary-color);
}

/* Underlined Headings */
.luxe-narrative-underlined-headings h2,
.luxe-narrative-underlined-headings h3 {
    position: relative;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(50, 45, 41, 0.1);
}

/* Numbered Headings */
.luxe-narrative-numbered-headings {
    counter-reset: heading-counter;
}

.luxe-narrative-numbered-headings h2::before,
.luxe-narrative-numbered-headings h3::before {
    counter-increment: heading-counter;
    content: counter(heading-counter, decimal-leading-zero) ". ";
    color: var(--primary-color);
    font-weight: 700;
    margin-right: 0.75rem;
}

/* ===== LINK STYLES WITHIN NARRATIVE ===== */

.luxe-narrative-styled-links a {
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 1px solid rgba(114, 56, 61, 0.3);
    transition: all 0.3s ease;
}

.luxe-narrative-styled-links a:hover {
    color: var(--secondary-color);
    border-bottom-color: var(--secondary-color);
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 767px) {
    .luxe-narrative-lg p {
        font-size: 1.0625rem;
    }

    .luxe-narrative-xl p {
        font-size: 1.125rem;
    }

    .luxe-narrative-columns {
        column-count: 1;
    }

    .luxe-narrative-dropcap p:first-of-type::first-letter {
        font-size: 3rem;
    }
}

/* 4. Entry Content Styling - High End Editorial */
.entry-content {
    font-family: var(--body-font);
    color: var(--secondary-color);
    line-height: 1.8;
}

.entry-content p {
    margin-bottom: 2rem;
    font-size: 1.1rem;
    color: rgba(50, 45, 41, 0.7);
    font-weight: 300;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    font-family: var(--heading-font);
    color: var(--secondary-color);
    line-height: 1.25;
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.entry-content h1 {
    font-size: 3rem;
}

.entry-content h2 {
    font-size: 2.25rem;
    border-bottom: 1px solid rgba(50, 45, 41, 0.05);
    padding-bottom: 0.5rem;
}

.entry-content h3 {
    font-size: 1.75rem;
}

/* Lists with Luxury Indicators */
.entry-content ul,
.entry-content ol {
    margin-bottom: 2rem;
    padding-left: 1.25rem;
}

.entry-content li {
    margin-bottom: 0.75rem;
}

.entry-content ul>li {
    list-style-type: none;
    position: relative;
}

.entry-content ul>li::before {
    content: '';
    position: absolute;
    left: -1.25rem;
    top: 0.75rem;
    width: 0.5rem;
    height: 1px;
    background: var(--primary-color);
    opacity: 0.4;
}

/* Media: Images, Galleries, Videos */
.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 2rem;
}

.entry-content figure {
    margin-bottom: 2.5rem;
}

.entry-content figcaption {
    font-size: 0.8rem;
    color: rgba(50, 45, 41, 0.4);
    text-align: center;
    font-style: italic;
    margin-top: 0.5rem;
}

.entry-content .wp-block-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.entry-content .wp-block-video,
.entry-content .wp-block-embed {
    margin-bottom: 3rem;
    border-radius: 4px;
    overflow: hidden;
    background: #000;
}

/* Blockquotes: Premium Aesthetic */
.entry-content blockquote {
    position: relative;
    padding-left: 3rem;
    margin: 4rem 0;
    font-family: var(--heading-font);
    font-style: italic;
    color: rgba(50, 45, 41, 0.8);
}

.entry-content blockquote::before {
    content: '“';
    position: absolute;
    left: 0;
    top: -1rem;
    font-size: 4rem;
    color: var(--primary-color);
    opacity: 0.1;
    line-height: 1;
}

.entry-content blockquote p {
    font-size: 1.5rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.entry-content blockquote cite {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-style: normal;
    font-weight: 700;
    color: var(--primary-color);
}

/* Data Tables */
.entry-content table {
    width: 100%;
    margin-bottom: 3rem;
    border-collapse: collapse;
}

.entry-content th,
.entry-content td {
    padding: 1rem;
    border-bottom: 1px solid rgba(50, 45, 41, 0.05);
    text-align: left;
}

.entry-content th {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    background: #FAFAFA;
}

/* Wordpres Specific Alignments */
.entry-content .alignleft {
    float: left;
    margin: 0 2rem 2rem 0;
}

.entry-content .alignright {
    float: right;
    margin: 0 0 2rem 2rem;
}

.entry-content .aligncenter {
    display: block;
    margin: 0 auto 2.5rem;
    text-align: center;
}

@media (max-width: 768px) {

    .entry-content .alignleft,
    .entry-content .alignright {
        float: none;
        margin: 0 0 2rem 0;
        max-width: 100%;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 0.4s ease forwards;
}

/* Horizontal Rule */
.entry-content hr {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(50, 45, 41, 0.1), transparent);
    margin: 5rem 0;
}

/* Luxury Decorative Divider (New System) */
.luxe-divider {
    height: 1px;
    background: rgba(50, 45, 41, 0.05);
    width: 60px;
    margin: 2rem 0;
    transition: width 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.luxe-card:hover .luxe-divider {
    width: 100px;
    background: var(--primary-color);
}

/* 5. Elite Scroll Animation */
@keyframes luxe-scroll-reveal {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(200%);
    }
}

.luxe-scroll-line {
    width: 1px;
    height: 100px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.luxe-scroll-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: var(--primary-color);
    animation: luxe-scroll-reveal 3s infinite linear;
}

/* 6. Form Input - Minimal Underline Style */
.luxe-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(50, 45, 41, 0.1);
    padding: 0.75rem 0;
    font-family: var(--heading-font);
    font-style: italic;
    font-size: 1rem;
    transition: var(--transition);
}

.luxe-input:focus {
    outline: none;
    border-color: var(--secondary-color);
    padding-left: 0.5rem;
}

.luxe-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 700;
    color: rgba(50, 45, 41, 0.3);
}

/* Animations */
@keyframes zoom-slow {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}

.animate-zoom-slow {
    animation: zoom-slow 20s ease-out forwards;
}

/* Pagination Styles */
.nav-links {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.nav-links .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid rgba(50, 45, 41, 0.1);
    transition: all 0.3s ease;
}

.nav-links .page-numbers:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.nav-links .page-numbers.current {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white;
}

.nav-links .next,
.nav-links .prev {
    width: auto;
    padding: 0 1rem;
}

/* ============================================
   MOBILE RESPONSIVENESS & PERFORMANCE REFINEMENT
   Targeting small screens and optimizing the mobile journey
   ============================================ */

@media (max-width: 768px) {

    /* Container & Section Padding Refinement */
    .container {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    .py-32 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    .py-24 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    .mb-24 {
        margin-bottom: 3.5rem !important;
    }

    .mb-20 {
        margin-bottom: 3rem !important;
    }

    /* Typography Scaling (Clamping for readability) */
    .text-8xl {
        font-size: clamp(3rem, 12vw, 4.5rem) !important;
        line-height: 1 !important;
    }

    .text-7xl {
        font-size: clamp(2.5rem, 10vw, 4rem) !important;
        line-height: 1.1 !important;
    }

    .text-6xl {
        font-size: clamp(2.25rem, 8vw, 3.5rem) !important;
        line-height: 1.1 !important;
    }

    .text-5xl {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    /* Grid & Gap Refinement */
    .gap-12 {
        gap: 2rem !important;
    }

    .gap-16 {
        gap: 2.5rem !important;
    }

    /* Button and UI scale for Touch */
    .btn-luxury {
        width: 100%;
        padding: 1rem 2rem;
    }

    /* Stats Grids */
    .grid-cols-2 {
        gap: 1rem !important;
    }

    /* Hero Section Adjustments */
    .min-h-\[75vh\],
    .min-h-\[650px\],
    .h-\[80vh\],
    .h-\[75vh\],
    .h-\[90vh\],
    .h-\[65vh\] {
        height: auto !important;
        min-height: 100vh !important;
        padding-top: 120px !important;
        padding-bottom: 60px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
    }

    .pb-20,
    .pb-10 {
        padding-bottom: 2.5rem !important;
    }

    /* Heading Label scaling */
    .luxe-heading-label,
    .tracking-\[0\.8em\],
    .tracking-\[0\.5em\],
    .tracking-\[0\.4em\] {
        letter-spacing: 0.2em !important;
        font-size: 9px !important;
    }

    /* Archive Hero specific text adjustments */
    .md\:text-8xl,
    .md\:text-7xl {
        font-size: 2.85rem !important;
        line-height: 1 !important;
        margin-bottom: 1.25rem !important;
    }

    .md\:text-6xl {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
    }

    /* Column gaps for mobile grids */
    .gap-24,
    .gap-16,
    .gap-12,
    .gap-10 {
        gap: 1.5rem !important;
    }

    /* Margin adjustments */
    .mt-40,
    .mt-32,
    .mt-24 {
        margin-top: 4rem !important;
    }

    .mb-24,
    .mb-20,
    .mb-16 {
        margin-bottom: 3rem !important;
    }

    /* Layout column spans */
    .lg\:col-span-7,
    .lg\:col-span-5,
    .lg\:col-span-12 {
        width: 100% !important;
    }

    /* Image Ratios on mobile */
    .aspect-\[4\/3\],
    .aspect-\[3\/2\],
    .aspect-\[16\/9\] {
        aspect-ratio: 16 / 9 !important;
    }

    /* Header adjustments */
    #masthead {
        padding: 0.75rem 0 !important;
    }

    .logo img {
        max-height: 36px !important;
    }

    /* Sidebar and Padding tweaks */
    .p-8,
    .p-10,
    .p-12 {
        padding: 1.25rem !important;
    }

    .sticky {
        position: relative !important;
        top: 0 !important;
    }
}

/* Base scrollbar for better mobile feel */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--white);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}

/* Smooth Touch Scrolling */
body {
    -webkit-overflow-scrolling: touch;
}

/* Prevent Font Smoothing blurring on mobile */
body {
    -webkit-tap-highlight-color: transparent;
}

/* ============================================
   FORM INPUT & TEXTAREA UTILITIES
   Elegant, refined form controls
   ============================================ */

/* Base Input Styles */
.form-input,
.form-textarea,
.form-select {
    width: 100%;
    font-family: var(--body-font);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--secondary-color);
    background-color: #FFFFFF;
    border: 1px solid rgba(50, 45, 41, 0.1);
    border-radius: 2px;
    padding: 0.875rem 1rem;
    transition: all 0.3s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Focus States */
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(114, 56, 61, 0.1);
    background-color: #FFFFFF;
}

/* Hover States */
.form-input:hover:not(:disabled),
.form-textarea:hover:not(:disabled),
.form-select:hover:not(:disabled) {
    border-color: rgba(50, 45, 41, 0.2);
}

/* Disabled States */
.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
    background-color: rgba(50, 45, 41, 0.02);
    color: rgba(50, 45, 41, 0.4);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Placeholder Styling */
.form-input::placeholder,
.form-textarea::placeholder {
    color: rgba(50, 45, 41, 0.3);
    font-style: italic;
    font-weight: 300;
}

/* Textarea Specific */
.form-textarea {
    resize: vertical;
    min-height: 120px;
}

.form-textarea.resize-none {
    resize: none;
}

/* ============================================
   MINIMALIST / UNDERLINE INPUT STYLES
   ============================================ */

.form-input-minimal,
.form-textarea-minimal {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(50, 45, 41, 0.1);
    border-radius: 0;
    padding: 0.75rem 0;
    font-family: var(--body-font);
    font-size: 0.875rem;
    font-style: italic;
    color: var(--secondary-color);
    transition: all 0.3s ease;
}

.form-input-minimal:focus,
.form-textarea-minimal:focus {
    outline: none;
    border-bottom-color: var(--primary-color);
    background: transparent;
}

.form-input-minimal::placeholder,
.form-textarea-minimal::placeholder {
    color: rgba(50, 45, 41, 0.3);
    font-style: italic;
}

/* ============================================
   LUXURY / PREMIUM INPUT STYLES
   ============================================ */

.form-input-luxury,
.form-textarea-luxury {
    width: 100%;
    background: #FBFBFB;
    border: 1px solid rgba(50, 45, 41, 0.08);
    border-radius: 4px;
    padding: 1.25rem 1.5rem;
    font-family: var(--body-font);
    font-size: 1rem;
    color: var(--secondary-color);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.form-input-luxury:focus,
.form-textarea-luxury:focus {
    outline: none;
    background: #FFFFFF;
    border-color: var(--primary-color);
    box-shadow: 0 8px 24px rgba(114, 56, 61, 0.08);
    transform: translateY(-2px);
}

/* ============================================
   INPUT SIZE VARIANTS
   ============================================ */

/* Small */
.form-input-sm {
    padding: 0.625rem 0.875rem;
    font-size: 0.75rem;
}

/* Medium (Default) */
.form-input-md {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
}

/* Large */
.form-input-lg {
    padding: 1.125rem 1.25rem;
    font-size: 1rem;
}

/* Extra Large */
.form-input-xl {
    padding: 1.375rem 1.5rem;
    font-size: 1.125rem;
}

/* ============================================
   VALIDATION STATES
   ============================================ */

/* Success State */
.form-input-success,
.form-textarea-success {
    border-color: #10B981;
    background-color: rgba(16, 185, 129, 0.02);
}

.form-input-success:focus,
.form-textarea-success:focus {
    border-color: #10B981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Error State */
.form-input-error,
.form-textarea-error {
    border-color: var(--primary-color);
    background-color: rgba(114, 56, 61, 0.02);
}

.form-input-error:focus,
.form-textarea-error:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(114, 56, 61, 0.1);
}

/* Warning State */
.form-input-warning,
.form-textarea-warning {
    border-color: #F59E0B;
    background-color: rgba(245, 158, 11, 0.02);
}

.form-input-warning:focus,
.form-textarea-warning:focus {
    border-color: #F59E0B;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

/* ============================================
   FORM LABELS
   ============================================ */

.form-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(50, 45, 41, 0.5);
    margin-bottom: 0.5rem;
}

.form-label-required::after {
    content: '*';
    color: var(--primary-color);
    margin-left: 0.25rem;
}

/* ============================================
   FORM GROUPS & CONTAINERS
   ============================================ */

.form-group {
    margin-bottom: 1.5rem;
}

.form-group-inline {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* ============================================
   HELPER TEXT & ERROR MESSAGES
   ============================================ */

.form-help-text {
    display: block;
    font-size: 0.75rem;
    color: rgba(50, 45, 41, 0.5);
    margin-top: 0.375rem;
    font-style: italic;
}

.form-error-message {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--primary-color);
    margin-top: 0.5rem;
    animation: fadeInError 0.3s ease-out;
}

@keyframes fadeInError {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-success-message {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #10B981;
    margin-top: 0.5rem;
}

/* ============================================
   CHECKBOX & RADIO STYLES
   ============================================ */

.form-checkbox,
.form-radio {
    width: 1.125rem;
    height: 1.125rem;
    border: 1px solid rgba(50, 45, 41, 0.2);
    background-color: #FFFFFF;
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-checkbox {
    border-radius: 3px;
}

.form-radio {
    border-radius: 50%;
}

.form-checkbox:checked,
.form-radio:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-checkbox:focus,
.form-radio:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(114, 56, 61, 0.1);
}

/* ============================================
   SELECT DROPDOWN STYLES
   ============================================ */

.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23322D29' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px;
    padding-right: 2.5rem;
}

.form-select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2372383D' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 767px) {

    .form-input,
    .form-textarea,
    .form-select {
        font-size: 1rem;
        /* Prevent zoom on iOS */
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ============================================
   MAIN CONTENT TEXT AREA CLASSES
   For page content, descriptions, and text blocks
   ============================================ */

/* Content Container Styles */
.content-area {
    max-width: 65ch;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.content-area-wide {
    max-width: 85ch;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.content-area-full {
    width: 100%;
    padding: 2rem 1rem;
}

/* Text Block Styles */
.text-block {
    font-family: var(--body-font);
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(50, 45, 41, 0.7);
    margin-bottom: 1.5rem;
}

.text-block-lg {
    font-size: 1.125rem;
    line-height: 1.9;
    color: rgba(50, 45, 41, 0.7);
    margin-bottom: 2rem;
}

.text-block-xl {
    font-size: 1.25rem;
    line-height: 2;
    color: rgba(50, 45, 41, 0.7);
    margin-bottom: 2.5rem;
}

/* Lead/Intro Text */
.text-lead {
    font-size: 1.375rem;
    line-height: 1.8;
    font-weight: 300;
    color: rgba(50, 45, 41, 0.8);
    margin-bottom: 2.5rem;
}

.text-intro {
    font-size: 1.25rem;
    line-height: 1.9;
    font-weight: 300;
    color: rgba(50, 45, 41, 0.7);
    margin-bottom: 2rem;
    font-style: italic;
}

/* Subtitle/Subheading Text */
.text-subtitle {
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(50, 45, 41, 0.6);
    margin-bottom: 1.5rem;
    font-weight: 400;
}

/* Description Text */
.text-description {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: rgba(50, 45, 41, 0.6);
    margin-bottom: 1.5rem;
}

.text-description-sm {
    font-size: 0.875rem;
    line-height: 1.7;
    color: rgba(50, 45, 41, 0.5);
    margin-bottom: 1rem;
}

/* Highlighted/Featured Text */
.text-featured {
    font-size: 1.5rem;
    line-height: 1.6;
    font-weight: 400;
    color: var(--secondary-color);
    margin-bottom: 2rem;
    font-family: var(--heading-font);
    font-style: italic;
}

.text-highlight {
    background: linear-gradient(180deg, transparent 60%, rgba(114, 56, 61, 0.15) 60%);
    padding: 0 0.25rem;
    font-weight: 500;
}

/* Quote/Pullquote Styles */
.text-quote {
    font-size: 1.375rem;
    line-height: 1.6;
    font-style: italic;
    color: rgba(50, 45, 41, 0.8);
    border-left: 3px solid var(--primary-color);
    padding-left: 2rem;
    margin: 2.5rem 0;
}

.text-pullquote {
    font-size: 1.75rem;
    line-height: 1.5;
    font-style: italic;
    font-family: var(--heading-font);
    color: var(--secondary-color);
    text-align: center;
    padding: 3rem 2rem;
    margin: 3rem 0;
    border-top: 1px solid rgba(50, 45, 41, 0.1);
    border-bottom: 1px solid rgba(50, 45, 41, 0.1);
}

/* Content Boxes */
.content-box {
    background: #FBFBFB;
    border: 1px solid rgba(50, 45, 41, 0.05);
    border-radius: 4px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.content-box-bordered {
    background: #FFFFFF;
    border: 2px solid rgba(50, 45, 41, 0.1);
    border-radius: 2px;
    padding: 2.5rem;
    margin-bottom: 2rem;
}

.content-box-highlight {
    background: linear-gradient(135deg, rgba(114, 56, 61, 0.03) 0%, rgba(172, 156, 141, 0.03) 100%);
    border-left: 4px solid var(--primary-color);
    padding: 2rem 2rem 2rem 2.5rem;
    margin-bottom: 2rem;
}

.content-box-subtle {
    background: rgba(50, 45, 41, 0.02);
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 2px;
}

/* Info/Note Boxes */
.info-box {
    background: rgba(59, 130, 246, 0.05);
    border-left: 4px solid #3B82F6;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    border-radius: 2px;
}

.info-box-title {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #3B82F6;
    margin-bottom: 0.75rem;
}

.warning-box {
    background: rgba(245, 158, 11, 0.05);
    border-left: 4px solid #F59E0B;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    border-radius: 2px;
}

.warning-box-title {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #F59E0B;
    margin-bottom: 0.75rem;
}

.success-box {
    background: rgba(16, 185, 129, 0.05);
    border-left: 4px solid #10B981;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    border-radius: 2px;
}

.success-box-title {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #10B981;
    margin-bottom: 0.75rem;
}

/* Text Alignment Utilities */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

/* Text Weight Utilities */
.text-light {
    font-weight: 300;
}

.text-normal {
    font-weight: 400;
}

.text-medium {
    font-weight: 500;
}

.text-semibold {
    font-weight: 600;
}

.text-bold {
    font-weight: 700;
}

/* Text Style Utilities */
.text-italic {
    font-style: italic;
}

.text-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.text-lowercase {
    text-transform: lowercase;
}

.text-capitalize {
    text-transform: capitalize;
}

/* Letter Spacing Utilities */
.tracking-tight {
    letter-spacing: -0.025em;
}

.tracking-normal {
    letter-spacing: 0;
}

.tracking-wide {
    letter-spacing: 0.025em;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

.tracking-widest {
    letter-spacing: 0.1em;
}

/* Line Height Utilities */
.leading-none {
    line-height: 1;
}

.leading-tight {
    line-height: 1.25;
}

.leading-snug {
    line-height: 1.375;
}

.leading-normal {
    line-height: 1.5;
}

.leading-relaxed {
    line-height: 1.75;
}

.leading-loose {
    line-height: 2;
}

/* Text Size Utilities */
.text-xs {
    font-size: 0.75rem;
}

.text-sm {
    font-size: 0.875rem;
}

.text-base {
    font-size: 1rem;
}

.text-lg {
    font-size: 1.125rem;
}

.text-xl {
    font-size: 1.25rem;
}

.text-2xl {
    font-size: 1.5rem;
}

.text-3xl {
    font-size: 1.875rem;
}

.text-4xl {
    font-size: 2.25rem;
}

/* Paragraph Spacing */
.prose p {
    margin-bottom: 1.5rem;
}

.prose-lg p {
    margin-bottom: 2rem;
}

.prose-xl p {
    margin-bottom: 2.5rem;
}

/* List Styling for Content */
.content-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 2rem;
}

.content-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
    line-height: 1.8;
    color: rgba(50, 45, 41, 0.7);
}

.content-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    border-radius: 50%;
}

.content-list-check li::before {
    content: '✓';
    background: none;
    color: var(--primary-color);
    font-weight: 700;
    width: auto;
    height: auto;
    top: 0;
}

/* Numbered List */
.content-list-numbered {
    counter-reset: content-counter;
    list-style: none;
    padding-left: 0;
    margin-bottom: 2rem;
}

.content-list-numbered li {
    position: relative;
    padding-left: 3rem;
    margin-bottom: 1.5rem;
    line-height: 1.8;
    color: rgba(50, 45, 41, 0.7);
}

.content-list-numbered li::before {
    counter-increment: content-counter;
    content: counter(content-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    background: var(--primary-color);
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Dividers */
.content-divider {
    border: none;
    height: 1px;
    background: rgba(50, 45, 41, 0.1);
    margin: 3rem 0;
}

.content-divider-thick {
    border: none;
    height: 2px;
    background: rgba(50, 45, 41, 0.15);
    margin: 4rem 0;
}

.content-divider-gradient {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(50, 45, 41, 0.2) 50%, transparent 100%);
    margin: 3rem 0;
}

/* Responsive Typography */
@media (max-width: 767px) {
    .text-lead {
        font-size: 1.125rem;
    }

    .text-intro {
        font-size: 1.0625rem;
    }

    .text-featured {
        font-size: 1.25rem;
    }

    .text-pullquote {
        font-size: 1.375rem;
        padding: 2rem 1rem;
    }

    .content-box,
    .content-box-bordered,
    .content-box-highlight {
        padding: 1.5rem;
    }

    .content-area,
    .content-area-wide {
        padding: 1rem;
    }
}

/* ============================================
   STANDALONE HTML ELEMENT CLASSES
   Reusable classes for h1-h6, p, a, img, ul/ol, li
   ============================================ */

/* ===== HEADING CLASSES (H1-H6) ===== */

/* H1 Styles */
.heading-1,
.h1-style {
    font-family: var(--heading-font);
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--secondary-color);
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

.heading-1-display {
    font-family: var(--heading-font);
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--secondary-color);
    letter-spacing: -0.03em;
    margin-bottom: 2rem;
}

/* H2 Styles */
.heading-2,
.h2-style {
    font-family: var(--heading-font);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--secondary-color);
    letter-spacing: -0.015em;
    margin-bottom: 1.25rem;
}

/* H3 Styles */
.heading-3,
.h3-style {
    font-family: var(--secondary-heading-font);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--secondary-color);
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
}

/* H4 Styles */
.heading-4,
.h4-style {
    font-family: var(--secondary-heading-font);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--secondary-color);
    margin-bottom: 0.875rem;
}

/* H5 Styles */
.heading-5,
.h5-style {
    font-family: var(--secondary-heading-font);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--secondary-color);
    margin-bottom: 0.75rem;
}

/* H6 Styles */
.heading-6,
.h6-style {
    font-family: var(--secondary-heading-font);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

/* Heading Variants */
.heading-serif {
    font-family: var(--heading-font);
    font-style: italic;
}

.heading-sans {
    font-family: var(--body-font);
}

.heading-accent {
    color: var(--primary-color);
}

.heading-underline {
    position: relative;
    padding-bottom: 1rem;
}

.heading-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--primary-color);
}

.heading-center-underline {
    position: relative;
    padding-bottom: 1rem;
    text-align: center;
}

.heading-center-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--primary-color);
}

/* ===== PARAGRAPH CLASSES ===== */

.paragraph,
.p-style {
    font-family: var(--body-font);
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(50, 45, 41, 0.7);
    margin-bottom: 1.5rem;
}

.paragraph-lg {
    font-size: 1.125rem;
    line-height: 1.9;
    color: rgba(50, 45, 41, 0.7);
    margin-bottom: 2rem;
}

.paragraph-sm {
    font-size: 0.875rem;
    line-height: 1.7;
    color: rgba(50, 45, 41, 0.6);
    margin-bottom: 1rem;
}

.paragraph-lead {
    font-size: 1.375rem;
    line-height: 1.8;
    font-weight: 300;
    color: rgba(50, 45, 41, 0.8);
    margin-bottom: 2.5rem;
}

.paragraph-muted {
    color: rgba(50, 45, 41, 0.5);
}

.paragraph-light {
    font-weight: 300;
}

.paragraph-no-margin {
    margin-bottom: 0;
}

/* ===== LINK/ANCHOR CLASSES ===== */

.link,
.a-style {
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.link:hover,
.a-style:hover {
    color: var(--secondary-color);
}

.link-underline {
    color: var(--secondary-color);
    text-decoration: none;
    border-bottom: 1px solid rgba(50, 45, 41, 0.2);
    transition: all 0.3s ease;
}

.link-underline:hover {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.link-animated {
    color: var(--secondary-color);
    text-decoration: none;
    position: relative;
    display: inline-block;
}

.link-animated::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.link-animated:hover::after {
    width: 100%;
}

.link-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: var(--primary-color);
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.link-button:hover {
    background: var(--secondary-color);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(50, 45, 41, 0.15);
}

.link-button-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: transparent;
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 2px solid var(--secondary-color);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.link-button-outline:hover {
    background: var(--primary-color);
    color: #FFFFFF;
    border-color: var(--primary-color);
}

.link-arrow::after {
    content: '→';
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
    display: inline-block;
}

.link-arrow:hover::after {
    transform: translateX(4px);
}

/* ===== IMAGE CLASSES ===== */

.image,
.img-style {
    max-width: 100%;
    height: auto;
    display: block;
}

.image-rounded {
    border-radius: 8px;
}

.image-circle {
    border-radius: 50%;
}

.image-shadow {
    box-shadow: 0 10px 30px rgba(50, 45, 41, 0.15);
}

.image-hover-lift {
    transition: all 0.4s ease;
}

.image-hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(50, 45, 41, 0.2);
}

.image-hover-zoom {
    overflow: hidden;
    display: block;
}

.image-hover-zoom img {
    transition: transform 0.6s ease;
}

.image-hover-zoom:hover img {
    transform: scale(1.1);
}

.image-grayscale {
    filter: grayscale(100%);
    transition: filter 0.4s ease;
}

.image-grayscale:hover {
    filter: grayscale(0%);
}

.image-bordered {
    border: 4px solid #FFFFFF;
    box-shadow: 0 4px 12px rgba(50, 45, 41, 0.1);
}

.image-frame {
    padding: 1rem;
    background: #FFFFFF;
    border: 1px solid rgba(50, 45, 41, 0.1);
    box-shadow: 0 4px 12px rgba(50, 45, 41, 0.08);
}

/* Image Sizes */
.image-full {
    width: 100%;
}

.image-half {
    width: 50%;
}

.image-third {
    width: 33.333%;
}

/* ===== LIST CLASSES (UL/OL) ===== */

.list,
.ul-style,
.ol-style {
    margin-bottom: 2rem;
    padding-left: 1.5rem;
}

.list-unstyled {
    list-style: none;
    padding-left: 0;
}

.list-inline {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.list-spaced li {
    margin-bottom: 1.5rem;
}

.list-compact li {
    margin-bottom: 0.5rem;
}

/* Custom Bullet Lists */
.list-custom {
    list-style: none;
    padding-left: 0;
}

.list-custom li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
    line-height: 1.8;
    color: rgba(50, 45, 41, 0.7);
}

.list-custom li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 50%;
}

.list-check {
    list-style: none;
    padding-left: 0;
}

.list-check li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
    line-height: 1.8;
    color: rgba(50, 45, 41, 0.7);
}

.list-check li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.125rem;
}

.list-arrow {
    list-style: none;
    padding-left: 0;
}

.list-arrow li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
    line-height: 1.8;
    color: rgba(50, 45, 41, 0.7);
}

.list-arrow li::before {
    content: '→';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary-color);
    font-weight: 700;
}

/* Numbered Lists */
.list-numbered {
    counter-reset: list-counter;
    list-style: none;
    padding-left: 0;
}

.list-numbered li {
    position: relative;
    padding-left: 3.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.8;
    color: rgba(50, 45, 41, 0.7);
}

.list-numbered li::before {
    counter-increment: list-counter;
    content: counter(list-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--primary-color);
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
}

.list-numbered-square li::before {
    border-radius: 4px;
}

/* ===== LIST ITEM CLASSES ===== */

.list-item,
.li-style {
    margin-bottom: 0.75rem;
    line-height: 1.8;
    color: rgba(50, 45, 41, 0.7);
}

.list-item-lg {
    margin-bottom: 1.25rem;
    font-size: 1.0625rem;
    line-height: 1.9;
}

.list-item-sm {
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.7;
}

.list-item-bold {
    font-weight: 600;
    color: var(--secondary-color);
}

.list-item-muted {
    color: rgba(50, 45, 41, 0.5);
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 767px) {

    .heading-1,
    .h1-style {
        font-size: 2.25rem;
    }

    .heading-1-display {
        font-size: 2.75rem;
    }

    .heading-2,
    .h2-style {
        font-size: 1.875rem;
    }

    .heading-3,
    .h3-style {
        font-size: 1.5rem;
    }

    .heading-4,
    .h4-style {
        font-size: 1.25rem;
    }

    .paragraph-lead {
        font-size: 1.125rem;
    }

    .paragraph-lg {
        font-size: 1.0625rem;
    }

    .image-half,
    .image-third {
        width: 100%;
    }
}