@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap');

/* Smooth scroll behavior with reduced motion support */
html {
    scroll-behavior: smooth;
}

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

/* Reset conflicting grids and layout systems */
* {
    box-sizing: border-box;
}

/* Clear any conflicting grid inheritance */
.container > * {
    grid-column: unset;
    grid-row: unset;
}

/* Fix container nesting - only one container per section */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    /* Remove any grid properties from container */
    display: block; /* Override any grid display */
}

/* Make sure each grid is independent */
.overview-grid,
.strategy-grid,
.elements-grid,
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
    /* Isolate from parent containers */
    width: 100%;
    clear: both;
}

/* Override any inherited grid properties */
.overview-grid > *,
.strategy-grid > *,
.elements-grid > *,
.metrics-grid > * {
    grid-column: unset;
    grid-row: unset;
}

/* Clear flexbox conflicts */
.nav-container,
.footer-content {
    display: flex; /* Only specific elements should use flex */
}

/* Everything else should be block or grid, not flex */
section:not(.nav):not(.footer) {
    display: block;
}

:root {
    /* Brand Colors */
    --coral-red: #F96F6E;
    --cool-gray: #4A5568;
    --warm-cream: #FFF8F0;
    --deep-black: #1A1A1A;
    
    /* Dark Theme Colors */
    --bg-primary: #0F0F0F;
    --bg-secondary: #1A1A1A;
    --bg-tertiary: #2A2A2A;
    --text-primary: #FFFFFF;
    --text-secondary: #B0B0B0;
    --text-muted: #808080;
    --border-color: #404040;
    --card-bg: #1A1A1A;
    
    /* Legacy Colors (for compatibility) */
    --primary-color: #F96F6E;
    --secondary-color: #666666;
    --accent-color: #F96F6E;
    --background: #FFFFFF;
    --surface: #FFFFFF;
    --border: #E0E0E0;
    
    /* Shadows (adjusted for dark theme) */
    --shadow-light: 0 2px 4px rgba(0,0,0,0.3);
    --shadow-medium: 0 4px 6px rgba(0,0,0,0.4);
    --shadow-heavy: 0 10px 25px rgba(0,0,0,0.5);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Additional Variables */
    --nav-h: 64px;
    --coral: #F96F6E;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'General Sans', sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

h3 {
    letter-spacing: 0.5pt;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(15, 15, 15, 0.5);
    backdrop-filter: blur(10px);
    z-index: 1000;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo .logo {
    height: 75px;
    width: auto;
}

.nav-menu {
    display: flex;
    gap: 2.5rem;
    align-items: center;
}

.nav-link {
    text-decoration: none;
    color: #ffffff;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    position: relative;
    padding: 0.5rem 0;
}

.nav-link:hover {
    color: var(--coral-red);
    transform: translateY(-1px);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--coral-red);
    transition: width 0.3s ease;
    border-radius: 2px;
}

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

.nav-link.active {
    color: var(--coral-red);
}

.nav-link.active::after {
    width: 100%;
}

/* Hamburger Menu */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger .bar {
    width: 25px;
    height: 3px;
    background: #1e3a8a;
    margin: 3px 0;
    transition: 0.3s;
}

/* Hero Section */
.hero:not(.case-hero):not(.case-hero-with-bg) {
    margin-top: 80px;
    padding: 4rem 0;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
}

/* Case study heroes should not inherit main hero background */
.case-hero,
.case-hero-with-bg {
    margin-top: 80px;
    padding: 4rem 0;
    /* Allow case studies to set their own backgrounds */
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    min-height: 60vh;
}

.hero-images {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-main-image {
    width: 100%;
    max-width: 700px;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.hero-subtitle {
    font-size: 1.075rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 2rem;
}

/* Scroll Indicator */
.scroll-indicator {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 100;
    opacity: 1;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.scroll-indicator.hidden {
    opacity: 0;
}

.scroll-indicator.flashing {
    animation: flash 3s infinite;
}

.scroll-indicator.flashing .scroll-arrow {
    animation: bounce 2s infinite, flash 3s infinite;
}

.scroll-indicator.flashing .scroll-text {
    animation: pulse 2s infinite, flash 3s infinite;
}

.scroll-arrow {
    color: var(--text-primary);
    animation: bounce 2s infinite;
}

.scroll-text {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: pulse 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-8px);
    }
    60% {
        transform: translateY(-4px);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

@keyframes flash {
    0%, 50% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0.3;
    }
}

/* Banner Rotator */
.banner-rotator {
    padding: 40px 0;
    background: #0a0a0a;
    overflow: hidden;
    position: relative;
}

.banner-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px; /* Locked height to prevent layout shift */
}

.banner-content {
    position: relative;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Big Shoulders Display', cursive;
    font-size: 4vw;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.1);
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.banner-line.active {
    opacity: 1;
}

.coral-dot {
    color: var(--coral, #F96F6E);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .banner-line {
        transition: none;
    }
}

@media (max-width: 768px) {
    .banner-rotator {
        padding: 24px 0;
    }
    
    .banner-line {
        font-size: 6vw;
    }
}

@media (max-width: 480px) {
    .banner-line {
        font-size: 8vw;
    }
}

/* Quick Tour Section */
.quick-tour {
    padding: 6rem 0;
    background: var(--bg-primary);
    border-top: 2px solid #F96F6E;
    position: relative;
}

.quick-tour::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #F96F6E 20%, #F96F6E 80%, transparent 100%);
    opacity: 0.6;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--text-primary);
}

.quick-tour .section-title {
    color: var(--coral-red);
}

.tour-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

/* Legacy tour card styles - only apply to tour-grid context */
.tour-grid .tour-card {
    background: var(--card-bg);
    padding: 2.5rem;
    border-radius: 15px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.tour-grid .tour-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 0, 0, 0.3);
    border-color: var(--coral-red);
}

.tour-grid .tour-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--coral-red);
}

.tour-grid .tour-card p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* New Card Structure Styles */
.card-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
    text-align: center;
}

.card-content {
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 0 1rem;
}

.card-content p {
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.5;
    margin: 0;
    font-weight: 400;
}

.card-cta {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--coral-red);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    min-height: 44px;
    min-width: 44px;
    text-align: center;
}

.card-cta:hover {
    background: #e55a59;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(249, 111, 110, 0.4);
    text-decoration: none;
}

.card-stat {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--coral-red);
    margin-bottom: 0.8rem;
    line-height: 1.4;
}

.card-pain {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 0.8rem;
    line-height: 1.4;
}

.card-fix {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    line-height: 1.4;
    font-weight: 500;
}

/* Quick Tour CTA Block */
.quick-tour-cta {
    text-align: center;
    margin-top: 3rem;
    padding: 2.5rem;
    background: var(--card-bg);
    border-radius: 15px;
    border: 2px solid rgba(249, 111, 110, 0.2);
}

.quick-tour-cta h3 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--coral-red);
    margin-bottom: 1rem;
}

.quick-tour-cta p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.quick-tour-cta .cta-button {
    display: inline-block;
    padding: 1rem 2rem;
    background: var(--coral-red);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.quick-tour-cta .cta-button:hover {
    background: #e55a59;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(249, 111, 110, 0.4);
}

/* About Preview Section */
.about-preview {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
    color: var(--text-primary);
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.about-preview h2 {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: #F96F6E;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.about-description-container {
    background: url('../assets/images/Reinvention.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid rgba(249, 111, 110, 0.4);
    border-radius: 25px;
    padding: 3rem;
    margin: 2rem auto;
    box-shadow: 0 12px 40px rgba(249, 111, 110, 0.3);
    position: relative;
    overflow: hidden;
    width: 78%;
    aspect-ratio: 3/4;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.about-description-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.about-description-container > * {
    position: relative;
    z-index: 2;
}

.container-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.container-signature {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: 1rem;
}

.container-initials {
  width: 104px;
    height: 104px;
    opacity: 0.9;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.7));
}

.about-description {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    opacity: 1;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.about-highlight {
    font-size: 1.1rem;
    margin: 2rem 0 0 0;
    padding: 0;
    background: none;
    border-radius: 0;
    backdrop-filter: none;
    border: none;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.signature {
    width: 180px;
    height: auto;
    margin-top: 2rem;
    opacity: 1;
    filter: drop-shadow(0 4px 8px rgba(249, 111, 110, 0.3));
    transition: all 0.3s ease;
}

.signature:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 6px 12px rgba(249, 111, 110, 0.4));
}

/* What's Next Section */
.whats-next {
    position: relative;
    padding: 100px 0;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    text-align: center;
    overflow: hidden;
}

#constellation-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.whats-next .container {
    position: relative;
    z-index: 2;
}

.whats-next h2 {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
}

.next-description {
    font-size: 1.2rem;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}

.cta-button {
    display: inline-block;
    background: var(--coral-red);
    color: var(--text-primary);
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border: 2px solid var(--coral-red);
}

.cta-button:hover {
    background: transparent;
    color: var(--coral-red);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 107, 107, 0.3);
}

/* Compact footer container */
/* FOOTER STYLES - COMPLETE REPLACEMENT */
.footer {
    background: #1A1A1A;
    border-top: 1px solid #333;
    padding: 60px 0 40px 0;
    margin-top: 80px;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-areas: 
        "brand nav social"
        "legal legal legal";
    gap: 40px 60px;
    align-items: start;
}

.footer .brand {
    grid-area: brand;
    display: flex;
    align-items: center;
}

.footer .brand img {
    height: 32px;
    width: auto;
    transition: opacity 0.3s ease;
}

.footer .brand:hover img {
    opacity: 0.8;
}

.footer .nav {
    grid-area: nav;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.footer .nav a {
    color: #B0B0B0;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
}

.footer .nav a:hover {
    color: #FF6B6B;
}

.footer .nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: #FF6B6B;
    transition: width 0.3s ease;
}

.footer .nav a:hover::after {
    width: 100%;
}

.footer .social {
    grid-area: social;
    display: flex;
    gap: 20px;
    justify-content: flex-end;
    align-items: center;
}

.footer .social a {
    color: #B0B0B0;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.footer .social a:hover {
    color: #FF6B6B;
    background: rgba(255, 107, 107, 0.1);
    transform: translateY(-2px);
}

.footer .social a svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.footer .legal {
    grid-area: legal;
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid #333;
    color: #808080;
    font-size: 0.9rem;
    margin-top: 20px;
}

.footer .legal #yr {
    color: #FF6B6B;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 968px) {
    .footer-inner {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
            "brand social"
            "nav nav"
            "legal legal";
        gap: 30px;
        text-align: center;
    }

    .footer .brand {
        justify-self: start;
        text-align: left;
    }

    .footer .social {
        justify-self: end;
    }
}

@media (max-width: 640px) {
    .footer {
        padding: 40px 0 30px 0;
        margin-top: 60px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "brand"
            "nav"
            "social"
            "legal";
        gap: 30px;
        text-align: center;
    }

    .footer .brand,
    .footer .social {
        justify-self: center;
    }

    .footer .nav {
        gap: 20px;
        justify-content: center;
    }

    .footer .social {
        justify-content: center;
    }
}

/* Tooltip Styles */
.hero-images {
    position: relative;
}

.hero-tooltip-trigger {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    height: 50%;
    cursor: pointer;
    z-index: 10;
}

.tooltip {
    position: absolute;
    bottom: 60px;
    right: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
    z-index: 1000;
}

.tooltip-image {
    max-width: 200px;
    height: auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.hero-tooltip-trigger:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: var(--bg-primary);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.3);
        padding: 2rem 0;
    }

    .nav-menu.active {
        left: 0;
    }

    .hamburger {
        display: flex;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

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

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .tour-grid {
        grid-template-columns: 1fr;
    }

    .section-title {
        font-size: 2rem;
    }

    .about-preview h2 {
        font-size: 2rem;
    }

    .about-description-container {
        width: 90%;
        aspect-ratio: 2/3;
        padding: 2rem;
    }

    .container-initials {
        width: 60px;
    }

    .tooltip-image {
        max-width: 150px;
    }

    .tour-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

@media (max-width: 768px) {
    .whats-next h2 {
        font-size: 2rem;
    }

    /* Mobile stack */
    footer.footer .footer-inner {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    footer.footer .social { justify-content: flex-start; }
}

/* Kill accidental vertical bloat above the footer */
.cta-section,
.profile-section,
section:last-of-type {
    padding-bottom: clamp(12px, 2vh, 20px) !important;
    margin-bottom: 0 !important;
}

/* Optional "micro footer" (ultra-compact) */
@media (max-width: 480px) {
    footer.footer .nav a:nth-child(n+4) { display:none; } /* show 3 links */
}

@media (max-width: 480px) {
    .hero:not(.case-hero):not(.case-hero-with-bg) {
        padding: 2rem 0;
    }

    .hero-title:not(.case-hero .hero-title):not(.case-hero-with-bg .hero-title) {
        font-size: 2rem;
    }

    .hero-subtitle:not(.case-hero .hero-subtitle):not(.case-hero-with-bg .hero-subtitle) {
        font-size: 1rem;
    }

    .tour-grid .tour-card {
        padding: 2rem;
    }

    .about-highlight {
        padding: 1.5rem;
    }
}

/* Mobile Styles - REPLACE ENTIRE MOBILE SECTION */
@media (max-width: 768px) {
    /* Exclude case study heroes from mobile overrides */
    .hero-content:not(.case-hero .hero-content):not(.case-hero-with-bg .hero-content) {
        position: absolute !important;
        bottom: 15% !important;
        top: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90% !important;
        padding: 1rem !important;
        gap: 1rem !important;
        min-height: auto !important;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .hero-text:not(.case-hero .hero-text):not(.case-hero-with-bg .hero-text) {
        order: 1;
        width: 100%;
        max-width: 100%;
        background: rgba(0, 0, 0, 0.3) !important;  /* Much more transparent */
        padding: 1.5rem !important;
        border-radius: 20px !important;
        backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-text h1 {
        font-size: 2.2rem !important;
        line-height: 1.1 !important;
        margin-bottom: 0 !important;
        font-weight: 700 !important;
        color: white !important;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9) !important;
    }
    
    /* Hide subtitle completely on mobile */
    .hero-text p {
        display: none !important;
    }
    
    .hero-portrait {
        opacity: 0.8 !important;
        filter: blur(0.5px) !important;
    }
    
    .luis-overlay-component {
        order: 2;
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        align-items: center !important;
        margin-bottom: 0.5rem !important;
        margin-top: 0.5rem !important;
    }
    
    .luis-name-text {
        font-size: 2.5rem !important;
        padding: 8px 16px !important;
        letter-spacing: -1px !important;
        text-align: center !important;
    }
    
    .luis-tagline {
        font-size: 1.2rem !important;
        text-align: center !important;
        margin-bottom: 0.8rem !important;
    }
    
    .mobile-cta-buttons {
        order: 3;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: center;
        width: 100%;
        margin-top: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .mobile-cta-button {
        background: #F96F6E;
        color: white;
        border: none;
        padding: 14px 28px;
        border-radius: 25px;
        font-family: 'Inter', sans-serif;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-block;
        min-width: 170px;
        min-height: 44px;
        text-align: center;
        box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    }
    
    .mobile-cta-button:hover {
        background: #ff5252;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
    }
    
    .mobile-cta-button.secondary {
        background: transparent;
        border: 2px solid #F96F6E;
    color: #F96F6E;
        box-shadow: 0 4px 15px rgba(255, 107, 107, 0.2);
    }
    
    .mobile-cta-button.secondary:hover {
        background: #F96F6E;
        color: white;
        box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
    }
}

/* Small Mobile Adjustments */
@media (max-width: 480px) {
    .hero-content:not(.case-hero .hero-content):not(.case-hero-with-bg .hero-content) {
        padding-top: 65vh !important;
        width: 95% !important;
    }
    
    .hero-text:not(.case-hero .hero-text):not(.case-hero-with-bg .hero-text) {
        background: rgba(0, 0, 0, 0.5) !important;
        padding: 1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .hero-text h1 {
        font-size: 1.8rem !important;
        text-shadow: 2px 2px 10px rgba(0, 0, 0, 1) !important;
        margin-bottom: 0.5rem !important;
    }
    
    .luis-name-text {
        font-size: 1.8rem !important;
    }
    
    .mobile-cta-button {
        min-width: 140px;
        padding: 10px 20px;
        font-size: 0.85rem;
    }
}

/* Very small screens */
@media (max-width: 360px) {
    .hero-content:not(.case-hero .hero-content):not(.case-hero-with-bg .hero-content) {
        padding-top: 70vh !important;
    }
    
    .hero-text h1 {
        font-size: 1.6rem !important;
    }
    
    .luis-name-text {
        font-size: 1.6rem !important;
    }
}

/* Quick Tour Mobile Optimizations */
@media (max-width: 768px) {
    .quick-tour {
        padding: 4rem 0;
    }
    
    .quick-tour .section-title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
    
    .quick-tour .section-subtitle {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }
    
    .quick-tour .intro-message {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    
    /* Ensure cards fit in single viewport */
    .tour-card {
        padding: 1.5rem !important;
        margin-bottom: 1rem;
    }
    
    .card-icon {
        font-size: 2rem;
        margin-bottom: 0.8rem;
    }
    
    .card-stat {
        font-size: 1rem;
        margin-bottom: 0.6rem;
        line-height: 1.3;
    }
    
    .card-pain {
        font-size: 0.95rem;
        margin-bottom: 0.6rem;
        line-height: 1.3;
    }
    
    .card-fix {
        font-size: 0.95rem;
        margin-bottom: 1.2rem;
        line-height: 1.3;
    }
    
    .card-cta {
        font-size: 0.9rem;
        padding: 0.8rem 1.5rem;
        min-height: 44px; /* Thumb-friendly tap target */
        display: inline-block;
        text-align: center;
    }
    
    /* CTA Block Mobile */
    .quick-tour-cta {
        margin-top: 2rem;
        padding: 2rem 1.5rem;
    }
    
    .quick-tour-cta h3 {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }
    
    .quick-tour-cta p {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .quick-tour-cta .cta-button {
        padding: 1rem 2rem;
        font-size: 1rem;
        min-height: 44px; /* Thumb-friendly tap target */
    }
}

@media (max-width: 480px) {
    .quick-tour {
        padding: 3rem 0;
    }
    
    .quick-tour .section-title {
        font-size: 1.8rem;
    }
    
    .tour-card {
        padding: 1.2rem !important;
    }
    
    .card-icon {
        font-size: 1.8rem;
    }
    
    .card-stat,
    .card-pain,
    .card-fix {
        font-size: 0.9rem;
    }
    
    .quick-tour-cta {
        padding: 1.5rem 1rem;
    }
    
    .quick-tour-cta h3 {
        font-size: 1.4rem;
    }
    
    .quick-tour-cta p {
        font-size: 0.95rem;
    }
}

/* Quick Tour Animation Enhancements */
@keyframes gentlePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(249, 111, 110, 0.3);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 6px 20px rgba(249, 111, 110, 0.5);
    }
}

@keyframes cardHintTilt {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(1deg) scale(1.01);
    }
    75% {
        transform: rotate(-1deg) scale(1.01);
    }
}

/* Shuffle button idle animation */
.shuffle-btn.idle-pulse {
    animation: gentlePulse 2s ease-in-out;
}

/* Shuffle button gentle pulse animation */
.shuffle-button.gentle-pulse {
    animation: gentlePulse 2s ease-in-out;
}

/* Card hint animation on load */
.tour-card.hint-animation {
    animation: cardHintTilt 1.5s ease-in-out;
}

/* Card hint tilt animation */
.tour-card.hint-tilt {
    animation: cardHintTilt 1s ease-in-out;
}

/* Ensure Luis Gilberto component positioning - exclude case studies */
@media (max-width: 768px) {
    .hero-cta-section:not(.case-hero .hero-cta-section):not(.case-hero-with-bg .hero-cta-section),
    .hero-name-component:not(.case-hero .hero-name-component):not(.case-hero-with-bg .hero-name-component) {
        position: absolute;
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 15;
    }
}

/* Custom Coral Scrollbar - Site-wide Implementation */
::-webkit-scrollbar {
    width: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--coral-red);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ff5252;
}

/* ===========================
   SPACING TOKENS + RULES
   =========================== */
:root{
  --space-2xs: clamp(8px, 0.8vw, 12px);
  --space-xs:  clamp(12px, 1.2vw, 18px);
  --space-sm:  clamp(16px, 1.6vw, 24px);
  --space-md:  clamp(24px, 2.4vw, 40px);
  --space-lg:  clamp(40px, 5vw, 80px);
  --content-w: 1100px;               /* max readable width */
}

/* Center content for common blocks without changing your HTML */
.about-hero > *,
#luis-decoded > * ,
.cta-section > * {
  max-width: min(100% - 32px, var(--content-w));
  margin-inline: auto;
}

/* Consistent vertical rhythm between major sections */
.about-hero { padding-block: var(--space-md) var(--space-sm); } /* less bottom */
#luis-decoded { padding-block: var(--space-md); }
.cta-section  { padding-block: var(--space-md) var(--space-lg); }

/* Space between siblings (hero → decoded → CTA) */
.about-hero + #luis-decoded { margin-top: var(--space-lg); }
#luis-decoded + .cta-section { margin-top: var(--space-lg); }

/* Never let random large margins stack awkwardly */
#luis-decoded > *:last-child,
.cta-section  > *:last-child { margin-bottom: 0; }

/* ================================
   PAIN-POINT CARD STYLES
   ================================ */

/* Microsoft Badge */
.microsoft-badge {
    background: #0078D4;
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    align-self: flex-start;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.3);
}

/* Pain Point Statistics */
.pain-point-stat {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Card Icons */
.card-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    color: #FF6B6B;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0 0 8px rgba(255, 107, 107, 0.3));
    align-self: center;
}

/* Card Titles - One Line Headlines */
.card-title {
    font-family: 'Big Shoulders Display', cursive;
    font-size: 1.3rem;
    font-weight: 700;
    color: #FF6B6B;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
    margin-bottom: 20px;
    text-align: center;
    /* Ensure one-line display */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card Content Container */
.card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    margin-bottom: 15px; /* Safety margin from bottom */
}

/* Proof Points */
.proof-points {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
    pointer-events: none;
    margin: 10px 0;
    padding: 0;
    height: 0;
    overflow: hidden;
}

.proof-item {
    color: #FF6B6B;
    font-size: 0.9rem;
    margin-bottom: 8px;
    font-weight: 500;
}

/* Show proof points when card is focused */
.tour-card.focused .proof-points {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    height: auto;
    margin: 15px 0 40px 0;
}

/* ================================
   DESKTOP/MOBILE CONTENT VISIBILITY
   ================================ */
.mobile-only {
    display: none !important;
}

.desktop-only {
    display: block !important;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block !important;
    }
    
    .desktop-only {
        display: none !important;
    }
    
    /* Navigation - Quick Fix */
    .navbar {
        padding: 0.75rem 1rem !important;
    }
    
    .logo {
        font-size: 1.2rem !important;
    }
    
    /* Hamburger menu */
    .mobile-menu-toggle {
        padding: 0.5rem !important;
    }
}

/* Responsive navigation for case-article pages */
/* Mobile only: Show article-header, hide regular navbar */
@media (max-width: 767px) {
    body.case-article .navbar {
        display: none !important;
    }
    
    body.case-article .article-header {
        display: block !important;
        z-index: 1100;
        justify-content: center;
    }
    
    /* Center and enlarge coral icon on mobile */
    body.case-article .article-header .brandmark {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    
    body.case-article .article-header .brandmark img {
        height: 36px !important;
        width: auto !important;
        padding: 8px 0 !important;
    }
    
    /* Hide legacy mobile navigation elements */
    body.case-article header#masthead,
    body.case-article .site-header,
    body.case-article .global-header,
    body.case-article .mobile-nav,
    body.case-article .menu-toggle,
    body.case-article .legacy-mobile-nav {
        display: none !important;
    }
    
    /* Adjust anchor offset for headings to prevent hiding under glass bar */
    body.case-article h1::before,
    body.case-article h2::before,
    body.case-article h3::before,
    body.case-article h4::before,
    body.case-article h5::before,
    body.case-article h6::before {
        content: "";
        display: block;
        height: 80px;
        margin-top: -80px;
        visibility: hidden;
    }
}

/* Tablet and Desktop: Show regular navbar, hide article-header */
@media (min-width: 768px) {
    body.case-article .article-header {
        display: none !important;
    }
    
    body.case-article .navbar {
        display: block !important;
    }
    
    /* Hide hamburger menu on tablet and desktop for case-article pages */
    body.case-article .navbar .hamburger {
        display: none !important;
    }
}

/* Optional: tighten the brand icon size if needed */
/* .article-header .brandmark img { height: 22px; width: 22px; } */