/* ============================================
   DOCTA WASABI — UNIFIED STYLES v3.0
   Consolidated from WPCode: #1349, #1356, #1325, #1324
   Migrated to Kadence child theme: 2026-03-23
   v1.0 (2026-03-23): Initial WPCode consolidation
   v1.1 (2026-03-23): Added hero, CTA, pillars, testimonial, footer CSS
   v2.0 (2026-03-24): Full overhaul — Kadence cascade fixes (!important
     on layout-critical rules), comprehensive centering, enhanced hover
     effects with gold glow, premium micro-interactions, improved
     responsive breakpoints, refined scroll animations, pillar polish.
   v2.1 (2026-03-24): Premium dark luxury overhaul — gradient borders,
     glass morphism cards, shimmer buttons, 3D tilt interactions,
     ambient gold radials, accent underline headings, enhanced scroll
     animation variants, cursor-proximity glow, image overlays,
     premium testimonial styling, deeper shadow layers, section depth.
   v2.2 (2026-03-24): Professional polish pass — custom scrollbar, section
     spacing rhythm (golden ratio), SoundCloud embed premium presentation,
     Book page form glass morphism + validation states + success styling,
     About page typography depth (emphasis/italic coloring, wide image
     treatment), Home hero bottom gradient fade + pillar grid ambient glow,
     global micro-interactions (focus-visible, button centering, loading
     state), professional value signals (attribution styling, trust labels,
     section accent lines), enhanced responsive form + section spacing.
   v2.3 (2026-03-23): Nav visibility fix (high-specificity selectors to beat
     Kadence defaults — nav links now bright white, gold on hover/active).
     Pillar text brightened (muted-dim 0.55→0.65). SoundCloud embed spacing
     tightened. Ecosystem footer cross-link CSS. Scroll reveal simplified
     to consistent fade-up (removed side-slide variants in JS v1.4).
   v2.4 (2026-03-23): Refactoring — consolidated all page-specific CSS from
     dw-listen-shell.html, dw-about-shell.html, dw-book-shell.html into
     dw-sitewide.css; moved all JS to dw-subpages.js; stripped HTML files
     to markup only. Added Kadence padding reset section, Listen page CSS,
     About page CSS, Book page CSS with section headers for clarity.
   v2.5 (2026-03-23): Visual polish + bug fixes — removed duplicate
     .dw-section opacity/transform from Listen/Book sections (was causing
     invisible sections), removed duplicate .dw-container rule, added
     Kadence page title hide for sub-pages, enhanced button readability
     (dark text on gold bg, shimmer effect, consistent styling), boosted
     text contrast on dim elements (0.65→0.75 opacity), enhanced mix cards
     (gold top accent, deeper hover shadows), improved tag pills (brighter
     color, hover state), fixed content-max constraint to exclude sub-page
     containers, added §33b photo gallery CSS for homepage events section.
   v2.6 (2026-03-24): Readability + interactivity overhaul —
     Text contrast pass: body text 0.75→0.85 opacity, pillar sub-text
     0.65→0.78, venue list individual highlights, section label glow.
     Hero: gold shimmer on h1, animated gradient underline, pulsing CTA.
     Interactivity: mix card hover border-left accent + inner glow,
     venue chip hover states (replaces inline list), pillar card inner
     light sweep on hover, outline button hover fill transition,
     gallery caption overlay, testimonial quote mark brightens on hover.
     Visual: section divider gradient lines between all homepage sections,
     pillar sub-label gold accent color, enhanced SoundCloud card borders.
   v2.9 (2026-03-24): Pillar sonic interactivity — animated waveform bars
     (unique per pillar: Atmosphere slow sine, Movement rhythmic peaks,
     Release expanding burst), click-to-expand descriptions, glow rings
     (radiating circles with pillar-specific pulse characters). Mix card
     glow rings sitewide (homepage + listen page). Reduced motion + mobile
     responsive for all new animations.
   v2.10 (2026-04-01): Mobile responsiveness — kintsugi SVG scaling at 768px
     and 480px, 48px button touch targets at 768px, 16px form inputs to
     prevent iOS zoom, philosophy card padding refinement at 480px,
     SoundCloud embed height reduction on mobile, .dw-mix-header gap and
     margin on 768px, touch active states (scale + opacity), focus-visible
     outlines for keyboard navigation.
   v3.5 (2026-04-02): S161 mobile premium — branded ::selection,
     scroll-margin for anchor links, orientation change handler,
     reduced-data iframe deferral.
   v3.5.1 (2026-04-02): S162 polish — print stylesheet added.
   v3.6 (2026-04-03): S163 premium mobile polish round 2 — carousel swipe hint
     (gradient fade edges on grid containers), scroll-to-top button (fixed
     premium glassmorphic circle with safe-area support), unified card ripple
     tap flash (dw-philosophy-card, dw-tier-card), hero CTA stacking
     (flex column full-width at 768px/480px), enhanced input focus glow
     (3px radius + multi-shadow), mobile typography refinements (line-height
     1.7→1.75, letter-spacing accents for sections).
   ============================================ */

/* ===========================================
   §0. SHELL HEADER SUPPRESSION
   The HTML shells include their own inline header (#dw-lite-header)
   from before Kadence theme was handling site nav. Now that
   Kadence renders the real header, hide the inline shell version
   so it doesn't render as unstyled duplicate nav.
   =========================================== */
#dw-lite-header {
    display: none !important;
}

/* ===========================================
   §0. REGISTERED CUSTOM PROPERTIES
   =========================================== */
@property --dw-accent{syntax:"<color>";inherits:true;initial-value:#a67c52;}
@property --dw-gold{syntax:"<color>";inherits:true;initial-value:#e8c060;}

/* ===========================================
   §1. DESIGN TOKENS
   =========================================== */
:root {
    /* Backgrounds */
    --dw-bg: #0f0f11;
    --dw-bg2: #141418;
    --dw-bg3: #1a1a1f;
    --dw-bg-glass: rgba(20, 20, 24, 0.65);
    --dw-bg-glass-hover: rgba(26, 26, 31, 0.80);

    /* Text — v2.6 readability boost */
    --dw-txt: #f4f1ea;
    --dw-txt-soft: rgba(244,241,234,0.90);
    --dw-muted: rgba(244,241,234,0.85);
    --dw-muted-dim: rgba(244,241,234,0.78);
    --dw-muted-faint: rgba(244,241,234,0.55);
    --dw-hair: rgba(244,241,234,0.14);
    --dw-hair-strong: rgba(244,241,234,0.22);

    /* Accent palette */
    --dw-accent: #A67C52;
    --dw-accent-light: #c49a6c;
    --dw-accent-warm: #d4a574;
    --dw-gold-glow: rgba(166,124,82,0.35);
    --dw-gold-glow-strong: rgba(166,124,82,0.50);
    --dw-gold-subtle: rgba(166,124,82,0.08);
    --dw-gold-border: rgba(166,124,82,0.25);
    --dw-gold-border-strong: rgba(166,124,82,0.45);
    --dw-gold-gradient: linear-gradient(135deg, #A67C52, #c49a6c, #d4a574);
    --dw-gold-gradient-subtle: linear-gradient(135deg, rgba(166,124,82,0.15), rgba(196,154,108,0.05));

    /* Shadows */
    --dw-shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --dw-shadow-md: 0 8px 24px rgba(0,0,0,0.4);
    --dw-shadow-lg: 0 16px 48px rgba(0,0,0,0.5);
    --dw-shadow-gold: 0 8px 32px rgba(166,124,82,0.15);
    --dw-shadow-gold-lg: 0 16px 48px rgba(166,124,82,0.20), 0 0 80px rgba(166,124,82,0.08);
    --dw-shadow-gold-glow: 0 0 40px rgba(166,124,82,0.12), 0 0 80px rgba(166,124,82,0.06);

    /* Geometry */
    --dw-radius: 4px;
    --dw-radius-md: 8px;
    --dw-radius-lg: 12px;

    /* Motion */
    --dw-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --dw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dw-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layout */
    --dw-content-max: 880px;
    --dw-page-max: 1140px;
    --dw-narrow-max: 780px;
}

/* ===========================================
   §2. BASE STYLES & KADENCE OVERRIDES
   Critical: !important needed on layout rules because Kadence's
   content.min.css loads AFTER this file and overrides with
   .single-content { margin: var(--global-md-spacing) 0 0 } and
   .content-title-style-above .entry-content { margin: 0 }.
   =========================================== */
body {
    background-color: var(--dw-bg) !important;
    color: var(--dw-txt);
    overflow-x: hidden;
    font-size-adjust: 0.52;
}
img, video, iframe, embed, object { max-width: 100%; height: auto; }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }

/* Center the main content container — must beat Kadence cascade */
.entry-content,
.entry-content.single-content {
    max-width: var(--dw-page-max) !important;
    margin: 0 auto !important;
    padding: 0 1.5rem;
}

/* ===========================================
   §2a. KADENCE CONTENT AREA PADDING RESET
   Zero top padding/margin on all wrapper elements
   =========================================== */
.entry-content-wrap,
.content-wrap,
.site-main,
.site-content,
.content-area,
.site-inner,
#inner-wrap,
.site,
.wp-site-blocks,
#wrapper,
#content,
article.page,
.hentry {
    padding-top: 0 !important;
    margin-top: 0 !important;
    background-color: var(--dw-bg) !important;
}
/* Kill Kadence boxed/narrow layout gray margins on sub-pages.
   Exclude .site-header .site-container so header stays contained (S157). */
body:not(.home) .site,
body:not(.home) #inner-wrap,
body:not(.home) .site-content .site-container,
body:not(.home) .content-area,
body:not(.home) .site-main,
body:not(.home) .site-content,
body:not(.home) .entry-content-wrap,
body:not(.home) .content-wrap,
body:not(.home) article.page {
    max-width: 100% !important;
    width: 100% !important;
    background-color: var(--dw-bg) !important;
    box-shadow: none !important;
}
/* Force header container to match homepage contained layout on ALL pages */
#masthead .site-container,
.site-header .site-container {
    max-width: 1290px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ===========================================
   §3. TYPOGRAPHY
   =========================================== */
h1, h2, h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    color: var(--dw-txt);
    letter-spacing: 0.03em;
    text-wrap: balance;
}

/* Premium heading sizes */
h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    line-height: 1.15;
    font-weight: 700;
}
h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    line-height: 1.25;
    margin-bottom: 1.5rem;
}
h3 {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    line-height: 1.35;
    letter-spacing: 0.04em;
}

p, li, span, a {
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 400;
    color: var(--dw-muted);
    line-height: 1.75;
    text-wrap: balance;
    text-wrap: pretty;
}

/* Section label — uppercase accent with glow */
.dw-section-label {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--dw-accent);
    text-align: center;
    text-shadow: 0 0 20px rgba(166,124,82,0.25);
}

/* Accent underline for section headings */
.dw-section h2,
.entry-content > .wp-block-group h2 {
    position: relative;
    display: inline-block;
    padding-bottom: 0.6rem;
}
.dw-section h2::after,
.entry-content > .wp-block-group h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: var(--dw-gold-gradient);
    border-radius: 2px;
    transition: width 0.5s var(--dw-ease);
}
.dw-section:hover h2::after,
.entry-content > .wp-block-group:hover h2::after {
    width: 100px;
}

/* ===========================================
   §4. SECTION REVEAL (CSS + JS)
   Multiple animation variants for visual variety
   =========================================== */

/* Default: fade up */
.dw-section {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s var(--dw-ease),
                transform 1s var(--dw-ease);
}
.dw-js .dw-section {
    opacity: 0;
    transform: translateY(40px);
}
.dw-section.dw-in-view {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Variant: slide from left */
.dw-reveal,
.dw-slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.9s var(--dw-ease),
                transform 0.9s var(--dw-ease);
}
.dw-slide-left.dw-in-view {
    opacity: 1;
    transform: translateX(0);
}

/* Variant: slide from right */
.dw-slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.9s var(--dw-ease),
                transform 0.9s var(--dw-ease);
}
.dw-slide-right.dw-in-view {
    opacity: 1;
    transform: translateX(0);
}

/* Variant: scale up */
.dw-scale-up {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.9s var(--dw-ease),
                transform 0.9s var(--dw-ease-spring);
}
.dw-scale-up.dw-in-view {
    opacity: 1;
    transform: scale(1);
}

/* Default reveal */
.dw-reveal.dw-in-view {
    opacity: 1;
    transform: translateY(0) translateX(0);
}

/* Visible class fallback for sections already in viewport */
.dw-section.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ===========================================
   §5. SECTION CENTERING
   All .dw-section content should be centered. Hero uses flexbox.
   Footer already has text-align: center.
   =========================================== */
.dw-section {
    text-align: center;
}
.dw-section h2,
.dw-section h3 {
    text-align: center;
}
.dw-section p,
.dw-section .dw-muted {
    text-align: center;
}

/* Gutenberg block groups within sections — center content */
.wp-block-group__inner-container {
    text-align: center;
}

/* ===========================================
   §6. CONTENT WIDTH & SPACING
   =========================================== */
/* Exclude hero, container divs, shell sections, AND Gutenberg full/wide alignment blocks from content-max constraint */
.entry-content > *:not(.dw-hero):not(.dw-container):not(.dw-section):not(.dw-hero-section):not(.dw-intro-section):not(.dw-stats-section):not(.dw-journey-section):not(.dw-process-section):not(.dw-cta-section):not(.dw-footer):not(footer):not(#dw-lite-footer):not(.alignfull):not(.alignwide),
.entry-content > .wp-block-group:not(.alignfull):not(.alignwide) > .wp-block-group__inner-container > * {
    max-width: var(--dw-content-max);
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Full-width Gutenberg blocks — break out like hero */
.entry-content > .alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}
/* Center inner content within full-bleed blocks */
.alignfull > .wp-block-group__inner-container {
    max-width: var(--dw-content-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}
/* Wide alignment — slightly narrower breakout */
.entry-content > .alignwide {
    width: 100vw !important;
    max-width: var(--dw-page-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.entry-content p {
    margin-bottom: 2rem;
    line-height: 1.85;
    color: var(--dw-txt-soft);
    text-wrap: pretty;
}
.entry-content blockquote,
.entry-content .wp-block-quote {
    max-width: var(--dw-narrow-max);
    margin-left: auto !important;
    margin-right: auto !important;
}
.entry-content iframe[src*="soundcloud"] {
    border-radius: var(--dw-radius);
    max-width: var(--dw-narrow-max);
    margin: 0 auto;
    display: block;
}

/* ===========================================
   §7. PANELS — Premium Glass Morphism
   =========================================== */
.dw-panel {
    position: relative;
    background: var(--dw-bg-glass);
    border: 1px solid var(--dw-hair);
    border-radius: var(--dw-radius-md);
    padding: 2.618rem;
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 0.5s ease,
                box-shadow 0.5s ease,
                transform 0.5s var(--dw-ease),
                background 0.5s ease;
}
.dw-panel::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, transparent 40%, var(--dw-gold-border) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.dw-panel:hover {
    border-color: var(--dw-gold-border);
    box-shadow: var(--dw-shadow-gold),
                0 0 0 1px var(--dw-gold-subtle),
                inset 0 1px 0 rgba(244,241,234,0.04);
    transform: translateY(-4px);
    background: var(--dw-bg-glass-hover);
}
.dw-panel:hover::before {
    opacity: 1;
}

/* ===========================================
   §8. BUTTONS — Premium with Shimmer
   =========================================== */

/* Shimmer sweep keyframe */
@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* Gutenberg buttons */
.wp-block-button__link {
    position: relative;
    overflow: hidden;
    background: var(--dw-accent) !important;
    color: var(--dw-txt) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 1.1rem 2.6rem;
    border-radius: var(--dw-radius);
    border: none;
    transition: filter 0.3s ease,
                transform 0.3s var(--dw-ease),
                box-shadow 0.4s ease;
}
.wp-block-button__link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: none;
}
.wp-block-button__link:hover {
    filter: brightness(1.15);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px var(--dw-gold-glow),
                0 0 60px rgba(166,124,82,0.12);
}
.wp-block-button__link:hover::before {
    animation: shimmer 0.8s ease forwards;
}
/* v2.6: Outline button with fill transition on hover */
.is-style-outline .wp-block-button__link {
    background: transparent !important;
    color: var(--dw-txt) !important;
    border: 1px solid var(--dw-hair-strong);
    transition: all 0.4s var(--dw-ease);
    background-image: linear-gradient(135deg, var(--dw-accent), var(--dw-accent-light)) !important;
    background-size: 0% 100%;
    background-repeat: no-repeat;
}
.is-style-outline .wp-block-button__link:hover {
    border-color: var(--dw-accent);
    color: var(--dw-txt) !important;
    background-size: 100% 100%;
    box-shadow: 0 8px 28px var(--dw-gold-glow),
                0 0 40px rgba(166,124,82,0.08);
}

/* Custom DW button — use a.dw-btn for specificity over .dw-footer a */
/* v2.6.1: Button text switched from dark (#0f0f11) to cream for readability */
a.dw-btn,
.dw-btn {
    position: relative;
    overflow: hidden;
    display: inline-block;
    background: var(--dw-accent);
    color: var(--dw-txt) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 1.1rem 2.6rem;
    border-radius: var(--dw-radius);
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.3s ease,
                transform 0.3s var(--dw-ease),
                box-shadow 0.4s ease !important;
}
a.dw-btn::before,
.dw-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: none;
}
.dw-btn:hover {
    filter: brightness(1.15);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px var(--dw-gold-glow),
                0 0 60px rgba(166,124,82,0.12);
    color: var(--dw-txt) !important;
}
.dw-btn:hover::before {
    animation: shimmer 0.8s ease forwards;
}
.dw-btn::after { display: none; }

/* Outline button — transparent with border, fill on hover
   v2.6.1: Boosted border from 0.22 to 0.45 opacity for visibility,
   added subtle gold background tint, fixed hover text to cream */
a.dw-btn-outline,
.dw-btn-outline {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 1.1rem 2.6rem;
    border: 1px solid var(--dw-gold-border-strong);
    border-radius: var(--dw-radius);
    color: var(--dw-txt);
    background: rgba(166, 124, 82, 0.08);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.4s var(--dw-ease);
}
a.dw-btn-outline:hover,
.dw-btn-outline:hover {
    border-color: var(--dw-accent);
    color: var(--dw-txt) !important;
    background: var(--dw-accent);
    box-shadow: 0 8px 28px var(--dw-gold-glow);
    transform: translateY(-3px);
}
.dw-btn-outline::after { display: none; }

/* Small button — compact CTA for tier cards */
a.dw-btn-small,
.dw-btn-small {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.75rem 1.8rem;
    border: 1px solid var(--dw-gold-border);
    border-radius: var(--dw-radius);
    color: var(--dw-accent);
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s var(--dw-ease);
}
a.dw-btn-small:hover,
.dw-btn-small:hover {
    background: var(--dw-accent);
    color: var(--dw-bg);
    border-color: var(--dw-accent);
    box-shadow: 0 6px 20px var(--dw-gold-glow);
    transform: translateY(-2px);
}
.dw-btn-small::after { display: none; }

/* Wabi Circle glow button */
.wabi-glow-btn {
    transition: transform 0.3s var(--dw-ease), box-shadow 0.4s ease;
}
.wabi-glow-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 40px var(--dw-gold-glow),
                0 0 80px rgba(166,124,82,0.08);
}

/* ===========================================
   §9. HERO (Custom HTML)
   =========================================== */
.dw-hero {
    position: relative;
    min-height: 90vh;
    min-height: 90dvh;
    display: flex;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100vw;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
}
.dw-hero-media {
    position: absolute;
    inset: 0;
    /* S134: contain (not cover) so banner logos + text aren't cropped */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #0f0f11;
    z-index: 0;
    animation: heroBreathing 40s ease-in-out infinite;
}
.dw-hero-overlay {
    position: absolute;
    inset: 0;
    /* S134: Lightened overlay — new banner image has text + logos baked in.
       Previous 45%→90% gradient obscured the image text. */
    background: linear-gradient(
        180deg,
        rgba(15, 15, 17, 0.10) 0%,
        rgba(15, 15, 17, 0.15) 60%,
        rgba(15, 15, 17, 0.45) 100%
    );
    z-index: 1;
}
.dw-hero-content {
    position: relative;
    z-index: 2;
    max-width: var(--dw-narrow-max);
    text-align: center;
    padding: 2rem 1.5rem;
    animation: heroEntrance 1.4s var(--dw-ease) 0.3s both;
}
.dw-hero-content h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    color: var(--dw-txt);
    letter-spacing: 0.04em;
    margin-bottom: 1.2rem;
    text-shadow: 0 2px 40px rgba(0,0,0,0.5),
                 0 0 60px rgba(166,124,82,0.15);
    position: relative;
    display: inline-block;
}
/* v2.6: Gold shimmer sweep on hero h1 */
.dw-hero-content h1::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--dw-accent-light), var(--dw-accent), var(--dw-accent-light), transparent);
    border-radius: 2px;
    animation: heroUnderlineShimmer 3s ease-in-out infinite;
}
@keyframes heroUnderlineShimmer {
    0%, 100% { opacity: 0.5; width: 120px; }
    50% { opacity: 1; width: 280px; }
}
.dw-hero-content p {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 1.15rem;
    color: var(--dw-txt-soft);
    margin-bottom: 2.8rem;
    line-height: 1.8;
}
/* v2.6: Pulsing CTA in hero */
.dw-hero-content .dw-btn,
.dw-hero-content .wp-block-button__link {
    animation: heroCTAPulse 3s ease-in-out infinite;
}
@keyframes heroCTAPulse {
    0%, 100% { box-shadow: 0 4px 20px var(--dw-gold-glow); }
    50% { box-shadow: 0 8px 36px var(--dw-gold-glow-strong), 0 0 60px rgba(166,124,82,0.12); }
}

/* Gutenberg cover block fallback */
.wp-block-cover {
    min-height: 90vh !important;
    min-height: 90dvh !important;
}
.wp-block-cover__inner-container {
    max-width: var(--dw-narrow-max);
    animation: heroEntrance 1.4s var(--dw-ease) 0.3s both;
}
.wp-block-cover__image-background {
    animation: heroBreathing 40s ease-in-out infinite;
}

@keyframes heroEntrance {
    from { opacity: 0; transform: translateY(30px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroBreathing {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

/* ===========================================
   §10. THREE PILLARS GRID — Premium Cards
   =========================================== */
.dw-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: var(--dw-content-max) !important;
    margin: 0 auto !important;
}
.dw-pillar-head {
    position: relative;
    text-align: center;
    padding: 2.8rem 1.5rem 2.2rem;
    border: 1px solid var(--dw-hair);
    border-radius: var(--dw-radius-md);
    background: var(--dw-bg-glass);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    /* Gold top accent line — always visible, gives presence at rest */
    border-top: 2px solid var(--dw-gold-border);
    transition: border-color 0.5s ease,
                transform 0.5s var(--dw-ease),
                box-shadow 0.5s ease,
                background 0.5s ease,
                border-top-color 0.5s ease;
}
/* Gradient border overlay on hover */
.dw-pillar-head::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, var(--dw-gold-border-strong) 0%, transparent 40%, var(--dw-gold-border) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
/* Ambient gold glow behind card */
.dw-pillar-head::after {
    content: '';
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(166,124,82,0.08) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: -1;
}
.dw-pillar-head:hover {
    border-color: var(--dw-gold-border);
    border-top-color: var(--dw-accent);
    transform: translateY(-8px);
    box-shadow: var(--dw-shadow-gold-lg),
                inset 0 1px 0 rgba(244,241,234,0.06);
    background: var(--dw-bg-glass-hover);
}
.dw-pillar-head:hover::before {
    opacity: 1;
}
.dw-pillar-head:hover::after {
    opacity: 1;
}

/* v2.6: Pillar sub-label gold accent */
.dw-pillar-sub {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dw-accent);
    opacity: 0.7;
    text-shadow: 0 0 16px rgba(166,124,82,0.2);
    transition: opacity 0.4s ease;
}
.dw-pillar-head:hover .dw-pillar-sub {
    opacity: 1;
}

/* Pillar title */
.dw-pillar-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dw-txt);
    margin-bottom: 0.85rem;
    white-space: nowrap;
    word-break: keep-all;
    transition: color 0.4s ease, letter-spacing 0.4s ease;
}
.dw-pillar-head:hover .dw-pillar-title {
    color: var(--dw-accent-light);
    letter-spacing: 0.18em;
}

/* Pillar sub-panel (Spatial Quality / Rhythmic Architecture / etc.) */
.dw-pillars-grid .dw-panel {
    text-align: center;
    background: rgba(20, 20, 24, 0.5);
    border: 1px solid rgba(244, 241, 234, 0.06);
    padding: 1.5rem 1rem;
    margin-top: 0.5rem;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transform: translateY(0);
    transition: border-color 0.4s ease,
                background 0.4s ease,
                box-shadow 0.4s ease,
                transform 0.4s var(--dw-ease);
}
.dw-pillar-head:hover .dw-panel {
    border-color: var(--dw-gold-border);
    background: rgba(166, 124, 82, 0.06);
    box-shadow: 0 4px 16px rgba(166,124,82,0.12);
    transform: translateY(-3px);
}
/* Sub-panel label text brightens on parent hover */
.dw-pillars-grid .dw-panel p,
.dw-pillars-grid .dw-panel span {
    transition: color 0.4s ease;
}
.dw-pillar-head:hover .dw-panel p,
.dw-pillar-head:hover .dw-panel span {
    color: var(--dw-txt-soft);
}

/* Legacy .dw-pillars class (Gutenberg-based layout) */
.dw-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.dw-pillar-card {
    position: relative;
    text-align: center;
    padding: 2.8rem 1.5rem;
    border: 1px solid var(--dw-hair);
    border-radius: var(--dw-radius-md);
    background: var(--dw-bg-glass);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: border-color 0.5s ease,
                transform 0.5s var(--dw-ease),
                box-shadow 0.5s ease;
}
.dw-pillar-card:hover {
    border-color: var(--dw-gold-border);
    transform: translateY(-8px);
    box-shadow: var(--dw-shadow-gold-lg);
}
.dw-step-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--dw-accent);
    display: block;
    margin-bottom: 0.8rem;
    text-shadow: 0 0 30px rgba(166,124,82,0.25);
    font-variant-numeric: tabular-nums;
}

/* ===========================================
   §11. TESTIMONIALS & BLOCKQUOTES — Premium
   =========================================== */
blockquote, .wp-block-quote, .dw-testimonial {
    position: relative;
    border-left: 3px solid var(--dw-accent) !important;
    padding: 2rem 2.5rem;
    padding-left: 3rem;
    margin: 3rem auto;
    max-width: var(--dw-narrow-max);
    background: var(--dw-bg-glass);
    border-radius: var(--dw-radius-md);
    text-align: left;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: var(--dw-shadow-sm);
    transition: border-color 0.3s ease,
                box-shadow 0.5s ease,
                transform 0.4s var(--dw-ease);
}
/* Decorative quote mark — v2.6: brightens on hover */
blockquote::before, .wp-block-quote::before, .dw-testimonial::before {
    content: '\201C';
    position: absolute;
    top: -8px;
    left: 16px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 4rem;
    font-weight: 700;
    color: var(--dw-accent);
    opacity: 0.3;
    line-height: 1;
    pointer-events: none;
    transition: opacity 0.4s ease, text-shadow 0.4s ease, color 0.4s ease;
}
blockquote:hover, .wp-block-quote:hover, .dw-testimonial:hover {
    box-shadow: var(--dw-shadow-gold),
                inset 0 0 30px rgba(166,124,82,0.03);
    transform: translateX(6px);
    border-left-color: var(--dw-accent-light) !important;
}
blockquote:hover::before, .wp-block-quote:hover::before, .dw-testimonial:hover::before {
    opacity: 0.7;
    color: var(--dw-accent-light);
    text-shadow: 0 0 24px rgba(166,124,82,0.4);
}
blockquote p, .dw-testimonial p {
    font-style: italic;
    color: var(--dw-txt);
    text-align: left;
    font-size: 1.05rem;
}
blockquote cite {
    display: block;
    color: var(--dw-accent-light);
    font-style: normal;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--dw-hair);
}
.dw-attribution {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    color: var(--dw-muted-dim);
    opacity: 0.7;
}

/* ===========================================
   §12. GRAIN TEXTURE
   =========================================== */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.022;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    animation: grainDrift 24s linear infinite;
}
@keyframes grainDrift {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-50px, -50px); }
}

/* ===========================================
   §13. CUSTOM FOOTER SECTION
   =========================================== */
/* Homepage footer — #dw-page ID selector wins over all subpage class overrides */
#dw-page .dw-footer {
    display: block;
    text-align: center;
    padding: 3.5rem 1.5rem;
    border-top: 1px solid var(--dw-hair);
    position: relative;
    max-width: none;
    margin: 0;
    background: transparent;
}
#dw-page .dw-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--dw-accent), transparent);
}
#dw-page .dw-footer h3 {
    text-align: center;
}
#dw-page .dw-footer p {
    text-align: center;
}
#dw-page .dw-footer .dw-footer-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 0;
    flex-direction: row;
}
#dw-page .dw-footer a {
    color: var(--dw-accent);
    text-decoration: none;
    display: inline;
    margin: 0 1rem;
    font-weight: 500;
    font-size: inherit;
    transition: opacity 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
}
#dw-page .dw-footer a:hover {
    opacity: 1;
    color: var(--dw-accent-light);
    text-shadow: 0 0 20px rgba(166,124,82,0.3);
}
#dw-page .dw-footer a::after { display: none; }

/* Ecosystem cross-link — "Part of Crown Mosaic" badge */
#dw-page .dw-footer .dw-ecosystem {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--dw-hair);
}
#dw-page .dw-footer .dw-ecosystem a {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--dw-muted-dim);
    margin: 0 0.5rem;
    transition: color 0.3s ease;
}
#dw-page .dw-footer .dw-ecosystem a:hover {
    color: var(--dw-accent);
}
#dw-page .dw-footer .dw-ecosystem a::after {
    display: none;
}
#dw-page .dw-footer .dw-ecosystem-label {
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dw-muted-dim);
    opacity: 0.6;
    margin-bottom: 0.5rem;
    display: block;
}

/* Hide Kadence default footer to prevent duplicate —
   Comprehensive selector list matching CMP pattern to catch all
   Kadence footer wrappers and the "WordPress Theme by Kadence WP" credit */
footer.site-footer,
.site-footer,
.site-footer-wrap,
.footer-widget-area,
.site-bottom-footer-wrap,
.site-bottom-footer-inner-wrap,
#colophon,
.kadence-footer {
    display: none !important;
}

/* Hide Kadence's auto-generated page title on sub-pages —
   our HTML shells include their own styled headers/heroes */
.entry-header,
.page-header,
.entry-title,
h1.entry-title,
.content-title-style-above .entry-header,
.kadence-page-title,
.entry-header {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Kill gap between Kadence header and page content on all pages */
.entry-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body:not(.home) .entry-content > .dw-hero:first-child,
body:not(.home) .entry-content > section.dw-hero:first-of-type {
    margin-top: 0 !important;
    padding-top: 80px !important;
}

/* ===========================================
   §14. FLUENT FORMS — DARK THEME
   =========================================== */
.fluentform .ff-el-input--label label {
    color: var(--dw-muted) !important;
}
.fluentform input, .fluentform textarea, .fluentform select {
    background: var(--dw-bg2) !important;
    border: 1px solid var(--dw-hair) !important;
    color: var(--dw-txt) !important;
    border-radius: var(--dw-radius);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.fluentform input:focus, .fluentform textarea:focus, .fluentform select:focus {
    border-color: var(--dw-accent) !important;
    box-shadow: 0 0 0 3px rgba(166, 124, 82, 0.15),
                0 0 20px rgba(166, 124, 82, 0.08);
}
/* Submit button centering + styling */
.fluentform .ff-btn-submit,
.fluentform .ff_submit_btn_wrapper,
.fluentform .ff-el-group.ff-text-left {
    text-align: center !important;
}
.fluentform .ff-btn-submit {
    position: relative;
    overflow: hidden;
    display: inline-block !important;
    background: var(--dw-accent) !important;
    color: var(--dw-txt) !important;
    border: none !important;
    padding: 1rem 2.8rem !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    border-radius: var(--dw-radius) !important;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.4s ease, transform 0.3s ease !important;
}
.fluentform .ff-btn-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: none;
}
.fluentform .ff-btn-submit:hover {
    background: var(--dw-accent-light) !important;
    box-shadow: 0 8px 28px var(--dw-gold-glow) !important;
    transform: translateY(-2px);
}
.fluentform .ff-btn-submit:hover::before {
    animation: shimmer 0.8s ease forwards;
}

/* ===========================================
   §15. MOOD TAGS — Premium Pills
   =========================================== */
.dw-mood-tag {
    display: inline-block;
    padding: 0.35rem 1rem;
    border: 1px solid var(--dw-hair);
    border-radius: 100px;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--dw-muted);
    margin: 0.25rem;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: border-color 0.3s ease,
                color 0.3s ease,
                background 0.3s ease,
                box-shadow 0.3s ease,
                transform 0.3s var(--dw-ease);
}
.dw-mood-tag:hover {
    border-color: var(--dw-accent);
    color: var(--dw-accent);
    background: var(--dw-gold-subtle);
    box-shadow: 0 0 16px rgba(166,124,82,0.1);
    transform: translateY(-2px);
}

/* ===========================================
   §16. LISTEN PAGE CTA
   =========================================== */
.dw-listen-cta {
    text-align: center;
    padding: 5rem 2rem;
    border-top: 1px solid var(--dw-hair);
    margin-top: 5rem;
    position: relative;
}
.dw-listen-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--dw-accent), transparent);
}

/* ===========================================
   §17. LINKS & HOVER — Enhanced
   =========================================== */
a {
    position: relative;
    text-decoration: none;
    color: var(--dw-accent);
    transition: color 0.3s ease;
}
a::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 0; height: 2px;
    background: var(--dw-gold-gradient);
    transition: width 0.3s var(--dw-ease);
}
a:hover::after { width: 100%; }
a:hover { color: var(--dw-accent-light); opacity: 1; }

/* ===========================================
   §18. STAGGER CHILDREN ANIMATION — Enhanced
   =========================================== */
.dw-stagger > * {
    animation: fadeInUp 0.7s var(--dw-ease) both;
}
.dw-stagger > *:nth-child(1) { animation-delay: 0s; }
.dw-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.dw-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.dw-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.dw-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.dw-stagger > *:nth-child(6) { animation-delay: 0.40s; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* JS-driven stagger */
.dw-stagger-child > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s var(--dw-ease), transform 0.7s var(--dw-ease);
}
.dw-stagger-child.dw-children-visible > *:nth-child(1) { transition-delay: 0s;    opacity: 1; transform: translateY(0); }
.dw-stagger-child.dw-children-visible > *:nth-child(2) { transition-delay: 0.08s; opacity: 1; transform: translateY(0); }
.dw-stagger-child.dw-children-visible > *:nth-child(3) { transition-delay: 0.16s; opacity: 1; transform: translateY(0); }
.dw-stagger-child.dw-children-visible > *:nth-child(4) { transition-delay: 0.24s; opacity: 1; transform: translateY(0); }
.dw-stagger-child.dw-children-visible > *:nth-child(5) { transition-delay: 0.32s; opacity: 1; transform: translateY(0); }
.dw-stagger-child.dw-children-visible > *:nth-child(6) { transition-delay: 0.40s; opacity: 1; transform: translateY(0); }

/* Line-by-line reveal */
.dw-line-reveal .dw-line {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    display: inline;
}
.dw-line-reveal.dw-lines-visible .dw-line:nth-child(1) { transition-delay: 0s;    opacity: 1; transform: translateY(0); }
.dw-line-reveal.dw-lines-visible .dw-line:nth-child(2) { transition-delay: 0.15s; opacity: 1; transform: translateY(0); }
.dw-line-reveal.dw-lines-visible .dw-line:nth-child(3) { transition-delay: 0.30s; opacity: 1; transform: translateY(0); }
.dw-line-reveal.dw-lines-visible .dw-line:nth-child(4) { transition-delay: 0.45s; opacity: 1; transform: translateY(0); }

/* ===========================================
   §19. GALLERY & IMAGE HOVER — Premium
   =========================================== */
.dw-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--dw-radius-md);
    transition: transform 0.5s var(--dw-ease),
                box-shadow 0.5s ease;
}
.dw-gallery-item:hover {
    transform: scale(1.03);
    box-shadow: var(--dw-shadow-gold);
}
.dw-gallery-item img {
    transition: opacity 0.5s ease, filter 0.5s ease, transform 0.5s var(--dw-ease);
}
.dw-gallery-item:hover img {
    opacity: 0.92;
    filter: brightness(1.08) saturate(1.1);
    transform: scale(1.05);
}
/* v2.6: Caption overlay on gallery hover */
.dw-gallery-item figcaption,
.dw-gallery-item .dw-gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.2rem 1rem;
    background: linear-gradient(0deg, rgba(15,15,17,0.85) 0%, transparent 100%);
    color: var(--dw-txt);
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s var(--dw-ease);
}
.dw-gallery-item:hover figcaption,
.dw-gallery-item:hover .dw-gallery-caption {
    opacity: 1;
    transform: translateY(0);
}

/* WordPress image blocks — hover effects */
.wp-block-image {
    overflow: hidden;
    border-radius: var(--dw-radius-md);
    transition: box-shadow 0.5s ease;
}
.wp-block-image:hover {
    box-shadow: var(--dw-shadow-gold);
}
.wp-block-image img {
    transition: transform 0.6s var(--dw-ease), filter 0.6s ease;
}
.wp-block-image:hover img {
    transform: scale(1.03);
    filter: brightness(1.05);
}

/* WordPress gallery — grid hover */
.wp-block-gallery .wp-block-image {
    border-radius: var(--dw-radius-md);
    overflow: hidden;
}

/* ===========================================
   §20. FORM FOCUS GLOW — Enhanced
   =========================================== */
input:focus, textarea:focus, select:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--dw-bg), 0 0 0 4px var(--dw-accent),
                0 0 20px rgba(166,124,82,0.1);
}

/* ===========================================
   §21. NAVIGATION — Premium
   Must use high-specificity selectors to beat Kadence's
   .header-navigation a which defaults to a dark color.
   =========================================== */
/* Nav menu item spacing — more breathing room between Home/Listen/About/Book */
.header-navigation .menu > li,
.main-navigation .menu > li,
.primary-menu > li {
    margin: 0 0.35rem !important;
}

nav a, .nav-link,
#masthead a,
.site-header a,
.header-navigation a,
.header-navigation .menu > li > a,
.header-menu-container a,
.main-navigation a,
.primary-menu > li > a,
#masthead .header-navigation a {
    position: relative;
    text-decoration: none !important;
    color: var(--dw-txt) !important;
    font-weight: 500;
    letter-spacing: 0.04em;
    transition: color 0.3s ease !important;
}
nav a:hover, .nav-link:hover,
#masthead a:hover,
.header-navigation a:hover,
.header-navigation .menu > li > a:hover,
.header-menu-container a:hover,
.main-navigation a:hover,
#masthead .header-navigation a:hover {
    color: var(--dw-accent) !important;
}
nav a::before, .nav-link::before {
    content: '';
    position: absolute;
    bottom: -4px; left: 0;
    width: 0; height: 2px;
    background: var(--dw-gold-gradient);
    transition: width 0.3s var(--dw-ease);
}
nav a:hover::before, .nav-link:hover::before { width: 100%; }

/* Disable underline animation on nav links (use ::before instead) */
nav a::after { display: none !important; }

/* Active nav state */
nav a[aria-current="page"],
.current-menu-item > a,
#masthead .current-menu-item > a,
.header-navigation .current-menu-item > a {
    color: var(--dw-accent) !important;
}
nav a[aria-current="page"]::before,
.current-menu-item > a::before {
    width: 100%;
}

/* ===========================================
   §22. STICKY HEADER — Enhanced
   =========================================== */
/* Header container rule moved to §2 near top of file (S157).
   See the #masthead .site-container rule above body:not(.home) block. */

/* Must use #masthead to beat Kadence inline style with ID selector */
#masthead,
.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: rgba(15, 15, 17, 0.92) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--dw-hair) !important;
    transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
#masthead.scrolling,
#masthead.dw-scrolled,
.site-header.scrolling,
.site-header.dw-scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5),
                0 1px 0 rgba(166,124,82,0.08) !important;
    background: rgba(15, 15, 17, 0.98) !important;
    border-bottom-color: rgba(166,124,82,0.1) !important;
}

/* Header logo — consistent across all pages */
.custom-logo,
#masthead .custom-logo,
.site-header .custom-logo {
    max-height: 48px !important;
    min-height: 48px !important;
    width: auto !important;
    border-radius: 50%;
    transition: opacity 0.3s ease, filter 0.3s ease;
}
.custom-logo:hover {
    opacity: 0.9;
    filter: drop-shadow(0 0 8px rgba(166,124,82,0.3));
}
.site-branding .brand,
#masthead .site-branding .brand {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}
.site-branding .site-title,
.site-branding .brand > span,
#masthead .site-branding .site-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    color: var(--dw-txt) !important;
    opacity: 0.9;
}

/* ===========================================
   §23. GENRE CARDS — Premium
   =========================================== */
.dw-genre-card {
    position: relative;
    padding: 2.2rem;
    border: 1px solid var(--dw-hair);
    border-radius: var(--dw-radius-md);
    background: var(--dw-bg-glass);
    text-align: center;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: all 0.5s var(--dw-ease);
    cursor: pointer;
}
/* Gradient border on hover */
.dw-genre-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, transparent 40%, var(--dw-gold-border-strong) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.dw-genre-card:hover {
    border-color: var(--dw-gold-border);
    transform: translateY(-8px);
    box-shadow: var(--dw-shadow-gold-lg);
}
.dw-genre-card:hover::before {
    opacity: 1;
}
.dw-genre-card h3 {
    margin-bottom: 0.85rem;
    color: var(--dw-txt);
    transition: color 0.3s ease;
}
.dw-genre-card:hover h3 {
    color: var(--dw-accent-light);
}
.dw-genre-card p { font-size: 0.9rem; color: var(--dw-muted); }

/* ===========================================
   §24. SEPARATORS & DIVIDERS — Enhanced
   =========================================== */
hr, .dw-separator {
    border: none;
    height: 1px;
    background: var(--dw-hair);
    margin: 3.5rem auto;
    max-width: var(--dw-content-max);
}
.dw-separator.accent {
    background: linear-gradient(to right, transparent, var(--dw-accent), transparent);
    height: 2px;
}
.dw-divider {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--dw-hair), transparent);
    margin: 3.5rem auto;
    max-width: var(--dw-content-max);
}

/* Gutenberg separators */
.wp-block-separator {
    border: none !important;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--dw-hair-strong), transparent) !important;
    max-width: 400px;
    margin: 3rem auto !important;
    opacity: 1 !important;
}

/* ===========================================
   §25. COLUMN HOVER LIFT — Enhanced
   =========================================== */
.dw-column {
    transition: transform 0.5s var(--dw-ease), box-shadow 0.5s ease;
}
.dw-column:hover {
    transform: translateY(-8px);
    box-shadow: var(--dw-shadow-gold);
}

/* WordPress columns blocks — add interactivity */
.wp-block-columns {
    gap: 2rem;
}
.wp-block-column {
    transition: transform 0.5s var(--dw-ease);
}

/* ===========================================
   §26. MUTED TEXT
   =========================================== */
.dw-muted {
    color: var(--dw-muted);
}

/* ===========================================
   §27. VENUE LIST — v2.6 enhanced with individual highlights
   =========================================== */
.dw-section p:last-of-type {
    text-align: center;
}
/* v2.6: Venue list readability — brighter text, gold dot separators */
.dw-venue-list {
    color: var(--dw-txt-soft) !important;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    line-height: 2.2;
}
/* v2.6: Venue chip styling — wraps each venue name in a span for hover */
.dw-venue-chip {
    display: inline-block;
    padding: 4px 12px;
    margin: 3px 2px;
    border: 1px solid var(--dw-hair);
    border-radius: 100px;
    font-size: 0.82rem;
    color: var(--dw-muted);
    background: transparent;
    transition: all 0.3s var(--dw-ease);
    cursor: default;
}
.dw-venue-chip:hover {
    color: var(--dw-accent-light);
    border-color: var(--dw-gold-border);
    background: rgba(166,124,82,0.06);
    box-shadow: 0 0 16px rgba(166,124,82,0.08);
    transform: translateY(-1px);
}

/* ===========================================
   §28. AMBIENT SECTION GLOW
   Subtle radial gold gradient behind key sections
   =========================================== */
.dw-section-glow {
    position: relative;
}
.dw-section-glow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(166,124,82,0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* Ambient glow applied to Gutenberg groups */
.entry-content > .wp-block-group {
    position: relative;
}
.entry-content > .wp-block-group::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 300px;
    background: radial-gradient(ellipse, rgba(166,124,82,0.025) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* ===========================================
   §29. CURSOR PROXIMITY GLOW (JS-driven)
   =========================================== */
.dw-glow-target {
    position: relative;
    overflow: visible;
}
.dw-glow-target .dw-cursor-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(166,124,82,0.08) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    transform: translate(-50%, -50%);
    z-index: 0;
}
.dw-glow-target:hover .dw-cursor-glow {
    opacity: 1;
}

/* ===========================================
   §30. 3D CARD TILT (JS-driven)
   =========================================== */
.dw-tilt {
    transform-style: preserve-3d;
    perspective: 1000px;
}
.dw-tilt-inner {
    transition: transform 0.15s ease-out;
    will-change: transform;
}

/* ===========================================
   §31. SoundCloud EMBED PREMIUM STYLING
   v2.6: Enhanced card borders + gold accent
   =========================================== */
.entry-content iframe[src*="soundcloud"] {
    border-radius: var(--dw-radius-md);
    box-shadow: var(--dw-shadow-sm);
    border: 1px solid var(--dw-hair);
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.entry-content iframe[src*="soundcloud"]:hover {
    box-shadow: var(--dw-shadow-gold),
                0 0 30px rgba(166,124,82,0.06);
    border-color: var(--dw-gold-border);
}

/* ===========================================
   §32. CUSTOM SCROLLBAR — Premium Dark
   =========================================== */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--dw-accent) var(--dw-bg2);
}
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--dw-bg2);
}
::-webkit-scrollbar-thumb {
    background: var(--dw-accent);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--dw-accent-light);
}

/* ===========================================
   §33. SECTION SPACING RHYTHM
   Consistent vertical rhythm across all pages.
   v2.9: Tightened from 5rem → 3.5rem (less dead space, still breathable)
   =========================================== */
.dw-section {
    padding: 3.5rem 0;
}
.entry-content > .wp-block-group {
    padding: 2.5rem 0;
}
.entry-content > .wp-block-group + .wp-block-group {
    padding-top: 1rem;
}

/* Breathing room between major content blocks */
.entry-content > .wp-block-columns {
    margin-bottom: 2.5rem;
}
.entry-content > .wp-block-image {
    margin-bottom: 2rem;
}
.entry-content > .wp-block-buttons {
    margin-top: 1.5rem;
    margin-bottom: 2.5rem;
}

/* v2.6: Section divider gradient lines between homepage sections */
.dw-section + .dw-section::before {
    content: '';
    display: block;
    width: 200px;
    max-width: 40%;
    height: 1px;
    margin: 0 auto 2rem;
    background: linear-gradient(90deg, transparent, var(--dw-accent), transparent);
    opacity: 0.3;
}

/* ===========================================
   §33b. HOMEPAGE PHOTO GALLERY
   Masonry-style gallery for past DJ events.
   Photos uploaded to /wp-content/uploads/gallery/
   =========================================== */
.dw-gallery-section {
    position: relative;
}
.dw-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: var(--dw-content-max);
    margin: 0 auto;
}
.dw-gallery-grid .dw-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--dw-radius-md);
    aspect-ratio: 4 / 3;
    cursor: pointer;
}
.dw-gallery-grid .dw-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--dw-ease),
                filter 0.6s ease;
}
.dw-gallery-grid .dw-gallery-item:hover img {
    transform: scale(1.06);
    filter: brightness(1.1) saturate(1.15);
}
/* Dark overlay with caption */
.dw-gallery-grid .dw-gallery-item::after {
    content: attr(data-caption);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: linear-gradient(transparent, rgba(15,15,17,0.85));
    color: var(--dw-txt-soft);
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.dw-gallery-grid .dw-gallery-item:hover::after {
    opacity: 1;
    transform: translateY(0);
}
/* Featured item spans 2 cols */
.dw-gallery-grid .dw-gallery-item.featured {
    grid-column: span 2;
    aspect-ratio: 16 / 9;
}
@media (max-width: 768px) {
    .dw-gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .dw-gallery-grid .dw-gallery-item.featured {
        grid-column: span 2;
    }
}
@media (max-width: 480px) {
    .dw-gallery-grid {
        grid-template-columns: 1fr;
    }
    .dw-gallery-grid .dw-gallery-item.featured {
        grid-column: span 1;
    }
}

/* ===========================================
   §34. LISTEN PAGE — SOUNDCLOUD EMBEDS PREMIUM
   SoundCloud cards get clean presentation without
   tilt/glow (handled in JS), but get enhanced borders,
   shadows, and spacing for a premium gallery feel.
   =========================================== */

/* SoundCloud embed container cards — premium presentation */
.entry-content iframe[src*="soundcloud"] {
    border-radius: var(--dw-radius-md) !important;
    box-shadow: var(--dw-shadow-md);
    border: 1px solid var(--dw-hair);
    transition: box-shadow 0.5s ease, border-color 0.5s ease;
    display: block;
    max-width: var(--dw-narrow-max);
    margin: 1rem auto;
}
.entry-content iframe[src*="soundcloud"]:hover {
    box-shadow: var(--dw-shadow-gold),
                0 0 40px rgba(166,124,82,0.06);
    border-color: var(--dw-gold-border);
}

/* Wrapper blocks around SoundCloud — tighter spacing */
.wp-block-group:has(iframe[src*="soundcloud"]) {
    padding: 1rem 0;
}

/* Listen page genre/mood section */
.dw-mood-tag {
    font-weight: 500;
}

/* F37: Mix card wrapper — title + mood tags + description around embed */
.dw-mix-card {
    max-width: var(--dw-narrow-max);
    margin: 2.5rem auto;
    padding: 1.5rem 1.5rem 1rem;
    background: var(--dw-bg-glass);
    border: 1px solid var(--dw-hair);
    border-radius: var(--dw-radius-lg);
    transition: border-color 0.4s ease,
                transform 0.4s var(--dw-ease),
                box-shadow 0.4s ease;
}
.dw-mix-card:hover {
    border-color: var(--dw-gold-border);
    transform: translateY(-4px);
    box-shadow: var(--dw-shadow-gold),
                inset 0 0 20px rgba(166,124,82,0.03);
}
.dw-mix-card h3 {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1.3rem !important;
    font-weight: 400 !important;
    color: var(--dw-txt) !important;
    margin-bottom: 0.5rem !important;
}
.dw-mix-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.dw-mix-desc {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.85rem !important;
    line-height: 1.7 !important;
    color: rgba(255,255,255,var(--dw-muted,0.75)) !important;
    margin-top: 1rem !important;
}

/* Listen CTA section — more dramatic */
.dw-listen-cta h2,
.dw-listen-cta h3 {
    margin-bottom: 1rem;
}
.dw-listen-cta p {
    margin-bottom: 2.5rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* ===========================================
   §35. BOOK PAGE — FORM PROFESSIONAL POLISH
   Trust signals, premium spacing, professional feel.
   =========================================== */

/* F38: Book page intro section above form */
.dw-book-intro {
    max-width: 620px;
    margin: 0 auto 2.5rem;
    text-align: center;
}
.dw-book-intro h2 {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 2rem !important;
    font-weight: 400 !important;
    color: var(--dw-txt) !important;
    margin-bottom: 1rem !important;
    letter-spacing: 0.02em;
}
.dw-book-intro p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    line-height: 1.8 !important;
    color: rgba(255,255,255,var(--dw-txt-soft,0.88)) !important;
    max-width: 520px;
    margin: 0 auto !important;
}
/* F43: Booking tier indicator */
.dw-book-tiers {
    max-width: 620px;
    margin: 0 auto 2rem;
    padding: 1.5rem 2rem;
    background: var(--dw-bg-glass);
    border: 1px solid var(--dw-hair);
    border-radius: var(--dw-radius-lg);
    text-align: center;
}
.dw-book-tiers h3 {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    color: var(--dw-gold) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 0.75rem !important;
}
.dw-book-tiers p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.85rem !important;
    line-height: 1.7 !important;
    color: rgba(255,255,255,var(--dw-muted,0.75)) !important;
}
.dw-book-tiers .dw-tier-range {
    font-size: 1.1rem !important;
    color: var(--dw-txt) !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
}

/* Form container wrapper */
.fluentform {
    max-width: 620px;
    margin: 0 auto;
    padding: 2.5rem;
    background: var(--dw-bg-glass);
    border: 1px solid var(--dw-hair);
    border-radius: var(--dw-radius-lg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--dw-shadow-md);
}

/* Form field groups — better spacing */
.fluentform .ff-el-group {
    margin-bottom: 1.5rem;
}

/* Form labels — refined */
.fluentform .ff-el-input--label label {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    margin-bottom: 0.5rem !important;
}

/* Form inputs — deeper feel */
.fluentform input,
.fluentform textarea,
.fluentform select {
    padding: 0.85rem 1rem !important;
    font-size: 0.95rem !important;
    border-radius: var(--dw-radius) !important;
}
.fluentform textarea {
    min-height: 120px !important;
    field-sizing: content;
}

/* Radio/checkbox labels */
.fluentform .ff-el-form-check label {
    color: var(--dw-muted) !important;
    font-size: 0.9rem !important;
}

/* Form section headings inside form */
.fluentform h3,
.fluentform .ff-el-section-break {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    color: var(--dw-txt) !important;
    font-size: 1.3rem !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 1px solid var(--dw-hair) !important;
}

/* Privacy consent link styling */
.fluentform a {
    color: var(--dw-accent) !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(166,124,82,0.3) !important;
    text-underline-offset: 2px !important;
}
.fluentform a:hover {
    text-decoration-color: var(--dw-accent) !important;
}
.fluentform a::after {
    display: none !important;
}

/* Form validation states */
.fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error textarea,
.fluentform .ff-el-is-error select {
    border-color: #c0392b !important;
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.15) !important;
}
.fluentform .error {
    color: #e74c3c !important;
    font-size: 0.8rem !important;
    margin-top: 0.3rem !important;
}
/* CSS :user-valid/:user-invalid — shows validation only after user interaction */
.fluentform input:user-valid,.fluentform textarea:user-valid,.fluentform select:user-valid{border-color:rgba(106,224,168,0.4)!important;}
.fluentform input:user-invalid,.fluentform textarea:user-invalid,.fluentform select:user-invalid{border-color:rgba(220,60,60,0.5)!important;box-shadow:0 0 0 1px rgba(220,60,60,0.15)!important;}

/* Success message */
.fluentform .ff-message-success {
    background: rgba(166, 124, 82, 0.08) !important;
    border: 1px solid var(--dw-gold-border) !important;
    color: var(--dw-txt) !important;
    border-radius: var(--dw-radius-md) !important;
    padding: 1.5rem !important;
    text-align: center !important;
}

/* ===========================================
   §36. ABOUT PAGE — PHILOSOPHY & BIO DEPTH
   Enhanced typographic treatment for long-form content.
   =========================================== */

/* Philosophy section paragraphs — brighter, wider, better wrapping */
.entry-content > .wp-block-group p {
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--dw-txt-soft);
    text-wrap: pretty;
    max-width: var(--dw-narrow-max);
    margin-left: auto;
    margin-right: auto;
}

/* Emphasis text within about content */
.entry-content strong,
.entry-content b {
    color: var(--dw-txt);
    font-weight: 600;
}

/* Italic accent */
.entry-content em,
.entry-content i {
    color: var(--dw-accent-light);
    font-style: italic;
}

/* About page — image treatment (DJ photos, event shots) */
.entry-content > .wp-block-image.alignwide,
.entry-content > .wp-block-image.alignfull {
    margin-top: 3rem;
    margin-bottom: 3rem;
}
.entry-content > .wp-block-image.alignwide img,
.entry-content > .wp-block-image.alignfull img {
    border-radius: var(--dw-radius-md);
    box-shadow: var(--dw-shadow-lg);
}

/* ===========================================
   §37. HOME PAGE — HERO & PILLAR REFINEMENTS
   =========================================== */

/* Hero bottom fade — smoother transition to content */
.dw-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(180deg, transparent, var(--dw-bg));
    z-index: 2;
    pointer-events: none;
}

/* Hero section label (above h1) */
.dw-hero-content .dw-section-label {
    margin-bottom: 1.2rem;
    opacity: 0.8;
}

/* Pillar icons/emojis — if used */
.dw-pillar-head .dw-pillar-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    display: block;
    filter: grayscale(0.3);
    transition: filter 0.4s ease;
}
.dw-pillar-head:hover .dw-pillar-icon {
    filter: grayscale(0);
}

/* Pillar description text */
.dw-pillar-head p,
.dw-pillar-card p {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--dw-muted-dim);
    margin-top: 0.75rem;
    transition: color 0.5s ease, opacity 0.5s ease;
}
.dw-pillar-head:hover > p,
.dw-pillar-card:hover > p {
    color: var(--dw-txt-soft);
}
/* Click-to-expand description inherits but overrides margin via §38a */

/* Three-pillar section — ambient glow on the whole grid */
.dw-pillars-grid {
    position: relative;
}
.dw-pillars-grid::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: calc(100% + 80px);
    background: radial-gradient(ellipse at center, rgba(166,124,82,0.03) 0%, transparent 65%);
    pointer-events: none;
    z-index: -1;
}

/* ===========================================
   §38a. PILLAR SONIC INTERACTIVITY
   Waveform bars + click-to-expand + glow rings
   =========================================== */

/* --- Click-to-expand: description hidden by default --- */
.dw-pillar-head {
    cursor: pointer;
    overflow: hidden;
}
.dw-pillar-desc {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.5s ease 0.1s,
                margin 0.5s ease;
    margin-top: 0;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--dw-muted-dim);
}
.dw-pillar-head.dw-pillar-expanded .dw-pillar-desc {
    max-height: 200px;
    opacity: 1;
    margin-top: 0.75rem;
}
.dw-pillar-head.dw-pillar-expanded .dw-pillar-desc {
    color: var(--dw-txt-soft);
}

/* Expand indicator — subtle "tap to reveal" hint */
.dw-pillar-sub::after {
    content: ' +';
    font-weight: 700;
    opacity: 0.5;
    transition: opacity 0.3s ease, content 0.3s ease;
}
.dw-pillar-expanded .dw-pillar-sub::after {
    content: ' −';
    opacity: 0.7;
}

/* --- Waveform bars at bottom of each card --- */
.dw-pillar-waveform {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 24px;
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(244,241,234,0.04);
    opacity: 0.35;
    transition: opacity 0.5s ease;
}
.dw-pillar-head:hover .dw-pillar-waveform,
.dw-pillar-expanded .dw-pillar-waveform {
    opacity: 1;
}
.dw-pillar-waveform span {
    display: block;
    width: 3px;
    height: 4px;
    background: var(--dw-accent);
    border-radius: 2px;
    transform-origin: bottom;
    transition: background 0.4s ease;
}

/* Atmosphere — slow, sine-like, spatial wave */
[data-pillar="atmosphere"] .dw-pillar-waveform span {
    animation: none;
}
[data-pillar="atmosphere"]:hover .dw-pillar-waveform span,
[data-pillar="atmosphere"].dw-pillar-expanded .dw-pillar-waveform span {
    animation: waveAtmosphere 3s ease-in-out infinite;
}
[data-pillar="atmosphere"] .dw-pillar-waveform span:nth-child(1) { animation-delay: 0s; }
[data-pillar="atmosphere"] .dw-pillar-waveform span:nth-child(2) { animation-delay: 0.25s; }
[data-pillar="atmosphere"] .dw-pillar-waveform span:nth-child(3) { animation-delay: 0.5s; }
[data-pillar="atmosphere"] .dw-pillar-waveform span:nth-child(4) { animation-delay: 0.75s; }
[data-pillar="atmosphere"] .dw-pillar-waveform span:nth-child(5) { animation-delay: 1s; }
[data-pillar="atmosphere"] .dw-pillar-waveform span:nth-child(6) { animation-delay: 1.25s; }
[data-pillar="atmosphere"] .dw-pillar-waveform span:nth-child(7) { animation-delay: 1.5s; }
[data-pillar="atmosphere"] .dw-pillar-waveform span:nth-child(8) { animation-delay: 1.75s; }
[data-pillar="atmosphere"] .dw-pillar-waveform span:nth-child(9) { animation-delay: 2s; }
[data-pillar="atmosphere"] .dw-pillar-waveform span:nth-child(10) { animation-delay: 2.25s; }

@keyframes waveAtmosphere {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(3); }
}

/* Movement — rhythmic, percussive peaks */
[data-pillar="movement"] .dw-pillar-waveform span {
    animation: none;
}
[data-pillar="movement"]:hover .dw-pillar-waveform span,
[data-pillar="movement"].dw-pillar-expanded .dw-pillar-waveform span {
    animation: waveMovement 1.2s ease-in-out infinite;
}
[data-pillar="movement"] .dw-pillar-waveform span:nth-child(1) { animation-delay: 0s; }
[data-pillar="movement"] .dw-pillar-waveform span:nth-child(2) { animation-delay: 0.1s; }
[data-pillar="movement"] .dw-pillar-waveform span:nth-child(3) { animation-delay: 0.2s; }
[data-pillar="movement"] .dw-pillar-waveform span:nth-child(4) { animation-delay: 0.3s; }
[data-pillar="movement"] .dw-pillar-waveform span:nth-child(5) { animation-delay: 0.1s; }
[data-pillar="movement"] .dw-pillar-waveform span:nth-child(6) { animation-delay: 0.0s; }
[data-pillar="movement"] .dw-pillar-waveform span:nth-child(7) { animation-delay: 0.15s; }
[data-pillar="movement"] .dw-pillar-waveform span:nth-child(8) { animation-delay: 0.25s; }
[data-pillar="movement"] .dw-pillar-waveform span:nth-child(9) { animation-delay: 0.35s; }
[data-pillar="movement"] .dw-pillar-waveform span:nth-child(10) { animation-delay: 0.05s; }

@keyframes waveMovement {
    0%, 100% { transform: scaleY(1); }
    25% { transform: scaleY(3.5); }
    50% { transform: scaleY(1.3); }
    75% { transform: scaleY(2.5); }
}

/* Release — expanding burst pattern */
[data-pillar="release"] .dw-pillar-waveform span {
    animation: none;
}
[data-pillar="release"]:hover .dw-pillar-waveform span,
[data-pillar="release"].dw-pillar-expanded .dw-pillar-waveform span {
    animation: waveRelease 2s ease-out infinite;
}
[data-pillar="release"] .dw-pillar-waveform span:nth-child(1) { animation-delay: 0.55s; }
[data-pillar="release"] .dw-pillar-waveform span:nth-child(2) { animation-delay: 0.5s; }
[data-pillar="release"] .dw-pillar-waveform span:nth-child(3) { animation-delay: 0.4s; }
[data-pillar="release"] .dw-pillar-waveform span:nth-child(4) { animation-delay: 0.3s; }
[data-pillar="release"] .dw-pillar-waveform span:nth-child(5) { animation-delay: 0.15s; }
[data-pillar="release"] .dw-pillar-waveform span:nth-child(6) { animation-delay: 0s; }
[data-pillar="release"] .dw-pillar-waveform span:nth-child(7) { animation-delay: 0s; }
[data-pillar="release"] .dw-pillar-waveform span:nth-child(8) { animation-delay: 0.15s; }
[data-pillar="release"] .dw-pillar-waveform span:nth-child(9) { animation-delay: 0.3s; }
[data-pillar="release"] .dw-pillar-waveform span:nth-child(10) { animation-delay: 0.4s; }

@keyframes waveRelease {
    0% { transform: scaleY(1); }
    20% { transform: scaleY(4); }
    60% { transform: scaleY(1.6); }
    100% { transform: scaleY(1); }
}

/* --- Glow rings — radiating circle behind card on hover --- */
.dw-pillar-glow-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    transform: translate(-50%, -50%) scale(0.8);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.dw-pillar-head:hover .dw-pillar-glow-ring,
.dw-pillar-expanded .dw-pillar-glow-ring {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Atmosphere glow — warm diffused ring, slow pulse */
[data-pillar="atmosphere"] .dw-pillar-glow-ring {
    background: radial-gradient(circle, rgba(166,124,82,0.10) 0%, rgba(166,124,82,0.04) 40%, transparent 70%);
    animation: glowAtmosphere 4s ease-in-out infinite;
}
@keyframes glowAtmosphere {
    0%, 100% { box-shadow: 0 0 40px rgba(166,124,82,0.06), 0 0 80px rgba(166,124,82,0.03); }
    50% { box-shadow: 0 0 60px rgba(166,124,82,0.10), 0 0 120px rgba(166,124,82,0.05); }
}

/* Movement glow — tighter ring, rhythmic pulse */
[data-pillar="movement"] .dw-pillar-glow-ring {
    background: radial-gradient(circle, rgba(166,124,82,0.12) 0%, rgba(166,124,82,0.05) 35%, transparent 60%);
    animation: glowMovement 1.5s ease-in-out infinite;
}
@keyframes glowMovement {
    0%, 100% { box-shadow: 0 0 30px rgba(166,124,82,0.06); }
    50% { box-shadow: 0 0 50px rgba(166,124,82,0.14), 0 0 90px rgba(166,124,82,0.06); }
}

/* Release glow — expanding burst, single outward push */
[data-pillar="release"] .dw-pillar-glow-ring {
    background: radial-gradient(circle, rgba(166,124,82,0.14) 0%, rgba(166,124,82,0.06) 30%, transparent 55%);
    animation: glowRelease 2.5s ease-out infinite;
}
@keyframes glowRelease {
    0% { box-shadow: 0 0 20px rgba(166,124,82,0.04); transform: translate(-50%, -50%) scale(0.95); }
    40% { box-shadow: 0 0 70px rgba(166,124,82,0.16), 0 0 140px rgba(166,124,82,0.06); transform: translate(-50%, -50%) scale(1.05); }
    100% { box-shadow: 0 0 30px rgba(166,124,82,0.04); transform: translate(-50%, -50%) scale(1); }
}

/* ===========================================
   §38b. MIX CARD GLOW RINGS (SITEWIDE)
   Radiating glow outline on SoundCloud mix cards
   =========================================== */
.dw-mix-card {
    position: relative;
    overflow: visible;
}
.dw-mix-card::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background: transparent;
    border: 1px solid transparent;
    opacity: 0;
    transition: opacity 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
    pointer-events: none;
    z-index: -1;
}
.dw-mix-card:hover::after {
    opacity: 1;
    border-color: rgba(166,124,82,0.25);
    box-shadow: 0 0 20px rgba(166,124,82,0.10),
                0 0 50px rgba(166,124,82,0.06),
                0 0 80px rgba(166,124,82,0.03);
    animation: mixGlow 2.5s ease-in-out infinite;
}
@keyframes mixGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(166,124,82,0.10),
                    0 0 50px rgba(166,124,82,0.06),
                    0 0 80px rgba(166,124,82,0.03);
    }
    50% {
        box-shadow: 0 0 30px rgba(166,124,82,0.16),
                    0 0 65px rgba(166,124,82,0.09),
                    0 0 100px rgba(166,124,82,0.04);
    }
}

/* Listen page mix cards get the same treatment (scoped) */
.dw-container .dw-mix-card::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background: transparent;
    border: 1px solid transparent;
    opacity: 0;
    transition: opacity 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
    pointer-events: none;
    z-index: -1;
}
.dw-container .dw-mix-card:hover::after {
    opacity: 1;
    border-color: rgba(166,124,82,0.3);
    box-shadow: 0 0 24px rgba(166,124,82,0.12),
                0 0 55px rgba(166,124,82,0.07),
                0 0 90px rgba(166,124,82,0.03);
    animation: mixGlow 2.5s ease-in-out infinite;
}

/* ===========================================
   §38. GLOBAL PROFESSIONAL MICRO-INTERACTIONS
   =========================================== */

/* Smooth focus-visible outlines for keyboard navigation (a11y) */
*:focus-visible {
    outline: 2px solid var(--dw-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Body text links within content — underline on hover */
.entry-content p a,
.entry-content li a {
    color: var(--dw-accent);
    text-decoration: underline;
    text-decoration-color: rgba(166,124,82,0.3);
    text-underline-offset: 3px;
    transition: color 0.3s ease, text-decoration-color 0.3s ease;
}
.entry-content p a:hover,
.entry-content li a:hover {
    color: var(--dw-accent-light);
    text-decoration-color: var(--dw-accent-light);
}
.entry-content p a::after,
.entry-content li a::after {
    display: none;
}

/* WordPress button blocks — add group centering */
.wp-block-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Loading/transition state for dynamic content */
.dw-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* ===========================================
   §39. PROFESSIONAL VALUE SIGNALS
   Subtle visual cues that communicate quality.
   =========================================== */

/* Testimonial attribution — styled as a proper credit */
.dw-attribution,
blockquote cite,
.wp-block-quote cite {
    display: block;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--dw-hair);
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--dw-accent);
}

/* Venue list styling — premium dot separation */
.dw-venues {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    color: var(--dw-muted);
    text-align: center;
}

/* "Featured at" / "As seen at" subtle heading */
.dw-trust-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dw-accent);
    opacity: 0.7;
    text-align: center;
    margin-bottom: 1rem;
}

/* Subtle top-of-section gold accent line */
.dw-section-accent-top {
    position: relative;
}
.dw-section-accent-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: var(--dw-gold-gradient);
    border-radius: 1px;
}

/* ===========================================
   §39b. FEATURED AT STRIP
   Festival names with prominent treatment
   =========================================== */
.dw-featured-section {
    padding-top: 3rem;
    padding-bottom: 2rem;
}
.dw-featured-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.dw-featured-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 700;
    color: var(--dw-txt);
    letter-spacing: 0.03em;
    text-shadow: 0 0 30px rgba(166,124,82,0.15);
}
.dw-featured-sep {
    color: var(--dw-accent);
    font-size: 1.2rem;
    opacity: 0.6;
}

/* ===========================================
   §39c. NEWSLETTER FORM
   Inline email capture for Wabi Circle
   =========================================== */
.dw-newsletter-form {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-width: 520px;
    margin: 0 auto;
}
.dw-newsletter-input {
    flex: 1;
    min-width: 200px;
    padding: 0.9rem 1.2rem;
    background: var(--dw-bg2);
    border: 1px solid var(--dw-hair);
    border-radius: var(--dw-radius);
    color: var(--dw-txt);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.dw-newsletter-input:focus {
    border-color: var(--dw-accent);
    box-shadow: 0 0 0 3px rgba(166,124,82,0.15);
    outline: none;
}
.dw-newsletter-input::placeholder {
    color: var(--dw-muted-faint);
}
.dw-newsletter-btn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

/* ===========================================
   §39d. OPERATOR STRIP
   Minimal identity strip before footer
   =========================================== */
.dw-operator-strip {
    border-top: 1px solid var(--dw-hair);
    padding: 40px 1.5rem;
    text-align: center;
}
.dw-operator-inner {
    max-width: var(--dw-content-max);
    margin: 0 auto;
}
.dw-operator-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--dw-txt);
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.dw-operator-details {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--dw-accent);
    opacity: 0.8;
    margin-bottom: 8px;
}
.dw-operator-entity {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dw-muted-faint);
}

/* ===========================================
   §39d2. VENUES CARD — Reactive
   "Where the Sound Has Been" hover card
   =========================================== */
.dw-venues .dw-container-narrow {
    max-width: var(--dw-narrow-max);
    margin: 0 auto;
}
.dw-venues-list {
    position: relative;
    padding: 2.5rem 3rem 2rem;
    background: var(--dw-bg-glass);
    border: 1px solid var(--dw-hair);
    border-radius: var(--dw-radius-md);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow: hidden;
    transition: border-color 0.5s ease,
                transform 0.5s var(--dw-ease),
                box-shadow 0.5s ease;
}
.dw-venues-list::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(166,124,82,0.3), transparent 40%, transparent 60%, rgba(166,124,82,0.2));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.dw-venues-list:hover {
    border-color: var(--dw-gold-border);
    transform: translateY(-4px);
    box-shadow: 0 8px 40px rgba(166,124,82,0.12),
                0 0 60px rgba(166,124,82,0.06),
                inset 0 1px 0 rgba(244,241,234,0.06);
}
.dw-venues-list:hover::before {
    opacity: 1;
}
.dw-venues-featured {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--dw-hair);
}
.dw-venue-big {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dw-txt);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
.dw-venues-list:hover .dw-venue-big {
    color: var(--dw-accent-light);
    text-shadow: 0 0 20px rgba(166,124,82,0.25);
}
/* Dot separators between venue names */
.dw-venue-big + .dw-venue-big::before {
    content: '·';
    margin-right: 2.5rem;
    color: var(--dw-accent);
    opacity: 0.5;
    font-size: 1.6rem;
    vertical-align: middle;
}
.dw-venues-list p {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    color: var(--dw-muted);
    line-height: 1.75;
    text-align: center;
    margin: 0;
}

/* ===========================================
   §39e. PHILOSOPHY CARD — Wabi-Sabi (S154)
   Immersive glow card with animated border + ambient pulse
   =========================================== */
@keyframes wabisabiGlow {
    0%, 100% { opacity: 0.4; filter: blur(30px); }
    50% { opacity: 0.7; filter: blur(50px); }
}
@keyframes wabisabiBorderShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* Targets the actual class in the HTML (was .dw-philosophy-card, now .dw-philosophy-content) */
/* Kintsugi SVG: gold crack veins + faint ensō circle — visual metaphor for wabi-sabi */
.dw-philosophy-content {
    position: relative;
    max-width: var(--dw-narrow-max);
    margin: 0 auto;
    padding: 3rem 3rem 2.5rem;
    background: linear-gradient(145deg, rgba(20,20,24,0.85), rgba(30,28,26,0.7));
    border: 1px solid transparent;
    border-radius: var(--dw-radius-md);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    transition: transform 0.6s var(--dw-ease),
                box-shadow 0.6s ease;
}
/* Kintsugi crack — inline SVG with draw-on-hover animation */
.dw-philosophy-content > .dw-kintsugi-crack {
    position: absolute;
    top: 10px; right: 20px;
    width: 90px; height: 126px;
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(0 0 4px rgba(196,154,108,0));
    transition: filter 0.6s ease;
}
@media(max-width:768px){
  .dw-philosophy-content>.dw-kintsugi-crack{width:90px;height:105px;right:14px;top:8px;}
}
@media(max-width:480px){
  .dw-philosophy-content>.dw-kintsugi-crack{width:65px;height:76px;right:10px;top:5px;}
}
.dw-crack-main {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    transition: stroke-dashoffset 1.4s cubic-bezier(0.25,0.1,0.25,1), opacity 0.4s ease;
    opacity: 0;
}
.dw-crack-branch {
    stroke-dasharray: 250;
    stroke-dashoffset: 250;
    transition: stroke-dashoffset 1.0s cubic-bezier(0.25,0.1,0.25,1) 0.5s, opacity 0.4s ease 0.4s;
    opacity: 0;
}
.dw-crack-dust {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    transition: stroke-dashoffset 0.5s ease 1.0s, opacity 0.3s ease 0.9s;
    opacity: 0;
}
.dw-philosophy-content:hover .dw-crack-main {
    stroke-dashoffset: 0;
    opacity: 1;
}
.dw-philosophy-content:hover .dw-crack-branch {
    stroke-dashoffset: 0;
    opacity: 0.85;
}
.dw-philosophy-content:hover .dw-crack-dust {
    stroke-dashoffset: 0;
    opacity: 0.65;
}
.dw-philosophy-content:hover .dw-kintsugi-crack {
    filter: drop-shadow(0 0 20px rgba(196,154,108,0.70)) drop-shadow(0 0 6px rgba(196,154,108,0.90));
}
/* Animated gradient border */
.dw-philosophy-content::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        270deg,
        rgba(166,124,82,0.4),
        rgba(196,154,108,0.15),
        rgba(166,124,82,0.5),
        rgba(196,154,108,0.15),
        rgba(166,124,82,0.4)
    );
    background-size: 300% 100%;
    animation: wabisabiBorderShift 8s ease infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 0;
    pointer-events: none;
}
/* Ambient glow orb behind card */
.dw-philosophy-content::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 70%;
    background: radial-gradient(ellipse, rgba(166,124,82,0.15) 0%, transparent 70%);
    animation: wabisabiGlow 6s ease-in-out infinite;
    z-index: -1;
    pointer-events: none;
}
.dw-philosophy-content:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 16px 60px rgba(166,124,82,0.18),
                0 0 80px rgba(166,124,82,0.08),
                inset 0 1px 0 rgba(244,241,234,0.08);
    background: linear-gradient(145deg, rgba(25,23,22,0.9), rgba(35,32,30,0.75));
}
.dw-philosophy-content h2 {
    position: relative;
    z-index: 1;
}
.dw-philosophy-content p {
    position: relative;
    z-index: 1;
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    color: var(--dw-muted);
    line-height: 1.85;
    text-align: center;
    margin: 0;
}
/* Keep .dw-philosophy-card for backward compat */
.dw-philosophy-card {
    max-width: var(--dw-narrow-max);
    margin: 0 auto;
    padding: 2.5rem 2.5rem;
    background: var(--dw-bg-glass);
    border: 1px solid var(--dw-hair);
    border-top: 2px solid var(--dw-gold-border);
    border-radius: var(--dw-radius-md);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: border-color 0.5s ease,
                transform 0.5s var(--dw-ease),
                box-shadow 0.5s ease,
                background 0.5s ease,
                border-top-color 0.5s ease;
}
.dw-philosophy-card:hover {
    border-color: var(--dw-gold-border);
    border-top-color: var(--dw-accent);
    transform: translateY(-6px);
    box-shadow: var(--dw-shadow-gold-lg),
                inset 0 1px 0 rgba(244,241,234,0.06);
    background: var(--dw-bg-glass-hover);
}
.dw-philosophy-card p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--dw-muted);
    line-height: 1.85;
    text-align: left;
    margin: 0;
}

/* ===========================================
   §39f. TESTIMONIALS GRID
   Multi-column layout for 3+ testimonials
   =========================================== */
.dw-testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: var(--dw-content-max);
    margin: 0 auto;
}
@media (min-width: 769px) {
    .dw-testimonials-grid {
        grid-template-columns: 1fr 1fr;
    }
    .dw-testimonials-grid blockquote:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        max-width: 600px;
        margin: 0 auto;
    }
}

/* ===========================================
   §40. RESPONSIVE — TABLET (≤1024px)
   =========================================== */
@media (max-width: 1024px) {
    :root {
        --dw-content-max: 720px;
        --dw-narrow-max: 640px;
    }
    .dw-pillars-grid {
        gap: 1.5rem;
    }
    .dw-pillar-head {
        padding: 2rem 1.25rem;
    }
    .dw-pillar-title {
        font-size: 1rem;
        letter-spacing: 0.08em;
        white-space: normal;
        word-break: break-word;
    }
}

/* ===========================================
   §41. RESPONSIVE — MOBILE (≤768px)
   =========================================== */
@media (max-width: 768px) {
    .entry-content,
    .entry-content.single-content {
        padding: 0 1.25rem;
    }
    .entry-content > *,
    .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .entry-content p {
        margin-bottom: 1.8rem;
        line-height: 1.75;
    }

    /* Hero */
    .dw-hero { min-height: 75vh; min-height: 75dvh; }
    .dw-hero-content { padding: 1.5rem 1.25rem; }
    .dw-hero-content h1 { font-size: 1.9rem; }

    /* Pillars stack */
    .dw-pillars-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .dw-pillars { grid-template-columns: 1fr; }
    .dw-pillar-title { font-size: 1.1rem; white-space: normal; }

    /* Footer (homepage) */
    #dw-page .dw-footer { padding: 3rem 1.25rem; }
    #dw-page .dw-footer a { margin: 0 0.75rem; }

    /* Disable hover lifts on touch — keep subtle effects */
    .dw-panel:hover,
    .dw-pillar-head:hover,
    .dw-pillar-card:hover,
    .dw-genre-card:hover,
    .dw-column:hover {
        transform: none;
    }

    /* Pillar cards: show descriptions by default on mobile (no hover/click needed) */
    .dw-pillar-desc {
        max-height: 200px;
        opacity: 1;
        margin-top: 0.75rem;
    }
    .dw-pillar-sub::after { display: none; }
    .dw-pillar-waveform { opacity: 0.5; }
    .dw-pillar-waveform span { animation: none !important; }
    .dw-pillar-glow-ring { display: none; }

    /* Disable 3D tilt on mobile */
    .dw-tilt-inner {
        transform: none !important;
    }

    /* Testimonials */
    blockquote, .wp-block-quote, .dw-testimonial {
        padding: 1.5rem 1.5rem 1.5rem 2rem;
        margin: 2rem auto;
    }
    blockquote::before, .wp-block-quote::before, .dw-testimonial::before {
        font-size: 3rem;
        top: -4px;
        left: 12px;
    }

    /* Section heading underline */
    .dw-section h2::after,
    .entry-content > .wp-block-group h2::after {
        width: 40px;
    }

    /* Form container — full width on mobile */
    .fluentform {
        padding: 1.5rem;
        border-radius: var(--dw-radius-md);
    }

    /* §Mobile-Upgrade: Section spacing with clamp() for fluid padding */
    .dw-section {
        padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 4vw, 1.5rem);
    }
    .entry-content > .wp-block-group {
        padding: 1.5rem 0;
    }

    /* Featured strip — stack */
    .dw-featured-strip {
        gap: 12px;
    }
    .dw-featured-name {
        font-size: 1.2rem;
        white-space: normal;
        word-break: break-word;
    }

    /* §Mobile-Upgrade: Tag touch targets with improved font size (12px → 13px) */
    .dw-tag {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 10px 18px;
        font-size: 13px;
    }

    /* Newsletter form — stack */
    .dw-newsletter-form {
        flex-direction: column;
    }
    .dw-newsletter-input {
        width: 100%;
    }

    /* Philosophy card */
    .dw-philosophy-card {
        padding: 2rem 1.5rem;
    }

    /* §Mobile-Upgrade: Button min-height standardization for all button variants */
    .dw-btn, a.dw-btn, .dw-btn-small, .dw-mix-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
    a.dw-btn,.dw-btn{width:100%;text-align:center;}
    a.dw-btn-small,.dw-btn-small{min-height:44px;padding:0.85rem 2rem;}

    /* iOS zoom prevention on form inputs */
    input,textarea,select,.fluentform input,.fluentform textarea,.fluentform select{font-size:16px!important;}

    /* §Mobile-Polish: hero CTA responsive stacking */
    .dw-hero .dw-hero-cta,.dw-hero .dw-btn-group,.dw-hero-content .dw-btn-group{
      display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;
    }
    .dw-hero .dw-btn,.dw-hero-content .dw-btn{width:100%;max-width:320px;text-align:center;}

    /* §Mobile-Polish: enhanced input focus glow */
    input:focus,textarea:focus,select:focus{
      border-color:rgba(166,124,82,0.5)!important;
      box-shadow:0 0 0 3px rgba(166,124,82,0.12),0 2px 8px rgba(166,124,82,0.08)!important;
      transition:border-color 0.2s ease,box-shadow 0.2s ease;
    }

    /* §Mobile-Polish: typography refinements */
    .dw-section p,.dw-philosophy-card p,.dw-pillar-card p,.dw-mix-card p{
      line-height:1.7;letter-spacing:0.01em;
    }
    .dw-section-title,.dw-pillar-head h3{
      letter-spacing:0.03em;
    }
}

/* ===========================================
   §41b. RESPONSIVE — INTERMEDIATE (≤600px)
   Bridges the gap between 768px tablet and 480px phone
   =========================================== */
@media (max-width: 600px) {
    .dw-hero { min-height: 65vh; min-height: 65dvh; }
    .dw-hero-content { padding: 1.25rem 1rem; }
    .dw-hero-content h1 { font-size: 1.85rem; }
    .dw-hero-content p { font-size: 1rem; margin-bottom: 2rem; }
    .dw-section { padding: 2rem 0; }
    .entry-content, .entry-content.single-content { padding: 0 1rem; }
    .dw-pillar-head { padding: 1.75rem 1.25rem; }
    .dw-panel { padding: 1.75rem; }
    .dw-genre-card { padding: 1.75rem; }
    .dw-genre-card h3 { font-size: 1rem; }
    .dw-philosophy-card { padding: 1.75rem 1.25rem; }
    .dw-featured-name { font-size: 1.15rem; }
    .dw-featured-strip { gap: 14px; }
    .dw-section h2 { font-size: clamp(1.3rem, 4vw, 1.6rem); }
    blockquote, .wp-block-quote, .dw-testimonial { padding: 1.25rem 1.25rem 1.25rem 1.75rem; }
    .fluentform { padding: 1.25rem; }
    #dw-page .dw-footer { padding: 2.5rem 1rem; }
    #dw-page .dw-footer a { margin: 0 0.5rem; font-size: 0.85rem; }
}

/* ===========================================
   §42. RESPONSIVE — SMALL MOBILE (≤480px)
   =========================================== */
@media (max-width: 480px) {
    /* §Mobile-Upgrade: Text overflow safety at 480px */
    p, li, dd, figcaption, blockquote, .dw-section p, .dw-philosophy-card p {
        overflow-wrap: break-word;
        word-break: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    /* §Mobile-Upgrade: Hero font scaling at 480px for visible step-down */
    body.home .dw-hero h1 { font-size: 1.65rem; }
    .dw-hero-content h1 { font-size: 1.65rem; }
    /* §Mobile-Upgrade: Button padding increase at 480px for premium feel */
    .dw-btn, .wp-block-button__link, a.dw-btn {
        padding: 1rem 2rem;
        font-size: 0.85rem;
        min-height: 48px;
    }
    .dw-pillar-head { padding: 1.5rem 1rem; }
    .dw-panel { padding: 1.5rem; }
    /* Subpage footer links stack on small mobile — homepage stays inline via #dw-page specificity */
    .dw-container ~ .dw-footer a { display: block; margin: 0.5rem 0; }
    #dw-page .dw-footer .dw-footer-links { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

    /* Philosophy card padding at 480px */
    .dw-philosophy-card{padding:1.5rem 1.2rem;}

    /* §Mobile-Polish: typography refinements at 480px */
    .dw-section p,.dw-philosophy-card p{line-height:1.75;}
}

/* ===========================================
   §43. REDUCED MOTION
   =========================================== */
@media (prefers-reduced-motion: reduce) {
    .dw-section, .dw-reveal, .dw-slide-left, .dw-slide-right, .dw-scale-up {
        opacity: 1; transform: none; transition: none;
    }
    .dw-stagger > *, .dw-stagger-child > * { animation: none; opacity: 1; transform: none; }
    .dw-line-reveal .dw-line { opacity: 1; transform: none; transition: none; }
    .dw-hero-content { animation: none; }
    .dw-hero-media { animation: none; }
    .wp-block-cover__inner-container { animation: none; }
    .wp-block-cover__image-background { animation: none; }
    body::before { animation: none; }
    .wp-block-button__link::before, .dw-btn::before { animation: none !important; }
    .dw-tilt-inner { transform: none !important; }
    /* Disable pillar sonic animations */
    .dw-pillar-waveform span { animation: none !important; }
    .dw-pillar-glow-ring { animation: none !important; opacity: 0 !important; }
    .dw-pillar-desc { max-height: 200px; opacity: 1; margin-top: 0.75rem; }
    .dw-pillar-sub::after { display: none; }
    .dw-mix-card::after, .dw-container .dw-mix-card::after { animation: none !important; }
    /* Hero shimmer, CTA pulse, breathing, grain */
    .dw-hero-content h1::after { animation: none !important; }
    .dw-hero-content .dw-btn { animation: none !important; }
    .dw-hero::after { animation: none !important; }
    .dw-grain { animation: none !important; }
    .dw-mix-glow { animation: none !important; }
    /* Wabi-sabi border/glow, fadeInUp, button shimmer */
    .dw-mix-button::before, .dw-button::before { animation: none !important; }
    [class*="wabisabi"] { animation: none !important; }
    .dw-section.dw-visible, .dw-reveal.dw-visible { transition: none !important; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ===========================================
   §44. SELECTION HIGHLIGHT
   =========================================== */
::selection {
    background: rgba(166, 124, 82, 0.3);
    color: var(--dw-txt);
}
::-moz-selection {
    background: rgba(166, 124, 82, 0.3);
    color: var(--dw-txt);
}

/* ===========================================
   §45. SMOOTH SCROLL
   =========================================== */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    color-scheme: dark;
    scrollbar-gutter: stable;
    overflow-x: hidden;
    scroll-padding-top: 72px;
    overscroll-behavior: none;
    interpolate-size: allow-keywords;
}
a,button,input,select,textarea,.dw-btn,.dw-pillar-card,.dw-mix-card,.dw-faq-question,.dw-nav-link{touch-action:manipulation;}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ===========================================
   §46. KADENCE ADMIN BAR OFFSET
   When WP admin bar is visible, offset sticky header
   =========================================== */
.admin-bar .site-header {
    top: 32px !important;
}
@media (max-width: 782px) {
    .admin-bar .site-header { top: 46px !important; }
}

/* =====================================================
   §47. LISTEN PAGE CSS
   From dw-listen-shell.html — scroll reveal sections,
   mix cards, tags, SoundCloud embeds, CTA, footer
   ===================================================== */

/* Main Container */
.dw-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Page Header */
.dw-page-header {
    padding: 60px 0 40px;
    text-align: center;
    border-bottom: 1px solid rgba(244, 241, 234, 0.14);
    margin-bottom: 56px;
}

.dw-page-header h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 72px;
    font-weight: 700;
    color: #f4f1ea;
    letter-spacing: -1px;
    margin-bottom: 16px;
    line-height: 1;
}

.dw-page-header p {
    font-size: 18px;
    color: rgba(244, 241, 234, 0.75);
    max-width: 600px;
    margin: 0 auto;
}

/* Sections (Listen page only) — spacing only; reveal animation handled by §4 global rules */
/* Scoped to .dw-container to prevent homepage override */
.dw-container .dw-section {
    margin-bottom: 70px;
}

.dw-container .dw-section-label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #A67C52;
    margin-bottom: 32px;
}

/* Mix Cards (Listen page — scoped to .dw-container) */
.dw-container .dw-mix-card {
    background: linear-gradient(135deg, rgba(20, 20, 24, 0.8) 0%, rgba(26, 26, 31, 0.6) 100%);
    border: 1px solid rgba(244, 241, 234, 0.1);
    border-radius: var(--dw-radius-lg);
    padding: 36px;
    margin-bottom: 28px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color 0.4s ease,
                background 0.4s ease,
                transform 0.4s var(--dw-ease),
                box-shadow 0.4s ease;
    position: relative;
}
/* Subtle gold top-border accent */
.dw-container .dw-mix-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 40px;
    right: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(166, 124, 82, 0.3), transparent);
    border-radius: 1px;
}

/* v2.6: Enhanced mix card hover — left accent + inner glow */
.dw-container .dw-mix-card:hover {
    border-color: rgba(166, 124, 82, 0.25);
    border-left: 3px solid var(--dw-accent);
    background: linear-gradient(135deg, rgba(20, 20, 24, 0.95) 0%, rgba(26, 26, 31, 0.8) 100%);
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3),
                0 0 40px rgba(166, 124, 82, 0.08),
                inset 0 0 30px rgba(166, 124, 82, 0.03);
}

.dw-mix-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 20px;
}

.dw-mix-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 700;
    color: #f4f1ea;
    flex: 1;
}

.dw-mix-meta {
    font-size: 13px;
    color: rgba(244, 241, 234, 0.75);
    font-style: italic;
}

.dw-mix-description {
    font-size: 16px;
    color: rgba(244, 241, 234, 0.88);
    margin-bottom: 20px;
    line-height: 1.7;
}

.dw-tag-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.dw-tag {
    display: inline-flex;
    align-items: center;
    background: rgba(166, 124, 82, 0.12);
    color: #d4a574;
    padding: 8px 16px;
    min-height: 44px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: 1px solid rgba(196, 154, 108, 0.25);
    transition: all 0.3s ease;
}
.dw-tag:hover {
    background: rgba(166, 124, 82, 0.2);
    border-color: rgba(196, 154, 108, 0.45);
    transform: translateY(-1px);
}

.dw-sc-embed {
    width: 100%;
    height: 166px !important;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
    border: none;
}
@media(max-width:768px){
  .dw-sc-embed{height:140px;margin-bottom:16px;}
}
@media(max-width:480px){
  .dw-sc-embed{height:120px;margin-bottom:12px;}
}

.dw-mix-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dw-accent);
    color: #f4f1ea !important;
    padding: 16px 32px;
    min-height: 44px;
    border-radius: var(--dw-radius);
    text-decoration: none !important;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.dw-mix-button::after { display: none !important; }
.dw-mix-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: none;
}

.dw-mix-button:hover {
    background: var(--dw-accent-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px var(--dw-gold-glow),
                0 0 60px rgba(166, 124, 82, 0.1);
    color: #f4f1ea !important;
}
.dw-mix-button:hover::before {
    animation: shimmer 0.8s ease forwards;
}

/* CTA Section */
.dw-cta-section {
    background: linear-gradient(135deg, rgba(166, 124, 82, 0.08) 0%, rgba(196, 154, 108, 0.05) 100%);
    border: 1px solid rgba(244, 241, 234, 0.14);
    border-radius: 12px;
    padding: 48px;
    text-align: center;
    margin-bottom: 56px;
}

.dw-cta-section h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    font-weight: 700;
    color: #f4f1ea;
    margin-bottom: 16px;
}

.dw-cta-section p {
    font-size: 16px;
    color: rgba(244, 241, 234, 0.88);
    margin-bottom: 32px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.dw-button-group,
.dw-btn-group {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.dw-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--dw-accent);
    color: #f4f1ea !important;
    padding: 16px 32px;
    min-height: 44px;
    border-radius: var(--dw-radius);
    text-decoration: none !important;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.dw-button::after { display: none !important; }
.dw-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: none;
}

.dw-button:hover {
    background: var(--dw-accent-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px var(--dw-gold-glow),
                0 0 60px rgba(166, 124, 82, 0.1);
    color: #f4f1ea !important;
}
.dw-button:hover::before {
    animation: shimmer 0.8s ease forwards;
}

.dw-button-secondary {
    background: transparent;
    border: 2px solid var(--dw-accent);
    color: #f4f1ea !important;
}
.dw-button-secondary::after { display: none !important; }

.dw-button-secondary:hover {
    background: rgba(166, 124, 82, 0.15);
    border-color: var(--dw-accent-light);
    color: var(--dw-accent-light) !important;
    box-shadow: 0 8px 28px var(--dw-gold-glow);
    transform: translateY(-2px);
}

/* Archive Section */
.dw-archive-section {
    border-top: 1px solid rgba(244, 241, 234, 0.14);
    padding-top: 60px;
}

.dw-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.dw-archive-card {
    background: linear-gradient(135deg, rgba(20, 20, 24, 0.6) 0%, rgba(26, 26, 31, 0.4) 100%);
    border: 1px solid rgba(244, 241, 234, 0.14);
    border-radius: 12px;
    padding: 24px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.dw-archive-card:hover {
    border-color: rgba(244, 241, 234, 0.22);
    transform: translateY(-4px);
}

.dw-archive-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 700;
    color: #f4f1ea;
    margin-bottom: 12px;
}

.dw-archive-description {
    font-size: 14px;
    color: rgba(244, 241, 234, 0.75);
    margin-bottom: 16px;
    line-height: 1.6;
}

.dw-archive-link {
    color: #c49a6c;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.dw-archive-link:hover {
    color: #d4a574;
}

.dw-archive-browse {
    text-align: center;
    padding: 40px 0;
    border-top: 1px solid rgba(244, 241, 234, 0.14);
}

.dw-archive-browse a {
    color: #c49a6c;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.dw-archive-browse a:hover {
    color: #d4a574;
}

/* Bottom CTA */
.dw-bottom-cta {
    background: linear-gradient(135deg, rgba(166, 124, 82, 0.1) 0%, rgba(196, 154, 108, 0.06) 100%);
    border: 2px solid rgba(244, 241, 234, 0.14);
    border-radius: 12px;
    padding: 48px 40px;
    text-align: center;
    margin-bottom: 70px;
}

.dw-bottom-cta h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 40px;
    font-weight: 700;
    color: #f4f1ea;
    margin-bottom: 20px;
}

.dw-bottom-cta p {
    font-size: 15px;
    color: rgba(244, 241, 234, 0.75);
    margin-bottom: 28px;
}

/* Footer — unified 3-column pattern (S153 audit: all pages now use #dw-lite-footer) */
#dw-lite-footer {
    border-top: 1px solid rgba(244, 241, 234, 0.14);
    background: rgba(15, 15, 17, 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 24px 40px 16px;
    margin-top: 40px;
    /* Full-bleed: break out of .entry-content max-width */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

#dw-lite-footer .dw-footer-content {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}

#dw-lite-footer .dw-footer-col h3 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
    color: #f4f1ea;
}

#dw-lite-footer .dw-footer-col a {
    display: block;
    font-size: 14px;
    color: rgba(244, 241, 234, 0.75);
    margin: 0 !important;
    padding: 3px 0 !important;
    line-height: 1.3 !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

#dw-lite-footer .dw-footer-col a:hover {
    color: #A67C52;
}
/* Kill WordPress wpautop <p> tags wrapping footer links */
#dw-lite-footer .dw-footer-col p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    font-size: 0 !important;
}

#dw-lite-footer .dw-social-links {
    display: flex;
    gap: 20px;
    margin-top: 8px;
}

#dw-lite-footer .dw-social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(166, 124, 82, 0.15);
    border: 1px solid rgba(166, 124, 82, 0.3);
    border-radius: 50%;
    font-size: 16px;
    margin-bottom: 0;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

#dw-lite-footer .dw-social-links a:hover {
    background: rgba(166, 124, 82, 0.3);
    border-color: #A67C52;
    text-decoration: none !important;
}

/* Kill the global a::after gold-gradient underline on all lite-footer links */
#dw-lite-footer a::after {
    display: none !important;
}

#dw-lite-footer .dw-footer-bottom {
    text-align: center;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid rgba(244, 241, 234, 0.14);
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

#dw-lite-footer .dw-footer-copyright {
    font-size: 13px;
    color: rgba(244, 241, 234, 0.65);
    margin-bottom: 0.35rem;
}

#dw-lite-footer .dw-footer-ecosystem {
    font-size: 13px;
    color: rgba(244, 241, 234, 0.55);
}

#dw-lite-footer .dw-footer-ecosystem a {
    display: inline;
    color: rgba(166, 124, 82, 0.8);
    font-size: 13px;
    margin-bottom: 0;
}

/* Listen page responsive */
@media (max-width: 768px) {
    .dw-container {
        padding: 0 24px;
    }

    .dw-page-header {
        padding: 60px 0 40px;
        margin-bottom: 60px;
    }

    .dw-page-header h1 {
        font-size: 48px;
    }

    .dw-page-header p {
        font-size: 16px;
    }

    .dw-mix-card {
        padding: 24px;
    }

    .dw-mix-title {
        font-size: 22px;
    }

    .dw-mix-header {
        flex-direction: column;
        gap:12px;margin-bottom:16px;
    }

    .dw-cta-section {
        padding: 36px 24px;
    }

    .dw-cta-section h3 {
        font-size: 26px;
    }

    .dw-button-group,
    .dw-btn-group {
        flex-direction: column;
    }

    .dw-button, .dw-mix-button,
    .dw-btn-group .dw-btn,
    .dw-btn-group .dw-btn-outline {
        width: 100%;
        text-align: center;
    }

    #dw-lite-footer .dw-footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #dw-lite-footer .dw-social-links {
        justify-content: center;
    }

    #dw-lite-footer .dw-footer-col a {
        display: inline;
        margin: 0 0.5rem;
    }

    .dw-bottom-cta {
        padding: 40px 24px;
    }

    .dw-bottom-cta h2 {
        font-size: 32px;
    }
}

/* Listen page — small phone refinements */
@media (max-width: 480px) {
    .dw-page-header {
        padding: 48px 0 32px;
        margin-bottom: 40px;
    }
    .dw-page-header h1 {
        font-size: 34px;
    }
    .dw-page-header p {
        font-size: 14px;
    }
    .dw-container {
        padding: 0 16px;
    }
    .dw-container .dw-section {
        margin-bottom: 48px;
    }
    .dw-mix-card {
        padding: 20px 16px;
    }
    .dw-mix-title {
        font-size: 19px;
    }
    .dw-cta-section {
        padding: 28px 16px;
    }
    .dw-cta-section h3 {
        font-size: 22px;
    }
    .dw-bottom-cta {
        padding: 32px 16px;
    }
    .dw-bottom-cta h2 {
        font-size: 26px;
    }
}

/* =====================================================
   §48. ABOUT PAGE CSS
   From dw-about-shell.html — hero, intro, stats,
   journey, process, CTA, footer with reveal animations
   ===================================================== */

/* HERO SECTION (About/Book sub-pages) — v2.6 fix: flex-direction column
   to prevent h1/p laying out side-by-side (§9 sets display:flex row for homepage).
   Sub-page heroes — photo background with text overlay (S154).
   Each page sets background-image inline; CSS handles layout + overlay. */
.entry-content > .dw-hero {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 120px 40px 80px !important;
    text-align: center;
    min-height: 55vh; min-height: 55dvh;
    overflow: hidden;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #0f0f11 !important;
    position: relative !important;
}
/* Dark scrim overlay for sub-page hero text readability */
.entry-content > .dw-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,15,17,0.4) 0%, rgba(15,15,17,0.65) 100%);
    z-index: 0;
}
.entry-content > .dw-hero > * {
    position: relative;
    z-index: 1;
}

.entry-content > .dw-hero h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 64px;
    font-weight: 700;
    color: #f4f1ea;
    margin-bottom: 16px;
    letter-spacing: -1px;
    line-height: 1.1;
    text-align: center;
    width: 100%;
}

.dw-hero-subtitle {
    font-size: 18px;
    color: rgba(244, 241, 234, 0.85);
    letter-spacing: 0.5px;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

/* INTRO SECTION */
.dw-intro-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 56px 40px !important;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.dw-intro-paragraph {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(244, 241, 234, 0.88);
    letter-spacing: 0.3px;
}

/* STATS GRID */
.dw-stats-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 56px 40px !important;
}

.dw-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.dw-stat-card {
    background: rgba(20, 20, 24, 0.65);
    border: 1px solid rgba(244, 241, 234, 0.14);
    border-radius: 12px;
    padding: 40px 32px;
    text-align: center;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: all 0.4s ease;
    opacity: 0;
    transform: translateY(20px);
}

.dw-stat-card.reveal {
    opacity: 1;
    transform: translateY(0);
}

.dw-stat-card:hover {
    border-color: rgba(244, 241, 234, 0.22);
    background: rgba(20, 20, 24, 0.75);
}

.dw-stat-number {
    font-family: 'Cormorant Garamond', serif;
    font-size: 56px;
    font-weight: 700;
    color: #A67C52;
    margin-bottom: 12px;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
}

.dw-stat-label {
    font-size: 13px;
    color: rgba(244, 241, 234, 0.75);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
}

/* THE JOURNEY SECTION */
.dw-journey-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 56px 40px !important;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.dw-journey-section h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 42px;
    font-weight: 700;
    color: #f4f1ea;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.dw-journey-paragraph {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(244, 241, 234, 0.88);
    letter-spacing: 0.3px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.dw-journey-paragraph.reveal {
    opacity: 1;
    transform: translateY(0);
}

/* THE PROCESS SECTION */
.dw-process-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 56px 40px !important;
}

.dw-process-section h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 42px;
    font-weight: 700;
    color: #f4f1ea;
    margin-bottom: 60px;
    text-align: center;
    letter-spacing: -0.5px;
}

.dw-process-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 32px;
}

.dw-process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.dw-process-step.reveal {
    opacity: 1;
    transform: translateY(0);
}

.dw-process-number {
    width: 60px;
    height: 60px;
    background: rgba(166, 124, 82, 0.15);
    border: 2px solid #A67C52;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 700;
    color: #A67C52;
    margin-bottom: 24px;
}

.dw-process-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 600;
    color: #f4f1ea;
    margin-bottom: 12px;
    letter-spacing: -0.3px;
}

.dw-process-desc {
    font-size: 14px;
    color: rgba(244, 241, 234, 0.8);
    line-height: 1.7;
    letter-spacing: 0.3px;
}

/* CTA SECTION (About version) */
.dw-cta-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 56px 40px !important;
    text-align: center;
}

.dw-cta-section h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 42px;
    font-weight: 700;
    color: #f4f1ea;
    margin-bottom: 32px;
    letter-spacing: -0.5px;
}

.dw-cta-button,
a.dw-cta-button,
a.dw-cta-button:visited {
    display: inline-block;
    background: #A67C52 !important;
    color: #f4f1ea !important;
    padding: 16px 48px;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    border: 2px solid #A67C52;
}

.dw-cta-button:hover,
a.dw-cta-button:hover {
    background: #c49a6c !important;
    color: #f4f1ea !important;
    border-color: #c49a6c;
}

/* FOOTER (About version) — scoped to .dw-container to not override homepage footer */
.dw-container ~ .dw-footer,
.dw-container + .dw-footer {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 40px;
    border-top: 1px solid rgba(244, 241, 234, 0.14);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dw-container ~ .dw-footer .dw-footer-links,
.dw-container + .dw-footer .dw-footer-links {
    display: flex;
    gap: 28px;
}

.dw-footer-link {
    text-decoration: none;
    color: rgba(244, 241, 234, 0.75);
    font-size: 13px;
    transition: color 0.3s ease;
}

.dw-footer-link:hover {
    color: #A67C52;
}

.dw-footer-copyright {
    font-size: 12px;
    color: rgba(244, 241, 234, 0.65);
    letter-spacing: 0.3px;
}

.dw-footer-copyright a {
    color: #A67C52;
    text-decoration: none;
    transition: color 0.3s ease;
}

.dw-footer-copyright a:hover {
    color: #c49a6c;
}

/* About page responsive */
@media (max-width: 768px) {
    .dw-hero h1 {
        font-size: 42px;
    }

    .dw-hero-subtitle {
        font-size: 16px;
    }

    nav {
        gap: 16px;
    }

    nav a {
        font-size: 12px;
    }

    .dw-stats-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .dw-process-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .dw-container ~ .dw-footer,
    .dw-container + .dw-footer {
        flex-direction: column;
        gap: 28px;
        text-align: center;
    }

    .dw-container ~ .dw-footer .dw-footer-links,
    .dw-container + .dw-footer .dw-footer-links {
        flex-direction: column;
        gap: 12px;
    }

    .dw-intro-section,
    .dw-journey-section {
        padding: 40px 24px !important;
    }

    .dw-stats-section,
    .dw-process-section {
        padding: 40px 24px !important;
    }

    .dw-cta-section {
        padding: 40px 24px !important;
    }

    .dw-journey-section h2,
    .dw-process-section h2,
    .dw-cta-section h2 {
        font-size: 32px;
    }

    .dw-stat-number {
        font-size: 44px;
    }
}

/* About page — small phone refinements */
@media (max-width: 480px) {
    .dw-hero h1 {
        font-size: 30px;
    }
    .dw-hero-subtitle {
        font-size: 14px;
    }
    .dw-stat-number {
        font-size: 34px;
    }
    .dw-stat-label {
        font-size: 12px;
    }
    .dw-journey-section h2,
    .dw-process-section h2,
    .dw-cta-section h2 {
        font-size: 26px;
    }
    .dw-process-step h3 {
        font-size: 16px;
    }
    .dw-intro-section,
    .dw-journey-section,
    .dw-stats-section,
    .dw-process-section,
    .dw-cta-section {
        padding: 32px 16px !important;
    }
}

/* =====================================================
   §49. BOOK PAGE CSS
   From dw-book-shell.html — hero with background,
   intro, pricing, details, testimonial, form, trust,
   process steps, availability, footer, reveal animations
   ===================================================== */

/* Hero Section (Book version)
   S134: Image has logos + text baked in — must show the full frame.
   aspect-ratio: 3/2 matches the 1536×1024 banner so cover == contain.
   max-height caps it on ultra-wide screens so it doesn't dominate the fold.
   min-height: unset overrides the 90vh set in the earlier .dw-hero block.
   S150: Scoped to body:not(.home) so this doesn't cascade onto the
   homepage hero (WordPress adds 'home' class to the front-page body). */
/* Sub-page hero — photo background with text overlay (S154).
   background-image set inline per page; CSS handles layout + sizing + overlay.
   min-height: 50vh gives the hero visible height. background-size: cover fills it. */
body:not(.home) .dw-hero {
    position: relative !important;
    min-height: 65vh !important; min-height: 65dvh !important;
    max-height: 85vh; max-height: 85dvh;
    background-color: #0f0f11 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    color: #f4f1ea;
    margin-bottom: 0 !important;
    overflow: hidden;
    /* Full-bleed: break out of .entry-content max-width */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 100px 40px 80px !important;
}
/* Dark scrim for sub-page hero text readability */
body:not(.home) .dw-hero::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(15,15,17,0.35) 0%, rgba(15,15,17,0.6) 100%) !important;
    z-index: 0 !important;
}
body:not(.home) .dw-hero > * {
    position: relative !important;
    z-index: 1 !important;
}

.dw-hero-content h1 {
    font-size: 58px;
    font-weight: 600;
    margin-bottom: 16px;
    letter-spacing: -1px;
}

.dw-hero-content p {
    font-size: 18px;
    color: rgba(244, 241, 234, 0.88);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Main Container (Book) — .dw-container already defined in §47 Listen page */

/* Section Spacing (Book/About) — scoped to .dw-container to not affect homepage */

.dw-container .dw-section:last-child {
    margin-bottom: 60px;
}

/* =============================================
   §36. BOOK PAGE — REBUILT S167
   ============================================= */

/* Book Intro */
.dw-book-intro {
    max-width: 700px;
    margin: 0 auto 64px;
    text-align: center;
}
.dw-book-intro-divider {
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #A67C52, transparent);
    margin: 0 auto 28px;
}
.dw-book-intro h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 36px;
    font-weight: 600;
    color: #f4f1ea;
    margin-bottom: 16px;
}
.dw-book-intro p {
    font-size: 15px;
    color: rgba(244, 241, 234, 0.8);
    line-height: 1.8;
}

/* Tier Cards */
.dw-tiers {
    max-width: 1000px;
    margin: 0 auto 72px;
    text-align: center;
}
.dw-tiers h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 36px;
    font-weight: 600;
    color: #f4f1ea;
    margin-bottom: 12px;
}
.dw-tiers-sub {
    font-size: 14px;
    color: rgba(244, 241, 234, 0.65);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto 40px;
}
.dw-tier-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.dw-tier-card {
    position: relative;
    background: rgba(20, 20, 24, 0.65);
    border: 1px solid rgba(166, 124, 82, 0.15);
    border-radius: 10px;
    padding: 32px 24px 28px;
    text-align: left;
    display: flex;
    flex-direction: column;
    transition: all 0.35s ease;
}
.dw-tier-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(166,124,82,0.3), rgba(166,124,82,0.6));
    border-radius: 10px 10px 0 0;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.dw-tier-card:hover {
    border-color: rgba(166, 124, 82, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(166, 124, 82, 0.12);
}
.dw-tier-card:hover::before { opacity: 1; }

/* Featured tier */
.dw-tier-featured {
    border-color: rgba(166, 124, 82, 0.4);
    background: linear-gradient(135deg, rgba(166,124,82,0.08), rgba(20,20,24,0.65));
}
.dw-tier-featured::before { opacity: 1; background: #A67C52; }
.dw-tier-badge {
    position: absolute;
    top: -11px; left: 24px;
    background: #A67C52;
    color: #0f0f11;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 3px;
}

.dw-tier-label {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(166, 124, 82, 0.6);
    margin-bottom: 8px;
}
.dw-tier-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: #f4f1ea;
    margin-bottom: 16px;
}
.dw-tier-price {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #c49a6c;
    margin-bottom: 4px;
}
.dw-tier-duration {
    font-size: 13px;
    color: rgba(244, 241, 234, 0.55);
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(244, 241, 234, 0.08);
}
.dw-tier-desc {
    font-size: 13px;
    color: rgba(244, 241, 234, 0.72);
    line-height: 1.7;
    flex-grow: 1;
    margin-bottom: 20px;
}
.dw-tier-cta {
    display: block;
    text-align: center;
    padding: 10px 0;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #A67C52;
    border: 1px solid rgba(166, 124, 82, 0.3);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.dw-tier-cta:hover {
    background: #A67C52;
    color: #0f0f11;
    border-color: #A67C52;
}

/* Book Details Grid */
.dw-book-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-bottom: 72px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.dw-book-details-col h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: #f4f1ea;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(166, 124, 82, 0.15);
}
.dw-detail-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.dw-detail-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(244, 241, 234, 0.06);
    font-size: 14px;
    color: rgba(244, 241, 234, 0.82);
}
.dw-detail-item:last-child { border-bottom: none; }
.dw-detail-icon {
    flex-shrink: 0;
    color: #A67C52;
    opacity: 0.7;
}

/* Testimonials — Horizontal scroll */
.dw-book-testimonials {
    margin-bottom: 72px;
}
.dw-book-testimonials h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 36px;
    font-weight: 600;
    color: #f4f1ea;
    text-align: center;
    margin-bottom: 36px;
}
.dw-testimonial-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(166,124,82,0.4) transparent;
}
.dw-testimonial-track::-webkit-scrollbar { height: 4px; }
.dw-testimonial-track::-webkit-scrollbar-track { background: transparent; }
.dw-testimonial-track::-webkit-scrollbar-thumb { background: rgba(166,124,82,0.4); border-radius: 4px; }
.dw-test-card {
    flex: 0 0 clamp(300px, 75%, 420px);
    scroll-snap-align: center;
    background: rgba(20, 20, 24, 0.65);
    border: 1px solid rgba(166, 124, 82, 0.12);
    border-radius: 10px;
    padding: 32px 28px;
    position: relative;
}
.dw-test-quote {
    color: rgba(166, 124, 82, 0.3);
    margin-bottom: 16px;
    display: block;
}
.dw-test-card p {
    font-size: 15px;
    color: rgba(244, 241, 234, 0.85);
    line-height: 1.75;
    font-style: italic;
    margin-bottom: 20px;
}
.dw-test-author {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #c49a6c;
    margin-bottom: 2px;
}
.dw-test-role {
    font-size: 12px;
    color: rgba(244, 241, 234, 0.5);
}

/* Process Timeline — Connected 3-step */
.dw-book-process {
    max-width: 900px;
    margin: 0 auto 72px;
}
.dw-book-process h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 36px;
    font-weight: 600;
    color: #f4f1ea;
    text-align: center;
    margin-bottom: 48px;
}
.dw-process-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    position: relative;
}
.dw-process-step {
    text-align: center;
    position: relative;
    padding: 0 20px;
}
.dw-process-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: rgba(166, 124, 82, 0.1);
    border: 2px solid #A67C52;
    border-radius: 50%;
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight: 700;
    color: #c49a6c;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    transition: all 0.35s ease;
}
.dw-process-step:hover .dw-process-num {
    background: #A67C52;
    color: #0f0f11;
    box-shadow: 0 0 24px rgba(166, 124, 82, 0.35);
}
/* Gold connector line between step 1→2 and 2→3 */
.dw-process-connector {
    position: absolute;
    top: 26px;
    left: calc(50% + 30px);
    right: calc(-50% + 30px);
    height: 2px;
    background: linear-gradient(90deg, #A67C52, rgba(166,124,82,0.2));
    z-index: 1;
}
.dw-process-step:last-child .dw-process-connector,
.dw-process-num-end { display: none; }
.dw-process-step h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    color: #f4f1ea;
    margin-bottom: 10px;
}
.dw-process-step p {
    font-size: 13px;
    color: rgba(244, 241, 234, 0.7);
    line-height: 1.7;
}

/* Form + Trust Section */
.dw-book-form {
    background: rgba(20, 20, 24, 0.65);
    border: 1px solid rgba(166, 124, 82, 0.15);
    border-radius: 12px;
    padding: 56px 48px;
    margin-bottom: 48px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.dw-book-form-header {
    text-align: center;
    margin-bottom: 32px;
}
.dw-form-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #A67C52;
    margin-bottom: 12px;
}
.dw-book-form h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 36px;
    font-weight: 600;
    color: #f4f1ea;
}
.dw-form-wrapper {
    margin-top: 32px;
}
.dw-book-trust {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid rgba(244, 241, 234, 0.06);
    flex-wrap: wrap;
}
.dw-book-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(244, 241, 234, 0.7);
}
.dw-book-trust-item svg {
    color: #A67C52;
    flex-shrink: 0;
}

/* Availability Banner */
.dw-book-availability {
    max-width: 700px;
    margin: 0 auto 64px;
    text-align: center;
}
.dw-avail-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 32px;
    background: rgba(166, 124, 82, 0.06);
    border: 1px solid rgba(166, 124, 82, 0.15);
    border-radius: 8px;
}
.dw-avail-dot {
    width: 8px;
    height: 8px;
    background: #A67C52;
    border-radius: 50%;
    flex-shrink: 0;
    animation: dw-avail-pulse 2s ease-in-out infinite;
}
@keyframes dw-avail-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.dw-avail-inner p {
    font-size: 14px;
    color: rgba(244, 241, 234, 0.8);
    line-height: 1.6;
    margin: 0;
}

/* ===== Book Page Responsive ===== */
@media (max-width: 1024px) {
    .dw-tier-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .dw-tier-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    .dw-book-details {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .dw-process-steps {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .dw-process-connector { display: none; }
    .dw-book-form {
        padding: 40px 28px;
    }
    .dw-book-form h2 { font-size: 28px; }
    .dw-book-trust {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .dw-book-intro h2,
    .dw-tiers h2,
    .dw-book-testimonials h2,
    .dw-book-process h2 {
        font-size: 28px;
    }
}
@media (max-width: 480px) {
    .dw-tier-card { padding: 28px 20px 24px; }
    .dw-tier-badge { left: 20px; }
    .dw-test-card { flex: 0 0 88%; padding: 24px 20px; }
    .dw-book-form { padding: 32px 20px; }
    .dw-avail-inner { flex-direction: column; gap: 8px; padding: 16px 20px; }
}

/* Footer (Book version) — scoped with .dw-container sibling selector */
.dw-container ~ footer.dw-footer {
    background: rgba(20, 20, 24, 0.95);
    border-top: 1px solid rgba(244, 241, 234, 0.14);
    padding: 60px 40px;
    margin-top: 100px;
}

.dw-container ~ footer.dw-footer .dw-footer-content {
    max-width: 1100px;
    margin: 0 auto;
}

.dw-container ~ footer.dw-footer .dw-footer-links {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
}

.dw-container ~ footer.dw-footer .dw-footer-links a {
    font-size: 14px;
    color: rgba(244, 241, 234, 0.75);
    transition: color 0.3s ease;
}

.dw-container ~ footer.dw-footer .dw-footer-links a:hover {
    color: #c49a6c;
}

.dw-container ~ footer.dw-footer .dw-footer-copyright {
    text-align: center;
    font-size: 13px;
    color: rgba(244, 241, 234, 0.55);
    border-top: 1px solid rgba(244, 241, 234, 0.14);
    padding-top: 32px;
}

.dw-container ~ footer.dw-footer .dw-footer-copyright a {
    color: rgba(244, 241, 234, 0.65);
}

.dw-container ~ footer.dw-footer .dw-footer-copyright a:hover {
    color: #c49a6c;
}

/* Scroll Reveal Animation (Book) */
.dw-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.dw-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Book page responsive */
@media (max-width: 768px) {
    .dw-container {
        padding: 0 20px;
    }

    .dw-hero {
        /* S134: let aspect-ratio drive height on mobile too; remove fixed height */
        aspect-ratio: 3 / 2;
        max-height: none;
        height: auto;
        margin-bottom: 40px;
    }

    .dw-hero-content h1 {
        font-size: 40px;
    }

    .dw-hero-content p {
        font-size: 16px;
    }

    .dw-container .dw-section {
        margin-bottom: 60px;
    }

}

/* §37. EXPERIENCE TIERS — REMOVED S167: replaced by §36 Book Page rebuild */
/* Old .dw-tiers-section/.dw-tiers-grid/.dw-process-timeline classes deprecated */

/* Legacy .dw-btn-small kept for Listen page SoundCloud links */


/* =====================================================
   §50. HOMEPAGE SHELL OVERRIDES  (body.home scope)
   S150: WordPress adds 'home' class to the front page.
   These rules live AFTER all other sections so they win
   by source order when specificity is equal.
   ===================================================== */

/* --- Hero: full-bleed background image ---
   Must restore §9's full-bleed escape (100vw + calc margins)
   because the About/Book rule at line ~3404 (.entry-content > .dw-hero)
   kills them with max-width:1100px + margin:0 auto. */
body.home .entry-content > .dw-hero {
    /* Triptych hero — 3-panel expanding layout (S154) */
    margin-bottom: 0 !important;
    /* Full-bleed: break out of .entry-content max-width */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    /* No single background — panels handle their own images */
    background-image: none !important;
    background-color: #0f0f11 !important;
    /* Block container (NOT flex column) — triptych handles its own flex */
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* Hero gradient overlay — disabled for triptych (panels have their own scrims) */
body.home .dw-hero::before {
    display: none !important;
}

/* Triptych container — horizontal flex layout */
body.home .dw-triptych {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    height: 85vh !important; height: 85dvh !important;
    min-height: 520px !important;
    overflow: hidden !important;
}

/* Triptych panels */
body.home .dw-tri-panel {
    flex: 1 1 33.333% !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer;
    transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Panel backgrounds */
body.home .dw-tri-panel .dw-tri-bg {
    position: absolute !important;
    inset: -20px !important;
    background-size: cover !important;
    background-position: center !important;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.6s ease;
    filter: brightness(0.55);
}

/* Panel dividers */
body.home .dw-tri-panel + .dw-tri-panel {
    border-left: 1px solid rgba(244, 241, 234, 0.12);
}

/* Logo overlay per panel */
body.home .dw-tri-logo {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 200px !important;
    height: 200px !important;
    z-index: 3 !important;
    opacity: 0.88;
    filter: drop-shadow(0 4px 25px rgba(0,0,0,0.6));
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Dark scrim on each panel */
body.home .dw-tri-scrim {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2;
    background: linear-gradient(180deg, rgba(15,15,17,0.15) 0%, rgba(15,15,17,0.4) 100%);
    transition: background 0.5s ease;
}

/* Hover: expand hovered, shrink others */
body.home .dw-triptych:hover .dw-tri-panel {
    flex: 0.5 1 15% !important;
}
body.home .dw-triptych:hover .dw-tri-panel:hover {
    flex: 2 1 70% !important;
}

/* Hover: reveal image, fade logo */
body.home .dw-tri-panel:hover .dw-tri-bg {
    filter: brightness(0.75);
    transform: scale(1.04);
}
body.home .dw-tri-panel:hover .dw-tri-logo {
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(0.85) !important;
}
body.home .dw-tri-panel:hover .dw-tri-scrim {
    background: linear-gradient(180deg, rgba(15,15,17,0.05) 0%, rgba(15,15,17,0.25) 100%);
}

/* Non-hovered panels darken further */
body.home .dw-triptych:hover .dw-tri-panel:not(:hover) .dw-tri-bg {
    filter: brightness(0.35);
}
body.home .dw-triptych:hover .dw-tri-panel:not(:hover) .dw-tri-logo {
    opacity: 0.6;
}

/* ===== Touch-activated triptych (mirrors hover for mobile) ===== */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover expand on touch — use .dw-tri-active instead */
    body.home .dw-triptych:hover .dw-tri-panel { flex: 1 1 33.333% !important; }
    body.home .dw-triptych:hover .dw-tri-panel:hover { flex: 1 1 33.333% !important; }
    body.home .dw-tri-panel:hover .dw-tri-bg { filter: brightness(0.55); transform: none; }
    body.home .dw-tri-panel:hover .dw-tri-logo { opacity: 1 !important; transform: translate(-50%, -50%) !important; }
    body.home .dw-triptych:hover .dw-tri-panel:not(:hover) .dw-tri-bg { filter: brightness(0.55); }
    body.home .dw-triptych:hover .dw-tri-panel:not(:hover) .dw-tri-logo { opacity: 1; }
    /* Active state — JS toggles .dw-tri-active on tap */
    body.home .dw-tri-panel.dw-tri-active { flex: 2 1 70% !important; }
    body.home .dw-tri-panel.dw-tri-active .dw-tri-bg { filter: brightness(0.75); transform: scale(1.04); }
    body.home .dw-tri-panel.dw-tri-active .dw-tri-logo { opacity: 0 !important; transform: translate(-50%, -50%) scale(0.85) !important; }
    body.home .dw-tri-panel.dw-tri-active ~ .dw-tri-panel .dw-tri-bg,
    body.home .dw-tri-panel:not(.dw-tri-active) .dw-tri-bg { filter: brightness(0.35); }
    body.home .dw-tri-panel:not(.dw-tri-active) .dw-tri-logo { opacity: 0.6; }
    /* Reset when no panel is active */
    body.home .dw-triptych:not(:has(.dw-tri-active)) .dw-tri-panel .dw-tri-bg { filter: brightness(0.55); }
    body.home .dw-triptych:not(:has(.dw-tri-active)) .dw-tri-panel .dw-tri-logo { opacity: 1; }
}

/* Kill WP-injected stray <p> tags before the hero (S154) */
body.home .entry-content > p:first-child,
body.home #dw-lite-header + p,
body.home .entry-content > style + p {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
}

/* Hero overlay text — positioned absolutely over bottom of triptych */
body.home .dw-hero-overlay-text {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 5 !important;
    text-align: center !important;
    padding: 0 20px 50px !important;
    max-width: none !important;
    width: 100% !important;
    background: linear-gradient(transparent 0%, rgba(15,15,17,0.85) 70%) !important;
    pointer-events: none;
}
body.home .dw-hero-overlay-text .dw-btn {
    pointer-events: auto;
}
body.home .dw-hero-overlay-text h1 {
    font-size: 3.2rem !important;
    font-weight: 300 !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    margin-bottom: 0.6rem !important;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
    body.home .dw-triptych {
        flex-direction: column !important;
        height: auto !important;
        min-height: unset !important;
    }
    body.home .dw-tri-panel {
        flex: none !important;
        height: 35vh !important;
        min-height: 200px !important;
    }
    body.home .dw-tri-logo {
        width: 100px !important;
        height: 100px !important;
    }
    body.home .dw-hero-overlay-text {
        position: relative !important;
        background: #0f0f11 !important;
        padding: 30px 20px 35px !important;
    }
}

/* Old single-image hero h1 — superseded by triptych overlay-text rule (S154) */
body.home .dw-hero h1 {
    font-size: 3.2rem;
    margin-bottom: 0.6rem;
    color: #f4f1ea;
}

body.home .dw-hero-tagline {
    font-size: 1.25rem;
    color: rgba(244, 241, 234, 0.88);
    margin-bottom: 2.5rem;
    font-weight: 300;
    letter-spacing: 0.5px;
}

/* --- Sections: full-bleed, break out of .entry-content like hero --- */
body.home .entry-content > .dw-section {
    padding: 100px 40px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* --- Pillars: kill legacy .dw-pillars grid on section ---
   Sitewide §10 sets display:grid + repeat(3,1fr) on .dw-pillars,
   which crushes the single .dw-container child to 1/3 width. */
body.home .dw-pillars {
    display: block !important;
    grid-template-columns: none !important;
    background-color: #0f0f11 !important;
}

/* Pillars grid — the INNER grid that should be 3-col */
body.home .dw-pillars-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

/* Hide WordPress wpautop <p> tags inside pillars grid —
   wpautop inserts empty <p> between the three .dw-pillar-head divs,
   breaking the 3-col layout (7 children instead of 3). */
body.home .dw-pillars-grid > p,
body.home .dw-mix-grid > p,
body.home .dw-testimonials-grid > p {
    display: none !important;
}

/* Pillar cards — .dw-pillar-head is the canonical class (§10 + §38a).
   Layout/sizing ensured here; cosmetics (border, bg, radius) come from §10. */
body.home .dw-pillar-head {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    max-height: none !important;
    opacity: 1 !important;
}

/* Gold center-to-corners hover glow — enhances the subtle §10 ::after
   with a visible radial gold that scales from center outward on hover. */
body.home .dw-pillar-head::after {
    inset: -40px !important;
    background: radial-gradient(circle, rgba(166,124,82,0.22) 0%, rgba(166,124,82,0.08) 45%, transparent 75%) !important;
    transform: scale(0.2);
    transition: opacity 0.6s ease, transform 0.6s ease !important;
}
body.home .dw-pillar-head:hover::after {
    opacity: 1 !important;
    transform: scale(1.3);
}

/* Waveform bars — bigger on homepage, HOVER-GATED (animate only on card hover).
   WordPress wpautop inserts <br> between span lines — hide them. */
body.home .dw-pillar-waveform {
    opacity: 0.6 !important;
    height: 32px !important;
    justify-content: center !important;
}
body.home .dw-pillar-waveform br {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    flex: none !important;
}
body.home .dw-pillar-waveform span {
    width: 3px !important;
    min-height: 2px !important;
}
/* Static resting heights — subtle bell-curve (S154 fix: reduced from 5-20px to 2-8px) */
body.home .dw-pillar-waveform span:nth-child(1)  { height: 2px !important; }
body.home .dw-pillar-waveform span:nth-child(2)  { height: 3px !important; }
body.home .dw-pillar-waveform span:nth-child(3)  { height: 5px !important; }
body.home .dw-pillar-waveform span:nth-child(4)  { height: 7px !important; }
body.home .dw-pillar-waveform span:nth-child(5)  { height: 8px !important; }
body.home .dw-pillar-waveform span:nth-child(6)  { height: 8px !important; }
body.home .dw-pillar-waveform span:nth-child(7)  { height: 7px !important; }
body.home .dw-pillar-waveform span:nth-child(8)  { height: 5px !important; }
body.home .dw-pillar-waveform span:nth-child(9)  { height: 3px !important; }
body.home .dw-pillar-waveform span:nth-child(10) { height: 2px !important; }
/* Kill animation in base state — must match [data-pillar] specificity
   to beat the old §10 shorthand rules (0-4-1 specificity). */
body.home [data-pillar="atmosphere"] .dw-pillar-waveform span,
body.home [data-pillar="movement"] .dw-pillar-waveform span,
body.home [data-pillar="release"] .dw-pillar-waveform span {
    animation-name: none !important;
}

/* --- Atmosphere: hover activates slow sine wave rolling L→R --- */
body.home [data-pillar="atmosphere"]:hover .dw-pillar-waveform span {
    animation-name: waveAtmosphere !important;
    animation-duration: 3s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
}
body.home [data-pillar="atmosphere"]:hover .dw-pillar-waveform span:nth-child(1)  { animation-delay: 0s !important; }
body.home [data-pillar="atmosphere"]:hover .dw-pillar-waveform span:nth-child(2)  { animation-delay: 0.25s !important; }
body.home [data-pillar="atmosphere"]:hover .dw-pillar-waveform span:nth-child(3)  { animation-delay: 0.5s !important; }
body.home [data-pillar="atmosphere"]:hover .dw-pillar-waveform span:nth-child(4)  { animation-delay: 0.75s !important; }
body.home [data-pillar="atmosphere"]:hover .dw-pillar-waveform span:nth-child(5)  { animation-delay: 1s !important; }
body.home [data-pillar="atmosphere"]:hover .dw-pillar-waveform span:nth-child(6)  { animation-delay: 1.25s !important; }
body.home [data-pillar="atmosphere"]:hover .dw-pillar-waveform span:nth-child(7)  { animation-delay: 1.5s !important; }
body.home [data-pillar="atmosphere"]:hover .dw-pillar-waveform span:nth-child(8)  { animation-delay: 1.75s !important; }
body.home [data-pillar="atmosphere"]:hover .dw-pillar-waveform span:nth-child(9)  { animation-delay: 2s !important; }
body.home [data-pillar="atmosphere"]:hover .dw-pillar-waveform span:nth-child(10) { animation-delay: 2.25s !important; }

/* --- Movement: hover activates fast rhythmic percussive peaks --- */
body.home [data-pillar="movement"]:hover .dw-pillar-waveform span {
    animation-name: waveMovement !important;
    animation-duration: 1.2s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
}
body.home [data-pillar="movement"]:hover .dw-pillar-waveform span:nth-child(1)  { animation-delay: 0s !important; }
body.home [data-pillar="movement"]:hover .dw-pillar-waveform span:nth-child(2)  { animation-delay: 0.1s !important; }
body.home [data-pillar="movement"]:hover .dw-pillar-waveform span:nth-child(3)  { animation-delay: 0.2s !important; }
body.home [data-pillar="movement"]:hover .dw-pillar-waveform span:nth-child(4)  { animation-delay: 0.3s !important; }
body.home [data-pillar="movement"]:hover .dw-pillar-waveform span:nth-child(5)  { animation-delay: 0.1s !important; }
body.home [data-pillar="movement"]:hover .dw-pillar-waveform span:nth-child(6)  { animation-delay: 0s !important; }
body.home [data-pillar="movement"]:hover .dw-pillar-waveform span:nth-child(7)  { animation-delay: 0.15s !important; }
body.home [data-pillar="movement"]:hover .dw-pillar-waveform span:nth-child(8)  { animation-delay: 0.25s !important; }
body.home [data-pillar="movement"]:hover .dw-pillar-waveform span:nth-child(9)  { animation-delay: 0.35s !important; }
body.home [data-pillar="movement"]:hover .dw-pillar-waveform span:nth-child(10) { animation-delay: 0.05s !important; }

/* --- Release: hover activates symmetric center-outward burst ---
   Spans 6+7 are center (0s), radiating outward with wider spread (0.12s per step). */
body.home [data-pillar="release"]:hover .dw-pillar-waveform span {
    animation-name: waveRelease !important;
    animation-duration: 2s !important;
    animation-timing-function: ease-out !important;
    animation-iteration-count: infinite !important;
}
body.home [data-pillar="release"]:hover .dw-pillar-waveform span:nth-child(1)  { animation-delay: 0.60s !important; }
body.home [data-pillar="release"]:hover .dw-pillar-waveform span:nth-child(2)  { animation-delay: 0.48s !important; }
body.home [data-pillar="release"]:hover .dw-pillar-waveform span:nth-child(3)  { animation-delay: 0.36s !important; }
body.home [data-pillar="release"]:hover .dw-pillar-waveform span:nth-child(4)  { animation-delay: 0.24s !important; }
body.home [data-pillar="release"]:hover .dw-pillar-waveform span:nth-child(5)  { animation-delay: 0.12s !important; }
body.home [data-pillar="release"]:hover .dw-pillar-waveform span:nth-child(6)  { animation-delay: 0s !important; }
body.home [data-pillar="release"]:hover .dw-pillar-waveform span:nth-child(7)  { animation-delay: 0s !important; }
body.home [data-pillar="release"]:hover .dw-pillar-waveform span:nth-child(8)  { animation-delay: 0.12s !important; }
body.home [data-pillar="release"]:hover .dw-pillar-waveform span:nth-child(9)  { animation-delay: 0.24s !important; }
body.home [data-pillar="release"]:hover .dw-pillar-waveform span:nth-child(10) { animation-delay: 0.36s !important; }

/* --- Listen preview grid --- */
body.home .dw-mix-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    max-width: 1140px !important;
    margin: 0 auto 3rem !important;
    width: 100% !important;
}

/* --- Testimonials grid --- */
body.home .dw-testimonials-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    width: 100% !important;
}
/* Kill outer duplicate quote mark on testimonial wrapper (S154).
   The blockquote INSIDE .dw-testimonial already has its own ::before quote.
   Suppress the one from the .dw-testimonial wrapper to avoid double quotes. */
.dw-testimonials-grid .dw-testimonial::before {
    display: none !important;
}

/* --- Container width inside homepage sections --- */
body.home .dw-container {
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    width: 100% !important;
}

/* --- Footer: 3-col layout, no top margin --- */
body.home .entry-content > #dw-lite-footer {
    max-width: 1140px !important;
    margin: 0 auto !important;
    margin-top: 0 !important;
    padding: 35px 40px 25px !important;
    border-top: 1px solid rgba(244, 241, 234, 0.14) !important;
    background-color: #0f0f11 !important;
    backdrop-filter: none !important;
}

body.home .dw-footer-content {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    margin-bottom: 20px !important;
    max-width: none !important;
    align-items: start !important;
}

/* --- Homepage responsive --- */
@media (max-width: 768px) {
    body.home .entry-content > .dw-hero {
        min-height: 60vh !important;
    }

    body.home .dw-hero h1 {
        font-size: 2.5rem;
    }

    body.home .entry-content > .dw-section {
        padding: 32px 20px !important;
    }

    body.home .dw-pillars-grid,
    body.home .dw-mix-grid,
    body.home .dw-testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    body.home .dw-pillar-head {
        padding: 1.5rem 1rem !important;
    }

    body.home .dw-footer-content {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
}

/* =====================================================
   §51. S153 VISUAL AUDIT FIXES
   ===================================================== */

/* --- Complianz "Opt-out preferences" nav item ---
   Complianz injects a menu item into the Kadence primary nav.
   Hide it — cookie opt-out is accessible via the Complianz banner/widget. */
.menu-item a[href*="cmplz"],
.menu-item a[href*="opt-out"],
.menu-item a[title="Opt-out preferences"],
.cmplz-opt-out-reference {
    display: none !important;
}

/* --- Homepage section spacing ---
   100px padding was too much between sections. Tightened to 40px
   for a cohesive, flowing scroll experience. */
body.home .entry-content > .dw-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

/* --- Sub-page hero: kill any background image bleed ---
   Safety net: ensures the 3-panel banner only appears on homepage.
   The real fix is removing the Kadence cover block from About/Book
   pages in the WP editor, but this CSS hides it if still present. */
/* S154: Removed background-image:none rule that was killing sub-page photo heroes */

/* Hide any Kadence cover block on sub-pages (if present as a Gutenberg block).
   Also hide any stray Kadence hero/title elements above the shell content. */
body:not(.home) .wp-block-cover,
body:not(.home) .wp-block-kadence-rowlayout:first-child,
body:not(.home) .entry-content > .wp-block-cover,
body:not(.home) .entry-content > .wp-block-kadence-rowlayout,
body:not(.home) .hero-section,
body:not(.home) .entry-content > p:first-child:empty,
body:not(.home) .entry-content > p:first-child br {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
/* Collapse ALL stray <p> tags before the hero on sub-pages.
   WordPress wraps HTML comments in <p> tags — these create gaps.
   Target any <p> that is an early child of .entry-content. */
body:not(.home) .entry-content > p {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
}
/* Restore <p> tags that are INSIDE our shell sections (not direct children of entry-content) */
body:not(.home) .entry-content .dw-hero p,
body:not(.home) .entry-content .dw-container p,
body:not(.home) .entry-content .dw-section p,
body:not(.home) .entry-content #dw-lite-footer p {
    display: block !important;
    height: auto !important;
    line-height: 1.85 !important;
}

/* ===== TOUCH & FOCUS FEEDBACK ===== */
a.dw-btn,.dw-btn,.dw-btn-small,.dw-mix-card,.dw-pillar-head,.dw-venue-chip,body.home .dw-tri-panel{touch-action:manipulation;}
a.dw-btn:active,.dw-btn:active,.dw-btn-small:active,.dw-mix-card:active,.dw-mix-button:active,.dw-button:active,.dw-button-secondary:active{opacity:0.88;transform:scale(0.98);}
a.dw-btn:focus-visible,.dw-btn:focus-visible,.dw-btn-small:focus-visible{outline:2px solid var(--dw-accent);outline-offset:2px;}

/* ===== HOVER → TOUCH FALLBACKS (v2.11) ===== */
/* Wrap desktop-only hover effects so they don't fire on touch devices */
@media (hover: hover) and (pointer: fine) {
    .dw-panel:hover { transform: translateY(-2px); }
    .dw-pillar-head:hover { transform: translateY(-2px); }
    .dw-pillar-card:hover { transform: translateY(-4px); }
    .dw-genre-card:hover { transform: translateY(-3px); }
    .dw-column:hover { transform: translateY(-2px); }
    .dw-glow-target:hover .dw-cursor-glow { opacity: 1; }
    #dw-lite-footer .dw-social-links a:hover {
        background: rgba(166, 124, 82, 0.3);
        border-color: #A67C52;
    }
}
/* Touch-device active states for all interactive elements */
@media (hover: none) {
    .dw-panel:active,
    .dw-pillar-card:active,
    .dw-genre-card:active,
    .dw-column:active {
        opacity: 0.88;
        transform: scale(0.98);
        transition: transform 0.1s ease, opacity 0.1s ease;
    }
    .dw-mix-card:active {
        border-color: var(--dw-accent) !important;
    }
    #dw-lite-footer .dw-social-links a:active {
        background: rgba(166, 124, 82, 0.3);
        border-color: #A67C52;
        transform: scale(0.92);
    }
    /* Hide cursor-glow element entirely on touch — no cursor to follow */
    .dw-cursor-glow { display: none !important; }
    /* Show subtle link underlines on touch (no hover available) */
    .entry-content a::after, .dw-footer a::after { width: 100%; opacity: 0.3; }
    /* Suppress hover transforms */
    .dw-panel:hover, .dw-pillar-card:hover, .dw-genre-card:hover, .dw-column:hover { transform: none !important; }
}

/* ===== SOCIAL LINK TOUCH TARGETS (48px min) ===== */
@media (max-width: 768px) {
    #dw-lite-footer .dw-social-links a {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }
    #dw-lite-footer .dw-social-links {
        gap: 16px;
    }
}

/* ===== §24. MOBILE FONT FLOOR (S158-2) ===== */
/* Ensure no text renders below 11px on mobile devices */
@media (max-width: 480px) {
    /* Footer ecosystem links */
    #dw-page .dw-footer .dw-ecosystem a {
        font-size: 0.75rem; /* 12px, was 0.7rem (11.2px) */
    }
    #dw-page .dw-footer .dw-ecosystem-label {
        font-size: 0.72rem; /* 11.5px, was 0.65rem (10.4px) */
    }
    /* Footer meta text */
    .dw-copyright, .dw-footer-meta {
        font-size: 0.75rem !important; /* 12px floor */
    }
    /* Tier card details */
    .dw-tier-duration,
    .dw-tier-guests,
    .dw-tier-features li,
    .dw-tier-price {
        font-size: 0.88rem; /* 14px, was 0.85rem (13.6px) */
    }
    .dw-btn-small {
        font-size: 0.82rem; /* 13px, was 0.8rem */
        min-height: 44px;
    }
}

/* ===== §25. SAFE AREA (NOTCHED PHONES) ===== */
@supports (padding-top: env(safe-area-inset-top)) {
    #dw-lite-footer {
        padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    }
}

/* ═══════════════════════════════════════════════════
   EXTRA-SMALL PHONES (375px) — iPhone SE, compact Android
   ═══════════════════════════════════════════════════ */
@media (max-width: 375px) {
    /* §Mobile-Upgrade: 375px minimum padding enforcement for sections */
    .dw-section { padding-left: 16px !important; padding-right: 16px !important; }

    /* Hero */
    .dw-hero { min-height: 55vh; min-height: 55dvh; }
    .dw-hero-content { padding: 1rem 0.75rem; }
    .dw-hero-content h1 { font-size: 1.65rem; }
    .dw-hero-content p { font-size: 0.92rem; margin-bottom: 1.5rem; }
    /* Sections */
    .dw-section { padding: 1.5rem 0; }
    .entry-content, .entry-content.single-content { padding: 0 0.75rem; }
    .dw-section h2 { font-size: clamp(1.2rem, 3.8vw, 1.5rem); }
    /* Pillars */
    .dw-pillar-head { padding: 1.5rem 1rem; }
    .dw-pillar-title { font-size: clamp(1rem, 3.5vw, 1.3rem); }
    /* Panels / Cards */
    .dw-panel { padding: 1.5rem; }
    .dw-genre-card { padding: 1.5rem; }
    .dw-genre-card h3 { font-size: 0.92rem; }
    .dw-philosophy-card { padding: 1.5rem 1rem; }
    /* Featured strip */
    .dw-featured-name { font-size: 1.05rem; }
    .dw-featured-strip { gap: 10px; }
    /* Blockquote / Testimonial */
    blockquote, .wp-block-quote, .dw-testimonial { padding: 1rem 1rem 1rem 1.5rem; font-size: 0.95rem; }
    /* Form */
    .fluentform { padding: 1rem; }
    .fluentform input, .fluentform textarea, .fluentform select { font-size: 16px !important; }
    /* Footer */
    #dw-page .dw-footer { padding: 2rem 0.75rem; }
    #dw-page .dw-footer a { margin: 0 0.35rem; font-size: 0.85rem; min-height: 44px; display: inline-flex; align-items: center; }
    /* Cursor glow — scale down for small phones */
    .dw-glow-target .dw-cursor-glow { width: 140px; height: 140px; }
    /* Section ambient glow — scale down for 375px viewport */
    .dw-section-glow::after { width: 200px; height: 140px; }
    /* Pillar glow — constrain */
    .dw-pillar-glow-ring { width: 100%; height: 100%; }
    /* Mix card margins */
    .dw-mix-card { margin: 1.5rem auto; padding: 1rem; }
    /* SoundCloud embeds */
    .entry-content iframe[src*="soundcloud"] { max-height: 300px; }
    /* Buttons */
    .dw-btn { padding: 0.85rem 1.6rem; font-size: 0.78rem; min-height: 44px; }
    /* Venue chips */
    .dw-venue-chip { padding: 8px 12px; font-size: 0.75rem; min-height: 44px; display: inline-flex; align-items: center; }
}

/* §Mobile-Upgrade: Aspect-ratio on card images to prevent layout shift */
.dw-pillar-card img, .dw-mix-card img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }

/* Triptych hero at 375px */
@media (max-width: 375px) {
    body.home .dw-triptych { min-height: 400px; height: 70vh; height: 70dvh; }
    body.home .dw-tri-panel { height: 28vh; height: 28dvh; min-height: 130px; }
    body.home .dw-tri-logo { width: 85px; height: 85px; }
    body.home .dw-tri-logo img { width: 85px; height: 85px; }
}

/* Landscape phone — triptych adapts to short viewport */
@media (max-height: 500px) and (orientation: landscape) {
    body.home .dw-triptych { min-height: 280px; height: 90vh; }
    body.home .dw-tri-panel { min-height: 100px; }
    body.home .dw-tri-logo { width: 60px; height: 60px; }
    body.home .dw-tri-logo img { width: 60px; height: 60px; }
}

/* §Mobile-Upgrade: Landscape handling for cards/sections */
@media (max-width: 768px) and (orientation: landscape) {
    .dw-section { padding-block: 1.5rem; }
    .dw-pillar-grid, .dw-mix-grid { gap: 12px; }
    .dw-hero, .dw-hero-section { min-height: 50vh; min-height: 50dvh; }
}

/* ===== MOBILE PERFORMANCE LAYER ===== */
/* NOTE: will-change:transform removed from #dw-lite-header and .dw-hero — it creates a new
   containing block that breaks position:fixed on the nav and scroll behavior on the hero */
/* NOTE: will-change + backface-visibility removed from nav/hero — creates containing blocks
   that break position:fixed and scroll behavior. content-visibility:auto removed from
   .dw-section — contain:paint on every section breaks scroll calculations. */
.dw-hero{view-transition-name:dw-hero;}
/* Typography optimization — kerning + ligatures on headings */
.dw-hero h1,.dw-hero h2,.dw-section-title,.dw-pillar-head h3,.dw-panel h3{text-rendering:optimizeLegibility;font-variant-ligatures:common-ligatures;font-optical-sizing:auto;font-synthesis:none;hanging-punctuation:first allow-end last;}
/* Link typography — branded underlines */
a:not(.dw-btn):not(.dw-nav-link):not(.dw-eco-link){text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-skip-ink:auto;text-underline-position:under;}
.dw-pillar-head,.dw-pillar-card,.dw-genre-card,.dw-panel,.dw-mix-card{contain:layout style;}
@font-face{font-family:'Cormorant Garamond';font-display:swap;}
@font-face{font-family:'Inter';font-display:swap;}

/* ===== NETWORK-AWARE PERFORMANCE ===== */
body.slow-connection *{animation-duration:0s!important;animation-delay:0s!important;transition-duration:0.05s!important;}
body.slow-connection iframe{display:none;}
body.slow-connection canvas{display:none;}
body.dw-reduced-motion *{animation-duration:0s!important;animation-delay:0s!important;transition-duration:0.05s!important;}
body.dw-tab-hidden *{animation-play-state:paused!important;}
body.dw-tab-hidden canvas{display:none!important;}

/* ===== REDUCED DATA — hide decorative content on data-saver ===== */
@media(prefers-reduced-data:reduce){
  .dw-hero::before,.dw-hero::after,.dw-cursor-glow,.dw-section-glow::after,.dw-pillar-glow-ring,canvas{display:none!important;}
  *{background-image:none!important;box-shadow:none!important;}
  iframe{display:none!important;}
}

/* ===== FLOATING BOOK CTA (homepage only) ===== */
.dw-floating-book{display:none;position:fixed;bottom:20px;right:16px;z-index:998;padding:12px 24px;background:rgba(10,10,10,0.92);backdrop-filter:blur(8px);border:1px solid rgba(184,148,42,0.3);color:#d4af37;font-family:'Cormorant Garamond',Georgia,serif;font-size:14px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;border-radius:2px;box-shadow:0 4px 20px rgba(0,0,0,0.4);transition:opacity 0.3s,transform 0.3s;opacity:0;transform:translateY(12px);touch-action:manipulation;min-height:44px;line-height:20px;}
.dw-floating-book.dfb-visible{display:block;opacity:1;transform:translateY(0);}
.dw-floating-book:active{transform:scale(0.95);box-shadow:0 2px 8px rgba(0,0,0,0.3);}
@media(min-width:769px){.dw-floating-book{bottom:32px;right:32px;}}
@media(max-width:768px){.dw-floating-book{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));bottom:0;left:0;right:0;text-align:center;border-radius:0;border-left:none;border-right:none;border-bottom:none;}}

/* ===== BUTTON PRESS DEPTH — tactile tap feel ===== */
.dw-btn:active,.dw-venue-chip:active,.dw-tri-panel:active{
  transform:scale(0.97)!important;box-shadow:0 1px 2px rgba(0,0,0,0.2)!important;transition:transform 0.08s ease,box-shadow 0.08s ease;
}

/* ===== MOBILE TEXT OVERFLOW SAFETY ===== */
@media(max-width:600px){
  p,li,dd,figcaption,blockquote,.dw-section p,.dw-philosophy-card p{overflow-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;}
}

/* ===== OVERSCROLL & BOUNCE PREVENTION — DISABLED: overscroll-behavior:none on html,body
   combined with overscroll-behavior-y:contain on body created conflicting scroll-chain
   rules that blocked scrolling on some devices. Removed for scroll safety. ===== */
/* RTL-ready logical properties — padding-inline removed: conflicted with §R43 override
   and original .dw-section padding, causing layout compression. */
.dw-section p{margin-inline:auto;}

/* ===== LAYOUT SHIFT PREVENTION ===== */
.dw-section iframe{aspect-ratio:16/9;}
img{height:auto;max-width:100%;}

/* ===== FORM ACCENT — branded checkboxes, radios, range sliders ===== */
input,select,textarea{accent-color:var(--dw-gold);caret-color:var(--dw-gold);}
.dw-btn,a.dw-btn,.dw-btn-small,.dw-nav-link,.dw-floating-book,.dw-mix-button,.scroll-top-btn{-webkit-user-select:none;user-select:none;}
::placeholder{color:var(--dw-muted);opacity:0.6;font-style:italic;}

/* ===== AUTOFILL STYLING — match dark luxury on Chrome/Safari autofill ===== */
input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-box-shadow:0 0 0 40px var(--dw-bg) inset!important;
  -webkit-text-fill-color:var(--dw-txt)!important;
  transition:background-color 5000s ease-in-out 0s;
}

/* ===== SAFE AREA INSETS — ensure fixed elements respect notch ===== */
@supports(padding:env(safe-area-inset-bottom)){
  .dw-floating-book{padding-bottom:calc(12px + env(safe-area-inset-bottom));}
  .dw-footer,.dw-eco-footer{padding-bottom:calc(20px + env(safe-area-inset-bottom));}
}

/* ===== SKIP-TO-CONTENT LINK — accessible keyboard nav ===== */
.dw-skip-link{position:absolute;top:-100px;left:16px;background:var(--dw-gold);color:var(--dw-bg);padding:12px 24px;z-index:10000;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;text-decoration:none;border-radius:0 0 4px 4px;transition:top 0.2s;}
.dw-skip-link:focus{top:0;outline:2px solid var(--dw-gold);outline-offset:2px;}

/* ===== VISITED LINK COLOR — prevent browser default purple ===== */
a:visited{color:inherit;}
:any-link{color:inherit;}
/* ===== TEXT SELECTION — branded highlight ===== */
::selection{background:rgba(166,124,82,0.25);color:var(--dw-txt);}
::target-text{background:rgba(166,124,82,0.3);color:var(--dw-txt);}
::-moz-selection{background:rgba(166,124,82,0.25);color:var(--dw-txt);}

/* ===== SCROLL MARGIN — anchor links clear fixed nav ===== */
[id]{scroll-margin-top:80px;}

/* ===== TARGET HIGHLIGHT — flash when navigating to anchored section ===== */
@keyframes dw-target-flash{0%{outline-color:rgba(166,124,82,0.5);}100%{outline-color:transparent;}}
:target{animation:dw-target-flash 1.5s ease-out;}
@media(prefers-reduced-motion:reduce){:target{animation:none;}}

/* ===== HIGH CONTRAST MODE ===== */
@media(prefers-contrast:more){
  :root{--dw-gold:#e8c060;--dw-txt:rgba(244,241,234,1);--dw-txt-dim:rgba(244,241,234,0.9);}
  .dw-btn,a.dw-btn,.dw-btn-small,.dw-mix-button{border-width:2px;}
  .dw-pillar-head,.dw-pillar-card,.dw-genre-card,.dw-mix-card{border-width:2px;border-color:rgba(166,124,82,0.5);}
}
@media(forced-colors:active){
  .dw-btn,a.dw-btn,.dw-mix-button{border:2px solid ButtonText;color:ButtonText;background:ButtonFace;}
  .dw-pillar-head,.dw-pillar-card,.dw-mix-card{border:1px solid ButtonText;}
  ::selection{background:Highlight;color:HighlightText;}
}

/* ===== INVERTED COLORS (iOS accessibility) ===== */
@media(inverted-colors:inverted){
  img,video,picture,svg:not([aria-hidden="true"]){filter:invert(1);}
  .dw-hero-bg,.dw-pillar-card img,.dw-mix-card img{filter:invert(1);}
}
/* ===== TOUCH DEVICE — tap flash feedback on interactive cards ===== */
@media(hover:none) and (pointer:coarse){
  .dw-pillar-card:active::after,.dw-genre-card:active::after,.dw-mix-card:active::after,.dw-panel:active::after,.dw-philosophy-card:active::after,.dw-tier-card:active::after{
    content:'';position:absolute;inset:0;background:rgba(166,124,82,0.06);pointer-events:none;animation:dwTapFlash 0.3s ease-out;
  }
  .dw-pillar-card,.dw-genre-card,.dw-mix-card,.dw-panel,.dw-philosophy-card,.dw-tier-card{position:relative;overflow:hidden;}
  @keyframes dwTapFlash{0%{opacity:1;}100%{opacity:0;}}
  /* Touch device — always show link underlines (no hover to discover them) */
  a:not(.dw-btn):not(.dw-nav-link):not(.dw-logo){text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
}
/* ===== FORM :focus-within — subtle container elevation when field is focused ===== */
.fluentform:focus-within{border-color:rgba(166,124,82,0.25)!important;box-shadow:0 4px 24px rgba(166,124,82,0.06)!important;}

/* ===== FOCUS-VISIBLE ONLY — hide focus ring on mouse clicks ===== */
:focus:not(:focus-visible){outline:none;}

/* ===== REDUCED TRANSPARENCY ===== */
@media(prefers-reduced-transparency:reduce){
  .dw-floating-book,.dw-footer,nav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
  .dw-floating-book{background:var(--dw-bg)!important;}
}

/* ===== NO-JS FALLBACK — ensure content visible without scripting ===== */
@media(scripting:none){
  .dw-hero,.dw-triptych,.dw-section{opacity:1!important;transform:none!important;visibility:visible!important;}
  nav,#dw-lite-header{position:relative!important;}
}

/* ===== LIST MARKERS — brand-colored bullets ===== */
::marker{color:var(--dw-gold);}

/* ===== P3 WIDE GAMUT — richer gold on HDR displays ===== */
@media(color-gamut:p3){
  :root{--dw-gold:color(display-p3 0.68 0.50 0.32);--dw-accent:color(display-p3 0.68 0.50 0.32);}
}

/* ===== §R33 CONTENT-VISIBILITY — DISABLED: contain:paint from content-visibility:auto
   breaks scroll calculations across sections. Removed for scroll safety. ===== */
/* §R33 CONTAINER QUERIES — DISABLED on cards: container-type:inline-size
   creates containment that can break flex layouts. */

/* ===== §R34 SCROLL-SNAP — MOBILE HORIZONTAL CARD SWIPING ===== */
@media(max-width:768px){
  /* §Mobile-Upgrade: Scroll-snap padding for floating CTA overlap prevention */
  .dw-pillar-grid,.dw-mix-grid,.dw-tier-grid{
    display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:16px;padding-bottom:12px;margin:0 -20px;padding-left:20px;padding-right:20px;
    scrollbar-width:thin;scrollbar-color:var(--earth,#A67C52) transparent;
    scroll-padding-bottom: 80px;
  }
  .dw-pillar-grid::-webkit-scrollbar,.dw-mix-grid::-webkit-scrollbar,.dw-tier-grid::-webkit-scrollbar{height:4px;}
  .dw-pillar-grid::-webkit-scrollbar-track,.dw-mix-grid::-webkit-scrollbar-track,.dw-tier-grid::-webkit-scrollbar-track{background:transparent;}
  .dw-pillar-grid::-webkit-scrollbar-thumb,.dw-mix-grid::-webkit-scrollbar-thumb,.dw-tier-grid::-webkit-scrollbar-thumb{background:var(--earth,#A67C52);border-radius:4px;}
  .dw-pillar-grid>*,.dw-mix-grid>*,.dw-tier-grid>*{flex:0 0 85%;scroll-snap-align:center;min-width:0;}
  .dw-testimonial-grid{
    display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:16px;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:var(--earth,#A67C52) transparent;
  }
  .dw-testimonial-grid::-webkit-scrollbar{height:4px;}
  .dw-testimonial-grid::-webkit-scrollbar-track{background:transparent;}
  .dw-testimonial-grid::-webkit-scrollbar-thumb{background:var(--earth,#A67C52);border-radius:4px;}
  .dw-testimonial-grid>*{flex:0 0 90%;scroll-snap-align:center;}
}

/* ===== §Mobile-Polish: carousel swipe hint — DISABLED: mask-image creates compositing
   layers that can interfere with scroll on some browsers. Replaced with CSS-only
   pulsing arrow indicator below. ===== */
/* §Mobile-Polish: swipe hint arrow — subtle animated indicator on carousels */
@media(max-width:768px){
  .dw-pillar-grid,.dw-mix-grid,.dw-tier-grid,.dw-testimonial-grid{position:relative;}
  .dw-pillar-grid::after,.dw-mix-grid::after,.dw-tier-grid::after,.dw-testimonial-grid::after{
    content:'\2192';position:absolute;right:4px;top:50%;transform:translateY(-50%);
    font-size:20px;color:var(--earth,#A67C52);opacity:0;pointer-events:none;
    animation:dwSwipeHint 3s ease-in-out 1s 2;
  }
  @keyframes dwSwipeHint{0%,100%{opacity:0;transform:translateY(-50%) translateX(0);}30%{opacity:0.6;transform:translateY(-50%) translateX(-6px);}60%{opacity:0.6;transform:translateY(-50%) translateX(6px);}90%{opacity:0;}}
}
@media(prefers-reduced-motion:reduce){
  .dw-pillar-grid::after,.dw-mix-grid::after,.dw-tier-grid::after,.dw-testimonial-grid::after{animation:none!important;}
}

/* ===== §R35 WIDESCREEN DESKTOP — 1440px+ POLISH ===== */
@media(min-width:1440px){
  .dw-hero-section{padding:6rem 4rem;}
  .dw-pillar-grid,.dw-mix-grid{max-width:1200px;margin-left:auto;margin-right:auto;gap:2rem;}
  .dw-cta-section,.dw-journey-section,.dw-stats-section,.dw-tiers-section{padding-left:6rem;padding-right:6rem;}
  body{font-size:1.0625rem;}
}
@media(min-width:1920px){
  .dw-hero-section,.dw-cta-section,.dw-journey-section,.dw-stats-section{max-width:1600px;margin-left:auto;margin-right:auto;}
}

/* ===== §R36 FOCUS-VISIBLE — PREMIUM KEYBOARD NAV ===== */
:focus-visible{outline:2px solid var(--dw-gold,#ae8036);outline-offset:3px;border-radius:4px;}
.dw-btn:focus-visible,.dw-nav-link:focus-visible{outline-color:var(--dw-gold,#ae8036);box-shadow:0 0 0 4px rgba(174,128,54,0.2);}
:focus:not(:focus-visible){outline:none;}

/* ===== §R37 VIEW TRANSITIONS — SMOOTH PAGE FEEL ===== */
@supports(view-transition-name:none){
  .dw-hero-section{view-transition-name:dw-hero;}
  .dw-nav{view-transition-name:dw-nav;}
  ::view-transition-old(*),::view-transition-new(*){animation-duration:0.25s;}
}

/* ===== §R38 :has() PREMIUM INTERACTIVITY ===== */
.dw-faq-item:has(.dw-faq-answer[style*="block"]){background:rgba(174,128,54,0.04);border-left:3px solid var(--dw-gold,#ae8036);}
.dw-form-section:has(input:focus,.dw-form-section:has(textarea:focus)){box-shadow:0 0 0 1px rgba(174,128,54,0.15);}

/* ===== §Mobile-Polish: FAQ ACCORDION TOUCH UX ===== */
/* Kadence handles toggle JS — these CSS rules improve mobile touch targets + transitions */
.dw-faq-question{min-height:48px;display:flex;align-items:center;padding:14px 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative;}
.dw-faq-question::after{content:'';position:absolute;inset:-6px -4px;/* expand touch target beyond visible bounds */}
.dw-faq-answer{transition:max-height 0.3s ease,opacity 0.25s ease,padding 0.3s ease;overflow:hidden;}
.dw-faq-item{border-radius:8px;transition:background 0.25s ease,border-left 0.25s ease;margin-bottom:4px;}
@media(max-width:768px){
  .dw-faq-question{padding:16px;font-size:1rem;line-height:1.4;gap:12px;}
  .dw-faq-answer{padding-inline:16px;}
  .dw-faq-item+.dw-faq-item{margin-top:6px;}
}

/* ===== §R39 FINAL POLISH — ACCESSIBILITY + TYPOGRAPHY ===== */
@media(prefers-reduced-transparency:reduce){
  .dw-pillar-card,.dw-mix-card,.dw-testimonial-card{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(30,30,30,0.97);}
}
h1,h2,h3,.dw-hero-title{text-wrap:balance;}
p,.dw-pillar-card p,.dw-mix-card p{text-wrap:pretty;}

/* ===== §R41 COLOR-MIX + OKLCH WIDE-GAMUT ACCENTS ===== */
:root{
  --dw-gold-10:color-mix(in oklch,var(--dw-gold,#ae8036) 10%,transparent);
  --dw-gold-20:color-mix(in oklch,var(--dw-gold,#ae8036) 20%,transparent);
  --dw-gold-50:color-mix(in oklch,var(--dw-gold,#ae8036) 50%,transparent);
}
@supports(color:oklch(0.7 0.15 75)){
  :root{--dw-gold-vivid:oklch(0.72 0.14 75);--dw-accent-vivid:oklch(0.72 0.14 75);}
  .dw-btn:hover,.dw-pillar-head:hover{border-color:var(--dw-gold-vivid);}
}

/* ===== §R42 SCROLL-DRIVEN ANIMATIONS — DISABLED: animation-timeline:view() ties card
   animations to scroll position, which can interfere with scroll calculations and create
   a deadlock where cards are invisible (opacity:0 from fill:both) until scrolled to but
   the page can't be scrolled. Removed for scroll safety. ===== */

/* ===== §R43 LOGICAL PROPERTIES — PARTIALLY DISABLED: padding-inline/padding-block on
   .dw-section removed — overwrote original section padding and conflicted with earlier
   logical-property rule at §R33 block. Card and button logical properties kept (safe). ===== */
.dw-pillar-card,.dw-mix-card{padding-inline:1.25rem;padding-block:1.5rem;}
.dw-btn{margin-inline:auto;padding-inline:2rem;padding-block:0.75rem;}

/* ===== §R45 @STARTING-STYLE — DISABLED: sets initial opacity:0 on cards which,
   combined with scroll-driven animations (§R42), created a visibility deadlock where
   cards couldn't be seen until scrolled to but scrolling was blocked. Removed for
   scroll safety. ===== */

/* ===== §R46 SUBGRID — DISABLED: overrides card display:flex→grid, breaking
   existing card layouts. ===== */

/* ===== §R47 FORM POLISH — ACCENT-COLOR + INTERACTIVE-WIDGET ===== */
input[type="checkbox"],input[type="radio"],input[type="range"],progress{accent-color:var(--dw-gold,#ae8036);}
@supports(interactive-widget:resizes-content){
  @viewport{interactive-widget:resizes-content;}
}

/* ===== §R49 GPU COMPOSITING — CONTAIN (no will-change on nav/hero — breaks fixed positioning) ===== */
.dw-pillar-card,.dw-mix-card{contain:layout style;}

/* ===== §R50 INDIVIDUAL TRANSFORM PROPERTIES ===== */
@supports(translate:0){
  .dw-pillar-card:hover,.dw-mix-card:hover{translate:0 -4px;rotate:none;scale:1.01;}
  .dw-btn:hover{scale:1.03;}
  .dw-btn:active{scale:0.97;}
}

/* ===== §R51 IMAGE + FONT OPTIMIZATION ===== */
img{image-rendering:auto;}
@supports(image-set(url("") type("image/webp"))){
  .dw-hero-section{background-image:image-set(url("") type("image/webp"),url("") type("image/jpeg"));}
}
@font-face{font-display:swap;size-adjust:100%;}

/* ===== §R52 OVERSCROLL — DISABLED: overscroll-behavior-y:contain on body conflicted
   with html,body{overscroll-behavior:none} from §R33 block. Combined rules confused the
   scroll chain and blocked scrolling. Both removed. ===== */

/* ===== §R54 POPOVER + DIALOG BACKDROP ===== */
::backdrop{background:rgba(10,10,10,0.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
[popover]{border:1px solid var(--dw-gold-20,rgba(174,128,54,0.2));border-radius:12px;padding:1.5rem;background:#1a1a18;color:#f0f0f0;}

/* ===== §R55 MOTION-PATH HERO MICRO-INTERACTION ===== */
@supports(offset-path:circle()){
  .dw-hero-section::after{
    content:'';position:absolute;width:6px;height:6px;border-radius:50%;background:var(--dw-gold,#ae8036);opacity:0.4;
    offset-path:circle(120px at 50% 50%);animation:dw-orbit 12s linear infinite;
  }
  @keyframes dw-orbit{to{offset-distance:100%;}}
}

/* ===== §R56 CSS MATH — PRECISION SPACING ===== */
@supports(width:round(nearest,1px,1px)){
  .dw-section{padding-block:round(nearest,clamp(2rem,4vw,4rem),4px);}
  .dw-pillar-grid,.dw-mix-grid{gap:round(nearest,clamp(1rem,2vw,2rem),4px);}
}

/* ===== §Mobile-Polish: scroll-to-top button ===== */
.dw-scroll-top{
  position:fixed;bottom:80px;right:16px;z-index:997;
  width:44px;height:44px;border-radius:50%;
  background:rgba(10,10,10,0.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(166,124,82,0.25);
  color:var(--dw-gold,#ae8036);font-size:18px;
  display:none;align-items:center;justify-content:center;
  opacity:0;transform:translateY(12px);
  transition:opacity 0.3s ease,transform 0.3s ease,background 0.2s ease;
  cursor:pointer;-webkit-user-select:none;user-select:none;
  touch-action:manipulation;
}
.dw-scroll-top.dw-stt-visible{display:flex;opacity:1;transform:translateY(0);}
.dw-scroll-top:active{transform:scale(0.9);background:rgba(166,124,82,0.15);}
@supports(padding:env(safe-area-inset-bottom)){
  .dw-scroll-top{bottom:calc(80px + env(safe-area-inset-bottom));}
}
@media(max-width:768px){
  .dw-scroll-top{bottom:72px;right:12px;width:40px;height:40px;font-size:16px;}
}

/* ===== §Mobile-Upgrade: SCROLL PROGRESS BAR ===== */
#dw-scroll-progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--earth-dim,#8B6914),var(--earth,#A67C52));z-index:201;width:0%;pointer-events:none;box-shadow:0 0 6px rgba(166,124,82,0.4);transition:width 0.08s linear;}
@supports(animation-timeline:scroll()){
  #dw-scroll-progress{transition:none;width:100%;transform-origin:left;scale:0 1;animation:dw-scroll-progress linear;animation-timeline:scroll();}
  @keyframes dw-scroll-progress{from{scale:0 1;}to{scale:1 1;}}
}
@media print{#dw-scroll-progress{display:none!important;}}

/* ===== PRINT STYLESHEET ===== */
@page{margin:1.8cm 1.5cm;size:auto;}
@page:first{margin-top:1cm;}
@media print{
  .dw-floating-book,.dw-glow-target .dw-cursor-glow,.dw-section-glow::after,.dw-pillar-glow-ring,canvas{display:none!important;}
  body{background:#fff!important;color:#1a1a18!important;font-size:11pt!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  #dw-page{background:#fff!important;}
  .dw-section{padding:24px 0!important;break-inside:avoid;content-visibility:visible!important;}
  .dw-pillar-head,.dw-pillar-card,.dw-genre-card,.dw-panel,.dw-mix-card,.dw-philosophy-card{break-inside:avoid;border:1px solid #ccc!important;box-shadow:none!important;background:#fff!important;}
  .dw-hero,.dw-triptych{min-height:auto!important;padding:40px!important;background:#0f0f11!important;color:#f4f1ea!important;break-after:page;}
  .dw-footer{padding:20px 0!important;border-top:1px solid #ccc!important;}
  a{color:#a67c52!important;text-decoration:underline!important;}
  a[href]::after{content:" (" attr(href) ")";font-size:9pt;color:#666;}
  .dw-btn::after,a[href^="#"]::after,.dw-nav-link[href]::after,.dw-footer a[href]::after{display:none!important;}
  blockquote,.dw-testimonial{break-inside:avoid;border-left:2px solid #a67c52!important;}
  *{animation:none!important;transition:none!important;}
  p,li,blockquote{orphans:3;widows:3;}
  h1,h2,h3,h4{break-after:avoid;page-break-after:avoid;}
}