/* ==========================================================================
   Google Fonts Import
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* ==========================================================================
   Base & Reset
   ========================================================================== */

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

:root {
    /* Base-8 Spacing Scale */
    --space-1: 8px;    /* 8px */
    --space-2: 16px;   /* 16px */
    --space-3: 24px;   /* 24px */
    --space-4: 32px;   /* 32px */
    --space-5: 40px;   /* 40px */
    --space-6: 48px;   /* 48px */
    --space-7: 56px;   /* 56px */
    --space-8: 64px;   /* 64px */
    --space-10: 80px;  /* 80px */
    --space-12: 96px;  /* 96px */
    --space-16: 128px; /* 128px */
    --space-20: 160px; /* 160px */

    /* Typography Scale (from Squarespace site) */
    --font-family-primary: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-heading: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Font Sizes */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 40px;

    /* Colors (extracted from site) */
    --color-primary: #00f;
    --color-primary-dark: #001b52;
    --color-text: #3a3a3a;
    --color-text-light: #666;
    --color-background: #fff;
    --color-background-rgb: 255, 255, 255;
    --color-border: #e0e0e0;
    --color-accent: #00f;

    /* Line Heights */
    --line-height-tight: 1;
    --line-height-base: 1.3;
    --line-height-relaxed: 1.5;


    /* Transitions */
    --transition-fast: 0.1s ease-in-out;
    --transition-base: 0.17s ease-in-out;
    --transition-slow: 0.3s ease-in-out;
}

/* Dark Mode */
body[data-theme="dark"] {
    --color-primary: #3b72ff;
    --color-primary-dark: #66b3ff;
    --color-text: #e8e8e8;
    --color-text-light: #b0b0b0;
    --color-background: #14161d; /* Updated to match bluish hue */
    --color-background-80: #1a1d26; /* Updated to match bluish hue */
    --color-background-rgb: 20, 22, 29; /* Updated to match new background */
    --color-border: #2f3341; /* Updated to match bluish hue */
    --color-accent: #3399ff;
}

body[data-theme="dark"] .nav {
    background-color: rgba(20, 22, 29, 0.95); /* Slightly lighter, bluish hue */
}

body[data-theme="dark"] .nav__links-container {
    background-color: rgba(35, 40, 50, 0.98); /* Lighter bluish container */
}

/* Dark mode - Navigation link colors */
body[data-theme="dark"] .nav__link {
    color: #9ac2ff;
}

body[data-theme="dark"] .nav__link.active {
    color: white; /* Keep active text white for contrast */
}

body[data-theme="dark"] .nav__bubble {
    background-color: #11111b; /* Dark blue for hover bubble */
}

body[data-theme="dark"] .nav__active-slider {
    background-color: #2d2de7;
}

body[data-theme="dark"] .nav__settings-menu {
    background: var(--color-background-80);
    border-color: var(--color-border);
}

body[data-theme="dark"] .nav__motion-select {
    background: var(--color-background);
    border-color: var(--color-background-80);
    color: #e8e8e8;
}

body[data-theme="dark"] .nav__mobile-menu.open {
    background: #0d0d0d;
}

body[data-theme="dark"] .nav__mobile-link:hover {
    background-color: #2a2f3c; /* Darker gray but not as dark as container */
}

/* Dark mode - Gray sections and backgrounds */
body[data-theme="dark"] .footer,
body[data-theme="dark"] .overview-grid,
body[data-theme="dark"] .implementation-grid,
body[data-theme="dark"] .about-section,
body[data-theme="dark"] .about__section:nth-child(even),
body[data-theme="dark"] .about,
body[data-theme="dark"] .organic-edges,
body[data-theme="dark"] .organic-edges--flowing {
    background: var(--color-background-80);
    background-color: var(--color-background-80);
}

body[data-theme="dark"] .about__divider path {
    fill: var(--color-background-80);
}

body[data-theme="dark"] .organic-divider path {
    fill: var(--color-background-80);
}

/* Dark mode - All white backgrounds */
body[data-theme="dark"] .nav__settings-menu,
body[data-theme="dark"] .case-study,
body[data-theme="dark"] .case-study__section,
body[data-theme="dark"] .case-study__hero,
body[data-theme="dark"] .case-study__overview,
body[data-theme="dark"] .case-study__content,
body[data-theme="dark"] .metrics-grid,
body[data-theme="dark"] .metric-card,
body[data-theme="dark"] .section,
body[data-theme="dark"] .about__intro,
body[data-theme="dark"] .about__section:nth-child(odd),
body[data-theme="dark"] .about__skills {
    background: #0d0d0d !important;
    background-color: #0d0d0d !important;
}

body[data-theme="dark"] .portfolio__divider path {
    fill: #0d0d0d;
}

/* Dark mode - Gradients to solid dark */
body[data-theme="dark"] .case-study__image-wrapper {
    background: linear-gradient(180deg, #0d0d0d 0%, #1a1a1a 100%) !important;
}

/* Dark mode - Cards and containers */
body[data-theme="dark"] .portfolio__item {
    background: #232832; /* Updated card background */
    border-color: #3a4159; /* Updated border color */
    box-shadow: 0 2px 8px rgba(59, 114, 255, 0.15); /* Rich deep blue shadow */
}

body[data-theme="dark"] .portfolio__item:hover {
    box-shadow: 0 8px 24px rgba(59, 114, 255, 0.25); /* Stronger blue shadow on hover */
}

body[data-theme="dark"] .portfolio__item.portfolio__item--coming-soon:hover {
    box-shadow: none;
}

/* Dark mode - Portfolio card text */
body[data-theme="dark"] .portfolio__title {
    color: #e8e8e8; /* Lighter text */
}

body[data-theme="dark"] .portfolio__description {
    color: #b8bcc5; /* Lighter description text */
}

body[data-theme="dark"] .portfolio__tag {
    background: #2f3341; /* Dark tag background */
    color: #9ca3af; /* Lighter tag text */
}

/* Dark mode - Password section text */
body[data-theme="dark"] .portfolio__title,
body[data-theme="dark"] .portfolio__description {
    color: #e8e8e8; /* Lighter text for password section */
}

body[data-theme="dark"] .portfolio__link {
    color: #66b3ff;
}

/* Dark mode - Footer text */
body[data-theme="dark"] .footer__email,
body[data-theme="dark"] .footer__text,
body[data-theme="dark"] .footer__title {
    color: #e8e8e8; /* Lighter footer text */
}

body[data-theme="dark"] .footer__email:hover {
    text-decoration: underline;
    text-decoration-color: #66b3ff;
}

body[data-theme="dark"] .footer__link {
    color: #e8e8e8; /* Normal text color */
    text-decoration: underline;
    text-decoration-color: #66b3ff; /* Blue underline */
}

body[data-theme="dark"] .footer__link:hover {
    color: #99ccff; /* Lighter blue on hover */
}

/* Dark mode - Heading colors */
body[data-theme="dark"] h4 {
    color: #a0a0a0; /* Lighter gray for dark mode */
}

/* Dark mode - About section link */
body[data-theme="dark"] .about__link {
    color: #9ac2ff; /* Lighter blue for better contrast */
}

/* Dark mode - Password input */
body[data-theme="dark"] .portfolio__input {
    color: #e8e8e8; /* Light text for typed input */
    background: var(--color-background);
    border-color: var(--color-border);
}

body[data-theme="dark"] .portfolio__input::placeholder {
    color: #666;
}

/* Dark mode - Toggle slider background */
body[data-theme="dark"] .nav__toggle-slider {
    background-color: #2a2a2a;
}

body[data-theme="dark"] .nav__toggle-slider:before {
    background-color: #e8e8e8;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-background);
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-primary);
    line-height: var(--line-height-tight);
    color: var(--color-primary);
}

h1 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 32px 0;
}

h2 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-primary-dark);
    margin: 0 0 24px 0;
}

h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-primary-dark);
    margin: 24px 0 16px 0;
}

h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: #666666; /* Medium gray for light mode */
    margin: 16px 0 12px 0;
}

a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-base);
}

a:hover,
a:focus {
    color: var(--color-primary-dark);
}

/* ==========================================================================
   Layout Components
   ========================================================================== */

.main {
    max-width: 100%;
    margin: 0 auto;
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */

/* Hide navigation initially to prevent flash during page load */
site-navigation {
    opacity: 0;
}

site-navigation.ready {
    opacity: 1;
    transition: opacity 0.2s ease-in;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
}

/* Navigation Styles */
.nav {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: var(--space-3) 0;
    position: relative;
    z-index: 1001;
}

.nav__content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav__right {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.nav__brand {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
}

.nav__links-container {
    position: relative;
    display: flex;
    gap: 8px;
    background-color: #ececec;
    border-radius: 40px;
    padding: 4px;
    overflow: hidden;
}

.nav__link {
    position: relative;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
    border-radius: 40px;
    transition: color var(--transition-base);
    z-index: 3;
    border-bottom: none;
}

.nav__link.active {
    color: white;
    /* Don't apply background - let the slider handle it */
}

.nav__link:hover {
    border-bottom: none;
}

.nav__active-slider {
    position: absolute;
    background-color: var(--color-primary);
    border-radius: 40px;
    transition: all 0.3s ease-out;
    z-index: 2;
    pointer-events: none;
}

.nav__bubble {
    position: absolute;
    pointer-events: none;
    background-color: #d0d0d0;
    border-radius: 40px;
    opacity: 0;
    transition: all 0.2s ease-out;
    z-index: 1;
}

.nav__bubble.snapped {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Motion preferences for navigation bubble */
body[data-motion="some"] .nav__bubble {
    transition: all 0.2s ease-out; /* Snap only, no follow smoothness */
}

body[data-motion="none"] .nav__bubble {
    display: none; /* No bubble at all */
}

/* Mobile Menu Styles */
.nav__mobile-toggle {
    display: none; /* Hidden on desktop */
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-primary);
}

.nav__burger-icon {
    width: 24px;
    height: 18px; /* Normal hamburger height */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: height 0.3s ease;
}

body[data-motion="none"] .nav__burger-icon {
    transition: none;
}

.nav__mobile-toggle.open .nav__burger-icon {
    height: 32px; /* Taller for even spacing */
    justify-content: space-evenly; /* Even spacing between all elements */
}

.nav__burger-line {
    width: 100%;
    height: 3px;
    background-color: var(--color-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
}

body[data-motion="none"] .nav__burger-line {
    transition: none;
}

/* Burger animation to hamburger icon */
.nav__mobile-toggle.open .nav__burger-line--top {
    width: 100%;
    height: 7px; /* Adjusted height */
    background: transparent;
    border: 3px solid var(--color-primary);
    border-bottom: none;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0; /* Semi-circle top bun */
}

.nav__mobile-toggle.open .nav__burger-line--middle {
    width: 100%;
    margin: 0;
    height: 5px; /* Reduced height */
    background: none;
    position: relative;
}

/* Wavy lettuce as border */
.nav__mobile-toggle.open .nav__burger-line--middle::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -3px;
    right: -3px;
    height: 5px; /* Match parent height */
    /* Wavy with fewer, more visible waves */
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,10 L12,3 L25,17 L37,3 L50,17 L62,3 L75,17 L87,3 L100,10' stroke='%230000ff' stroke-width='9' fill='none'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: repeat-x;
}

/* Burger patty */
.nav__mobile-toggle.open .nav__burger-line--middle::after {
    content: '';
    position: absolute;
    top: 4px; /* Adjusted for smaller lettuce */
    left: -3px;
    right: -3px;
    height: 3px;
    background: var(--color-primary);
}

.nav__mobile-toggle.open .nav__burger-line--bottom {
    width: 100%;
    height: 7px; /* Adjusted height */
    background: transparent;
    border: 3px solid var(--color-primary);
    border-top: none;
    border-radius: 0 0 50% 50% / 0 0 100% 100%; /* Semi-circle bottom bun */
}

/* Mobile Menu Scrim */
.nav__mobile-scrim {
    position: fixed;
    top: 80px; /* Start below the nav bar */
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

body[data-motion="none"] .nav__mobile-scrim {
    transition: none;
}

.nav__mobile-scrim.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.nav__mobile-menu {
    display: none; /* Hidden on desktop */
    position: fixed;
    top: 80px; /* Position below nav bar */
    left: 0;
    right: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out, background 0.3s ease;
    padding: 0 var(--space-4);
    z-index: 1000;
    border-radius: 0px 0px 16px 16px;
}

body[data-motion="none"] .nav__mobile-menu {
    transition: none;
}

.nav__mobile-menu.open {
    max-height: 460px;
    padding: var(--space-3) var(--space-4);
    background: white;
}

.nav__mobile-link {
    display: block;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg); /* Bigger text */
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: center; /* Center aligned */
    border-radius: 8px;
    margin-bottom: var(--space-1);
    border-bottom: none; /* No bottom border */
}

.nav__mobile-link:last-child {
    margin-bottom: 0;
}

.nav__mobile-link:hover {
    background-color: #f0f0f0;
    border-bottom: none;
}

.nav__mobile-link.active {
    background-color: var(--color-primary);
    color: white;
}

/* Settings Menu */
.nav__settings-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: var(--color-text);
    border-radius: 50%;
    position: relative;
}

.nav__settings-toggle:hover {
    transform: rotate(90deg);
}

.nav__settings-toggle.active {
    background-color: var(--color-primary);
    color: white;
    transform: rotate(180deg);
}

.nav__settings-toggle svg {
    display: block;
}

.nav__settings-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    min-width: 220px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.3s ease;
}

.nav__settings-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* No-motion overrides for settings */
body[data-motion="none"] .nav__settings-toggle:hover,
body[data-motion="none"] .nav__settings-toggle.active {
    transform: none;
}

body[data-motion="none"] .nav__settings-menu {
    transition: none;
    transform: none;
}

body[data-motion="none"] .nav__settings-menu.open {
    transform: none;
}

.nav__settings-group {
    margin-bottom: 16px;
}

.nav__settings-group:last-child {
    margin-bottom: 0;
}

.nav__settings-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

/* Toggle Switch */
.nav__toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.nav__toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.nav__toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 24px;
}

.nav__toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .nav__toggle-slider {
    background-color: var(--color-primary);
}

input:checked + .nav__toggle-slider:before {
    transform: translateX(24px);
}

/* Motion Select */
.nav__motion-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.nav__motion-select:hover {
    border-color: var(--color-primary);
}

.nav__motion-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Mobile Settings */
.nav__mobile-settings {
    border-top: 1px solid #e0e0e0;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
}

.nav__mobile-settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
}

.nav__mobile-settings-item:first-child {
    justify-content: flex-start;
    gap: var(--space-2);
}

.nav__mobile-settings-item:last-child {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
}

.nav__mobile-settings-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
}

body[data-theme="dark"] .nav__mobile-settings {
    border-top-color: #2a2a2a;
}

.nav__mobile-settings .nav__motion-select {
    min-width: 100px;
    font-size: 14px;
}

@media (max-width: 768px) {
    .nav__links-container {
        display: none; /* Hide desktop nav */
    }
    
    .nav__mobile-toggle {
        display: flex; /* Show mobile toggle */
    }
    
    .nav__mobile-menu {
        display: block; /* Enable mobile menu */
    }

    .nav__settings-toggle--desktop {
        display: none; /* Hide desktop gear on mobile */
    }

    .nav__settings-menu {
        display: none; /* Hide desktop settings flyout on mobile */
    }
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero {
    display: flex;
    min-height: 100vh;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    justify-content: center;
}

.hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    justify-content: center;
    width: 100%;
}

.hero__text {
    position: relative;
    z-index: 1;
    padding-top: var(--space-4);
    margin-top: -40px;
}

.hero__title {
    font-size: clamp(48px, 10vw, 96px);
    font-weight: 800;
    margin-bottom: var(--space-4);
    color: var(--color-text);
    line-height: var(--line-height-tight);
    text-align: center;
}

/* Rotating text animation */
.hero__rotating-text {
    position: relative;
    display: block;
    color: var(--color-text);
    font-family: var(--font-family-primary);
    font-weight: 400;
    font-size: .69em;
    min-height: 1.6em;
    margin-top: var(--space-1);
    padding-bottom: var(--space-1);
    overflow: visible;
    width: 100%;
    line-height: 1.4;
}

.hero__text-nav {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-primary);
    border: none;
    color: white;
    cursor: pointer;
    padding: 6px 8px;
    display: none;
    opacity: 1;
    transition: opacity 0.2s ease;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero__text-nav:hover {
    opacity: 0.85;
}

.hero__text-nav svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* Show navigation arrow only in no-motion mode */
body[data-motion="none"] .hero__text-nav {
    display: flex;
}

.hero__text-item {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 30px); /* Make room for arrow in no-motion mode */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    white-space: nowrap;
    background: var(--color-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-primary);
}

/* No motion: instant transitions */
body[data-motion="none"] * {
    transition: none !important;
    animation: none !important;
}

body[data-motion="none"] .hero__text-item {
    transition: none;
}

.hero__text-item.active {
    opacity: 1;
    transform: translateY(0);
}

.hero__text-item.fade-out {
    opacity: 0;
    transform: translateY(-20px);
}



.hero__image {
    position: relative;
    z-index: 0;
    margin-bottom: calc(-1 * var(--space-4));
}

.hero__avatar {
    width: 350px;
    height: 350px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--color-background);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Mobile: larger hero image */
@media (max-width: 768px) {
    .hero__avatar {
        width: 350px;
        height: 350px;
    }
}

/* Hero Subtitle Section */
.hero-subtitle-section {
    min-height: 100vh;
    padding: var(--space-8) var(--space-4);
    padding-bottom: 104px;
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.hero-subtitle-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.hero__subtitle-intro {
    font-size: var(--font-size-base);
    color: #999;
    margin-bottom: var(--space-2);
}

.hero__subtitle {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-relaxed);
    color: var(--color-text);
    max-width: 800px;
    margin: 0 auto;
    /* No transitions - scroll will drive the animation directly */
}

.hero__subtitle-line {
    display: block;
    overflow: hidden;
}

.hero__subtitle-line span {
    display: block;
}

/* ==========================================================================
   About Section
   ========================================================================== */

.about {
    padding: var(--space-12) var(--space-4);
    background-color: #f8f9fa; /* solid gray, no gradient */
}

.about__content {
    max-width: 1200px;
    margin: 0 auto;
}

.about__title {
    text-align: center;
    margin-bottom: var(--space-8);
}

.about__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
}

.about__item {
    padding: var(--space-4);
}

.about__item-title {
    margin-bottom: var(--space-3);
    font-weight: 600;
    color: var(--color-text);
}

.about__item-text {
    line-height: var(--line-height-relaxed);
    color: var(--color-text);
}

.about__link {
    color: var(--color-primary);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.about__link:hover {
    opacity: 0.7;
}

/* ==========================================================================
   Portfolio Section
   ========================================================================== */

.portfolio {
    padding: var(--space-12) var(--space-4);
    max-width: 1200px;
    margin: 0 auto;
}

.portfolio__content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
}

.portfolio__title {
    margin-bottom: var(--space-4);
}

.portfolio__description {
    margin-bottom: var(--space-6);
    line-height: var(--line-height-relaxed);
}

.portfolio__link {
    color: var(--color-primary);
}

.portfolio__form {
    margin-bottom: var(--space-4);
}

.portfolio__input-group {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
}

.portfolio__input-wrapper {
    position: relative;
    width: 100%;
}

.portfolio__input {
    width: 100%;
    padding: var(--space-2) var(--space-8) var(--space-2) var(--space-2);
    border: none;
    border-bottom: 1px solid var(--color-border);
    background-color: transparent;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    transition: border-color var(--transition-base);
}

.portfolio__eye-button {
    position: absolute;
    right: var(--space-1);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-1);
    opacity: 0.6;
    transition: opacity 0.3s ease;
    color: var(--color-text-light);
}

.portfolio__eye-button:hover {
    opacity: 1;
}

.portfolio__eye-icon {
    display: block;
}

.portfolio__input:focus {
    outline: none;
    border-bottom-color: var(--color-primary);
}

.portfolio__input::placeholder {
    color: var(--color-text-light);
}

.portfolio__error {
    color: #ff4444;
    font-size: var(--font-size-xs);
    margin-top: var(--space-2);
    min-height: var(--space-3);
    font-weight: 500;
}

/* Portfolio Gallery */
.portfolio__gallery {
    margin-top: var(--space-8);
    opacity: 0;
    transform: translateY(var(--space-4));
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.portfolio__gallery.show {
    opacity: 1;
    transform: translateY(0);
}

.portfolio__gallery-title {
    margin-bottom: var(--space-6);
    text-align: center;
}

.portfolio__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
    max-width: 1200px;
    margin: var(--space-4) auto 0 auto;
    perspective: 1000px;
}

/* Portfolio reveal animations */
.portfolio__gallery {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.portfolio__gallery.show {
    opacity: 1;
    transform: translateY(0);
}

.portfolio__item {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease-out;
    border: 1px solid #f0f0f0;
    width: 100%;
    min-width: 450px;
    /* Button reset styles */
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    display: block;
    /* Initial animation state */
    opacity: 0;
    transform: translateY(40px) translateZ(-10px);
    filter: blur(10px);
    animation: portfolioRevealDepth 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Staggered animation delays - slower reveals */
.portfolio__item:nth-child(1) { animation-delay: 0.2s; }
.portfolio__item:nth-child(2) { animation-delay: 0.4s; }
.portfolio__item:nth-child(3) { animation-delay: 0.6s; }
.portfolio__item:nth-child(4) { animation-delay: 0.8s; }
.portfolio__item:nth-child(5) { animation-delay: 1.0s; }
.portfolio__item:nth-child(6) { animation-delay: 1.2s; }
.portfolio__item:nth-child(7) { animation-delay: 1.4s; }
.portfolio__item:nth-child(8) { animation-delay: 1.6s; }

/* 3D Curved Slide-Up Animation - smoother overlapping transitions */
@keyframes portfolioReveal {
    0% {
        opacity: 0;
        transform: translateY(80px) translateZ(100px) rotateX(45deg) scale(1.1);
        filter: blur(6px);
    }
    20% {
        opacity: 0.1;
        transform: translateY(70px) translateZ(80px) rotateX(38deg) scale(1.08);
        filter: blur(5.5px);
    }
    40% {
        opacity: 0.4;
        transform: translateY(50px) translateZ(40px) rotateX(28deg) scale(1.06);
        filter: blur(4px);
    }
    60% {
        opacity: 0.65;
        transform: translateY(30px) translateZ(10px) rotateX(18deg) scale(1.03);
        filter: blur(2.5px);
    }
    80% {
        opacity: 0.85;
        transform: translateY(10px) translateZ(-10px) rotateX(8deg) scale(1.01);
        filter: blur(1px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) translateZ(0) rotateX(0deg) scale(1);
        filter: blur(0px);
    }
}

/* Alternative Animation: Simple Blur Fade */
@keyframes portfolioRevealBlur {
    0% {
        opacity: 0;
        filter: blur(12px);
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        filter: blur(0px);
        transform: scale(1);
    }
}

/* Alternative Animation: Depth Slide */
@keyframes portfolioRevealDepth {
    0% {
        opacity: 0;
        transform: translateY(40px) translateZ(-30px);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px) translateZ(0px);
        filter: blur(0px);
    }
}

/* Alternative Animation: Depth Slide (backup option) */
@keyframes portfolioRevealDepth {
    0% {
        opacity: 0;
        transform: translateZ(-300px) scale(0.8);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateZ(0px) scale(1);
        filter: blur(0px);
    }
}

/* Simple fade animation for "some motion" mode */
@keyframes portfolioFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.portfolio__item:hover,
.portfolio__item:focus {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    border-color: #e0e0e0;
    outline: none;
}

.portfolio__item:focus {
    border-color: var(--color-primary);
    box-shadow: 0 12px 40px rgba(0, 0, 255, 0.15), 0 0 0 2px var(--color-primary);
}

.portfolio__item:active {
    transform: translateY(-4px);
}

/* Motion preferences for portfolio cards */
body[data-motion="some"] .portfolio__item {
    /* Simple fade in only, no blur or scale */
    opacity: 0;
    transform: none !important;
    filter: none !important;
    animation: portfolioFadeIn 0.6s ease-out forwards;
}

body[data-motion="some"] .portfolio__item:hover,
body[data-motion="some"] .portfolio__item:focus {
    transform: none; /* No scale, just shadow */
}

body[data-motion="some"] .portfolio__item:hover .portfolio__image img {
    transform: none;
}

body[data-motion="none"] .portfolio__item {
    /* Override initial animation state */
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
}

body[data-motion="none"] .portfolio__item:hover,
body[data-motion="none"] .portfolio__item:focus {
    transform: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); /* Subtle shadow only */
}

body[data-motion="none"] .portfolio__item:hover .portfolio__image img {
    transform: none;
}

.portfolio__image {
    position: relative;
    height: 280px;
    overflow: hidden;
}

.portfolio__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-out;
}

.portfolio__item:hover .portfolio__image img {
    transform: scale(1.05);
}

/* Coming Soon Item Styles */
.portfolio__item--coming-soon {
    cursor: default;
}

.portfolio__item--coming-soon:hover,
.portfolio__item--coming-soon:focus {
    transform: translateY(-4px); /* Reduced from -8px */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); /* Lighter shadow, no blue */
    border-color: #e0e0e0;
}

.portfolio__item--coming-soon:hover .portfolio__image img {
    transform: scale(1.02); /* Reduced zoom from 1.05 */
}

.portfolio__item--coming-soon .portfolio__overlay {
    background: rgba(128, 128, 128, 0.7); /* Gray instead of blue */
}

.portfolio__item--coming-soon:hover .portfolio__overlay {
    opacity: 0; /* No overlay on hover for coming soon */
}

.portfolio__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.portfolio__item:hover .portfolio__overlay {
    opacity: 1;
}

.portfolio__view {
    color: white;
    font-weight: 600;
    font-size: var(--font-size-sm);
    letter-spacing: 0.5px;
}

.portfolio__content {
    padding: var(--space-3);
}

.portfolio__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-2);
    line-height: var(--line-height-tight);
}

.portfolio__description {
    font-size: var(--font-size-base);
    color: #666;
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-3);
}

.portfolio__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.portfolio__tag {
    background: #f8f9fa;
    color: #5c5c5c; /* Darkened from #888 for WCAG AA compliance (4.5:1 contrast) */
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 0.3px;
}

/* Portfolio responsive design */
@media (max-width: 768px) {
    .portfolio__grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    .portfolio__item {
        min-width: unset;
    }
    
    .portfolio__image {
        height: 240px;
    }
}



/* ==========================================================================
   Page Transition Animations
   ========================================================================== */

/* Enable view transitions globally */
@view-transition {
    navigation: auto;
}

/* Clean fade transition */
::view-transition-old(root) {
    animation: fade-out 0.3s ease-out;
}

::view-transition-new(root) {
    animation: fade-in 0.3s ease-in;
}

@keyframes slide-out-left {
    to {
        transform: translateX(-100%);
    }
}

@keyframes slide-in-right {
    from {
        transform: translateX(100%);
    }
}

@keyframes slide-out-right {
    to {
        transform: translateX(100%);
    }
}

@keyframes slide-in-left {
    from {
        transform: translateX(-100%);
    }
}

/* Fade Animation (Fallback for reduced motion or unsupported browsers) */
body.fade-only ::view-transition-old(root),
body.enhancement-fade-only ::view-transition-old(root) {
    animation-name: fade-out;
}

body.fade-only ::view-transition-new(root),
body.enhancement-fade-only ::view-transition-new(root) {
    animation-name: fade-in;
}

@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Accessibility: Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0.1s !important;
        animation-timing-function: linear !important;
    }
    
    /* Override slide animations with simple fade */
    .slide-left ::view-transition-old(root),
    .slide-right ::view-transition-old(root) {
        animation-name: fade-out !important;
    }
    
    .slide-left ::view-transition-new(root),
    .slide-right ::view-transition-new(root) {
        animation-name: fade-in !important;
    }
}

/* Motion preference overrides via data-motion attribute */
body[data-motion="some"] ::view-transition-old(root),
body[data-motion="some"] ::view-transition-new(root) {
    animation-duration: 0.2s !important;
    animation-timing-function: ease-out !important;
}

body[data-motion="some"] .slide-left ::view-transition-old(root),
body[data-motion="some"] .slide-right ::view-transition-old(root) {
    animation-name: fade-out !important;
}

body[data-motion="some"] .slide-left ::view-transition-new(root),
body[data-motion="some"] .slide-right ::view-transition-new(root) {
    animation-name: fade-in !important;
}

body[data-motion="none"] ::view-transition-old(root),
body[data-motion="none"] ::view-transition-new(root) {
    animation-duration: 0.05s !important;
    animation-timing-function: linear !important;
}

body[data-motion="none"] .slide-left ::view-transition-old(root),
body[data-motion="none"] .slide-right ::view-transition-old(root) {
    animation-name: fade-out !important;
}

body[data-motion="none"] .slide-left ::view-transition-new(root),
body[data-motion="none"] .slide-right ::view-transition-new(root) {
    animation-name: fade-in !important;
}

/* Performance optimizations */
::view-transition-old(root),
::view-transition-new(root) {
    /* Use GPU acceleration */
    transform: translateZ(0);
    will-change: transform, opacity;
    
    /* Improve rendering quality during animation */
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Basic enhancement level - no animations */
.enhancement-basic ::view-transition-old(root),
.enhancement-basic ::view-transition-new(root) {
    animation: none !important;
}

/* CSS-only enhancement level - simple transitions */
.enhancement-css-only ::view-transition-old(root) {
    animation: fade-out 0.2s ease-out;
}

.enhancement-css-only ::view-transition-new(root) {
    animation: fade-in 0.2s ease-in;
}

/* Debug mode - add visual indicators */
.debug-transitions ::view-transition-old(root) {
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.5) !important;
}

.debug-transitions ::view-transition-new(root) {
    box-shadow: 0 0 0 3px rgba(0, 255, 0, 0.5) !important;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
    .nav {
        padding: var(--space-2) var(--space-3);
    }
    
    .nav__links--desktop {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .nav__hamburger {
        display: flex;
    }
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
    background: #f5f5f5;
    padding: var(--space-6) 0 var(--space-4);
}

.footer__content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-3);
}

.footer__info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-4);
}

.footer__contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.footer__title {
    font-size: var(--font-size-base);
    color: #333;
    margin: 0;
    font-weight: 600;
}

.footer__email {
    font-size: var(--font-size-base);
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer__email:hover {
    color: #333;
    text-decoration: underline;
    text-decoration-color: var(--color-primary);
}

.footer__links {
    display: flex;
    gap: var(--space-4);
}

.footer__link {
    font-size: var(--font-size-sm);
    color: #666; /* Gray text like email */
    text-decoration: underline;
    text-decoration-color: var(--color-primary); /* Blue underline */
    transition: color 0.3s ease;
}

.footer__link:hover {
    color: var(--color-primary-dark); /* Blue text on hover */
}

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-4);
    border-top: 1px solid #e0e0e0;
}

.footer__text {
    font-size: var(--font-size-sm);
    color: #666;
    margin: 0;
}

.footer__version {
    font-size: var(--font-size-sm);
    color: #666;
    text-decoration: none;
    transition: color 0.2s ease;
}

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

@media (max-width: 768px) {
    .footer__info {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
    }
    
    .footer__contact {
        align-items: center;
    }
    
    .footer__bottom {
        flex-direction: column;
        gap: var(--space-2);
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero__title {
        font-size: var(--font-size-xl);
    }
    
    .hero__avatar {
        width: 150px;
        height: 150px;
    }
    
    .portfolio,
    .about,
    .contact {
        padding: var(--space-8) var(--space-3);
    }
}

/* ==========================================================================
   Section Dividers with Organic Curves
   ========================================================================== */

.hero {
    position: relative;
}

.about {
    position: relative;
    background: #f8f9fa;
    padding-top: var(--space-16);
}

.about__divider {
    position: absolute;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 1;
}

.about__divider--top {
    top: -59px;
}

.about__divider--bottom {
    bottom: -59px;
}

.portfolio {
    position: relative;
    padding-top: var(--space-16);
}

.portfolio__divider {
    position: absolute;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 1;
}

.portfolio__divider--top {
    top: -59px;
}

/* =======================
   CASE STUDY PAGES
   ======================= */

.case-study-page {
    background-color: var(--color-background); /* Fixed variable name */
}

.case-study-page .header {
    border-bottom: var(--border-width) solid var(--border-color);
}

/* Revert the reordering of rules */
.nav__link.active {
    /* Don't apply background - let the slider handle it */
    color: white;
}



.case-hero {
    height: 100vh; /* Full viewport height */
    padding-top: 120px; /* Account for fixed header + breadcrumb space */
    padding-bottom: 48px;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
}

.case-hero__breadcrumb {
    position: absolute;
    top: 120px; /* Position well below the header */
    left: var(--space-3);
    margin-bottom: 24px;
    text-align: left;
}

.case-hero__back {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    font-size: var(--font-size-base);
    font-weight: 500;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.case-hero__back:hover {
    opacity: 1;
}

.case-hero__subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin-top: 104px;
    margin-bottom: 0;
    font-weight: 500;
}

.case-hero__problem {
    font-size: calc(var(--font-size-xl) * 1.8);
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-primary-dark);    
    margin-bottom: 24px;
}

.case-hero__meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0 0 48px 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    margin-bottom: 104px;

}

.case-hero__meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.case-hero__meta-label {
    font-weight: 600;
}


.case-hero__meta-separator {
    margin: 0 8px;
}

/* 404 Error Page Styles */
.error-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    position: relative;
}

.error-page .case-hero__breadcrumb {
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1200px;
    width: 100%;
    text-align: left;
    padding: 0 var(--space-3);
    box-sizing: border-box;
}

.error-page__title {
    font-size: 160px;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    color: var(--dark-blue);
}

.error-page__subtitle {
    font-size: 40px;
    color: var(--color-primary-dark);
    margin: 0;
}

body[data-theme="dark"] .error-page__subtitle {
    color: var(--color-accent); 
 }

.error-page__animation {
    max-width: 400px;
    width: 100%;
    margin: 2rem 0;
    background: white;
    border-radius: 150px;
    overflow: hidden;
}

.error-page__story {
    max-width: 1200px;
    width: 100%;
    text-align: left;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
    margin: 0 auto;
    padding: 0 var(--space-3);
    box-sizing: border-box;
}

/* Hero Image Section */
.case-hero-image {
    padding: 48px var(--space-3);
    background-color: var(--color-bg-secondary);
}

.case-hero-image__container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.case-hero-image__img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Image sizing for case study content */
.case-section img:not(.width-s):not(.width-m):not(.width-l):not(.case-image) {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 16px 0;
}

/* Ensure width utilities always apply to images */
.case-section img.width-s,
.case-section img.width-m,
.case-section img.width-l {
    height: auto;
    border-radius: 8px;
    margin: 16px 0;
}

/* Two-column image layout - smaller images */
.case-two-column img {
    max-width: 100%;
    width: auto;
    max-height: 400px;
    object-fit: contain;
    border-radius: 8px;
}

/* Single column images - constrained to readable size */
.case-column img:not(.case-image-large):not(.case-image-medium):not(.case-image-small) {
    max-width: 800px;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Specific image size classes */
.case-image-large {
    max-width: 1200px;
    width: 100%;
    height: auto;
    margin: 24px 0;
}

/* Profile image with fully rounded corners */
.profile-image-rounded {
    border-radius: 50% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 400px;
    height: 400px;
}

/* Client logo lineup styles */
.client-logo-lineup {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 24px;
    margin: 32px 0 48px 0;
}
.client-logo {
    display: block;
    border-radius: 16px;
    background: #fff;
    object-fit: contain;
    transition: transform 0.2s;
}

.logo-xlarge {
    width: 13%;
    max-width: 220px;
    min-width: 120px;
    height: auto;
    z-index: 2;
}
.logo-large {
    width: 11%;
    max-width: 180px;
    min-width: 100px;
    height: auto;
    z-index: 1;
}
.logo-medium {
    width: 12%;
    max-width: 140px;
    min-width: 80px;
    height: auto;
    z-index: 0;
}
.logo-small {
    width: 13%;
    max-width: 110px;
    min-width: 60px;
    height: auto;
    z-index: 0;
}

@media (max-width: 1200px) {
  .client-logo-lineup {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .client-logo {
    width: 220px !important;
    height: auto !important;
    margin: 0 auto;
    max-width: 300px;
    min-width: 180px;
  }
}

@media (max-width: 900px) {
  .client-logo-lineup {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .client-logo {
    width: 100px !important;
    height: 100px !important;
    margin: 0 auto;
  }
}

.case-image-medium {
    max-width: 800px;
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 20px 0;
}

.case-image-small {
    max-width: 600px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 16px 0;
}

/* GIF and meme images - keep smaller for personality but respect container constraints */
img[src*="gif"], img[alt*="GIF"] {
    max-width: min(500px, 100%) !important;
    width: 100% !important;
    margin: 32px auto !important;
    display: block;
}

img[alt*="meme"] {
    max-width: 240px !important;
    width: auto !important;
    margin: 16px auto !important;
    display: block;
}

/* Case Content Sections */
.case-content {
    margin: 48px 0;
    position: relative;
}

.case-content--alt {
    background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
    padding-top: 102px; /* Extra space for curve */
}

.case-content--alt::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 60px;
    background: #fafbfc;
    clip-path: ellipse(100% 100% at 50% 100%);
    z-index: 1;
}

.case-content__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.case-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Modifier for sections with headers that should be closer to content below */
.case-section--header-tight {
    gap: 12px;
}

/* Modifier for section headers that need space above but tight below */
.case-section__text--section-header {
    margin-top: 48px;
    margin-bottom: -12px;
}

/* Responsive Figma embed styling */
.figma-embed {
    width: 100%;
    max-width: 800px;
    height: 450px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .figma-embed {
        height: 300px;
    }
}

@media (max-width: 480px) {
    .figma-embed {
        height: 250px;
    }
}

.case-section__subsection {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 24px 0;
}

.case-section__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.case-section__text p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text);
    margin: 0;
}

.case-section__text em {
    font-style: italic;
    opacity: 0.8;
}

.case-section__list {
    margin: 16px 0;
    padding-left: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.case-section__list li {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text);
    margin: 0;
}

/* Content Images */
.case-content-image {
    margin: 48px 0;
    text-align: center;
}

.case-content-image img {
    width: 100%;
    max-width: 800px;
    height: auto;
}

.case-image-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 48px 0;
}

.case-image-item {
    display: flex;
    flex-direction: column;
}

.case-image-item img {
    width: 100%;
    height: auto;
}

/* Image Grid (legacy - keep for compatibility) */
.case-image-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin: var(--space-6) 0;
}

.case-image {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* When case-image is applied directly to an img element */
img.case-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.case-image--large {
    grid-column: 1 / -1;
}

.case-image img {
    width: 100%;
    height: auto;
}

.case-image__caption {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    opacity: 0.7;
    text-align: center;
    margin: 0;
}

/* Case Navigation */
.case-navigation {
    padding: 72px 0;
    position: relative;
}

.case-navigation__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.case-navigation__content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-lg);
}

.case-navigation__back {
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--font-size-base);
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.case-navigation__back:hover {
    opacity: 0.7;
}

.case-navigation__prev {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacing) * 1);
    margin-right: auto; /* Push to left */
}

.case-navigation__next {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(var(--spacing) * 1);
    margin-left: auto; /* Push to right */
}

.case-navigation__label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    opacity: 0.6;
    margin-bottom: 8px;
}

.case-navigation__link {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    font-size: var(--font-size-base);
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.case-navigation__link:hover {
    opacity: 0.7;
}

/* Dark mode - Case navigation links */
body[data-theme="dark"] .case-navigation__link {
    color: #66b3ff; /* Lighter blue for better contrast */
}

body[data-theme="dark"] .case-navigation__label {
    color: #b0b0b0; /* Lighter label text */
}

/* Case study content links (prototype links, etc) */
.case-content a,
.case-section__text a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.case-content a:hover,
.case-section__text a:hover {
    color: var(--color-primary-dark);
}

/* Dark mode - Breadcrumb navigation */
body[data-theme="dark"] .case-hero__back {
    color: #66b3ff; /* Lighter blue for WCAG AA contrast */
}

/* Dark mode - Case study content links */
body[data-theme="dark"] .case-content a,
body[data-theme="dark"] .case-section__text a {
    color: #99ccff; /* Much lighter blue for better contrast */
}

body[data-theme="dark"] .case-content a:hover,
body[data-theme="dark"] .case-section__text a:hover {
    color: #b3d9ff; /* Even lighter on hover */
}

/* Flexible Grid Layout System for Case Studies */
.case-grid {
    display: grid;
    gap: 48px;
    margin: 24px 0;
    align-items: start;
}

/* Column Layouts */
.case-grid--full {
    grid-template-columns: 1fr;
}

.case-grid--half {
    grid-template-columns: 1fr 1fr;
}

.case-grid--quarter-three {
    grid-template-columns: 1fr 3fr;
}

.case-grid--three-quarter {
    grid-template-columns: 3fr 1fr;
}

.case-grid--third-two {
    grid-template-columns: 1fr 2fr;
}

.case-grid--two-third {
    grid-template-columns: 2fr 1fr;
}

/* Legacy Two Column Layout (keeping for backwards compatibility) */
.case-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin: 24px 0;
}

/* Quarter-Three-Quarters Layout */
.case-two-column--quarter-three-quarters {
    grid-template-columns: 1fr 3fr;
}

/* Three Column Layout */
.case-three-column {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
    margin: 24px 0;
}

/* Ensure images in three-column layout stay within their columns */
.case-three-column img {
    max-width: 100%;
    height: auto;
}

/* Full-width title that sits directly above multi-column content */
.case-section__title--tight {
    margin-bottom: 8px;
}

/* Remove bottom padding from case-content when it's followed by related content */
.case-content--no-bottom-padding {
    padding-bottom: 0;
}

/* Remove top padding from case-content when it follows a related title */
.case-content--no-top-padding {
    padding-top: 0;
}

/* Metrics numbers styling */
.metrics {
    font-size: var(--font-size-xl);
    font-weight: 500;
}

/* Quote styling */
.case-section__text p.quote,
p.quote {
    font-size: var(--font-size-xl) !important;
    font-weight: 400 !important;
    margin: 32px !important;
    border-left: 1px solid #d1d5db;
    padding-left: 24px;
    font-style: italic;
}

/* Width utility classes */
.width-s {
    max-width: 350px;
}

.width-m {
    max-width: 600px;
}

.width-l {
    max-width: 900px;
}

.case-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0; /* Allows flex items to shrink below their content size */
}

.case-grid-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Background Sections */
.case-section--bg-light {
    background-color: #f8f9fa;
    position: relative;
    margin: 48px 0;
}

.case-section--bg-light .case-content__container {
    padding-top: 48px;
    padding-bottom: 48px;
}

/* Full browser width background */
.case-section--full-bg {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Overlapping Images */
.case-image--overlap-container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0;
    align-items: start;
}

.case-image--overlap-main {
    grid-column: 1 / -1;
    grid-row: 1;
    z-index: 1;
    width: 80%;
}

.case-image--overlap-secondary {
    grid-column: 2;
    grid-row: 1;
    z-index: 2;
    justify-self: end;
    align-self: end;
    transform: translateX(10px) translateY(40px);
    max-width: 240px;
}

@media (max-width: 768px) {
    .case-image--overlap-secondary {
        transform: none;
        justify-self: center;
        margin-top: 16px;
        position: relative;
        grid-row: 2;
    }
}

/* Two Column Text Layout */
.case-section__text--two-column {
    column-count: 2;
    column-gap: 48px;
    column-fill: balance;
}

.case-section__text--two-column p {
    break-inside: avoid;
    margin-bottom: 16px;
}

/* Responsive Design for Case Studies */
@media (max-width: 768px) {
    .case-hero {
        height: 100vh; /* Full viewport height on mobile */
        padding-top: 100px; /* Account for mobile header + breadcrumb space */
        padding-bottom: 32px;
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }
    
    .case-hero__breadcrumb {
        top: 100px; /* Position well below mobile header */
    }
    
    .case-hero-image {
        padding: 32px var(--space-3);
    }
    
    .case-hero__subtitle {
        font-size: var(--font-size-base);
    }
    
    .case-hero__problem {
        font-size: calc(var(--font-size-xl) * 1.2);
    }
    
    .case-hero__meta {
        flex-direction: column;
        gap: 16px;
    }
    
    .case-hero__meta-separator {
        display: none;
    }
    
    .case-content {
        padding: 48px 0;
    }
    
    .case-content__container {
        padding: 0 var(--space-3);
    }
    
    .case-navigation__content {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    
    .case-navigation__next {
        align-items: flex-start;
    }
    
    .case-image-grid {
        gap: 24px;
    }
    
    .case-image-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .case-content-image {
        margin: 32px 0;
    }
    
    .case-section__text--two-column {
        column-count: 1;
    }
    
    .case-two-column {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .case-three-column {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    /* All grid layouts become single column on mobile */
    .case-grid--half,
    .case-grid--quarter-three,
    .case-grid--three-quarter,
    .case-grid--third-two,
    .case-grid--two-third {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* 404 Page Mobile Styles */
    .error-page__title {
        font-size: 120px;
    }
    
    .error-page__subtitle {
        font-size: 20px;
    }
    
    .error-page__animation {
        max-width: 300px;
    }
    
    .error-page__story {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .case-hero__problem {
        font-size: var(--font-size-xl);
    }
}

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

/* ==========================================================================
   Reusable Organic Edge Components (SVG Dividers)
   ========================================================================== */

/* Base organic edge section */
.organic-edges {
    position: relative;
}

.organic-divider {
    position: absolute;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 1;
}

.organic-divider--top {
    top: -59px;
    margin-top: 32px;
}

.organic-divider--bottom {
    bottom: -59px;
    margin-bottom: 32px;
}

/* Usage: Add SVG divider elements to sections with organic-edges class */