/* ==================== HOME PAGE STYLES ====================
   Extracted from index.html inline styles
   Home page specific: hero, search, filters, cards, animations
   ============================================ */
/* ==================== HIDE NATIVE SCROLLBAR ==================== */
html.hide-scrollbar,
html.hide-scrollbar body {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

html.hide-scrollbar::-webkit-scrollbar,
html.hide-scrollbar body::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

/* ==================== CUSTOM MINIMAL SCROLLBAR ==================== */
.home-scroll-nav {
    position: fixed;
    right: 10px;
    top: 0;
    height: 100vh;
    z-index: 99;
    /* Above content (1) and backdrop (98), below header (100) */
    pointer-events: none;
    opacity: 0;
    /* Hidden by default, shows on scroll */
    transition: opacity 0.3s ease;
}

.home-scroll-nav--visible {
    opacity: 1;
}

.home-scroll-track {
    position: absolute;
    right: 0;
    top: 130px;
    width: 3px;
    height: calc(100vh - 260px);
    background-color: rgba(150, 150, 150, 0.3);
    border-radius: 1.5px;
}

.home-scroll-thumb {
    position: absolute;
    right: 0;
    top: 130px;
    width: 3px;
    height: 60px;
    background-color: rgba(100, 100, 100, 0.7);
    border-radius: 1.5px;
}

[data-theme="dark"] .home-scroll-track {
    background-color: rgba(100, 100, 100, 0.25);
}

[data-theme="dark"] .home-scroll-thumb {
    background-color: rgba(200, 200, 200, 0.6);
}


/* Hide scrollbar on mobile - not enough space */
@media (max-width: 767px) {
    .home-scroll-nav {
        display: none !important;
    }
}

/* ==================== NAV FADE-IN ON INITIAL LOAD ==================== */
/* Hide nav initially - GSAP will animate it in with fromTo */
.nav.nav-initial-hidden {
    opacity: 0;
    transform: translateY(-20px);
    visibility: hidden;
}

/* Include width transition so nav can still animate when clicking About */
/* NOTE: 180ms delay gives border time to fade out first (100ms) before width expands */
.nav.nav-fade-in {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.3s ease-out, width var(--dur-width) var(--ease-width) 180ms;
}

/* ==================== HOME PAGE SPECIFIC STYLES ==================== */

/* Page-specific layout variables - FLUID GRID SYSTEM */
:root {
    /* Match header padding for alignment (tablet/mobile default) */
    --home-margin-left: var(--nav-left);
    --home-margin-right: var(--nav-right);
    /* Hero positioning - fluid scaling: 60px@480px → 120px@1440px */
    --hero-top: clamp(60px, calc(30px + 6.25vw), 120px);
    --caption-top: 500px;
    --cards-top: 588px;
    /* Reduced from 600px for tighter spacing (56px filter + 12px gap) */

    /* Card dimensions - 16:9 aspect ratio (1920x1080) */
    --card-aspect-ratio: 16 / 9;
    --card-gap: clamp(20px, 1.5vw, 24px);

    /* Scroll Focus Cards System - reduced heights for compact layout */
    --focus-gap: clamp(16px, 2vw, 24px);
    --focus-min-h: 220px;
    /* Collapsed card height (was 255px) */
    --focus-max-h: 360px;
    /* Active card height (was 425px) */
    --focus-dur: 1200ms;
    --focus-ease: cubic-bezier(0.16, 1, 0.3, 1);
    /* Smooth ease-out for controlled, luxurious expansion */

    /* Fluid typography for home page - scales between mobile (375px) and desktop (1440px) */
    /* Line 1: 28px at mobile, scales up to 46px at 1440px */
    --home-font-hero-lg: clamp(28px, calc(16px + 2.1vw), 46px);
    /* Line 2: 20px at mobile, scales up to 36px at 1440px */
    --home-font-hero-md: clamp(20px, calc(12px + 1.32vw), 36px);
    --home-font-body: clamp(13px, 1.2vw, 16px);
}

/* Large screens (>1440px): Bigger cards - reduced heights */
@media (min-width: 1441px) {
    :root {
        --focus-min-h: 360px;
        /* was 425px */
        --focus-max-h: 500px;
        /* was 595px */
    }
}

/* Mobile: Content margins aligned with navigation */
@media (max-width: 768px) {
    :root {
        --home-margin-left: 20px;
        --home-margin-right: 20px;
    }
}

/* Fix page height to account for absolutely positioned cards */
.page-container {
    min-height: 100vh;
    max-width: none;
    /* Allow full width */
    padding-left: 0;
    /* Remove shared.css padding, use local margins */
    padding-right: 0;
}

/* ==================== HERO SECTION ==================== */
/* Hero: Relative position - scrolls with content like tablet/mobile */
.hero {
    position: relative;
    margin-left: var(--home-margin-left);
    margin-top: var(--hero-top);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1;
    width: 100%;
    max-width: none;
    /* Stable min-height to prevent CLS during load */
    min-height: 80px;
    transform: translate3d(0, 0, 0);
    /* will-change removed - causes compositor layer issues on mobile */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Line 1: Fluid typography */
/* Hero line animations */
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.hero-line-1 {
    font-family: 'Neue Haas Unica', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--home-font-hero-lg);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.026em;
    color: var(--primary-text);
    /* Hidden by default - GSAP animates in */
    opacity: 0;
    transform: translateY(20px);
    position: relative;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Prevent inherited CSS transitions from conflicting with GSAP */
    transition: none !important;
    will-change: transform, opacity;
}

.hero-line-2 {
    font-family: 'Neue Haas Unica', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--home-font-hero-md);
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: -0.026em;
    color: var(--primary-text);
    /* Hidden by default - GSAP animates in */
    opacity: 0;
    transform: translateY(20px);
    word-wrap: normal;
    position: relative;
    z-index: 1;
    overflow-wrap: normal;
    hyphens: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Prevent inherited CSS transitions from conflicting with GSAP */
    transition: none !important;
    will-change: transform, opacity;
}

/* Text Carousel with Underline Mask */
.text-carousel {
    display: inline;
    /* Changed from inline-block to allow wrapping with preceding text */
    position: relative;
    vertical-align: baseline;
}

.text-carousel::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: linear-gradient(90deg,
            rgba(44, 44, 44, 0.4) 0%,
            rgba(44, 44, 44, 0.25) 50%,
            rgba(44, 44, 44, 0) 100%);
    z-index: 1;
    transition: background 0.5s ease;
}

[data-theme="dark"] .text-carousel::after {
    background: linear-gradient(90deg,
            rgba(240, 240, 240, 0.5) 0%,
            rgba(240, 240, 240, 0.3) 50%,
            rgba(240, 240, 240, 0) 100%);
}

.carousel-mask {
    display: inline-block;
    position: relative;
    overflow: hidden;
    vertical-align: bottom;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-word {
    display: block;
    position: relative;
    white-space: nowrap;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    opacity: 1;
}

.carousel-word.active {
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-word.enter {
    transform: translateY(100%);
    opacity: 0;
    transition: none;
}

.carousel-word.exit {
    position: absolute;
    left: 0;
    top: 0;
    width: max-content;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================== SEARCH COMPONENT ==================== */
.search-container {
    position: relative;
    margin-left: var(--home-margin-left);
    margin-right: var(--home-margin-right);
    margin-top: 180px;
    width: auto;
    max-width: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* Hidden by default - GSAP animates in */
    opacity: 0;
    transform: translateY(20px);
    z-index: 60;
    padding: 12px 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ==== SPACING: HERO → SEARCH (AUTHORITATIVE - FLUID SCALING) ====
   Scales linearly from 60px@480px to 180px@1440px
   Formula: clamp(60px, 12.5vw, 180px)
   ================================================================= */

/* Base rule - fluid scaling replaces all fixed breakpoints */
.search-container {
    margin-top: clamp(60px, 12.5vw, 180px);
}

/* Stop animation from re-playing when class changes */
.search-container.intro-complete {
    animation: none !important;
    opacity: 1 !important;
    /* Ensure it stays visible and stable */
}


/* === DEFAULT/COLLAPSED STATE === */
.search-default {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    /* Per Figma: 12px gap between icon and text */
    height: 32px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* When expanded, search-default takes full width */
.search-container.expanded .search-default {
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
}

/* Search field wrapper - ensures smooth border expansion */
.search-field-wrapper {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    width: auto;
    /* Only take up space needed */
    min-width: 0;
    /* Allow shrinking */
    transition: width 0.35s cubic-bezier(0.2, 0, 0, 1),
        flex-grow 0.35s cubic-bezier(0.2, 0, 0, 1);
}

.search-icon-btn {
    display: flex;
    height: 32px;
    padding: 8px 8px 8px 7px;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--icon-border);
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    box-sizing: border-box;
    will-change: width, min-width, max-width;
    transition: width 0.35s cubic-bezier(0.2, 0, 0, 1),
        min-width 0.35s cubic-bezier(0.2, 0, 0, 1),
        max-width 0.35s cubic-bezier(0.2, 0, 0, 1),
        background-color 0.2s ease,
        border-color 0.2s ease;
    position: relative;
    overflow: visible;
}

/* Search button beam SVG positioning */
.search-icon-btn .search-beam-svg {
    position: absolute;
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    pointer-events: none;
    z-index: 10;
}

/* Hide beam SVG when expanded (green border takes over) */
.search-container.expanded .search-icon-btn .search-beam-svg {
    display: none;
}

/* Light mode: Hide beam animation on search icon entirely */
html:not([data-theme="dark"]) .search-icon-btn .search-beam-svg {
    display: none;
}

/* Light mode: Lime green hover for search button */
html:not([data-theme="dark"]) .search-icon-btn:hover {
    background: rgba(126, 187, 28, 0.15);
    border-color: #7EBB1C;
}

/* Dark mode: Hide beam animation, use green hover like light mode */
[data-theme="dark"] .search-icon-btn .search-beam-svg {
    display: none;
}

/* Dark mode: default state with grey border */
[data-theme="dark"] .search-icon-btn {
    background: transparent !important;
    border: 1px solid rgba(240, 240, 240, 0.3) !important;
}

[data-theme="dark"] .search-icon-btn:hover {
    background: rgba(126, 187, 28, 0.15) !important;
    border: 1px solid #7EBB1C !important;
}

/* When badge is visible, expand button width to include it */
.search-icon-btn.has-badge {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    /* Must override base max-width: 32px */
    padding-right: 8px;
    gap: 4px;
    /* Transition all three width properties for smooth animation */
    transition: width 0.35s cubic-bezier(0.2, 0, 0, 1) 0s,
        min-width 0.35s cubic-bezier(0.2, 0, 0, 1) 0s,
        max-width 0.35s cubic-bezier(0.2, 0, 0, 1) 0s,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

/* When expanded with badge, keep gap at 0 - spacing handled by margins */
.search-container.expanded .search-icon-btn.has-badge {
    /* Use same calc as non-badge expanded state for desktop consistency */
    width: calc((100vw - var(--home-margin-left) - var(--home-margin-right) - 120px) * 0.4);
    max-width: calc((100vw - var(--home-margin-left) - var(--home-margin-right) - 120px) * 0.4);
    min-width: 200px;
    overflow: hidden;
    gap: 0 !important;
    padding-right: 12px;
}

/* Badge in expanded state - positioned at end with margin */
.search-container.expanded .search-icon-btn.has-badge .search-badge {
    display: flex !important;
    /* Force show badge */
    margin-left: 8px;
    /* Space from input/clear button */
    flex-shrink: 0;
    /* Don't shrink badge */
}

/* When badge is visible, input shrinks from the right while text stays in place */
.search-container.expanded .search-icon-btn.has-badge .search-input {
    flex: 1 1 0% !important;
    /* Fill remaining space */
    min-width: 0;
    /* Allow shrinking */
    width: auto !important;
    /* Let flex handle width */
    max-width: none !important;
    /* No constraint */
    margin-left: 12px !important;
    /* Keep original position - don't shift left */
}

/* Hover - match pill hover pattern */
.search-icon-btn:hover {
    background-color: #f0f0f0;
    border-color: #d0d0d0;
}

.search-icon-btn:focus-visible {
    outline: 2px solid var(--primary-text);
    outline-offset: 2px;
}

/* Dark mode - match pill hover pattern */
[data-theme="dark"] .search-icon-btn:hover {
    background-color: #2a2a2a;
    border-color: #444444;
}

/* Expanded search - column layout with filter pills below */
.search-container.expanded {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    /* Match tablet/mobile gap */
}

/* Search field wrapper - auto width on desktop, lets button determine size */
.search-container.expanded .search-field-wrapper {
    width: auto;
    flex: 0 0 auto;
}

/* Search default - auto width on desktop */
.search-container.expanded .search-default {
    width: auto;
    flex: 0 0 auto;
}

/* Expanded search button becomes 1-column width on desktop */
.search-container.expanded .search-icon-btn {
    /* Match grid left column: 2fr of (2fr + 3fr) = 40% of available width
       Available = 100vw - margins - gap = calc(100vw - var(--home-margin-left) - var(--home-margin-right) - 120px)
       Left column = 40% of that */
    width: calc((100vw - var(--home-margin-left) - var(--home-margin-right) - 120px) * 0.4);
    max-width: calc((100vw - var(--home-margin-left) - var(--home-margin-right) - 120px) * 0.4);
    min-width: 200px;
    margin-left: 0;
    justify-content: flex-start;
    cursor: text;
    overflow: hidden;
    gap: 0;
    padding-right: 12px;
    /* Transition for expand/collapse (0.35s for desktop - faster for wider viewport) */
    transition: width 0.35s cubic-bezier(0.2, 0, 0, 1),
        min-width 0.35s cubic-bezier(0.2, 0, 0, 1),
        max-width 0.35s cubic-bezier(0.2, 0, 0, 1),
        background-color 0.2s ease,
        border-color 0.2s ease;
}



/* Focus state - green border, no fill, overrides hover */
.search-container.expanded .search-icon-btn:focus-within {
    background-color: transparent;
    border-color: #7EBB1C;
}

[data-theme="dark"] .search-container.expanded .search-icon-btn:focus-within {
    background-color: transparent;
    border-color: #7EBB1C;
}

.search-icon-btn svg.search-icon {
    width: 14px;
    height: 16px;
    fill: none;
    stroke: var(--primary-text);
    stroke-width: 1.425;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    margin-top: 2px;
    /* Per Figma: pt-2px on icon wrapper */
}

/* Search Input - hidden by default, shown when expanded */
.search-input {
    display: block;
    /* Keep in layout flow to prevent reflow */
    flex: none;
    /* No flex - use explicit width only */
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Neue Haas Unica W1G', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 16px;
    letter-spacing: -0.416px;
    color: var(--primary-text);
    padding: 0;
    margin: 0;
    margin-left: 0;
    /* Start with no left margin */
    min-width: 0;
    width: 0;
    /* Start at 0 width */
    opacity: 0;
    /* Hidden initially */
    pointer-events: none;
    overflow: hidden;
    /* Optimize for smooth transitions */
    will-change: width, margin-left;
    /* Collapse: opacity instant (0s) to hide text before field shrinks */
    transition: width 0.35s cubic-bezier(0.2, 0, 0, 1),
        margin-left 0.35s cubic-bezier(0.2, 0, 0, 1),
        opacity 0s linear 0s;
}

.search-container.expanded .search-input {
    /* Use flex to fill available space, leaving room for clear button */
    flex: 1;
    min-width: 0;
    margin-left: 12px;
    /* Gap between icon and input - transitions smoothly */
    opacity: 1;
    /* Show after field expands */
    pointer-events: auto;
    /* On expand: opacity fades in with delay after field expands */
    transition: width 0.35s cubic-bezier(0.2, 0, 0, 1) 0.02s,
        margin-left 0.35s cubic-bezier(0.2, 0, 0, 1) 0.02s,
        opacity 0.2s ease-in 0.2s;
}

.search-input::placeholder {
    color: var(--secondary-text) !important;
    /* Grey hint text */
    opacity: 1 !important;
}

/* Badge for filter count - small grey pill next to search icon */
.search-badge {
    display: none;
    align-items: center;
    justify-content: center;
    height: 16px;
    padding: 2px 6px;
    font-family: 'Neue Haas Unica W1G', sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 12px;
    color: #3d6b0a;
    background: rgba(126, 187, 28, 0.15);
    border: 1px solid #7EBB1C;
    border-radius: 4px;
    flex-shrink: 0;
    white-space: nowrap;
    box-sizing: border-box;
}

.search-badge.visible {
    display: flex;
}

/* Dark mode badge - same green styling */
[data-theme="dark"] .search-badge {
    background: rgba(126, 187, 28, 0.15);
    border-color: #7EBB1C;
    color: #a4d65a;
}

/* Caption text - fades in/out with search state */
.search-caption-text {
    font-size: 16px;
    font-weight: 300;
    line-height: 32px;
    letter-spacing: -0.416px;
    color: var(--primary-text);
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 1;
    width: auto;
    overflow: hidden;
    /* Fade IN: appears as field collapses */
    transition: opacity 0.3s ease-out 0.5s, width 0s linear 0.45s;
}

.search-container.expanded .search-caption-text {
    opacity: 0;
    width: 0;
    pointer-events: none;
    /* Fade OUT: immediate - hide before input appears */
    transition: opacity 0.05s ease-out, width 0s linear 0.05s;
}

/* Search field wrapper */
.search-field-wrapper {
    position: relative;
    flex-shrink: 0;
}

/* Clear button - inside field, only visible when text entered */
.search-clear-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    margin-left: 8px;
    /* Gap between input and clear button */
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.search-clear-btn.visible {
    display: flex;
}

.search-clear-btn:hover {
    opacity: 1;
}

.search-clear-btn svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: var(--primary-text);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* === FILTER PILLS ROW === */
.filter-pills-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    pointer-events: none;
    position: relative;
    overflow: hidden;
    transform: translateX(-20px);
    /* Collapse transition - smooth cubic-bezier for natural deceleration */
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        margin-top 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-container.expanded .filter-pills-row {
    max-height: 44px;
    margin-top: 2px;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    /* DESKTOP: Match 1-column width like the search button */
    max-width: calc((100vw - var(--home-margin-left) - var(--home-margin-right) - 120px) * 0.4);
    /* Expand: all properties animate together - synchronized timing */
    transition: max-height 0.35s cubic-bezier(0.2, 0, 0, 1),
        margin-top 0.35s cubic-bezier(0.2, 0, 0, 1),
        opacity 0.35s ease-out,
        transform 0.35s cubic-bezier(0.2, 0, 0, 1);
}

/* Show right gradient immediately when search expands (before pills slide in) */
.search-container.expanded .filter-pills-row::after {
    opacity: 1;
}


/* Filter Pills Container */
.filter-pills-wrapper {
    position: relative;
    flex: 1;
    min-width: 0;
    /* Allow flex item to shrink */
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.filter-pills-wrapper.dragging {
    cursor: grabbing;
    user-select: none;
}

/* Disable transitions during resize */
.no-transition,
.no-transition * {
    transition: none !important;
}

.filter-pills-wrapper::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

/* Gradient overlays on parent (doesn't scroll) */
.filter-pills-row::before,
.filter-pills-row::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease-out;
    z-index: 2;
}

/* Left gradient */
.filter-pills-row::before {
    left: 0;
    background: linear-gradient(to left, transparent, var(--background));
}

/* Right gradient */
.filter-pills-row::after {
    right: 0;
    background: linear-gradient(to right, transparent, var(--background));
}

.filter-pills-row.has-overflow::after {
    opacity: 1;
}

/* Show left gradient when scrolled or collapsing */
.filter-pills-row.scrolled-right::before,
.filter-pills-row.collapsing::before {
    opacity: 1;
    transition: opacity 0.1s ease-out;
}

.filter-pills-row.collapsing::after {
    opacity: 1;
    transition: opacity 0.1s ease-out;
}

.filter-pills-row.collapsing::before,
.filter-pills-row.collapsing::after {
    width: 80px;
}

/* Fade out entire pills section at once when closing */
.filter-pills-row.fading-out {
    opacity: 0 !important;
    max-height: 0 !important;
    max-width: 0 !important;
    margin-top: 0 !important;
    transform: translateX(-20px) !important;
    /* PHASED RETREAT: Opacity fades immediately (0s delay), then layout
       properties animate after 0.2s delay so pills visually disappear
       before content below starts moving upward. */
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s,
        max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
        max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
        margin-top 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s !important;
}

.filter-pills {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
    padding-right: 48px;
    /* Space for gradient overlay */
}

/* Individual Pill */
.filter-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 8px;
    font-family: inherit;
    border: 0.5px solid #313131;
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    cursor: pointer;
    opacity: 0;
    /* No transform - let parent row handle the slide animation */
    transition: opacity 0.3s ease-out,
        background-color 0.2s ease, border-color 0.2s ease;
}

.filter-pill:focus-visible {
    outline: 2px solid var(--primary-text);
    outline-offset: 2px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

.filter-pill.visible {
    opacity: 1;
    /* No transform needed - parent row handles positioning */
}

.filter-pill:hover {
    background-color: rgba(126, 187, 28, 0.15);
    border-color: #7EBB1C;
}

.filter-pill.selected {
    background: rgba(126, 187, 28, 0.15);
    border: 1px solid #7EBB1C;
    border-radius: 8px;
}

.filter-pill.selected .filter-pill-text {
    color: var(--primary-text);
}

/* X icon for selected pills */
.filter-pill-close {
    display: none;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
}

.filter-pill.selected .filter-pill-close {
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-pill-close svg {
    width: 8px;
    height: 8px;
    fill: none;
    stroke: var(--secondary-text);
    stroke-width: 1.5;
    stroke-linecap: round;
    display: block;
}

/* Selected pills container (Row 1) */
.selected-pills {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* Update pill gap to include close icon */
.filter-pill {
    gap: 8px;
}

/* Hint pill - dashed border, appears first when typeahead matches */
.filter-pill.hint {
    border-style: dashed;
    order: -2;
    /* Always first, before dynamic pills */
    display: none;
}

.filter-pill.hint.visible {
    display: flex;
    animation: hintPillIn 0.25s ease forwards;
}

.filter-pill.hint.selected {
    background: rgba(126, 187, 28, 0.15);
    border: 1px solid #7EBB1C;
    border-style: solid;
}

.filter-pill.hint.selected .filter-pill-text {
    color: var(--primary-text);
}

.filter-pill.hint.hiding {
    animation: hintPillOut 0.2s ease forwards;
}

/* Dynamic pills - created from hint selection */
.filter-pill.dynamic {
    order: -1;
    /* Appear before static pills, after hint */
    animation: hintPillIn 0.25s ease forwards;
}

.filter-pill.dynamic.selected {
    background: rgba(126, 187, 28, 0.15);
    border: 1px solid #7EBB1C;
}

.filter-pill.dynamic.selected .filter-pill-text {
    color: var(--primary-text);
}

.filter-pill.dynamic.hiding {
    animation: hintPillOut 0.2s ease forwards;
}

@keyframes hintPillIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

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

@keyframes hintPillOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-10px);
    }
}

[data-theme="dark"] .filter-pill:hover {
    background-color: rgba(126, 187, 28, 0.15);
    border-color: #7EBB1C;
}

[data-theme="dark"] .filter-pill.selected {
    background: rgba(126, 187, 28, 0.15);
    border: 1px solid #7EBB1C;
}



.filter-pill-text {
    font-family: 'Inp', 'Neue Haas Unica W1G', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    color: #FFF;
    text-transform: uppercase;
    white-space: nowrap;
}

[data-theme="dark"] .filter-pill-text {
    color: #FFF;
}

/* ==================== LIGHT MODE OVERRIDES ==================== */
/* Filter pills - neutral grey border and dark text for light mode */
.filter-pill {
    border-color: var(--icon-border);
}

.filter-pill:hover {
    background-color: rgba(126, 187, 28, 0.15);
    border-color: #7EBB1C;
}

.filter-pill-text {
    color: var(--primary-text);
}

/* ==================== CONTENT CARDS - FLEXBOX LAYOUT ==================== */
.content-cards {
    position: relative;
    margin-left: var(--home-margin-left);
    margin-right: var(--home-margin-right);
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
    z-index: 50;
}

/* Shift cards down when search is expanded - minimal on desktop (single row) */
.content-cards.search-active {
    transform: translateY(0);
}

/* VISUAL MERGE: Pull cards up closer to header when stuck */
body.filter-merged .content-cards {
    /* 20px shift to reduce gap as requested */
    transform: translateY(-20px) !important;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Card wrapper - uses 2:1 aspect ratio for shorter, more compact cards */
.card-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;
    /* Shorter aspect ratio (was 16:9) */
    /* Prevent layout shift during load - stable min-height */
    min-height: 200px;
    overflow: hidden;
    border-radius: var(--card-radius);
    opacity: 1;
    /* CSS Containment - isolate layout calculations to prevent CLS */
    contain: layout style;
}

/* Mobile: Taller cards with 16:9 aspect ratio */
@media (max-width: 767px) {
    .card-wrapper {
        aspect-ratio: 16 / 9;
        min-height: 180px;
    }
}

/* Video/image background - fills card and maintains aspect ratio */
.card-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ==================== HOVER ZOOM EFFECT ==================== */
/* Card stays normal size, inner image zooms on hover */
.scroll-zoom-card .card {
    overflow: hidden;
}

/* Disable the card translateY on hover for this specific card */
.scroll-zoom-card .card-link:hover .card {
    transform: none !important;
    box-shadow: none !important;
}

.scroll-zoom-card .card-bg-image {
    /* Initial reveal uses slow timing for cinematic effect */
    transition: transform var(--reveal-scale-dur, 1800ms) var(--reveal-ease, cubic-bezier(0.25, 0.9, 0.3, 1)),
        clip-path var(--reveal-clip-dur, 1600ms) var(--reveal-ease, cubic-bezier(0.25, 0.9, 0.3, 1)),
        opacity var(--reveal-clip-dur, 1600ms) ease-out !important;
    transform-origin: center center;
}

.scroll-zoom-card.in-view .card-bg-image {
    /* After reveal is complete, switch to faster hover-friendly transition */
    /* Use transition-delay to wait for reveal animation to complete before switching timing */
    transform: scale(1);
    opacity: 1;
    transition: transform var(--reveal-scale-dur, 1800ms) var(--reveal-ease, cubic-bezier(0.25, 0.9, 0.3, 1)),
        clip-path var(--reveal-clip-dur, 1600ms) var(--reveal-ease, cubic-bezier(0.25, 0.9, 0.3, 1)),
        opacity var(--reveal-clip-dur, 1600ms) ease-out !important;
}

/* After reveal completes, enable fast hover transitions */
.scroll-zoom-card.in-view.reveal-complete .card-bg-image {
    transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
        clip-path var(--reveal-clip-dur, 1600ms) var(--reveal-ease, cubic-bezier(0.25, 0.9, 0.3, 1)),
        opacity var(--reveal-clip-dur, 1600ms) ease-out !important;
}

/* Responsive hover scale: 1.0 at 1025px, 1.05 at 1440px+ */
.scroll-zoom-card .card-link:hover .card-bg-image {
    transform: scale(clamp(1.0, calc(1.0 + 0.05 * ((100vw - 1025px) / 415px)), 1.05)) !important;
}

/* ==================== TD EASY APPLY OVERLAY ==================== */
/* Canvas positioned over the gradient background area of the card image */

.scroll-zoom-card .card {
    position: relative;
}

.td-overlay-canvas {
    overflow: visible;
    position: absolute;
    /* Position to match the gradient background area in the image */
    top: 15.8%;
    left: 22%;
    width: 55.8%;
    height: 55.8%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8%;
    padding: 5% 4%;
    pointer-events: none;
    /* Initial state: hidden, fades in after card image starts revealing */
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s,
        transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Scale with card zoom */
    transform: scale(1);
    transform-origin: center center;
}

/* Fade in overlay ONLY when card is in view AND image is loaded */
.scroll-zoom-card.in-view.image-loaded .td-overlay-canvas,
.cs-reveal.in-view.image-loaded .td-overlay-canvas {
    opacity: 1;
}

/* Scale overlay with card zoom - must match .card-bg-image scale */
.scroll-zoom-card .card-link:hover .td-overlay-canvas {
    transform: scale(clamp(1.0, calc(1.0 + 0.05 * ((100vw - 1025px) / 415px)), 1.05)) !important;
}

/* Disable zoom for password-protected TD Easy Apply card */
.scroll-zoom-card .card-link.card-link--protected:hover .td-overlay-canvas,
.scroll-zoom-card .card-link.card-link--protected:hover .card-bg-image {
    transform: scale(1) !important;
}

/* Left: SVG Animation Section */
.td-overlay-svg {
    overflow: visible;
    width: 45%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -4%;
}

.td-overlay-svg svg {
    overflow: visible;
    width: 100%;
    height: auto;
    pointer-events: none;
}

/* ==================== TD BURST ANIMATION ==================== */
/* Elements start visible, on hover they fade out together then burst back in sequentially */

/* Keyframe 1: Fade out in place - same for all elements */
@keyframes tdFadeOut {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(0, 0) scale(1);
    }
}

/* Keyframe 2: Burst in from center with overshoot and fading green trail */
@keyframes tdBurstIn {
    0% {
        opacity: 0;
        transform: var(--start-transform);
        filter: drop-shadow(0 0 12px rgba(144, 213, 132, 0.7)) drop-shadow(0 0 24px rgba(144, 213, 132, 0.4));
    }

    30% {
        opacity: 1;
        filter: drop-shadow(0 0 10px rgba(144, 213, 132, 0.5)) drop-shadow(0 0 20px rgba(144, 213, 132, 0.3));
    }

    70% {
        opacity: 1;
        transform: translate(0, 0) scale(1.02);
        filter: drop-shadow(0 0 5px rgba(144, 213, 132, 0.2)) drop-shadow(0 0 10px rgba(144, 213, 132, 0.1));
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
        filter: drop-shadow(0 0 0px rgba(144, 213, 132, 0));
    }
}

/* Keyframe 3: Gentle floating animation with rotation variants - loops infinitely */
@keyframes tdFloat1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    50% {
        transform: translate(1px, -5px) scale(1) rotate(2.5deg);
    }
}

@keyframes tdFloat2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    50% {
        transform: translate(-1px, -5px) scale(1) rotate(-4deg);
    }
}

@keyframes tdFloat3 {

    0%,
    100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    50% {
        transform: translate(1px, -5px) scale(1) rotate(5deg);
    }
}

@keyframes tdFloat4 {

    0%,
    100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    50% {
        transform: translate(-1px, -5px) scale(1) rotate(-3.5deg);
    }
}

@keyframes tdFloat5 {

    0%,
    100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    50% {
        transform: translate(1px, -5px) scale(1) rotate(5deg);
    }
}

/* Default state - all elements visible in natural positions */
.td-burst-svg #background-elements>g {
    transform-box: fill-box;
    transform-origin: center center;
    opacity: 1;
    transform: translate(0, 0) scale(1);
    will-change: transform, opacity;
}

/* Individual element burst positions - custom properties for keyframes */
/* Stars */
.td-burst-svg #left-lowest-star {
    --start-transform: translate(88px, -12px) scale(0.3);
}

.td-burst-svg #left-middle-star {
    --start-transform: translate(126px, 28px) scale(0.3);
}

.td-burst-svg #left-top-star {
    --start-transform: translate(50px, 60px) scale(0.3);
}

.td-burst-svg #middle-top-star {
    --start-transform: translate(8px, 110px) scale(0.3);
}

.td-burst-svg #right-top-star {
    --start-transform: translate(-45px, 58px) scale(0.3);
}

.td-burst-svg #right-middle-star {
    --start-transform: translate(-122px, 46px) scale(0.3);
}

.td-burst-svg #right-lowest-star {
    --start-transform: translate(-82px, -16px) scale(0.3);
}

/* Financial Icons */
.td-burst-svg #cheque {
    --start-transform: translate(-3px, 70px) scale(0.3);
}

.td-burst-svg #cashback {
    --start-transform: translate(91px, 34px) scale(0.3);
}

.td-burst-svg #airplane {
    --start-transform: translate(-121px, -18px) scale(0.3);
}

.td-burst-svg #card {
    --start-transform: translate(53px, 100px) scale(0.3);
}

.td-burst-svg #piggy {
    --start-transform: translate(-40px, 104px) scale(0.3);
}

.td-burst-svg #egg {
    --start-transform: translate(-94px, 26px) scale(0.3);
}

.td-burst-svg #bill-machine {
    --start-transform: translate(126px, -15px) scale(0.3);
}

.td-burst-svg #bag {
    --start-transform: translate(-91px, 73px) scale(0.3);
}

.td-burst-svg #shield {
    --start-transform: translate(100px, 77px) scale(0.3);
}

/* ==================== CLUSTER GROUP BURST ANIMATIONS ==================== */
/* JS-managed: .td-burst-active triggers burst+float, .td-float-only keeps floating */
/* Sequence: Group 2 (Security/Travel) → Group 3 (Savings) → Group 1 (Stars) */

/* --- BURST + FLOAT (triggered on mouseenter) --- */
/* CLUSTER GROUP 2: Security/Travel Icons - FIRST (burst at 0.3s) */
.scroll-zoom-card.td-burst-active .td-burst-svg #shield {
    animation: tdFadeOut 0.3s ease-out forwards, tdBurstIn 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.3s forwards, tdFloat1 3s ease-in-out 0.8s infinite;
}

.scroll-zoom-card.td-burst-active .td-burst-svg #bag {
    animation: tdFadeOut 0.3s ease-out forwards, tdBurstIn 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.3s forwards, tdFloat3 2.8s ease-in-out 0.8s infinite;
}

.scroll-zoom-card.td-burst-active .td-burst-svg #cheque {
    animation: tdFadeOut 0.3s ease-out forwards, tdBurstIn 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.3s forwards, tdFloat2 3.2s ease-in-out 0.8s infinite;
}

.scroll-zoom-card.td-burst-active .td-burst-svg #airplane {
    animation: tdFadeOut 0.3s ease-out forwards, tdBurstIn 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.3s forwards, tdFloat5 2.6s ease-in-out 0.8s infinite;
}

.scroll-zoom-card.td-burst-active .td-burst-svg #bill-machine {
    animation: tdFadeOut 0.3s ease-out forwards, tdBurstIn 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.3s forwards, tdFloat4 3.4s ease-in-out 0.8s infinite;
}

/* CLUSTER GROUP 3: Savings/Money Icons - SECOND (burst at 0.55s) */
.scroll-zoom-card.td-burst-active .td-burst-svg #cashback {
    animation: tdFadeOut 0.3s ease-out forwards, tdBurstIn 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.55s forwards, tdFloat2 3.1s ease-in-out 1.05s infinite;
}

.scroll-zoom-card.td-burst-active .td-burst-svg #egg {
    animation: tdFadeOut 0.3s ease-out forwards, tdBurstIn 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.55s forwards, tdFloat4 2.9s ease-in-out 1.05s infinite;
}

.scroll-zoom-card.td-burst-active .td-burst-svg #piggy {
    animation: tdFadeOut 0.3s ease-out forwards, tdBurstIn 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.55s forwards, tdFloat1 3.3s ease-in-out 1.05s infinite;
}

.scroll-zoom-card.td-burst-active .td-burst-svg #card {
    animation: tdFadeOut 0.3s ease-out forwards, tdBurstIn 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.55s forwards, tdFloat5 2.7s ease-in-out 1.05s infinite;
}

/* CLUSTER GROUP 1: Stars - LAST (burst at 0.8s) */
.scroll-zoom-card.td-burst-active .td-burst-svg #left-lowest-star {
    animation: tdFadeOut 0.3s ease-out forwards, tdBurstIn 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.8s forwards, tdFloat3 3s ease-in-out 1.3s infinite;
}

.scroll-zoom-card.td-burst-active .td-burst-svg #left-middle-star {
    animation: tdFadeOut 0.3s ease-out forwards, tdBurstIn 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.8s forwards, tdFloat1 2.8s ease-in-out 1.3s infinite;
}

.scroll-zoom-card.td-burst-active .td-burst-svg #left-top-star {
    animation: tdFadeOut 0.3s ease-out forwards, tdBurstIn 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.8s forwards, tdFloat5 3.2s ease-in-out 1.3s infinite;
}

.scroll-zoom-card.td-burst-active .td-burst-svg #middle-top-star {
    animation: tdFadeOut 0.3s ease-out forwards, tdBurstIn 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.8s forwards, tdFloat2 2.6s ease-in-out 1.3s infinite;
}

.scroll-zoom-card.td-burst-active .td-burst-svg #right-top-star {
    animation: tdFadeOut 0.3s ease-out forwards, tdBurstIn 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.8s forwards, tdFloat4 3.4s ease-in-out 1.3s infinite;
}

.scroll-zoom-card.td-burst-active .td-burst-svg #right-middle-star {
    animation: tdFadeOut 0.3s ease-out forwards, tdBurstIn 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.8s forwards, tdFloat3 2.9s ease-in-out 1.3s infinite;
}

.scroll-zoom-card.td-burst-active .td-burst-svg #right-lowest-star {
    animation: tdFadeOut 0.3s ease-out forwards, tdBurstIn 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.8s forwards, tdFloat1 3.1s ease-in-out 1.3s infinite;
}

/* ==================== MOBILE: Float Only (no burst animation) ==================== */
@media (max-width: 768px) {

    /* Mobile-specific stronger float keyframes */
    @keyframes tdFloatMobile1 {

        0%,
        100% {
            transform: translate(0, 0) scale(1) rotate(0deg);
        }

        50% {
            transform: translate(2px, -8px) scale(1) rotate(4deg);
        }
    }

    @keyframes tdFloatMobile2 {

        0%,
        100% {
            transform: translate(0, 0) scale(1) rotate(0deg);
        }

        50% {
            transform: translate(-2px, -8px) scale(1) rotate(-6deg);
        }
    }

    @keyframes tdFloatMobile3 {

        0%,
        100% {
            transform: translate(0, 0) scale(1) rotate(0deg);
        }

        50% {
            transform: translate(2px, -8px) scale(1) rotate(7deg);
        }
    }

    @keyframes tdFloatMobile4 {

        0%,
        100% {
            transform: translate(0, 0) scale(1) rotate(0deg);
        }

        50% {
            transform: translate(-2px, -8px) scale(1) rotate(-5deg);
        }
    }

    @keyframes tdFloatMobile5 {

        0%,
        100% {
            transform: translate(0, 0) scale(1) rotate(0deg);
        }

        50% {
            transform: translate(2px, -8px) scale(1) rotate(8deg);
        }
    }

    /* On mobile, each element floats with stronger movement */
    .td-burst-svg #shield {
        animation: tdFloatMobile1 3s ease-in-out 0s infinite;
    }

    .td-burst-svg #bag {
        animation: tdFloatMobile3 2.8s ease-in-out 0.2s infinite;
    }

    .td-burst-svg #cheque {
        animation: tdFloatMobile2 3.2s ease-in-out 0.4s infinite;
    }

    .td-burst-svg #airplane {
        animation: tdFloatMobile5 2.6s ease-in-out 0.1s infinite;
    }

    .td-burst-svg #bill-machine {
        animation: tdFloatMobile4 3.4s ease-in-out 0.3s infinite;
    }

    .td-burst-svg #cashback {
        animation: tdFloatMobile2 3.1s ease-in-out 0.5s infinite;
    }

    .td-burst-svg #egg {
        animation: tdFloatMobile4 2.9s ease-in-out 0.15s infinite;
    }

    .td-burst-svg #piggy {
        animation: tdFloatMobile1 3.3s ease-in-out 0.35s infinite;
    }

    .td-burst-svg #card {
        animation: tdFloatMobile5 2.7s ease-in-out 0.25s infinite;
    }

    .td-burst-svg #left-lowest-star {
        animation: tdFloatMobile3 3s ease-in-out 0.6s infinite;
    }

    .td-burst-svg #left-middle-star {
        animation: tdFloatMobile1 2.8s ease-in-out 0.7s infinite;
    }

    .td-burst-svg #left-top-star {
        animation: tdFloatMobile5 3.2s ease-in-out 0.45s infinite;
    }

    .td-burst-svg #middle-top-star {
        animation: tdFloatMobile2 2.6s ease-in-out 0.55s infinite;
    }

    .td-burst-svg #right-top-star {
        animation: tdFloatMobile4 3.4s ease-in-out 0.65s infinite;
    }

    .td-burst-svg #right-middle-star {
        animation: tdFloatMobile3 2.9s ease-in-out 0.8s infinite;
    }

    .td-burst-svg #right-lowest-star {
        animation: tdFloatMobile1 3.1s ease-in-out 0.75s infinite;
    }

    /* Override burst class on mobile - mobile uses its own float animations above */
    .scroll-zoom-card.td-burst-active .td-burst-svg #background-elements>g {
        animation: inherit;
    }

    /* Disable canvas transform to prevent shifting */
    .scroll-zoom-card .card-link:hover .td-overlay-canvas {
        transform: none !important;
    }

    /* Scale up the SVG on hover - smooth zoom effect in place */
    .td-burst-svg {
        transition: transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
        transform-origin: center center;
    }

    .scroll-zoom-card .card-link:hover .td-burst-svg,
    .scroll-zoom-card .card-link:active .td-burst-svg {
        transform: scale(1.15);
    }
}

/* Right: Login Form Section */
.td-overlay-login {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 2%;
    margin-top: -5%;
    /* Scale down for desktop */
    transform: scale(0.7);
    transform-origin: center center;
}

.td-login-title {
    display: flex;
    padding: 4% 0;
    align-items: flex-start;
    font-family: 'Neue Haas Unica', sans-serif;
    font-size: clamp(6px, 1.2vw, 16px);
    font-weight: 400;
    color: #1A5336;
    margin: 0;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.td-login-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(2px, 0.8vw, 12px);
    align-self: stretch;
}

.td-login-field {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.td-login-field input {
    width: 100%;
    padding: 4% 3%;
    font-family: 'Neue Haas Unica', sans-serif;
    font-size: clamp(5px, 0.8vw, 12px);
    font-weight: 300;
    color: #1C1C1C;
    background: #FFFFFF;
    border: 1px solid #8C8C8C;
    border-radius: 2.65px 2.65px 0 0;
    outline: none;
    box-sizing: border-box;
}

.td-login-field input::placeholder {
    color: #8C8C8C;
}

.td-login-forgot {
    font-family: 'Neue Haas Unica', sans-serif;
    font-size: clamp(3px, 0.7vw, 12px);
    font-weight: 400;
    color: #038203;
    text-decoration: none;
    margin-top: clamp(-3px, -0.4vw, -6px);
    /* Reduce gap by half */
}

.td-login-button {
    width: 100%;
    padding: 3% 0;
    margin-top: 4%;
    font-family: 'Neue Haas Unica', sans-serif;
    font-size: clamp(7px, 1vw, 14px);
    font-weight: 400;
    color: #FFFFFF;
    background: #008A00;
    border: 1px solid #008A00;
    border-radius: 2px;
    cursor: default;
}

/* Desktop scaling (1025-1439px) - smooth scaling for login form */
@media (min-width: 1025px) and (max-width: 1439px) {
    .td-overlay-canvas {
        gap: clamp(4%, calc(4% + 4 * ((100vw - 1025px) / 415)), 8%);
    }

    .td-overlay-login {
        transform: scale(clamp(0.55, calc(0.55 + 0.15 * ((100vw - 1025px) / 415)), 0.7));
        width: clamp(55%, calc(55% - 15 * ((100vw - 1025px) / 415)), 40%);
    }

    .td-login-title {
        font-size: clamp(10px, calc(10px + 6 * ((100vw - 1025px) / 415)), 16px);
    }

    .td-login-field input {
        font-size: clamp(5px, calc(5px + 7 * ((100vw - 1025px) / 415)), 12px);
        padding: clamp(1%, calc(1% + 3 * ((100vw - 1025px) / 415)), 4%) 3%;
    }

    .td-login-button {
        font-size: clamp(7px, calc(7px + 7 * ((100vw - 1025px) / 415)), 14px);
        padding: clamp(1%, calc(1% + 2 * ((100vw - 1025px) / 415)), 3%) 0;
    }
}

/* Mobile adjustments - lower fidelity */
@media (max-width: 767px) {
    .td-overlay-canvas {
        top: calc(15.8% + 1px);
        padding: 3% 5%;
        justify-content: center;
    }

    /* Hide login section on mobile */
    .td-overlay-login {
        display: none;
    }

    /* Center and enlarge SVG on mobile */
    .td-overlay-svg {
        width: 55%;
        height: auto;
    }
}



/* Filtered out cards - hidden from view and calculations */
.card-wrapper.filtered-out {
    display: none !important;
    /* Remove from flow to fix spacing */
    opacity: 0 !important;
    pointer-events: none;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* WebGL Canvas - for shader-based card backgrounds */
.webgl-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    /* Initial state: clipped from top, slightly scaled - matches card-bg-image */
    transform: scale(1.15);
    clip-path: inset(0 0 100% 0);
    transition-property: clip-path, transform;
    transition-duration: var(--reveal-clip-dur), var(--reveal-scale-dur);
    transition-timing-function: var(--reveal-ease), var(--reveal-ease);
    transition-delay: 0ms, var(--reveal-scale-delay);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* WebGL canvas revealed state - triggered when parent has .in-view */
.card-wrapper.in-view .webgl-canvas,
.cs-reveal.in-view .webgl-canvas {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
}

/* Legacy card-enter classes kept for backwards compatibility */
.card-enter {
    opacity: 0;
}

.card-enter-active {
    opacity: 1;
}

/* Prefers reduced motion - disable animations */
@media (prefers-reduced-motion: reduce) {
    .card-wrapper {
        transition: none !important;
    }
}

.card {
    width: 100%;
    /* Always fill container - container handles margins */
    max-width: none;
    /* No cap - container controls width */
    height: 100%;
    /* Fill wrapper height (JS controls wrapper height) */
    background-color: var(--card-bg);
    border-radius: var(--card-radius);
    position: relative;
    overflow: hidden;
    /* Prevent accidental dragging/selection on trackpads */
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    /* Hover transition: Snappier timing for hover feel, separate from focus-dur */
    transition: background-color 0.5s ease,
        transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Prevent image dragging in cards */
.card img,
.card video {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    -webkit-touch-callout: none;
}

/* Card Link - wraps clickable cards */
.card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--card-radius);
    height: 100%;
    /* FIX: Inherit height from card-wrapper so .card inside can fill it */
}

.card-link {
    cursor: none;
    /* Hide default cursor */
}

.card-link .card {
    cursor: none;
}

.card-link:hover .card {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.card-link:focus {
    outline: none;
}

.card-link:focus-visible .card {
    outline: 2px solid var(--primary-text);
    outline-offset: 4px;
}

[data-theme="dark"] .card-link:hover .card {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Card Details - positioned INSIDE the card at top left */
.card-details {
    position: absolute;
    top: 24px;
    left: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.25s ease-out;
    pointer-events: none;
}

/* Hide card details on mobile */
@media (max-width: 768px) {
    .card-details {
        display: none !important;
    }
}

/* Show details on card hover or when active - ONLY if image is loaded AND reveal animation complete */
.card-wrapper.in-view.image-loaded .card:hover .card-details,
.card-wrapper.in-view.image-loaded .card-link:hover .card-details,
.card-wrapper.in-view.image-loaded.is-active .card-details {
    opacity: 1;
    pointer-events: auto;
}

/* TD Mobile carousel card - show details on hover ONLY if loaded */
.td-mobile-carousel-card.in-view.image-loaded .card:hover .card-details,
.td-mobile-carousel-card.in-view.image-loaded.is-active .card-details {
    opacity: 1;
    pointer-events: auto;
}

/* TD Mobile carousel card - ensure classic black text color */
.td-mobile-carousel-card .card-title-line,
.td-mobile-carousel-card .card-year {
    color: #1a1a1a;
}

/* TD Easy Apply (burst) card - keep white text in light mode due to dark background */
html:not([data-theme="dark"]) .td-burst-card .card-title-line,
html:not([data-theme="dark"]) .td-burst-card .card-year {
    color: #ffffff;
}

/* QA Framework card - keep white text in light mode due to dark WebGL background */
html:not([data-theme="dark"]) #qaCard .card-title-line,
html:not([data-theme="dark"]) #qaCard .card-year {
    color: #ffffff;
}

/* Card Info - Title and Year (stacked vertically, left-aligned) */
.card-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
}

.card-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.card-title-line {
    font-family: 'Neue Haas Unica W1G', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.416px;
    color: var(--primary-text);
    text-align: left;
}

.card-year {
    display: flex;
    align-items: center;
    height: 32px;
    font-family: 'Inp', 'Neue Haas Unica W1G', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    color: var(--primary-text);
    text-transform: uppercase;
}



/* ==================== PASSWORD PROTECTED CARD ==================== */
.card-link--protected {
    cursor: pointer;
}

.card-password-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--card-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, backdrop-filter 0.3s ease;
    z-index: 10;
}

[data-theme="dark"] .card-password-overlay {
    background: rgba(0, 0, 0, 0.60);
}

.card-password-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Project info displayed in top left of password overlay */
.card-password-info {
    position: absolute;
    top: 24px;
    left: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.card-password-title {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.card-password-title-line {
    font-family: 'Neue Haas Unica W1G', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95);
    line-height: 20px;
    letter-spacing: -0.416px;
}

.card-password-year {
    display: flex;
    align-items: center;
    height: 32px;
    font-family: 'Inp', 'Neue Haas Unica W1G', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}

/* Hide project info on mobile */
@media (max-width: 768px) {
    .card-password-info {
        display: none;
    }
}

.card-password-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.card-password-field {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 14px;
    padding: 6px 6px 6px 18px;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.1s ease;
}

/* Dark mode: Keep white field background like linter design */

.card-password-field.shake {
    animation: passwordShake 0.5s ease;
}

@keyframes passwordShake {

    0%,
    100% {
        transform: translateX(0);
    }

    15% {
        transform: translateX(-8px);
    }

    30% {
        transform: translateX(8px);
    }

    45% {
        transform: translateX(-6px);
    }

    60% {
        transform: translateX(6px);
    }

    75% {
        transform: translateX(-3px);
    }

    90% {
        transform: translateX(3px);
    }
}

.card-password-input {
    border: none;
    background: transparent;
    font-family: 'Neue Haas Unica W1G', sans-serif;
    font-size: 18px;
    /* 16px+ prevents iOS auto-zoom on focus */
    font-weight: 400;
    color: #1a1a1a;
    width: 180px;
    outline: none;
}

.card-password-input::placeholder {
    color: #888;
}

/* Dark mode: Keep black text input like linter design */

.card-password-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: #222222;
    border-radius: 10px;
    cursor: pointer;
    color: #ffffff;
    transition: background 0.3s ease, transform 0.2s ease;
    position: relative;
}

.card-password-submit .icon-arrow,
.card-password-submit .icon-check {
    position: absolute;
    width: 24px;
    height: 24px;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.card-password-submit .icon-arrow {
    opacity: 1;
    transform: scale(1);
}

.card-password-submit .icon-check {
    opacity: 0;
    transform: scale(0.5);
}

/* Success state - green background with white checkmark */
.card-password-submit.success {
    background: #00B624;
    pointer-events: none;
}

.card-password-submit.success .icon-arrow {
    opacity: 0;
    transform: scale(0.5);
}

.card-password-submit.success .icon-check {
    opacity: 1;
    transform: scale(1);
}

.card-password-submit:hover {
    background: #333333;
    transform: scale(1.05);
}

.card-password-submit.success:hover {
    background: #00B624;
    transform: scale(1);
}

/* Dark mode: Keep black button like linter design - no overrides needed */

.card-password-error {
    font-family: 'Neue Haas Unica W1G', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    display: none;
    /* Hide by default to remove whitespace */
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.card-password-error.visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* ==================== PASSWORD FIELD - ENHANCED FOR LARGER SCREENS ==================== */
/* Larger password field for tablet and desktop viewports */
@media (min-width: 481px) {
    .card-password-field {
        padding: 8px 8px 8px 22px;
        border-radius: 16px;
        gap: 12px;
    }

    .card-password-input {
        width: 220px;
        font-size: 20px;
        font-weight: 400;
    }

    .card-password-submit {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    .card-password-submit svg {
        width: 20px;
        height: 20px;
    }

    .card-password-error {
        font-size: 14px;
    }

    .card-password-container {
        gap: 14px;
    }
}

/* ==================== RESPONSIVE ==================== */
/* Fluid system handles most scaling - breakpoints for layout changes only */

@media (max-width: 1440px) {
    :root {
        /* --hero-top: now uses fluid clamp() in base :root */
        --caption-top: 380px;
        --cards-top: 480px;
        /* Increased from 448px to provide more room for filter */
        /* Focus card heights for tablet - 15% smaller */
        --focus-min-h: clamp(85px, 15.3vw, 119px);
        --focus-max-h: clamp(272px, 42.5vw, 408px);
    }

    .hero {
        position: relative;
        top: auto;
        margin-top: var(--hero-top);
        /* No margin-left - parent container handles alignment */
    }

    .search-container {
        /* Change from absolute to relative for proper document flow */
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        margin-left: var(--home-margin-left);
        margin-right: var(--home-margin-right);
        /* margin-top handled by dedicated breakpoints: 140px tablet, 60px mobile */
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding-bottom: 0;
        z-index: 60;
    }

    .search-container.expanded {
        gap: 12px;
    }

    .search-default {
        width: auto;
        flex-shrink: 0;
    }

    .search-container.expanded .search-field-wrapper {
        width: auto;
        flex-shrink: 0;
    }

    .search-icon-btn {
        min-width: 0 !important;
        transition: width 0.35s cubic-bezier(0.2, 0, 0, 1),
            min-width 0.35s cubic-bezier(0.2, 0, 0, 1) !important;
    }

    .search-container.expanded .search-icon-btn {
        /* Keep 1-column width at 1025-1440px since 2-column grid is still active */
        /* width: 100% moved to @media (max-width: 1024px) */
        min-width: 200px;
        /* Fast expand (0.35s) */
        transition: width 0.35s cubic-bezier(0.2, 0, 0, 1),
            min-width 0.35s cubic-bezier(0.2, 0, 0, 1);
    }

    /* Override badge width - only at 1024px and below */
    /* .search-container.expanded .search-icon-btn.has-badge width moved to @media (max-width: 1024px) */

    .search-container.expanded .search-input {
        flex: 1;
        /* Ensure input transitions smoothly */
        transition: width 0.35s cubic-bezier(0.2, 0, 0, 1) 0.02s,
            margin-left 0.35s cubic-bezier(0.2, 0, 0, 1) 0.02s,
            opacity 0.2s ease-in 0.35s !important;
    }

    .filter-pills-row {
        flex: 1;
        min-width: 0;
    }

    .filter-pills-wrapper {
        width: 100%;
        max-width: 100%;
        overflow-x: scroll !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
    }

    .filter-pills {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        padding-right: 20px;
    }

    .filter-pill {
        flex-shrink: 0 !important;
    }

    .search-container.expanded .filter-pills-row {
        transform: translateY(0);
        /* max-width: 100% moved to @media (max-width: 1024px) - keep 1-column at 1025-1440px */
    }

    .content-cards.search-active {
        transform: translateY(0);
        margin-top: 12px;
        /* Add gap when filters are expanded */
    }

    /* Tablet: Maintain gap between search and first card like desktop */
    .content-cards {
        margin-top: 16px;
    }

    .card {
        width: 100%;
        max-width: none;
    }

    .card-details {
        top: clamp(16px, 2vw, 24px);
        left: clamp(16px, 2vw, 24px);
        right: auto;
        bottom: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .card-info {
        width: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .card-title {
        align-items: flex-start;
    }

    .card-title-line {
        text-align: left;
    }

    .card-year {
        height: 32px;
        font-size: 12px;
    }

    /* Hide pills entirely on tablet */
    .card-tags {
        display: none !important;
    }

    /* Tablet: Reduced breakout for active card */
    .card-wrapper[data-card-active="true"] {
        margin-left: -12px;
        margin-right: -12px;
    }

    .card-wrapper[data-card-active="true"] .card {
        /* Card uses aspect-ratio, no height override needed */
    }
}


/* Full screen for screens below 1025px (tablet and mobile) */


@media (max-width: 480px) {
    :root {
        /* --hero-top: now uses fluid clamp() in base :root */
        --caption-top: 340px;
        --cards-top: 440px;
        /* Increased from 408px to provide more room for filter */
        /* Focus card heights for mobile - 15% smaller */
        --focus-min-h: clamp(85px, 21.25vw, 119px);
        --focus-max-h: clamp(102px, 25.5vw, 143px);

        /* Smaller font size for mobile hero */
        --home-font-hero-md: clamp(16px, 5vw, 24px);
    }

    .hero {
        position: relative;
        top: auto;
        margin-top: var(--hero-top);
        margin-left: var(--home-margin-left);
        width: calc(100% - var(--home-margin-left) - var(--home-margin-right));
        /* Ensure hero takes actual available width */
    }

    .hero-line-2 {
        white-space: normal;
        /* Ensure it wraps */
    }

    /* Search container mobile fixes */
    .search-container {
        /* Override to relative for proper document flow */
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: auto;
        max-width: calc(100% - var(--home-margin-left) - var(--home-margin-right));
        margin-left: var(--home-margin-left);
        margin-right: var(--home-margin-right);
        /* margin-top: consolidated at lines 308 (180px), 326 (140px tablet), 333 (60px mobile) */
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-bottom: 0;
    }

    .search-container.expanded {
        gap: 8px;
    }

    .search-default {
        width: 100%;
    }

    /* Hide caption text on narrow screens to prevent overlap with search CTA/badge */
    .search-caption-text {
        display: none;
    }

    .search-container.expanded .search-field-wrapper {
        width: 100%;
        /* Fast expand (0.35s) */
        transition: width 0.35s cubic-bezier(0.2, 0, 0, 1);
    }

    /* CRITICAL: CSS cannot transition to 'auto' - must set explicit collapsed width */
    .search-field-wrapper {
        width: 32px;
        /* Explicit collapsed width = button size */
        transition: width 1s cubic-bezier(0.2, 0, 0, 1) !important;
    }

    .search-icon-btn {
        min-width: 0 !important;
        /* Slower collapse on mobile (1s) - NO !important so JS can override */
        transition: width 1s cubic-bezier(0.2, 0, 0, 1),
            min-width 1s cubic-bezier(0.2, 0, 0, 1),
            max-width 1s cubic-bezier(0.2, 0, 0, 1);
    }

    .search-container.expanded .search-icon-btn {
        width: 100% !important;
        min-width: 0 !important;
        /* Fast expand (0.35s) - NO !important so JS can override */
        transition: width 0.35s cubic-bezier(0.2, 0, 0, 1),
            min-width 0.35s cubic-bezier(0.2, 0, 0, 1);
    }

    .search-container.expanded .search-icon-btn.has-badge {
        width: 100% !important;
    }

    .search-container.expanded .search-input {
        width: 100%;
        flex: 1;
        transition: width 0.35s cubic-bezier(0.2, 0, 0, 1) 0.02s,
            margin-left 0.35s cubic-bezier(0.2, 0, 0, 1) 0.02s,
            opacity 0.2s ease-in 0.35s !important;
    }

    .filter-pills-row {
        width: 100%;
    }

    .filter-pills-wrapper {
        width: 100%;
        max-width: 100%;
        overflow-x: scroll !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
    }

    .filter-pills {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        padding-right: 20px;
    }

    .filter-pill {
        flex-shrink: 0 !important;
        padding: 0 8px;
        height: 28px;
    }

    .search-container.expanded .filter-pills-row {
        transform: translateY(0);
    }

    .filter-pill-text {
        font-size: 10px;
    }

    .content-cards.search-active {
        transform: translateY(0);
        margin-top: 12px;
        /* Add gap when filters are expanded */
    }

    /* Since filter is now in normal flow, match desktop spacing (12px search padding + 4px margin) */
    .content-cards {
        margin-top: 16px;
    }

    .card-details {
        gap: 8px;
    }

    /* Hide pills entirely on mobile */
    .card-tags {
        display: none !important;
    }

    .card-tag {
        height: 24px;
        font-size: 9px;
        padding: 0 5px;
    }

    .card-password-input {
        width: 140px;
        font-size: 13px;
    }

    .card-password-field {
        padding: 3px 3px 3px 12px;
        border-radius: 10px;
    }

    .card-password-submit {
        width: 32px;
        height: 32px;
        border-radius: 7px;
        border-width: 1px;
    }

    .card-password-error {
        font-size: 11px;
    }

    /* Fix password overlay centering on mobile */
    .card-password-overlay {
        padding-bottom: 20px;
    }

    .card-password-container {
        gap: 8px;
    }

    /* Mobile: No width breakout, smaller height increase */
    .card-wrapper[data-card-active="true"] {
        margin-left: 0;
        margin-right: 0;
    }

    .card-wrapper[data-card-active="true"] .card {
        /* Card uses aspect-ratio, no height override needed */
    }

    /* Mobile: Faster transition for snappier feel, no flickering */
    .card-wrapper {
        transition:
            height 400ms cubic-bezier(0.22, 1, 0.36, 1),
            transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.25s ease;
        /* Prevent compositor layer flickering on mobile */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* ==================== FOLLOW-UP SECTION ==================== */
.follow-up-section {
    width: 100%;
    padding: 90px 0 140px 0;
    /* Reduced top padding for tighter card-to-footer spacing */
    background-color: var(--background);
    transition: background-color 0.5s ease;
    display: flex;
    justify-content: flex-start;
}

.follow-up-content {
    max-width: none;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.follow-up-line-1 {
    /* Match cs-feature-text styling from case study */
    font-family: 'Neue Haas Unica', sans-serif;
    font-size: 17px;
    line-height: 24px;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--primary-text);
    margin: 0 0 20px 0;
    max-width: 600px;
    text-align: left;
}

.mobile-break {
    display: none;
}

.follow-up-line-2 {
    /* Match cs-feature-text styling from case study */
    font-family: 'Neue Haas Unica', sans-serif;
    font-size: 17px;
    line-height: 24px;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--secondary-text);
    margin: 0 0 40px 0;
    max-width: 600px;
    text-align: left;
}


/* Follow-up CTA - Beam Animation (matches nav-contact-btn) */
.follow-up-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 16px;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    font-family: 'Inp', 'Neue Haas Unica', sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: -0.416px;
    line-height: 32px;
    text-decoration: none;
    /* Border is provided by SVG stroke */
    user-select: none;
    overflow: hidden;
    cursor: pointer;
    margin-top: 10px;
}

.follow-up-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.06);
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: none;
}

.follow-up-cta:hover::after {
    opacity: 1;
}

.follow-up-cta .beam-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Standard size - matches nav-contact-btn */
.follow-up-cta--large {
    height: 32px;
    padding: 1px 14px 0;
    font-size: 14px;
    border-radius: 0;
    line-height: 32px;
    letter-spacing: -0.416px;
}

/* Responsive: Follow-up section */
@media (max-width: 768px) {
    .follow-up-section {
        padding: 140px 0 80px 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .mobile-break {
        display: block;
    }

    .follow-up-cta {
        padding: 12px 24px;
        font-size: 14px;
    }

    .follow-up-cta--large {
        height: 42px;
        line-height: 42px;
        padding: 0 24px;
        font-size: 16px;
        border-radius: 0 !important;
    }
}

/* ==================== WEBGL CARD GRID OVERLAY ==================== */
/* 5x5 grid of subtle '+' signs over the Quantum Lovers card */

.card-grid-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* SVG '+' pattern - 10px plus signs in a grid */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M50 45v10M45 50h10' stroke='%23888888' stroke-width='0.5' stroke-opacity='0.15' fill='none'/%3E%3C/svg%3E");
    background-size: 20% 20%;
    /* 5x5 grid */
    background-position: center center;
    /* Mask to hide the center plus sign */
    -webkit-mask-image: radial-gradient(circle at center, transparent 8%, black 12%);
    mask-image: radial-gradient(circle at center, transparent 8%, black 12%);
}

/* ==================== TD MOBILE CAROUSEL STYLES ==================== */
/* Interactive credit card carousel for TD Mobile Shopping & Comparing card */

/* Carousel card wrapper - overrides for carousel behavior */
.td-mobile-carousel-card .card {
    overflow: hidden;
}

/* Carousel Section inside Project Card */
.td-carousel-section {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
    background: #e1e9d8;
    /* Cream/beige background for carousel */
    /* Reveal animation - starts hidden like other card images */
    clip-path: inset(0 0 100% 0);
    transform: scale(1.35);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Reveal animation when in-view class is added to parent */
.cs-reveal.in-view .td-carousel-section {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
    transition-property: clip-path, transform;
    transition-duration: 700ms, 600ms;
    transition-timing-function: cubic-bezier(0.25, 0.9, 0.3, 1);
    transition-delay: 0ms, 100ms;
}

/* Carousel Container - base styles (scaling handled by responsive rules below) */
.td-carousel-container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: none;
    user-select: none;
    overflow: visible;
    transform-origin: center center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.td-carousel-container.dragging {
    cursor: none;
}

/* Zoom into carousel on hover - desktop only (target .card, not wrapper row) */
@media (hover: hover) and (min-width: 1441px) {
    .td-mobile-carousel-card .card:hover .td-carousel-container {
        transform: scale(1.08);
    }
}

@media (hover: hover) and (min-width: 1025px) and (max-width: 1440px) {
    .td-mobile-carousel-card .card:hover .td-carousel-container {
        /* Hover zoom: 10% increase from current fluid scale */
        transform: scale(calc(var(--carousel-scale, 0.7) * 1.1));
    }
}

/* Responsive carousel scaling - mobile-first fluid scaling */
.td-carousel-container {
    /* Mobile/Tablet: 0.25 at 375px, scales up to 0.6 at 1024px */
    --carousel-scale: clamp(0.25, calc(0.25 + 0.35 * ((100vw - 375px) / 649px)), 0.6);
    transform: scale(var(--carousel-scale));
}

/* Desktop scaling (1025-1440px) - reduced scale for two-column layout */
@media (min-width: 1025px) and (max-width: 1440px) {
    .td-carousel-container {
        --carousel-scale: clamp(0.4, calc(0.4 + 0.2 * ((100vw - 1025px) / 415px)), 0.6);
        transform: scale(var(--carousel-scale));
    }
}

/* Large desktop - continue scaling for 1441px+ */
@media (min-width: 1441px) {
    .td-carousel-container {
        /* Continue scaling: 0.55 at 1441px → 0.95 at 1920px */
        --carousel-scale: clamp(0.55, calc(0.55 + 0.4 * ((100vw - 1441px) / 479px)), 0.95);
        transform: scale(var(--carousel-scale));
    }
}

/* Hide CTA on small screens */
@media (max-width: 480px) {
    .td-carousel-cta {
        display: none;
    }
}

@media (max-width: 1440px) {
    .td-view-more-cta {
        display: none;
    }
}

/* Credit Card - individual carousel item */
.td-carousel-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 846px;
    height: 531px;
    margin-left: -423px;
    margin-top: -265.5px;
    border-radius: 28px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.04);
    transform-origin: center center;
    will-change: transform, opacity;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.td-carousel-card:hover {
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.12),
        0 6px 16px rgba(0, 0, 0, 0.06);
}

.td-carousel-card.active {
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.1),
        0 8px 20px rgba(0, 0, 0, 0.05);
}

.td-mobile-carousel-card:hover .td-carousel-card.active {
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.2),
        0 12px 30px rgba(0, 0, 0, 0.1);
}

/* Card background layer */
.td-card-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    z-index: 1;
    transform: scale(1.025);
}

/* Slightly smaller on mobile for tighter fit */
@media (max-width: 767px) {
    .td-card-background {
        transform: scale(1.015);
    }
}

.td-card-background img,
.td-card-background video {
    width: 110%;
    height: 110%;
    object-fit: cover;
    position: absolute;
    top: -5%;
    left: -5%;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Dark scrim for text visibility */
.td-card-scrim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
    pointer-events: none;
}

/* Card overlay - details layer */
.td-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    padding: 36px;
    box-sizing: border-box;
}

/* TD Bank Logo */
.td-card-td-logo {
    position: absolute;
    top: 36px;
    left: 36px;
    width: 77px;
    height: 68px;
}

.td-card-td-logo svg {
    width: 100%;
    height: 100%;
}

/* Microchip */
.td-card-chip {
    position: absolute;
    top: 132px;
    left: 36px;
    width: 77px;
    height: auto;
}

.td-card-chip img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Card number */
.td-card-number {
    position: absolute;
    top: 140px;
    left: 140px;
    font-family: 'TD Graphik', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 37px;
    font-weight: 400;
    color: white;
    letter-spacing: 2px;
}

/* Holder name */
.td-card-holder-name {
    position: absolute;
    bottom: 70px;
    left: 36px;
    font-family: 'TD Graphik', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 26px;
    font-weight: 500;
    color: white;
}

/* Valid thru label */
.td-card-valid-label {
    position: absolute;
    bottom: 36px;
    left: 36px;
    font-family: 'TD Graphik', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: white;
    line-height: 1.2;
    text-transform: uppercase;
}

/* Expiry date */
.td-card-expiry {
    position: absolute;
    bottom: 32px;
    left: 82px;
    font-family: 'TD Graphik', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 31px;
    font-weight: 400;
    color: white;
}

/* Card type label */
.td-card-type-label {
    position: absolute;
    bottom: 82px;
    right: 36px;
    font-family: 'TD Graphik', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 26px;
    font-weight: 400;
    color: white;
}

/* VISA logo */
.td-card-visa-logo {
    position: absolute;
    bottom: 36px;
    right: 36px;
    width: 145px;
    height: 46px;
}

.td-card-visa-logo svg {
    width: 100%;
    height: 100%;
}

/* Physics container */
.td-card-physics-container {
    width: 100%;
    height: 100%;
}

.td-card-physics-container canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Page indicators */
.td-card-indicator {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    z-index: 200;
}

.td-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #999999;
    transition: width 0.3s ease, border-radius 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.td-indicator-dot:hover {
    background: #aaaaaa;
}

.td-indicator-dot.active {
    width: 24px;
    height: 8px;
    border-radius: 40px;
    background: #666666;
}

/* CTA Button */
.td-carousel-cta {
    position: absolute;
    left: 50%;
    /* Position below center card - accounts for card height and scaling */
    top: calc(50% + 280px);
    transform: translateX(-50%);
    z-index: 100;
    opacity: 0;
    transition: opacity 0.25s ease;
}

/* Show CTA on card hover */
.td-mobile-carousel-card:hover .td-carousel-cta {
    opacity: 1;
}

/* Hide CTA pills on mobile and tablet */
@media (max-width: 1024px) {
    .td-carousel-cta {
        display: none;
    }

    /* Search container: stretch children to full width on tablet/mobile */
    .search-container.expanded {
        align-items: stretch;
    }

    /* Parent containers: full width on tablet/mobile */
    .search-container.expanded .search-field-wrapper {
        width: 100%;
        flex: 1 1 100%;
    }

    .search-container.expanded .search-default {
        width: 100%;
        flex: 1 1 100%;
    }

    /* Search elements: full width on tablet/mobile (single-column layout) */
    .search-container.expanded .search-icon-btn {
        width: 100%;
        max-width: 100%;
    }

    .search-container.expanded .search-icon-btn.has-badge {
        width: 100%;
        max-width: 100%;
    }

    .search-container.expanded .filter-pills-row {
        max-width: 100%;
    }
}

/* Large desktop (>1440px) - scale 1.0, card half-height ~265px + padding */
@media (min-width: 1441px) {
    .td-carousel-cta {
        top: calc(50% + 270px);
    }
}

/* Desktop (1025-1440px) - scale 0.7, card half-height ~186px + padding */
@media (min-width: 1025px) and (max-width: 1440px) {
    .td-carousel-cta {
        top: calc(50% + 195px);
    }
}

.td-carousel-cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 12px;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.2s ease;
    white-space: nowrap;
}

.td-carousel-cta-button:hover {
    background: #f0f0f0;
}

/* View More Products CTA - Hidden */
.td-view-more-cta {
    display: none;
    left: calc(50% + 300px);
    top: calc(50% - 50px);
    transform: translateY(-50%);
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.td-view-more-cta.visible {
    opacity: 1;
    pointer-events: auto;
}

.td-view-more-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
    transform: scale(0.85);
}

.td-view-more-button:hover {
    background: #f0f0f0;
}

/* Load Animations */
@keyframes tdCarouselFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.td-carousel-container {
    opacity: 0;
    animation: tdCarouselFadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s forwards;
}

/* CTA hidden by default - revealed on card hover (see line ~2989) */
.td-carousel-cta {
    opacity: 0;
    /* Animation removed - CTA fades in on hover instead */
}

.td-card-indicator {
    opacity: 0;
    animation: tdCarouselFadeIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.7s forwards;
}

/* ==================== QA CARD HOVER TEXT ==================== */
/* Centered text appears on desktop hover only */
.card-hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Inp', 'Neue Haas Unica', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.6em;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.25s ease;
    text-align: center;
    white-space: nowrap;
}

/* Show on desktop hover only */
@media (min-width: 1025px) {
    .card:hover .card-hover-text {
        opacity: 1;
    }

    /* Hide hover text when hovering arrow CTA */
    .card-link:has(.project-cta:hover) .card .card-hover-text {
        opacity: 0 !important;
    }
}

/* Hide on tablet and mobile */
@media (max-width: 1024px) {
    .card-hover-text {
        display: none;
    }
}

/* ==================== MOBILE HOVER DISABLE ====================
   Disable all project card hover effects on mobile viewports
   ================================================================= */
@media (max-width: 767px) {

    /* Disable card elevation and shadow on hover */
    .card-link:hover .card,
    [data-theme="dark"] .card-link:hover .card {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Disable image zoom on hover */
    .scroll-zoom-card .card-link:hover .card-bg-image,
    .card-link:hover .card-bg-image {
        transform: scale(1) !important;
    }

    /* Disable TD Easy Apply burst/float class animations on mobile */
    .scroll-zoom-card.td-burst-active .td-burst-svg #shield,
    .scroll-zoom-card.td-burst-active .td-burst-svg #bag,
    .scroll-zoom-card.td-burst-active .td-burst-svg #cheque,
    .scroll-zoom-card.td-burst-active .td-burst-svg #airplane,
    .scroll-zoom-card.td-burst-active .td-burst-svg #bill-machine,
    .scroll-zoom-card.td-burst-active .td-burst-svg #cashback,
    .scroll-zoom-card.td-burst-active .td-burst-svg #egg,
    .scroll-zoom-card.td-burst-active .td-burst-svg #piggy,
    .scroll-zoom-card.td-burst-active .td-burst-svg #card,
    .scroll-zoom-card.td-burst-active .td-burst-svg #left-lowest-star,
    .scroll-zoom-card.td-burst-active .td-burst-svg #left-middle-star,
    .scroll-zoom-card.td-burst-active .td-burst-svg #left-top-star,
    .scroll-zoom-card.td-burst-active .td-burst-svg #middle-top-star,
    .scroll-zoom-card.td-burst-active .td-burst-svg #right-top-star,
    .scroll-zoom-card.td-burst-active .td-burst-svg #right-middle-star,
    .scroll-zoom-card.td-burst-active .td-burst-svg #right-lowest-star,
    .scroll-zoom-card.td-burst-active .td-burst-svg #background-elements>g {
        transform: none !important;
        opacity: 1 !important;
    }

    /* Disable TD overlay canvas hover effects */
    .scroll-zoom-card .card-link:hover .td-overlay-canvas {
        transform: none !important;
    }
}

/* ==================== PERFORMANCE OPTIMIZATIONS ====================
   Disabled expensive effects on low-performance devices
   Triggered by .perf-low class added by performance-detect.js
   ================================================================= */

/* Disable backdrop-filter on password overlay for low-performance devices */
.perf-low .card-password-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Use solid background fallback instead */
    background: rgba(0, 0, 0, 0.85) !important;
}

/* Disable will-change on WebGL canvases for low-performance devices */
.perf-low .webgl-canvas {
    will-change: auto !important;
}

/* ==================== TWO-COLUMN DESKTOP LAYOUT ====================
   Desktop ONLY (>1024px): Description left (2fr), Card right (3fr)
   Tablet/Mobile: Uses original layout, no changes applied
   ==================================================================== */

/* Project description - hidden by default (only shown on desktop) */
.project-description {
    display: none;
}

/* DESKTOP ONLY: Two-column layout */
@media (min-width: 1025px) {

    /* Two-Column Layout Container */
    .content-cards--two-col {
        display: flex;
        flex-direction: column;
        gap: 100px;
        padding-top: 32px;
        padding-bottom: 40px;
    }

    /* Each project row: description left (2 cols), card right (3 cols) */
    .content-cards--two-col .card-wrapper {
        display: grid;
        grid-template-columns: 2fr 3fr;
        grid-auto-rows: min-content;
        gap: 120px;
        align-items: start;
        width: 100%;
        aspect-ratio: unset;
        min-height: unset;
        margin: 0;
        padding: 0;
    }

    /* Card link - positioning context for arrow CTA */
    .content-cards--two-col .card-link {
        position: relative;
        overflow: visible !important;
    }

    /* Project description - left side, top-left aligned */
    .project-description {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-right: 40px;
        align-items: flex-start;
        justify-content: flex-start;
        /* Initial state: hidden, ready to animate */
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Animate in when card is in view */
    .card-wrapper.in-view .project-description {
        opacity: 1;
        transform: translateY(0);
    }

    /* Title and year group */
    .project-title {
        font-family: 'Neue Haas Unica', sans-serif;
        font-size: clamp(18px, calc(18px + 2 * ((100vw - 1025px) / 415)), 20px);
        font-weight: 300;
        line-height: 1.4;
        letter-spacing: -0.416px;
        color: #1a1a1a;
        margin: 0 0 4px 0;
    }

    .project-year {
        font-family: 'Inp', 'Neue Haas Unica', monospace;
        font-size: 12px;
        font-weight: 300;
        color: #1a1a1a;
        opacity: 0.7;
        letter-spacing: -0.416px;
        padding-top: 8px;
        margin: 2px 0 12px 0;
    }

    .project-summary {
        font-family: 'Neue Haas Unica', sans-serif;
        font-size: clamp(14px, calc(14px + 2 * ((100vw - 1025px) / 415)), 16px);
        font-weight: 300;
        line-height: 1.5;
        letter-spacing: -0.416px;
        color: #1a1a1a;
        margin: 0 0 16px 0;
        max-width: 480px;
    }

    .project-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 8px;
        max-width: 420px;
        /* Limit to ~4 pills per row */
    }

    .project-tag {
        font-family: 'Inp', 'Neue Haas Unica', monospace;
        font-size: clamp(9px, calc(9px + 2 * ((100vw - 1025px) / 415)), 11px);
        font-weight: 400;
        color: #1a1a1a;
        opacity: 0.7;
        padding: 4px 10px;
        border: 1px solid rgba(26, 26, 26, 0.15);
        border-radius: 4px;
        white-space: nowrap;
        text-transform: uppercase;
        transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
        cursor: default;
    }

    .project-tag:hover {
        background: rgba(126, 187, 28, 0.15);
        border-color: #7EBB1C;
        opacity: 1;
    }

    /* Status pill variant - black background, white text */
    .project-tag--status {
        background: #1a1a1a;
        color: #f8f8f8;
        border: 1px solid #1a1a1a;
        opacity: 1;
    }

    /* Project Header Row - contains title+date and status */
    .project-header-row {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 16px;
        margin-bottom: 12px;
        width: 100%;
        max-width: 480px;
    }

    .project-header-text {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* Project Status - matches project-tag styling */
    .project-status {
        display: flex;
        align-items: flex-start;
        flex-shrink: 0;
        padding: 4px 10px;
        margin-top: 4px;
        border: 1px solid rgba(26, 26, 26, 0.15);
        border-radius: 4px;
        transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
        cursor: default;
    }

    .project-status:hover {
        background: rgba(126, 187, 28, 0.15);
        border-color: #7EBB1C;
    }

    .project-status:hover .project-status-text {
        opacity: 1;
    }

    .project-status-text {
        font-family: 'Input', 'Neue Haas Unica', monospace;
        font-size: clamp(9px, calc(9px + 2 * ((100vw - 1025px) / 415)), 11px);
        margin-top: 2px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        line-height: 1.3;
        color: #1a1a1a;
        opacity: 0.7;
        text-align: center;
        transition: opacity 0.2s ease;
    }

    /* Dark mode: Project Status grey border default, green on hover */
    [data-theme="dark"] .project-status {
        border-color: rgba(240, 240, 240, 0.3);
    }

    [data-theme="dark"] .project-status-text {
        color: #f0f0f0;
    }

    [data-theme="dark"] .project-status:hover {
        background: rgba(126, 187, 28, 0.15);
        border-color: #7EBB1C;
    }

    /* Project CTA Button - absolutely positioned to left of card */
    .project-cta {
        position: absolute;
        top: 0;
        left: -44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 10;
        /* Initial state: hidden, fades in with card */
        opacity: 0;
        transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Arrow reveals with card */
    .card-wrapper.in-view .project-cta {
        opacity: 1;
    }

    /* Project CTA Mask - 32x32 square like search icon */
    .project-cta-mask {
        width: 32px;
        height: 32px;
        overflow: hidden;
        position: relative;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(26, 26, 26, 0.15);
        border-radius: 8px;
        transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    .project-cta:hover .project-cta-mask {
        background: rgba(126, 187, 28, 0.15);
        border-color: #7EBB1C;
    }

    /* Status variant - shows text instead of arrow, no hover */
    .project-cta--status {
        cursor: default;
    }

    .project-cta--status .project-cta-mask {
        width: auto;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .project-cta--status:hover .project-cta-mask {
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(26, 26, 26, 0.15);
    }

    .project-cta-text {
        font-family: 'Neue Haas Unica', sans-serif;
        font-size: 10px;
        font-weight: 400;
        line-height: 1.3;
        text-align: center;
        color: #1a1a1a;
        opacity: 0.5;
        text-transform: uppercase;
    }

    /* Arrows container - holds both arrows side by side */
    /* Offset = arrow width (14px) + gap (8px) = 22px */
    .project-cta-arrows {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        height: 100%;
        padding-left: 9px;
        transform: translateX(-22px);
        /* Start offset left - second arrow visible */
    }

    /* On hover, play slide animation once */
    .project-cta:hover .project-cta-arrows {
        animation: arrowSlide 0.41s ease-out forwards;
    }

    @keyframes arrowSlide {
        0% {
            transform: translateX(-22px);
        }

        65% {
            transform: translateX(2px);
        }

        100% {
            transform: translateX(0);
        }
    }

    .project-cta-arrow {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        color: #1a1a1a;
        transition: color 0.2s ease;
    }

    .project-cta:hover .project-cta-arrow {
        color: #1a1a1a;
    }

    /* Dark mode: white arrow */
    [data-theme="dark"] .project-cta-arrow {
        color: #f0f0f0;
    }

    [data-theme="dark"] .project-cta:hover .project-cta-arrow {
        color: #ffffff;
    }
}

/* Large Desktop - 1440px and up: Increase CTA right margin */
@media (min-width: 1440px) {
    .project-cta {
        margin-right: 30px;
    }
}

/* Desktop - continuing from min-width: 1025px */
@media (min-width: 1025px) {

    /* Project Tags Overflow: Hide tags beyond 5th when collapsed */
    .project-tags--expandable .project-tag--overflow {
        display: none;
    }

    .project-tags--expandable.project-tags--expanded .project-tag--overflow {
        display: inline-block;
    }

    /* Toggle button styling - matches .project-tag but interactive */
    .project-tag--toggle {
        font-family: 'Inp', 'Neue Haas Unica', monospace;
        font-size: clamp(9px, calc(9px + 2 * ((100vw - 1025px) / 415)), 11px);
        font-weight: 400;
        color: #1a1a1a;
        opacity: 0.7;
        padding: 4px 10px;
        border: 1px solid rgba(26, 26, 26, 0.15);
        border-radius: 4px;
        white-space: nowrap;
        text-transform: uppercase;
        background: transparent;
        cursor: pointer;
        transition: opacity 0.2s ease, border-color 0.2s ease;
    }

    .project-tag--toggle:hover {
        opacity: 0.8;
        border-color: rgba(26, 26, 26, 0.35);
    }

    /* Hide "view more" when expanded, show "view less" */
    .project-tags--expanded .project-tag--toggle-more {
        display: none;
    }

    .project-tag--toggle-less {
        display: none;
    }

    .project-tags--expanded .project-tag--toggle-less {
        display: inline-block;
    }

    /* Dark mode support - grey borders default, white bg + green border on hover */
    [data-theme="dark"] .project-tag--toggle {
        color: #f0f0f0;
        border-color: rgba(240, 240, 240, 0.3);
    }

    [data-theme="dark"] .project-tag--toggle:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: #7EBB1C;
    }

    /* Card container - right side */
    .content-cards--two-col .card-wrapper .card-link,
    .content-cards--two-col .card-wrapper .card-link--protected,
    .content-cards--two-col .card-wrapper>article.card {
        display: block;
        width: 100%;
        max-width: 100%;
        height: fit-content;
        border-radius: 16px;
        overflow: hidden;
    }

    /* All cards - fit image height naturally */
    .content-cards--two-col .card-wrapper .card {
        width: 100%;
        height: auto;
        min-height: unset;
        aspect-ratio: 16 / 9;
    }

    /* Hide the original card-details in 2-col layout (info is in project-description) */
    .content-cards--two-col .card-details {
        display: none;
    }

    /* Dark mode: text colors for project descriptions */
    [data-theme="dark"] .project-title,
    [data-theme="dark"] .project-year,
    [data-theme="dark"] .project-summary,
    [data-theme="dark"] .project-tag {
        color: #f0f0f0;
    }

    [data-theme="dark"] .project-tag {
        border-color: rgba(240, 240, 240, 0.15);
    }

    [data-theme="dark"] .project-tag:hover {
        background: rgba(126, 187, 28, 0.15);
        border-color: #7EBB1C;
        opacity: 1;
    }

    /* TD Mobile Carousel - default scale for two-column layout */
    .content-cards--two-col .td-carousel-container {
        --carousel-scale: clamp(0.35, calc(0.35 + 0.2 * ((100vw - 1025px) / 415px)), 0.55);
        transform: scale(var(--carousel-scale));
    }

    /* Hover zoom - target the CARD, not the wrapper row */
    .content-cards--two-col .td-mobile-carousel-card .card:hover .td-carousel-container {
        transform: scale(clamp(0.40, calc(0.40 + 0.22 * ((100vw - 1025px) / 415px)), 0.62));
    }

    /* TD Carousel CTA - 20px above the carousel dots (dots are at bottom:16px with 8px height) */
    .content-cards--two-col .td-carousel-cta {
        top: auto;
        bottom: 44px;
        transform: translateX(-50%) scale(0.85);
    }

    .content-cards--two-col .td-mobile-carousel-card .card:hover .td-carousel-cta {
        opacity: 1;
    }
}

/* ==================== HIDDEN PROJECT CARDS ====================
   Cards temporarily hidden from the portfolio but kept in the codebase
   for future use. Add cards here to hide them without removing code.
   ================================================================= */

/* Hide Personal Archive project card for all viewports */
.card-wrapper:has(#webglCard) {
    display: none !important;
}