/*
Theme Name: Crystal Theme
Author: Crystal D'Angora (Built by Antigravity)
Description: A custom theme focused on emotional safety, calmness, and connection.
Version: 1.0
*/

:root {
    /* 
     * 1. Color Palette (Earthy/Zen/Safe)
     * Using HSL for easier manipulation of shades/tints
     */
    --color-primary: #5a715e;
    /* Muted Sage Green - Calming, growth, nature */
    --color-primary-dark: #3f5243;
    --color-primary-light: #8fa693;

    --color-secondary: #C8B298;
    /* Warm Sand/Taupe - Grounding, earth */
    --color-secondary-light: #EBE0D3;

    --color-accent: #D4AF37;
    /* Muted Gold - "Occasional pops of contrast" */

    --color-bg: #F9F7F5;
    /* Off-white/Cream - Softer than pure white */
    --color-surface: #FFFFFF;
    /* Clean surface for cards */

    --color-text: #2D3331;
    /* Deep Charcoal Green/Grey - Softer than black */
    --color-text-muted: #6B7280;

    /* 
     * 2. Typography (Classy & Readable) 
     * Using system fonts fallback stack + potentially Google Fonts later
     */
    --font-heading: "Playfair Display", Georgia, serif;
    /* Classy, trustworthy */
    --font-body: "Inter", system-ui, -apple-system, sans-serif;
    /* Clean, readability */

    /* 
     * 3. Spacing System (Base unit 8px) 
     */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    /* p-8 (Card padding) */
    --space-6: 48px;
    --space-8: 64px;
    --space-12: 96px;
    --space-16: 128px;
    /* py-32 (Section padding) */

    /* 
     * 4. Radii (Rounded edges -> "Safe/Personable") 
     */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* 
     * 5. Shadows & Transitions 
     */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    --transition-base: all 0.3s ease-out;
    --transition-slow: all 0.5s ease-in-out;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    /* Offset for fixed header */
}

/* Base Reset & Typography */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 16px;
    /* 1rem base */
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--color-primary-dark);
    line-height: 1.2;
    margin-bottom: var(--space-3);
}

h1 {
    font-size: 3.5rem;
    letter-spacing: -0.02em;
}

h2 {
    font-size: 2.5rem;
}

h3 {
    font-size: 1.75rem;
}

p {
    margin-bottom: var(--space-3);
    max-width: 65ch;
}

/* Optimal reading width */

/* Utilities & Layout */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 5vw;
    padding-right: 5vw;
    max-width: 1152px;
    /* max-w-6xl */
}

@media (min-width: 900px) {
    .container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}

/* Screen Reader / SEO Only Class */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Sections */
section {
    padding-top: var(--space-8);
    /* Fallback */
    padding-bottom: var(--space-8);
    position: relative;
    overflow: hidden;
    /* For animations */
}

@media (min-width: 768px) {
    section {
        padding-top: var(--space-16);
        padding-bottom: var(--space-16);
    }
}

/* 
 * Design System Components 
 */

/* 
 * 4. Components 
 */

/* Buttons */
.btn,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 var(--space-4);
    background-color: var(--color-primary);
    color: white;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-full);
    transition: var(--transition-base);
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    appearance: none;
}

.btn:hover,
.button:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-small,
.button-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 var(--space-3);
    background-color: var(--color-primary);
    color: white;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-full);
    transition: var(--transition-base);
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    white-space: nowrap;
}

.btn-small:hover,
.button-small:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-1px);
}

.btn-link,
.read-more-link {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-primary);
    cursor: pointer;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: var(--transition-base);
}

.btn-link:hover,
.read-more-link:hover {
    text-decoration: underline;
    color: var(--color-primary-dark);
}

/* Cards */
.card {
    background: var(--color-surface);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    /* Default consistency */
}

/* Responsive Padding for Cards */
@media (max-width: 900px) {

    .card {
        padding: 5vw;
    }
}

/* Interactive Card Modifier (Hover Effects) */
.card--interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-secondary);
}

/* Decorative Elements */
.divider-gold {
    height: 1px;
    width: 96px;
    /* w-24 */
    background-color: var(--color-accent);
    margin: var(--space-3) auto;
    display: block;
}

.vertical-line {
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: var(--color-primary);
    opacity: 0.1;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

/* Tag/Label Pattern (Uppercase, small) */
.tag-label {
    text-transform: uppercase;
    font-size: 0.75rem;
    /* xs/sm */
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-bottom: var(--space-2);
    display: block;
}

/* Hero Specifics (Animated) */
.section-hero {
    /* =========================================
       HERO CONFIGURATION (Tweak these values)
       ========================================= */

    /* 1. Animation Timing */
    /* 1. Animation Timing */
    --hero-anim-duration: 4s;
    /* Total cycle before switch */

    /* 2. Positioning (Center relative) */
    /* DESKTOP DEFAULTS */
    --stage1-text-top: 40%;
    /* "Let's Begin" vertical pos */
    --stage1-text-left: 50%;
    /* "Let's Begin" horizontal pos */

    --stage2-text-top: 40%;
    /* "Growth" vertical pos */
    --stage2-text-left: 50%;
    /* "Growth" horizontal pos */

    /* 3. Sizing (Desktop) */
    --font-size-small: 2.5rem;
    /* "Let's", "On your" */
    --font-size-large: 6rem;
    /* "Begin", "GROWTH" */

    /* ========================================= */

    height: 100vh;
    /* Full viewport height */
    max-height: 900px;
    min-height: 600px;
    position: relative;
    background-color: var(--color-bg);
}

/* Mobile Overrides (Breakpoints) */
@media (max-width: 768px) {
    .section-hero {
        /* MOBILE CONFIGURATION */
        --stage1-text-top: 50%;
        --stage2-text-top: 50%;

        --font-size-small: 1.5rem;
        --font-size-large: 3.5rem;
    }
}

/* Common Image Wrapper */
.hero-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Stage 1: Entry (Baby Plant) */
.hero-stage-entry {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    /* Auto Exit: Fade out after 3s */
    animation: fadeOutzzz 1s ease-in-out forwards;
    animation-delay: 3s;
    pointer-events: none;
}

.hero-img-baby {
    /* Simple Slight Zoom */
    opacity: 0;
    transform: scale(1);
    animation: zoomSimple 3.4s linear forwards;
}

/* Removed click-based exit */

/* Stage 2: Final (Main Hero) */
.hero-stage-final {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;

    /* Stays behind, no animation needed on wrapper if image handles it */
    opacity: 1;
}

/* Removed click-based enter */

.hero-img-final {
    /* Optional: Ensure it covers fully */
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Apply Zoom Animation (Handle fade + zoom) */
    opacity: 0;
    transform: scale(1);
    animation: zoomFinal 4.5s ease-in-out forwards;
    animation-delay: 2.5s;
}

/* Text Groups */
.hero-text-group.entry-text {
    position: absolute;
    transform: translate(-110%, 10%);
    text-align: left;
    width: auto;
    max-width: 90%;
}

.hero-text-group.final-text {
    position: absolute;
    transform: translate(-1em, -19em);
    text-align: left;
    width: auto;
    max-width: 90%;
}

.entry-text {
    top: var(--stage1-text-top);
    left: var(--stage1-text-left);
}

.final-text {
    top: var(--stage2-text-top);
    left: var(--stage2-text-left);
    z-index: 20;
}

/* Text Lines */
.hero-line {
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    opacity: 0;
    line-height: 1.1;
}

/* Stage 1 Text: Continuous Drift Up */
/* Stage 1 Text: Tighter Animation */
.entry-text .hero-line {
    animation: fadeInOffset 2s ease-out forwards;
}

/* Differential Speeds/Delays */
.entry-text .hero-line:nth-child(1) {
    /* "Let's" */
    animation-delay: 0.2s;
}

.entry-text .hero-line:nth-child(2) {
    /* "Begin" */
    animation-delay: 0.4s;
    /* +0.2s after Let's */
}

/* Stage 2 Text: Staggered Entry + Stay */
.final-text .hero-line {
    opacity: 0;
}

.section-hero .final-text .hero-line {
    animation: fadeInOffset 1s ease-out forwards;
}

.line-small {
    font-size: 9vw;
    font-family: var(--font-heading);
    font-weight: 400;
}

.line-large {
    font-size: 11vw;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.entry-text .line-small {
    font-size: 10vw;
    font-family: var(--font-heading);
    font-weight: 400;
}

.entry-text .line-large {
    font-size: 15vw;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
}

@media (min-width: 769px) {
    .line-large {
        font-size: 4.4em;
    }

    .line-small {
        font-size: 3em;
    }

    .entry-text .line-small {
        font-size: 6em;
    }

    .entry-text .line-large {
        font-size: 10em;
    }

    .hero-text-group.entry-text {
        transform: translate(-98%, 13%);
    }

    .hero-text-group.final-text {
        transform: translate(26%, -100%);
    }
}

/* Staggered Delays (Override for specific lines handled above, remove general rules if conflicting) */
/* .entry-text .hero-line rules replaced by differential block above */

.final-text .hero-line:nth-child(1) {
    animation-delay: 3.2s;
}

.final-text .hero-line:nth-child(2) {
    animation-delay: 3.4s;
}

.final-text .hero-line:nth-child(3) {
    animation-delay: 3.6s;
}

/* Keyframes */
@keyframes zoomFadeIn {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeInOffset {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zoomSimple {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    15% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: scale(1.07);
    }
}

@keyframes zoomFinal {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    45% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        /* Slower/Less zoom than simple */
        transform: scale(1.05);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes floatAround {
    0% {
        transform: translateY(0) translateX(0);
    }

    33% {
        transform: translateY(-5px) translateX(2px);
    }

    66% {
        transform: translateY(3px) translateX(-2px);
    }

    100% {
        transform: translateY(-2px) translateX(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 30px));
    }

    /* Keep centered X, offset Y */
    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* Grids */
.grid-2 {
    display: grid;
    gap: var(--space-8);
}

.grid-3 {
    display: grid;
    gap: var(--space-4);
}

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

    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-8);
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.animate-fade-in {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-slide-up {
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
    opacity: 0;
}

/* Header & Navigation */
.admin-bar header#masthead {
    margin-top: 32px;
}

.site-header {
    padding: var(--space-4) 0;
    background-color: var(--color-bg);
    border-bottom: 1px solid rgba(0, 0, 0, 1);
}

.site-branding {
    text-align: center;
    margin-bottom: var(--space-2);
}

.site-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    margin: 0;
    line-height: 1;
}

.site-title a {
    color: var(--color-primary-dark);
    text-decoration: none;
    transition: var(--transition-base);
}

.site-title a:hover {
    color: var(--color-primary);
}

.main-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: var(--space-4);
}

.main-navigation a {
    color: var(--color-text);
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    transition: var(--transition-base);
}

.main-navigation a:hover {
    color: var(--color-primary);
}

@media (min-width: 768px) {
    .site-header {
        padding: var(--space-6) 0;
    }

    .site-title {
        font-size: 2.5rem;
    }
}

/* 
 * Quote Section Redesign (Dark & Patterned) 
 */
/*
 * Quote Section (With Interactive Tiles)
 */
.section-quote {
    background-color: var(--color-primary-dark);
    color: white;
    /* Light text default */

    /* Sacred Geometry / Overlapping Rings Pattern */
    /* Reference Image: Overlapping circles (Intersecting) */
    /* Radius ~60% creates the classic vesica piscis overlap */
    background-image:
        radial-gradient(circle, transparent 59%, rgba(255, 255, 255, 0.05) 59.5%, rgba(255, 255, 255, 0.05) 60.5%, transparent 61%),
        radial-gradient(circle, transparent 59%, rgba(255, 255, 255, 0.05) 59.5%, rgba(255, 255, 255, 0.05) 60.5%, transparent 61%);
    background-size: 200px 200px;
    background-position: 0 0, 100px 100px;
    /* Offset is half of size */

    padding: var(--space-12) 0;
    text-align: center;
    position: relative;
}

.section-quote blockquote {
    font-family: var(--font-heading);
    font-size: 2rem;
    line-height: 1.4;
    font-style: italic;
    color: var(--color-secondary-light);
    /* Light Text */
    margin: 0;
    text-align: center;
}

.section-quote blockquote footer {
    color: var(--color-surface);
    /* Light Text */
    font-style: normal;
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.875rem;
    margin-top: var(--space-4);
}

.section-quote .divider-gold {
    opacity: 0.6;
    /* Soften gold against dark background */
}

/* Updated Quote Layout for Dark Mode integration */
.quote-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    align-items: center;
}

@media (min-width: 900px) {
    .section-quote blockquote {
        font-size: 2.5rem;
        /* Bigger on desktop */
        text-align: left;
    }

    .quote-content {
        border-right-color: rgba(255, 255, 255, 0.1);
        /* Light divider */
    }
}


.ailment-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr 1fr;
    /* Mobile: 2x2 (Stacked) */
    width: 100%;
}

.ailment-tile {
    width: 100%;
    cursor: pointer;
    text-align: center;
    border: none;
    /* Reset button */
    font-size: 1rem;
    color: var(--color-primary-dark);
    /* Dark text on Taupe */
    background-color: var(--color-secondary-light);
    /* Warm Sand/Taupe */
    height: 100%;
    /* Ensure equal height tiles */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    border-radius: var(--radius-md);
    /* Add radius back since card class might be removed or overridden */
    transition: var(--transition-base);
    text-decoration: none;
    /* For anchor tags */
}

.ailment-tile:hover {
    background-color: var(--color-bg);
    transform: translateY(-2px);
}


.ailment-tile h3 {
    margin: 0;
    font-size: 1.15rem;
    /* Slightly smaller to fit 3-col */
    pointer-events: none;
    /* Prevent clicking text interfering */
}

/* Mobile Overrides for Growth */
@media (max-width: 600px) {
    .ailment-grid {
        gap: 4vw;
    }

    .ailment-tile {
        padding: 0;
        width: 43vw
    }

    .growth-card p {
        margin-bottom: 0;
    }
}

@media (min-width: 900px) {

    /* Tablet Layout */
    .quote-layout {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .quote-content {
        flex: 1;
        border-right: 1px solid rgba(0, 0, 0, 0.05);
        /* Optional subtle divider */
    }

    .ailments-list {
        flex: 1;
    }

    .ailment-grid {
        grid-template-columns: 1fr 1fr;
        /* Tablet: 2 cols side-by-side */
    }
}

@media (min-width: 1200px) {

    /* Desktop Layout - Large Screens */
    .ailment-grid {
        grid-template-columns: repeat(3, 1fr);
        /* Desktop: 3 cols side-by-side */
    }
}

/* 
 * Modal Window 
 */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(90, 113, 106, 0.85);
    /* Primary color dimmed */
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-out;
    padding: var(--space-4);
}

.modal-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.modal-window {
    background-color: var(--color-surface);
    color: var(--color-primary-dark);
    /* Ensure text is dark green */
    padding: 6vw;
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 550px;
    box-shadow: var(--shadow-lg);
    text-align: center;

    /* 3D Animation Hook */
    transform: perspective(1000px) rotateY(90deg);
    transition: transform 0.6s ease-out;
    /* Smooth, no bounce */
    cursor: pointer;
    /* Click to close */
}

.modal-backdrop.is-visible .modal-window {
    transform: perspective(1000px) rotateY(0deg);
}

.modal-window h3 {
    margin-bottom: var(--space-4);
    color: var(--color-primary-dark);
}

.modal-link {
    display: inline-block;
    margin-top: var(--space-4);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    font-family: var(--font-body);
}

.modal-link .arrow {
    display: inline-block;
    transition: transform 0.2s;
}


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

@media (min-width: 768px) {
    .modal-window {
        padding: var(--space-8);
    }
}

/*
 * Intro Section (Square Video + Text)
 */
/*
 * Intro Section (Square Video + Text)
 */
.section-intro {
    background-color: transparent;
}

/* 
 * About Section
 */
/* 
 * About Section
 */
.section-about {
    background-color: var(--color-secondary-light);
    /* Dragon Scales (Seigaiha) - Visible Gold */
    background-image:
        radial-gradient(circle at 50% 100%, transparent 60%, rgba(212, 175, 55, 0.25) 61%, transparent 62%),
        radial-gradient(circle at 50% 100%, transparent 60%, rgba(212, 175, 55, 0.25) 61%, transparent 62%);
    background-size: 100px 50px;
    background-position: 0 0, 50px 25px;

    padding: var(--space-12) 0;
}

/* About Read More (Mobile) */
.about-expandable {
    display: none;
    /* Hidden on mobile by default */
}

.about-expandable.is-expanded {
    display: block;
    animation: fadeIn 0.5s ease;
}

#about-read-more {
    display: inline-block;
    /* Show on mobile (unless JS hides it) */
    margin-top: var(--space-2);
}

/* Desktop: Always show text, hide button */
@media (min-width: 768px) {
    .about-expandable {
        display: block !important;
    }

    #about-read-more {
        display: none !important;
        /* Force hide on desktop */
    }
}

/* 
 * Growth Section
 */
/* 
 * Growth Section
 */
.section-growth {
    background-color: var(--color-primary);
    color: var(--color-surface);
    padding: var(--space-12) 0;
}

.section-growth h2 {
    color: var(--color-surface);
}

.growth-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-12) var(--space-6);
}

/* Intro Text */
.growth-intro {
    padding: var(--space-4) 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Cards (Extends base .growth-card) */
.growth-card {
    /* Override base white with cream */
    background-color: var(--color-bg);
    color: var(--color-text);
    /* Float icon spacing */
    margin-top: 40px;
    padding-top: 50px;
    text-align: center;
    overflow: visible;
    /* Allow icon float */
}

/* Specific Growth Padding Override if needed */
@media (max-width: 900px) {
    .growth-card {
        padding-left: 5vw;
        padding-right: 5vw;
    }
}

.growth-card h3 {
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

/* Floating Icons */
.floating-icon {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.1));
}

/* 
 * Methods Section
 */
.section-methods {
    background-color: var(--color-primary-light);
    /* Flower of Life - Visible White (20%) */
    background-image:
        radial-gradient(circle at 50% 50%, transparent 60%, rgba(255, 255, 255, 0.2) 61%, transparent 62%),
        radial-gradient(circle at 0% 50%, transparent 60%, rgba(255, 255, 255, 0.2) 61%, transparent 62%),
        radial-gradient(circle at 100% 50%, transparent 60%, rgba(255, 255, 255, 0.2) 61%, transparent 62%);
    background-size: 100px 100px;
    background-position: 0 0;
    padding: var(--space-12) 0;
}

.section-methods h2 {
    color: var(--color-bg);
}

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

@media (min-width: 600px) {
    .methods-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Method Card (Extends base .method-card) */
.method-card {
    display: block;
    /* Link is block */
    text-decoration: none;
    position: relative;
    user-select: none;
    overflow: hidden;
    /* Clip effects */
    text-align: left;
    /* Base styles (padding, bg, radius) inherited */
}


.method-card h3 {
    color: var(--color-accent);
    margin-bottom: var(--space-2);
}

.method-card p {
    font-size: 1rem;
    color: var(--color-text);
}

/* Learn More Link */
.learn-more-link {
    position: absolute;
    bottom: 1em;
    right: var(--space-6);
    margin: 0;
    font-weight: bold;
    color: var(--color-primary-dark);
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.method-card:hover .learn-more-link {
    opacity: 1;
    transform: translateX(0);
}

/* For clipping any effects */

/*
 * CTA Section (Let's Begin / Map)
 */
.section-cta {
    background-color: var(--color-secondary-light);
    /* Whole section: Warm Taupe */
    color: var(--color-primary-dark);
    padding: var(--space-8) 0;
}

.cta-layout {
    display: flex;
    flex-direction: column-reverse;
    min-height: auto;
    /* No background on layout itself, letting section color shine through */
}

/* Map Side */
.cta-map {
    width: 100%;
    height: 300px;
    filter: grayscale(20%);
    border-radius: var(--radius-lg);
    /* Rounded edges per request */
    overflow: hidden;
    /* Clip map content to radius */
}

/* Content Side */
.cta-content {
    padding: 0 5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-bottom: var(--space-6);
}

.cta-text-wrapper h2 {
    color: var(--color-primary-dark);
    margin-bottom: var(--space-6);
    font-size: 2.5rem;
}

.btn-cta {
    margin-bottom: var(--space-6);
}

/* Tile styling for text under button */
.cta-details {
    background-color: var(--color-bg);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    box-shadow: var(--shadow-sm);
}

.cta-details p {
    font-size: 1rem;
    /* Slightly smaller in tile */
    margin-bottom: var(--space-2);
    font-weight: 500;
}

.cta-details .address {
    margin-bottom: var(--space-4);
}

.cta-details .insurance {
    font-style: italic;
    opacity: 0.9;
}


/* Desktop Layout */
@media (min-width: 900px) {
    .cta-layout {
        flex-direction: row;
        /* Side by side */
        align-items: stretch;
    }

    .cta-map {
        width: 50%;
        height: auto;
        min-height: 450px;
        /* Ensure some height */
    }

    .cta-content {
        width: 50%;
        padding: 0 var(--space-12);
        /* No vertical padding */
        align-items: flex-start;
        text-align: left;
        padding-bottom: 0;
    }
}

.intro-layout {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-6);
}


.video-square {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    /* Force Square */
    background-color: #E0E0E0;
    /* Placeholder gray */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.play-button-overlay {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    /* transform: translate(-50%, -50%); <-- Removed center positioning */
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.2s, opacity 0.2s;
    opacity: 0.9;
    padding: 0;
}

.play-button-overlay:hover {
    transform: scale(1.1);
    opacity: 1;
}

.play-button-overlay .play-icon {
    font-size: 3rem;
    /* Reduced slightly for corner */
    color: var(--color-primary);
    /* Site primary color */
    text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.8);
    /* White shadow for contrast */
    display: block;
    line-height: 1;
}

/* Pause Icon State managed by JS now to avoid duplication */
/* .video-playing .play-button-overlay .play-icon::before { content: "⏸"; } */

/* Hide button completely if preferred, OR keep it as specific toggle.
   User said "button becomes a pause which toggles back to play".
   So we remove the opacity:0 rule for .video-playing .play-button-overlay */

/* Mobile Expansion Logic */
.intro-expandable {
    display: none;
    /* Hidden by default on mobile unless expanded */
}

.intro-expandable.is-expanded {
    display: block;
    animation: fadeIn 0.5s ease-out;
}

/* Video Spinner */
.play-button-overlay .spinner-ring {
    position: absolute;
    top: 4px;
    left: -7px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: none;
    pointer-events: none;
    width: 40px;
    height: 40px;

}

.play-button-overlay.is-loading .spinner-ring {
    display: block;
}

.play-button-overlay.is-loading {
    cursor: wait;
    opacity: 1;
    /* Ensure visible */
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.read-more-link {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-primary);
    cursor: pointer;
    font-weight: 600;
    margin-top: var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.read-more-link:hover {
    text-decoration: underline;
}

.read-more-link .chevron {
    font-size: 0.8em;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Desktop Layout */
@media (min-width: 900px) {
    .intro-layout {
        flex-direction: row-reverse;
        /* Video Left (Source 2nd), Text Right (Source 1st) */
        align-items: center;
        text-align: left;
    }

    .intro-content {
        flex: 1;
        padding-right: var(--space-8);
    }

    .intro-video {
        flex: 1;
        display: flex;
        justify-content: center;
        /* Center video in its column */
    }

    .video-square {
        max-width: 500px;
        /* Cap width on large screens */
    }


    /* Request: "make the expanding text thing work on all breakpoints"
       So we REMOVE the forced display:block for desktop. */
    /* .intro-expandable ruleset removed to avoid lint error */


    .read-more-link {
        /* display: none !important; <-- REMOVED */
        display: inline-flex !important;
        /* Ensure it shows if hidden by specificity */
    }
}

/*
 * Contact Modal Styles
 */
.contact-window {
    text-align: center;
    max-width: 480px;
    position: relative;
    /* For close button positioning */
}

/* Enforce side-by-side on mobile for contact options */
.contact-options.grid-2 {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.modal-heading {
    margin-bottom: var(--space-2);
}

.choice-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);
    /* Reduced padding per request */
    background-color: var(--color-bg);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: var(--transition-base);
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.9rem;
    /* Slightly smaller text for mobile fit */
}

.choice-btn .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.choice-btn:hover {
    background-color: var(--color-secondary-light);
    transform: translateY(-2px);
}

.choice-btn.active {
    border-color: var(--color-primary);
    background-color: white;
    box-shadow: var(--shadow-md);
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    text-align: left;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-family: var(--font-body);
    transition: border-color 0.2s;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(90, 113, 106, 0.1);
}

#btn-send:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Voicemail Link & QR Hover */
.voicemail-link:hover {
    text-decoration: underline;
}

.hover-qr {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    /* Start closer */
    background: white;
    padding: 10px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    /* User can't interact */
    transition: opacity 0.2s, transform 0.2s;
    z-index: 10;
    width: 140px;
    height: 140px;
    display: none;
    /* Hidden by default (Mobile) */
    align-items: center;
    justify-content: center;
}

/* Show on Desktop only */
@media (min-width: 900px) {
    .hover-qr {
        display: flex;
    }
}

/* Triangle/Arrow for tooltip */
.hover-qr::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

.voicemail-link:hover .hover-qr {
    opacity: 1;
    transform: translateX(-50%) translateY(-15px);
    /* Float Higher */
}

/* Success/Fail Animation/Styles */
#modal-content-success,
#modal-content-fail {
    animation: fadeIn 0.4s ease-out;
}

/*
 * Site Footer
 */
.site-footer {
    background-color: var(--color-primary-dark);
    /* Dark Sage BG */
    color: white;
    /* Light Text */
    padding: var(--space-12) 0 var(--space-6);
    border-top: none;

    /* White Subtle Dragon Scales */
    background-image:
        radial-gradient(circle at 50% 100%, transparent 60%, rgba(255, 255, 255, 0.09) 61%, transparent 62%),
        radial-gradient(circle at 50% 100%, transparent 60%, rgba(255, 255, 255, 0.09) 61%, transparent 62%);
    background-size: 100px 50px;
    background-position: 0 0, 50px 25px;
}

.footer-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* Identity Section */
.footer-identity {
    margin-bottom: var(--space-6);
}

.footer-title {
    font-family: var(--font-heading);
    color: white;
    font-size: 2rem;
    margin-bottom: var(--space-2);
}

.footer-subtitle {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--space-1);
}

.footer-license {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin-bottom: var(--space-4);
}

.footer-pt-link {
    display: inline-block;
    color: var(--color-accent);
    /* Sand color for link */
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: var(--transition-base);
    margin-bottom: 1em;
}

.footer-pt-link:hover {
    color: white;
    border-bottom-color: white;
}

/* Reversed Address Style */
.footer-address-link {
    display: block;
    /* Override inline style if any */
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500;
    line-height: 1.4;
    transition: transform 0.2s, color 0.2s;
    text-decoration: none;
}

.footer-address-link:hover {
    color: white !important;
    text-decoration: underline;
}

/* Menus Section */
/* .footer-menus removed (flattened) */

.footer-heading {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    /* Gold Subheads per request */
    margin-bottom: var(--space-4);
    font-weight: 700;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: var(--space-2);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.footer-links a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: white;
    text-decoration: underline;
}

.site-info {
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}


/* Footer Layout - Mobile (Default) */
.footer-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.footer-identity {
    order: 2;
    /* Show Last on Mobile */
    margin-bottom: 0;
}

.footer-menu-group {
    order: 1;
    /* Show First on Mobile */
}

/* Tablet Layout (600px - 900px) 
   Identity | Menu 1
   Menu 2   | Menu 3
*/
@media (min-width: 600px) {
    .footer-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: var(--space-8);
    }

    .footer-identity {
        order: initial;
        /* Reset order to follow DOM (First) */
    }

    .footer-menu-group {
        order: initial;
    }
}

/* Desktop Layout (>900px) 
   Identity | Menu 1 | Menu 2 | Menu 3
*/
@media (min-width: 900px) {
    .footer-layout {
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: var(--space-6);
    }
}

/* Mobile Overrides for Growth */
@media (max-width: 600px) {
    .growth-grid {
        gap: var(--space-8) var(--space-6);
    }

    .growth-card {
        margin-top: 0;
        padding-top: var(--space-4);
        text-align: left;
        /* Padding removed as requested */
        min-height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: visible;
        /* Ensure icon shows */
    }

    .growth-grid {
        margin-bottom: 0;
    }

    .floating-icon {
        left: auto;
        right: -7%;
        top: -13%;
        transform: none;
        width: 60px;
        height: 60px;
    }

    .learn-more-link {
        display: none;
    }

    .cta-content {
        padding: 0;
        padding-bottom: var(--space-6);
    }
}

/*
 * Sticky Emergency Banner
 */
.emergency-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-accent);
    /* Gold */
    color: var(--color-primary-dark);
    padding: var(--space-2) 0;
    /* Ultra-tight padding */
    z-index: 1000;
    /* Above regular content, below modals (2000) */
    transform: translateY(100%);
    /* Hidden by default */
    transition: transform 0.4s ease-out;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.emergency-banner.is-visible {
    transform: translateY(0);
}

.banner-inner {
    display: flex;
    flex-direction: row;
    /* Row on all screens */
    flex-wrap: wrap;
    /* Wrap if needed on tiny screens */
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    /* Tighter gap */
    text-align: center;
}

.banner-text {
    font-weight: 600;
    font-size: 0.9rem;
    /* Slightly smaller */
    line-height: 1.3;
    flex: 1 1 auto;
}

.banner-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    /* Tighter gap */
    flex-shrink: 0;
}

/* Solid Button (Dark) - For "I need help" */
.button-solid-dark {
    border: 1px solid var(--color-primary-dark);
    color: white;
    background-color: var(--color-primary-dark);
    padding: 6px 14px;
    font-size: 0.85rem;
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
}

.button-solid-dark:hover {
    background-color: transparent;
    color: var(--color-primary-dark);
}

/* Outline Button (Dark) - For "I'm Ok" */
.button-outline-dark {
    border: 1px solid var(--color-primary-dark);
    color: var(--color-primary-dark);
    background: transparent;
    padding: 6px 14px;
    font-size: 0.85rem;
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.button-outline-dark:hover {
    background-color: var(--color-primary-dark);
    color: white;
}

@media (min-width: 768px) {
    .banner-inner {
        justify-content: space-between;
        text-align: left;
    }

    .banner-text {
        font-size: 1.1rem;
        flex: 0 1 auto;
    }
}

/*
 * Navigation
 */
.site-header {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: var(--space-3) 0;
    transition: all 0.3s;
}

.site-header.fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1100;
    /* Above everything */
}

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

.header-spacer {
    height: 70px;
    /* Match header height roughly */
}

/* Brand */
.brand-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--color-primary-dark);
    line-height: 1.2;
}

.brand-name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
}

.brand-title {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    border-top: 1px solid var(--color-secondary);
    display: inline-block;
    padding-top: 2px;
    margin-top: 2px;
    letter-spacing: 0.02em;
}

/* Brand Group (Holds Logo + Speaker Icon) */
.brand-group {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* Video Speaker Icon */
.video-speaker-icon {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    /* Align with text */
    margin-top: 5px;
    /* Visual alignment correction */
    cursor: pointer;
    color: var(--color-primary);
    animation: pulse-opacity 2s infinite ease-in-out;
    display: none;
    /* Controlled by JS */
}

.video-speaker-icon:hover {
    opacity: 1 !important;
    /* Force full opacity on hover */
    transform: scale(1.1);
    transition: transform 0.2s;
}

@keyframes pulse-opacity {
    0% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.4;
    }
}

/* Desktop Nav */
.desktop-nav {
    display: none;
    /* Hidden on mobile */
    align-items: center;
    gap: var(--space-6);
}

.nav-link {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.nav-link:hover {
    color: var(--color-primary);
}

.nav-btn {
    border-radius: var(--radius-full);
}

/* Mobile Actions Wrapper */
.mobile-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Logic: Button in Navbar vs Drawer */
/* Default (< 600px): Hide Header Button, Show Drawer Button */
.mobile-header-btn {
    display: none;
}

.mobile-drawer .mobile-btn {
    display: flex;
}

/* >= 600px: Show Header Button, Hide Drawer Button */
@media (min-width: 600px) {
    .mobile-header-btn {
        display: inline-flex;
    }

    .mobile-drawer .mobile-btn {
        display: none;
    }
}

/* Mobile Toggle */
.mobile-toggle {
    display: block;
    /* Visible on mobile */
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
}

.hamburger-icon span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-primary-dark);
    margin-bottom: 5px;
    transition: 0.2s;
}

.hamburger-icon span:last-child {
    margin-bottom: 0;
}

/* Mobile Drawer */
.mobile-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(90, 113, 106, 0.4);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.mobile-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 90vw;
    height: 100%;
    background: white;
    z-index: 2001;
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
    padding: 0 6vw;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.mobile-drawer.is-open {
    transform: translateX(0);
}

.mobile-close-btn {
    align-self: flex-end;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--color-text-muted);
    line-height: 1;
    padding: var(--space-2);
    margin-right: -10px;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 4vw;
}

.mobile-link {
    font-size: 1.2rem;
    text-decoration: none;
    color: var(--color-primary-dark);
    font-weight: 500;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: var(--space-2);
}

.mobile-btn {
    margin-top: var(--space-4);
    width: 100%;
    justify-content: center;
}

/*
 * Challenges & Methods Page Intro
 */
.section-intro-challenges,
.section-intro-methods,
.section-intro-page {
    padding: var(--space-12) 0 var(--space-6) 0;
    text-align: center;
    background-color: var(--color-secondary-light);
    /* Sand */

    /* Flower of Life Pattern - Gold (40% opacity) */
    /* Modeled after .section-methods */
    background-image:
        radial-gradient(circle at 50% 50%, transparent 60%, rgba(212, 175, 55, 0.4) 61%, transparent 62%),
        radial-gradient(circle at 0% 50%, transparent 60%, rgba(212, 175, 55, 0.4) 61%, transparent 62%),
        radial-gradient(circle at 100% 50%, transparent 60%, rgba(212, 175, 55, 0.4) 61%, transparent 62%);
    background-size: 100px 100px;
    background-position: 0 0;
}

/* Base Intro Styles (Home Page) */
.intro-content {
    max-width: 800px;
    margin: 0 auto;
}

.intro-text {
    margin-bottom: var(--space-4);
    font-size: 1.1rem;
    color: var(--color-text);
}

/* Scoped Grid for Challenges & Methods Page */
.section-intro-challenges .intro-content,
.section-intro-methods .intro-content,
.section-intro-page .intro-content {
    max-width: 800px;
    margin: 0 auto;
    display: grid;
    gap: var(--space-4);
}

.section-intro-challenges .intro-text,
.section-intro-methods .intro-text,
.section-intro-page .intro-text {
    font-size: 1.1rem;
    color: var(--color-text);
    margin: 0;
}

.section-intro-challenges .intro-actions,
.section-intro-methods .intro-actions,
.section-intro-page .intro-actions {
    margin-top: var(--space-2);
}

/* Desktop: 2-Column Layout (Title Left, Text/Btn Right) */
@media (min-width: 900px) {

    .section-intro-challenges .intro-content,
    .section-intro-methods .intro-content {
        max-width: 1200px;
        /* Wider container */
        grid-template-columns: 1fr 1fr;
        /* 2 Cols */
        text-align: left;
        /* Left align text */
        align-items: flex-start;
        /* Vertical Center */
        gap: var(--space-3) var(--space-8);
    }

    .section-intro-challenges .page-title,
    .section-intro-methods .page-title {
        grid-column: 1;
        grid-row: 1 / span 2;
        /* Span both text and button rows */
        text-align: left;
        /* Ensure title is left aligned */
        margin-bottom: 0;
        font-size: 3.5rem;
        /* Make it big */
        line-height: 1.1;
    }

    .section-intro-challenges .intro-text,
    .section-intro-methods .intro-text {
        grid-column: 2;
        grid-row: 1;
    }

    .section-intro-challenges .intro-actions,
    .section-intro-methods .intro-actions {
        grid-column: 2;
        grid-row: 2;
        margin-top: 0;
        justify-self: start;
        /* Align button left */
    }
}

.section-challenges-list {
    padding: var(--space-6) 0 var(--space-12) 0;
}

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

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

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

.challenge-card {
    background: white;
    padding: 5vw;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-lg);
    text-align: left;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.challenge-card.is-expanded.no-resources+.challenge-card {
    height: fit-content;
    align-self: end;
}


.challenge-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-light);
}

@media (min-width: 900px) {
    .challenge-card {
        padding: var(--space-6);
    }
}

.challenge-card.is-highlighted {
    border: 2px solid var(--color-accent);
    background-color: #fffef9;
    /* Slight gold tint */
    order: -1;
    /* Ensure it floats to top flex/grid visually if needed, though PHP handles data order */
}

/* Expanded Active Card */
.challenge-card.is-expanded {
    grid-column: 1 / -1;
    /* Span full width */
    cursor: default;
    /* Not clickable */
    background-color: #fffef9;
    border: 2px solid var(--color-accent);
    box-shadow: var(--shadow-md);
    /* Not clickable */
    background-color: #fffef9;
    border: 2px solid var(--color-accent);
    box-shadow: var(--shadow-md);
    padding: 5vw;
    display: flex;
    /* Flexbox for layout */
    flex-direction: column;
    /* Mobile first: Stacked */
    gap: var(--space-6);
    order: -1;
    /* Always at top */
}

/* Restore Desktop Padding */
@media (min-width: 900px) {
    .challenge-card.is-expanded {
        padding: var(--space-8);
        gap: var(--space-8);
    }
}

.challenge-card.is-expanded:hover {
    transform: none;
    /* Disable hover lift */
}

/* Columns inside Expanded Card */
.challenge-content-col {
    flex: 1;
}

.challenge-resources-col {
    flex: 1;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: var(--space-6);
}

.challenge-resources-col h4 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.challenge-card.is-expanded h3 {
    font-size: 2rem;
    margin-bottom: var(--space-4);
    text-align: left;
    /* Reset to left */
}

/* Desktop: Side-by-Side (Matches 3-col grid) */
@media (min-width: 1024px) {
    .challenge-card.is-expanded {
        flex-direction: row;
        /* Side by side */
        align-items: flex-start;
    }

    .challenge-content-col {
        flex: 0 0 65%;
        /* 65% width */
    }

    .challenge-resources-col {
        flex: 0 0 30%;
        /* 30% width */
        border-top: none;
        border-left: 1px solid rgba(0, 0, 0, 0.1);
        padding-top: 0;
        padding-left: var(--space-8);
    }
}

.card-desc-full {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text);
    white-space: pre-wrap;
}

.challenge-card h3 {
    margin-bottom: var(--space-2);
    font-size: 1.25rem;
    color: var(--color-primary-dark);
}

.card-blurb {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 0px;
}

.highlight-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    background-color: var(--color-accent);
    color: var(--color-primary-dark);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: var(--shadow-sm);
}

/* Modal Specifics */
.challenge-modal-window {
    width: 600px;
    text-align: center;
}

.resources-section {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    text-align: left;
}

.resources-section h4 {
    font-size: 1rem;
    margin-bottom: var(--space-2);
    color: var(--color-primary);
}

.resources-section ul {
    list-style: none;
    padding: 0;
}

.resources-section li {
    margin-bottom: var(--space-2);
}

.resources-section a {
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid var(--color-secondary);
    transition: color 0.2s;
}

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

.modal-footer-cta {
    margin-top: var(--space-6);
}

@media (min-width: 900px) {
    .desktop-nav {
        display: flex;
    }

    .mobile-toggle,
    .mobile-actions {
        display: none;
    }
}

/* Updated Challenge Card Logic */
@media (min-width: 900px) {

    /* Condition: No Resources -> Span 2/3 and take full width of container */
    .challenge-card.is-expanded.no-resources {
        grid-column: 1 / -2;
        /* Leave last column empty */
    }

    .challenge-card.is-expanded.no-resources .challenge-content-col {
        flex: 0 0 100%;
        /* Take full width of the card */
    }
}

/* 
 * Methods Page Styles 
 */
.methods-page-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 768px) {
    .methods-page-grid {
        grid-template-columns: 1fr 1fr;
        /* 2 tiles per row */
    }
}

.method-card-full {
    background: white;
    padding: 5vw;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

@media (min-width: 900px) {
    .method-card-full {
        padding: var(--space-8);
    }
}

.method-card-full:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.method-card-full.is-highlighted {
    background-color: #fffef9;
    /* Slight warm tint */
    border: 2px solid var(--color-accent);
    order: -1;
    /* Move to front */
}

.method-title {
    font-size: 1.5rem;
    color: var(--color-primary-dark);
    margin-bottom: var(--space-2);
}

.method-desc {
    font-size: 1.05rem;
    color: var(--color-text);
    line-height: 1.7;
    margin-bottom: var(--space-6);
    flex-grow: 1;
    /* Push resources to bottom */
}

.method-resources h4 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.method-resources ul {
    list-style: none;
    padding: 0;
}

.method-resources li {
    margin-bottom: var(--space-1);
}

.method-resources a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

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

/* =========================================
   About Page Styles
   ========================================= */

/* --- Practice Section --- */
.section-about-practice {
    padding: var(--space-12) 0;
    background-color: var(--color-secondary-light);
    /* Sand */
    /* Flower of Life Pattern - Gold (40% opacity) - Start */
    background-image:
        radial-gradient(circle at 50% 50%, transparent 60%, rgba(212, 175, 55, 0.4) 61%, transparent 62%),
        radial-gradient(circle at 0% 50%, transparent 60%, rgba(212, 175, 55, 0.4) 61%, transparent 62%),
        radial-gradient(circle at 100% 50%, transparent 60%, rgba(212, 175, 55, 0.4) 61%, transparent 62%);
    background-size: 100px 100px;
    background-position: 0 0;
    /* End Pattern */
}

.about-grid-practice {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

.practice-info h1 {
    margin-bottom: var(--space-4);
}

.practice-subtext {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    font-weight: 300;
}

.practice-details {
    background-color: var(--color-bg);
    /* Cream/Off-white */
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.details-heading {
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: var(--space-4);
    border-bottom: 2px solid var(--color-accent);
    /* Gold line */
    display: inline-block;
    padding-bottom: var(--space-2);
}

.details-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.details-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    font-size: 1rem;
    color: var(--color-primary-dark);
}

.details-list .icon {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
    margin-top: -0.2em;
    flex-shrink: 0;
    height: 1em;
}

/* --- Office Section --- */
.section-about-office {
    padding: var(--space-8) 0;
    background-color: white;
}

.about-grid-office {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: center;
}

.office-info {
    order: 1;
}

.office-address a {
    font-size: 1.1rem;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    margin-top: var(--space-4);
    line-height: 1.5;
    border-left: 3px solid var(--color-accent);
    padding-left: var(--space-3);
}

.local-areas-text {
    font-size: 0.9rem;
    color: var(--color-secondary);
    margin-top: var(--space-2);
    max-width: fit-content;
}

.office-gallery {
    order: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--space-2);
}

.gallery-item {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--radius-md);
    aspect-ratio: 1 / 1;
    transition: transform 0.2s;
}

.gallery-item:hover {
    transform: scale(1.02);
}

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

/* --- Map Section --- */
.section-about-map {
    width: 100%;
    /* No padding, full bleed */
    background-color: #f0f0f0;
    padding: 0;
}

/* --- Bio Section --- */
.section-about-bio {
    padding: var(--space-8) 0;
    /* Swapped to Cream (bg) */
    background-color: var(--color-bg);
}

.about-bio-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

.bio-content-wrapper {
    /* Container for Float logic */
    display: block;
}

/* Float Image Logic */
.bio-image-float {
    /* "200px max width and then vw based at smaller screens" */
    width: 40vw;
    max-width: 200px;
    height: auto;

    float: right;
    margin: 0 0 var(--space-4) var(--space-4);

    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    display: block;
    position: relative;
    /* For Overlay */
}

.bio-image-float img {
    width: 100%;
    display: block;
    transition: transform 0.3s ease;
}

.bio-image-float:hover img {
    transform: scale(1.05);
}

/* Video Overlay */
.bio-video-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--space-2);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: white;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    opacity: 0.9;
    transition: opacity 0.3s;
}

/* Intro Read More */
.read-more-link {
    background: none;
    border: none;
    color: var(--color-primary);
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
    margin-top: var(--space-2);
}

/* Force hide when expanded */
.read-more-link[aria-expanded="true"] {
    display: none !important;
}

.bio-image-float:hover .bio-video-overlay {
    opacity: 1;
}

.play-triangle {
    font-size: 0.8rem;
    color: var(--color-accent);
}

.play-text {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bio-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: var(--space-4);
}

/* Sidebar Cards */
.credentials-card {
    /* Explicitly White Surface now */
    background-color: var(--color-surface);
    margin-bottom: var(--space-6);
}

.credentials-card h4 {
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: var(--space-4);
    border-bottom: 2px solid var(--color-accent);
    display: inline-block;
    padding-bottom: var(--space-2);
}

.credentials-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.credentials-card li {
    margin-bottom: var(--space-2);
    font-size: 1rem;
    color: var(--color-primary-dark);
}

/* Connect Section (No Tile) */
.connect-section {
    margin-top: var(--space-4);
}

.connect-buttons-row {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.connect-btn {
    /* Square Ghost Style */
    flex: none;
    /* Don't stretch */
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);

    border-radius: var(--radius-md);
    transition: all 0.2s;
    padding: 0;
    /* Icon only */
}

.connect-btn:hover {
    background-color: var(--color-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.connect-btn svg {
    width: 24px;
    height: 24px;
}

/* Tablet (600px - 900px) */
@media (min-width: 600px) and (max-width: 899px) {
    .about-grid-office {
        /* Standard stack, but gallery needs special treatment */
        grid-template-columns: 1fr;
    }

    .office-gallery {
        /* 4 images in a row */
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
    }
}

/* Desktop Shifts */
@media (min-width: 900px) {
    .about-bio-layout {
        /* "Right column more space" -> 1.5fr 1fr (~60/40) instead of 2fr 1fr */
        grid-template-columns: 1.5fr 1fr;
        align-items: start;
        gap: var(--space-8);
    }

    /* Removed redundant .bio-image-float override since it's global now */

    .about-grid-practice {
        grid-template-columns: 1fr 1fr;
        /* 50/50 */
        align-items: start;
    }

    .about-grid-office {
        grid-template-columns: 1fr 1fr;
        /* 50/50 */
    }

    .office-gallery {
        order: 1;
        /* Images Left */
    }

    .office-info {
        order: 2;
        /* Text Right */
        padding-left: var(--space-6);
        /* Add breathing room */
    }
}

/* --- Lightbox Styles --- */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background-color: rgba(62, 83, 67, 0.9);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    user-select: none;
}

.lightbox-overlay.is-visible {
    opacity: 1;
    width: 100%;
    height: 100%;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 3rem;
    cursor: pointer;
    line-height: 1;
    z-index: 10001;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 3rem;
    padding: 0 20px;
    cursor: pointer;
    transition: background 0.2s;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Default Page Content Constraint */
.page-template-default .entry-content {
    max-width: 700px;
    margin: 0 auto;
}

.lightbox-nav.prev {
    left: 0;
}

.lightbox-nav.next {
    right: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 12px;
    z-index: 100000;
    padding: 10px 14px;
    border-radius: 6px;
    background: #111;
    color: #fff;
    text-decoration: none;
}

.skip-link:focus {
    left: 12px;
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}