/* ============================================
   RETRO / 90s NOSTALGIA THEME
   ============================================
   All rules scoped under [data-theme="retro"].
   Faithfully recreates the Windows 95 / GeoCities
   aesthetic over the existing page structure.
   ============================================ */


/* ------------------------------------------
   KEYFRAME ANIMATIONS
   ------------------------------------------ */
@keyframes rainbow {
    0%   { color: #ff0000; }
    17%  { color: #ff8000; }
    33%  { color: #ffff00; }
    50%  { color: #00ff00; }
    67%  { color: #0080ff; }
    83%  { color: #8000ff; }
    100% { color: #ff0000; }
}

@keyframes pulse-glow-retro {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 10px 2px rgba(255, 0, 0, 0.5);
    }
}

@keyframes retro-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}


/* ------------------------------------------
   CSS VARIABLES OVERRIDE
   ------------------------------------------ */
[data-theme="retro"] {
    --color-bg: #C0C0C0;
    --color-accent: #0000FF;
    --color-accent-hover: #FF0000;
    --color-text: #000000;
    --color-text-muted: #808080;
    --color-text-dim: #808080;
    --color-text-faint: #808080;
    --color-text-ghost: #808080;
    --color-surface: #C0C0C0;
    --color-surface-hover: #D0D0D0;
    --color-surface-dark: #C0C0C0;
    --color-border: #000000;
    --color-border-light: #FFFFFF;
    --color-border-mid: #808080;
    --font-satoshi: "MS Sans Serif", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --ease-out-expo: linear;
    --ease-smooth: linear;
}


/* ------------------------------------------
   UNIVERSAL RESETS
   ------------------------------------------ */
[data-theme="retro"],
[data-theme="retro"] *,
[data-theme="retro"] *::before,
[data-theme="retro"] *::after {
    border-radius: 0 !important;
    cursor: auto !important;
}

/* Hide custom cursor */
[data-theme="retro"] .cursor-dot,
[data-theme="retro"] .cursor-ring {
    display: none !important;
}

/* Selection: navy blue */
[data-theme="retro"] .selection-coral::selection,
[data-theme="retro"] ::selection {
    background-color: #000080;
    color: #FFFFFF;
}

/* Kill soft transitions on theme elements */
[data-theme="retro"] .transition-all,
[data-theme="retro"] .transition-colors,
[data-theme="retro"] .transition-transform,
[data-theme="retro"] .transition-opacity {
    transition-duration: 0ms !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    [data-theme="retro"] .hero-char {
        animation: charReveal 0.6s linear forwards !important;
        color: #ff0000 !important;
    }
}


/* ------------------------------------------
   BODY / PAGE WRAPPER
   ------------------------------------------ */
[data-theme="retro"] .min-h-screen {
    background-color: #C0C0C0 !important;
    background-image:
        linear-gradient(45deg, #b8b8b8 25%, transparent 25%),
        linear-gradient(-45deg, #b8b8b8 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #b8b8b8 75%),
        linear-gradient(-45deg, transparent 75%, #b8b8b8 75%) !important;
    background-size: 4px 4px;
    background-position: 0 0, 0 2px, 2px -2px, -2px 0px;
    color: #000000;
}


/* ------------------------------------------
   TOP NAVIGATION
   ------------------------------------------ */
[data-theme="retro"] #topNav {
    background: #C0C0C0;
    border-bottom: 2px solid;
    border-color: transparent #808080 #808080 transparent;
    box-shadow: 0 2px 0 #808080;
    padding: 4px 12px;
}

[data-theme="retro"] #topNav.scrolled {
    background: #C0C0C0;
    backdrop-filter: none;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Logo */
[data-theme="retro"] #nav-logo div {
    background: #000080 !important;
    color: #FFFFFF !important;
    font-family: "Arial Black", Impact, sans-serif;
    border: 2px solid;
    border-color: #5555ff #000040 #000040 #5555ff;
    transform: none !important;
}
[data-theme="retro"] #nav-logo:hover div {
    transform: none !important;
}

/* Nav links */
[data-theme="retro"] #topNav .nav-link {
    color: #0000FF !important;
    text-decoration: underline;
    font-weight: 700;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
}
[data-theme="retro"] #topNav .nav-link:hover {
    color: #FF0000 !important;
}
[data-theme="retro"] .nav-link::before {
    display: none !important;
}

/* CTA button in nav */
[data-theme="retro"] #topNav a[href="#contact"]:not(.nav-link) {
    background: #C0C0C0 !important;
    color: #000000 !important;
    border: 2px solid !important;
    border-color: #ffffff #808080 #808080 #ffffff !important;
    box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #dfdfdf;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-decoration: none;
}
[data-theme="retro"] #topNav a[href="#contact"]:not(.nav-link):hover {
    background: #D0D0D0 !important;
    color: #000000 !important;
    transform: none !important;
}
[data-theme="retro"] #topNav a[href="#contact"]:not(.nav-link):active {
    border-color: #808080 #ffffff #ffffff #808080 !important;
    box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
    transform: translate(1px, 1px) !important;
}


/* ------------------------------------------
   BOTTOM NAV / THEME DOCK
   ------------------------------------------ */
[data-theme="retro"] #bottomNav {
    background: #C0C0C0 !important;
    backdrop-filter: none !important;
    border: 2px solid !important;
    border-color: #ffffff #808080 #808080 #ffffff !important;
    box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #dfdfdf;
}

[data-theme="retro"] .theme-toggle {
    font-family: "MS Sans Serif", Tahoma, sans-serif !important;
    color: #000000 !important;
    background: #C0C0C0 !important;
    border: 2px solid !important;
    border-color: #ffffff #808080 #808080 #ffffff !important;
    box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #dfdfdf;
}

[data-theme="retro"] .theme-toggle:hover {
    background: #D0D0D0 !important;
}

[data-theme="retro"] .theme-toggle.active {
    background: #C0C0C0 !important;
    color: #000000 !important;
    border-color: #808080 #ffffff #ffffff #808080 !important;
    box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
    transform: translate(1px, 1px);
}


/* ------------------------------------------
   HERO SECTION
   ------------------------------------------ */
[data-theme="retro"] header {
    background: #C0C0C0 !important;
}

/* Hide the radial gradient & grid overlays */
[data-theme="retro"] header > .absolute.inset-0 {
    display: none !important;
}

/* Hero headline — rainbow animation */
[data-theme="retro"] #heroText {
    font-family: "Arial Black", Impact, Haettenschweiler, sans-serif !important;
    font-size: 10vw;
    text-shadow: 3px 3px 0 #808080;
    -webkit-text-stroke: 0;
}

[data-theme="retro"] #heroText .hero-char {
    animation: charReveal 0.6s linear forwards, rainbow 4s linear infinite;
    text-shadow: 3px 3px 0 #808080;
    filter: none;
}

[data-theme="retro"] #heroText .hero-char.scattered {
    text-shadow: 3px 3px 0 #808080;
    filter: none;
}

/* Hero subtitle */
[data-theme="retro"] #heroSub {
    color: #000000 !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-weight: 700;
    font-size: 14px !important;
    letter-spacing: 0.2em;
}

/* Hero tagline — bottom left */
[data-theme="retro"] header .absolute.bottom-12.left-8 p,
[data-theme="retro"] header .absolute.bottom-12.left-8 p br + * {
    color: #000000 !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-weight: 700;
}

/* Hero contact link — bottom right */
[data-theme="retro"] header .absolute.bottom-12.right-8 a {
    color: #0000FF !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-weight: 700;
    text-decoration: underline !important;
}
[data-theme="retro"] header .absolute.bottom-12.right-8 a:hover {
    color: #FF0000 !important;
}

/* Scroll indicator */
[data-theme="retro"] header .animate-bounce span {
    color: #808080 !important;
}
[data-theme="retro"] header .animate-bounce iconify-icon {
    color: #808080 !important;
}

/* Remove link-underline pseudo-element */
[data-theme="retro"] .link-underline::after {
    display: none !important;
}


/* ------------------------------------------
   SERVICES MARQUEE
   ------------------------------------------ */
[data-theme="retro"] .marquee-track {
    font-family: "Arial Black", Impact, sans-serif;
}

/* Marquee wrapper — navy background */
[data-theme="retro"] .min-h-screen > .border-y {
    background: #000080 !important;
    border-color: #000000 !important;
    border-width: 2px;
}

/* Marquee items — cycle through bright colors */
[data-theme="retro"] .marquee-track > span {
    font-family: "Arial Black", Impact, sans-serif;
    font-weight: 900;
    font-size: 14px;
}
[data-theme="retro"] .marquee-track > span:nth-child(7n+1) {
    color: #FF0000 !important;
}
[data-theme="retro"] .marquee-track > span:nth-child(7n+2) {
    color: #FF8000 !important;
}
[data-theme="retro"] .marquee-track > span:nth-child(7n+3) {
    color: #FFFF00 !important;
}
[data-theme="retro"] .marquee-track > span:nth-child(7n+4) {
    color: #00FF00 !important;
}
[data-theme="retro"] .marquee-track > span:nth-child(7n+5) {
    color: #00FFFF !important;
}
[data-theme="retro"] .marquee-track > span:nth-child(7n+6) {
    color: #0080FF !important;
}
[data-theme="retro"] .marquee-track > span:nth-child(7n) {
    color: #FF00FF !important;
}

/* Replace coral dots with bright colored squares */
[data-theme="retro"] .marquee-track > span > span {
    background: #FFFF00 !important;
    width: 8px !important;
    height: 8px !important;
    border: 1px solid #000000;
}


/* ------------------------------------------
   ABOUT SECTION
   ------------------------------------------ */
[data-theme="retro"] #about {
    padding-top: 48px;
    padding-bottom: 48px;
}

/* Section label */
[data-theme="retro"] #about .pulse-ring {
    background: #FF0000 !important;
    width: 10px !important;
    height: 10px !important;
    border: 1px solid #000000;
}
[data-theme="retro"] #about .pulse-ring::after {
    display: none;
}
[data-theme="retro"] #about .pulse-ring + span {
    color: #000000 !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-weight: 700;
    font-size: 12px !important;
}

/* About headline */
[data-theme="retro"] #about > h2 {
    color: #000000 !important;
    font-family: "Arial Black", Impact, sans-serif;
    font-size: 2.5rem;
    line-height: 1.1;
    text-shadow: 2px 2px 0 #808080;
}
[data-theme="retro"] #about > h2 span {
    color: #000080 !important;
}

/* About cards — Windows 95 window style */
[data-theme="retro"] #about .tilt-card {
    background: #C0C0C0 !important;
    border: 2px solid !important;
    border-color: #ffffff #808080 #808080 #ffffff !important;
    box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #dfdfdf;
    padding: 0 !important;
    min-height: 400px !important;
    overflow: hidden;
}
[data-theme="retro"] #about .tilt-card:hover {
    background: #C0C0C0 !important;
}

/* Left card — add window title bar via pseudo-element */
[data-theme="retro"] #about .grid > .tilt-card:first-child {
    display: flex;
    flex-direction: column;
}
[data-theme="retro"] #about .grid > .tilt-card:first-child::before {
    content: 'Onward Digital Services';
    display: block;
    background: linear-gradient(to right, #000080, #1084d0);
    color: #FFFFFF;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-weight: 700;
    font-size: 12px;
    padding: 4px 8px;
    border-bottom: 2px solid #808080;
}

/* Content inside left card */
[data-theme="retro"] #about .grid > .tilt-card:first-child > .mt-auto {
    padding: 24px;
}
[data-theme="retro"] #about .grid > .tilt-card:first-child h3 {
    font-family: "Arial Black", Impact, sans-serif;
    color: #000000 !important;
    text-shadow: 2px 2px 0 #C0C0C0;
}
[data-theme="retro"] #about .grid > .tilt-card:first-child h3:last-child {
    color: #808080 !important;
}

/* Badge on left card */
[data-theme="retro"] #about .grid > .tilt-card:first-child > .absolute {
    background: #FF0000 !important;
    color: #FFFFFF !important;
    border: 2px solid !important;
    border-color: #ff5555 #800000 #800000 #ff5555 !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-weight: 900;
    animation: pulse-glow-retro 1.5s ease-in-out infinite;
    font-size: 11px !important;
    padding: 3px 8px !important;
}

/* Right card (gradient card) — Windows frame */
[data-theme="retro"] #about .grid > .tilt-card:last-child {
    background: #C0C0C0 !important;
    padding: 0 !important;
}
[data-theme="retro"] #about .grid > .tilt-card:last-child::before {
    content: 'Dashboard Preview';
    display: block;
    background: linear-gradient(to right, #000080, #1084d0);
    color: #FFFFFF;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-weight: 700;
    font-size: 12px;
    padding: 4px 8px;
    border-bottom: 2px solid #808080;
}

/* Browser mockup inside right card */
[data-theme="retro"] #about .grid > .tilt-card:last-child > div:not(.absolute) {
    padding: 16px;
}
[data-theme="retro"] #about .grid > .tilt-card:last-child .shadow-2xl {
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
    background: #FFFFFF !important;
}
[data-theme="retro"] #about .grid > .tilt-card:last-child .bg-gradient-to-t {
    display: none;
}
/* White overlay on hover */
[data-theme="retro"] #about .grid > .tilt-card:last-child > .absolute.inset-0 {
    display: none !important;
}


/* ------------------------------------------
   STATS SECTION — HIT COUNTER STYLE
   ------------------------------------------ */
[data-theme="retro"] #stats {
    background: #000000 !important;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
    padding: 32px 24px;
}

/* Stat numbers — green monospace */
[data-theme="retro"] #stats .counter {
    color: #00FF00 !important;
    font-family: "Courier New", Courier, monospace !important;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
    font-size: 3rem !important;
}
[data-theme="retro"] #stats .stat-glow {
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

/* Stat labels */
[data-theme="retro"] #stats p {
    color: #00FF00 !important;
    font-family: "Courier New", Courier, monospace;
    font-size: 10px;
}
[data-theme="retro"] #stats .text-center > p:last-child {
    color: #00AA00 !important;
}

/* Add "Visitors since 1995" vibe via section pseudo-element */
[data-theme="retro"] #stats::before {
    content: '[ STATS COUNTER — SINCE 2024 ]';
    display: block;
    text-align: center;
    color: #00AA00;
    font-family: "Courier New", Courier, monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    margin-bottom: 16px;
}


/* ------------------------------------------
   SERVICES SECTION
   ------------------------------------------ */
[data-theme="retro"] #services {
    padding-top: 48px;
    padding-bottom: 48px;
}

/* Section label */
[data-theme="retro"] #services .pulse-ring {
    background: #FF0000 !important;
    width: 10px !important;
    height: 10px !important;
    border: 1px solid #000000;
}
[data-theme="retro"] #services .pulse-ring::after {
    display: none;
}
[data-theme="retro"] #services .pulse-ring + span {
    color: #000000 !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-weight: 700;
}

/* Services headline */
[data-theme="retro"] #services > h2 {
    color: #000000 !important;
    font-family: "Arial Black", Impact, sans-serif;
    text-shadow: 2px 2px 0 #808080;
}
[data-theme="retro"] #services > h2 span {
    color: #000080 !important;
}

/* Service cards grid — table-like with visible borders */
[data-theme="retro"] #services > .grid {
    background: #808080 !important;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    gap: 2px !important;
}

/* Individual service cards */
[data-theme="retro"] #services > .grid > div {
    background: #FFFFFF !important;
    padding: 16px !important;
    position: relative;
}
[data-theme="retro"] #services > .grid > div:hover {
    background: #FFFFCC !important;
}

/* Add title bar to service cards */
[data-theme="retro"] #services > .grid > div::before {
    content: '';
    display: block;
    background: linear-gradient(to right, #000080, #1084d0);
    height: 24px;
    margin: -16px -16px 16px -16px;
    border-bottom: 1px solid #808080;
}

/* Service card — first card title */
[data-theme="retro"] #services > .grid > div:nth-child(1)::before {
    content: 'Website Builds & Rebuilds';
    color: #FFFFFF;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-weight: 700;
    font-size: 11px;
    padding: 4px 8px;
    line-height: 16px;
}
[data-theme="retro"] #services > .grid > div:nth-child(2)::before {
    content: 'SEO & GEO';
    color: #FFFFFF;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-weight: 700;
    font-size: 11px;
    padding: 4px 8px;
    line-height: 16px;
}
[data-theme="retro"] #services > .grid > div:nth-child(3)::before {
    content: 'Email & Automations';
    color: #FFFFFF;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-weight: 700;
    font-size: 11px;
    padding: 4px 8px;
    line-height: 16px;
}

/* Service card headings */
[data-theme="retro"] #services > .grid h3 {
    color: #000000 !important;
    font-family: "Arial Black", Impact, sans-serif;
    font-size: 18px;
}

/* Service card descriptions */
[data-theme="retro"] #services > .grid p {
    color: #000000 !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 13px;
}

/* Service card icon containers */
[data-theme="retro"] #services > .grid .w-14 {
    background: #000080 !important;
    border: 2px solid !important;
    border-color: #5555ff #000040 #000040 #5555ff !important;
}
[data-theme="retro"] #services > .grid .w-14 iconify-icon {
    color: #FFFFFF !important;
}
[data-theme="retro"] #services > .grid .group:hover .w-14 {
    background: #000080 !important;
    border-color: #5555ff #000040 #000040 #5555ff !important;
}
[data-theme="retro"] #services > .grid .group:hover .w-14 iconify-icon {
    color: #FFFFFF !important;
    transform: none !important;
}

/* Service list items */
[data-theme="retro"] #services > .grid ul li {
    color: #000000 !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 12px;
}
[data-theme="retro"] #services > .grid ul li span {
    background: #0000FF !important;
    opacity: 1 !important;
}
[data-theme="retro"] #services > .grid .border-t {
    border-color: #808080 !important;
}

/* Shopify migration callout */
[data-theme="retro"] #services > .mt-8 .tilt-card {
    background: #FFFFCC !important;
    border: 2px solid !important;
    border-color: #ffffff #808080 #808080 #ffffff !important;
    box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #dfdfdf;
}
[data-theme="retro"] #services > .mt-8 .tilt-card:hover {
    border-color: #ffffff #808080 #808080 #ffffff !important;
}

/* Shopify icon container */
[data-theme="retro"] #services > .mt-8 .w-16 {
    background: #00AA00 !important;
    border: 2px solid;
    border-color: #00ff00 #006600 #006600 #00ff00;
}

/* Shopify callout text */
[data-theme="retro"] #services > .mt-8 h3 {
    color: #000000 !important;
    font-family: "Arial Black", Impact, sans-serif;
}
[data-theme="retro"] #services > .mt-8 p {
    color: #000000 !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
}

/* Shopify CTA button */
[data-theme="retro"] #services > .mt-8 a {
    background: #C0C0C0 !important;
    color: #000000 !important;
    border: 2px solid !important;
    border-color: #ffffff #808080 #808080 #ffffff !important;
    box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #dfdfdf;
    text-decoration: none !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
}
[data-theme="retro"] #services > .mt-8 a:hover {
    background: #D0D0D0 !important;
    color: #000000 !important;
    transform: none !important;
}
[data-theme="retro"] #services > .mt-8 a:active {
    border-color: #808080 #ffffff #ffffff #808080 !important;
    box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
    transform: translate(1px, 1px) !important;
}


/* ------------------------------------------
   WORK / PORTFOLIO SECTION
   ------------------------------------------ */
[data-theme="retro"] #work {
    padding-top: 48px;
    padding-bottom: 48px;
}

/* Section header bar */
[data-theme="retro"] #work > .border-b {
    border-color: #000000 !important;
    border-width: 2px;
}
[data-theme="retro"] #work > .border-b h2 {
    color: #FF0000 !important;
    font-family: "Arial Black", Impact, sans-serif;
    font-size: 14px;
}
[data-theme="retro"] #work > .border-b span {
    color: #000000 !important;
    font-family: "Courier New", Courier, monospace;
}

/* Project cards */
[data-theme="retro"] #work article {
    background: #C0C0C0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #dfdfdf;
    padding: 0;
}

/* Project image container — inset frame */
[data-theme="retro"] #work article .aspect-\[4\/3\] {
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
    margin: 2px;
}
[data-theme="retro"] #work article img {
    opacity: 1 !important;
}

/* Window title bar for project cards */
[data-theme="retro"] #work article > a {
    text-decoration: none !important;
}
[data-theme="retro"] #work article > a::before {
    content: '';
    display: block;
    background: linear-gradient(to right, #000080, #1084d0);
    height: 24px;
    border-bottom: 1px solid #808080;
}
[data-theme="retro"] #work article:nth-child(1) > a::before {
    content: 'GoGradTravel — gogradtravel.com';
    color: #FFFFFF;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-weight: 700;
    font-size: 11px;
    padding: 4px 8px;
    line-height: 16px;
}
[data-theme="retro"] #work article:nth-child(2) > a::before {
    content: 'East Coast Art Studio — eastcoastartstudio.com';
    color: #FFFFFF;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-weight: 700;
    font-size: 11px;
    padding: 4px 8px;
    line-height: 16px;
}

/* Project names */
[data-theme="retro"] #work article h3 {
    color: #0000FF !important;
    font-family: "Arial Black", Impact, sans-serif;
    text-decoration: underline;
    font-size: 20px;
}
[data-theme="retro"] #work article:hover h3 {
    color: #FF0000 !important;
}

/* Project type label */
[data-theme="retro"] #work article .text-\[10px\] {
    color: #000000 !important;
    font-family: "Courier New", Courier, monospace;
}

/* Project meta area */
[data-theme="retro"] #work article .mt-8 {
    padding: 8px 12px;
}

/* Arrow icon container */
[data-theme="retro"] #work article .p-3 {
    border: 2px solid !important;
    border-color: #ffffff #808080 #808080 #ffffff !important;
    background: #C0C0C0 !important;
    color: #000000 !important;
}
[data-theme="retro"] #work article:hover .p-3 {
    background: #C0C0C0 !important;
    color: #000000 !important;
    border-color: #ffffff #808080 #808080 #ffffff !important;
    transform: none !important;
}

/* Badge overlays on images */
[data-theme="retro"] #work article .bg-\[\#FF6B50\] {
    background: #FF0000 !important;
    color: #FFFFFF !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-weight: 900;
    border: 1px solid #000000;
    animation: retro-blink 1s step-end infinite;
}

/* "NEW!" badge via pseudo-element on first project */
[data-theme="retro"] #work article:first-child .aspect-\[4\/3\]::after {
    content: 'HOT!';
    position: absolute;
    top: 8px;
    right: 8px;
    background: #FF0000;
    color: #FFFF00;
    font-family: "Arial Black", Impact, sans-serif;
    font-weight: 900;
    font-size: 14px;
    padding: 2px 8px;
    border: 2px solid;
    border-color: #ff5555 #800000 #800000 #ff5555;
    animation: pulse-glow-retro 1.5s ease-in-out infinite;
    z-index: 10;
}
[data-theme="retro"] #work article:nth-child(2) .aspect-\[4\/3\]::after {
    content: 'NEW!';
    position: absolute;
    top: 8px;
    right: 8px;
    background: #FF0000;
    color: #FFFF00;
    font-family: "Arial Black", Impact, sans-serif;
    font-weight: 900;
    font-size: 14px;
    padding: 2px 8px;
    border: 2px solid;
    border-color: #ff5555 #800000 #800000 #ff5555;
    animation: pulse-glow-retro 1.5s ease-in-out infinite;
    z-index: 10;
}

/* Hide gradient overlay on images */
[data-theme="retro"] #work article .bg-gradient-to-t {
    display: none !important;
}


/* ------------------------------------------
   FOOTER / CONTACT SECTION
   ------------------------------------------ */
[data-theme="retro"] #contact {
    border-top: 4px solid #000000 !important;
    padding-top: 32px;
    position: relative;
}

/* Construction stripe banner above contact */
[data-theme="retro"] #contact::before {
    content: '';
    display: block;
    height: 20px;
    background: repeating-linear-gradient(
        45deg,
        #ffff00,
        #ffff00 10px,
        #000000 10px,
        #000000 20px
    );
    margin-bottom: 32px;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
}

/* CTA headline */
[data-theme="retro"] #contact h2 {
    color: #000000 !important;
    font-family: "Arial Black", Impact, sans-serif;
    text-shadow: 3px 3px 0 #808080;
}
[data-theme="retro"] #contact h2 span:hover {
    color: #FF0000 !important;
}

/* Location text */
[data-theme="retro"] #contact > div > div > p {
    color: #000000 !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
}
[data-theme="retro"] #contact > div > div > p iconify-icon {
    color: #FF0000;
}

/* Social buttons — beveled squares */
[data-theme="retro"] .social-btn {
    background: #C0C0C0 !important;
    color: #000000 !important;
    border: 2px solid !important;
    border-color: #ffffff #808080 #808080 #ffffff !important;
    box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #dfdfdf;
    width: 40px !important;
    height: 40px !important;
}
[data-theme="retro"] .social-btn::before {
    display: none !important;
}
[data-theme="retro"] .social-btn:hover {
    background: #D0D0D0 !important;
    color: #000000 !important;
    transform: translate(0, 0) !important;
}
[data-theme="retro"] .social-btn:active {
    border-color: #808080 #ffffff #ffffff #808080 !important;
    box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
    transform: translate(1px, 1px) !important;
}
[data-theme="retro"] .social-btn iconify-icon {
    color: #000080 !important;
    font-size: 16px !important;
}

/* Contact form container */
[data-theme="retro"] .contact-form {
    background: #C0C0C0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #dfdfdf;
    padding: 0;
}

/* Form title bar */
[data-theme="retro"] .contact-form::before {
    content: 'Contact Form';
    display: block;
    background: linear-gradient(to right, #000080, #1084d0);
    color: #FFFFFF;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-weight: 700;
    font-size: 12px;
    padding: 4px 8px;
    border-bottom: 2px solid #808080;
    margin-bottom: 16px;
}

/* Form heading and description */
[data-theme="retro"] .contact-form h3 {
    color: #000000 !important;
    font-family: "Arial Black", Impact, sans-serif;
    padding: 0 16px;
}
[data-theme="retro"] .contact-form > p {
    color: #000000 !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 12px;
    padding: 0 16px;
}

/* Form groups */
[data-theme="retro"] .form-group {
    padding: 0 16px;
}

/* Form labels */
[data-theme="retro"] .form-label {
    color: #000000 !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-weight: 700;
    font-size: 11px;
}

/* Form inputs — inset/sunken */
[data-theme="retro"] .form-input {
    background: #FFFFFF !important;
    color: #000000 !important;
    border: 2px solid !important;
    border-color: #808080 #ffffff #ffffff #808080 !important;
    box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 13px;
    padding: 6px 8px;
}
[data-theme="retro"] .form-input::placeholder {
    color: #808080;
}
[data-theme="retro"] .form-input:focus {
    border-color: #808080 #ffffff #ffffff #808080 !important;
    box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf !important;
    outline: 2px dotted #000000;
    outline-offset: 2px;
}

/* Submit button — 3D beveled */
[data-theme="retro"] .form-submit {
    background: #C0C0C0 !important;
    color: #000000 !important;
    border: 2px solid !important;
    border-color: #ffffff #808080 #808080 #ffffff !important;
    box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #dfdfdf;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 16px 16px 16px;
    width: calc(100% - 32px);
}
[data-theme="retro"] .form-submit:hover {
    background: #D0D0D0 !important;
    box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #dfdfdf !important;
    transform: none !important;
}
[data-theme="retro"] .form-submit:active {
    border-color: #808080 #ffffff #ffffff #808080 !important;
    box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf !important;
    transform: translate(1px, 1px) !important;
}

/* Focus visible — dotted outline */
[data-theme="retro"] .form-submit:focus-visible,
[data-theme="retro"] .theme-toggle:focus-visible,
[data-theme="retro"] a:focus-visible,
[data-theme="retro"] button:focus-visible {
    outline: 2px dotted #000000;
    outline-offset: 2px;
}

/* Form success message */
[data-theme="retro"] .form-success iconify-icon {
    color: #00AA00 !important;
}
[data-theme="retro"] .form-success p:first-of-type {
    color: #000000 !important;
    font-family: "Arial Black", Impact, sans-serif;
}
[data-theme="retro"] .form-success p:last-of-type {
    color: #000000 !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
}


/* ------------------------------------------
   BOTTOM FOOTER BAR
   ------------------------------------------ */
[data-theme="retro"] #contact > .border-t {
    border-color: #000000 !important;
    border-width: 2px;
}
[data-theme="retro"] #contact > .border-t p {
    color: #000000 !important;
    font-family: "Courier New", Courier, monospace;
}
[data-theme="retro"] #contact > .border-t a {
    color: #0000FF !important;
    text-decoration: underline;
}
[data-theme="retro"] #contact > .border-t a:hover {
    color: #FF0000 !important;
}


/* ------------------------------------------
   GROOVE HORIZONTAL RULE EFFECT
   Between major sections
   ------------------------------------------ */
[data-theme="retro"] .border-y,
[data-theme="retro"] .border-t,
[data-theme="retro"] .border-b {
    border-color: #808080 !important;
}

/* Section borders get the groove effect */
[data-theme="retro"] #stats {
    border-top: 2px solid #808080;
    border-bottom: 2px solid #FFFFFF;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #dfdfdf,
        0 2px 0 #808080;
}


/* ------------------------------------------
   DECORATIVE COLOR SQUARES
   Added to the about section via pseudo-element
   ------------------------------------------ */
[data-theme="retro"] #about::after {
    content: '';
    display: flex;
    margin-top: 24px;
    height: 20px;
    background:
        linear-gradient(to right,
            #FF0000 0%, #FF0000 16.66%,
            #00FF00 16.66%, #00FF00 33.33%,
            #0000FF 33.33%, #0000FF 50%,
            #FFFF00 50%, #FFFF00 66.66%,
            #FF00FF 66.66%, #FF00FF 83.33%,
            #00FFFF 83.33%, #00FFFF 100%
        );
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #dfdfdf;
}


/* ------------------------------------------
   MISC OVERRIDES
   ------------------------------------------ */

/* Kill the magnetic button effect visually */
[data-theme="retro"] .magnetic-btn {
    transition: none !important;
}

/* Scroll reveal — keep the animation but adjust */
[data-theme="retro"] .reveal {
    transition: opacity 0.3s linear, transform 0.3s linear;
}

/* img reveal */
[data-theme="retro"] .img-reveal {
    transition: clip-path 0.5s linear;
}

/* Tilt card — reduce the effect */
[data-theme="retro"] .tilt-card {
    transform-style: flat !important;
}

/* Iconify icons — thicker strokes where possible */
[data-theme="retro"] iconify-icon {
    stroke-width: 2px;
}


/* ------------------------------------------
   ABOUT PAGE OVERRIDES
   ------------------------------------------ */

/* About page hero */
[data-theme="retro"] header h1 {
    color: #000000 !important;
    font-family: "Arial Black", Impact, sans-serif;
    text-shadow: 3px 3px 0 #808080;
}
[data-theme="retro"] header h1 span {
    color: #000080 !important;
}
[data-theme="retro"] header p {
    color: #000000 !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
}

/* Our Story section */
[data-theme="retro"] section .text-\[\#cccccc\] {
    color: #000000 !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 13px;
    line-height: 1.6;
}

/* Stat cards on about page */
[data-theme="retro"] .grid .bg-\[\#0a0a0a\] {
    background: #FFFFFF !important;
    border: 2px solid !important;
    border-color: #808080 #ffffff #ffffff #808080 !important;
    box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
}
[data-theme="retro"] .grid .bg-\[\#0a0a0a\] .text-\[\#FF6B50\] {
    color: #FF0000 !important;
    font-family: "Courier New", Courier, monospace;
}
[data-theme="retro"] .grid .bg-\[\#0a0a0a\] .text-\[\#666666\] {
    color: #000000 !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
}

/* Team section heading */
[data-theme="retro"] section > .text-\[\#FF6B50\] {
    color: #FF0000 !important;
    font-family: "Arial Black", Impact, sans-serif;
}

/* Team member cards */
[data-theme="retro"] .tilt-card.bg-\[\#0a0a0a\] {
    background: #C0C0C0 !important;
    border: 2px solid !important;
    border-color: #ffffff #808080 #808080 #ffffff !important;
    box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #dfdfdf;
    padding: 0 !important;
}
[data-theme="retro"] .tilt-card.bg-\[\#0a0a0a\]:hover {
    border-color: #ffffff #808080 #808080 #ffffff !important;
}

/* Team card — window title bar via first-child targeting */
[data-theme="retro"] .tilt-card.bg-\[\#0a0a0a\]::before {
    content: 'Team Member';
    display: block;
    background: linear-gradient(to right, #000080, #1084d0);
    color: #FFFFFF;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-weight: 700;
    font-size: 12px;
    padding: 4px 8px;
    border-bottom: 2px solid #808080;
}

/* Team card inner content */
[data-theme="retro"] .tilt-card.bg-\[\#0a0a0a\] > * {
    padding-left: 12px;
    padding-right: 12px;
}
[data-theme="retro"] .tilt-card.bg-\[\#0a0a0a\] .aspect-square {
    margin: 8px;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 #404040;
}
[data-theme="retro"] .tilt-card.bg-\[\#0a0a0a\] .aspect-square img {
    filter: none !important;
}
[data-theme="retro"] .tilt-card.bg-\[\#0a0a0a\] .aspect-square .bg-gradient-to-t {
    display: none;
}
[data-theme="retro"] .tilt-card.bg-\[\#0a0a0a\] h3 {
    color: #000000 !important;
    font-family: "Arial Black", Impact, sans-serif;
}
[data-theme="retro"] .tilt-card.bg-\[\#0a0a0a\] h3 + p {
    color: #FF0000 !important;
}
[data-theme="retro"] .tilt-card.bg-\[\#0a0a0a\] .text-\[\#FFFFFF\] {
    color: #000000 !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 12px;
}
[data-theme="retro"] .tilt-card.bg-\[\#0a0a0a\] .border-t {
    border-color: #808080 !important;
}
[data-theme="retro"] .tilt-card.bg-\[\#0a0a0a\] ul li {
    color: #000000 !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
}
[data-theme="retro"] .tilt-card.bg-\[\#0a0a0a\] ul li span {
    background: #0000FF !important;
}

/* CTA footer on about page */
[data-theme="retro"] footer h2 {
    color: #000000 !important;
    font-family: "Arial Black", Impact, sans-serif;
    text-shadow: 3px 3px 0 #808080;
}
[data-theme="retro"] footer h2 .text-\[\#FF6B50\] {
    color: #FF0000 !important;
}

/* CTA button on about page */
[data-theme="retro"] footer .magnetic-btn.bg-\[\#FF6B50\] {
    background: #C0C0C0 !important;
    color: #000000 !important;
    border: 2px solid !important;
    border-color: #ffffff #808080 #808080 #ffffff !important;
    box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #dfdfdf;
    text-decoration: none !important;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
}
[data-theme="retro"] footer .magnetic-btn.bg-\[\#FF6B50\]:hover {
    background: #D0D0D0 !important;
    box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #dfdfdf !important;
    transform: none !important;
}
[data-theme="retro"] footer .magnetic-btn.bg-\[\#FF6B50\]:active {
    border-color: #808080 #ffffff #ffffff #808080 !important;
    box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf !important;
    transform: translate(1px, 1px) !important;
}

/* About page footer bar */
[data-theme="retro"] footer .border-t {
    border-color: #000000 !important;
}
[data-theme="retro"] footer .text-\[\#f5f5f5\] {
    color: #000000 !important;
    font-family: "Courier New", Courier, monospace;
}
[data-theme="retro"] footer .border-t a {
    color: #0000FF !important;
    text-decoration: underline;
}
[data-theme="retro"] footer .border-t a:hover {
    color: #FF0000 !important;
}

/* Section borders */
[data-theme="retro"] section.border-t {
    border-color: #808080 !important;
    border-width: 2px;
}


/* ==========================================
   STRUCTURAL LAYOUT OVERRIDES
   90s web page: short banner hero, stacked
   vertical list, taskbar bottom, hit counter
   ========================================== */

/* 1. HERO — short banner, not full-screen */
[data-theme="retro"] header {
    height: auto !important;
    min-height: auto !important;
    padding: 100px 24px 40px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

[data-theme="retro"] header h1,
[data-theme="retro"] header .hero-text {
    font-size: clamp(2rem, 8vw, 5rem) !important;
    text-align: center !important;
}

[data-theme="retro"] header #heroSub {
    opacity: 1 !important;
    transform: none !important;
}

/* Move bottom-positioned elements to flow */
[data-theme="retro"] header .absolute.bottom-12.left-8,
[data-theme="retro"] header .absolute.bottom-12.left-8.md\:left-12 {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    margin-top: 24px !important;
    text-align: center !important;
}

[data-theme="retro"] header .absolute.bottom-12.right-8,
[data-theme="retro"] header .absolute.bottom-12.right-8.md\:right-12 {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    text-align: center !important;
    margin-top: 16px !important;
}

/* Hide scroll indicator */
[data-theme="retro"] header .animate-bounce {
    display: none !important;
}

/* Hide background gradients */
[data-theme="retro"] header > .absolute {
    display: none !important;
}

/* Construction stripe divider after hero via pseudo */
[data-theme="retro"] header::after {
    content: '' !important;
    display: block !important;
    width: 100% !important;
    height: 16px !important;
    background: repeating-linear-gradient(
        -45deg,
        #FFD700,
        #FFD700 10px,
        #000000 10px,
        #000000 20px
    ) !important;
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    margin-top: 24px !important;
}

/* 2. MARQUEE — keep but add blink effect pseudo */
[data-theme="retro"] .min-h-screen > .border-y {
    border-width: 2px !important;
    border-style: solid !important;
    border-color: #808080 #ffffff #ffffff #808080 !important;
    padding: 8px !important;
}

/* 3. ABOUT — vertical stacked, no grid */
[data-theme="retro"] #about > .grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

[data-theme="retro"] #about .tilt-card {
    min-height: auto !important;
    padding: 24px !important;
}

/* Center the about section heading */
[data-theme="retro"] #about > h2 {
    text-align: center !important;
    font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
}

/* 4. STATS — horizontal hit counter strip */
[data-theme="retro"] #stats {
    padding: 16px !important;
}

[data-theme="retro"] #stats > .max-w-7xl {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0 !important;
}

[data-theme="retro"] #stats .text-center {
    flex: 0 0 auto !important;
    padding: 8px 16px !important;
    border: 2px solid !important;
    border-color: #808080 #ffffff #ffffff #808080 !important;
    background: #000080 !important;
    text-align: center !important;
}

[data-theme="retro"] #stats .counter {
    font-size: 1.8rem !important;
    color: #00FF00 !important;
    font-family: 'Courier New', monospace !important;
}

[data-theme="retro"] #stats .stat-glow {
    text-shadow: none !important;
}

[data-theme="retro"] #stats p {
    color: #FFFFFF !important;
    font-size: 9px !important;
}

/* Hit counter header */
[data-theme="retro"] #stats::before {
    content: '== SITE STATS ==' !important;
    display: block !important;
    text-align: center !important;
    color: #000000 !important;
    font-family: 'Courier New', monospace !important;
    font-weight: bold !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
}

/* 5. SERVICES — vertical list, no 3-column grid */
[data-theme="retro"] #services > .grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    overflow: visible !important;
    background: transparent !important;
}

[data-theme="retro"] #services > .grid > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 16px !important;
    border: 2px solid !important;
    border-color: #ffffff #808080 #808080 #ffffff !important;
    margin-bottom: 4px !important;
}

/* Icon stays small and left */
[data-theme="retro"] #services > .grid .w-14 {
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
}

/* Sub-items horizontal */
[data-theme="retro"] #services > .grid > div > .mt-auto {
    margin-top: 0 !important;
    padding-top: 8px !important;
}

[data-theme="retro"] #services > .grid > div > .mt-auto ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 12px !important;
}

/* Shopify callout — old-school button style */
[data-theme="retro"] #services > .mt-8 .tilt-card {
    flex-direction: column !important;
    text-align: center !important;
    padding: 24px !important;
    align-items: center !important;
}

/* 6. PORTFOLIO — single column, full-width stacked */
[data-theme="retro"] #work > .grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
}

/* Remove stagger offset */
[data-theme="retro"] #work article.md\:mt-24 {
    margin-top: 0 !important;
}

/* Images get beveled border frame */
[data-theme="retro"] #work article .aspect-\[4\/3\] {
    border: 3px solid !important;
    border-color: #808080 #ffffff #ffffff #808080 !important;
}

/* Project info centered */
[data-theme="retro"] #work article > a > .mt-8 {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
}

/* Hide arrow button — not 90s */
[data-theme="retro"] #work article .p-3.rounded-full {
    display: none !important;
}

/* 7. FOOTER — centered, old-school layout */
[data-theme="retro"] #contact > div {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 32px !important;
}

[data-theme="retro"] #contact h2 {
    font-size: clamp(2rem, 6vw, 4rem) !important;
    text-align: center !important;
}

/* Form centered */
[data-theme="retro"] #contact > div > .w-full {
    width: 100% !important;
    max-width: 480px !important;
}

/* Social links as small 88x31 badge row */
[data-theme="retro"] .social-btn {
    width: 44px !important;
    height: 22px !important;
    font-size: 10px !important;
}

[data-theme="retro"] #contact .flex.gap-4 {
    justify-content: center !important;
}

[data-theme="retro"] #contact > div > div > p {
    justify-content: center !important;
}

/* "Best viewed in Netscape" style footer text */
[data-theme="retro"] #contact > .max-w-7xl.mt-40 {
    text-align: center !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
}

/* 8. BOTTOM NAV — Windows taskbar style */
[data-theme="retro"] #bottomNav {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: translateX(0) !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    border-top: 2px solid !important;
    border-color: #ffffff #808080 #808080 #ffffff !important;
    padding: 2px 4px !important;
    justify-content: flex-start !important;
}

[data-theme="retro"] .theme-toggle {
    flex: 0 0 auto !important;
    padding: 4px 12px !important;
}

/* 9. TOP NAV — toolbar strip */
[data-theme="retro"] #topNav {
    padding: 4px 16px !important;
}

/* 10. RESPONSIVE */
@media (max-width: 768px) {
    [data-theme="retro"] header {
        padding: 80px 16px 24px !important;
    }

    [data-theme="retro"] #services > .grid > div {
        flex-direction: column !important;
    }

    [data-theme="retro"] #stats .text-center {
        padding: 8px 12px !important;
    }

    [data-theme="retro"] #stats .counter {
        font-size: 1.4rem !important;
    }

    [data-theme="retro"] #bottomNav {
        flex-wrap: wrap !important;
        gap: 2px !important;
    }
}


/* ==========================================
   ABOUT.HTML — STRUCTURAL OVERRIDES
   90s web page layout for about page
   ========================================== */

/* About hero — compact centered banner */
[data-theme="retro"] header.relative.pt-48 {
    text-align: center !important;
    padding-top: 80px !important;
    padding-bottom: 24px !important;
}

[data-theme="retro"] header.relative.pt-48 h1 {
    text-align: center !important;
    font-size: clamp(1.5rem, 5vw, 3rem) !important;
}

[data-theme="retro"] header.relative.pt-48 p {
    text-align: center !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Section label centered */
[data-theme="retro"] header.relative.pt-48 > .flex {
    justify-content: center !important;
}

/* Our Story — single column stacked */
[data-theme="retro"] section.border-t .grid.grid-cols-1.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

/* Stats — hit counter row */
[data-theme="retro"] section.border-t .grid.grid-cols-2 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0 !important;
}

[data-theme="retro"] section.border-t .grid.grid-cols-2 > div {
    border: 2px solid !important;
    border-color: #808080 #ffffff #ffffff #808080 !important;
    background: #000080 !important;
    text-align: center !important;
    padding: 8px 16px !important;
    flex: 0 0 auto !important;
}

[data-theme="retro"] section.border-t .grid.grid-cols-2 > div p:first-child {
    color: #00FF00 !important;
    font-family: 'Courier New', monospace !important;
}

[data-theme="retro"] section.border-t .grid.grid-cols-2 > div p:last-child {
    color: #FFFFFF !important;
    font-size: 9px !important;
}

/* Team section — single column stacked */
[data-theme="retro"] section .grid.grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    max-width: 500px !important;
    margin: 0 auto !important;
}

/* Team cards — centered with beveled border */
[data-theme="retro"] section .grid.grid-cols-1.md\:grid-cols-3 > .tilt-card {
    text-align: center !important;
}

/* Team headshots — smaller, centered */
[data-theme="retro"] section .grid.grid-cols-1.md\:grid-cols-3 > .tilt-card > .aspect-square {
    max-width: 200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 16px !important;
    border: 3px solid !important;
    border-color: #808080 #ffffff #ffffff #808080 !important;
}

/* About footer — centered old-school */
[data-theme="retro"] footer .max-w-7xl.text-center {
    text-align: center !important;
}

[data-theme="retro"] footer .max-w-7xl.text-center h2 {
    font-size: clamp(1.5rem, 5vw, 3rem) !important;
}