/**
 * v3-footer-extensions-clean.css
 * Clean implementation of footer extension styles
 * Precisely aligned with V3FooterExtensionsClean.js HTML structure
 * Uses V3 design system variables and conventions
 *
 * ACCENT COLOR MAPPING (for current and future reference):
 * - Case 1: var(--blue) #0000FF
 * - Case 2: var(--pink) #FF0044
 * - Case 3: var(--purple) #AA00FF
 * - Case 4: var(--lightest) 
 * - Contact (items 1-4): var(--warm) #797E80
 */

/* CLEAN-FIX-PHASE7-BOTTOMS-UP-VARS-START */
/* Bottoms-up stack height variables for viewport-relative layout
   These define the fixed heights of components in the vertical stack
   Preview section height = 100dvh - var(--total-stack)

   Component heights by breakpoint (including 6px buffer):
   - XS: TOC 60px, Footer 60px → total 210px (was 204px)
   - SM: TOC 90px, Footer 90px → total 270px (was 264px)
   - MD: TOC 100px, Footer 100px → total 290px (was 284px)
   - LG/XL: TOC 88px, Footer 88px → total 266px (was 260px)

   To revert: Delete between START/END markers */
:root {
    --stack-header: 72px;     /* Site header (constant across all breakpoints) */
    --stack-hint: 12px;       /* Expand hint padding (constant) */
    --stack-buffer: 6px;      /* CLEAN-FIX-VERTICAL-STACK: Minimum buffer above TOC/preview stack */
    --stack-toc: 88px;        /* TOC height - LG/XL default, updates per breakpoint */
    --stack-footer: 88px;     /* Footer expanded - LG/XL default, updates per breakpoint */
    --total-stack: calc(var(--stack-header) + var(--stack-hint) + var(--stack-buffer) + var(--stack-toc) + var(--stack-footer));
}
/* CLEAN-FIX-PHASE7-BOTTOMS-UP-VARS-END */

/* V3-FOOTER-PORT-CSS-START */
/* Clean port of reference footer extension styles with V3 conventions */
/* To revert: Search V3-FOOTER-PORT-CSS and delete between START/END */

/* ===========================================
   BACKDROP (matches JS line 136-138)
   =========================================== */

.v3-extension-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 11, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-medium) cubic-bezier(0.16, 1, 0.3, 1),
                visibility var(--transition-medium) cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.v3-extension-backdrop.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ===========================================
   FOOTER EXTENSION MENU CONTAINERS (JS lines 141, 147)
   =========================================== */

/* Base extension menu styles */
.footer-extension-menu {
    position: fixed;
    bottom: var(--footer-height-expanded, 88px);
    left: 0;
    width: 100%;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity var(--transition-medium) cubic-bezier(0.16, 1, 0.3, 1),
                visibility var(--transition-medium) cubic-bezier(0.16, 1, 0.3, 1),
                transform var(--transition-medium) cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-extension-menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Hover bridge for smooth cursor movement */
.footer-extension-menu::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 40px;
    top: 100%;
    left: 0;
    pointer-events: auto;
}

/* Cases-specific extension */
.footer-extension-menu.cases-extension {
    /* Cases-specific overrides if needed */
}

/* Contact-specific extension */
.footer-extension-menu.contact-extension {
    /* Contact-specific overrides if needed */
}

/* ===========================================
   STAGE 1: TABLE OF CONTENTS (JS lines 237-241, 288-292)
   =========================================== */

.extension-toc {
    background-color: var(--darkest);
    border-top: 1.2px solid var(--dark);
    border-bottom: 1.2px solid var(--dark);
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    /* CLEAN-FIX-TOC-CLIPPATH-START */
    /* Fix: Invert clip-path to opposite of footer shape
       To revert: Search CLEAN-FIX-TOC-CLIPPATH and restore original */
    clip-path: polygon(0% 0, 100% 0, 96% 100%, 4% 100%); /* Inverted angles */
    /* CLEAN-FIX-TOC-CLIPPATH-END */
}

/* CLEAN-FIX-TOC-LAYOUT-START */
/* Fix: Change from grid to flexbox for proper horizontal spreading
   To revert: Search CLEAN-FIX-TOC-LAYOUT and delete between START/END */
/* TOC Container - 92% width with flexbox */
.toc-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 92%;
    margin: 0 auto;
    gap: var(--spacing-12);
    padding: 0;
    /* Removed: grid-template-columns, max-width: 800px */
}
/* CLEAN-FIX-TOC-LAYOUT-END */

/* TOC Items - Moved to Phase 1 section below for consolidation */

/* CLEAN-FIX-STYLE-1-START */
/* Phase 1: TOC Active States - CONSOLIDATED (removed duplicates) */
/* To revert: Search CLEAN-FIX-STYLE-1 and delete between START/END */

/* CLEAN-FIX-TOC-BORDERS-START */
/* Fix: Add ONLY left/right 0.6px cool borders
   To revert: Search CLEAN-FIX-TOC-BORDERS and delete between START/END */
/* Default state - using V3 variables */
.toc-item,
.contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-12);
    cursor: pointer;
    position: relative;
    border: none; /* Clear all borders first */
    border-left: .3px solid var(--dark);
    border-right: .3px solid var(--dark);
    background: var(--darkest);
    /*color: var(--light);*/
    transition: all var(--transition-fast) cubic-bezier(0.16, 1, 0.3, 1);
    flex: 0 0 auto;
    width: calc((100% - (var(--spacing-12) * 3)) / 4); /* Equal width distribution */
}
/* CLEAN-FIX-TOC-BORDERS-END */

/* CLEAN-FIX-TOC-HOVER-START */
/* Fix: Subtle hover with no opacity changes, no accent colors
   To revert: Search CLEAN-FIX-TOC-HOVER and delete between START/END */
/* Hover state - subtle background and scaling only */
.toc-item:hover,
.contact-item:hover {
    background: rgba(255, 255, 255, 0.02); /* Very subtle lightening */
    transform: scale(1.02);
    /* No opacity changes, no border changes, no accent colors */
}
/* CLEAN-FIX-TOC-HOVER-END */

/* START CLEAN-FIX-8A-B8-C6-TOC-DRAG-EXPLORE */
/* Drag-highlight: visual feedback during touch drag-over-TOC
   Mirrors :hover styles so finger-drag looks the same as mouse-hover
   To revert: Search CLEAN-FIX-8A-B8-C6-TOC-DRAG-EXPLORE, delete START/END */
.toc-item.drag-highlight,
.contact-item.drag-highlight {
    background: rgba(255, 255, 255, 0.02);
    transform: scale(1.02);
}
/* END CLEAN-FIX-8A-B8-C6-TOC-DRAG-EXPLORE */

/* Active state - inset borders and enhanced presence */
.toc-item.active,
.contact-item.active {
    background: rgba(255, 255, 255, 0.06);
    /* color: var(--white); */
    transform: scale(1.03);
}

/* CLEAN-FIX-ACTIVE-BORDERS-START */
/* Fix: ONLY left/right borders in accent colors for active state
   To revert: Search CLEAN-FIX-ACTIVE-BORDERS and delete between START/END */
/* Case-specific accent borders - left/right only */
.toc-item[data-case="01"].active {
    border-left: 2px solid var(--blue);
    border-right: 2px solid var(--blue);
    border-top: none;
    border-bottom: none;
    box-shadow: none;
}

.toc-item[data-case="02"].active {
    border-left: 2px solid var(--pink);
    border-right: 2px solid var(--pink);
    border-top: none;
    border-bottom: none;
    box-shadow: none;
}

.toc-item[data-case="03"].active {
    border-left: 2px solid var(--purple);
    border-right: 2px solid var(--purple);
    border-top: none;
    border-bottom: none;
    box-shadow: none;
}

.toc-item[data-case="04"].active {
    border-left: 2px solid var(--lightest);
    border-right: 2px solid var(--lightest);
    border-top: none;
    border-bottom: none;
    box-shadow: none;
}

.contact-item.active {
    border-left: 2px solid var(--warm);
    border-right: 2px solid var(--warm);
    border-top: none;
    border-bottom: none;
    box-shadow: none;
}
/* CLEAN-FIX-ACTIVE-BORDERS-END */

/* Scale text content specifically for emphasis */
.toc-item.active .toc-number,
.toc-item.active .toc-title,
.contact-item.active .contact-icon,
.contact-item.active .contact-label {
    transform: scale(1.1);
    transition: transform var(--transition-fast) ease;
}

/* TOC Typography elements */
.toc-number,
.contact-icon {
    /* CLEAN-FIX-PHASE8-TYPO-TOC-NUM-START - Original: var(--font-size-small) */
    font-size: var(--font-size-specialized);  /* 10.4px - per Phase 2 typography cleanup */
    /* CLEAN-FIX-PHASE8-TYPO-TOC-NUM-END */
    font-weight: 400;
    color: var(--cool);
    margin-bottom: var(--spacing-6);
    opacity: 0.7;
    transition: all var(--transition-fast) ease;
}

.toc-title,
.contact-label {
    /* CLEAN-FIX-PHASE8-TYPO-TOC-TITLE-START - Original: var(--font-size-large) */
    font-size: var(--font-size-small);  /* 12.8px - per Phase 2 typography cleanup */
    /* CLEAN-FIX-PHASE8-TYPO-TOC-TITLE-END */
    font-weight: 600;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all var(--transition-fast) ease;
}

/* CLEAN-FIX-PHASE8-CONTACT-ABBREV-BASE-START */
/* Base (MD+): Show full titles, hide abbreviated action labels */
/* XS/SM behavior: Inverted via media query below */
/* To revert: Delete between START/END markers */
.contact-label-full {
    display: block;
}
.contact-label-abbrev {
    display: none;
}
/* CLEAN-FIX-PHASE8-CONTACT-ABBREV-BASE-END */

/* CLEAN-FIX-HOVER-TEXT-START */
/* Fix: No opacity changes on hover, just subtle color brightening
   To revert: Search CLEAN-FIX-HOVER-TEXT and delete between START/END */
.toc-item:hover .toc-number,
.contact-item:hover .contact-icon {
    /* No opacity change - keep original opacity */
    color: var(--lightest);
    font-weight: 600;
}

.toc-item:hover .toc-title,
.contact-item:hover .contact-label {
    color: var(--white);
    font-weight: 800;
}
/* CLEAN-FIX-HOVER-TEXT-END */
/* CLEAN-FIX-STYLE-1-END */

/* ===========================================
   STAGE 2 LAYER 1: QUICK PREVIEWS (JS lines 244-246)
   =========================================== */

/* CLEAN-FIX-VERTICAL-STACK-CONTACT-START */
/* Fix: Proper vertical stacking for contact preview like cases
   To revert: Delete between START and END, restore original positioning */
.extension-second-layer {
    position: absolute;
    bottom: 0; /* Position at container bottom */
    left: 0;
    width: 100%;
    background: var(--darkest);
    border-top: 1.2px solid var(--dark);
    padding: var(--spacing-24);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-medium) cubic-bezier(0.16, 1, 0.3, 1);
}

.extension-second-layer.active {
    opacity: 1;
    visibility: visible;
}
/* CLEAN-FIX-VERTICAL-STACK-CONTACT-END */

/* Quick preview grid */
.case-quick-previews {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-24);
}

/* Individual quick preview (JS lines 185-197) */
.quick-preview {
    background: var(--dark);
    border: 1px solid var(--dark);
    padding: var(--spacing-12);
    transition: all var(--transition-fast) ease;
}

.quick-preview:hover {
    border-color: var(--warm);
    transform: translateY(-2px);
}

.quick-preview-header {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-12);
    margin-bottom: var(--spacing-12);
}

.quick-number {
    font-size: var(--font-size-large);
    font-weight: 700;
    color: var(--warm);
}

.quick-title {
    font-size: var(--font-size-small);
    color: var(--light);
    text-transform: uppercase;
}

.quick-media {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--darkest);
}

.quick-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===========================================
   STAGE 2 LAYER 2: FULL PREVIEWS (JS lines 249-251)
   =========================================== */

/* CLEAN-FIX-VERTICAL-STACK-START */
/* Fix: Proper vertical stacking TOC → Preview → Footer
   To revert: Delete between START and END, restore original positioning */
.case-preview-section {
    position: absolute;
    bottom: 0; /* Position at container bottom */
    left: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    background: var(--darkest);
    opacity: 0;
    visibility: hidden;
    transition: height var(--transition-medium) cubic-bezier(0.16, 1, 0.3, 1),
                opacity var(--transition-fast) ease,
                visibility var(--transition-fast) ease;
}

/* START CLEAN-FIX-PHASE8A-VIEWPORT-PREVIEW-HEIGHT */
/* Desktop/LG: Viewport-relative preview height using --total-stack (was fixed 580px/420px)
   --total-stack at XL/LG = 266px (72 + 12 + 6 + 88 + 88)
   Preview fills: 100dvh - 266px = remaining viewport height
   Cases and contact both use same viewport-relative height — no separate fixed heights needed
   To revert: Restore .case-preview-section.active { height: 580px } and .contact-preview-section.active { height: 420px } */
.case-preview-section.active,
.contact-preview-section.active {
    height: calc(100vh - var(--total-stack));   /* Fallback for older browsers */
    height: calc(100dvh - var(--total-stack));  /* Modern: dvh for mobile Safari */
    opacity: 1;
    visibility: visible;
}
/* END CLEAN-FIX-PHASE8A-VIEWPORT-PREVIEW-HEIGHT */
/* CLEAN-FIX-VERTICAL-STACK-END */

/* CLEAN-FIX-CONTACT-REBUILD-START */
/* Contact preview section matching cases architecture
   To revert: Delete between CLEAN-FIX-CONTACT-REBUILD-START and END */
.contact-preview-section {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    background: var(--darkest);
    opacity: 0;
    visibility: hidden;
    transition: height var(--transition-medium) cubic-bezier(0.16, 1, 0.3, 1),
                opacity var(--transition-fast) ease,
                visibility var(--transition-fast) ease;
}
/* CLEAN-FIX-CONTACT-REBUILD-END */

/* CLEAN-FIX-LAYOUT-CSS-1-START */
/* 3-layer structure with exact specifications */
/* To revert: Delete this section and restore original .case-preview styles */

/* Individual case/contact preview - strict 3-layer structure */
.case-preview,
.contact-preview {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0; /* No padding - exact dimensions */
}

.case-preview.active,
.contact-preview.active {
    display: flex;
    flex-direction: column;
    /* START CLEAN-FIX-PHASE8A-PADDING-REDISTRIBUTION
       Padding moved from parent to children (.preview-header-row top, .preview-cta-row bottom)
       at SM/XS breakpoints only. Desktop/LG header-row has fixed 72px height — vh padding would compress it.
       Parent padding was stealing height from flex children's layout (29px at 800px viewport).
       To revert: Restore padding-top: 1.8vh; padding-bottom: 2.4vh;
                  Restore @media (min-height: 750px) { padding-bottom: 1.8vh; }
                  Remove vh padding from SM/XS .preview-header-row and .preview-cta-row
       Supersedes: CLEAN-FIX-ROUND9-VH-PADDING, CLEAN-FIX-ROUND9-VH-PADDING-TALL */
    padding-top: 0;
    padding-bottom: 0;
    /* END CLEAN-FIX-PHASE8A-PADDING-REDISTRIBUTION */
}

/* ===========================================
   LAYER 1: HEADER ROW (72px height)
   =========================================== */

.preview-header-row {
    height: 72px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 36px;
    border-bottom: .6px solid var(--dark);
    background: var(--darkest);
}

.header-right {
    text-align: right;
}

/* .header-left and typography moved to Phase 2 section */

/* CLEAN-FIX-STYLE-2-CSS-START */
/* Phase 2: Typography Enhancement - 26px/56px/26px hierarchy with 3px divider */
/* To revert: Search CLEAN-FIX-STYLE-2-CSS and delete between START/END */

/* Override existing typography sizes */
.preview-number {
    font-size: 26px !important; /* Justified: Specific size requirement not in design system */
    font-family: var(--font-secondary);
    color: var(--lightest) !important;
    font-weight: var(--font-weight-regular);
}

.preview-title {
    font-size: 56px !important; /* Justified: Specific size requirement not in design system */
    font-family: var(--font-primary);
    color: var(--white) !important;
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.preview-subtitle {
    font-size: 26px !important; /* Justified: Specific size requirement not in design system */
    font-family: var(--font-secondary);
    color: var(--light) !important;
    font-weight: var(--font-weight-regular);
}

/* 3px vertical divider in accent colors */
.header-divider {
    width: 6px;
    height: 40px;
    margin: 0 20px;
    display: inline-block;
    vertical-align: middle;
    /* Background color set inline via style attribute */
}

/* Contact icon to match typography scale */
.contact-icon-large {
    font-size: 26px !important; /* Match number size */
    font-family: var(--font-secondary);
    color: var(--lightest) !important;
    font-weight: 700;
    display: inline-block;
    min-width: 40px;
}

/* CLEAN-FIX-BASELINE-START */
/* Fix baseline alignment for header text elements
   To revert: Delete between CLEAN-FIX-BASELINE-START and END
   Previous state: align-items: center !important */
.header-left {
    display: flex;
    align-items: baseline; /* Text elements align to baseline */
    gap: 0; /* Remove gap, spacing handled by divider margins */
}

/* Center divider vertically while text aligns to baseline */
.header-divider {
    align-self: center; /* Divider centers itself */
}
/* CLEAN-FIX-BASELINE-END */
/* CLEAN-FIX-STYLE-2-CSS-END */

/* CLEAN-FIX-STYLE-3-START */
/* Phase 3: Animated Orb Background - Slow screensaver-like effect */
/* To revert: Search CLEAN-FIX-STYLE-3 and delete between START/END */

@keyframes orb-drift {
    /* 40-second slow drift for screensaver effect */
    0%, 100% {
        transform: translate(5%, 5%);
    }
    25% {
        transform: translate(85%, 5%);
    }
    50% {
        transform: translate(85%, 85%);
    }
    75% {
        transform: translate(5%, 85%);
    }
}


/* Ensure content stays above orb */
.preview-header-row,
.preview-media-container,
.preview-cta-row {
    position: relative;
    z-index: 1;
}
/* CLEAN-FIX-STYLE-3-END */


/* ===========================================
   LAYER 2: MEDIA CONTAINER
   =========================================== */

/* CLEAN-FIX-V2-ORB-START */
/* Orb animations scoped to media container only
   To revert: Delete between CLEAN-FIX-V2-ORB-START and END */
.preview-media-container {
    position: relative; /* For orb positioning */
}

/* Orb pseudo-element on media container */
.preview-media-container::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: orb-drift 40s infinite linear;
    filter: blur(60px);
    will-change: transform;
}

/* Case-specific orb colors */
.case-preview[data-case="01"] .preview-media-container::before {
    background: radial-gradient(circle,
        rgba(0, 102, 255, 0.15) 0%,    /* --blue */
        rgba(0, 102, 255, 0.1) 30%,
        rgba(0, 102, 255, 0.05) 60%,
        rgba(0, 102, 255, 0) 100%);
}

.case-preview[data-case="02"] .preview-media-container::before {
    background: radial-gradient(circle,
        rgba(255, 0, 170, 0.15) 0%,    /* --pink */
        rgba(255, 0, 170, 0.1) 30%,
        rgba(255, 0, 170, 0.05) 60%,
        rgba(255, 0, 170, 0) 100%);
}

.case-preview[data-case="03"] .preview-media-container::before {
    background: radial-gradient(circle,
        rgba(136, 0, 255, 0.15) 0%,    /* --purple */
        rgba(136, 0, 255, 0.1) 30%,
        rgba(136, 0, 255, 0.05) 60%,
        rgba(136, 0, 255, 0) 100%);
}

.case-preview[data-case="04"] .preview-media-container::before {
    background: radial-gradient(circle,
        rgba(242, 242, 242, 0.08) 0%,  /* --lightest (reduced opacity) */
        rgba(242, 242, 242, 0.05) 30%,
        rgba(242, 242, 242, 0.02) 60%,
        rgba(242, 242, 242, 0) 100%);
}

/* CLEAN-FIX-GEOMETRIC-ORB-START */
/* Updated orb colors from warm to cool/light tones
   To revert: Change back to rgba(255, 170, 0, ...) values */
/* CLEAN-FIX-GEOMETRIC-COLORS-ORBS-START */
/* Individual orb colors for each contact method
   To revert: Delete between START/END and restore generic .contact-preview rule */

/* LinkedIn - Magenta/White orb */
.contact-preview[data-contact="linkedin"] .preview-media-container::before {
    background: radial-gradient(circle,
        rgba(255, 0, 204, 0.15) 0%,     /* --magenta primary */
        rgba(255, 255, 255, 0.08) 30%,  /* --white accent */
        rgba(255, 0, 204, 0.05) 60%,    /* --magenta fade */
        rgba(255, 0, 204, 0) 100%);
}

/* Calendar - Cool/White orb */
.contact-preview[data-contact="calendar"] .preview-media-container::before {
    background: radial-gradient(circle,
        rgba(169, 176, 178, 0.15) 0%,   /* --cool primary */
        rgba(255, 255, 255, 0.08) 30%,  /* --white accent */
        rgba(169, 176, 178, 0.05) 60%,  /* --cool fade */
        rgba(169, 176, 178, 0) 100%);
}

/* Email - Teal/White orb */
.contact-preview[data-contact="email"] .preview-media-container::before {
    background: radial-gradient(circle,
        rgba(0, 179, 163, 0.15) 0%,     /* --teal primary */
        rgba(255, 255, 255, 0.08) 30%,  /* --white accent */
        rgba(0, 179, 163, 0.05) 60%,    /* --teal fade */
        rgba(0, 179, 163, 0) 100%);
}

/* Resume - Warm/White orb */
.contact-preview[data-contact="resume"] .preview-media-container::before {
    background: radial-gradient(circle,
        rgba(121, 126, 128, 0.15) 0%,   /* --warm primary */
        rgba(255, 255, 255, 0.08) 30%,  /* --white accent */
        rgba(121, 126, 128, 0.05) 60%,  /* --warm fade */
        rgba(121, 126, 128, 0) 100%);
}

/* Fallback for any unspecified contact methods */
.contact-preview .preview-media-container::before {
    background: radial-gradient(circle,
        rgba(0, 212, 255, 0.15) 0%,    /* --cool primary */
        rgba(242, 242, 242, 0.08) 30%,  /* --lightest accent */
        rgba(0, 212, 255, 0.05) 60%,    /* --cool fade */
        rgba(0, 212, 255, 0) 100%);
}
/* CLEAN-FIX-GEOMETRIC-COLORS-ORBS-END */
/* CLEAN-FIX-GEOMETRIC-ORB-END */

/* Ensure media content stays above orb */
.preview-media-container > * {
    position: relative;
    z-index: 1;
}
/* CLEAN-FIX-V2-ORB-END */

/* CLEAN-FIX-MEDIA-LAYOUT-START */
/* Enhanced media layout with flex-grow for vertical fill
   Step 4.1: Changed height: 384px → height: auto to allow flex growth
   To revert: Restore height: 384px, remove min-height */
.preview-media-container {
    flex: 1 1 0px;           /* CLEAN-FIX-PHASE8A-FIX-MEDIA-FLEX: 0px basis = definite height for % children (was 1 1 auto) */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Changed from center for better distribution */
    height: auto;            /* CHANGED: from 384px to auto - allows flex growth */
    min-height: 300px;       /* NEW: Safety minimum for content visibility */
    padding: 24px 180px; /* Increased to reduce space-between spread */
    background: var(--darkest);
    overflow: hidden;
}
/* CLEAN-FIX-MEDIA-LAYOUT-END */

/* CLEAN-FIX-V4-CASE4-START */
/* Case 4: Center items to prevent right-alignment issue
   To revert: Delete between CLEAN-FIX-V4-CASE4-START and END
   Previous V3 attempt only changed padding, not alignment */
.case-preview[data-case="04"] .preview-media-container {
    padding: 24px 240px; /* Keep increased horizontal padding */
    justify-content: center; /* Override space-between - fixes right-align issue */
    gap: 24px; /* Consistent spacing between items */
}

.case-preview[data-case="04"] .artifact-mockup {
    height: 75%; /* Keep reduced height for better balance */
}
/* CLEAN-FIX-V4-CASE4-END */

/* Contact-specific media container height */
.contact-media-container {
    height: 320px; /* Contact height */
}

/* CLEAN-FIX-MEDIA-LAYOUT-2-START */
/* Media sizing and visual effects - consolidated from MEDIA-LAYOUT-2 + V2-MEDIA-EFFECTS
   To revert: Delete between CLEAN-FIX-MEDIA-LAYOUT-2-START and END */
.artifact-mockup {
    flex: 0 0 auto;
    width: auto;
    height: 85%;
    /* START CLEAN-FIX-PHASE8A-REBUILD-MOCKUP-CAP */
    /* Desktop mockup height cap: 64×6n = 384px — matches original production sizing
       Previous: 450px (too large with viewport-relative container heights)
       LG already has max-height: 300px (line ~1786) — this caps the desktop base only
       To revert: Change to max-height: 450px (or 336px for smaller mockups) */
    max-height: 384px;
    /* END CLEAN-FIX-PHASE8A-REBUILD-MOCKUP-CAP */
    margin: 0;
    background: var(--dark);
    overflow: hidden;
    border: 3px double var(--cool);
    position: relative;
    transition: transform var(--transition-fast) ease,
                border-color var(--transition-fast) ease,
                border-style var(--transition-fast) ease;
}
/* CLEAN-FIX-MEDIA-LAYOUT-2-END */

/* CLEAN-FIX-V2-MEDIA-EFFECTS-START */
/* Media item visual effects - case colors on hover
   To revert: Delete between CLEAN-FIX-V2-MEDIA-EFFECTS-START and END */

/* Hover state with scale and case-specific colors */
.artifact-mockup:hover {
    transform: scale(1.1);
    border-style: double;
    border-width: 3px;
}

/* Case-specific hover colors */
.case-preview[data-case="01"] .artifact-mockup:hover {
    border-color: var(--blue);
    box-shadow: 0 0 24px rgba(0, 102, 255, 0.3);
}

.case-preview[data-case="02"] .artifact-mockup:hover {
    border-color: var(--pink);
    box-shadow: 0 0 24px rgba(255, 0, 170, 0.3);
}

.case-preview[data-case="03"] .artifact-mockup:hover {
    border-color: var(--purple);
    box-shadow: 0 0 24px rgba(136, 0, 255, 0.3);
}

.case-preview[data-case="04"] .artifact-mockup:hover {
    border-color: var(--white);
    box-shadow: 0 0 24px rgba(242, 242, 242, 0.3);
}

/* Subtle inner glow on default state */
.artifact-mockup::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid var(--cool);
    opacity: 0.2;
    pointer-events: none;
    transition: opacity var(--transition-fast) ease;
}

.artifact-mockup:hover::after {
    opacity: 0;
}
/* CLEAN-FIX-V2-MEDIA-EFFECTS-END */

/* CLEAN-FIX-MEDIA-LAYOUT-3-START */
/* Auto width with full height for proper aspect ratios
   To revert: Delete between CLEAN-FIX-MEDIA-LAYOUT-3-START and END */
.artifact-media {
    width: auto; /* Auto width based on aspect ratio */
    height: 100%; /* Fill mockup container height */
    max-width: none; /* Remove width constraints */
    object-fit: contain; /* Maintain aspect ratio */
    display: block;
}
/* CLEAN-FIX-MEDIA-LAYOUT-3-END */

/* CLEAN-FIX-PHASE7-THUMBNAIL-MEDIA-START */
/* Fix 1: Thumbnail aspect ratio
   Action: ADDITION (new selector - none existed)
   Root cause: Cloned .artifact-media inherits width:auto;height:100% which distorts
   in fixed square thumbnail containers (32px XS, 40px SM/MD-thin).
   This rule overrides with proper contain behavior.
   Applies universally to all carousel breakpoints.
   To revert: Delete between START/END markers */
.thumbnail-item img,
.thumbnail-item video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* CLEAN-FIX-PHASE7-THUMBNAIL-MEDIA-END */

.artifact-video {
    width: 100%;
    height: 100%;
}

/* Contact visual container */
.contact-visual {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}




/* ===========================================
   LAYER 3: CTA ROW (72px height)
   =========================================== */

.preview-cta-row {
    height: 72px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 36px;
    /* padding-top: 6px; potential fix for cta-left vertical centering, but breaks cta-right vertical centering */ 
    border-top: .6px solid var(--dark);
    background: var(--darkest);
}

.cta-left,
.cta-right {
    flex: 0 0 auto;
}

/* START CLEAN-FIX-PHASE8A-REBUILD-CTA-PADDING */
/* CTA vertical centering fix: Two-part — removed padding-top hack + added explicit flex centering
   Previous: padding-top: 6px, no display: flex — asymmetric with .cta-right which has display: flex + align-items: center
   SM already had this reset (line ~2376-2382), now promoted to base
   To revert: Restore padding-top: 6px and remove display/align-items */
.cta-left {
    padding-top: 0;
    display: flex;
    align-items: center;
}
/* END CLEAN-FIX-PHASE8A-REBUILD-CTA-PADDING */

.cta-right {
    display: flex;
    align-items: center;
}

/* .artifact-name moved to Phase 5 section to avoid duplication */

/* CLEAN-FIX-LAYOUT-CSS-1-END */

/* Keep existing artifact video styles below */
.artifact-video {
    object-fit: cover;
}

/* Legacy preview-actions - kept for backward compatibility */
.preview-actions {
    display: none; /* Hidden in favor of preview-cta-row */
}

/* ===========================================
   BUTTONS (3D Cube Effect - JS lines 220-227, 275-281)
   =========================================== */

/* Main preview button */
/* Button styles moved to Phase 4 section to avoid duplication */
/* CLEAN-FIX-PRIMARY-CTA-STANDARDS-START */
/* Removed custom warm border to inherit site-wide CTA standards
   Original line: border: 1px solid var(--warm);
   To revert: Uncomment the border line below and remove the new styles */
/* CLEAN-FIX-REMOVE-OVERFLOW-START */
/* Removed overflow: hidden - was clipping 3D-transformed cube faces creating inset shadow artifacts
   Header CTAs have NO overflow clipping, allowing clean 3D rendering
   To revert: Add back 'overflow: hidden;' */
/* START CLEAN-FIX-BUTTON-BORDER-OVERRIDE */
/* Fix: Override browser default <button> outset border
   Root Cause: Browser applies border-style: outset and border-width: 2px to <button> elements
   This creates visible 3D border artifacts on left/top edges
   Solution: Explicitly set border: none to override user-agent stylesheet
   Discovery: DevTools Computed tab showed outset border with no CSS file source (user-agent origin)
   Testing: Adding border: none !important; in DevTools instantly eliminated artifacts
   Date: 2025-10-08 Phase 6.7.2
   To revert: Change 'border: none;' back to commented state and remove CLEAN-FIX markers */
.preview-btn,
.contact-btn {
    position: relative;
    width: 140px;
    height: 44px;
    background: transparent;
    border: var(--cta-module-border); /* Was: none - Phase 6.7.2 - Now matches site-wide CTA standards Phase 6.7 Task 1 */
    cursor: pointer;
    /* overflow: hidden; - REMOVED: clips 3D transforms, creates artifacts */
    transition: transform var(--transition-fast) ease,
                border-color var(--transition-fast) ease;
    /* perspective moved to Phase 4 */
}
/* END CLEAN-FIX-BUTTON-BORDER-OVERRIDE */

/* CLEAN-FIX-CTA-BORDER-STANDARDS-START */
/* Add CTA border hover states matching header/footer standards
   Header pattern: default uses --cta-module-border, hover uses 1.2px solid var(--warm) + shadow
   Reference: header-v3.css lines 708, 722-723
   To revert: Delete between START/END and restore 'border: none;' at line 870, 1175 */
.preview-btn:hover,
.contact-btn:hover {
    border: 1.2px solid var(--warm);
    box-shadow: var(--shadow-module-hover); /* 0 0 6px rgba(250, 250, 250, 0.16) */
}
/* CLEAN-FIX-CTA-BORDER-STANDARDS-END */
/* CLEAN-FIX-REMOVE-OVERFLOW-END */

/* Cube wrapper for 3D effect */
.cube-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    perspective: 600px;
}

.cube {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform var(--transition-medium) cubic-bezier(0.16, 1, 0.3, 1);
}

/* Cube faces */
/* CLEAN-FIX-CTA-STANDARDS-START */
/* Aligned with site-wide CTA standards from header-v3.css
   To revert: Change translateZ back to 22px, remove padding vars,
   restore font-weights to 500 for shared styles */
/* Apply site-wide CTA standards from v3-design-system.css */
.preview-btn .cube-face,
.contact-btn .cube-face {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-small);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backface-visibility: hidden;
    /* font-weight removed here, now set per face */
}

/* CLEAN-FIX-SHADOW-ARTIFACT-FINAL-START */
/* SOLUTION: Explicit border:none + background override prevents semi-transparent variable fallback
   ROOT CAUSE: Design system variables --cta-cube-border-front (rgba 48,51,51,0.05) and
   --cta-cube-bg-front (rgba 18,18,18,0.05) create layered shadow effect when combined with
   translateZ(12px) 3D transforms on dark backgrounds
   DISCOVERED VIA: test-cta-shadow-minimal.html comparative analysis showing identical computed
   styles between header and footer CTAs, with production header masking effect via hover opacity
   ORIGINAL MISDIAGNOSIS: Initially reverted this fix thinking it failed because shadow persisted
   after border removal. Reality: BOTH border AND semi-transparent background contribute to the
   visual artifact. The fix was partially working (border removed successfully) but needed the
   full context of both properties being controlled together.
   REVERT: Search for CLEAN-FIX-SHADOW-ARTIFACT-FINAL and re-comment lines 922-943 */

.preview-btn .cube-face.front,
.contact-btn .cube-face.front {
    transform: rotateX(0deg) translateZ(12px);
    background: var(--cta-cube-bg-front);
    /* CLEAN-FIX-REMOVE-DEBUG-COLOR - Removed: background-color: aquamarine; */
    border: none; /* KEY FIX: Prevents semi-transparent border artifact */
    color: var(--cta-cube-text-color-front);
    font-weight: 400;
    padding-left: var(--cta-text-padding-left);
    padding-right: var(--cta-text-padding-right);
}

.preview-btn .cube-face.back,
.contact-btn .cube-face.back {
    transform: rotateX(180deg) translateZ(12px);
    background: var(--cta-cube-bg-back);
    border: none; /* KEY FIX: Prevents semi-transparent border artifact */
    color: var(--cta-cube-text-color-back);
    font-weight: 700;
    position: relative;
    padding-left: var(--cta-text-padding-left);
    padding-right: var(--cta-text-padding-right);
}
/* CLEAN-FIX-SHADOW-ARTIFACT-FINAL-END */
/* CLEAN-FIX-CTA-STANDARDS-END */

/* Hover states matching site-wide */
.preview-btn:hover .cube-face,
.contact-btn:hover .cube-face {
    border-color: rgba(48, 51, 51, 0.4);
}

.preview-btn:hover .cube-face.back,
.contact-btn:hover .cube-face.back {
    background-color: rgba(18, 18, 18, 0.6);
}
/* CLEAN-FIX-PRIMARY-CTA-STANDARDS-END */

/* CLEAN-FIX-ACCENT-LINES-V2-START */
/* Enhanced double accent lines - thicker, delayed, opposite directions
   To revert: Delete between START/END markers and restore original lines 928-983 */

/* CLEAN-FIX-ACCENT-POSITIONING-START */
/* Edge-anchored positioning for sweep animations
   To revert: Restore left: 50%, transform: translateX(-50%) */
/* Double accent lines - thicker and closer to edges */
.preview-btn .cube-face.back::before,
.preview-btn .cube-face.back::after,
.contact-btn .cube-face.back::before,
.contact-btn .cube-face.back::after,
.request-writeup-btn .cube-face.back::before,
.request-writeup-btn .cube-face.back::after {
    content: '';
    position: absolute;
    height: 2px; /* Thicker lines */
    width: 0;
    opacity: 0;
    transition: none; /* Animation only, no transition */
}

/* START CLEAN-FIX-CTA-ACCENT-FULL-WIDTH */
/* Full-width accent lines with opposite-edge sweep animations
   Top line sweeps right-to-left, bottom line sweeps left-to-right
   Both animate to 100% width for full button coverage
   To revert: Delete between START/END markers */

/* CLEAN-FIX-ACCENT-2-START */
/* RESTORE: Secondary CTA dual accent lines (both ::before and ::after)
   CLEAN-FIX-ACCENT-1 incorrectly removed .request-writeup-btn breaking dual lines
   Both primary and secondary CTAs should have dual accent lines
   TO REVERT: Search for CLEAN-FIX-ACCENT-2 and delete between START/END markers */

/* All CTAs: Initial state (width: 0 before hover) - includes secondary */
 .cube-face.back::before,
.contact-btn .cube-face.back::before,
.request-writeup-btn .cube-face.back::before {
    top: 3px;
    right: 0;  /* Start from right edge for right-to-left sweep */
    left: auto;
    width: 0;  /* Hidden until hover */
    height: 2px;
    background-color: var(--white);
    transition: none;  /* Animation handles movement */
}

.preview-btn .cube-face.back::after,
.contact-btn .cube-face.back::after,
.request-writeup-btn .cube-face.back::after {
    bottom: 3px;
    left: 0;  /* Start from left edge for left-to-right sweep */
    right: auto;
    width: 0;  /* Hidden until hover */
    height: 2px;
    background-color: var(--white);
    transition: none;  /* Animation handles movement */
}
/* CLEAN-FIX-ACCENT-2-END */

/* CLEAN-FIX-ACCENT-2-HOVER-START */
/* Hover states: Primary CTAs animate to 100% width
   Secondary CTAs also get these animations but override with 50% width later */

.preview-btn:hover .cube-face.back::before,
.contact-btn:hover .cube-face.back::before,
.request-writeup-btn:hover .cube-face.back::before {
    width: 100%;  /* Full button width */
    animation: accent-right-to-left var(--transition-medium) var(--easing-concrete) 600ms both;
}

.preview-btn:hover .cube-face.back::after,
.contact-btn:hover .cube-face.back::after,
.request-writeup-btn:hover .cube-face.back::after {
    width: 100%;  /* Full button width */
    animation: accent-left-to-right var(--transition-medium) var(--easing-concrete) 600ms both;
}
/* CLEAN-FIX-ACCENT-2-HOVER-END */
/* END CLEAN-FIX-CTA-ACCENT-FULL-WIDTH */

/* Case-specific accent colors */
.preview-btn[data-case="01"]:hover .cube-face.back::before,
.preview-btn[data-case="01"]:hover .cube-face.back::after {
    background: var(--blue);
}

.preview-btn[data-case="02"]:hover .cube-face.back::before,
.preview-btn[data-case="02"]:hover .cube-face.back::after {
    background: var(--pink);
}

.preview-btn[data-case="03"]:hover .cube-face.back::before,
.preview-btn[data-case="03"]:hover .cube-face.back::after {
    background: var(--purple);
}

.preview-btn[data-case="04"]:hover .cube-face.back::before,
.preview-btn[data-case="04"]:hover .cube-face.back::after {
    background: var(--lightest);
}

/* Secondary case CTAs use same colors as primary */
.request-writeup-btn[data-case="01"]:hover .cube-face.back::before,
.request-writeup-btn[data-case="01"]:hover .cube-face.back::after {
    background: var(--blue);
}

.request-writeup-btn[data-case="02"]:hover .cube-face.back::before,
.request-writeup-btn[data-case="02"]:hover .cube-face.back::after {
    background: var(--pink);
}

.request-writeup-btn[data-case="03"]:hover .cube-face.back::before,
.request-writeup-btn[data-case="03"]:hover .cube-face.back::after {
    background: var(--purple);
}

.request-writeup-btn[data-case="04"]:hover .cube-face.back::before,
.request-writeup-btn[data-case="04"]:hover .cube-face.back::after {
    background: var(--lightest);
}

/* Contact-specific accent colors */
.contact-preview[data-contact="linkedin"] .contact-btn:hover .cube-face.back::before,
.contact-preview[data-contact="linkedin"] .contact-btn:hover .cube-face.back::after {
    background: var(--magenta);
}

.contact-preview[data-contact="calendar"] .contact-btn:hover .cube-face.back::before,
.contact-preview[data-contact="calendar"] .contact-btn:hover .cube-face.back::after {
    background: var(--cool);
}

.contact-preview[data-contact="email"] .contact-btn:hover .cube-face.back::before,
.contact-preview[data-contact="email"] .contact-btn:hover .cube-face.back::after {
    background: var(--teal);
}

.contact-preview[data-contact="resume"] .contact-btn:hover .cube-face.back::before,
.contact-preview[data-contact="resume"] .contact-btn:hover .cube-face.back::after {
    background: var(--warm);
}

/* CLEAN-FIX-ACCENT-SWEEP-START */
/* Animation keyframes - edge-anchored sweep (matching header CTA approach)
   Uses 'inherit' to respect text-specific widths set via data-text attributes
   To revert: Restore center-convergence animations above */
/* Left-to-right sweep: anchored to left edge, expands right */
@keyframes accent-left-to-right {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: inherit; /* Respects text-specific widths (52px, 28px, etc.) */
        opacity: 1;
    }
}

/* Right-to-left sweep: anchored to right edge, expands left */
@keyframes accent-right-to-left {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: inherit; /* Respects text-specific widths (52px, 28px, etc.) */
        opacity: 1;
    }
}
/* CLEAN-FIX-ACCENT-SWEEP-END */
/* CLEAN-FIX-ACCENT-LINES-V2-END */

/* Hover rotation moved to Phase 4 for consistency */

/* CLEAN-FIX-SECONDARY-CTA-STANDARDS-START */
/* Transform secondary CTAs to cube structure with Y-axis rotation
   Original styles commented out below for reversion
   To revert: Delete between START/END markers and uncomment original styles */

/* CLEAN-FIX-REMOVE-OVERFLOW-SECONDARY-START */
/* Removed overflow: hidden and duplicate perspective from secondary CTAs
   Matches primary CTA fix and header pattern - .cube handles perspective
   To revert: Add back 'overflow: hidden; perspective: 600px;' */
/* Request writeup button (JS line 228-230) */
/* CLEAN-FIX-BUTTON-BORDER-OVERRIDE-SECONDARY applied below - matches primary/contact CTA fix */
.request-writeup-btn {
    position: relative;
    width: 140px;
    height: 44px;
    background: transparent;
    border: var(--cta-module-border); /* Was: none - Phase 6.7.2 - Now matches site-wide CTA standards Phase 6.7 Task 1 */
    cursor: pointer;
    /* overflow: hidden; - REMOVED: clips 3D transforms */
    /* perspective: 600px; - REMOVED: duplicate, .cube has it */
    transition: transform var(--transition-fast) ease;
}
/* CLEAN-FIX-REMOVE-OVERFLOW-SECONDARY-END */

/* CLEAN-FIX-CTA-BORDER-STANDARDS-SECONDARY-START */
/* Add CTA border hover state for secondary CTAs matching header/footer standards
   Reference: header-v3.css lines 722-723
   To revert: Delete between START/END markers */
.request-writeup-btn:hover {
    border: 1.2px solid var(--warm);
    box-shadow: var(--shadow-module-hover); /* 0 0 6px rgba(250, 250, 250, 0.16) */
}
/* CLEAN-FIX-CTA-BORDER-STANDARDS-SECONDARY-END */

/* CLEAN-FIX-REQUESTED-BUTTON-DARK-START */
/* Requested Button Inactive State - Dark Appearance
   User Issue (Image #4): Requested buttons showing orange/warm making them appear actionable

   PROBLEM: var(--warm) background suggests clickability, but pointer-events:none prevents interaction
   Creates UX confusion - looks active but is disabled

   SOLUTION: Use var(--dark) background with var(--lightest) text for clear inactive state
   Visual language: dark = disabled/completed, not interactive

   To revert: Change back to var(--warm) background, var(--darkest) text, var(--warm) border
              Search: CLEAN-FIX-REQUESTED-BUTTON-DARK
*/
.request-writeup-btn.requested {
    background: var(--dark);      /* CHANGED: from var(--warm) - inactive appearance per user Image #4 */
    color: var(--lightest);       /* CHANGED: from var(--darkest) - contrast with dark background */
    border-color: var(--dark);    /* CHANGED: from var(--warm) - consistent with background */
    pointer-events: none;
}
/* CLEAN-FIX-REQUESTED-BUTTON-DARK-END */

/* Add cube structure to secondary CTAs */
.request-writeup-btn .cube {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform var(--transition-medium) cubic-bezier(0.16, 1, 0.3, 1);
}

/* Y-axis rotation for secondary differentiation */
.request-writeup-btn:hover .cube {
    transform: rotateY(180deg); /* Y-axis instead of X for subtle difference */
}

/* CLEAN-FIX-CTA-STANDARDS-SECONDARY-START */
/* Apply site-wide standards to secondary cube faces
   To revert: Change translateZ back to 22px, remove padding vars,
   restore font-weight to 500 */
.request-writeup-btn .cube-face {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-small);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backface-visibility: hidden;
    /* font-weight removed here, now set per face */
}

/* CLEAN-FIX-SHADOW-ARTIFACT-FINAL-SECONDARY-START */
/* Same fix as primary CTAs applied to secondary .request-writeup-btn CTAs
   Y-axis rotation (rotateY) instead of X-axis but same shadow artifact root cause
   See primary CTA fix above (lines 909-944) for full explanation of the issue
   REVERT: Search for CLEAN-FIX-SHADOW-ARTIFACT-FINAL-SECONDARY and re-comment lines 1238-1257 */

.request-writeup-btn .cube-face.front {
    transform: rotateY(0deg) translateZ(12px);
    background: var(--cta-cube-bg-front);
    border: none; /* KEY FIX: Prevents semi-transparent border artifact */
    color: var(--cta-cube-text-color-front);
    font-weight: 400;
    padding-left: var(--cta-text-padding-left);
    padding-right: var(--cta-text-padding-right);
}

.request-writeup-btn .cube-face.back {
    transform: rotateY(180deg) translateZ(12px);
    background: var(--cta-cube-bg-back);
    border: none; /* KEY FIX: Prevents semi-transparent border artifact */
    color: var(--cta-cube-text-color-back);
    font-weight: 700;
    position: relative;
    padding-left: var(--cta-text-padding-left);
    padding-right: var(--cta-text-padding-right);
}
/* CLEAN-FIX-SHADOW-ARTIFACT-FINAL-SECONDARY-END */
/* CLEAN-FIX-CTA-STANDARDS-SECONDARY-END */

/* Hover states */
.request-writeup-btn:hover {
    transform: scale(1.05); /* Subtler scale than primary (1.1) */
}

.request-writeup-btn:hover .cube-face {
    border-color: rgba(48, 51, 51, 0.4);
}

.request-writeup-btn:hover .cube-face.back {
    background-color: rgba(18, 18, 18, 0.6);
}

/* CLEAN-FIX-SECONDARY-ROTATION-START */
/* Y-axis rotation for secondary CTAs to differentiate from primary
   To revert: Delete between START/END markers */
.request-writeup-btn:hover .cube {
    transform: rotateY(180deg); /* Y-axis instead of X-axis */
}
/* CLEAN-FIX-SECONDARY-ROTATION-END */

/* CLEAN-FIX-ACCENT-2-SECONDARY-OVERRIDE-START */
/* Secondary CTAs: Both lines animate but to 50% width for differentiation
   User confirmed dual-accent lines for BOTH primary and secondary CTAs
   Both pseudo-elements are initialized above in the main block
   TO REVERT: Delete this block and restore single-line implementation */
.request-writeup-btn:hover .cube-face.back::before {
    width: 50%; /* Top line animates to half width */
    animation: accent-right-to-left var(--transition-medium) var(--easing-concrete) 600ms both;
}

.request-writeup-btn:hover .cube-face.back::after {
    width: 50%; /* Bottom line animates to half width */
    animation: accent-left-to-right var(--transition-medium) var(--easing-concrete) 600ms both;
}
/* CLEAN-FIX-ACCENT-2-SECONDARY-OVERRIDE-END */

/* Cases secondary CTAs use light accent */
.case-preview .request-writeup-btn:hover .cube-face.back::after {
    background: var(--light);
}

/* Contact secondary CTAs use cool accent (Note: contact preview doesn't have secondary CTAs, but included for completeness) */
.contact-preview .request-writeup-btn:hover .cube-face.back::after {
    background: var(--cool);
}
/* CLEAN-FIX-SECONDARY-CTA-STANDARDS-END */

/* .btn-text styling consolidated in Phase 4 */

/* CLEAN-FIX-STYLE-4-START */
/* Phase 4: CTA Differentiation - X-axis vs Y-axis rotation */
/* To revert: Search CLEAN-FIX-STYLE-4 and delete between START/END */

/* Duplicate perspective removed — .cube-wrapper already has perspective: 600px */

.preview-btn .cube {
    transform-style: preserve-3d;
    transition: transform var(--transition-medium) cubic-bezier(0.16, 1, 0.3, 1);
}

.preview-btn:hover .cube {
    transform: rotateX(-180deg);
}

/* CLEAN-FIX-CONTACT-CUBE-ROTATION-START */
/* Add missing cube rotation for contact CTAs - matches primary CTA pattern
   Without this, accent lines and back face never become visible on hover
   Contact buttons use same X-axis rotation as preview buttons
   To revert: Delete between CLEAN-FIX-CONTACT-CUBE-ROTATION-START and END markers */
.contact-btn:hover .cube {
    transform: rotateX(-180deg);
}
/* CLEAN-FIX-CONTACT-CUBE-ROTATION-END */

/* Phase 8A.2 cleanup: Removed dead commented-out code blocks
   - Secondary CTA btn-text rotation (superseded by CLEAN-FIX-SECONDARY-CTA-STANDARDS)
   - Accent line animation (superseded by CLEAN-FIX accent line sections)
   - Pulse ring animation (superseded by CLEAN-FIX-BORDER-SHADOW) */

/* Standardize text sizes */
.cube-face {
    /* CLEAN-FIX-PHASE8-TYPO-CUBE-START - Original: 14px */
    font-size: var(--font-size-small) !important;  /* 12.8px - per Phase 2 typography cleanup */
    /* CLEAN-FIX-PHASE8-TYPO-CUBE-END */
}

.btn-text {
    /* CLEAN-FIX-PHASE8-TYPO-BTN-START - Original: 14px */
    font-size: var(--font-size-small) !important;  /* 12.8px - per Phase 2 typography cleanup */
    /* CLEAN-FIX-PHASE8-TYPO-BTN-END */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* CLEAN-FIX-STYLE-4-END */

/* CLEAN-FIX-STYLE-5-START */
/* Phase 5: Layout Adjustments - 92% width and vertical sandwich */
/* To revert: Search CLEAN-FIX-STYLE-5 and delete between START/END */

/* 92% width for stage 2 containers */
.case-preview-section,
.contact-preview-section {
    width: 92% !important; /* Justified: Override existing width for consistency */
    left: 4% !important;
    right: 4% !important;
}

/* DELETED duplicate .case-preview-section.active rule */

/* START CLEAN-FIX-PHASE8A-VIEWPORT-PREVIEW-HEIGHT */
/* Desktop/LG TOC translate: Viewport-relative to match preview height (was fixed -580px/-420px)
   TOC slides up by the full preview height: calc(-100dvh + --total-stack)
   Both cases and contact use identical viewport-relative translate
   To revert: Restore translateY(-580px) for preview-active and translateY(-420px) for contact-preview-active */
.extension-toc.preview-active,
.extension-toc.contact-preview-active {
    transform: translateY(calc(-100vh + var(--total-stack)));    /* Fallback */
    transform: translateY(calc(-100dvh + var(--total-stack)));   /* Modern */
    z-index: 1004;
    transition: transform var(--transition-medium) cubic-bezier(0.16, 1, 0.3, 1);
}
/* END CLEAN-FIX-PHASE8A-VIEWPORT-PREVIEW-HEIGHT */

/* CLEAN-FIX-CTA-TYPE-SIZE-START */
/* Match artifact name to cube face hover size for visual consistency
   To revert: Delete between CLEAN-FIX-CTA-TYPE-SIZE-START and END
   Previous: font-size was 26px, then 16px */
.artifact-name {
    /* CLEAN-FIX-PHASE8-TYPO-ARTIFACT-START - Original: 16px */
    font-size: var(--font-size-small);  /* 12.8px - per Phase 2 typography cleanup */
    /* CLEAN-FIX-PHASE8-TYPO-ARTIFACT-END */
    font-family: var(--font-secondary);
    color: var(--light);
    font-weight: var(--font-weight-regular);
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* CLEAN-FIX-CTA-TYPE-SIZE-END */

/* REMOVED duplicate selector - already defined at lines 387-396 */

/* Ensure proper TOC container width */
.toc-items-container {
    width: 92%;
    margin: 0 auto;
}
/* CLEAN-FIX-STYLE-5-END */

/* ===========================================
   CONTACT SPECIFIC STYLES (JS lines 271-284, 295-297)
   =========================================== */

/* Contact TOC and previews inherit from base extension styles */

/* Contact visual area (JS lines 272-274) */
.contact-visual {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-bottom: var(--spacing-48); */
}

/* Specific contact visual types */
.contact-visual-linkedin,
.contact-visual-calendly,
.contact-visual-email {
    width: 200px;
    height: 200px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* LinkedIn Network Visualization */
.v3-linkedin-graphic::before,
.v3-linkedin-graphic::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--warm);
    border-radius: 50%;
}

.v3-linkedin-graphic::before {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.v3-linkedin-graphic::after {
    animation: orbit 3s linear infinite;
}

@keyframes orbit {
    from { transform: rotate(0deg) translateX(80px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(80px) rotate(-360deg); }
}

/* Calendar Grid */
.v3-calendar-graphic {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 4px;
}

.v3-calendar-graphic::before {
    content: '';
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    background: repeating-linear-gradient(
        0deg,
        var(--dark) 0,
        var(--dark) 1px,
        transparent 1px,
        transparent 28px
    );
}

/* Email Envelope */
.v3-email-graphic {
    border: 2px solid var(--warm);
    position: relative;
}

.v3-email-graphic::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: var(--dark);
    transform-origin: top;
    animation: flapOpen 4s infinite;
}

@keyframes flapOpen {
    0%, 20%, 80%, 100% { transform: rotateX(0); }
    40%, 60% { transform: rotateX(-180deg); }
}

/* ===========================================
   CASE REQUEST COUNTER - REPLACED BY v3-request-counter.css
   =========================================== */


/* ===========================================
   CTA LINK STATES (Footer CTAs)
   =========================================== */

.v3-cta-cases.extension-active,
.v3-cta-contact.extension-active {
    transform: translateY(-2px);
}

.v3-cta-cases.extension-active .cta-module,
.v3-cta-contact.extension-active .cta-module {
    transform: scale(1.1);
    border-color: var(--warm);
}


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

/* START CLEAN-FIX-PHASE8-BREAKPOINT-FOOTER-EXT */
/* Phase 8: Standardized to match 599px, 767px, 991px, 1199px boundaries */
/* OLD breakpoints: 1200px, 768px, 480px */

/* LG Breakpoint - Large Laptops/Small Desktops */
@media (max-width: 1199px) {
    .v3-preview-media {
        grid-template-columns: repeat(2, 1fr);
    }

    /* CLEAN-FIX-PHASE8-BOTTOMS-UP-LG-TOC-START */
    /* Step 3.1b: Explicit LG TOC height (88px) for future-proofing
       Original: 88px (inherited from desktop base rule at line 102)
       Fix: Explicit declaration to match footer expanded at LG (88px)
       Affects: MacBook Air/Pro, small laptops (992-1199px)
       Matches footer height at LG for visual symmetry
       To revert: Delete lines between START and END markers (same result) */
    .extension-toc {
        height: 88px;
    }
    /* CLEAN-FIX-PHASE8-BOTTOMS-UP-LG-TOC-END */

    /* CLEAN-FIX-PHASE5-LG-DESKTOP-LAYOUT-START */
    /* Step 5.3: Explicit LG 3-column desktop layout
       UPDATED PHASE6: Added max-height constraint for header clearance
       Reinforces horizontal asset display at LG (992-1199px)
       Defensive: Ensures no SM/XS rules leak upward
       To revert: Delete between START/END markers
       To revert PHASE6 only: Remove max-height line, change height back to 85% */
    .preview-media-container {
        display: flex;
        flex-direction: row;           /* Horizontal 3-column layout */
        justify-content: space-between; /* Distribute assets evenly */
        align-items: center;
        padding: 24px 96px;            /* PHASE6: Reduced from 120px for more asset space */
        height: auto;
        min-height: 260px;             /* PHASE6: Reduced from 300px */
        /* CLEAN-FIX-VERTICAL-STACK: Removed max-height to allow flex fill - was: max-height: min(400px, 55vh); */
    }

    /* Ensure mockups display inline, not stacked */
    .artifact-mockup {
        flex: 0 0 auto;
        display: block;
        height: 70%;                   /* PHASE6: Reduced from 85% for shorter viewports */
        max-height: 300px;             /* PHASE6: Absolute cap prevents overflow */
    }

    /* Defensive: Thumbnail strip should not exist at LG, but hide if it does */
    .thumbnail-strip {
        display: none;
    }
    /* CLEAN-FIX-PHASE5-LG-DESKTOP-LAYOUT-END */

}

/* CLEAN-FIX-PHASE7-MD-SPLIT-CSS-START */
/* MD-thin Breakpoint (768-819px) - Carousel layout
   PHASE7: Changed from 991px to 819px
   Devices 820+ now fall through to LG block (3-column layout)
   To revert: Change 819px back to 991px */
@media (max-width: 819px) {
    /* CLEAN-FIX-PHASE7-BOTTOMS-UP-MD-VARS-START */
    /* MD-thin stack variables: TOC 100px, Footer 100px → total 290px (72+12+6+100+100) */
    :root {
        --stack-toc: 100px;
        --stack-footer: 100px;
        /* --total-stack auto-recalculates to 290px */
    }
    /* CLEAN-FIX-PHASE7-BOTTOMS-UP-MD-VARS-END */

    /* CLEAN-FIX-PHASE8-EXT-MENU-MD-START */
    /* Fix: Sync extension menu bottom with footer expanded height at MD (100px) */
    /* Root cause: Footer is 100px at MD but menu was fixed at 88px = 12px gap */
    /* To revert: Delete this entire media query block */
    .footer-extension-menu {
        bottom: 100px;
    }
    /* CLEAN-FIX-PHASE8-EXT-MENU-MD-END */

    /* CLEAN-FIX-PHASE8-BOTTOMS-UP-MD-TOC-START */
    /* Step 3.1a: Fix MD TOC height to match expanded footer (100px)
       Original: 88px (inherited from desktop base rule at line 102)
       Fix: 100px to match footer-v3.css line 908 expanded height at MD
       Affects: iPad Mini (768px), iPad 10th (810px), iPad Air (820px), iPad Pro 11" (834px)
       Resolves: 12px visual gap between TOC and expanded footer on all MD devices
       To revert: Delete lines between START and END markers */
    .extension-toc {
        height: 100px;
    }
    /* CLEAN-FIX-PHASE8-BOTTOMS-UP-MD-TOC-END */

    /* CLEAN-FIX-PHASE7-BOTTOMS-UP-PREVIEW-HEIGHT-MD-START */
    /* MD-thin: Viewport-relative height using CSS variables
       --total-stack = 290px at MD (72 + 12 + 6 + 100 + 100)
       Fallback vh for older browsers
       To revert: Delete between START/END markers */
    .case-preview-section.active,
    .contact-preview-section.active {
        height: calc(100vh - var(--total-stack));   /* Fallback */
        height: calc(100dvh - var(--total-stack));  /* Modern */
        display: flex;
        flex-direction: column;
    }
    /* CLEAN-FIX-PHASE7-BOTTOMS-UP-PREVIEW-HEIGHT-MD-END */

    /* CLEAN-FIX-VERTICAL-STACK-MD-TOC-TRANSLATE-START */
    /* MD-thin: TOC translateY using CSS variables
       --total-stack = 290px at MD (72 + 12 + 6 + 100 + 100)
       TOC.bottom = Preview.top (flush positioning)
       To revert: Delete between START/END markers */
    .extension-toc.preview-active,
    .extension-toc.contact-preview-active {
        transform: translateY(calc(-100vh + var(--total-stack)));
        transform: translateY(calc(-100dvh + var(--total-stack))); /* Modern: dvh for mobile Safari */
    }
    /* CLEAN-FIX-VERTICAL-STACK-MD-TOC-TRANSLATE-END */

    /* START CLEAN-FIX-PHASE8A-LOCK-MULTI-ASSET-HIDE */
    /* Defensive hide: Prevents multi-asset vertical stacking during ~1-2ms race window
       between showFullPreview() (makes preview visible) and initMobileCarousel() (wraps mockups)
       Child combinator (>) auto-deactivates once mockups are wrapped inside .main-media-display
       Critical: NO :first-child sizing — Case 04 has 1 mockup, initMobileCarousel skips it
       To revert: Delete everything between START and END markers */
    .preview-media-container > .artifact-mockup:not(:first-child) {
        display: none;
    }
    /* END CLEAN-FIX-PHASE8A-LOCK-MULTI-ASSET-HIDE */

    /* START CLEAN-FIX-PHASE8A-LOCK-MD-LAYER-HEIGHTS */
    /* MD-thin (768-819px): Header/CTA height overrides to reclaim vertical space
       Desktop 72px cascades unmodified — SM defines 36px at max-width: 767px
       This fills the gap: 72px (desktop) → 42px (MD-thin) → 36px (SM) → auto (XS)
       42px = 7×6n. Reclaims ~60px for Layer 2 media display
       SM/XS have their own explicit overrides that win via later source order
       To revert: Delete everything between START and END markers */
    /* START CLEAN-FIX-PHASE8A-FIX-MDTHIN-LAYER-SYMMETRY */
    /* MD-thin Layers 1 + 3: 48px max-height (8×6n) with 6px vertical padding + 36px buttons
       Root cause: border-box means max-height: 42px - 24px padding = 18px content area
       Desktop 44px buttons overflow into this 18px space → buttons clipped/misaligned
       Button cascade: 44px (desktop) → 36px (MD-thin) → 36px (SM) → 32px (XS)
       To revert: Change max-height to 42px, padding to var(--spacing-12) var(--spacing-24) */
    .preview-header-row {
        height: auto;
        min-height: 28px;
        max-height: 48px;
        padding: var(--spacing-6) var(--spacing-24);
    }

    .preview-cta-row {
        height: auto;
        min-height: 28px;
        max-height: 48px;
        padding: var(--spacing-6) var(--spacing-24);
        align-items: center;
    }

    .preview-btn,
    .request-writeup-btn {
        width: 100%;
        height: 36px;
        min-height: 36px;
        max-height: 36px;
    }
    /* END CLEAN-FIX-PHASE8A-FIX-MDTHIN-LAYER-SYMMETRY */
    /* END CLEAN-FIX-PHASE8A-LOCK-MD-LAYER-HEIGHTS */

    /* START CLEAN-FIX-PHASE8A-REBUILD-MDTHIN-TYPO */
    /* MD-thin header typography: Desktop base sets font-size: 56px !important on .preview-title
       which overflows the 42px MD-thin header row. Override with derived tokens.
       Title: calc(var(--font-size-huge) * 0.65) = calc(48px * 0.65) = ~31.2px
       Subtitle: var(--font-size-standard) = 0.9rem = 14.4px
       Monotonic cascade: 56px (desktop) → ~31px (MD-thin) → 28.8px (SM) → 26px (XS)
       !important required: Desktop base uses !important on title — override must match escalation
       Alternatives considered: (1) Remove !important from base — high regression risk across all desktop overrides
                                (2) Higher specificity selector — fragile against other selector chains
       To revert: Delete this entire block. Restores desktop 56px/26px cascade into 42px row */
    .preview-title {
        font-size: calc(var(--font-size-huge) * 0.65) !important;  /* ~31.2px — fits 42px row, derived from --font-size-huge: 48px */
    }

    .preview-subtitle {
        font-size: var(--font-size-standard) !important;  /* 14.4px (0.9rem) — compact for MD-thin */
    }

    .header-divider {
        height: 30px;  /* Was 40px (desktop base) — prevents overflow in 42px header row */
    }
    /* END CLEAN-FIX-PHASE8A-REBUILD-MDTHIN-TYPO */

    /* CLEAN-FIX-PHASE8-MD-ASSET-LAYOUT - COMMENTED OUT FOR PHASE5
       Previous: Desktop 3-asset layout for MD
       Replaced by: CLEAN-FIX-PHASE5-MD-THUMBNAIL-STRIP for consistency with SM
       To restore: Uncomment this block and delete PHASE5 block below
    .preview-media-container {
        padding: 24px 60px;
    }
    .case-preview[data-case="04"] .preview-media-container {
        padding: 24px 80px;
    }
    .artifact-mockup {
        height: 75%;
        max-width: 30%;
    }
    .artifact-media {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    */

    /* CLEAN-FIX-PHASE5-MD-THUMBNAIL-STRIP-START */
    /* Step 5.2b: Port proven XS/SM thumbnail strip approach to MD
       This REPLACES the desktop 3-asset layout above
       Ported from SM breakpoint (originally lines 1863-1972)
       To revert: Delete this block and uncomment PHASE8-MD-ASSET-LAYOUT above */

    /* === LAYER 2: Media Container - Vertical Stacking (ported from SM) === */
    /* CLEAN-FIX-VERTICAL-SPACING-PHASE1-MD-START */
    /* Step 1.1/1.3: Removed min-height and gap constraints to eliminate phantom vertical space
       Original: min-height: min(400px, 50vh); gap: var(--spacing-6);
       To revert: Restore min-height and gap values above */
    .preview-media-container {
        flex: 1 1 0px;   /* CLEAN-FIX-PHASE8A-FIX-MEDIA-FLEX: 0px basis = definite height for % children (was 1 1 auto) */
        height: auto;
        min-height: 0; /* CLEAN-FIX-VERTICAL-SPACING: was min(400px, 50vh) */
        /* CLEAN-FIX-VERTICAL-STACK: Removed max-height to allow flex fill - was: max-height: min(450px, 60vh); */
        display: flex;
        flex-direction: column;
        gap: 0; /* CLEAN-FIX-VERTICAL-SPACING: was var(--spacing-6) - now using padding instead */
        overflow: hidden;
        padding: 0;
    }
    /* CLEAN-FIX-VERTICAL-SPACING-PHASE1-MD-END */

    /* Thumbnail strip - ported from SM */
    /* CLEAN-FIX-VERTICAL-SPACING-PHASE2-THUMBNAIL-MD-START */
    /* Step 2.4: Added top padding for gap below main media display
       Original: padding: 0 var(--spacing-6) - To revert: Remove top padding */
    .thumbnail-strip {
        display: flex;
        gap: var(--spacing-4);
        justify-content: center;
        /* START CLEAN-FIX-PHASE8A-REBUILD-THUMBNAIL-FIT */
        /* Thumbnail padding fit: 4px top/bottom fits 40px items in 48px strip (40 + 4 + 4 = 48)
           Previous: var(--spacing-6) all sides = 6px × 2 = 12px vertical → 40 + 12 = 52px overflow
           To revert: Restore padding: var(--spacing-6) */
        padding: 4px var(--spacing-6);
        /* END CLEAN-FIX-PHASE8A-REBUILD-THUMBNAIL-FIT */
        overflow-x: auto;
        flex: 0 0 48px;
        height: 48px;
        /* CLEAN-FIX-PHASE8A-THUMB-BORDER: Half-prominence match to header-row border-bottom (0.6px solid var(--dark))
           Hardcoded rgba: CSS variables don't support partial opacity modification
           Reference: var(--dark) = rgb(48, 51, 51) — this is 50% opacity of that value
           Design system exception: documented per architecture review
           Cascades to SM/XS (thumbnail-strip only exists at carousel breakpoints <820px)
           To revert: Delete this border-top line */
        border-top: 0.6px solid rgba(48, 51, 51, 0.5);
        /* START CLEAN-FIX-PHASE8A-ORB-COVERAGE */
        /* Opaque blocker prevents orb glow from bleeding through thumbnail-strip.
           var(--darkest) = #121212 matches dark-theme secondary surfaces per vision document.
           position: relative + z-index: 2 lifts above orb (z-index: 0) and media (z-index: 1).
           Child elements (thumbnail items with timer ring z-index: 10) remain above in same context.
           box-shadow paints upward into .main-media-display padding-bottom gap (6px transparent strip).
           To revert: Delete between START and END CLEAN-FIX-PHASE8A-ORB-COVERAGE markers */
        background: var(--darkest);
        position: relative;
        z-index: 2;
        /* box-shadow Y-offset MUST match .main-media-display padding-bottom (--spacing-6 = 6px) */
        box-shadow: 0 -6px 0 0 var(--darkest);
        /* END CLEAN-FIX-PHASE8A-ORB-COVERAGE */
    }
    /* CLEAN-FIX-VERTICAL-SPACING-PHASE2-THUMBNAIL-MD-END */

    /* Thumbnail item - ported from SM */
    .thumbnail-item {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        border: 2px solid var(--dark);
        border-radius: 0;
        overflow: hidden;
        cursor: pointer;
        opacity: 0.4;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--darkest);
        position: relative;
        transition: opacity 0.2s ease;
    }

    /* Active state - ported from SM */
    .thumbnail-item.active {
        opacity: 1;
        border-color: var(--warm);
        overflow: visible;
    }

    /* Progress ring - ported from SM */
    .thumbnail-item.active::before {
        content: '';
        position: absolute;
        inset: -2px;
        background: conic-gradient(
            from 0deg,
            var(--timer-color, var(--warm)) var(--timer-progress, 0%),
            transparent var(--timer-progress, 0%)
        );
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        padding: 2px;
        z-index: 10;
        pointer-events: none;
        /* START CLEAN-FIX-PHASE8A-GATE-EXT-PROGRESS-DIR */
        /* Counter-clockwise fill: scaleX(-1) mirrors the clockwise conic-gradient
           Fill path: top-center → LEFT → bottom → right → back to top-center
           GPU-composited transform — no visual artifacts on rasterized gradient
           To revert: Delete the transform: scaleX(-1) line */
        transform: scaleX(-1);
        /* END CLEAN-FIX-PHASE8A-GATE-EXT-PROGRESS-DIR */
    }

    /* Case accent colors - ported from SM */
    .case-preview[data-case="01"] .thumbnail-item.active { --timer-color: var(--blue); }
    .case-preview[data-case="02"] .thumbnail-item.active { --timer-color: var(--pink); }
    .case-preview[data-case="03"] .thumbnail-item.active { --timer-color: var(--purple); }
    .case-preview[data-case="04"] .thumbnail-item.active { --timer-color: var(--white); }

    /* Contact accent colors - ported from SM */
    .contact-preview[data-contact="linkedin"] .thumbnail-item.active { --timer-color: var(--magenta); }
    .contact-preview[data-contact="calendar"] .thumbnail-item.active { --timer-color: var(--cool); }
    .contact-preview[data-contact="email"] .thumbnail-item.active { --timer-color: var(--teal); }
    .contact-preview[data-contact="resume"] .thumbnail-item.active { --timer-color: var(--warm); }

    /* Asset transparency - ported from SM */
    .artifact-mockup {
        background: transparent;
    }

    /* CLEAN-FIX-PHASE5-CONTACT-PADDING-MD-START */
    /* Step 5.1: 6n internal padding for contact preview media container (MD)
       Adds vertical spacing WITHIN layer 2 (not between layers)
       Aligns with v3 design system 6n spacing rhythm
       To revert: Delete between START/END markers */
    .contact-preview .preview-media-container {
        padding-top: var(--spacing-6);      /* 6px internal top padding */
        padding-bottom: var(--spacing-6);   /* 6px internal bottom padding */
    }
    /* CLEAN-FIX-PHASE5-CONTACT-PADDING-MD-END */
    /* CLEAN-FIX-PHASE5-MD-THUMBNAIL-STRIP-END */

}
/* CLEAN-FIX-PHASE8-MD-MINIMAL-END */

/* START CLEAN-FIX-PHASE8A-R3-TOC-MD-BROAD */
/* MD-broad Breakpoint (820-991px) — TOC height alignment
   Phase 7's MD split moved TOC 100px into max-width: 819px block,
   but footer expanded height (100px) stayed in max-width: 991px (footer-v3.css line 908).
   Devices at 820-991px (iPad Air 834px, iPad Landscape 1024px) fall through to LG's 88px TOC,
   creating a 12px mismatch with the 100px footer.
   This compound query fills the gap left by the Phase 7 split.
   To revert: Delete the entire compound media query block */
@media (min-width: 820px) and (max-width: 991px) {
    :root {
        --stack-toc: 100px;     /* Match footer expanded height at MD (100px) */
        --stack-footer: 100px;  /* Already 100px in footer-v3.css for this range */
        /* --total-stack auto-recalculates: 72 + 12 + 6 + 100 + 100 = 290px */
    }

    .extension-toc {
        height: 100px;  /* Match footer expanded height — eliminates 12px gap */
    }
}
/* END CLEAN-FIX-PHASE8A-R3-TOC-MD-BROAD */

/* START CLEAN-FIX-PHASE8A-GATE-EXT-MD-SINGLE */
/* CORRECTED Round 2: Carousel container at MD-thin (768-819px)
   Round 1 bug: flex: 0 1 auto caused height collapse → mockups invisible
   Root cause: flex-direction: column parent with height: auto + child flex: 0 1 auto
   creates circular reference — children with height: 100% resolve to 0px
   To revert: Delete everything between START and END markers */
@media (min-width: 768px) and (max-width: 819px) {
    /* Carousel container — CORRECTED: flex: 1 to grow and fill column parent */
    .main-media-display {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: row;        /* Explicit row direction for carousel slides */
        justify-content: flex-start;
        overflow: hidden;           /* Clip non-active slides */
        flex: 1 1 0px;              /* CORRECTED: 0px not 0% — avoids %-of-auto ambiguity in column flex */
        min-height: 0;              /* Enable flex shrinking below content */
        padding-bottom: var(--spacing-6); /* SM-matching: gap above thumbnail strip */
    }

    /* Carousel slides — each 100% width for translateX positioning */
    .main-media-display .artifact-mockup {
        flex: 0 1 100%;
        min-width: 100%;            /* Forces single-slide display */
        min-height: 0;              /* SM-matching: enable flex shrink */
        width: 100%;
        height: 100%;
        max-height: none;           /* CLEAN-FIX-PHASE8A-MOCKUP-UNCAP: Override LG 300px cap (line 1793) for carousel. Specificity (0,2,0) beats LG (0,1,0) */
        transition: transform 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        box-sizing: border-box;
    }

    /* Media inside carousel — maximize size, preserve aspect ratio */
    .main-media-display .artifact-media {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
}
/* END CLEAN-FIX-PHASE8A-GATE-EXT-MD-SINGLE */

/* SM Breakpoint - Large Phones/Small Tablets */
@media (max-width: 767px) {
    /* CLEAN-FIX-PHASE7-BOTTOMS-UP-SM-VARS-START */
    /* SM stack variables: TOC 90px, Footer 90px → total 270px (72+12+6+90+90) */
    :root {
        --stack-toc: 90px;
        --stack-footer: 90px;
        /* --total-stack auto-recalculates to 270px */
    }
    /* CLEAN-FIX-PHASE7-BOTTOMS-UP-SM-VARS-END */

    /* CLEAN-FIX-PHASE8-SELECTOR-FIX: Changed .v3-toc-container to .toc-container */
    .toc-container {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-12);
    }

    /* CLEAN-FIX-PHASE8-TOC-HEIGHT-SM-START */
    /* SM: 90px - MATCHES expanded footer height for visual symmetry
       Footer expanded SM: 90px (footer-v3.css line 942)
       Desktop inherits 88px (close but not exact match)
       90px creates perfect height symmetry with footer
       To revert: Delete between START/END markers */
    .extension-toc {
        height: 90px;
    }
    /* CLEAN-FIX-PHASE8-TOC-HEIGHT-SM-END */

    /* CLEAN-FIX-PHASE7-BOTTOMS-UP-PREVIEW-HEIGHT-SM-START */
    /* SM: Viewport-relative height using CSS variables
       Replaces fixed 480px with dynamic calc(100dvh - var(--total-stack))
       --total-stack = 270px at SM (72 + 12 + 6 + 90 + 90)
       Fallback vh for older browsers
       To revert: Replace with height: 480px */
    .v3-preview-container.active {
        height: calc(100vh - var(--total-stack));   /* Fallback */
        height: calc(100dvh - var(--total-stack));  /* Modern */
    }

    /* Apply same to case/contact preview sections */
    .case-preview-section.active,
    .contact-preview-section.active {
        height: calc(100vh - var(--total-stack));   /* Fallback */
        height: calc(100dvh - var(--total-stack));  /* Modern */
        display: flex;
        flex-direction: column;
    }
    /* CLEAN-FIX-PHASE7-BOTTOMS-UP-PREVIEW-HEIGHT-SM-END */

    /* CLEAN-FIX-PHASE8-SELECTOR-FIX: Changed .v3-preview-media to .preview-media */
    .v3-preview-media {
        grid-template-columns: 1fr;
    }

    /* CLEAN-FIX-PHASE8-CONTACT-ABBREV-START */
    /* XS/SM: Show abbreviated action labels (VISIT, SEND, VIEW), hide full titles */
    /* To revert: Delete between START/END markers */
    .contact-label-full {
        display: none;
    }
    .contact-label-abbrev {
        display: block;
        font-size: var(--font-size-small);
        color: var(--light);
        font-weight: 600;
    }
    /* CLEAN-FIX-PHASE8-CONTACT-ABBREV-END */

    /* CLEAN-FIX-PHASE8-EXT-MENU-SM-START */
    /* Fix: Sync extension menu bottom with footer expanded height at SM (90px) */
    /* Root cause: Footer is 90px at SM but menu was fixed at 88px = 2px gap */
    /* To revert: Delete this rule */
    .footer-extension-menu {
        bottom: 90px;
    }
    /* CLEAN-FIX-PHASE8-EXT-MENU-SM-END */

    /* CLEAN-FIX-PHASE8-STAGE2-XS-SM-START */
    /* Stage 2 Preview Responsive - XS/SM only (Dec 11, 2025)
       Modular approach: Layer 1 (V1 Header) + Layer 2 (V4 Thumbnails) + Layer 3 (V2 CTA)
       To revert: Search for CLEAN-FIX-PHASE8-STAGE2-XS-SM and delete between START/END */

    /* === LAYER 1: Header Row - V1 Inline Standard === */
    /* CLEAN-FIX-PHASE8-HEADER-SM-UPDATE-START */
    /* SM: 6n padding with scaled typography for visual hierarchy
       L/R padding: 24px (4×6n) - MUST MATCH CTA ROW for bookend symmetry
       Original padding: 4px 6px - To revert: Change padding to var(--spacing-4) var(--spacing-6)
       Original title: 17.6px - To revert: Change to var(--font-size-large) */
    /* CLEAN-FIX-VERTICAL-SPACING-PHASE2-HEADER-SM-START */
    /* START CLEAN-FIX-PHASE8A-FIX-SM-LAYER-SYMMETRY */
    /* SM Layer 1: 48px max-height (8×6n) with 6px vertical padding
       Root cause: border-box means max-height: 36px - 24px padding = 12px content area → title clips
       Both Layer 1 and Layer 3 must match for visual bookend symmetry
       To revert: Change max-height to 36px, padding to var(--spacing-12) var(--spacing-24) */
    .preview-header-row {
        height: auto;
        min-height: 28px;
        max-height: 48px;
        /* CLEAN-FIX-PHASE8A-PADDING-REDISTRIBUTION: Symmetric 0.9vh top/bottom from parent .case-preview.active
           Medium tier (700-899px height). 0.9vh + 0.9vh = 1.8vh total = same vh budget per row.
           Tall/Short tiers override via height queries below SM closing brace.
           To revert: Change padding back to var(--spacing-6) var(--spacing-24) */
        padding: 0.9vh var(--spacing-24);
    }
    /* CLEAN-FIX-VERTICAL-SPACING-PHASE2-HEADER-SM-END */

    /* !important required: Desktop uses 56px !important (line 482)
       Alternatives: Refactor desktop cascade (risky), higher specificity (brittle)
       This is the safest override approach */
    .preview-number {
        font-size: var(--font-size-standard) !important;  /* 14.4px - supportive */
        font-weight: 600;
        line-height: 1;
    }

    .preview-title {
        font-size: calc(var(--font-size-huge) * 0.6) !important;  /* 28.8px - scaled from 48px */
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .preview-subtitle {
        font-size: var(--font-size-standard) !important;  /* 14.4px - was missing! */
        line-height: 1;
    }

    .header-divider {
        width: 2px !important;   /* Reduced from 6px */
        height: 14px !important; /* Reduced from 40px */
        margin: 0 var(--spacing-6) !important;
    }
    /* CLEAN-FIX-PHASE8-HEADER-TYPOGRAPHY-SM-END */

    /* === LAYER 2: Media Container - V4 Thumbnail Strip === */
    /* CLEAN-FIX-VERTICAL-SPACING-PHASE1-SM-START */
    /* Step 1.1/1.3: Removed min-height and gap constraints to eliminate phantom vertical space
       Original: min-height: min(400px, 50vh); gap: var(--spacing-6);
       To revert: Restore min-height and gap values above */
    .preview-media-container {
        flex: 1 1 0px;   /* CLEAN-FIX-PHASE8A-FIX-MEDIA-FLEX: 0px basis for consistent flex fill (was 1 1 auto) */
        height: auto;
        min-height: 0; /* CLEAN-FIX-VERTICAL-SPACING: was min(400px, 50vh) */
        /* CLEAN-FIX-VERTICAL-STACK: Removed max-height to allow flex fill - was: max-height: min(450px, 60vh); */
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* CLEAN-FIX-ROUND4: Top-down stacking - media at top, thumbnails below (was: flex-end) */
        gap: 0; /* CLEAN-FIX-VERTICAL-SPACING: was var(--spacing-6) - now using padding instead */
        overflow: hidden;
        padding: 0;
    }
    /* CLEAN-FIX-VERTICAL-SPACING-PHASE1-SM-END */

    /* CLEAN-FIX-PHASE8-BOTTOMS-UP-SM-THUMBNAIL-START */
    /* Step 3.7: Explicit thumbnail strip height for SM
       Original: flex-shrink: 0 with auto height
       Fix: 48px = 40px item + 8px padding (prevents flex squeeze)
       To revert: Remove flex and height lines, restore flex-shrink: 0 */
    /* CLEAN-FIX-VERTICAL-SPACING-PHASE2-THUMBNAIL-SM-START */
    /* Step 2.4: Added top padding for gap below main media display
       Original: padding: 0 var(--spacing-6) - To revert: Remove top padding */
    .thumbnail-strip {
        display: flex;
        gap: var(--spacing-4);
        justify-content: center;
        /* START CLEAN-FIX-PHASE8A-REBUILD-THUMBNAIL-FIT */
        /* Thumbnail padding fit: 4px top/bottom fits 40px items in 48px strip (40 + 4 + 4 = 48)
           Previous: var(--spacing-6) all sides = 6px × 2 = 12px vertical → 40 + 12 = 52px overflow
           To revert: Restore padding: var(--spacing-6) */
        padding: 4px var(--spacing-6);
        /* END CLEAN-FIX-PHASE8A-REBUILD-THUMBNAIL-FIT */
        overflow-x: auto;
        flex: 0 0 48px;
        height: 48px;
        /* START CLEAN-FIX-PHASE8A-ORB-COVERAGE */
        /* Opaque blocker — cascades from MD-thin, reinforced here for SM specificity.
           box-shadow paints upward into .main-media-display padding-bottom gap.
           To revert: Delete between START and END CLEAN-FIX-PHASE8A-ORB-COVERAGE markers */
        background: var(--darkest);
        position: relative;
        z-index: 2;
        /* box-shadow Y-offset MUST match .main-media-display padding-bottom (--spacing-6 = 6px) */
        box-shadow: 0 -6px 0 0 var(--darkest);
        /* END CLEAN-FIX-PHASE8A-ORB-COVERAGE */
    }
    /* CLEAN-FIX-VERTICAL-SPACING-PHASE2-THUMBNAIL-SM-END */
    /* CLEAN-FIX-PHASE8-BOTTOMS-UP-SM-THUMBNAIL-END */

    .thumbnail-item {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        border: 2px solid var(--dark);
        border-radius: 0;  /* Brutalist design - sharp edges */
        overflow: hidden;
        cursor: pointer;
        opacity: 0.4;  /* CLEAN-FIX-PHASE8-CAROUSEL-TIMER: Reduced from 0.6 for clearer active/inactive distinction */
        display: flex;
        align-items: center;
        justify-content: center;
        /* REVERTED: Thumbnail background restored to var(--darkest)
           Task 1 addresses orb visibility at asset level, not thumbnail level */
        background: var(--darkest);
        position: relative;  /* CLEAN-FIX-PHASE8-CAROUSEL-TIMER: For pseudo-element positioning */
        transition: opacity 0.2s ease;
    }

    /* CLEAN-FIX-PHASE8-CAROUSEL-TIMER-START */
    /* Multi-layer active thumbnail state:
       Layer 1: Full opacity (inactive = 40%, active = 100%)
       Layer 2: --warm border as immediate active indicator
       Layer 3: Accent color progress overlay via conic-gradient
       To revert: Delete between START/END markers */

    .thumbnail-item.active {
        opacity: 1;  /* Full visibility when active */
        border-color: var(--warm);  /* Immediate warm indicator on activation */
        overflow: visible;  /* Allow ::before to extend beyond bounds for border wrap effect */
    }

    /* Progress overlay - accent color draws over warm border via conic-gradient
       Creates a hollow ring effect using mask to only show the border area */
    .thumbnail-item.active::before {
        content: '';
        position: absolute;
        inset: -2px;  /* Align with border */
        /* Timer progress gradient: fills clockwise from 0% to progress%
           Color fills from start, transparent fills remainder */
        background: conic-gradient(
            from 0deg,
            var(--timer-color, var(--warm)) var(--timer-progress, 0%),
            transparent var(--timer-progress, 0%)
        );
        /* Hollow ring mask: show outer edge (border area), hide inner content */
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        padding: 2px;  /* This creates the 2px ring thickness */
        z-index: 10;  /* Above thumbnail content */
        pointer-events: none;
        /* Sharp corners - Brutalist aesthetic */
        /* START CLEAN-FIX-PHASE8A-GATE-EXT-PROGRESS-DIR */
        /* Counter-clockwise fill: scaleX(-1) mirrors the clockwise conic-gradient
           To revert: Delete the transform: scaleX(-1) line */
        transform: scaleX(-1);
        /* END CLEAN-FIX-PHASE8A-GATE-EXT-PROGRESS-DIR */
    }

    /* Case-specific accent colors for timer progress */
    .case-preview[data-case="01"] .thumbnail-item.active { --timer-color: var(--blue); }
    .case-preview[data-case="02"] .thumbnail-item.active { --timer-color: var(--pink); }
    .case-preview[data-case="03"] .thumbnail-item.active { --timer-color: var(--purple); }
    .case-preview[data-case="04"] .thumbnail-item.active { --timer-color: var(--white); }

    .contact-preview[data-contact="linkedin"] .thumbnail-item.active { --timer-color: var(--magenta); }
    .contact-preview[data-contact="calendar"] .thumbnail-item.active { --timer-color: var(--cool); }
    .contact-preview[data-contact="email"] .thumbnail-item.active { --timer-color: var(--teal); }
    .contact-preview[data-contact="resume"] .thumbnail-item.active { --timer-color: var(--warm); }
    /* CLEAN-FIX-PHASE8-CAROUSEL-TIMER-END */

    /* CLEAN-FIX-PHASE8-ASSET-BG-TRANSPARENT-START */
    /* Root cause fix: Desktop .artifact-mockup has background: var(--dark) (line 726)
       This blocks orb visibility. Cannot edit desktop rule - needed for hover effects.
       Responsive override clears background to reveal orb animation behind assets.
       To revert: Delete between START/END markers */
    .artifact-mockup {
        background: transparent;
    }
    /* CLEAN-FIX-PHASE8-ASSET-BG-TRANSPARENT-END */

    /* START CLEAN-FIX-PHASE8A-GLOW-SM-CLEAR */
    /* Remove desktop ::after glow border (base rule line 821) from carousel mockups
       content: none prevents pseudo-element generation entirely — more performant than display: none
       Glow is a hover effect not needed for carousel touch/swipe interaction
       To revert: Delete between START and END markers */
    .artifact-mockup::after {
        content: none;
    }
    /* END CLEAN-FIX-PHASE8A-GLOW-SM-CLEAR */

    /* START CLEAN-FIX-PHASE8A-ORB-SM-CONSTRAIN */
    /* SM/XS orb animation: X -25% to 65%, Y -15% to 55% (Phase 8A.3b widened coverage)
       Root cause: translate() percentages reference ELEMENT's own size (400px orb), not container.
       X: -25% to 65% = -100px to 260px offset → 360px sweep (2.25× wider than original 0%-40%)
       Y: -15% to 55% = -60px to 220px offset → 280px sweep (1.4× wider than original 5%-55%)
       Negative values go off-edge but overflow:hidden clips — glow still visible from orb body inside container.
       Glow bleaching into thumbnail-strip handled by opaque blocker (CLEAN-FIX-PHASE8A-ORB-COVERAGE).
       @keyframes inside @media is valid CSS (Chrome 1+, Firefox 16+, Safari 4+, Edge 12+)
       To revert: Restore translate(0%, 5%), translate(40%, 5%), translate(40%, 55%), translate(0%, 55%) */
    @keyframes orb-drift-sm {
        0%, 100% { transform: translate(-25%, -15%); }
        25%      { transform: translate(65%, -15%); }
        50%      { transform: translate(65%, 55%); }
        75%      { transform: translate(-25%, 55%); }
    }
    .preview-media-container::before {
        animation-name: orb-drift-sm;
    }
    /* END CLEAN-FIX-PHASE8A-ORB-SM-CONSTRAIN */

    /* === LAYER 3: CTA Row - V2 70/30 Primary Dominant === */
    /* CLEAN-FIX-PHASE8-CTA-SM-UPDATE-START */
    /* CTA row: Height + padding MUST match header row for bookend symmetry
       Header SM: height auto, min 28px, max 36px, padding: 12px 24px
       Original CTA: height 48px, padding 6px 8px - To revert: Restore 48px height
       Matches header row for visual alignment */
    /* CLEAN-FIX-VERTICAL-SPACING-PHASE2-CTA-SM-START */
    /* SM Layer 3: 48px max-height to match Layer 1 for bookend symmetry
       Root cause: border-box means max-height: 36px - 24px padding = 12px → 36px buttons overflow
       Fix: 6px + 36px + 6px = 48px — exact fit for buttons within border-box
       To revert: Change max-height to 36px, padding to var(--spacing-12) var(--spacing-24) */
    .preview-cta-row {
        height: auto;
        min-height: 28px;
        max-height: 48px;
        /* CLEAN-FIX-PHASE8A-PADDING-REDISTRIBUTION: Symmetric 0.9vh top/bottom from parent .case-preview.active
           Medium tier (700-899px height). 0.9vh + 0.9vh = 1.8vh total = same vh budget per row.
           To revert: Change padding back to var(--spacing-6) var(--spacing-24) */
        padding: 0.9vh var(--spacing-24);
        align-items: center;
    }
    /* END CLEAN-FIX-PHASE8A-FIX-SM-LAYER-SYMMETRY */
    /* CLEAN-FIX-VERTICAL-SPACING-PHASE2-CTA-SM-END */
    /* CLEAN-FIX-PHASE8-CTA-SM-UPDATE-END */

    /* KEY FIX: Reset padding-top: 6px from base .cta-left (line 830) */
    /* Using cascade order - this rule comes AFTER base rule, same specificity wins */
    .cta-left,
    .cta-right {
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cta-left {
        flex: 2 1 66%;
    }

    .cta-right {
        flex: 1 1 33%;
    }

    .preview-btn,
    .request-writeup-btn {
        width: 100%;
        height: 36px;
        min-height: 36px;
        max-height: 36px;
        margin: auto 0;
    }

    .preview-btn {
        font-size: var(--font-size-small);  /* 12.8px */
    }

    .request-writeup-btn {
        font-size: var(--font-size-specialized);  /* 10.4px */
        opacity: 0.7;
    }

    /* Contact previews: Hide secondary CTA */
    .contact-preview .cta-right {
        display: none;
    }

    .contact-preview .cta-left {
        flex: 1 1 100%;
    }

    /* CLEAN-FIX-PHASE5-CONTACT-PADDING-START */
    /* Step 5.1: 6n internal padding for contact preview media container
       Adds vertical spacing WITHIN layer 2 (not between layers)
       Aligns with v3 design system 6n spacing rhythm
       To revert: Delete between START/END markers */
    .contact-preview .preview-media-container {
        padding-top: var(--spacing-6);      /* 6px internal top padding */
        padding-bottom: var(--spacing-6);   /* 6px internal bottom padding */
    }
    /* CLEAN-FIX-PHASE5-CONTACT-PADDING-END */

    /* CLEAN-FIX-PHASE8-BOTTOMS-UP-SM-TOC-TRANSLATE-START */
    /* Step 3.4: Viewport-relative TOC translateY for SM
       CLEAN-FIX-VERTICAL-STACK: Now uses var(--total-stack) for auto-calculation
       Original hardcoded: 286px
       New: var(--total-stack) = 270px at SM (72 + 12 + 6 + 90 + 90)
       TOC.bottom = Preview.top (flush positioning)
       To revert: Change var(--total-stack) back to 286px */
    .extension-toc.preview-active,
    .extension-toc.contact-preview-active {
        transform: translateY(calc(-100vh + var(--total-stack)));
        transform: translateY(calc(-100dvh + var(--total-stack))); /* Modern: dvh for mobile Safari */
    }
    /* CLEAN-FIX-PHASE8-BOTTOMS-UP-SM-TOC-TRANSLATE-END */

    /* CLEAN-FIX-PHASE8-STAGE2-CAROUSEL-CSS-START */
    /* Carousel container styles for XS/SM thumbnail navigation
       Created by initMobileCarousel() in V3FooterExtensionsClean.js
       To revert: Delete between START/END markers */
    /* CLEAN-FIX-VERTICAL-SPACING-PHASE2-MAIN-MEDIA-START */
    /* Step 2.3: Added padding-bottom for gap above thumbnail strip
       Original: no padding - To revert: Remove padding-bottom line */
    /* CLEAN-FIX-ROUND3-MAIN-MEDIA-FLEX-START */
    /* Step 2: Change flex from 1 to 0 0 auto - size to content, don't grow
       Root cause: flex: 1 made main-media expand to fill all space
       Phone mockup then centered within that expanded space = phantom gaps
       Fix: flex: 0 0 auto = don't grow, don't shrink, size based on content
       To revert: Change back to flex: 1 */
    /* START CLEAN-FIX-PHASE8A-LOCK-SM-MEDIA-FLEX */
    /* SM: Changed flex from 0 1 auto → 1 1 0px to prevent tall mockups from pushing thumbnails off-screen
       0px basis = start at zero height, grow to fill remaining space AFTER thumbnail-strip's 48px
       min-height: 0 + overflow: hidden already present — content properly constrained
       XS has defensive override (see XS block) to prevent cascade collapse
       To revert: Change flex back to 0 1 auto AND delete XS .main-media-display override */
    .main-media-display {
        position: relative;
        width: 100%;
        flex: 1 1 0px;   /* CLEAN-FIX-PHASE8A-LOCK: Grow to fill, 0px basis (was: 0 1 auto) */
        min-height: 0;   /* CLEAN-FIX-ROUND5: Enable shrinking below content size (flexbox gotcha fix) */
        display: flex;
        justify-content: flex-start;
        overflow: hidden;
        padding-bottom: var(--spacing-6); /* CLEAN-FIX-VERTICAL-SPACING: 6px gap above thumbnail strip */
    }
    /* END CLEAN-FIX-PHASE8A-LOCK-SM-MEDIA-FLEX */
    /* CLEAN-FIX-VERTICAL-SPACING-PHASE2-MAIN-MEDIA-END */

    /* Carousel slides - each mockup takes 100% width */
    /* CLEAN-FIX-ROUND8-ARTIFACT-MOCKUP-SIZING-START */
    /* Round 8: REVERTED Round 7 - Restore carousel functionality
       Round 7 broke carousel by setting min-width: 0 + height: auto
       This caused multiple slides to appear side-by-side instead of 1 at a time
       Fix: Restore min-width: 100% + height: 100% for translateX(-100%) slide animations
       To revert: This IS the revert of Round 7. To restore Round 7, change min-width to 0, height to auto */
    .main-media-display .artifact-mockup {
        flex: 0 1 100%;  /* CLEAN-FIX-ROUND6: CAN shrink */
        min-height: 0;   /* CLEAN-FIX-ROUND6: Enable shrinking below content size */
        min-width: 100%; /* CLEAN-FIX-ROUND8: Restored for carousel translateX(-100%) */
        width: 100%;
        height: 100%;    /* CLEAN-FIX-ROUND8: Restored for carousel structure */
        max-height: none; /* CLEAN-FIX-PHASE8A-MOCKUP-UNCAP: Override LG 300px cap for carousel */
        transition: transform 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        box-sizing: border-box;
    }
    /* CLEAN-FIX-ROUND8-ARTIFACT-MOCKUP-SIZING-END */

    /* Media inside carousel - maximize size, preserve aspect ratio */
    .main-media-display .artifact-media {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    /* CLEAN-FIX-PHASE8-STAGE2-CAROUSEL-CSS-END */

    /* CLEAN-FIX-PHASE8-STAGE2-XS-SM-END */
}

/* XS Breakpoint - Mobile Phones */
@media (max-width: 599px) {
    /* CLEAN-FIX-PHASE7-BOTTOMS-UP-XS-VARS-START */
    /* XS stack variables: TOC 60px, Footer 60px → total 210px (72+12+6+60+60) */
    :root {
        --stack-toc: 60px;
        --stack-footer: 60px;
        /* --total-stack auto-recalculates to 210px (includes 6px buffer) */
    }
    /* CLEAN-FIX-PHASE7-BOTTOMS-UP-XS-VARS-END */

    /* CLEAN-FIX-PHASE8-SELECTOR-FIX: Changed .v3-extension-toc to .extension-toc */
    /* CLEAN-FIX-PHASE8-TOC-HEIGHT-XS-START */
    /* XS: 60px - MATCHES expanded footer height for visual symmetry
       Footer expanded XS: 60px (footer-v3.css line 1016)
       Original: 120px - To revert: Change height back to 120px
       Clip-path: 3%/97% matches footer's 3%/97% top edge (perfect inverse) */
    .extension-toc {
        height: 60px;
        clip-path: polygon(0% 0, 100% 0, 97% 100%, 3% 100%);  /* Preserved: 3%/97% matches footer edge */
    }
    /* CLEAN-FIX-PHASE8-TOC-HEIGHT-XS-END */

    /* CLEAN-FIX-PHASE8-SELECTOR-FIX: Changed .v3-toc-container to .toc-container */
    .toc-container {
        grid-template-columns: 1fr;
    }

    /* START CLEAN-FIX-8A-B1-FOOTER-PORT — XS TOC Abbreviations
       Ported from iframe-footer-flow.html (CLEAN-FIX-PHASE8-TOC-ABBREVIATIONS)
       Shows abbreviated case names instead of full titles at XS (max-width: 599px)
       Uses font-size: 0 to hide original text, ::after pseudo-elements for abbreviations
       To revert: Delete everything between START and END CLEAN-FIX-8A-B1-FOOTER-PORT markers */
    .toc-title {
        font-size: 0;  /* Hide original text at XS */
        line-height: 0;
    }
    .toc-title::after {
        font-size: var(--font-size-small);
        line-height: 1.3;
        font-weight: 600;
        color: var(--light);
        text-transform: uppercase;
        letter-spacing: var(--letter-spacing-normal);  /* Design system token: 0.5px */
    }
    /* Case-specific abbreviations — sourced from projectsData.js case IDs */
    [data-case="01"] .toc-title::after { content: "4D°"; }
    [data-case="02"] .toc-title::after { content: "H+M"; }
    [data-case="03"] .toc-title::after { content: "S♡F"; }
    [data-case="04"] .toc-title::after { content: "M~T"; }
    /* END CLEAN-FIX-8A-B1-FOOTER-PORT */

    /* CLEAN-FIX-PHASE7-BOTTOMS-UP-PREVIEW-HEIGHT-XS-START */
    /* XS: Viewport-relative height using CSS variables
       Replaces fixed 400px with dynamic calc(100dvh - var(--total-stack))
       --total-stack = 204px at XS (72 + 12 + 60 + 60)
       Fallback vh for older browsers
       To revert: Replace with height: 400px */
    .v3-preview-container.active {
        height: calc(100vh - var(--total-stack));   /* Fallback */
        height: calc(100dvh - var(--total-stack));  /* Modern */
    }

    /* Apply same to case/contact preview sections */
    .case-preview-section.active,
    .contact-preview-section.active {
        height: calc(100vh - var(--total-stack));   /* Fallback */
        height: calc(100dvh - var(--total-stack));  /* Modern */
        display: flex;
        flex-direction: column;
    }
    /* CLEAN-FIX-PHASE7-BOTTOMS-UP-PREVIEW-HEIGHT-XS-END */

    /* CLEAN-FIX-ROUND4-PREVIEW-FLEX-START */
    /* Fix: Top-down flex stacking for XS viewport
       Root cause: flex-end was pushing ALL children to bottom, clipping header at top
       With Round 1 position fix (bottom: 0), container is correctly sized
       Now flex-start allows natural top-down flow: Header → Media → CTA
       Previous: justify-content: flex-end [CLEAN-FIX-ROUND3 - FAILED]
       To revert: Change flex-start back to flex-end */
    .case-preview.active,
    .contact-preview.active {
        justify-content: flex-start;  /* CLEAN-FIX-ROUND4: Stack children from TOP */
    }
    /* CLEAN-FIX-ROUND4-PREVIEW-FLEX-END */

    /* CLEAN-FIX-PHASE8-EXT-MENU-XS-START */
    /* Fix: Sync extension menu bottom with footer expanded height at XS (60px) */
    /* Root cause: Footer is 60px at XS but menu was fixed at 88px = 28px mismatch */
    /* To revert: Delete this rule */
    .footer-extension-menu {
        bottom: 60px;
    }
    /* CLEAN-FIX-PHASE8-EXT-MENU-XS-END */

    /* CLEAN-FIX-PHASE8-PREVIEW-WIDTH-XS-START */
    /* XS: Widen preview from 92% to 94% to match TOC/footer clip-path edges (3%/97%)
       TOC clip-path: polygon(0% 0, 100% 0, 97% 100%, 3% 100%) = 94% bottom edge
       Footer expanded: polygon(3% 0, 97% 0, 100% 100%, 0% 100%) = 94% top edge
       To revert: Delete between START/END markers */
    /* CLEAN-FIX-ROUND4-PREVIEW-POSITION-START */
    /* Fix: Remove double-offset on preview section positioning
       Root cause: Parent .footer-extension-menu already has bottom: 60px
       Child's bottom: 60px was RELATIVE to parent = 120px total gap
       Fix: bottom: 0 = flush with parent (parent handles footer offset)
       Previous: bottom: var(--stack-footer) [CLEAN-FIX-ROUND3 - FAILED]
       To revert: Change bottom: 0 back to bottom: var(--stack-footer) */
    .case-preview-section,
    .contact-preview-section {
        width: 94% !important;  /* Match 3%/97% clip-path edges (was 92% via 4%/4%) */
        left: 3% !important;
        right: 3% !important;
        bottom: 0;  /* CLEAN-FIX-ROUND4: Flush with parent - parent handles footer offset */
    }
    /* CLEAN-FIX-ROUND4-PREVIEW-POSITION-END */
    /* CLEAN-FIX-PHASE8-PREVIEW-WIDTH-XS-END */

    /* CLEAN-FIX-PHASE8-BOTTOMS-UP-XS-TOC-TRANSLATE-START */
    /* Step 3.6: Viewport-relative TOC translateY for XS
       CLEAN-FIX-VERTICAL-STACK: Now uses var(--total-stack) for auto-calculation
       Original hardcoded: 214px
       New: var(--total-stack) = 210px at XS (72 + 12 + 6 + 60 + 60)
       TOC.bottom = Preview.top (flush positioning)
       To revert: Change var(--total-stack) back to 214px */
    .extension-toc.preview-active,
    .extension-toc.contact-preview-active {
        transform: translateY(calc(-100vh + var(--total-stack)));
        transform: translateY(calc(-100dvh + var(--total-stack))); /* Modern: dvh for mobile Safari */
    }
    /* CLEAN-FIX-PHASE8-BOTTOMS-UP-XS-TOC-TRANSLATE-END */

    /* CLEAN-FIX-PHASE8-STAGE2-XS-START */

    /* CLEAN-FIX-PHASE8-HEADER-XS-UPDATE-START */
    /* XS: Scaled down but title still dominant in hierarchy
       L/R padding: 18px (3×6n) - MUST MATCH CTA ROW for bookend symmetry
       Original padding: 2px 4px - To revert: Change to var(--spacing-2) var(--spacing-4)
       Original title: 14.4px - To revert: Change to var(--font-size-standard) */
    /* CLEAN-FIX-VERTICAL-SPACING-PHASE2-HEADER-XS-START */
    /* Step 2.1: Increased top/bottom padding from 6px to 12px for proper vertical spacing
       Original: var(--spacing-6) = 6px - To revert: Change back to var(--spacing-6) */
    /* CLEAN-FIX-ROUND8-LAYER1-MAXHEIGHT-START
       Changed max-height from 32px to none to allow full padding visibility
       Original: max-height: 32px - To revert: Change max-height to 32px */
    /* START CLEAN-FIX-PHASE8A-FIX-XS-LAYER-SYMMETRY */
    /* XS Layer 1: Matched sizing to Layer 3 — min 32px, padding 6px 18px
       Audit: Layer 1 was 50.6px (24px min + 24px padding), Layer 3 was 44.6px (32px min + 12px padding)
       Fix: Both at 44.6px rendered (32px min + 12px padding + 0.6px border)
       To revert: Restore min-height: 24px + padding: var(--spacing-12) var(--spacing-18) */
    .preview-header-row {
        min-height: 32px;
        max-height: none;
        /* CLEAN-FIX-PHASE8A-PADDING-REDISTRIBUTION: Symmetric 0.9vh top/bottom from parent
           Medium tier (700-899px). To revert: Change padding to var(--spacing-6) var(--spacing-18) */
        padding: 0.9vh var(--spacing-18);
    }
    /* CLEAN-FIX-ROUND8-LAYER1-MAXHEIGHT-END */
    /* CLEAN-FIX-VERTICAL-SPACING-PHASE2-HEADER-XS-END */

    /* !important required: Desktop uses 56px !important (line 482) */
    .preview-number {
        font-size: var(--font-size-small) !important;  /* 12.8px - supportive */
    }

    /* CLEAN-FIX-PHASE8-TITLE-26PX: Updated from 17.6px to 26px per user selection */
    .preview-title {
        font-size: calc(var(--font-size-huge) * 0.54) !important;  /* 26px - user selected larger size for XS */
    }

    .header-divider {
        height: 12px !important; /* Shorter for XS */
    }
    /* CLEAN-FIX-PHASE8-HEADER-XS-UPDATE-END */

    /* Hide subtitle on XS to maximize media space */
    .preview-subtitle,
    .header-right {
        display: none;
    }

    /* CLEAN-FIX-VERTICAL-SPACING-PHASE1-XS-START */
    /* Step 1.1/1.3: Removed min-height and gap constraints to eliminate phantom vertical space
       Original: min-height: min(350px, 45vh); gap: var(--spacing-4);
       To revert: Restore min-height and gap values above */
    /* CLEAN-FIX-ROUND8-LAYER2-NOFLEX: Added flex: 0 1 auto to prevent container from growing
       Original: inherited flex: 1 1 auto from SM - To revert: Remove flex line */
    /* CLEAN-FIX-PHASE8A-FIX-MEDIA-FLEX: XS Layer 2 must GROW to fill remaining space
       Root cause: flex: 0 1 auto refused to grow → visible dead space gap below Layer 3
       Fix: flex: 1 1 0px = grows into remaining viewport height after Layers 1+3 take their share
       To revert: Restore flex: 0 1 auto */
    .preview-media-container {
        flex: 1 1 0px;
        min-height: 0; /* CLEAN-FIX-VERTICAL-SPACING: was min(350px, 45vh) */
        /* CLEAN-FIX-VERTICAL-STACK: Removed max-height to allow flex fill - was: max-height: min(400px, 55vh); */
        gap: 0; /* CLEAN-FIX-VERTICAL-SPACING: was var(--spacing-4) - now using padding instead */
    }
    /* CLEAN-FIX-VERTICAL-SPACING-PHASE1-XS-END */

    /* CLEAN-FIX-PHASE8A-FIX-MEDIA-FLEX: XS main-media-display also grows to fill parent
       Previous defensive override (flex: 0 1 auto) was needed when parent was 0 1 auto (non-growing)
       With parent now flex: 1 1 0px, child should also grow to fill available space
       To revert: Restore flex: 0 1 auto */
    .main-media-display {
        flex: 1 1 0px;   /* Match parent grow behavior — fills Layer 2 (was 0 1 auto defensive override) */
    }
    /* END CLEAN-FIX-PHASE8A-LOCK-SM-MEDIA-FLEX-XS-DEFENSIVE */

    .thumbnail-item {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        /* REVERTED: Thumbnail background restored to var(--darkest)
           Task 1 addresses orb visibility at asset level, not thumbnail level */
        background: var(--darkest);
    }

    /* CLEAN-FIX-PHASE8-BOTTOMS-UP-XS-THUMBNAIL-START */
    /* Step 3.8: Explicit thumbnail strip height for XS
       Original: auto height (inherited from SM)
       Fix: 40px = 32px item + 8px padding (scaled from SM's 48px)
       To revert: Delete lines between START and END markers */
    .thumbnail-strip {
        flex: 0 0 40px;
        height: 40px;
        /* START CLEAN-FIX-PHASE8A-ORB-COVERAGE */
        /* Opaque blocker — cascades from MD-thin, reinforced here for XS specificity.
           box-shadow paints upward into .main-media-display padding-bottom gap.
           To revert: Delete between START and END CLEAN-FIX-PHASE8A-ORB-COVERAGE markers */
        background: var(--darkest);
        position: relative;
        z-index: 2;
        /* box-shadow Y-offset MUST match .main-media-display padding-bottom (--spacing-6 = 6px) */
        box-shadow: 0 -6px 0 0 var(--darkest);
        /* END CLEAN-FIX-PHASE8A-ORB-COVERAGE */
    }
    /* CLEAN-FIX-PHASE8-BOTTOMS-UP-XS-THUMBNAIL-END */

    /* CLEAN-FIX-PHASE8-ASSET-BG-TRANSPARENT-XS-START */
    /* XS: Same root cause fix as SM - asset-level background blocks orb
       To revert: Delete between START/END markers */
    .artifact-mockup {
        background: transparent;
    }
    /* CLEAN-FIX-PHASE8-ASSET-BG-TRANSPARENT-XS-END */

    /* CLEAN-FIX-PHASE5-CONTACT-PADDING-XS-START */
    /* Step 5.1: 6n internal padding for contact preview media container (XS)
       Adds vertical spacing WITHIN layer 2 (not between layers)
       Aligns with v3 design system 6n spacing rhythm
       To revert: Delete between START/END markers */
    .contact-preview .preview-media-container {
        padding-top: var(--spacing-6);      /* 6px internal top padding */
        padding-bottom: var(--spacing-6);   /* 6px internal bottom padding */
    }
    /* CLEAN-FIX-PHASE5-CONTACT-PADDING-XS-END */

    /* CLEAN-FIX-PHASE8-CTA-XS-UPDATE-START */
    /* CTA row: Height + padding for clean button display
       CLEAN-FIX-ROUND8-LAYER3-CTA: Updated from Stack Tuner testing results
       Original: min-height: 24px, max-height: 32px, padding: 12px 18px
       To revert: Restore original values above */
    /* CLEAN-FIX-VERTICAL-SPACING-PHASE2-CTA-XS-START */
    /* XS Layer 3: Matched sizing to Layer 1 — min 32px, padding 6px 18px
       Both layers render at 44.6px (32px min + 12px padding + 0.6px border)
       To revert: Restore min-height: 32px (unchanged), padding: var(--spacing-6) var(--spacing-18) (unchanged) */
    .preview-cta-row {
        height: auto;
        min-height: 32px;
        max-height: none;
        /* CLEAN-FIX-PHASE8A-PADDING-REDISTRIBUTION: Symmetric 0.9vh top/bottom from parent
           Medium tier (700-899px). To revert: Change padding to var(--spacing-6) var(--spacing-18) */
        padding: 0.9vh var(--spacing-18);
        align-items: center;
    }
    /* END CLEAN-FIX-PHASE8A-FIX-XS-LAYER-SYMMETRY */
    /* CLEAN-FIX-VERTICAL-SPACING-PHASE2-CTA-XS-END */
    /* CLEAN-FIX-PHASE8-CTA-XS-UPDATE-END */

    .preview-btn,
    .request-writeup-btn {
        height: 32px;
        min-height: 32px;
        max-height: 32px;
        font-size: var(--font-size-specialized);  /* 10.4px */
    }

    /* CLEAN-FIX-PHASE8-STAGE2-XS-END */
}
/* END CLEAN-FIX-PHASE8-BREAKPOINT-FOOTER-EXT */

/* ================================================
   PHASE 8A.2 — Height-responsive padding tiers
   Width-guarded to ≤991px: only fires at SM/XS where preview uses flex column layout
   Desktop/LG header-row has fixed 72px height — vh padding would compress it
   Medium tier (1.8vh) is the default, set in SM/XS .preview-header-row/.preview-cta-row rules above
   ================================================ */

/* START CLEAN-FIX-PHASE8A-PADDING-TIER-TALL */
/* Tall screens (≥900px height): generous symmetric spacing — 1.2vh per side ≈ 10.8px at 900px
   Total per row: 1.2vh + 1.2vh = 2.4vh. Total section: 4 sides × 1.2vh = 4.8vh.
   To revert: Delete between START and END markers */
@media (max-width: 991px) and (min-height: 900px) {
    .preview-header-row { padding-top: 1.2vh; padding-bottom: 1.2vh; }
    .preview-cta-row { padding-top: 1.2vh; padding-bottom: 1.2vh; }
}
/* END CLEAN-FIX-PHASE8A-PADDING-TIER-TALL */

/* START CLEAN-FIX-PHASE8A-PADDING-TIER-SHORT */
/* Short screens (<700px height): tight symmetric spacing — 0.6vh per side ≈ 4px at 667px
   Total per row: 0.6vh + 0.6vh = 1.2vh. Total section: 4 sides × 0.6vh = 2.4vh.
   Preserves maximum Layer 2 (media) space on compact viewports
   To revert: Delete between START and END markers */
@media (max-width: 991px) and (max-height: 699px) {
    .preview-header-row { padding-top: 0.6vh; padding-bottom: 0.6vh; }
    .preview-cta-row { padding-top: 0.6vh; padding-bottom: 0.6vh; }
}
/* END CLEAN-FIX-PHASE8A-PADDING-TIER-SHORT */

/* CLEAN-FIX-GEOMETRIC-ANIMATIONS-START */
/* Geometric line art animations for contact preview media containers
   To revert: Search for CLEAN-FIX-GEOMETRIC-ANIMATIONS and delete between START/END markers
   Restores: Empty contact preview containers without animations */

/* ================================================
   Contact Visual Container Setup
   ================================================ */

/* CLEAN-FIX-GEOMETRIC-PERSPECTIVE-START */
/* Added perspective for 3D transforms
   To revert: Remove perspective and transform-style properties */
.contact-visual {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    perspective: 1000px;  /* Enable 3D perspective for child elements */
    transform-style: preserve-3d;  /* Preserve 3D transformations */
}
/* CLEAN-FIX-GEOMETRIC-PERSPECTIVE-END */

/* CLEAN-FIX-GEOMETRIC-ASPECT-START */
/* 16:9 aspect ratio container within 320px height
   Width = 320px * (16/9) = ~569px, but constrained by container */
/* CLEAN-FIX-GEOMETRIC-COLORS-VERTICAL-START */
/* Changed height from 280px to 100% to fill container completely
   To revert: Change back to height: 280px */
/* CLEAN-FIX-GEOMETRIC-COMPLEXITY-POSITION-START */
/* Previous attempt: height: 100% - FAILED for gradient backgrounds
   Gradients don't respect percentage heights, they size to content
   New approach: Absolute positioning to create structural box
   To revert: Delete between START/END and restore height: 100% */
.contact-animation-linkedin,
.contact-animation-calendar,
.contact-animation-email,
.contact-animation-resume {
    width: min(569px, 90%);
    /* height: 100% - REMOVED: doesn't work for gradient backgrounds */
    position: absolute; /* Changed from relative to absolute */
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    bottom: 0;
    min-height: 100%;
    display: flex;
    /* CLEAN-FIX-BOTTOM-GAPS-START */
    /* Removed center alignment to allow animations to fill from top
       This fixes bottom gaps in Calendar and Resume animations
       To revert: Uncomment the two lines below */
    /* align-items: center; */
    /* justify-content: center; */
    align-items: flex-start;  /* Align to top instead of center */
    justify-content: center;  /* Keep horizontal centering */
    /* CLEAN-FIX-BOTTOM-GAPS-END */
}
/* CLEAN-FIX-GEOMETRIC-COMPLEXITY-POSITION-END */
/* CLEAN-FIX-GEOMETRIC-COLORS-VERTICAL-END */
/* CLEAN-FIX-GEOMETRIC-ASPECT-END */

/* ================================================
   LinkedIn: Wireframe Cube Animation
   ================================================ */

/* CLEAN-FIX-GEOMETRIC-SCALE-START */
/* Scaled up cube for better visibility in container
   To revert: Change back to 120px dimensions and 2px borders */
/* CLEAN-FIX-GEOMETRIC-COLORS-LINKEDIN-START */
/* Applied magenta color theme to LinkedIn animation
   To revert: Change var(--magenta) back to var(--cool) */
.contact-animation-linkedin::before,
.contact-animation-linkedin::after {
    content: '';
    position: absolute;
    width: 240px;  /* Doubled from 120px */
    height: 240px; /* Doubled from 120px */
    border: 3px solid var(--magenta); /* Changed from cool to magenta */
    background: transparent;
}

.contact-animation-linkedin::before {
    transform: rotateX(45deg) rotateY(45deg);
    animation: cubeRotate 8s linear infinite;
}

.contact-animation-linkedin::after {
    transform: rotateX(45deg) rotateY(45deg) translateZ(120px); /* Doubled from 60px */
    animation: cubeRotate 8s linear infinite reverse;
    border-color: var(--white); /* Changed from light to white for contrast */
    opacity: 0.5;
}
/* CLEAN-FIX-GEOMETRIC-COLORS-LINKEDIN-END */
/* CLEAN-FIX-GEOMETRIC-SCALE-END */

@keyframes cubeRotate {
    0% { transform: rotateX(45deg) rotateY(45deg); }
    100% { transform: rotateX(45deg) rotateY(405deg); }
}

/* CLEAN-FIX-GEOMETRIC-COLORS-LINKEDIN-PATTERN-START */
/* Additional cubes for LinkedIn visual complexity
   To revert: Delete between START/END markers */
.contact-visual-linkedin::before,
.contact-visual-linkedin::after {
    content: '';
    position: absolute;
    width: 120px;  /* Smaller cubes for pattern */
    height: 120px;
    border: 2px solid var(--magenta);
    background: transparent;
    opacity: 0.3;
}

.contact-visual-linkedin::before {
    transform: translate(-150px, -80px) rotateX(45deg) rotateY(45deg);
    animation: cubeRotate 12s linear infinite reverse;
}

.contact-visual-linkedin::after {
    transform: translate(150px, 80px) rotateX(45deg) rotateY(45deg);
    animation: cubeRotate 10s linear infinite;
}

/* Additional cube elements for grid pattern */
.contact-animation-linkedin {
    overflow: visible; /* Allow cubes to extend beyond container */
}

.contact-animation-linkedin::before {
    box-shadow:
        -200px -100px 0 -60px var(--magenta),
        200px -100px 0 -60px var(--magenta),
        -200px 100px 0 -60px var(--magenta),
        200px 100px 0 -60px var(--magenta);
}
/* CLEAN-FIX-GEOMETRIC-COLORS-LINKEDIN-PATTERN-END */

/* ================================================
   Calendar: Blueprint Grid Animation
   ================================================ */

/* CLEAN-FIX-GEOMETRIC-SCALE-CALENDAR-START */
/* Enhanced grid visibility with thicker lines and higher opacity
   To revert: Change back to 1px lines, 24px grid, and 0.3 opacity */
.contact-animation-calendar {
    background:
        linear-gradient(var(--cool) 2px, transparent 2px),  /* Thicker lines */
        linear-gradient(90deg, var(--cool) 2px, transparent 2px);
    background-size: 32px 32px;  /* Larger grid cells */
    animation: gridShift 10s linear infinite;
    opacity: 0.6;  /* More visible */
}

.contact-animation-calendar::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(var(--light) 2px, transparent 2px),  /* Thicker lines */
        linear-gradient(90deg, var(--light) 2px, transparent 2px);
    background-size: 48px 48px;
    animation: gridShift 15s linear infinite reverse;
    opacity: 0.5;
}
/* CLEAN-FIX-GEOMETRIC-SCALE-CALENDAR-END */

@keyframes gridShift {
    0% { background-position: 0 0; }
    100% { background-position: 24px 24px; }
}

/* CLEAN-FIX-GEOMETRIC-COMPLEXITY-CALENDAR-START */
/* Visual complexity layers for Calendar with cool blue emphasis
   To revert: Delete between START/END markers */
.contact-visual-calendar::before,
.contact-visual-calendar::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Grid intersection dots in cool blue */
.contact-visual-calendar::before {
    background-image:
        radial-gradient(circle at 16px 16px, var(--cool) 3px, transparent 3px),
        radial-gradient(circle at 16px 16px, var(--cool) 2px, transparent 2px);
    background-size: 32px 32px, 48px 48px;
    background-position: 0 0, 8px 8px;
    animation: nodesPulse 4s ease-in-out infinite;
    opacity: 0.8;
}

/* Diagonal grid overlay for depth */
.contact-visual-calendar::after {
    background:
        linear-gradient(45deg, var(--cool) 1px, transparent 1px),
        linear-gradient(-45deg, var(--cool) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.3;
    animation: diagonalShift 8s linear infinite;
    mix-blend-mode: overlay;
}

/* Additional cool-colored accent lines */
.contact-animation-calendar {
    box-shadow:
        inset 0 0 0 1px rgba(169, 176, 178, 0.2),
        inset 48px 0 0 0 rgba(169, 176, 178, 0.1),
        inset -48px 0 0 0 rgba(169, 176, 178, 0.1),
        inset 0 48px 0 0 rgba(169, 176, 178, 0.1),
        inset 0 -48px 0 0 rgba(169, 176, 178, 0.1);
}

@keyframes nodesPulse {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

@keyframes diagonalShift {
    0% { background-position: 0 0; }
    100% { background-position: 24px 24px; }
}
/* CLEAN-FIX-GEOMETRIC-COMPLEXITY-CALENDAR-END */

/* ================================================
   Email: Isometric Lines Animation
   ================================================ */

/* CLEAN-FIX-GEOMETRIC-SCALE-EMAIL-START */
/* Scaled to fill container with enhanced line visibility
   To revert: Change back to 200px dimensions and thinner lines */
/* CLEAN-FIX-GEOMETRIC-COLORS-EMAIL-START */
/* Applied teal color theme to Email animation
   To revert: Change var(--teal) back to var(--cool) */
.contact-animation-email::before,
.contact-animation-email::after {
    content: '';
    position: absolute;
    width: 100%;  /* Fill container width */
    height: 100%; /* Fill container height */
}

.contact-animation-email::before {
    background:
        linear-gradient(30deg, transparent 48%, var(--teal) 48%, var(--teal) 52%, transparent 52%),  /* Changed to teal */
        linear-gradient(-30deg, transparent 48%, var(--teal) 48%, var(--teal) 52%, transparent 52%);
    background-size: 40px 40px;  /* Larger pattern */
    animation: isoShift 6s ease-in-out infinite;
}

.contact-animation-email::after {
    background:
        linear-gradient(30deg, transparent 48%, var(--white) 48%, var(--white) 52%, transparent 52%),  /* Changed to white */
        linear-gradient(-30deg, transparent 48%, var(--white) 48%, var(--white) 52%, transparent 52%);
    background-size: 56px 56px;  /* Larger pattern */
    animation: isoShift 8s ease-in-out infinite reverse;
    opacity: 0.4;
}
/* CLEAN-FIX-GEOMETRIC-COLORS-EMAIL-END */
/* CLEAN-FIX-GEOMETRIC-SCALE-EMAIL-END */

@keyframes isoShift {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(3deg); }
}

/* CLEAN-FIX-GEOMETRIC-COMPLEXITY-EMAIL-START */
/* Visual complexity layers for Email with teal emphasis
   To revert: Delete between START/END markers */
.contact-visual-email::before,
.contact-visual-email::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Teal diamond pattern overlay */
.contact-visual-email::before {
    background:
        linear-gradient(45deg, transparent 45%, var(--teal) 45%, var(--teal) 48%, transparent 48%,
                        transparent 52%, var(--teal) 52%, var(--teal) 55%, transparent 55%),
        linear-gradient(-45deg, transparent 45%, var(--teal) 45%, var(--teal) 48%, transparent 48%,
                        transparent 52%, var(--teal) 52%, var(--teal) 55%, transparent 55%);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
    animation: diamondFloat 6s ease-in-out infinite;
    opacity: 0.4;
}

/* Teal accent nodes */
.contact-visual-email::after {
    background:
        radial-gradient(circle at 20% 20%, var(--teal) 2px, transparent 2px),
        radial-gradient(circle at 80% 80%, var(--teal) 2px, transparent 2px),
        radial-gradient(circle at 80% 20%, var(--teal) 2px, transparent 2px),
        radial-gradient(circle at 20% 80%, var(--teal) 2px, transparent 2px);
    background-size: 60px 60px;
    animation: nodesRotate 12s linear infinite;
    opacity: 0.8;
}

/* Enhanced teal coloring on main animation */
.contact-animation-email {
    filter: hue-rotate(-10deg) saturate(1.2); /* Enhance teal color */
    box-shadow:
        0 0 40px rgba(0, 179, 163, 0.1),
        inset 0 0 20px rgba(0, 179, 163, 0.05);
}

/* Additional floating elements */
.contact-animation-email::before {
    box-shadow:
        20px 20px 0 2px var(--teal),
        -20px -20px 0 2px var(--teal),
        40px -40px 0 1px var(--teal),
        -40px 40px 0 1px var(--teal);
    opacity: 0.3;
}

@keyframes diamondFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(5px, -5px) scale(1.02);
    }
    50% {
        transform: translate(-5px, 5px) scale(0.98);
    }
    75% {
        transform: translate(5px, 5px) scale(1.02);
    }
}

@keyframes nodesRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* CLEAN-FIX-GEOMETRIC-COMPLEXITY-EMAIL-END */

/* ================================================
   Resume: Architectural Plan Animation
   ================================================ */

/* CLEAN-FIX-GEOMETRIC-SCALE-RESUME-START */
/* Enhanced visibility with thicker borders and grid lines
   To revert: Change back to 2px border, 1px grid lines, and 0.6 opacity */
/* CLEAN-FIX-GEOMETRIC-COLORS-RESUME-START */
/* Applied warm color theme to Resume animation
   To revert: Change var(--warm) back to var(--cool) */
.contact-animation-resume {
    border: 3px solid var(--warm);  /* Changed from cool to warm */
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 48px,
            var(--white) 48px,  /* Changed from light to white */
            var(--white) 50px  /* Thicker grid lines */
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 48px,
            var(--white) 48px,  /* Changed from light to white */
            var(--white) 50px  /* Thicker grid lines */
        );
    opacity: 0.8;  /* More visible */
}
/* CLEAN-FIX-GEOMETRIC-COLORS-RESUME-END */
/* CLEAN-FIX-GEOMETRIC-SCALE-RESUME-END */

/* CLEAN-FIX-GEOMETRIC-SCALE-RESUME-ROOMS-START */
/* Thicker dashed borders for room overlays
   To revert: Change back to 1px dashed borders */
/* CLEAN-FIX-GEOMETRIC-COLORS-RESUME-ROOMS-START */
/* Applied warm color to room overlays
   To revert: Change var(--warm) back to var(--cool) */
.contact-animation-resume::before,
.contact-animation-resume::after {
    content: '';
    position: absolute;
    border: 2px dashed var(--warm);  /* Changed from cool to warm */
}
/* CLEAN-FIX-GEOMETRIC-COLORS-RESUME-ROOMS-END */
/* CLEAN-FIX-GEOMETRIC-SCALE-RESUME-ROOMS-END */

.contact-animation-resume::before {
    top: 20%;
    left: 20%;
    width: 30%;
    height: 40%;
    animation: planPulse 3s ease-in-out infinite;
}

.contact-animation-resume::after {
    bottom: 20%;
    right: 20%;
    width: 40%;
    height: 30%;
    animation: planPulse 3s ease-in-out infinite 1.5s;
    border-color: var(--light);
}

@keyframes planPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

/* CLEAN-FIX-GEOMETRIC-COMPLEXITY-RESUME-START */
/* Visual complexity layers for Resume with warm emphasis
   To revert: Delete between START/END markers */
.contact-visual-resume::before,
.contact-visual-resume::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

/* Horizontal measurement ruler with warm color */
.contact-visual-resume::before {
    width: 90%;
    height: 20px;
    top: 10%;
    left: 5%;
    background:
        repeating-linear-gradient(
            90deg,
            var(--warm) 0,
            var(--warm) 2px,
            transparent 2px,
            transparent 6px,
            var(--warm) 6px,
            var(--warm) 7px,
            transparent 7px,
            transparent 12px
        ),
        linear-gradient(90deg, var(--warm) 2px, transparent 2px);
    background-size: 48px 50%, 48px 100%;
    opacity: 0.6;
    animation: rulerSlide 8s ease-in-out infinite;
}

/* Vertical measurement ruler */
.contact-visual-resume::after {
    width: 20px;
    height: 90%;
    left: 10%;
    top: 5%;
    background:
        repeating-linear-gradient(
            0deg,
            var(--warm) 0,
            var(--warm) 2px,
            transparent 2px,
            transparent 6px,
            var(--warm) 6px,
            var(--warm) 7px,
            transparent 7px,
            transparent 12px
        ),
        linear-gradient(0deg, var(--warm) 2px, transparent 2px);
    background-size: 50% 48px, 100% 48px;
    opacity: 0.6;
    animation: rulerSlide 8s ease-in-out infinite reverse;
}

/* Enhanced warm coloring and dimension markers */
/* CLEAN-FIX-CONSOLE-ERRORS-RESUME-POSITION-START */
/* CRITICAL FIX: Commenting out position: relative that conflicts with line 1345's position: absolute
   This was causing resume animation to not align vertically like other contact methods
   To revert: Uncomment the position: relative line below */
.contact-animation-resume {
    /* position: relative; - REMOVED: Conflicts with absolute positioning on line 1345 */
    box-shadow:
        0 0 30px rgba(121, 126, 128, 0.1),
        inset 0 0 15px rgba(121, 126, 128, 0.05);
}
/* CLEAN-FIX-CONSOLE-ERRORS-RESUME-POSITION-END */

/* Add dimension text markers using box shadows */
.contact-animation-resume::before {
    box-shadow:
        /* Corner markers */
        -8px -8px 0 0 var(--warm),
        8px -8px 0 0 var(--warm),
        -8px 8px 0 0 var(--warm),
        8px 8px 0 0 var(--warm),
        /* Mid-point markers */
        0 -16px 0 -2px var(--warm),
        0 16px 0 -2px var(--warm),
        -16px 0 0 -2px var(--warm),
        16px 0 0 -2px var(--warm);
    opacity: 0.5;
}

/* Additional grid accent lines */
.contact-animation-resume::after {
    box-shadow:
        inset 96px 0 0 0 rgba(121, 126, 128, 0.2),
        inset -96px 0 0 0 rgba(121, 126, 128, 0.2),
        inset 0 96px 0 0 rgba(121, 126, 128, 0.2),
        inset 0 -96px 0 0 rgba(121, 126, 128, 0.2);
}

@keyframes rulerSlide {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.6;
    }
    50% {
        transform: translateX(10px);
        opacity: 0.8;
    }
}
/* CLEAN-FIX-GEOMETRIC-COMPLEXITY-RESUME-END */

/* ================================================
   Animation Hover States
   ================================================ */

.contact-visual:hover .contact-animation-linkedin::before,
.contact-visual:hover .contact-animation-linkedin::after {
    animation-duration: 4s;
    border-width: 3px;
}

.contact-visual:hover .contact-animation-calendar {
    opacity: 0.5;
    animation-duration: 5s;
}

.contact-visual:hover .contact-animation-email::before,
.contact-visual:hover .contact-animation-email::after {
    animation-duration: 3s;
}

.contact-visual:hover .contact-animation-resume {
    opacity: 0.8;
    border-width: 3px;
}

/* CLEAN-FIX-GEOMETRIC-ANIMATIONS-END */

/* CLEAN-FIX-CTA-COLORS-START */
/* CLEAN-FIX-BORDER-SHADOW-2-START */
/* Removed contact-specific borders/shadows that conflicted with cube-face styles
   These were causing the unwanted top/left border artifacts
   To revert: Uncomment the rules below */
/*
.contact-preview[data-contact="linkedin"] .contact-btn {
    border-color: var(--magenta);
}

.contact-preview[data-contact="linkedin"] .contact-btn::after {
    background: var(--magenta);
}

.contact-preview[data-contact="linkedin"] .contact-btn::before {
    border-color: var(--magenta);
}

.contact-preview[data-contact="linkedin"] .contact-btn:hover {
    border-color: var(--magenta);
    box-shadow: 0 0 20px rgba(255, 0, 204, 0.3);
}

.contact-preview[data-contact="calendar"] .contact-btn {
    border-color: var(--cool);
}

.contact-preview[data-contact="calendar"] .contact-btn::after {
    background: var(--cool);
}

.contact-preview[data-contact="calendar"] .contact-btn::before {
    border-color: var(--cool);
}

.contact-preview[data-contact="calendar"] .contact-btn:hover {
    border-color: var(--cool);
    box-shadow: 0 0 20px rgba(169, 176, 178, 0.3);
}

.contact-preview[data-contact="email"] .contact-btn {
    border-color: var(--teal);
}

.contact-preview[data-contact="email"] .contact-btn::after {
    background: var(--teal);
}

.contact-preview[data-contact="email"] .contact-btn::before {
    border-color: var(--teal);
}

.contact-preview[data-contact="email"] .contact-btn:hover {
    border-color: var(--teal);
    box-shadow: 0 0 20px rgba(0, 179, 163, 0.3);
}

.contact-preview[data-contact="resume"] .contact-btn {
    border-color: var(--warm);
}

.contact-preview[data-contact="resume"] .contact-btn::after {
    background: var(--warm);
}

.contact-preview[data-contact="resume"] .contact-btn::before {
    border-color: var(--warm);
}

.contact-preview[data-contact="resume"] .contact-btn:hover {
    border-color: var(--warm);
    box-shadow: 0 0 20px rgba(121, 126, 128, 0.3);
}
*/
/* CLEAN-FIX-BORDER-SHADOW-2-END */

/* CLEAN-FIX-PRIMARY-CTA-STANDARDS-REMOVAL-START */
/* Cube face text colors - REMOVED to use site-wide standards
   These were overriding the standard --cta-cube-text-color-front and -back
   To revert: Uncomment the rules below */
/*
.contact-preview[data-contact="linkedin"] .cube-face {
    color: var(--magenta);
}

.contact-preview[data-contact="calendar"] .cube-face {
    color: var(--cool);
}

.contact-preview[data-contact="email"] .cube-face {
    color: var(--teal);
}

.contact-preview[data-contact="resume"] .cube-face {
    color: var(--warm);
}
*/
/* CLEAN-FIX-PRIMARY-CTA-STANDARDS-REMOVAL-END */

/* CLEAN-FIX-CTA-COLORS-END */

/* ===========================================
   SCREEN BLOCKING OVERLAYS (Step 16)
   Scenario A: Short Portrait → "EXPAND SCREEN"
   Scenario B: Landscape Rotation → "ROTATE TO PORTRAIT"
   =========================================== */

/* CLEAN-FIX-ROUND10-SCREEN-BLOCKER-START
   Screen blocking overlay for constrained viewports
   Shows when Stage 2 preview is active AND viewport is too small
   Design: 6n padding, center-aligned, 4 corners --light, 4 accent colors
   To revert: Delete everything between START/END markers */

/* Base blocker styles - hidden by default */
.stage2-screen-blocker {
    position: absolute;
    inset: 0;
    background: var(--black);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 24px; /* 4×6n */
    text-align: center;
}

/* Blocker message text */
.blocker-message {
    font-family: var(--font-primary);
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-bold);
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    padding: 18px 24px; /* 3×6n, 4×6n */
    position: relative;
}

/* 4 corner accents using --light */
.blocker-corner {
    position: absolute;
    width: 6px; /* 1×6n */
    height: 6px; /* 1×6n */
    background-color: var(--light);
    opacity: 0.6;
}

.blocker-corner.tl { top: 0; left: 0; }
.blocker-corner.tr { top: 0; right: 0; }
.blocker-corner.bl { bottom: 0; left: 0; }
.blocker-corner.br { bottom: 0; right: 0; }

/* 4 accent color bars - decorative elements */
.blocker-accents {
    display: flex;
    gap: 6px; /* 1×6n */
    margin-top: 18px; /* 3×6n */
}

.blocker-accent {
    width: 24px; /* 4×6n */
    height: 3px;
    opacity: 0.8;
    animation: blocker-pulse 2s ease-in-out infinite;
}

.blocker-accent:nth-child(1) {
    background: var(--cyan);
    animation-delay: 0s;
}

.blocker-accent:nth-child(2) {
    background: var(--pink);
    animation-delay: 0.25s;
}

.blocker-accent:nth-child(3) {
    background: var(--purple);
    animation-delay: 0.5s;
}

.blocker-accent:nth-child(4) {
    background: var(--teal);
    animation-delay: 0.75s;
}

@keyframes blocker-pulse {
    0%, 100% { opacity: 0.4; transform: scaleX(1); }
    50% { opacity: 1; transform: scaleX(1.2); }
}

/* Subtle hint text below message */
.blocker-hint {
    font-family: var(--font-primary);
    font-size: var(--font-size-specialized);
    color: var(--warm);
    margin-top: 12px; /* 2×6n */
    opacity: 0.7;
    letter-spacing: 1px;
}

/* ===========================================
   SCENARIO A: Short Portrait
   Trigger: Portrait orientation with max-height: 450px
   Message: "EXPAND SCREEN"
   =========================================== */
@media (orientation: portrait) and (max-height: 450px) {
    .case-preview-section.active .stage2-screen-blocker.expand-screen,
    .contact-preview-section.active .stage2-screen-blocker.expand-screen {
        display: flex;
    }
}

/* ===========================================
   SCENARIO B: Landscape Rotation
   Trigger: Landscape orientation with max-height: 500px
   Message: "ROTATE TO PORTRAIT"
   =========================================== */
@media (orientation: landscape) and (max-height: 500px) {
    .case-preview-section.active .stage2-screen-blocker.rotate-device,
    .contact-preview-section.active .stage2-screen-blocker.rotate-device {
        display: flex;
    }
}

/* CLEAN-FIX-ROUND10-SCREEN-BLOCKER-END */

/* V3-FOOTER-PORT-CSS-END */