/* Generated by scripts/build-css-bundles.mjs. Edit the source files, not this bundle. */

/* source: /content/styles/foundation.css */
@layer foundation, base, components, pages, utilities, overrides;

@layer foundation {
  /* Core style foundation: native CSS variables, theme overrides, and runtime layout defaults. */

  :root {
    --clr-black: #030303;
    --clr-white: #ffffff;
    --clr-gray-400: #a3a3a3;
    --clr-red-500: #ff6b6b;
    --clr-red-600: #cc0000;
    --clr-red-400: #f87171;
    --clr-amber-400: #fbbf24;
    --clr-yellow-400: #ffd93d;
    --clr-blue-400: #42a5f5;
    --clr-blue-500: #3b82f6;
    --clr-blue-600: #2563eb;
    --clr-cyan-400: #22d3ee;
    --clr-emerald-400: #34d399;
    --clr-green-400: #4ade80;
    --clr-emerald-500: #10b981;
    --clr-slate-100: #f8fafc;
    --clr-slate-200: #e2e8f0;
    --clr-slate-300: #cbd5e1;
    --clr-slate-400: #94a3b8;
    --clr-slate-500: #64748b;
    --clr-pink-400: #f472b6;
    --clr-purple-400: #a78bfa;
    /* One accessible brand blue for links and controls on dark surfaces. */
    --primary-color: #1479cc;
    --primary-dark: #075ea8;
    --primary-light: #5fb0ff;
    --text-on-primary: var(--clr-white);
    --accent: #00f3ff;
    --accent-secondary: #7000ff;
    --accent-primary: #00f3ff;
    --accent-gradient-start: #6366f1;
    --accent-gradient-mid: #8b5cf6;
    --accent-gradient-end: #a855f7;
    --youtube-red: var(--clr-red-500);
    --share-blue: #1877f2;
    --home-accent: #a3c2ff;
    --home-accent-warm: #f7d69e;
    --home-accent-cyan: #00f6ff;
    --home-accent-violet: #a78bfa;
    --home-surface: rgb(7 11 22 / 50%);
    --home-text-soft: color-mix(in srgb, var(--clr-white) 78%, transparent);
    --home-vignette: #050811;
    --home-star-opacity: 0.28;
    --bg-primary: var(--clr-black);
    --bg-secondary: var(--clr-black);
    --bg-dark: var(--bg-primary);
    --surface-solid-elevated: color-mix(in srgb, var(--bg-primary) 92%, var(--clr-white) 8%);
    --surface-solid-panel: color-mix(in srgb, var(--bg-primary) 96%, var(--clr-white) 4%);
    --text-primary: #f7f8fa;
    --text-secondary: rgb(255 255 255 / 78%);
    --text-muted: rgb(255 255 255 / 64%);
    --text-main: var(--text-primary);
    --gradient-text: linear-gradient(135deg, #ffffff 0%, #60a5fa 55%, #a78bfa 100%);
    --font-system: -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
    --font-sans: "Manrope", var(--font-system);
    --font-display: "Space Grotesk", "Manrope", var(--font-system);
    --font-mono: "SFMono-Regular", consolas, "Liberation Mono", monospace;
    --font-primary: var(--font-sans);

    /* Semantic type scale: shared by pages and components. */
    --type-xs: 0.75rem;
    --type-sm: 0.875rem;
    --type-body: 1rem;
    --type-lg: 1.125rem;
    --type-xl: 1.25rem;
    --type-2xl: clamp(1.5rem, 2.2vw, 2rem);
    --type-3xl: clamp(1.875rem, 3.2vw, 2.75rem);
    --type-4xl: clamp(2.25rem, 4.8vw, 4rem);
    --type-display: clamp(2.75rem, 6.5vw, 5.5rem);
    --leading-tight: 1.12;
    --leading-snug: 1.35;
    --leading-body: 1.6;
    --leading-relaxed: 1.72;
    --tracking-tight: -0.025em;
    --tracking-wide: 0.08em;
    --measure-text: 68ch;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --size-0-5: 0.5px;
    --size-1: 1px;
    --size-2: 2px;
    --size-3: 3px;
    --size-4: 4px;
    --size-5: 5px;
    --size-6: 6px;
    --size-7: 7px;
    --size-8: 8px;
    --size-9: 9px;
    --size-10: 10px;
    --size-11: 11px;
    --size-12: 12px;
    --size-13: 13px;
    --size-14: 14px;
    --size-15: 15px;
    --size-16: 16px;
    --size-18: 18px;
    --size-20: 20px;
    --size-22: 22px;
    --size-24: 24px;
    --size-28: 28px;
    --size-30: 30px;
    --size-32: 32px;
    --size-36: 36px;
    --size-38: 38px;
    --size-40: 40px;
    --size-44: 44px;
    --size-46: 46px;
    --size-48: 48px;
    --size-52: 52px;
    --size-60: 60px;
    --size-80: 80px;
    --size-100: 100px;
    --size-140: 140px;
    --size-150: 150px;
    --size-200: 200px;
    --size-300: 300px;
    --size-320: 320px;
    --size-390: 390px;
    --size-400: 400px;
    --size-420: 420px;
    --size-450: 450px;
    --size-460: 460px;
    --size-520: 520px;
    --size-540: 540px;
    --size-580: 580px;
    --size-600: 600px;
    --size-620: 620px;
    --size-720: 720px;
    --size-740: 740px;
    --size-760: 760px;
    --size-780: 780px;
    --size-999: 999px;
    --size-1120: 1120px;
    --size-1200: 1200px;
    --size-1440: 1440px;
    --gap-xs: var(--space-2);
    --gap-sm: var(--space-4);
    --gap-md: var(--space-8);
    --spacing-sm: var(--space-4);
    --spacing-md: var(--space-6);
    --spacing-lg: var(--space-8);
    --spacing-xl: var(--space-12);
    --menu-height: 76px;
    --menu-height-mobile: 64px;
    --footer-height: 76px;
    --footer-height-mobile: 64px;
    --container-width: 1600px;
    --container-width-wide: 1800px;
    --container-width-narrow: 860px;
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    --border-color: rgb(255 255 255 / 10%);
    --card-border: rgb(255 255 255 / 8%);
    --card-bg: rgb(255 255 255 / 3%);
    --glass-bg: rgb(0 0 0 / 95%);
    --shadow-md: 0 4px 8px rgb(0 0 0 / 15%);
    --shadow-lg: 0 8px 16px rgb(0 0 0 / 20%);
    /* Blur budget: backdrop desktop <= 20px, mobile <= 14px, compact surfaces <= 12px. */
    --budget-blur-backdrop-compact: 12px;
    --budget-blur-backdrop-desktop: 20px;
    --budget-blur-backdrop-mobile: 14px;
    --blur-md: blur(var(--budget-blur-backdrop-compact));
    --blur-lg: blur(var(--budget-blur-backdrop-desktop));
    --z-none: 0;
    --z-behind: -1;
    --z-base: 1;
    --z-elevated: 2;
    --z-loader-content: 10;
    --z-sticky: 500;
    --z-fixed: 1000;
    --z-project-hud: 20;
    --z-project-overlay: 25;
    --z-project-launch: 35;
    --z-overlay: 9999;
    --z-tooltip: 10000;
    --z-top-elements: 10050;
    --z-robot: 10002;
    --z-site-top: 100000;
    --z-top-overlay: 200000;
    --z-typewriter: 1010;
    --z-typewriter-fixed: 1012;
    --overlay-layer-backdrop: calc(var(--z-overlay) - var(--z-base) - var(--z-base));
    --overlay-layer-top-backdrop: var(--z-top-overlay);
    --overlay-layer-top-surface: calc(var(--z-top-overlay) + var(--z-base));
    --component-header-bg: rgb(28 28 30 / 40%);
    --component-blur-radius: 16px;
    --component-pill-radius: 26px;
    --component-separator: rgb(255 255 255 / 12%);
    --component-accent-blue: var(--primary-color);
    --component-accent-blue-hover: var(--primary-dark);
    --component-label-primary: rgb(255 255 255 / 95%);
    --component-label-secondary: rgb(255 255 255 / 70%);
    --component-fill-primary: rgb(255 255 255 / 10%);
    --component-fill-secondary: rgb(255 255 255 / 15%);
    --component-shadow-depth-2: 0 8px 32px rgb(0 0 0 / 20%);
    --component-spring-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --component-spring-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --component-spring-quick: cubic-bezier(0.4, 0, 0.2, 1);
    --footer-surface-bg: rgb(10 10 10 / 95%);
    --footer-quiet-text: rgb(255 255 255 / 60%);
    --footer-soft-fill: rgb(255 255 255 / 5%);
    --footer-soft-fill-2: rgb(255 255 255 / 8%);
    --footer-soft-fill-3: rgb(255 255 255 / 12%);
    --motion-duration-instant: 0.01ms;
    --motion-duration-fast: 150ms;
    --motion-duration-base: 250ms;
    --motion-duration-smooth: 350ms;
    --motion-duration-slow: 400ms;
    --motion-duration-view-fast: 180ms;
    --motion-duration-view-base: 240ms;
    --motion-duration-loader: 500ms;
    --motion-ease-standard: var(--component-spring-quick);
    --motion-ease-smooth: var(--component-spring-smooth);
    --motion-ease-bounce-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
    --motion-ease-enter: cubic-bezier(0, 0, 0.2, 1);
    --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
    --motion-ease-loader: cubic-bezier(0.4, 0, 0, 1);
    --transition-fast: var(--motion-duration-fast) var(--motion-ease-standard);
    --transition-base: var(--motion-duration-base) var(--motion-ease-standard);
    --transition-smooth: var(--motion-duration-smooth) var(--motion-ease-smooth);
    --transition-slow: var(--motion-duration-slow) var(--motion-ease-smooth);
    --motion-reduce-duration: var(--motion-duration-instant);
    --motion-reduce-iterations: 1;
    --ease-standard: var(--motion-ease-standard);
    --ease-bounce-soft: var(--motion-ease-bounce-soft);
    --scroll-fade-range: entry 5% entry 40%;
    --vt-page-old-duration: var(--motion-duration-view-fast);
    --vt-page-new-duration: var(--motion-duration-view-base);
    --vt-loader-duration: var(--motion-duration-loader);
    --vt-chat-out-duration: var(--motion-duration-base);
    --vt-chat-in-duration: var(--motion-duration-smooth);
    --vt-loader-ease: var(--motion-ease-loader);
    --vt-chat-out-ease: var(--motion-ease-exit);
    --vt-chat-in-ease: var(--motion-ease-enter);
    --transform-lift-sm: translateY(-2px);
    --card-pad: var(--space-8);
    --card-transition-smooth: var(--transition-smooth);
    --card-shadow-hover: 0 18px 46px rgb(0 0 0 / 38%);
    --card-blur-base: 10px;
    --transform-hover-card-subtle: translateY(-4px);
    --btn-padding-y: 0.75rem;
    --btn-padding-x: 1.5rem;
    --btn-min-width: 160px;
    --btn-min-width-mobile: 120px;
    --btn-font-size: var(--type-body);
    --btn-focus-outline: 2px solid #fff;
    --btn-focus-offset: 3px;
    --btn-focus-radius: 6px;
    --btn-shadow-primary: 0 0 12px color-mix(in srgb, var(--primary-color) 30%, transparent);
    --btn-shadow-primary-hover: 0 0 18px color-mix(in srgb, var(--primary-color) 55%, transparent);
    --btn-shine-bg: rgb(255 255 255 / 20%);
    --btn-focus-bg: color-mix(in srgb, var(--primary-color) 12%, transparent);
    --menu-header-side-gap: 32px;
    --menu-header-height: 52px;
    --menu-header-padding-inline: 16px;
    --menu-header-max-width: 1440px;
    --menu-header-min-width-desktop: 920px;
    --menu-header-backdrop-blur: var(--budget-blur-backdrop-desktop);
    --menu-icon-size: var(--size-16);
    --menu-action-icon-size: var(--size-18);
    --menu-item-padding-y: 8px;
    --menu-item-padding-x: 12px;
    --menu-item-min-height: 44px;
    --menu-item-radius: 18px;
    --menu-item-hover-shadow: 0 4px 12px rgb(0 0 0 / 10%);
    --menu-search-gap: 10px;
    --menu-search-min-height: 44px;
    --menu-search-padding: 6px 8px 6px 12px;
    --menu-search-radius: 16px;
    --menu-search-results-top-offset: 12px;
    --menu-search-results-max-height: min(62vh, 460px);
    --menu-search-results-padding: 10px;
    --menu-search-results-radius: 20px;
    --modal-overlay-bg: rgb(0 0 0 / 80%);
    --modal-overlay-blur: var(--budget-blur-backdrop-compact);
    --modal-panel-bg: rgb(2 6 23 / 90%);
    --modal-panel-border: 1px solid rgb(255 255 255 / 10%);
    --modal-panel-radius: 1rem;
    --modal-panel-shadow: 0 28px 72px rgb(0 0 0 / 62%);
    --modal-control-bg: rgb(255 255 255 / 10%);
    --modal-control-bg-hover: rgb(255 255 255 / 20%);
    --modal-control-text: #fff;
    --videos-hero-overlay-height: 300px;
    --videos-play-button-size: 90px;
    --videos-play-icon-size: 40px;
    --videos-card-shadow-base: 0 20px 40px rgb(0 0 0 / 45%);
    --videos-card-shadow-hover: 0 30px 60px rgb(0 0 0 / 60%);
    --videos-button-inset-shadow: inset 0 -2px 8px rgb(0 0 0 / 30%);
    --videos-icon-drop-shadow: drop-shadow(0 2px 4px rgb(0 0 0 / 30%));
    --about-profile-size: 120px;
    --projects-bg-gradient-start: #0b0b15;
    --projects-bg-gradient-end: #000000;
    --projects-hud-border: rgb(255 255 255 / 15%);
    --projects-hud-bg: rgb(10 10 16 / 85%);
    --projects-hud-shadow: 0 10px 40px rgb(0 0 0 / 60%);
    --projects-launch-shadow: 0 24px 56px rgb(0 0 0 / 52%);
    --projects-launch-shadow-error: 0 24px 56px rgb(0 0 0 / 56%);
    --footer-toggle-knob-shadow: 0 1px 3px rgb(0 0 0 / 20%);
    --surface-toast-bg: #1a1a1a;
    --surface-toast-muted: #999;
    --state-error-text: #ef4444;
    --state-error-bg: rgb(0 0 0 / 80%);
    --state-error-cta: #8b8bff;
    --light-bg-primary: #1e3a8a;
    --light-bg-secondary: #1e40af;
    --light-text-primary: #f8fafc;
    --light-text-secondary: #e2e8f0;
    --light-text-muted: #cbd5e1;
    --light-primary: #93c5fd;
    --light-border: #3b82f6;
    --size-r-0-1: 0.1rem;
    --size-r-0-18: 0.18rem;
    --size-r-0-25: 0.25rem;
    --size-r-0-3: 0.3rem;
    --size-r-0-35: 0.35rem;
    --size-r-0-4: 0.4rem;
    --size-r-0-45: 0.45rem;
    --size-r-0-5: 0.5rem;
    --size-r-0-52: 0.52rem;
    --size-r-0-55: 0.55rem;
    --size-r-0-6: 0.6rem;
    --size-r-0-62: 0.62rem;
    --size-r-0-65: 0.65rem;
    --size-r-0-7: 0.7rem;
    --size-r-0-72: 0.72rem;
    --size-r-0-75: 0.75rem;
    --size-r-0-78: 0.78rem;
    --size-r-0-8: 0.8rem;
    --size-r-0-85: 0.85rem;
    --size-r-0-9: 0.9rem;
    --size-r-0-95: 0.95rem;
    --size-r-1: 1rem;
    --size-r-1-1: 1.1rem;
    --size-r-1-15: 1.15rem;
    --size-r-1-2: 1.2rem;
    --size-r-1-25: 1.25rem;
    --size-r-1-35: 1.35rem;
    --size-r-1-4: 1.4rem;
    --size-r-1-5: 1.5rem;
    --size-r-1-6: 1.6rem;
    --size-r-2: 2rem;
    --size-r-2-5: 2.5rem;
    --size-r-3: 3rem;
    --size-r-4: 4rem;
    --size-0: 0px;
    --size-50: 50px;
    --size-280: 280px;
    --size-480: 480px;
    --size-r-1-75: 1.75rem;
    --z-behind-deep: -5;
    --legal-link-color: #0a84ff;
    --legal-link-hover: #64d2ff;
    --legal-link-soft: rgb(10 132 255 / 10%);
    --legal-link-soft-border: rgb(10 132 255 / 30%);
    --legal-link-outline: rgb(10 132 255 / 80%);
    --legal-back-link-start: #0058d8;
    --legal-back-link-end: #004c99;
    --legal-back-link-hover-start: #0066cc;
    --legal-print-border: #ccc;
    --three-earth-error-bg: #3c1414;
    --three-earth-error-width: var(--size-300);
    --size-26: 26px;
    --size-34: 34px;
    --size-42: 42px;
    --size-64: 64px;
    --size-72: 72px;
    --size-76: 76px;
    --size-88: 88px;
    --size-110: 110px;
    --size-120: 120px;
    --size-236: 236px;
    --size-260: 260px;
    --size-360: 360px;
    --size-380: 380px;
    --size-560: 560px;
    --size-700: 700px;
    --size-900: 900px;
    --menu-rgb-10-16-28: rgb(10 16 28);
    --menu-rgb-12-18-30: rgb(12 18 30);
    --menu-rgb-15-25-42: rgb(15 25 42);
    --menu-rgb-17-27-44: rgb(17 27 44);
    --menu-rgb-22-35-56: rgb(22 35 56);
    --menu-rgb-71-145-255: rgb(71 145 255);
    --menu-rgb-110-171-255: rgb(110 171 255);
    --menu-rgb-121-174-255: rgb(121 174 255);
    --menu-rgb-125-177-255: rgb(125 177 255);
    --menu-rgb-125-180-255: rgb(125 180 255);
    --menu-rgb-126-178-255: rgb(126 178 255);
    --menu-rgb-151-193-250: rgb(151 193 250);
    --menu-rgb-151-197-255: rgb(151 197 255);
    --menu-rgb-162-214-255: rgb(162 214 255);
    --menu-rgb-174-210-255: rgb(174 210 255);
    --menu-rgb-182-201-226: rgb(182 201 226);
    --menu-rgb-186-213-250: rgb(186 213 250);
    --menu-rgb-190-220-255: rgb(190 220 255);
    --menu-rgb-192-210-234: rgb(192 210 234);
    --menu-rgb-206-227-255: rgb(206 227 255);
    --menu-rgb-215-225-241: rgb(215 225 241);
    --menu-rgb-215-241-255: rgb(215 241 255);
    --menu-rgb-216-233-255: rgb(216 233 255);
    --menu-rgb-228-239-255: rgb(228 239 255);
    --menu-rgb-240-247-255: rgb(240 247 255);
    --menu-rgb-255-194-70: rgb(255 194 70);
    --menu-accent-alt: #3b9aff;
    --menu-frost-text: #d7f1ff;
    --z-menu-foreground: 2;
    --size-25: 25px;
    --size-90: 90px;
    --size-62: 62px;
    --size-70: 70px;
    --size-180: 180px;
    --size-240: 240px;
    --robot-cyan: #40e0d0;
    --robot-sky: #38bdf8;
    --robot-slate-800: #1e293b;
    --robot-slate-600: #475569;
    --robot-slate-100: #f1f5f9;
    --robot-green: #4ade80;
    --robot-red: #ff4444;
    --robot-red-strong: #ff0000;
    --robot-yellow: #ffff00;
    --robot-green-strong: #00ff00;
    --robot-rgb-13-20-36: rgb(13 20 36);
    --robot-rgb-15-23-42: rgb(15 23 42);
    --size-1000: 1000px;
    --size-35: 35px;
    --size-1400: 1400px;
    --size-1500: 1500px;
    --size-820: 820px;
    --size-r-3-5: 3.5rem;
    --z-floating: 100;
    --clr-violet-500: #8b5cf6;
    --clr-pink-500: #ec4899;
    --clr-blue-300: #60a5fa;
    --clr-gray-250: #e5e5e5;
    --blog-rgb-10-10-20: rgb(10 10 20);
    --blog-rgb-10-10-30: rgb(10 10 30);
    --blog-rgb-15-15-40: rgb(15 15 40);
    --blog-rgb-30-30-60: rgb(30 30 60);
  }

  html[data-theme="light"] {
    color-scheme: light;
  }

  html[data-theme="dark"] {
    color-scheme: dark;
  }

  :root {
    --viewport-height: 100vh;
    --safe-top: env(safe-area-inset-top, var(--size-0));
    --safe-right: env(safe-area-inset-right, var(--size-0));
    --safe-bottom: env(safe-area-inset-bottom, var(--size-0));
    --safe-left: env(safe-area-inset-left, var(--size-0));
    --content-top-offset: calc(var(--menu-height) + var(--safe-top));
    --content-bottom-offset: calc(var(--footer-height) + var(--safe-bottom));
    --section-viewport-height: calc(
      var(--viewport-height) - var(--content-top-offset) - var(--content-bottom-offset)
    );
    --full-section-viewport-height: calc(var(--viewport-height) - var(--content-top-offset));
    --route-header-bg: var(--component-header-bg);
    --route-header-border: var(--component-separator);
    --route-header-top: calc(var(--size-12) + var(--safe-top));
    --route-header-mobile-top: calc(var(--size-8) + var(--safe-top));
    --route-header-mobile-height: var(--size-48);
    --route-header-mobile-padding-top: 0px;
    --route-header-mobile-align-items: center;
  }

  :root[data-theme="light"] {
    --bg-primary: var(--light-bg-primary);
    --bg-secondary: var(--light-bg-secondary);
    --text-primary: var(--light-text-primary);
    --text-secondary: var(--light-text-secondary);
    --text-muted: var(--light-text-muted);
    --primary-color: var(--light-primary);
    --primary-dark: #60a5fa;
    --primary-light: #dbeafe;
    --text-on-primary: #0f172a;
    --border-color: var(--light-border);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 25%);
    --shadow-lg: 0 8px 24px rgb(0 0 0 / 30%);
  }

  :root[data-theme="dark"] {
    --primary-color: #1479cc;
    --primary-dark: #075ea8;
    --primary-light: #5fb0ff;
    --text-on-primary: var(--clr-white);
    --accent: #00f3ff;
    --accent-secondary: #7000ff;
    --bg-primary: #030303;
    --bg-secondary: #030303;
    --text-primary: #f7f8fa;
    --text-secondary: rgb(255 255 255 / 78%);
    --text-muted: rgb(255 255 255 / 64%);
    --border-color: rgb(255 255 255 / 10%);
    --component-header-bg: rgb(28 28 30 / 40%);
    --component-separator: rgb(255 255 255 / 12%);
    --component-fill-primary: rgb(255 255 255 / 10%);
    --component-fill-secondary: rgb(255 255 255 / 15%);
    --shadow-md: 0 4px 8px rgb(0 0 0 / 15%);
    --shadow-lg: 0 8px 16px rgb(0 0 0 / 20%);
  }

  @supports (height: 100svh) {
    :root {
      --viewport-height: 100svh;
    }
  }

  @supports (height: 100dvh) {
    :root {
      --viewport-height: 100dvh;
    }
  }

  @media (width <= 768px) {
    :root {
      --menu-height: var(--menu-height-mobile);
      --footer-height: var(--footer-height-mobile);
    }
  }

  @media (min-width: 1600px) {
    :root {
      --container-width: var(--container-width-wide);
    }
  }

  @media (width <= 640px) {
    :root {
      --blur-md: blur(8px);
      --blur-lg: blur(var(--budget-blur-backdrop-compact));
      --card-blur-base: 6px;
      --component-blur-radius: 10px;
      --menu-header-backdrop-blur: var(--budget-blur-backdrop-mobile);
      --modal-overlay-blur: 8px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --transition-fast: 0s;
      --transition-base: 0s;
      --transition-smooth: 0s;
      --transition-slow: 0s;
    }

    *,
    *::before,
    *::after {
      animation-duration: var(--motion-reduce-duration) !important;
      animation-iteration-count: var(--motion-reduce-iterations) !important;
      transition-duration: var(--motion-reduce-duration) !important;
      scroll-behavior: auto !important;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    :root {
      --blur-md: none;
      --blur-lg: none;
      --card-blur-base: 0px;
      --component-blur-radius: 0px;
      --menu-header-backdrop-blur: 0px;
      --modal-overlay-blur: 0px;
      --overlay-backdrop-filter-soft: none;
      --overlay-backdrop-filter-immersive: none;
    }

    :where(
      .site-header,
      .site-menu.open,
      .menu-search__panel,
      .section-dots,
      .skill-radar,
      .contact-form-card,
      .projects-discovery-card,
      .hud-panel.visible,
      .blog-card,
      .blog-article,
      body.blog-page .btn-back,
      .about-main .card,
      .about-main .btn-outline,
      .app-popup.visible,
      .robot-chat-window.open,
      .chat-header,
      .chat-input-area,
      .three-earth-fallback
    ) {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }

    :where(
      .site-header,
      .site-menu.open,
      .menu-search__panel,
      .section-dots,
      .contact-form-card,
      .projects-discovery-card,
      .hud-panel.visible,
      .blog-card,
      .blog-article,
      body.blog-page .btn-back,
      .about-main .card,
      .about-main .btn-outline,
      .app-popup.visible,
      .robot-chat-window.open,
      .chat-header,
      .chat-input-area
    ) {
      background: var(--surface-solid-elevated) !important;
    }

    :where(.menu-search__panel, .robot-chat-window.open, .chat-header, .chat-input-area) {
      background: var(--surface-solid-panel) !important;
    }
  }

  @media (forced-colors: active) {
    :root {
      --bg-primary: Canvas;
      --bg-secondary: Canvas;
      --text-primary: CanvasText;
      --text-secondary: CanvasText;
      --text-muted: GrayText;
      --component-separator: CanvasText;
      --card-border: CanvasText;
      --primary-color: Highlight;
    }

    :where(
      .site-header,
      .site-menu.open,
      .menu-search__panel,
      .section-dots,
      .skill-radar,
      .contact-form-card,
      .projects-discovery-card,
      .hud-panel.visible,
      .blog-card,
      .blog-article,
      body.blog-page .btn-back,
      .about-main .card,
      .about-main .btn-outline,
      .app-popup.visible,
      .robot-chat-window.open,
      .chat-header,
      .chat-input-area
    ) {
      forced-color-adjust: auto;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      background: Canvas !important;
      border-color: CanvasText !important;
      box-shadow: none !important;
      color: CanvasText !important;
    }

    :where(a, button, [role="button"], input, select, textarea):focus-visible {
      outline: 2px solid Highlight !important;
      outline-offset: 3px;
      box-shadow: none !important;
    }
  }

  :where(img, svg, picture, video, iframe) {
    display: block;
    max-width: 100%;
    height: auto;
  }

  .snap-page,
  .snap-page body {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  *::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
    display: none;
  }
}

/* source: /content/styles/main.css */
/* ===== OPTIMIZED INDEX.CSS v3.1 ===== */

/* ===== ACCESSIBILITY & UTILITIES ===== */

/* Screen Reader Only / Visually Hidden */
.sr-only,
.visually-hidden {
  position: absolute !important;
  width: var(--size-1) !important;
  height: var(--size-1) !important;
  padding: 0 !important;
  margin: calc(var(--size-1) * -1) !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip-to-main-content link (visible on focus for keyboard users) */
.skip-link:focus {
  position: fixed !important;
  top: calc(var(--space-4) + var(--safe-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-site-top);
  width: auto !important;
  height: auto !important;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  margin: 0 !important;
  clip-path: none !important;
  white-space: normal !important;
  background: var(--primary-color);
  color: var(--clr-white);
  font-size: var(--btn-font-size);
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
  box-shadow: var(--shadow-lg);
}

/* Utility: Hide element completely */
.hidden {
  display: none !important;
}

/* Focus Indicators for all interactive elements */
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--btn-focus-outline);
  outline-offset: var(--btn-focus-offset);
  box-shadow: 0 0 0 var(--size-4) color-mix(in srgb, var(--primary-color) 55%, transparent);
  background: var(--btn-focus-bg);
  border-radius: var(--btn-focus-radius);
  transition:
    box-shadow var(--transition-fast),
    outline-color var(--transition-fast);
}

/* ===== END ACCESSIBILITY & UTILITIES ===== */

/* ===== BUTTON STYLES (with CSS Nesting) ===== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--btn-font-size);
  font-weight: 500;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    background-color var(--transition-base);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  min-width: var(--btn-min-width);
  text-align: center;
  line-height: var(--leading-snug);

  /* Primary variant */
  &.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--text-on-primary);
    box-shadow: var(--btn-shadow-primary);

    &:hover {
      box-shadow: var(--btn-shadow-primary-hover);
      transform: var(--transform-lift-sm);

      &::before {
        left: 100%;
      }
    }

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: var(--btn-shine-bg);
      transition: left var(--transition-smooth);
      pointer-events: none;
    }
  }

  /* Secondary variant */
  &.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: var(--size-2) solid var(--primary-color);

    &:hover {
      border-color: var(--primary-color);
      color: var(--primary-color);
    }
  }

  /* Mobile adjustments */
  @media (width <= 480px) {
    min-width: var(--btn-min-width-mobile);
  }
}

/* ===== END BUTTON STYLES ===== */

/* ===== LAYOUT & SECTIONS ===== */

main {
  margin-top: 0 !important;
  padding: 0 !important;
  min-height: var(--section-viewport-height);
}

.section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: var(--section-viewport-height);
  height: var(--section-viewport-height);
  display: flex;
  flex-direction: column;
  justify-content: center;

  @supports (content-visibility: auto) {
    /* OPTIMIZATION: content-visibility allows browser to skip rendering work for off-screen sections */
    content-visibility: auto;
    /* Fallback size estimation to prevent scrollbar jumping */
    contain-intrinsic-size: auto var(--section-viewport-height);
  }
}

/* Home text sections may exceed the available viewport on short screens. */
.section.hero,
.section.section3 {
  height: auto;
  padding: 0;
}

@media (width <= 768px) {
  .section.features,
  .section.about {
    padding-block: clamp(var(--size-r-2-5), 8vw, var(--size-r-3-5));
  }
}

/* ===== END LAYOUT & SECTIONS ===== */

/* ===== BASE STYLES ===== */

/* Base Styles */
html {
  width: 100%;
  min-height: 100%;
  min-height: -webkit-fill-available;
  background: var(--bg-primary);
  scroll-behavior: smooth;
  scroll-padding-top: var(--content-top-offset);
  scroll-padding-bottom: var(--content-bottom-offset);
  scrollbar-gutter: stable;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

.snap-page {
  scroll-snap-type: y mandatory;
}

body {
  width: 100%;
  min-height: var(--viewport-height);
  overflow-x: hidden;
  transition: padding-bottom var(--transition-base);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings:
    "kern" 1,
    "liga" 1,
    "calt" 1;
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  background: transparent;
  color: var(--text-primary);
  margin: 0;
  padding-top: var(--content-top-offset);
  padding-bottom: var(--content-bottom-offset);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  position: relative;
}

:where(button, input, textarea, select) {
  font: inherit;
  color: inherit;
}

@supports (-webkit-touch-callout: none) {
  body {
    min-height: -webkit-fill-available;
  }
}

:where(:target) {
  scroll-margin-block-start: calc(var(--content-top-offset) + var(--space-4));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Container System */
.container {
  width: min(100%, var(--container-width));
  margin-inline: auto;
  padding-inline: max(clamp(var(--size-r-0-5), 4vw, var(--size-r-1-5)), var(--safe-left));
  box-sizing: border-box;
}

/* Page-specific container overrides — centralized */
.contact-page main.container {
  /* Contact page is narrower and gets extra inner padding */
  max-width: var(--size-760);
  padding: var(--space-3);
  min-height: var(--section-viewport-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  align-items: stretch;
}

/* ===== END BASE STYLES ===== */

/* ===== TYPOGRAPHY ===== */

@layer base {
  /* Section Headers */
  .section-header {
    text-align: center;
    margin-bottom: clamp(var(--size-r-1-75), 3vw, var(--size-r-2-5));
    margin-top: 0;
    padding: 0;
    position: relative;
    z-index: var(--z-elevated);
  }

  .section-title {
    position: relative;
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--type-3xl);
    margin-bottom: clamp(var(--size-r-1), 2vw, var(--size-r-1-25));
    padding: 0;
    font-weight: 700;
    background: var(--gradient-text);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: var(--tracking-tight);

    &::after {
      content: "";
      position: absolute;
      bottom: calc(var(--space-2) * -1);
      left: 50%;
      transform: translateX(-50%);
      width: clamp(var(--size-50), 8vw, var(--size-70));
      height: var(--space-1);
      background: linear-gradient(
        90deg,
        var(--primary-color) 0%,
        var(--primary-light) 50%,
        var(--primary-color) 100%
      );
      border-radius: var(--radius-full);
      box-shadow: var(--btn-shadow-primary-hover);
    }
  }

  .section-subtitle {
    max-width: var(--measure-text);
    margin-inline: auto;
    font-size: var(--type-lg);
    color: var(--text-secondary);
    margin-bottom: clamp(var(--size-r-1-5), 3vw, var(--size-r-2));
    font-weight: 400;
    line-height: var(--leading-body);
  }

  .text-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: 0;
    font-size: var(--type-xs);
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  /* Typography */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-block-start: 0;
    font-weight: 700;
    line-height: var(--leading-tight);
    margin-bottom: var(--spacing-md);
    letter-spacing: var(--tracking-tight);
  }

  @supports (text-wrap: balance) {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .section-title {
      text-wrap: balance;
    }
  }

  h1 {
    font-family: var(--font-display);
    font-size: var(--type-4xl);
  }

  h2 {
    font-family: var(--font-display);
    font-size: var(--type-3xl);
  }

  h3 {
    font-size: var(--type-2xl);
  }

  h4 {
    font-size: var(--type-xl);
  }

  h5 {
    font-size: var(--type-lg);
  }

  h6 {
    font-size: var(--type-body);
  }

  p {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
    line-height: var(--leading-body);
    text-wrap: pretty;
  }

  a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-fast);

    &:hover {
      color: var(--primary-light);
    }
  }
}

/* ===== END TYPOGRAPHY ===== */

/* ===== UTILITIES ===== */

/* Utilities */

.u-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
}

.u-inline-center {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
}

.u-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.u-row {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}

.u-wrap {
  flex-wrap: wrap;
}

.u-between {
  justify-content: space-between;
}

/* ===== END UTILITIES ===== */

/* ===== GLOBAL COMPONENTS ===== */

::selection {
  background: var(--primary-color);
  color: var(--clr-white);
}

/* ===== END GLOBAL COMPONENTS ===== */

/* ===== RESPONSIVE: MOBILE & TABLET ===== */

/* Tablet and Mobile breakpoint */
@media (width <= 768px) {
  .section {
    padding: var(--spacing-xl) 0;
  }
}

/* Mobile breakpoint (small) */
@media (width <= 600px) {
  .about-page main.container {
    padding-top: calc(var(--menu-height-mobile) + var(--space-5));
  }

  /* h1 size is already handled by clamp() in base typography */

  .card {
    padding: var(--space-6);
  }
}

/* Mobile breakpoint (narrow) */
@media (width <= 480px) {
  .container {
    max-width: 100%;
    padding-inline: max(var(--space-2), var(--safe-left));
  }

  .container p,
  .container h1,
  .container h2,
  .container h3,
  .container h4,
  .container h5,
  .container h6 {
    overflow-wrap: anywhere;
  }
}

/* Mobile breakpoint (compact) */
@media (width <= 375px) {
  .container {
    padding-inline: max(var(--space-1), var(--safe-left));
  }

  .section {
    padding: var(--spacing-lg) 0;
  }
}

/* ===== END RESPONSIVE ===== */

/* ===== PRINT STYLES ===== */

@media print {
  body {
    color: var(--clr-black);
    background: var(--clr-white);
    font-size: 12pt;
  }

  .container {
    max-width: var(--size-900);
    margin: 0 auto;
    width: 100%;
  }

  a {
    color: var(--clr-black);
    text-decoration: underline;
  }

  button,
  .btn {
    display: none;
  }

  * {
    animation: none;
    transition: none;
  }
}

.alias-page-main {
  padding: var(--space-12) var(--space-4);
}

.alias-page-card {
  max-width: var(--container-width-narrow);
  margin: 0 auto;
  padding: clamp(var(--space-4), calc(var(--space-2) + 2vw), var(--card-pad));
  background: var(--bg-secondary);
  border: var(--size-1) solid var(--border-color);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  container-name: alias-card;
  transition:
    transform var(--card-transition-smooth),
    box-shadow var(--card-transition-smooth),
    border-color var(--card-transition-smooth);

  &:hover {
    transform: var(--transform-hover-card-subtle);
    border-color: var(--primary-color);
    box-shadow: var(--card-shadow-hover);
  }

  &:focus-visible {
    outline: var(--btn-focus-outline);
    outline-offset: var(--space-1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .alias-page-card {
    transition: none;
  }

  .alias-page-card:hover {
    transform: none;
  }
}

.error-boundary-fallback {
  margin: var(--space-8) auto;
  max-width: var(--size-600);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  text-align: center;
  color: color-mix(in srgb, var(--clr-white) 82%, transparent);
  background: color-mix(in srgb, var(--clr-black) 50%, transparent);

  &__title {
    margin-bottom: var(--space-4);
    color: var(--clr-red-500);
  }

  &__action {
    margin-top: var(--space-4);
    border: 0;
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-6);
    cursor: pointer;
    font-size: var(--btn-font-size);
    color: var(--clr-white);
    background: var(--primary-color);
  }
}

/* ===== END PRINT STYLES ===== */

/* source: /content/components/menu/styles/menu-base.css */
/* ========================================================================
   Menu Base
   Shared shell, header, typography, navigation and default controls.
   ======================================================================== */

/* ===== Custom Element Layout ===== */
site-menu {
  container-type: inline-size;
  container-name: sitemenu;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 auto;
  min-width: 0;
}

.menu-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ===== Skip Links (WCAG 2.1 AA) ===== */
.skip-links {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-tooltip);
  width: 100%;
  background: transparent;
  pointer-events: none;
}

.skip-links .skip-link {
  position: absolute;
  top: calc(var(--menu-header-padding-inline) + var(--safe-top));
  left: 50%;
  transform: translateX(-50%);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  background: var(--glass-bg);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--type-sm);
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: var(--size-2) solid var(--accent-primary);
  box-shadow: var(--shadow-md);
  transition:
    clip-path 0.3s ease,
    box-shadow 0.2s ease;
  pointer-events: auto;
  white-space: nowrap;
  z-index: calc(var(--z-tooltip) + var(--z-base));
  clip-path: inset(0 0 100% 0);
}

.skip-links .skip-link:focus {
  clip-path: inset(0);
  outline: var(--size-3) solid var(--accent-primary);
  outline-offset: var(--space-1);
  box-shadow: var(--shadow-lg);
}

.skip-links .skip-link:hover:focus {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

/* ===== Icon System ===== */
.nav-icon-wrapper,
.icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--space-2);
  vertical-align: middle;
  flex-shrink: 0;
}

.nav-icon {
  width: var(--menu-icon-size);
  height: var(--menu-icon-size);
  min-width: var(--menu-icon-size);
  min-height: var(--menu-icon-size);
  fill: currentcolor;
  flex-shrink: 0;
  filter: drop-shadow(
    0 var(--size-0-5) var(--size-1) color-mix(in srgb, var(--clr-black) 15%, transparent)
  );
  transition:
    transform 0.2s var(--component-spring-quick),
    opacity 0.2s var(--component-spring-quick),
    filter 0.2s var(--component-spring-quick);
  opacity: 0.85;
  display: inline-block;
  position: relative;
}

.icon-fallback {
  font-size: var(--type-sm);
  flex-shrink: 0;
  opacity: 0.85;
  line-height: 1;
}

.icon-fallback--hidden {
  display: none;
}

.site-menu .lang-text {
  margin-left: var(--space-1);
  font-size: 0.9em;
  font-weight: 600;
}

.nav-icon-wrapper .nav-icon,
.icon-container .nav-icon {
  margin-right: 0;
}

/* ===== Typography ===== */
.site-menu__list li,
.site-menu__list li a {
  font-family: var(--font-primary);
  font-feature-settings:
    "kern" 1,
    "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--type-body);
  line-height: var(--leading-snug);
  font-weight: 500;
}

/* ===== Header ===== */
.site-header {
  position: fixed;
  top: var(--route-header-top);
  left: 50%;
  width: calc(100% - var(--menu-header-side-gap) - var(--safe-left) - var(--safe-right));
  max-width: var(--menu-header-max-width);
  min-width: 0;
  height: var(--menu-header-height);
  padding: 0 var(--menu-header-padding-inline);
  background: var(--component-header-bg);
  backdrop-filter: blur(var(--menu-header-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--menu-header-backdrop-blur));
  border-radius: var(--component-pill-radius);
  border: var(--size-1) solid var(--component-separator);
  box-shadow: var(--component-shadow-depth-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: var(--z-overlay);
  animation: headerAppear 0.8s var(--component-spring-bounce) forwards;
  opacity: 0;
  transform: translateX(-50%) translateY(calc(var(--size-20) * -1)) scale(0.95);
  touch-action: pan-y;
  font-family: var(--font-primary);
  font-weight: 500;
}

@container sitemenu (width >= 901px) {
  .site-header {
    min-width: var(--menu-header-min-width-desktop);
  }
}

@keyframes headerAppear {
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* ===== Brand / Subtitle ===== */
.site-logo__container {
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: default;
  padding-right: var(--menu-header-padding-inline);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}

.site-title,
.site-subtitle {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--type-body);
  color: var(--text-primary);
  white-space: nowrap;
}

.site-subtitle {
  font-weight: 400;
  opacity: 0.8;
  margin-left: var(--space-2);
  display: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-subtitle.show {
  display: inline-block;
}

@container sitemenu (max-width: 1024px) {
  .site-subtitle {
    display: none !important;
  }
}

@container sitemenu (max-width: 900px) {
  .site-subtitle {
    display: inline-block !important;
    font-size: var(--type-sm);
    opacity: 0.7;
    margin-left: var(--space-2);
    max-width: var(--size-120);
    vertical-align: middle;
  }
}

@container sitemenu (max-width: 480px) {
  .site-title {
    font-size: var(--type-body);
  }

  .site-subtitle {
    font-size: var(--type-sm);
    max-width: var(--size-100);
  }
}

/* ===== Navigation ===== */
.site-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transition: transform 0.4s var(--component-spring-smooth);
  overflow: visible;
  margin: 0;
  flex: 1 0 auto;
  position: relative;
  padding: 0;
}

.site-menu__list {
  list-style: none;
  display: flex;
  gap: clamp(var(--size-4), 0.8vw, var(--size-8));
  align-items: center;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
  width: auto;
}

.site-menu__list li {
  display: flex;
  flex-shrink: 0;
  min-width: fit-content;
  --menu-item-index: 0;
}

.site-menu__list li.menu-utility-separator {
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-1);
  pointer-events: none;
}

.menu-utility-separator__line {
  width: var(--size-1);
  height: var(--size-20);
  background: var(--component-separator);
  opacity: 0.3;
}

/* ===== Menu Items ===== */
.site-menu__list li a,
.site-menu__list button.search-trigger,
.site-menu__list button.contact-trigger,
.site-menu__list button.lang-toggle,
.site-menu__list button.theme-toggle {
  text-decoration: none;
  color: var(--component-label-primary);
  font-family: var(--font-primary);
  font-weight: 500;
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
  min-height: var(--menu-item-min-height);
  min-width: fit-content;
  border-radius: var(--menu-item-radius);
  background: transparent;
  border: var(--size-1) solid transparent;
  font-size: var(--type-sm);
  touch-action: manipulation;
  transition:
    background 0.2s var(--component-spring-quick),
    color 0.2s var(--component-spring-quick),
    transform 0.15s var(--component-spring-quick),
    border-color 0.2s var(--component-spring-quick),
    box-shadow 0.2s var(--component-spring-quick);
  -webkit-tap-highlight-color: color-mix(in srgb, var(--component-accent-blue) 10%, transparent);
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
  cursor: pointer;
}

.site-menu__list li a:hover,
.site-menu__list li a:focus,
.site-menu__list button:hover,
.site-menu__list button:focus {
  color: var(--text-primary);
  background: var(--component-fill-primary);
  border-color: var(--component-separator);
  transform: translateY(calc(var(--size-1) * -1));
  box-shadow: var(--menu-item-hover-shadow);
  outline: none;
}

.site-menu__list li a:active,
.site-menu__list button:active {
  background: var(--component-fill-secondary);
  color: var(--text-primary);
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}

.site-menu__list li a:focus-visible,
.site-menu__list button:focus-visible {
  outline: var(--size-2) solid var(--component-accent-blue);
  outline-offset: var(--space-1);
  box-shadow: 0 0 0 var(--size-4) color-mix(in srgb, var(--component-accent-blue) 20%, transparent);
}

/* ===== Search Button ===== */
.site-menu__list button.search-trigger,
.site-menu__list button.contact-trigger {
  font-size: var(--type-sm);
  padding: var(--menu-item-padding-y);
}

.site-menu__list button.search-trigger .icon-container,
.site-menu__list button.contact-trigger .icon-container {
  margin-right: 0;
}

.site-menu__list button.search-trigger .nav-icon,
.site-menu__list button.contact-trigger .nav-icon {
  width: var(--menu-action-icon-size);
  height: var(--menu-action-icon-size);
  min-width: var(--menu-action-icon-size);
  min-height: var(--menu-action-icon-size);
  opacity: 0.9;
  filter: drop-shadow(
    0 var(--size-1) var(--size-2) color-mix(in srgb, var(--clr-black) 10%, transparent)
  );
}

/* Keep the search shell inert until the richer search stylesheet is loaded. */
.menu-search {
  min-width: 0;
}

.menu-search[aria-hidden="true"] {
  display: none;
}

.site-header.search-mode .menu-search[aria-hidden="false"] {
  display: flex;
  flex: 1 1 auto;
}

/* ===== Theme Toggle ===== */
.site-menu__list button.theme-toggle {
  position: relative;
  padding: var(--menu-item-padding-y);
  width: var(--menu-item-min-height);
  min-width: var(--menu-item-min-height);
  justify-content: center;
  overflow: hidden;
}

.site-menu .theme-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--menu-action-icon-size);
  height: var(--menu-action-icon-size);
  min-width: var(--menu-action-icon-size);
  min-height: var(--menu-action-icon-size);
  pointer-events: none;
  transition:
    opacity 0.3s var(--component-spring-quick),
    transform 0.4s var(--component-spring-bounce);
}

.site-menu .theme-icon--sun {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

.site-menu .theme-icon--moon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg) scale(0.5);
}

.site-menu .theme-toggle.is-light .theme-icon--sun {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scale(0.5);
}

.site-menu .theme-toggle.is-light .theme-icon--moon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

/* source: /content/components/menu/styles/menu-states.css */
/* ========================================================================
   Menu States
   Interactive icon, toggle and motion states shared across breakpoints.
   ======================================================================== */

/* ===== Icon Hover Effects ===== */
.site-menu__list a:hover .nav-icon:not(.theme-icon),
.site-menu__list a:focus .nav-icon:not(.theme-icon),
.site-menu__list button:hover .nav-icon:not(.theme-icon),
.site-menu__list button:focus .nav-icon:not(.theme-icon) {
  transform: translateY(calc(var(--size-1) * -1)) scale(1.1);
  opacity: 1;
  filter: drop-shadow(
    0 var(--size-1) var(--size-2) color-mix(in srgb, var(--clr-black) 25%, transparent)
  );
}

/* ===== Modern Hamburger Toggle ===== */
.site-menu__toggle {
  --menu-toggle-transform-rest: translateY(-50%);
  --menu-toggle-transform-hover: translateY(-50%) scale(1.05);
  --menu-toggle-transform-active: translateY(-50%) scale(0.95);
  --menu-toggle-transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: none;
  position: absolute;
  right: var(--size-20);
  top: 50%;
  transform: var(--menu-toggle-transform-rest);
  width: var(--size-48);
  height: var(--size-48);
  border-radius: var(--size-16);
  background: color-mix(in srgb, var(--clr-white) 8%, transparent);
  backdrop-filter: blur(var(--size-20));
  -webkit-backdrop-filter: blur(var(--size-20));
  cursor: pointer;
  overflow: hidden;
  transition: var(--menu-toggle-transition);
  box-shadow:
    0 var(--size-4) var(--size-16) color-mix(in srgb, var(--clr-black) 10%, transparent),
    inset 0 var(--size-1) 0 color-mix(in srgb, var(--clr-white) 10%, transparent);
  border: var(--size-1) solid color-mix(in srgb, var(--clr-white) 10%, transparent);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  isolation: isolate;
}

.site-menu__toggle:hover {
  background: color-mix(in srgb, var(--clr-white) 12%, transparent);
  transform: var(--menu-toggle-transform-hover);
  box-shadow:
    0 var(--size-8) var(--size-24) color-mix(in srgb, var(--clr-black) 15%, transparent),
    inset 0 var(--size-1) 0 color-mix(in srgb, var(--clr-white) 15%, transparent);
  border-color: color-mix(in srgb, var(--clr-white) 20%, transparent);
}

.site-menu__toggle:active {
  transform: var(--menu-toggle-transform-active);
  background: color-mix(in srgb, var(--component-accent-blue) 20%, transparent);
  box-shadow:
    0 var(--size-2) var(--size-8) color-mix(in srgb, var(--clr-black) 20%, transparent),
    inset 0 var(--size-1) 0 color-mix(in srgb, var(--clr-white) 10%, transparent);
}

.site-menu__toggle:focus-visible {
  outline: none;
  box-shadow:
    0 var(--size-8) var(--size-24) color-mix(in srgb, var(--clr-black) 15%, transparent),
    0 0 0 var(--size-3) color-mix(in srgb, var(--component-accent-blue) 40%, transparent),
    inset 0 var(--size-1) 0 color-mix(in srgb, var(--clr-white) 15%, transparent);
}

.hamburger-container {
  position: relative;
  width: var(--size-24);
  height: var(--size-18);
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: var(--z-menu-foreground);
}

.hamburger-line {
  display: block;
  width: 100%;
  height: var(--size-2);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--clr-white) 90%, transparent) 0%,
    var(--clr-white) 50%,
    color-mix(in srgb, var(--clr-white) 90%, transparent) 100%
  );
  border-radius: var(--size-2);
  transition:
    transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
  box-shadow: 0 var(--size-1) var(--size-2) color-mix(in srgb, var(--clr-black) 10%, transparent);
  position: relative;
}

.site-menu__toggle.active .hamburger-line--top {
  transform: translateY(var(--size-8)) rotate(45deg);
  background: linear-gradient(90deg, var(--component-accent-blue) 0%, var(--menu-accent-alt) 100%);
}

.site-menu__toggle.active .hamburger-line--middle {
  opacity: 0;
  transform: scaleX(0);
}

.site-menu__toggle.active .hamburger-line--bottom {
  transform: translateY(calc(var(--size-8) * -1)) rotate(-45deg);
  background: linear-gradient(90deg, var(--component-accent-blue) 0%, var(--menu-accent-alt) 100%);
}

.menu-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--component-accent-blue) 30%, transparent) 0%,
    transparent 70%
  );
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition:
    width 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: var(--z-base);
  opacity: 0;
}

.site-menu__toggle:active .menu-ripple {
  width: var(--size-80);
  height: var(--size-80);
  opacity: 1;
}

/* ===== Active Link States ===== */
.site-menu__list li a.active,
.site-menu__list li a[aria-current="page"] {
  color: var(--component-accent-blue);
  background: color-mix(in srgb, var(--clr-white) 20%, transparent);
  font-weight: 600;
  border: var(--size-1) solid color-mix(in srgb, var(--clr-white) 25%, transparent);
  box-shadow: 0 0 var(--size-12) color-mix(in srgb, var(--clr-white) 10%, transparent);
}

.site-menu__list li a.active:hover,
.site-menu__list li a.active:focus,
.site-menu__list li a[aria-current="page"]:hover,
.site-menu__list li a[aria-current="page"]:focus {
  color: var(--component-accent-blue);
  background: color-mix(in srgb, var(--clr-white) 24%, transparent);
  border-color: color-mix(in srgb, var(--clr-white) 30%, transparent);
  box-shadow:
    0 var(--size-4) var(--size-14) color-mix(in srgb, var(--clr-black) 18%, transparent),
    0 0 var(--size-12) color-mix(in srgb, var(--clr-white) 12%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition-duration: 0.01ms !important;
  }

  .site-header {
    animation-duration: 0.01ms !important;
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }

  .site-menu,
  .site-menu__list li,
  .site-menu__toggle,
  .hamburger-line,
  .menu-ripple,
  .menu-search__bar,
  .menu-search__result,
  .menu-search__results,
  .menu-search__item,
  .skeleton-title,
  .skeleton-desc {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .site-menu.open .site-menu__list li {
    transition-delay: 0s !important;
  }
}

/* ===== View Transitions ===== */
::view-transition-group(menu) {
  animation-duration: 0.3s;
}

.site-menu {
  view-transition-name: menu;
}

/* source: /content/components/menu/styles/menu-mobile.css */
/* ========================================================================
   Menu Mobile
   Consolidated responsive and mobile-only layout rules.
   ======================================================================== */

/* ===== Mobile Responsive ===== */
@container sitemenu (max-width: 900px) {
  .site-header {
    display: flex;
    justify-content: space-between;
    align-items: var(--route-header-mobile-align-items);
    top: var(--route-header-mobile-top);
    width: calc(100% - var(--size-16) - var(--safe-left) - var(--safe-right));
    max-width: none;
    height: var(--route-header-mobile-height);
    padding: var(--route-header-mobile-padding-top) var(--size-12) 0 var(--size-16);
    border-radius: var(--size-20);
    min-width: 0;
  }

  .site-header.search-mode {
    padding-inline: var(--size-8);
    justify-content: center;
  }
}

@container sitemenu (max-width: 900px) {
  .site-header.search-mode .site-menu {
    display: none !important;
  }

  .site-header.search-mode .site-menu__toggle {
    display: block !important;
    position: absolute;
    right: calc(var(--size-8) + var(--safe-right));
    top: 50%;
    margin-left: 0;
    --menu-toggle-transform-rest: translateY(-50%);
    --menu-toggle-transform-hover: translateY(-50%);
    --menu-toggle-transform-active: translateY(-50%);
  }

  .site-header.search-mode .menu-search {
    display: flex;
    flex: 0 1 min(var(--size-360), calc(100% - var(--size-72)));
    width: min(var(--size-360), calc(100% - var(--size-72)));
    max-width: min(var(--size-360), calc(100% - var(--size-72)));
    margin-inline: auto;
  }

  .site-logo__container {
    position: relative;
    left: 0;
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
    padding-right: var(--size-8);
  }

  .site-menu__toggle {
    display: block;
    position: relative;
    right: 0;
    top: 0;
    margin-left: var(--size-8);
    --menu-toggle-transform-rest: none;
    --menu-toggle-transform-hover: none;
    --menu-toggle-transform-active: none;
    --menu-toggle-transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  }

  .site-menu {
    position: fixed;
    top: calc(var(--size-60) + var(--safe-top));
    right: calc(var(--size-8) + var(--safe-right));
    width: min(82vw, var(--size-260));
    max-height: calc(
      var(--viewport-height) - var(--size-76) - var(--safe-top) - var(--safe-bottom)
    );
    overflow-y: auto;
    padding: 0;
    left: auto;
    background: var(--route-header-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: var(--size-1) solid var(--route-header-border);
    border-radius: var(--size-20);
    box-shadow: var(--component-shadow-depth-2);
    transform: translateY(calc(var(--size-10) * -1)) scale(0.95);
    transform-origin: top right;
    transition:
      transform 0.4s var(--ease-bounce-soft),
      opacity 0.3s ease,
      visibility 0.3s,
      background 0.24s ease,
      border-color 0.24s ease,
      box-shadow 0.24s ease,
      backdrop-filter 0.24s ease,
      -webkit-backdrop-filter 0.24s ease;
    flex-direction: column;
    gap: 0;
    z-index: calc(var(--z-overlay) - var(--z-base));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .site-menu.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: linear-gradient(
      145deg,
      color-mix(in srgb, var(--route-header-bg) 88%, rgb(255 255 255 / 14%)) 0%,
      color-mix(in srgb, var(--route-header-bg) 94%, rgb(140 184 255 / 10%)) 55%,
      color-mix(in srgb, var(--route-header-bg) 96%, rgb(0 0 0 / 14%)) 100%
    );
    border-color: color-mix(in srgb, var(--route-header-border) 78%, rgb(193 222 255 / 46%));
    box-shadow:
      0 var(--size-14) var(--size-42) color-mix(in srgb, var(--clr-black) 46%, transparent),
      inset 0 var(--size-1) 0 color-mix(in srgb, var(--clr-white) 24%, transparent);
    backdrop-filter: blur(var(--size-18)) saturate(125%) brightness(1.04);
    -webkit-backdrop-filter: blur(var(--size-18)) saturate(125%) brightness(1.04);
  }

  .site-menu__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--size-48);
    grid-auto-rows: minmax(var(--size-48), auto);
    align-items: start;
    width: 100%;
    padding: var(--size-10) var(--size-10) var(--size-12);
    column-gap: var(--size-10);
    row-gap: var(--size-6);
  }

  .site-menu__list li {
    width: auto;
    min-width: 0;
    opacity: 0;
    transform: translateX(var(--size-10));
    transition-delay: 0s;
    transition:
      opacity 0.3s ease,
      transform 0.3s ease;
  }

  .site-menu__list li.menu-nav-item {
    grid-column: 1;
    width: 100%;
    justify-self: start;
  }

  .site-menu__list li.menu-nav-item a {
    width: 100%;
    max-width: none;
    padding-inline: var(--size-10) var(--size-14);
  }

  .site-menu__list li.menu-nav-item .nav-icon-wrapper {
    margin-right: var(--size-8);
  }

  .site-menu__list li.menu-utility-item {
    grid-column: 2;
    width: var(--size-48);
    justify-self: center;
    margin-right: 0;
  }

  .site-menu__list li.menu-utility-item--search {
    grid-row: 1;
  }

  .site-menu__list li.menu-utility-item--contact {
    grid-row: 2;
  }

  .site-menu__list li.menu-utility-item--theme {
    grid-row: 3;
  }

  .site-menu__list li.menu-utility-item--lang {
    grid-row: 4;
  }

  .site-menu.open .site-menu__list li {
    opacity: 1;
    transform: translateX(0);
    transition-delay: calc(var(--menu-item-index, 0) * 0.05s);
  }

  .site-menu__list li a,
  .site-menu__list button.search-trigger,
  .site-menu__list button.contact-trigger,
  .site-menu__list button.lang-toggle,
  .site-menu__list button.theme-toggle {
    min-height: var(--size-48);
    font-size: var(--type-sm);
    font-weight: 500;
    padding: 0 var(--size-12);
    border-radius: var(--size-14);
    background: transparent;
    border: none;
    color: var(--component-label-primary);
    justify-content: flex-start;
  }

  .site-menu__list li a:hover,
  .site-menu__list li a:active,
  .site-menu__list button:hover,
  .site-menu__list button:active {
    background: var(--component-fill-primary);
    transform: scale(1.02);
  }

  .site-menu__list li a.active {
    background: var(--component-fill-secondary);
    border-color: transparent;
  }

  .site-menu__list li.menu-utility-item button.search-trigger,
  .site-menu__list li.menu-utility-item button.contact-trigger,
  .site-menu__list li.menu-utility-item button.lang-toggle,
  .site-menu__list li.menu-utility-item button.theme-toggle {
    width: var(--size-48);
    min-width: var(--size-48);
    height: var(--size-48);
    min-height: var(--size-48);
    padding: 0;
    justify-content: center;
    border-radius: var(--size-14);
  }

  .site-menu__list li.menu-utility-item .lang-text {
    display: none;
  }

  .site-menu__list li.menu-utility-item--lang button.lang-toggle {
    flex-direction: column;
    gap: var(--size-3);
    height: var(--size-52);
    min-height: var(--size-52);
    padding-block: var(--size-6);
  }

  .site-menu__list li.menu-utility-item--lang .lang-text {
    display: block;
    margin-left: 0;
    font-size: var(--type-xs);
    font-weight: 700;
    line-height: 1;
    opacity: 0.9;
  }

  .site-menu__list li.menu-utility-item .icon-container {
    margin-right: 0;
  }

  .site-menu__list li.menu-utility-separator {
    display: flex;
    grid-column: 2;
    grid-row: 1 / span 4;
    justify-self: start;
    align-self: stretch;
    width: var(--size-1);
    min-width: var(--size-1);
    padding: 0;
    transform: translateX(calc(var(--size-6) * -1));
    pointer-events: none;
  }

  .site-menu__list li.menu-utility-separator .menu-utility-separator__line {
    height: 100%;
    opacity: 0.3;
  }

  .menu-search__bar {
    min-height: var(--size-40);
    gap: var(--size-8);
    padding: var(--size-5) var(--size-6) var(--size-5) var(--size-10);
  }

  .menu-search__count-hint {
    display: none;
  }

  .menu-search__results {
    max-height: min(56vh, var(--size-380));
    padding: var(--size-8);
  }
}

/* ===== Extra Small Screens ===== */
@container sitemenu (max-width: 480px) {
  .site-header {
    width: calc(100% - var(--size-12) - var(--safe-left) - var(--safe-right));
    padding: 0 var(--size-12);
  }
}

@container sitemenu (max-width: 480px) {
  .site-menu__toggle {
    right: var(--size-12);
    width: var(--size-44);
    height: var(--size-44);
  }

  .site-menu {
    left: auto;
    right: calc(var(--size-6) + var(--safe-right));
    width: min(84vw, var(--size-236));
    max-width: calc(100vw - var(--size-12) - var(--safe-right));
    top: calc(var(--size-60) + var(--safe-top));
  }

  .site-menu.open {
    backdrop-filter: blur(var(--size-10)) saturate(115%) brightness(1.02);
    -webkit-backdrop-filter: blur(var(--size-10)) saturate(115%) brightness(1.02);
  }

  .menu-search__bar {
    min-height: var(--size-38);
    gap: var(--size-6);
    border-radius: var(--size-14);
  }

  .menu-search__input {
    font-size: var(--type-body);
  }

  .menu-search__results {
    left: calc(var(--size-2) * -1);
    right: calc(var(--size-2) * -1);
  }

  .menu-search__ai-chat {
    margin-bottom: var(--size-4);
    padding: var(--size-10);
  }

  .menu-search__result {
    padding: var(--size-10);
    border-radius: var(--size-12);
  }

  .menu-search__title {
    font-size: var(--type-xs);
  }

  .menu-search__url {
    font-size: var(--type-xs);
  }

  .menu-search__desc {
    font-size: var(--type-xs);
  }
}

/* source: /content/components/footer/footer.css */
@layer components {
  /**
	 * Modern Footer System v3.1.0
	 */

  /* ===== Address Element Reset ===== */
  address {
    font-style: normal;
  }

  .footer-icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  /* ===== Variables & Utility Classes ===== */
  :root {
    --footer-gap: clamp(var(--space-2), 1vw, var(--space-3));
    --footer-padding: var(--space-5);
    --footer-min-height: var(--size-52);

    --btn-padding: var(--space-2) var(--space-4);
    --btn-radius: var(--menu-item-radius);
    --btn-font-size: var(--type-xs);
  }

  /* utility base for footer buttons */
  :is(.btn-accept, .btn-reject) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--size-4);
    padding: var(--btn-padding);
    min-height: var(--size-30);
    border-radius: var(--btn-radius);
    border: var(--size-1) solid transparent;
    font-size: var(--btn-font-size);
    font-weight: 600;
    cursor: pointer;
    transition: none;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: inherit;
  }

  :is(
    .brand-link,
    .nav-btn,
    .btn-close,
    .cookie-category,
    .footer-btn-secondary,
    .footer-btn-primary,
    .footer-card,
    .footer-cta,
    .links a,
    .links-compact a,
    .tag,
    .legal-btn,
    .social-btn
  ) {
    transition: none;
  }

  :is(.nav-btn svg, .links a svg, .links-compact a svg, .legal-btn svg) {
    transition: none;
  }

  :is(.nav-btn svg, .links a svg, .links-compact a svg, .legal-btn svg, .social-btn svg) {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ===== Base Footer ===== */
  .site-footer {
    position: fixed;
    bottom: calc(var(--size-12) + var(--safe-bottom));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - var(--size-32) - var(--safe-left) - var(--safe-right));
    max-width: var(--size-1440);
    min-width: var(--size-320);
    background: var(--component-header-bg);
    -webkit-backdrop-filter: blur(var(--component-blur-radius));
    backdrop-filter: blur(var(--component-blur-radius));
    border-radius: var(--component-pill-radius);
    border: var(--size-1) solid var(--component-separator);
    box-shadow: var(--component-shadow-depth-2);
    z-index: var(--z-fixed);
    font-family: var(--font-primary);
    color: var(--component-label-primary);
    font-size: var(--type-xs);
    font-weight: 500;
    opacity: 1;
  }

  /* ===== Minimized State ===== */
  .footer-min {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--footer-gap);
    padding: 0 var(--footer-padding);
    min-height: var(--footer-min-height);
    cursor: pointer;
    transition: none;
    user-select: none;
    overflow: hidden;
    color: var(--clr-white);
  }

  .footer-min.hidden {
    display: none !important;
  }

  .footer-min-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--footer-gap);
    flex: 1;
    min-width: 0;
  }

  .footer-min-main .cookie-inline,
  .footer-min-main .footer-nav {
    pointer-events: auto;
  }

  .footer-copyright {
    color: var(--clr-white);
    font-size: var(--type-xs);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .brand-link {
    color: var(--clr-white);
    text-decoration: none;
    margin-left: var(--size-6);
    padding: var(--size-4) var(--size-8);
    border-radius: var(--radius-sm);
    font-weight: 600;
    white-space: nowrap;
  }

  .brand-link:hover {
    color: var(--clr-white);
    background: var(--component-fill-primary);
  }

  /* Mobile brand name shortening */
  .brand-link .full-name {
    display: inline;
  }

  .brand-link .short-name {
    display: none;
  }

  /* ===== Cookie Banner (Inline) ===== */
  .cookie-inline {
    display: flex;
    align-items: center;
    gap: var(--size-6);
    padding: 0;
    flex-shrink: 0;
    animation: none;
    pointer-events: auto;
    cursor: default;
  }

  .cookie-inline.hidden {
    display: none !important;
  }

  .cookie-inline * {
    cursor: pointer;
  }

  .cookie-emoji {
    font-size: var(--type-body);
    line-height: 1;
    flex-shrink: 0;
    animation: none;
  }

  .cookie-text {
    font-size: var(--type-sm);
    font-weight: 500;
    color: var(--clr-white);
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
  }

  .cookie-text .short {
    display: none;
  }

  .btn-accept {
    background: var(--component-accent-blue-hover);
    color: var(--clr-white);
    border-color: var(--component-accent-blue-hover);
  }

  .btn-accept:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    box-shadow: 0 var(--size-4) var(--size-12)
      color-mix(in srgb, var(--primary-dark) 30%, transparent);
  }

  .btn-reject {
    background: transparent;
    color: var(--component-label-secondary);
    border-color: var(--component-separator);
  }

  .btn-reject:hover {
    color: var(--component-label-primary);
    background: var(--component-fill-primary);
    border-color: color-mix(in srgb, var(--clr-white) 20%, transparent);
  }

  .btn-accept:active,
  .btn-reject:active {
    transform: none;
  }

  .btn-accept:focus-visible,
  .btn-reject:focus-visible {
    outline: var(--size-2) solid var(--component-accent-blue);
    outline-offset: var(--size-2);
    box-shadow: 0 0 0 var(--size-4)
      color-mix(in srgb, var(--component-accent-blue) 20%, transparent);
  }

  /* ===== Navigation ===== */
  .footer-nav {
    display: flex;
    gap: clamp(var(--size-6), 1vw, var(--size-10));
    align-items: center;
  }

  .nav-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--size-6);
    padding: var(--size-8) var(--size-10);
    min-height: var(--size-36);
    background: transparent;
    border: var(--size-1) solid transparent;
    border-radius: var(--menu-item-radius);
    color: var(--clr-white);
    text-decoration: none;
    font-size: var(--type-sm);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: color-mix(in srgb, var(--component-accent-blue) 10%, transparent);
  }

  .nav-btn:hover,
  .nav-btn:focus {
    color: var(--clr-white);
    background: var(--component-fill-primary);
    border-color: var(--component-separator);
    outline: none;
  }

  .nav-btn:active {
    background: var(--component-fill-secondary);
    transform: none;
  }

  .nav-btn:focus-visible {
    outline: var(--size-2) solid var(--component-accent-blue);
    outline-offset: var(--size-2);
    box-shadow: 0 0 0 var(--size-4)
      color-mix(in srgb, var(--component-accent-blue) 20%, transparent);
  }

  .nav-btn svg {
    flex-shrink: 0;
    width: var(--size-14);
    height: var(--size-14);
    opacity: 0.85;
  }

  .nav-btn:hover svg {
    opacity: 1;
    transform: none;
  }

  /* ===== Maximized State ===== */
  .footer-max {
    padding: var(--size-16) var(--size-20);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-height: calc(var(--viewport-height) - var(--size-150));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y;
    cursor: pointer;
    position: relative;
  }

  .footer-max.hidden {
    display: none !important;
  }

  /* ===== Cookie Settings ===== */
  .cookie-settings {
    max-width: var(--size-520);
    width: 100%;
    margin: 0 auto;
    cursor: default;
    background: var(--footer-surface-bg);
    border: var(--size-1) solid var(--component-separator);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
  }

  .cookie-settings.hidden {
    display: none !important;
  }

  .settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--size-12) var(--size-16);
    border-bottom: var(--size-1) solid var(--component-separator);
    flex-shrink: 0;
  }

  .settings-header h2 {
    font-size: var(--type-sm);
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--size-6);
  }

  .btn-close {
    width: var(--size-28);
    height: var(--size-28);
    border-radius: var(--radius-xs);
    border: none;
    background: var(--footer-soft-fill);
    color: var(--footer-quiet-text);
    font-size: var(--type-lg);
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn-close:hover {
    background: var(--component-fill-primary);
    color: var(--clr-white);
  }

  .settings-content {
    padding: var(--size-14) var(--size-16);
    display: flex;
    flex-direction: column;
    gap: var(--size-8);
    flex-shrink: 0;
  }

  .settings-intro {
    color: var(--footer-quiet-text);
    margin: 0 0 var(--size-4);
    font-size: var(--type-xs);
    line-height: var(--leading-snug);
  }

  .cookie-category {
    background: var(--card-bg);
    border: var(--size-1) solid var(--component-separator);
    border-radius: var(--radius-sm);
    padding: var(--size-10) var(--size-12);
    display: flex;
    flex-direction: column;
    gap: var(--size-4);
  }

  .cookie-category:hover {
    background: var(--footer-soft-fill);
    border-color: color-mix(in srgb, var(--clr-white) 15%, transparent);
  }

  .category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .category-header :is(h2, h3) {
    font-size: var(--type-xs);
    font-weight: 600;
    margin: 0;
  }

  .cookie-category > p {
    font-size: var(--type-xs);
    color: var(--footer-quiet-text);
    margin: 0;
    line-height: var(--leading-snug);
  }

  .status {
    padding: var(--size-3) var(--size-8);
    background: var(--component-fill-primary);
    border-radius: var(--radius-xs);
    font-size: var(--type-xs);
    font-weight: 600;
    text-transform: uppercase;
  }

  /* ===== Toggle Switch ===== */
  .toggle {
    position: relative;
    width: var(--size-40);
    height: var(--size-22);
    cursor: pointer;
    flex-shrink: 0;
  }

  .toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
  }

  .slider {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--clr-white) 20%, var(--bg-primary));
    border-radius: var(--size-22);
    transition: none;
    border: var(--size-1) solid var(--border-color);
  }

  .slider::before {
    content: "";
    position: absolute;
    width: var(--size-16);
    height: var(--size-16);
    left: var(--size-2);
    bottom: var(--size-2);
    background: color-mix(in srgb, var(--clr-white) 40%, var(--bg-primary));
    border-radius: 50%;
    transition: none;
    box-shadow: var(--footer-toggle-knob-shadow);
  }

  .toggle input:checked + .slider {
    background: var(--component-accent-blue);
    border-color: var(--component-accent-blue);
  }

  .toggle input:checked + .slider::before {
    background: var(--clr-white);
    transform: translateX(var(--size-18));
  }

  .toggle:hover .slider {
    background: color-mix(in srgb, var(--clr-white) 26%, var(--bg-primary));
  }

  .toggle input:checked:hover + .slider {
    background: var(--component-accent-blue-hover);
  }

  .settings-footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-6);
    padding: var(--size-12) var(--size-16);
    border-top: var(--size-1) solid var(--component-separator);
    flex-shrink: 0;
  }

  .footer-btn-secondary,
  .footer-btn-primary {
    flex: 1 1 calc(50% - var(--size-3));
    min-width: var(--size-100);
    padding: var(--size-9) var(--size-14);
    border-radius: var(--size-8);
    font-size: var(--type-xs);
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
  }

  .footer-btn-secondary {
    background: var(--footer-soft-fill);
    color: var(--footer-quiet-text);
    border: var(--size-1) solid var(--component-separator);
  }

  .footer-btn-secondary:hover {
    background: var(--footer-soft-fill-2);
    color: var(--clr-white);
    border-color: color-mix(in srgb, var(--clr-white) 20%, transparent);
  }

  .footer-btn-primary {
    background: var(--component-accent-blue);
    color: var(--clr-white);
  }

  .footer-btn-primary:hover {
    background: var(--component-accent-blue-hover);
    box-shadow: 0 var(--size-4) var(--size-12)
      color-mix(in srgb, var(--component-accent-blue) 30%, transparent);
  }

  .footer-btn-secondary:active,
  .footer-btn-primary:active {
    transform: none;
  }

  #accept-all {
    flex: 1 1 100%;
    width: 100%;
  }

  /* ===== Footer Content ===== */
  .footer-content {
    max-width: var(--size-1200);
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--size-12);
  }

  .footer-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--size-200), 1fr));
    gap: var(--size-12);
    flex-shrink: 1;
    min-height: 0;
  }

  .footer-card {
    background: var(--card-bg);
    border: var(--size-1) solid var(--component-separator);
    border-radius: var(--radius-md);
    padding: var(--size-14);
    display: flex;
    flex-direction: column;
    min-height: var(--size-140);
  }

  .footer-card:hover {
    background: var(--footer-soft-fill);
    border-color: var(--component-accent-blue);
    box-shadow: 0 var(--size-4) var(--size-12)
      color-mix(in srgb, var(--component-accent-blue) 15%, transparent);
  }

  .footer-card h2 {
    font-size: var(--type-xs);
    font-weight: 600;
    margin: 0 0 var(--size-10);
    display: flex;
    align-items: center;
    gap: var(--size-6);
    color: var(--component-label-primary);
  }

  .footer-card .name {
    font-size: var(--type-xs);
    font-weight: 600;
    margin: 0 0 var(--size-4);
    color: var(--component-label-primary);
  }

  .footer-card .role {
    font-size: var(--type-xs);
    color: var(--footer-quiet-text);
    margin: 0 0 var(--size-8);
  }

  .footer-card .bio {
    font-size: var(--type-xs);
    line-height: var(--leading-body);
    color: var(--component-label-secondary);
    margin: 0 0 var(--size-10);
    flex: 1;
  }

  .footer-card-actions {
    display: flex;
    gap: var(--size-8);
    flex-wrap: wrap;
    margin-top: auto;
  }

  .footer-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--size-4);
    padding: var(--size-7) var(--size-12);
    background: var(--component-accent-blue);
    color: var(--clr-white);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: var(--type-xs);
    font-weight: 600;
    flex: 1;
    justify-content: center;
    min-width: 0;
  }

  .footer-cta:hover {
    background: var(--component-accent-blue-hover);
    box-shadow: 0 var(--size-4) var(--size-12)
      color-mix(in srgb, var(--component-accent-blue) 30%, transparent);
  }

  .links {
    display: flex;
    flex-direction: column;
    gap: var(--size-4);
    flex: 1;
  }

  .links a {
    display: flex;
    align-items: center;
    gap: var(--size-6);
    padding: var(--size-5) var(--size-6);
    color: var(--footer-quiet-text);
    text-decoration: none;
    border-radius: var(--radius-xs);
    font-size: var(--type-xs);
  }

  .links a svg {
    flex-shrink: 0;
    width: var(--size-12);
    height: var(--size-12);
    opacity: 0.7;
  }

  .links a:hover {
    color: var(--clr-white);
    background: var(--footer-soft-fill);
  }

  .links a:hover svg {
    opacity: 1;
    transform: none;
  }

  /* Compact Grid Layout for Work & Quick Links */
  .links-compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--size-6);
    flex: 1;
  }

  .links-compact a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--size-5);
    padding: var(--size-6) var(--size-8);
    color: var(--footer-quiet-text);
    text-decoration: none;
    border-radius: var(--radius-xs);
    font-size: var(--type-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: color-mix(in srgb, var(--clr-white) 2%, transparent);
    border: var(--size-1) solid transparent;
  }

  .links-compact a svg {
    flex-shrink: 0;
    width: var(--size-12);
    height: var(--size-12);
    opacity: 0.7;
  }

  .links-compact a:hover {
    color: var(--clr-white);
    background: var(--footer-soft-fill-2);
    border-color: var(--component-separator);
  }

  .links-compact a:hover svg {
    opacity: 1;
    transform: none;
  }

  /* ===== Skill Tags ===== */
  .skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-5);
    flex: 1;
    align-content: flex-start;
  }

  .tag {
    display: inline-block;
    padding: var(--size-5) var(--size-10);
    background: var(--footer-soft-fill-2);
    border: var(--size-1) solid color-mix(in srgb, var(--component-separator) 100%, transparent);
    border-radius: var(--radius-md);
    font-size: var(--type-xs);
    font-weight: 600;
    color: color-mix(in srgb, var(--clr-white) 80%, transparent);
    cursor: default;
  }

  .tag:hover {
    background: var(--footer-soft-fill-3);
    border-color: var(--component-accent-blue);
    color: var(--clr-white);
  }

  /* ===== Status Bar ===== */
  .status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--size-12);
    padding-top: var(--size-12);
    border-top: var(--size-1) solid var(--component-separator);
    flex-wrap: nowrap;
    min-height: var(--size-36);
    flex-shrink: 0;
    margin-top: auto;
  }

  .copyright {
    font-size: var(--type-xs);
    color: var(--clr-white);
    white-space: nowrap;
    flex-shrink: 1;
  }

  .copyright a {
    color: var(--clr-white);
    text-decoration: none;
    margin-left: var(--size-4);
    transition: none;
  }

  .copyright a:hover {
    color: var(--clr-white);
  }

  .legal {
    display: flex;
    gap: var(--size-6);
    flex-shrink: 0;
  }

  .legal-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--size-6);
    padding: var(--size-8) var(--size-12);
    background: var(--footer-soft-fill);
    border: var(--size-1) solid var(--component-separator);
    border-radius: var(--radius-sm);
    color: var(--clr-white);
    text-decoration: none;
    font-size: var(--type-xs);
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
  }

  .legal-btn:hover {
    background: var(--component-fill-primary);
    border-color: var(--component-accent-blue);
    color: var(--clr-white);
  }

  .legal-btn:active {
    transform: none;
  }

  .legal-btn svg {
    flex-shrink: 0;
    width: var(--size-14);
    height: var(--size-14);
    opacity: 0.7;
  }

  .legal-btn:hover svg {
    opacity: 1;
    transform: none;
  }

  .legal .nav-btn {
    padding: var(--size-6) var(--size-10);
    font-size: var(--type-xs);
    min-height: auto;
    border-radius: var(--size-8);
  }

  .social {
    display: flex;
    gap: var(--size-6);
    align-items: center;
    flex-shrink: 0;
  }

  .social-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--size-4);
    padding: var(--size-6) var(--size-8);
    background: var(--footer-soft-fill);
    border: var(--size-1) solid var(--component-separator);
    border-radius: var(--radius-sm);
    color: var(--clr-white);
    text-decoration: none;
    font-size: var(--type-xs);
  }

  .social-btn:hover {
    background: var(--component-fill-primary);
    border-color: var(--component-accent-blue);
    color: var(--clr-white);
  }

  .social-btn svg {
    flex-shrink: 0;
    width: var(--size-14);
    height: var(--size-14);
  }

  /* ===== Expanded State ===== */
  .site-footer.expanded .footer-min {
    display: none;
  }

  .site-footer.expanded {
    z-index: var(--overlay-layer-top-surface);
    background: var(--footer-surface-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .site-footer.expanded .footer-max {
    display: flex;
  }

  /* ===== Responsive ===== */
  @media (width <= 900px) {
    :root {
      /* adjust variables instead of repeating rules */
      --footer-padding: var(--space-4);
      --footer-min-height: var(--size-48);
      --footer-gap: var(--space-2);
      --btn-padding: var(--space-2) var(--space-3);
    }

    .site-footer {
      width: calc(100% - var(--size-16) - var(--safe-left) - var(--safe-right));
      bottom: calc(var(--size-8) + var(--safe-bottom));
      border-radius: var(--size-20);
      min-width: auto;
    }

    .footer-min {
      overflow: visible;
    }

    .footer-min-main {
      gap: var(--size-6);
    }

    .footer-copyright {
      flex-shrink: 2;
      min-width: 0;
    }

    .brand-link .full-name {
      display: none;
    }

    .brand-link .short-name {
      display: inline;
    }

    .cookie-inline {
      flex-shrink: 0;
      gap: var(--size-4);
    }

    .cookie-emoji {
      font-size: var(--type-sm);
    }

    .cookie-text .full {
      display: none;
    }

    .cookie-text .short {
      display: inline;
    }

    .btn-accept .full,
    .btn-reject .full {
      display: none;
    }

    .btn-accept .short,
    .btn-reject .short {
      display: inline;
    }

    .btn-accept,
    .btn-reject {
      min-width: var(--size-36);
      min-height: var(--size-36);
    }

    .footer-nav {
      flex-shrink: 0;
    }

    .nav-btn span:not(.visually-hidden) {
      display: none;
    }

    .nav-btn {
      padding: var(--size-10);
      min-width: var(--size-44);
      min-height: var(--size-44);
      justify-content: center;
      border-radius: var(--size-12);
    }

    .footer-max {
      padding: var(--size-12);
      max-height: calc(var(--viewport-height) - var(--size-100));
    }

    .footer-content {
      gap: var(--size-8);
    }

    .cookie-settings {
      max-width: 100%;
    }

    .settings-content {
      padding: var(--size-10) var(--size-12);
      gap: var(--size-6);
    }

    .cookie-category {
      padding: var(--size-8) var(--size-10);
    }

    .settings-footer {
      padding: var(--size-10) var(--size-12);
      gap: var(--size-6);
    }

    .footer-cards {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--size-6);
    }

    .footer-card {
      padding: var(--size-10);
      min-height: var(--size-100);
    }

    .footer-card h2 {
      font-size: var(--type-xs);
      margin: 0 0 var(--size-6);
    }

    .footer-card .name {
      font-size: var(--type-xs);
      margin: 0 0 var(--size-3);
    }

    .footer-card .role {
      font-size: var(--type-xs);
      margin: 0 0 var(--size-6);
    }

    .footer-card .bio {
      font-size: var(--type-xs);
      line-height: var(--leading-snug);
      margin: 0 0 var(--size-6);
    }

    .footer-card-actions {
      gap: var(--size-4);
    }

    .footer-cta {
      padding: var(--size-5) var(--size-8);
      font-size: var(--type-xs);
      gap: var(--size-3);
    }

    .footer-cta svg {
      width: var(--size-10);
      height: var(--size-10);
    }

    .links a,
    .links-compact a {
      padding: var(--size-4) var(--size-6);
      font-size: var(--type-xs);
      gap: var(--size-4);
    }

    .links a svg,
    .links-compact a svg {
      width: var(--size-10);
      height: var(--size-10);
    }

    .skill-tags {
      gap: var(--size-3);
    }

    .tag {
      font-size: var(--type-xs);
      padding: var(--size-3) var(--size-6);
    }

    .status-bar {
      flex-direction: row;
      flex-wrap: wrap;
      gap: var(--size-4);
      padding-top: var(--size-8);
      justify-content: space-between;
      align-items: center;
    }

    .copyright {
      flex-basis: 100%;
    }

    .copyright {
      font-size: var(--type-xs);
      flex-shrink: 1;
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }

    .social {
      gap: var(--size-2);
      order: 2;
      flex-shrink: 0;
      flex-wrap: wrap;
    }

    .social-btn {
      padding: var(--size-4);
      min-width: var(--size-28);
      min-height: var(--size-28);
      border-radius: var(--size-6);
    }

    .social-btn span {
      display: none;
    }

    .social-btn svg {
      width: var(--size-11);
      height: var(--size-11);
    }

    .legal {
      gap: var(--size-2);
      order: 3;
      flex-shrink: 0;
      flex-wrap: wrap;
    }

    .legal-btn {
      padding: var(--size-6) var(--size-8);
      font-size: var(--type-xs);
      gap: var(--size-4);
    }

    .legal-btn svg {
      width: var(--size-12);
      height: var(--size-12);
    }

    .legal .nav-btn {
      padding: var(--size-4) var(--size-6);
      font-size: var(--type-xs);
      min-height: var(--size-28);
      border-radius: var(--size-6);
    }
  }

  @media (width <= 480px) {
    :root {
      --footer-padding: var(--space-3);
      --footer-gap: var(--space-1);
      --btn-padding: var(--space-1) var(--space-2);
      --btn-font-size: var(--type-xs);
    }

    .footer-copyright {
      font-size: var(--type-xs);
      flex-shrink: 2;
    }

    .brand-link {
      padding: var(--size-3) var(--size-6);
      font-size: var(--type-xs);
    }

    .cookie-inline {
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--size-3);
    }

    .cookie-text {
      font-size: var(--type-xs);
    }

    :root.footer-cookie-visible .site-footer .footer-min-main {
      justify-content: center;
    }

    :root.footer-cookie-visible .site-footer .footer-copyright {
      display: none;
    }

    :root.footer-cookie-visible .site-footer .footer-nav {
      display: none;
    }

    .nav-btn {
      padding: var(--size-8);
      min-width: var(--size-40);
      min-height: var(--size-40);
    }

    .footer-max {
      padding: var(--size-10);
      max-height: calc(var(--viewport-height) - var(--size-80));
    }

    .footer-content {
      gap: var(--size-6);
    }

    .footer-cards {
      grid-template-columns: 1fr;
      gap: var(--size-6);
    }

    .footer-card {
      padding: var(--size-8);
      min-height: var(--size-80);
    }

    .footer-card h2 {
      font-size: var(--type-xs);
      margin: 0 0 var(--size-5);
    }

    .footer-card .name {
      font-size: var(--type-xs);
      margin: 0 0 var(--size-2);
    }

    .footer-card .role {
      font-size: var(--type-xs);
      margin: 0 0 var(--size-5);
    }

    .footer-card .bio {
      font-size: var(--type-xs);
      line-height: var(--leading-snug);
      margin: 0 0 var(--size-5);
    }

    .footer-cta {
      min-height: var(--size-32);
      padding: var(--size-6) var(--size-10);
      font-size: var(--type-xs);
    }

    .links a,
    .links-compact a {
      min-height: var(--size-32);
      padding: var(--size-5) var(--size-7);
      font-size: var(--type-xs);
    }

    .skill-tags {
      gap: var(--size-2);
    }

    .tag {
      font-size: var(--type-xs);
      padding: var(--size-2) var(--size-5);
    }

    .status-bar {
      padding-top: var(--size-6);
      gap: var(--size-3);
      flex-wrap: wrap;
      justify-content: center;
    }

    .copyright {
      flex-basis: 100%;
      text-align: center;
    }

    .copyright {
      font-size: var(--type-xs);
      flex-shrink: 2;
      min-width: 0;
    }

    .copyright a {
      display: none;
    }

    .social {
      gap: var(--size-2);
      flex-wrap: wrap;
      justify-content: center;
    }

    .social-btn {
      padding: var(--size-5);
      min-width: var(--size-30);
      min-height: var(--size-30);
    }

    .social-btn svg {
      width: var(--size-10);
      height: var(--size-10);
    }

    .legal {
      gap: var(--size-2);
      flex-wrap: wrap;
      justify-content: center;
    }

    .legal-btn {
      min-height: var(--size-30);
      padding: var(--size-6) var(--size-8);
      font-size: var(--type-xs);
      gap: var(--size-3);
    }

    .legal-btn svg {
      width: var(--size-11);
      height: var(--size-11);
    }

    .legal .nav-btn {
      padding: var(--size-3) var(--size-5);
      font-size: var(--type-xs);
      min-height: var(--size-24);
    }

    .cookie-settings {
      margin: 0;
    }

    .settings-header {
      padding: var(--size-10) var(--size-12);
    }

    .settings-header h2 {
      font-size: var(--type-xs);
    }

    .settings-content {
      padding: var(--size-8) var(--size-12);
      gap: var(--size-5);
    }

    .settings-intro {
      font-size: var(--type-xs);
      margin: 0 0 var(--size-3);
    }

    .cookie-category {
      padding: var(--size-7) var(--size-9);
    }

    .category-header :is(h2, h3) {
      font-size: var(--type-xs);
    }

    .cookie-category > p {
      font-size: var(--type-xs);
    }

    .settings-footer {
      padding: var(--size-8) var(--size-12);
      gap: var(--size-6);
    }

    .footer-btn-secondary,
    .footer-btn-primary {
      padding: var(--size-7) var(--size-10);
      font-size: var(--type-xs);
    }
  }

  /* ===== Accessibility ===== */
  @media (prefers-contrast: more) {
    .site-footer {
      border-width: var(--size-2);
    }
  }

  @media print {
    .site-footer {
      display: none;
    }
  }
}

/* Keep footer-only link overrides outside the layer so they beat global `a` styles. */
.site-footer .footer-min .brand-link,
.site-footer .footer-min .brand-link:visited,
.site-footer .footer-min .brand-link:hover,
.site-footer .footer-min .brand-link:focus,
.site-footer .footer-min .brand-link:active,
.site-footer .footer-min .footer-nav a.nav-btn,
.site-footer .footer-min .footer-nav a.nav-btn:visited,
.site-footer .footer-min .footer-nav a.nav-btn:hover,
.site-footer .footer-min .footer-nav a.nav-btn:focus,
.site-footer .footer-min .footer-nav a.nav-btn:active {
  color: var(--clr-white);
  text-decoration: none;
}

.site-footer .footer-max .status-bar .copyright,
.site-footer .footer-max .status-bar .copyright a,
.site-footer .footer-max .status-bar .copyright a:visited,
.site-footer .footer-max .status-bar .copyright a:hover,
.site-footer .footer-max .status-bar .copyright a:focus,
.site-footer .footer-max .status-bar .copyright a:active,
.site-footer .footer-max .status-bar .social a.social-btn,
.site-footer .footer-max .status-bar .social a.social-btn:visited,
.site-footer .footer-max .status-bar .social a.social-btn:hover,
.site-footer .footer-max .status-bar .social a.social-btn:focus,
.site-footer .footer-max .status-bar .social a.social-btn:active,
.site-footer .footer-max .status-bar .legal a.legal-btn,
.site-footer .footer-max .status-bar .legal a.legal-btn:visited,
.site-footer .footer-max .status-bar .legal a.legal-btn:hover,
.site-footer .footer-max .status-bar .legal a.legal-btn:focus,
.site-footer .footer-max .status-bar .legal a.legal-btn:active {
  color: var(--clr-white);
  text-decoration: none;
}

/* Fix for footer content links being overridden by global unlayered styles */
.site-footer .footer-cta,
.site-footer .footer-cta:visited,
.site-footer .footer-cta:hover,
.site-footer .footer-cta:focus,
.site-footer .footer-cta:active {
  color: var(--clr-white);
  text-decoration: none;
}

.site-footer .links a,
.site-footer .links-compact a,
.site-footer .links a:visited,
.site-footer .links-compact a:visited {
  color: var(--footer-quiet-text);
  text-decoration: none;
}

.site-footer .links a:hover,
.site-footer .links-compact a:hover,
.site-footer .links a:focus,
.site-footer .links-compact a:focus,
.site-footer .links a:active,
.site-footer .links-compact a:active {
  color: var(--clr-white);
}

/* Unlayered sizing guard: page bundles include unlayered resets that zero padding/margins. */
.site-footer
  :is(
    .footer-min,
    .brand-link,
    .nav-btn,
    .cookie-inline,
    .btn-accept,
    .btn-reject,
    .footer-max,
    .settings-header,
    .settings-content,
    .cookie-category,
    .settings-footer,
    .footer-btn-secondary,
    .footer-btn-primary,
    .footer-card,
    .footer-cta,
    .links a,
    .links-compact a,
    .tag,
    .status-bar,
    .social-btn,
    .legal-btn
  ) {
  padding: revert-layer;
}

.site-footer
  :is(
    .brand-link,
    .cookie-inline,
    .cookie-emoji,
    .cookie-text,
    .btn-accept,
    .btn-reject,
    .settings-header h2,
    .category-header h2,
    .category-header h3,
    .footer-card h2,
    .footer-card .name,
    .footer-card .role,
    .footer-card .bio
  ) {
  margin: revert-layer;
}

.site-footer
  :is(
    .cookie-emoji,
    .cookie-text,
    .btn-accept,
    .btn-reject,
    .settings-header h2,
    .category-header h2,
    .category-header h3,
    .footer-btn-secondary,
    .footer-btn-primary,
    .footer-card h2,
    .footer-card .name,
    .footer-card .role,
    .footer-card .bio,
    .footer-cta,
    .links a,
    .links-compact a,
    .tag,
    .social-btn,
    .legal-btn,
    .footer-max .legal .nav-btn
  ) {
  font-size: revert-layer;
}

.site-footer .links-compact {
  align-content: start;
}

.site-footer .links-compact a {
  align-self: start;
  min-height: var(--size-32);
}