/*
Theme Name: Gold Thread 011226-5
Theme URI: https://goldthreadllc.com
Author: Julie Averill
Author URI: https://goldthreadllc.com
Description: Professional website for Julie Averill featuring custom contact forms, final book cover, and updated imagery. Rich Jewel color palette with deep emerald, sapphire, and gold accents. All Calendly integrations removed and replaced with custom contact forms that capture inquiry details before scheduling.
Version: 011226-5
Requires at least: 5.8
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: goldthread-011226-5
Tags: blog, custom-menu, featured-images, threaded-comments, translation-ready

Changelog:
- 011226-5 (January 12, 2026): Fixed button text legibility
  * Primary button: Darker text color (#084030) and bolder weight (800) for better contrast on gold
  * Added btn-secondary-light class for secondary buttons on dark backgrounds (cream text/border)
  * Hero section now uses btn-secondary-light for "Book Me to Speak" button
- 011226-4 (January 12, 2026): Fixed book page text legibility and home image size
  * Book page: Added inline cream color to all description text for visibility on dark background
  * Home page: Added max-width constraints to hero image (280px) to prevent oversizing
- 011226-3 (January 12, 2026): Reduced hero image size
  * Hero image reduced from 350px to 280px for better text spacing
- 011226-2 (January 12, 2026): New hero layout with photo on left
  * Restructured hero: headline full width, then photo left (350px) with description/buttons right
  * Added new professional headshot (julie-hero-new.jpg)
- 011226-1 (January 12, 2026): Rich Jewel palette with alternating sections and praise
  * Rich Jewel color palette (emerald #0a4d3c, sapphire #1a4d7f, gold accents)
  * Larger logo (2rem) and icon (42px) in header
  * Updated hero: removed tagline, added "Speaker, Author, Board Director" subtitle
  * Changed button text to "Get Book Updates"
  * Alternating dark/light sections throughout home page
  * Added book praise section with 4 testimonials (2-column grid)
  * Hero section now dark emerald/sapphire gradient
  * Book section now light cream gradient
  * Services section now dark with frosted glass cards
- 010826-3 (January 12, 2026): Rich Jewel color palette
  * Updated from Slate & Bronze to Rich Jewel palette
  * Deep emerald (#0a4d3c) and sapphire (#1a4d7f) replace previous blues
  * Gold highlighting maintained and enhanced with new jewel tone backgrounds
  * Primary buttons now use gold gradient with emerald text
  * Credentials bar, book section use emerald-to-sapphire gradients
  * Service cards and accents updated to complement jewel tones
- 010826-2 (January 8, 2026): Updated hero image
  * Home page: New professional headshot in black dress with warm smile
- 010727-6 (January 7, 2026): Fixed image positioning
  * Adjusted top right panel image positioning to show full head (object-position: center 20%)
- 010727-5 (January 7, 2026): Version increment
- 010727-4 (January 7, 2026): Refined speaking gallery images
  * Top left: White blazer keynote with blue/red backdrop (executive presence)
  * Top right: White shirt panel discussion (engaged conversation)
  * Stronger visual storytelling showing speaking range
- 010727-3 (January 7, 2026): Added speaking gallery with real photos
  * Speaking page: 6-photo gallery showing actual speaking engagements
  * Images include lululemon events, panels, outdoor events, China, UW commencement
  * Responsive 3-column grid (adapts to tablet/mobile)
- 010727-2 (January 7, 2026): Updated hero images
  * Home page: Black dress standing photo (professional)
  * About page: White shirt casual sitting photo (approachable)
  * Advisory page: Black suit leaning photo (executive confidence)
- 010727-1 (January 7, 2026): Complete Calendly removal with custom contact forms
  * Replaced all Calendly widgets with tailored contact forms (Advisory, Speaking, Contact)
  * Added contact form submission handling and admin interface
  * Updated final book cover image
  * Removed all Calendly dependencies (scripts, settings, shortcodes)
  * Added form validation and AJAX submission
  * Added email notifications for form submissions
  * Added CSV export for contact submissions
*/

/* ============================================
   CSS VARIABLES & FOUNDATION
   ============================================ */

:root {
    /* Brand Colors - Rich Jewel */
    --color-deep-blue: #0a4d3c;
    --color-navy: #1a4d7f;
    --color-warm-terracotta: #0d6b52;
    --color-coral: #2680b8;
    --color-sunshine: #d4a320;
    --color-cream: #fefbf3;
    --color-soft-cream: #fefbf3;
    --color-warm-white: #ffffff;
    --color-sage: #81b29a;
    --color-text-dark: #1a1a1a;
    --color-text-medium: #4a4a4a;
    --color-text-light: #6a6a6a;
    
    /* Legacy color aliases for template compatibility */
    --color-charcoal: #0a4d3c;
    --color-charcoal-light: #0d6b52;
    --color-charcoal-dark: #073529;
    --color-gold: #d4a320;
    --color-gold-light: #f4d03f;
    --color-gold-dark: #b8860b;
    --color-warm-gray: #4a4a4a;
    --color-warm-gray-light: #6a6a6a;
    
    /* Typography - Distinctive & Warm */
    --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Crimson Pro', Georgia, serif;
    --font-accent: 'DM Serif Display', Georgia, serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;
    --spacing-2xl: 8rem;
    
    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-medium: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Container */
    --container-max: 1200px;
    --container-narrow: 800px;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(61, 70, 84, 0.08);
    --shadow-md: 0 8px 24px rgba(61, 70, 84, 0.12);
    --shadow-lg: 0 16px 48px rgba(61, 70, 84, 0.16);
    --shadow-book: 0 20px 60px rgba(184, 134, 11, 0.25), 0 8px 16px rgba(184, 134, 11, 0.15);
}

/* ============================================
   RESET & BASE
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@400;500&family=Libre+Baskerville:wght@400;700&display=swap');

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--color-text-dark);
    background-color: var(--color-soft-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

a {
    color: var(--color-deep-blue);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-gold);
}

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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-deep-blue);
    letter-spacing: -0.02em;
}

h1 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 800;
}

h2 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 600;
}

h4 {
    font-size: 1.5rem;
    font-weight: 600;
}

p {
    margin-bottom: 1.5rem;
}

strong {
    font-weight: 600;
}

.text-accent {
    color: var(--color-deep-blue);
}

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

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

.container-narrow {
    max-width: var(--container-narrow);
}

.section {
    padding: var(--spacing-xl) 0;
    position: relative;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(254, 251, 243, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 2px solid rgba(212, 163, 32, 0.15);
    transition: all var(--transition-medium);
}

.site-header.scrolled {
    background: rgba(254, 251, 243, 0.98);
    box-shadow: var(--shadow-sm);
    border-bottom-color: rgba(212, 163, 32, 0.25);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    max-width: var(--container-max);
    margin: 0 auto;
}

.site-logo {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-deep-blue);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: transform var(--transition-fast);
}

.site-logo:hover {
    transform: translateY(-2px);
}

.site-logo .thread-icon {
    width: 42px;
    height: 42px;
    stroke: var(--color-gold);
    stroke-width: 2.5;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

.main-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.main-nav a {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    position: relative;
    padding: 0.5rem 0;
    transition: color var(--transition-fast);
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-warm-terracotta), var(--color-coral));
    transition: width var(--transition-fast), left var(--transition-fast);
    border-radius: 2px;
}

.main-nav a:hover::after,
.main-nav a.active::after {
    width: 100%;
    left: 0;
}

.main-nav a:hover {
    color: var(--color-warm-terracotta);
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.mobile-menu-toggle span {
    display: block;
    width: 28px;
    height: 3px;
    background: var(--color-deep-blue);
    margin: 5px 0;
    transition: var(--transition-fast);
    border-radius: 2px;
}

/* ============================================
   HERO SECTION - ENERGETIC & BOOK-FORWARD
   ============================================ */

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 80px;
    background: linear-gradient(135deg, var(--color-deep-blue), var(--color-navy));
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -10%;
    width: 60%;
    height: 120%;
    background: radial-gradient(circle, rgba(212, 163, 32, 0.08) 0%, transparent 70%);
    animation: float 15s ease-in-out infinite;
    pointer-events: none;
}

.hero::after {
    content: '📚';
    position: absolute;
    font-size: 15rem;
    opacity: 0.03;
    bottom: -5%;
    left: -5%;
    animation: rotate-slow 30s linear infinite;
    pointer-events: none;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(20px, -30px) rotate(5deg); }
    66% { transform: translate(-20px, 20px) rotate(-5deg); }
}

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

.hero-compact {
    min-height: 85vh;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-content-stacked {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    position: relative;
    z-index: 1;
}

.hero-headline-section {
    text-align: left;
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-lower-section {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--spacing-xl);
    align-items: start;
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

.hero-image-left {
    position: relative;
    max-width: 280px;
}

.hero-image-left img {
    width: 100%;
    max-width: 280px;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-medium);
}

.hero-image-left:hover img {
    transform: scale(1.02);
}

.hero-text-right {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.hero-message-first {
    grid-template-columns: 1.2fr 0.8fr;
}

.hero-text {
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.hero-tagline {
    font-family: var(--font-accent);
    font-size: 1.25rem;
    font-style: italic;
    color: var(--color-gold);
    margin-bottom: var(--spacing-sm);
    letter-spacing: 0.02em;
    position: relative;
    display: inline-block;
}

.hero-tagline::before {
    content: '✨';
    margin-right: 0.5rem;
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

.hero h1 {
    margin-bottom: var(--spacing-sm);
    line-height: 1.05;
    color: var(--color-cream);
}

.hero-subtitle {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-cream);
    margin-bottom: var(--spacing-md);
    letter-spacing: 0.02em;
}

.hero h1 span {
    color: var(--color-warm-terracotta);
    position: relative;
    display: inline-block;
}

.hero h1 strong {
    color: var(--color-coral);
    font-weight: 800;
    background: linear-gradient(135deg, var(--color-warm-terracotta), var(--color-coral));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Gold Gradient Treatment - Prestigious shimmer effect */
.gold-gradient {
    background: linear-gradient(90deg, 
        #d4a574 0%,     /* Lighter champagne gold */
        #b8860b 25%,    /* Rich gold */
        #d4a320 50%,    /* Bright gold center */
        #b8860b 75%,    /* Rich gold */
        #9b7510 100%    /* Darker muted gold - the fade */
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    position: relative;
}

.hero-description {
    font-size: 1.3rem;
    color: rgba(254, 251, 243, 0.9);
    margin-bottom: var(--spacing-md);
    line-height: 1.7;
}

.hero-buttons {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.hero-image-small {
    position: relative;
    display: inline-block;
    max-width: 350px;
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

.hero-image-small img {
    width: 100%;
    max-width: 350px;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-medium);
}

.hero-image-small:hover img {
    transform: scale(1.02) rotate(-1deg);
}

.hero-image-small::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    border: 3px dashed var(--color-warm-terracotta);
    border-radius: 12px;
    z-index: -1;
    opacity: 0.5;
}

/* ============================================
   BUTTONS - PLAYFUL & DISTINCTIVE
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 1.1rem 2.25rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all var(--transition-medium);
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.5s, height 0.5s;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-gold), var(--color-gold-light));
    color: #084030;
    box-shadow: var(--shadow-md);
    font-weight: 800;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: transparent;
    color: var(--color-deep-blue);
    border: 2px solid var(--color-deep-blue);
}

.btn-secondary:hover {
    background: var(--color-deep-blue);
    color: var(--color-warm-white);
    transform: translateY(-3px);
}

/* For secondary buttons on dark backgrounds */
.btn-secondary-light {
    background: transparent;
    color: var(--color-cream);
    border: 2px solid var(--color-cream);
}

.btn-secondary-light:hover {
    background: var(--color-cream);
    color: var(--color-deep-blue);
    transform: translateY(-3px);
}

.btn-large {
    padding: 1.4rem 3rem;
    font-size: 1.05rem;
}

/* ============================================
   BOOK SECTION - STAR OF THE SHOW
   ============================================ */

.book-section {
    background: linear-gradient(135deg, var(--color-soft-cream) 0%, #fff5e1 50%, var(--color-cream) 100%);
    color: var(--color-text-dark);
    padding: var(--spacing-2xl) 0;
    position: relative;
    overflow: hidden;
}

.book-section::before {
    content: '⭐';
    position: absolute;
    font-size: 20rem;
    opacity: 0.03;
    top: -10%;
    right: -5%;
    animation: rotate-slow 40s linear infinite;
}

.book-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to top, var(--color-soft-cream), transparent);
    pointer-events: none;
}

.book-content {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--spacing-xl);
    align-items: center;
    position: relative;
    z-index: 1;
}

.book-cover-featured {
    position: relative;
}

.book-cover-featured img {
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
    box-shadow: 
        0 20px 60px rgba(184, 134, 11, 0.3),
        0 8px 16px rgba(184, 134, 11, 0.2),
        0 0 80px rgba(184, 134, 11, 0.15);
}

.book-cover-featured::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(212, 163, 32, 0.2) 0%, transparent 70%);
    z-index: -1;
    border-radius: 50%;
}

.book-info h2 {
    color: var(--color-deep-blue);
    margin-bottom: var(--spacing-sm);
}

.book-info h2 span {
    background: linear-gradient(135deg, var(--color-gold), var(--color-gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.book-label {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-gold);
    margin-bottom: var(--spacing-xs);
    display: inline-block;
    padding: 0.4rem 1rem;
    background: rgba(212, 163, 32, 0.1);
    border-radius: 20px;
    border: 1px solid rgba(212, 163, 32, 0.3);
}

.book-subtitle {
    font-family: var(--font-accent);
    font-size: 1.5rem;
    font-style: italic;
    color: var(--color-text-medium);
    margin-bottom: var(--spacing-md);
}

.book-description {
    font-size: 1.2rem;
    color: var(--color-text-medium);
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
}

.book-release {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gold);
    margin-bottom: var(--spacing-md);
}

/* ============================================
   SIGNUP FORMS - ENERGETIC
   ============================================ */

.signup-form {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-sm);
}

.signup-form input[type="email"] {
    flex: 1;
    min-width: 250px;
    padding: 1.2rem 1.75rem;
    font-size: 1rem;
    font-family: var(--font-body);
    border: 2px solid rgba(10, 77, 60, 0.2);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.6);
    color: var(--color-text-dark);
    transition: all var(--transition-fast);
}

.signup-form input[type="email"]::placeholder {
    color: rgba(10, 77, 60, 0.5);
}

.signup-form input[type="email"]:focus {
    outline: none;
    border-color: var(--color-gold);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 4px rgba(212, 163, 32, 0.15);
}

.signup-privacy {
    font-size: 0.9rem;
    color: var(--color-text-medium);
    font-style: italic;
}

/* ============================================
   BOOK PRAISE - TESTIMONIALS
   ============================================ */

.book-praise {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-2xl);
    border-top: 2px solid rgba(10, 77, 60, 0.1);
}

.praise-header {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-deep-blue);
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.praise-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.praise-card {
    background: var(--color-warm-white);
    padding: var(--spacing-md);
    border-radius: 12px;
    border-left: 4px solid var(--color-gold);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-medium);
    position: relative;
}

.praise-card::before {
    content: '"';
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 4rem;
    font-family: var(--font-accent);
    color: rgba(212, 163, 32, 0.1);
    line-height: 1;
}

.praise-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-left-width: 6px;
}

.praise-text {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-style: italic;
    color: var(--color-text-dark);
    line-height: 1.7;
    margin-bottom: var(--spacing-sm);
    position: relative;
    z-index: 1;
}

.praise-author {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-deep-blue);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid rgba(10, 77, 60, 0.1);
}

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

/* ============================================
   SERVICE CARDS - PLAYFUL
   ============================================ */

.services-overview {
    background: linear-gradient(135deg, var(--color-deep-blue), var(--color-navy));
    padding: var(--spacing-2xl) 0;
}

.services-row {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.service-card-compact {
    flex: 1;
    min-width: 280px;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    transition: all var(--transition-medium);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.service-card-compact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(212, 163, 32, 0.1), rgba(244, 208, 63, 0.1));
    opacity: 0;
    transition: opacity var(--transition-medium);
}

.service-card-compact:hover {
    border-color: var(--color-gold);
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(212, 163, 32, 0.2);
    background: rgba(255, 255, 255, 0.15);
}

.service-card-compact:hover::before {
    opacity: 1;
}

.service-icon-small {
    width: 48px;
    height: 48px;
    stroke: var(--color-gold);
    flex-shrink: 0;
    transition: transform var(--transition-bounce);
}

.service-card-compact:hover .service-icon-small {
    transform: scale(1.1) rotate(5deg);
}

.service-card-content {
    flex: 1;
}

.service-card-content h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--color-cream);
}

.service-card-content p {
    color: rgba(254, 251, 243, 0.85);
    font-size: 1rem;
    margin-bottom: 0;
    line-height: 1.6;
}

.service-arrow {
    font-size: 1.5rem;
    color: var(--color-gold);
    transition: transform var(--transition-fast);
}

.service-card-compact:hover .service-arrow {
    transform: translateX(5px);
}

/* ============================================
   EXCERPTS - ENGAGING
   ============================================ */

.excerpts-section {
    background: var(--color-cream);
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.section-header h2 {
    margin-bottom: var(--spacing-sm);
}

.section-subtitle {
    font-family: var(--font-accent);
    font-size: 1.3rem;
    font-style: italic;
    color: var(--color-text-medium);
}

.excerpts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-md);
}

.excerpt-card {
    background: var(--color-warm-white);
    padding: var(--spacing-md);
    border-radius: 12px;
    border-left: 4px solid var(--color-warm-terracotta);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-medium);
    position: relative;
}

.excerpt-card::before {
    content: '"';
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 5rem;
    font-family: var(--font-accent);
    color: rgba(224, 122, 95, 0.08);
    line-height: 1;
}

.excerpt-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-left-width: 6px;
}

.excerpt-chapter {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-warm-terracotta);
    margin-bottom: var(--spacing-sm);
}

.excerpt-text {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--color-text-dark);
    line-height: 1.7;
    margin-bottom: var(--spacing-sm);
    position: relative;
    z-index: 1;
}

.excerpt-context {
    font-size: 0.9rem;
    color: var(--color-text-light);
    font-style: italic;
}

/* ============================================
   CREDENTIALS - CELEBRATORY
   ============================================ */

.credentials-bar {
    background: linear-gradient(135deg, var(--color-deep-blue), var(--color-navy));
    color: var(--color-warm-white);
    padding: var(--spacing-md) 0;
}

.credentials-inline {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.credential-chip {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    transition: all var(--transition-fast);
}

.credential-chip:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.credential-chip strong {
    color: var(--color-gold-light);
}

.credential-divider {
    font-size: 1.5rem;
    opacity: 0.5;
}

/* Impact Stats Cards - About Page */
.stat-card {
    text-align: center;
    background: var(--color-warm-white);
    padding: var(--spacing-md);
    border-radius: 8px;
    border: 1px solid rgba(212, 163, 32, 0.15);
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(212, 163, 32, 0.15);
    border-color: rgba(212, 163, 32, 0.3);
}

.stat-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-xs);
    filter: grayscale(0.2);
}

.stat-value {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, 
        #d4a574 0%, 
        #b8860b 50%, 
        #9b7510 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    margin-bottom: var(--spacing-xs);
}

.stat-label {
    color: var(--color-warm-gray);
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 500;
}

/* Speaking Highlight Cards */
.speaking-highlight-card {
    background: var(--color-warm-white);
    border: 2px solid rgba(212, 163, 32, 0.25);
    border-radius: 12px;
    padding: var(--spacing-lg);
    text-align: center;
    transition: all 0.3s ease;
}

.speaking-highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(212, 163, 32, 0.2);
    border-color: rgba(212, 163, 32, 0.5);
}

.highlight-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-sm);
    filter: grayscale(0.1);
}

.speaking-highlight-card h4 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    background: linear-gradient(135deg, 
        #d4a574 0%, 
        #b8860b 50%, 
        #9b7510 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.speaking-highlight-card p {
    color: var(--color-warm-gray);
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}

/* ============================================
   CONTACT CTA - WARM & INVITING
   ============================================ */

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

/* Contact Grid Layout */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--spacing-xl);
    align-items: start;
}

.contact-details {
    position: sticky;
    top: calc(80px + var(--spacing-md));
}

.contact-services {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.contact-service-item {
    display: flex;
    gap: var(--spacing-sm);
    align-items: start;
}

.service-icon {
    font-size: 2rem;
    flex-shrink: 0;
    opacity: 0.8;
}

.contact-service-item h4 {
    color: var(--color-deep-blue);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
}

.contact-service-item p {
    color: var(--color-warm-gray);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

.calendly-container {
    background: var(--color-warm-white);
    border: 2px solid rgba(212, 163, 32, 0.15);
    border-radius: 12px;
    padding: var(--spacing-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

@media (max-width: 968px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .contact-details {
        position: static;
    }
}

.contact-cta-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--color-warm-white);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    border: 2px solid rgba(212, 163, 32, 0.2);
}

.contact-cta-text h2 {
    margin-bottom: var(--spacing-sm);
}

.contact-cta-text h2 span {
    color: var(--color-warm-terracotta);
}

.contact-cta-text p {
    font-size: 1.2rem;
    color: var(--color-text-medium);
    margin-bottom: var(--spacing-sm);
    max-width: 500px;
}

.social-links {
    display: flex;
    gap: var(--spacing-sm);
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-warm-terracotta);
    padding: 0.6rem 1.2rem;
    background: rgba(224, 122, 95, 0.1);
    border-radius: 30px;
    transition: all var(--transition-fast);
}

.social-link:hover {
    background: var(--color-warm-terracotta);
    color: var(--color-warm-white);
    transform: translateY(-2px);
}

.social-link svg {
    width: 20px;
    height: 20px;
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
    background: var(--color-deep-blue);
    color: rgba(253, 246, 227, 0.8);
    padding: var(--spacing-lg) 0 var(--spacing-md);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.footer-text {
    font-size: 0.95rem;
}

.footer-links {
    display: flex;
    gap: var(--spacing-md);
}

.footer-links a {
    color: rgba(253, 246, 227, 0.8);
    font-size: 0.9rem;
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--color-sunshine);
}

/* ============================================
   ANIMATIONS
   ============================================ */

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.stagger-1 { transition-delay: 0.15s; }
.stagger-2 { transition-delay: 0.3s; }
.stagger-3 { transition-delay: 0.45s; }
.stagger-4 { transition-delay: 0.6s; }

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1024px) {
    .hero-content,
    .hero-message-first,
    .book-content,
    .contact-cta-box {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .hero-image-small {
        order: -1;
        text-align: center;
    }
    
    .hero-image-small img {
        margin: 0 auto;
    }
    
    .book-cover-featured {
        text-align: center;
    }
    
    .book-cover-featured img {
        margin: 0 auto;
    }
    
    .services-row {
        flex-direction: column;
    }
    
    .credentials-inline {
        gap: var(--spacing-sm);
    }
    
    .credential-divider {
        display: none;
    }
    
    .contact-cta-box {
        flex-direction: column;
        text-align: center;
    }
    
    .contact-cta-text p {
        margin-left: auto;
        margin-right: auto;
    }
    
    .social-links {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    :root {
        --spacing-xl: 4rem;
        --spacing-lg: 3rem;
    }
    
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-soft-cream);
        flex-direction: column;
        padding: var(--spacing-md);
        border-bottom: 2px solid rgba(224, 122, 95, 0.2);
        box-shadow: var(--shadow-sm);
    }
    
    .main-nav.active {
        display: flex;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .hero {
        min-height: auto;
        padding: calc(80px + var(--spacing-lg)) 0 var(--spacing-lg);
    }
    
    .hero-compact {
        padding: calc(80px + var(--spacing-md)) 0 var(--spacing-lg);
    }
    
    .signup-form {
        flex-direction: column;
    }
    
    .signup-form input[type="email"] {
        min-width: 100%;
    }
    
    .excerpts-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 15px;
    }
    
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    .hero-buttons {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
    }
    
    .credentials-inline {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
}

/* ============================================
   PAGE TRANSITIONS
   ============================================ */

.page-transition {
    animation: pageIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* ============================================
   CONTRAST IMPROVEMENTS FOR ACCESSIBILITY
   ============================================ */

/* Better text contrast on dark backgrounds */
.hero-description {
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
    opacity: 1 !important;
}

/* Ensure headings are bold and visible on dark backgrounds */
section[style*="background"] h1,
section[style*="background"] h2 {
    font-weight: 700;
}

/* Better contrast for body text on light backgrounds */
.topic-card p,
.service-card-content p,
.excerpt-text,
.book-narrative p {
    color: var(--color-text-dark);
    font-weight: 500;
}

/* Headings with better weight */
.topic-card h4,
.service-card-content h3,
section h3,
section h4 {
    font-weight: 700;
    color: var(--color-text-dark);
}

/* Better visibility for colored text */
.hero-tagline {
    font-weight: 600;
}

/* Improved contrast for links */
a {
    font-weight: 500;
}

/* Better readability for list items */
ul li, ol li {
    color: var(--color-text-dark);
    font-weight: 500;
}

/* Credentials and stats */
.credential-value,
.credential-chip strong {
    font-weight: 700;
}

/* Section subtitles */
.section-subtitle {
    color: var(--color-text-medium);
    font-weight: 500;
}

/* Ensure lists on dark backgrounds are always readable */
section[style*="background: var(--color-charcoal)"] ul li,
section[style*="background: var(--color-deep-blue)"] ul li,
section[style*="background: linear-gradient"] ul li {
    color: var(--color-cream) !important;
    font-weight: 500 !important;
    font-size: 1.1rem;
    line-height: 1.9;
    margin-bottom: var(--spacing-sm);
}

/* Paragraphs on dark backgrounds */
section[style*="background: var(--color-charcoal)"] p,
section[style*="background: var(--color-deep-blue)"] p,
section[style*="background: linear-gradient(135deg, var(--color-deep-blue)"] p {
    color: var(--color-cream) !important;
    font-weight: 500 !important;
}

/* Advisory Focus Cards - Elegant numbered card layout */
.advisory-focus-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.focus-card {
    background: var(--color-warm-white);
    border: 1px solid rgba(212, 163, 32, 0.3);
    border-radius: 8px;
    padding: var(--spacing-md);
    position: relative;
    transition: all 0.3s ease;
}

.focus-card:hover {
    background: var(--color-soft-cream);
    border-color: rgba(212, 163, 32, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 163, 32, 0.2);
}

.focus-number {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, 
        #d4a574 0%, 
        #b8860b 50%, 
        #9b7510 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: var(--spacing-xs);
    opacity: 0.8;
}

.focus-card h4 {
    color: var(--color-deep-blue);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
}

.focus-card p {
    color: var(--color-warm-gray);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
    font-weight: 400;
}

/* ============================================
   CONTACT FORMS - CUSTOM STYLING
   ============================================ */

.contact-form {
    background: var(--color-warm-white);
    border: 2px solid rgba(212, 163, 32, 0.15);
    border-radius: 12px;
    padding: var(--spacing-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.contact-form .form-group {
    margin-bottom: var(--spacing-md);
}

.contact-form .form-group.full-width {
    grid-column: 1 / -1;
}

.contact-form label {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-deep-blue);
    margin-bottom: 0.5rem;
}

.contact-form label .required {
    color: #b8860b;
    margin-left: 0.25rem;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="date"],
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text-dark);
    background: var(--color-soft-cream);
    border: 2px solid rgba(61, 70, 84, 0.15);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="date"]:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #b8860b;
    background: var(--color-warm-white);
    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.1);
}

.contact-form textarea {
    min-height: 150px;
    resize: vertical;
    line-height: 1.6;
}

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

.contact-form .form-hint {
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin-top: 0.375rem;
    font-style: italic;
}

.contact-form button[type="submit"] {
    width: 100%;
    margin-top: var(--spacing-sm);
}

.contact-form .form-footer {
    text-align: center;
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(61, 70, 84, 0.1);
    font-size: 0.875rem;
    color: var(--color-text-light);
}

/* Form message styling */
.form-message {
    padding: 1rem;
    border-radius: 8px;
    margin-top: var(--spacing-sm);
    font-weight: 500;
    text-align: center;
}

.form-message.success {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.form-message.error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .contact-form {
        padding: var(--spacing-md);
    }
    
    .contact-form .form-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
}

/* Contact form on dark background (speaking page) */
.section[style*="background: var(--color-charcoal)"] .contact-form,
.section[style*="background-color: var(--color-charcoal)"] .contact-form {
    background: var(--color-charcoal-light);
    border-color: rgba(212, 163, 32, 0.3);
}

.section[style*="background: var(--color-charcoal)"] .contact-form label,
.section[style*="background-color: var(--color-charcoal)"] .contact-form label {
    color: var(--color-cream);
}

.section[style*="background: var(--color-charcoal)"] .contact-form input,
.section[style*="background: var(--color-charcoal)"] .contact-form textarea,
.section[style*="background: var(--color-charcoal)"] .contact-form select,
.section[style*="background-color: var(--color-charcoal)"] .contact-form input,
.section[style*="background-color: var(--color-charcoal)"] .contact-form textarea,
.section[style*="background-color: var(--color-charcoal)"] .contact-form select {
    background: var(--color-charcoal);
    border-color: rgba(212, 163, 32, 0.2);
    color: var(--color-cream);
}

.section[style*="background: var(--color-charcoal)"] .contact-form input::placeholder,
.section[style*="background: var(--color-charcoal)"] .contact-form textarea::placeholder,
.section[style*="background-color: var(--color-charcoal)"] .contact-form input::placeholder,
.section[style*="background-color: var(--color-charcoal)"] .contact-form textarea::placeholder {
    color: rgba(253, 246, 227, 0.5);
}

.section[style*="background: var(--color-charcoal)"] .contact-form .form-hint,
.section[style*="background: var(--color-charcoal)"] .contact-form .form-footer,
.section[style*="background-color: var(--color-charcoal)"] .contact-form .form-hint,
.section[style*="background-color: var(--color-charcoal)"] .contact-form .form-footer {
    color: rgba(253, 246, 227, 0.7);
}

/* Mobile responsiveness for speaking page two-column layout */
@media (max-width: 968px) {
    .section[style*="background: var(--color-charcoal)"] .container > div[style*="grid-template-columns: 1fr 1fr"],
    .section[style*="background-color: var(--color-charcoal)"] .container > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-lg) !important;
    }
}

/* Speaking Page Gallery - Responsive */
@media (max-width: 968px) {
    .section [style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .section [style*="grid-template-columns: repeat(3, 1fr)"],
    .section [style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
}

/* Hero stacked layout - Responsive */
@media (max-width: 968px) {
    .hero-lower-section {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .hero-image-left {
        max-width: 300px;
        margin: 0 auto;
    }
    
    .hero-text-right {
        text-align: center;
    }
    
    .hero-buttons {
        justify-content: center;
    }
}