/* ========================================
   HEADER V3 - Clean Implementation
   Aligned with V3 Design System
   ======================================== */

/* Dependencies: v3-design-system.css must be loaded first in HTML */
/* DO NOT use @import - causes blocking and double-loading */

/* ========================================
   MAIN HEADER STRUCTURE
   ======================================== */

.brutalist-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height-collapsed);
  /* START CLEAN-FIX-HEADER-ZINDEX */
  /* Fix: Ensure header is always above backdrop */
  /* To revert: Remove z-index line between START and END markers */
  z-index: 1101; /* Always above backdrop (998), not just when expanded */
  /* END CLEAN-FIX-HEADER-ZINDEX */
  transition: height var(--transition-medium) var(--easing-concrete);
}

.brutalist-header.expanded {
  height: var(--header-height-expanded);
}

/* Header Wrapper - Controls width and angular shape */
.brutalist-header .header-wrapper {
  position: relative;
  width: var(--header-width-collapsed);
  height: 100%;
  margin: 0 auto;
  background-color: var(--black);
  overflow: hidden;
  transition: width var(--transition-medium) var(--easing-concrete), 
              clip-path var(--transition-medium) var(--easing-concrete);
  border-bottom: var(--line-wrapper-border);
  clip-path: var(--clip-header-collapsed);
  z-index: 1; /* Above background accent lines */
}

.brutalist-header.expanded .header-wrapper {
  width: var(--header-width-expanded);
  clip-path: polygon(0% 0, 100% 0, 96% 100%, 4% 100%);
}

/* ========================================
   BACKGROUND ACCENT LINES
   ======================================== */

.brutalist-header::before,
.brutalist-header::after {
  content: '';
  position: absolute;
  background-color: var(--dark);
  opacity: var(--opacity-light);
  z-index: 0;
  transition: opacity var(--transition-medium) ease;
}

.brutalist-header::before {
  top: 0;
  left: -5%;
  width: 110%;
  height: 1px;
  transform: rotate(1deg);
}

.brutalist-header::after {
  bottom: 30%;
  left: -5%;
  width: 120%;
  height: 1px;
  transform: rotate(-2deg);
}

.brutalist-header.expanded::before,
.brutalist-header.expanded::after {
  opacity: var(--opacity-subtle);
}

/* ========================================
   GRID OVERLAY
   ======================================== */

.brutalist-header .header-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: var(--line-grid-opacity);
  z-index: var(--z-base);
}

.brutalist-header .grid-line {
  position: absolute;
  background-color: var(--line-grid-color);
}

.brutalist-header .grid-line.horizontal {
  height: var(--line-grid-thickness);
  width: 100%;
}

.brutalist-header .grid-line.horizontal:nth-child(1) {
  top: 33%;
}

.brutalist-header .grid-line.horizontal:nth-child(2) {
  top: 66%;
}

.brutalist-header .grid-line.vertical {
  width: var(--line-grid-thickness);
  height: 100%;
}

.brutalist-header .grid-line.vertical:nth-child(3) {
  left: 25%;
}

.brutalist-header .grid-line.vertical:nth-child(4) {
  left: 50%;
}

.brutalist-header .grid-line.vertical:nth-child(5) {
  left: 75%;
}

/* ========================================
   EXPAND HINT — Header Directional Overrides
   Position: top (below collapsed header), z-index: above fixed elements
   Arrow bounce: UP, Auto-hide: slides UP to hide, DOWN to show
   Shared base (.expand-hint, .hint-arrow, .hint-text) in v3-design-system.css
   ======================================== */

/* START CLEAN-FIX-8A-B8-HEADER-HINT-DIRECTIONAL */
/* To revert: Restore original expand-hint rules from git commit before this change */

.brutalist-header .expand-hint {
  top: calc(var(--header-height-collapsed) + var(--spacing-6));
  z-index: calc(var(--z-fixed) + 1);
  transition: opacity var(--transition-fast) ease;
}

/* Class-based hint visibility for JS auto-hide cycle */
.brutalist-header .expand-hint.hint-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Concrete-slide: header hint slides UP to hide, DOWN to show */
/* Easing: Hide = heavy start, abrupt stop. Show = slow grind, smooth settle. */
.brutalist-header .expand-hint.hint-hiding {
  animation: hint-header-hide 0.6s cubic-bezier(0.7, 0, 1, 0.5) forwards;
}
.brutalist-header .expand-hint.hint-showing {
  animation: hint-header-show 0.6s cubic-bezier(0, 0.5, 0.3, 1) forwards;
}

@keyframes hint-header-hide {
  0% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-24px); pointer-events: none; }
}
@keyframes hint-header-show {
  0% { opacity: 0; transform: translateX(-50%) translateY(-24px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
}

/* Arrow bounce UP */
.brutalist-header .hint-arrow.pulse {
  animation: hint-arrow-pulse-up 1.5s ease-in-out;
}

@keyframes hint-arrow-pulse-up {
  0% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(calc(-1 * var(--spacing-6))); opacity: 1; }
  100% { transform: translateY(0); opacity: 0.7; }
}
/* END CLEAN-FIX-8A-B8-HEADER-HINT-DIRECTIONAL */

/* ========================================
   CONTAINER LAYOUTS
   ======================================== */

.brutalist-header .container {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 2;
}

/* ========================================
   COLLAPSED HEADER STATE
   ======================================== */

.brutalist-header .header-collapsed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  transition: opacity var(--transition-fast) ease;
  z-index: 2;
}

.brutalist-header .header-collapsed .container {
  padding: 0 15%;
  justify-content: space-between;
}

.brutalist-header .header-collapsed .logo-section,
.brutalist-header .header-collapsed .title-section {
  display: flex;
  align-items: center;
}

.brutalist-header .header-collapsed .logo-section {
  justify-content: flex-start;
  border-right: 1px solid var(--dark);
  flex: 0 0 40%;
  position: relative;
  z-index: 2; /* Above coord-lines */
}

.brutalist-header .header-collapsed .title-section {
  justify-content: flex-end;
  position: relative;
  flex: 0 0 60%;
  overflow: visible; /* Allow coord lines to extend */
}

/* Title Column - Collapsed state */
.brutalist-header .header-collapsed .title-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  align-items: flex-end;
  overflow: visible; /* Allow coord lines to extend */
}

.brutalist-header .header-collapsed .title-line {
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--light);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-normal);
  text-align: right;
  position: relative;
  margin-right: var(--spacing-12);
  overflow: visible; /* Allow coord lines to extend */
  /* START CLEAN-FIX-PHASE8A-HEADER-NOWRAP */
  /* Prevents "DIGITAL + PHYSICAL" from wrapping to 2 lines at narrow widths (e.g. 767–768px) */
  /* Title lines are a fixed 3-line layout and should never wrap at any breakpoint */
  /* To revert: Remove the white-space line between START and END markers */
  white-space: nowrap;
  /* END CLEAN-FIX-PHASE8A-HEADER-NOWRAP */
}

/* Title-line based coord lines */
.brutalist-header .header-collapsed .title-line .coord-line {
  position: absolute;
  background-color: var(--coord-line-color);
  opacity: var(--coord-opacity);
  /* z-index handled by specific elements */
}

.brutalist-header .header-collapsed .title-line .coord-line.x {
  top: 50%;
  left: -170px; /* Fixed negative offset to reach wrapper edge */
  height: var(--coord-line-thickness);
  width: 500px; /* Fixed width to span entire header */
  transform: translateY(-50%);
  z-index: var(--z-base); /* Behind logo and text */
}

.brutalist-header .header-collapsed .title-line .coord-line.y {
  top: 0;
  /* Position at the right edge where coord point is */
  left: calc(100% + var(--spacing-12) + var(--spacing-6));
  width: var(--coord-line-thickness);
  height: 100%;
  transform: translateX(-50%);
  z-index: var(--z-base); /* Match coord-line.x */
}

/* Title-line based coord points */
.brutalist-header .header-collapsed .title-line .coord-point {
  position: absolute;
  top: 50%;
  /* Position to center on the vertical coord line */
  left: calc(100% + var(--spacing-12) + var(--spacing-6));
  width: var(--coord-point-size);
  height: var(--coord-point-size);
  background-color: var(--coord-color-primary);
  border-radius: 50%;
  clip-path: none; /* Override any inherited clip-path to show circle */
  transform: translate(-50%, -50%); /* Center the point on the line */
  z-index: 0; /* Below coord-lines (z-index: 1) */
}


/* ========================================
   EXPANDED HEADER STATE
   ======================================== */

.brutalist-header .header-expanded {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  opacity: 0;
  transition: opacity var(--transition-fast) ease;
  z-index: 2;
}

.brutalist-header .header-expanded .container {
  padding: 0;
  justify-content: space-between;
}

/* Three-column layout */
.brutalist-header .header-expanded .left-section {
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5%; /* Match container padding for equal spacing */
}

.brutalist-header .header-expanded .logo-section {
  border-right: none;
}

.brutalist-header .header-expanded .center-section {
  width: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.brutalist-header .header-expanded .right-section {
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5%; /* Match container padding for equal spacing */
}

/* START CLEAN-FIX-8A-B8-C4C5-H5-EXPANDED-LAYOUT */
/* H5: Section content alignment — logo centered, CTA faces inward toward center */
/* To revert: Search for CLEAN-FIX-8A-B8-C4C5-H5-EXPANDED-LAYOUT and delete between START/END markers */
/* Revert restores: base justify-content:center on both sections */

/* Home: logo in left → centered, CTA in right → inward (toward center) */
.brutalist-header.v3-header--home .header-expanded .left-section { justify-content: center; }
.brutalist-header.v3-header--home .header-expanded .right-section { justify-content: flex-start; }

/* About/404: CTA in left → inward (toward center), logo in right → centered */
.brutalist-header.v3-header--about .header-expanded .left-section { justify-content: flex-end; }
.brutalist-header.v3-header--about .header-expanded .right-section { justify-content: center; }
/* END CLEAN-FIX-8A-B8-C4C5-H5-EXPANDED-LAYOUT */

.brutalist-header .header-expanded .title-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--spacing-12) 0;
  gap: var(--spacing-12);
}

/* ========================================
   LOGO SECTION
   ======================================== */

.brutalist-header .logo-section {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.brutalist-header .logo-container {
  width: var(--spacing-72);
  height: var(--spacing-48);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2; /* Above coord-lines */
  background-color: var(--darkest);
  border: 1px solid var(--dark);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-medium) var(--easing-concrete);
}

.brutalist-header .logo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--purple);
  font-weight: 700;
  font-size: var(--font-size-standard);
  letter-spacing: 1px;
}

.brutalist-header .logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ========================================
   NODE NETWORK
   ======================================== */

.brutalist-header .network-container {
  width: 100%;
  height: 10px;
  position: relative;
  overflow: hidden;
}

.brutalist-header .node-network {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--transition-medium) ease;
}

.brutalist-header.expanded .node-network {
  opacity: 1;
}

.brutalist-header .node {
  position: absolute;
  width: 3px;
  height: 3px;
  background-color: var(--purple);
  border-radius: 50%;
  opacity: var(--opacity-heavy);
  transition: transform var(--transition-medium) ease, background-color var(--transition-medium) ease;
}

/* Color distribution for nodes */
.brutalist-header .node:nth-child(6n+1) { background-color: var(--cyan); }
.brutalist-header .node:nth-child(6n+2) { background-color: var(--blue); }
.brutalist-header .node:nth-child(6n+3) { background-color: var(--purple); }
.brutalist-header .node:nth-child(6n+4) { background-color: var(--magenta); }
.brutalist-header .node:nth-child(6n+5) { background-color: var(--pink); }
.brutalist-header .node:nth-child(6n) { background-color: var(--darkblue); }

.brutalist-header .node-connection {
  position: absolute;
  background-color: var(--cool);
  pointer-events: none;
  transform-origin: 0 0;
  opacity: var(--opacity-subtle);
  height: 1px;
  z-index: -1;
}

/* ========================================
   TITLE ANIMATIONS
   ======================================== */

.brutalist-header .header-expanded .title-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-12);
  width: 100%;
}

.brutalist-header .header-expanded .title-segment {
  font-size: var(--font-size-standard);
  font-weight: 800;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-normal);
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.brutalist-header .header-expanded .title-segment .char {
  display: inline-block;
  transition: transform var(--transition-fast) cubic-bezier(0.19, 1, 0.22, 1),
              opacity var(--transition-fast) cubic-bezier(0.19, 1, 0.22, 1);
  transform-origin: center center;
  opacity: 0;
  transform: translateY(100%);
}

.brutalist-header .header-expanded .title-segment .char.visible {
  opacity: 1;
  transform: translateY(0);
}

.brutalist-header .header-expanded .title-segment.glitching {
  animation: text-glitch var(--transition-fast) ease;
}

@keyframes text-glitch {
  0% { transform: translateX(0); }
  20% { transform: translateX(-2px); color: var(--cyan); }
  35% { transform: translateX(2px); }
  50% { transform: translateX(-1px); color: var(--magenta); }
  65% { transform: translateX(1px); }
  75% { transform: translateX(-1px); color: var(--white); }
  90% { transform: translateX(2px); color: var(--cyan); }
  100% { transform: translateX(0); }
}

.brutalist-header .header-expanded .divider {
  color: var(--cool);
  opacity: var(--opacity-medium);
}

/* ========================================
   SUBTITLE MARQUEE
   ======================================== */

.brutalist-header .subtitle-marquee {
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  opacity: 0;
  transition: opacity var(--transition-fast) ease, transform var(--transition-fast) ease;
  height: 20px;
  clip-path: inset(0 50% 0 50%);
}

/* Unified subtitle marquee visibility rule - replaces all competing rules */
.brutalist-header.expanded .subtitle-marquee,
.brutalist-header.v3-header--about.expanded .subtitle-marquee,
.brutalist-header.v3-header--home.expanded .subtitle-marquee,
.brutalist-header.v3-header--404.expanded .subtitle-marquee,
.brutalist-header.v3-component.expanded .subtitle-marquee,
.brutalist-header .subtitle-marquee.force-visible,
.header-expanded .subtitle-marquee.force-visible,
.subtitle-marquee.force-visible {
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
  clip-path: inset(0 0 0 0) !important;
  animation: reveal-glitch 0.4s cubic-bezier(0.19, 1, 0.22, 1) forwards !important;
  animation-delay: 0.2s !important;
}


@keyframes reveal-glitch {
  0% { clip-path: inset(0 50% 0 50%); }
  40% { clip-path: inset(0 25% 0 25%); }
  60% { clip-path: inset(0 10% 0 10%); }
  80% { clip-path: inset(0 5% 0 5%); }
  100% { clip-path: inset(0 0 0 0); }
}

.brutalist-header .subtitle-marquee .marquee-content {
  display: inline-block;
  animation: marquee 30s linear infinite;
  animation-delay: 0.8s; /* Start after reveal-glitch completes (0.2s + 0.4s + buffer) */
}

.brutalist-header .subtitle-marquee .marquee-content span {
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--cool);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-normal);
  padding-right: 50px;
  position: relative;
}

.brutalist-header .subtitle-marquee .marquee-content span::before {
  content: '[';
  color: var(--dark);
  margin-right: 4px;
  font-weight: 700;
}

.brutalist-header .subtitle-marquee .marquee-content span::after {
  content: ']';
  color: var(--dark);
  margin-left: 4px;
  font-weight: 700;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Accent animations */
.brutalist-header .subtitle-marquee::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  width: 1px;
  height: 8px;
  background-color: var(--dark);
  animation: connection-pulse 2s infinite;
}

@keyframes connection-pulse {
  0%, 100% { height: 4px; opacity: 0.5; }
  50% { height: 8px; opacity: 1; }
}

.brutalist-header .subtitle-marquee::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 40px;
  height: 1px;
  background-color: var(--purple);
  animation: accent-line-move 8s infinite alternate;
}

@keyframes accent-line-move {
  0% {
    left: 0;
    background-color: var(--purple);
  }
  25% {
    background-color: var(--cool);
  }
  50% {
    left: calc(100% - 40px);
    background-color: var(--purple);
  }
  75% {
    background-color: var(--cool);
  }
  100% {
    left: 0;
    background-color: var(--purple);
  }
}

/* ========================================
   CTA MODULE - HEADER SPECIFIC
   ======================================== */

.brutalist-header .cta-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  position: relative;
  transition: transform var(--transition-medium) var(--easing-concrete);
  
  /* Header-specific hover translation */
  --cta-hover-translate-y: 2px;
  --cta-hover-translate-x: 0;
}

/* START CLEAN-FIX-8A-B8-C4-REMOVE-DEAD-CSS */
/* Removed: href-based position customizations (--cta-rotation, --cta-accent-color, --cta-pulse-color) */
/* These variables are NOT consumed anywhere in header-v3.css. Inline styles from createCTASection() */
/* use different names (--cta-color, --module-color, --pulse-color) and always override. Dead code. */
/* To revert: Restore from git commit 1d2d9a9 lines 684-694 */
/* END CLEAN-FIX-8A-B8-C4-REMOVE-DEAD-CSS */

/* Active state - header only (click effect) */
.brutalist-header .cta-link:active {
  transform: translateY(4px);
  transition-duration: var(--transition-fast);
}

.brutalist-header .cta-link.clicked {
  animation: button-click 0.4s ease;
}

@keyframes button-click {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.brutalist-header .cta-module {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /*width: var(--cta-module-size);*/
  width: 44px;
  height: var(--cta-module-size);
  border: var(--cta-module-border);
  background-color: var(--cta-module-bg);
  position: relative;
  transition: transform var(--transition-medium) var(--easing-concrete),
              border-color var(--transition-fast) ease,
              border-width var(--transition-fast) ease,
              box-shadow var(--transition-medium) ease;
  margin-right: var(--cta-module-gap);
  padding: 0;
  box-sizing: border-box;
}

/* Phase 0 CTA rebuild: .hovered class to be replaced with :hover */
.brutalist-header .cta-module.hovered {
  border: 1.2px solid var(--warm);
  box-shadow: var(--shadow-module-hover);
}

/* Header Module Indicator - Clean component-specific naming */
.brutalist-header .header-module-indicator {
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  position: relative;
  opacity: var(--opacity-soft);
  transition: opacity var(--transition-fast) ease, transform var(--transition-fast) ease;
  background-color: var(--pink);
  border: none;
}


/* Removed: href-based module indicator colors — inline styles from createCTASection() always override */
/* Part of CLEAN-FIX-8A-B8-C4-REMOVE-DEAD-CSS — see revert instructions above */

/* Header Pulse Ring - Clean component-specific naming */
.brutalist-header .header-module-indicator .header-pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: var(--opacity-strong);
  background-color: rgba(0, 247, 255, 0.62);
  display: none;
}

/* Removed: href-based pulse ring colors — inline styles from createCTASection() always override */
/* Part of CLEAN-FIX-8A-B8-C4-REMOVE-DEAD-CSS — see revert instructions above */

/* Header pulse ring animation */
.brutalist-header .header-module-indicator .header-pulse-ring.animate {
  animation: module-pulse-breathe 2s infinite;
}

@keyframes module-pulse-breathe {
  0% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.8); opacity: 0.36; }
  100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.6; }
}

/* Header active state removed - use CSS hover breathing animations only */

/* Module name (arrow) */
.brutalist-header .module-name {
  font-size: var(--font-size-small);
  font-weight: 400;
  color: var(--cool);
  transition: transform var(--transition-medium) ease, 
              color var(--transition-medium) ease;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Header module indicator hover states - Clean implementation */
.brutalist-header .cta-link:hover .header-module-indicator {
  opacity: 0.84;
  transform: scale(1.2);
  transform-origin: center center;
  animation: module-indicator-breathe 2s ease-in-out infinite;
}

@keyframes module-indicator-breathe {
  0%, 100% { transform: scale(1.2); opacity: 0.84; }
  50% { transform: scale(1.8); opacity: 0.92; }
}

/* Header pulse ring hover display */
.brutalist-header .cta-link:hover .header-module-indicator .header-pulse-ring {
  display: block;
  transform-origin: center center;
  animation: module-pulse-breathe 2s infinite;
}

/* Header active state: CTA box translation + module indicator scale */
.brutalist-header .cta-link:active {
  transform: translate(2px, 2px);
}

.brutalist-header .cta-link:active .header-module-indicator {
  transform: scale(0.9);
}

.brutalist-header .cta-link:hover .module-name,
/* Phase 0 CTA rebuild: .hovered class to be replaced with :hover */
.brutalist-header .module-name.hovered {
  color: var(--white);
}

/* Dynamic rotation based on data attributes */
.brutalist-header .cta-link:hover .module-name[data-rotation-direction="rotate"] {
  transform: rotate(var(--rotation-degrees, -90deg));
}

.brutalist-header .cta-link:hover .module-name[data-rotation-direction="rotateY"] {
  transform: rotateY(var(--rotation-degrees, 180deg));
}

.brutalist-header .cta-link:hover .module-name[data-rotation-direction="rotateZ"] {
  transform: rotateZ(var(--rotation-degrees, -180deg));
}

.brutalist-header .cta-link:hover .module-name[data-rotation-direction="scale"] {
  transform: scale(var(--rotation-degrees, 1.2));
}

/* Module name rotations now handled via CSS variables in universal system */

/* ========================================
   3D CUBE EFFECT
   ======================================== */

/* START CLEAN-FIX-8A-B8-C4-CTA-CUBE-WIDTH */
/* XL base: 96px (16×6n) — content-driven minimum with 12px rotation clearance */
/* Was min-width: 120px (design system default) — oversized for CTA text content */
/* Per-BP sizes in responsive blocks below (LG: 96px, MD: 84px, SM: 78px, XS: 78px) */
/* To revert: Restore min-width: var(--cta-cube-min-width), remove width */
.brutalist-header .cube-wrapper {
  perspective: 600px;
  position: relative;
  width: 96px;
  min-width: 0;
  height: var(--cta-cube-height);
}
/* END CLEAN-FIX-8A-B8-C4-CTA-CUBE-WIDTH */

.brutalist-header .cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform var(--cta-transition-duration) var(--cta-transition-easing);
}

.brutalist-header .cube-face {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; /* Center text for proper rotation */
  backface-visibility: hidden;
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.2px;
  transition: all var(--transition-fast) ease;
  /* START CLEAN-FIX-8A-B8-C4-CTA-CUBE-WIDTH */
  /* Prevents "more on me" from wrapping; overflow: hidden prevents text artifacts during 3D rotation */
  /* To revert: Remove white-space and overflow lines */
  white-space: nowrap;
  overflow: hidden;
  /* END CLEAN-FIX-8A-B8-C4-CTA-CUBE-WIDTH */
}

.brutalist-header .cube-face.front {
  transform: translateZ(12px);
  background-color: var(--cta-cube-bg-front);
  border: var(--cta-cube-border-front);
  color: var(--cta-cube-text-color-front);
  font-weight: 400;
  padding-left: var(--cta-text-padding-left);
  padding-right: var(--cta-text-padding-right);
}

.brutalist-header .cube-face.back {
  transform: rotateX(180deg) translateZ(12px);
  background-color: var(--cta-cube-bg-back);
  border: var(--cta-cube-border-back);
  color: var(--cta-cube-text-color-back);
  font-weight: 700;
  position: relative;
  padding-left: var(--cta-text-padding-left);
  padding-right: var(--cta-text-padding-right);
  overflow: visible; /* Override base overflow:hidden — accent line ::after at bottom:-2px needs to render outside bounds */
}

.brutalist-header .cube-face.back::after {
  content: '';
  position: absolute;
  bottom: var(--cta-accent-line-position);
  left: 0;
  width: 0;
  height: var(--cta-accent-line-height);
  background-color: var(--cta-color); /* Use dynamic CTA color */
  transition: width var(--transition-medium) var(--easing-concrete);
}

/* Accent colors now handled via CSS variables in position-specific rules above */

/* Phase 0 CTA rebuild: .hovered class to be replaced with :hover */
.brutalist-header .cta-link.hovered .cube-face.back::after {
  width: 100%;
}

/* Phase 0 CTA rebuild: CSS :hover accent underline (replaces .hovered JS class) */
.brutalist-header .cta-link:hover .cube-face.back::after {
  width: 100%;
}

.brutalist-header .cube-face.top,
.brutalist-header .cube-face.bottom,
.brutalist-header .cube-face.left,
.brutalist-header .cube-face.right {
  background-color: rgba(18, 18, 18, 0.1);
  opacity: var(--opacity-heavy);
}

.brutalist-header .cube-face.top {
  height: 24px;
  transform: rotateX(90deg) translateZ(12px);
}

.brutalist-header .cube-face.bottom {
  height: 24px;
  transform: rotateX(-90deg) translateZ(12px);
}

.brutalist-header .cube-face.left {
  width: 24px;
  height: 100%;
  left: 50%;
  margin-left: -12px;
  transform: rotateY(-90deg) translateZ(12px);
}

.brutalist-header .cube-face.right {
  width: 24px;
  height: 100%;
  left: 50%;
  margin-left: -12px;
  transform: rotateY(90deg) translateZ(12px);
}

.brutalist-header .cta-link:hover .cube-face {
  border-color: rgba(48, 51, 51, 0.4);
}

.brutalist-header .cta-link:hover .cube-face.back {
  background-color: rgba(18, 18, 18, 0.6);
}

/* Cube rotation is handled by JavaScript, not CSS hover */

/* ========================================
   HEADER VARIANTS (relocated from inside responsive block for Phase 8A-A.4)
   ======================================== */

/* Removed: Page Variants — --cta-color set by class selectors but inline styles from */
/* createCTASection() always override. Dead code after variant unification. */
/* Part of CLEAN-FIX-8A-B8-C4-REMOVE-DEAD-CSS — see revert instructions above */

/* Apply CTA color to relevant elements */
.brutalist-header .cta-link .header-module-indicator {
  background-color: var(--cta-color);
}

.brutalist-header .cta-link .header-pulse-ring {
  background-color: var(--cta-color);
  opacity: 0.62;
}

/* Cube faces use design system backgrounds, not accent colors */

/* CTA Position Variants */
.brutalist-header .cta-link.cta-position-left {
  margin-right: auto;
  margin-left: 0;
}

.brutalist-header .cta-link.cta-position-center {
  margin: 0 auto;
}

.brutalist-header .cta-link.cta-position-right {
  margin-left: auto;
  margin-right: 0;
}

/* ========================================
   MEDIA QUERIES
   ======================================== */

/* START CLEAN-FIX-PHASE8A-HEADER-RESPONSIVE */
/* Phase 8A-A.4: 4-bucket responsive system — Iteration 2 (Feb 19, 2026) */
/* Buckets: ≥992px (base+LG) | ≤991px (MD compressed) | ≤767px (SM center hidden) | ≤599px (XS layout shift) */
/* To revert: restore from git commit 03e0454 (original lines 972-1169) */
/* Aggregate revert: Search for CLEAN-FIX-PHASE8A-HEADER- and delete between START/END markers */

/* ------------------------------------------------------------------
   BUCKET 1: XL (1200px+) — Base/Default
   Height: 84px (14×6), wrapper 30% (design system default), full layout
   ------------------------------------------------------------------ */
/* XL base height override — bumps from design-system default 72px to 84px */
.brutalist-header {
  --header-height-collapsed: 84px;
}

/* ------------------------------------------------------------------
   BUCKET 1: LG (992–1199px) — Expanded layout adjustments + collapsed width
   ------------------------------------------------------------------ */
@media (max-width: 1199px) {

  /* START CLEAN-FIX-8A-B8-C4C5-HEADER-COLLAPSED-WIDTH-LG */
  /* Collapsed header width: 38% (midpoint of 36–42% user-confirmed range) */
  /* Replaces vw-based clamp() that failed in iframe vw resolution */
  /* To revert: Remove this rule, restore CLEAN-FIX-8A-B8-C4C5-HEADER-FLUID-WIDTH block at EOF */
  .brutalist-header:not(.expanded) .header-wrapper {
    width: 38%;
  }
  /* END CLEAN-FIX-8A-B8-C4C5-HEADER-COLLAPSED-WIDTH-LG */

  /* --- Expanded --- */
  /* H8: Container edge breathing — insets content from clip-path taper (4%/96% bottom edges) */
  /* Matches MD/SM Max pattern; 3% balances edge breathing with center-section title space */
  .brutalist-header .header-expanded .container {
    padding: 0 3%;
  }

  .brutalist-header .header-expanded .center-section {
    width: 54%;
  }

  .brutalist-header .header-expanded .left-section,
  .brutalist-header .header-expanded .right-section {
    width: 22%;
    padding: 0; /* H8: Clear base 5% padding — CTA overflows 22% sections with padding at LG min */
  }
  .brutalist-header .header-expanded .cta-module {
    margin-right: 0; /* H8: Kill double-spacing (matches MD block pattern) */
  }

  .brutalist-header .header-expanded .title-segment {
    font-size: var(--font-size-standard);
  }

}

/* ------------------------------------------------------------------
   BUCKET 2: MD (768–991px) — Expanded layout + typography compression + collapsed width
   ------------------------------------------------------------------ */
@media (max-width: 991px) {

  /* START CLEAN-FIX-8A-B8-C4C5-HEADER-COLLAPSED-WIDTH-MD */
  /* Collapsed header width: 48% (midpoint of 42–54% user-confirmed range) */
  /* To revert: Remove this rule, restore CLEAN-FIX-8A-B8-C4C5-HEADER-FLUID-WIDTH block at EOF */
  .brutalist-header:not(.expanded) .header-wrapper {
    width: 48%;
  }
  /* END CLEAN-FIX-8A-B8-C4C5-HEADER-COLLAPSED-WIDTH-MD */

  /* START CLEAN-FIX-8A-B8-C4C5-H5-EXPANDED-LAYOUT */
  /* H5: Shared expanded fixes — scoped to ≤991px to preserve LG/XL base padding+spacing */
  /* Kill cta-module double-spacing: margin-right + cta-link gap = 18px. Only gap needed. */
  .brutalist-header .header-expanded .cta-module { margin-right: 0; }
  /* Clear base 5% padding — per-breakpoint padding replaces this at SM/MD */
  .brutalist-header .header-expanded .left-section,
  .brutalist-header .header-expanded .right-section { padding: 0; }
  /* Logo responsive scaling — preserves 3:2 ratio while fitting narrower sections */
  .brutalist-header .header-expanded .logo-container {
    max-width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }
  /* END CLEAN-FIX-8A-B8-C4C5-H5-EXPANDED-LAYOUT */

  /* START CLEAN-FIX-8A-B8-C4C5-FIX-MD-EXPANDED */
  /* MD expanded: Match XL hierarchy — network visible, title > subtitle */
  /* Width math: 22% + 56% + 22% = 100% */
  /* Vertical budget (96px): network(8) + gap(6) + title(~16) + gap(6) + subtitle(~14) = ~50px ✓ */
  /* Performance watchpoint: network animateNodes() does per-frame DOM rebuild */
  /* To revert: Restore center 52%, left/right 24%, network display:none, title specialized */

  /* 1. Show network at MD — was display: none */
  .brutalist-header .network-container {
    display: block;
    height: 8px; /* Compressed from XL base 10px */
  }

  /* 2. Fix type hierarchy — title > subtitle (was inverted) */
  .brutalist-header .header-expanded .title-segment {
    font-size: var(--font-size-small);              /* 12.8px — down from XL's font-size-large */
    letter-spacing: var(--letter-spacing-tight);
  }
  .brutalist-header .header-expanded .subtitle-marquee .marquee-content span {
    font-size: var(--font-size-specialized);         /* 10.4px — subordinate to title */
  }

  /* 3. Tighter vertical spacing to fit 3 rows in 96px */
  .brutalist-header .header-expanded .title-section {
    gap: var(--spacing-6);
    padding: var(--spacing-6) 0;
  }

  /* Tighten title row gap for compact vertical fit */
  .brutalist-header .header-expanded .title-row {
    gap: var(--spacing-6);
  }

  /* START CLEAN-FIX-8A-B8-C4C5-H5-EXPANDED-LAYOUT */
  /* 4. Section layout: V2d equal-width sides — replaces 22%/56%/22% with flex-basis 132px */
  .brutalist-header .header-expanded .container {
    padding: 0 4%;
    gap: 18px;
  }
  .brutalist-header .header-expanded .left-section,
  .brutalist-header .header-expanded .right-section {
    flex: 0 0 132px;
    padding: 0;
    min-width: 0;
  }
  .brutalist-header .header-expanded .center-section {
    flex: 1 1 0%;
    min-width: 0;
    width: auto; /* Override base 60% */
  }
  /* Cube: 78px (13×6n), face padding 4px */
  .brutalist-header .cube-wrapper { width: 78px; }
  .brutalist-header .cube-face.front,
  .brutalist-header .cube-face.back { padding-left: 4px; padding-right: 4px; }
  /* END CLEAN-FIX-8A-B8-C4C5-H5-EXPANDED-LAYOUT */
  /* END CLEAN-FIX-8A-B8-C4C5-FIX-MD-EXPANDED */
}

/* ------------------------------------------------------------------
   BUCKET 3: SM (600–767px) — Expanded center hidden, logo + CTA only, collapsed width
   ------------------------------------------------------------------ */
@media (max-width: 767px) {

  /* START CLEAN-FIX-8A-B8-C4C5-HEADER-COLLAPSED-WIDTH-SM */
  /* Collapsed header width: 66% (midpoint of 54–72% user-confirmed range, 11×6n) */
  /* XS block below overrides to 78% at <600px */
  /* To revert: Remove this rule, restore CLEAN-FIX-8A-B8-C4C5-HEADER-FLUID-WIDTH block at EOF */
  .brutalist-header:not(.expanded) .header-wrapper {
    width: 66%;
  }
  /* END CLEAN-FIX-8A-B8-C4C5-HEADER-COLLAPSED-WIDTH-SM */

  .brutalist-header .header-expanded .center-section {
    display: none;
  }

  .brutalist-header .header-expanded .left-section,
  .brutalist-header .header-expanded .right-section {
    width: auto;
    flex: 1;
    gap: var(--spacing-24);
  }

  /* CLEAN-FIX-8A-B8-C4-CTA-CUBE-WIDTH: SM 96px (16×6n) — fits "more on me" */
  .brutalist-header .cube-wrapper {
    width: 96px;
  }
  .brutalist-header .cube-face.front,
  .brutalist-header .cube-face.back {
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* START CLEAN-FIX-8A-B8-C4C5-H5-EXPANDED-LAYOUT */
/* ------------------------------------------------------------------
   SM Min (600–700px): 2-column, equal flex:1 sections (from SM block)
   Cube: 96px (same as SM default) — explicit for clarity
   ------------------------------------------------------------------ */
@media (min-width: 600px) and (max-width: 700px) {
  .brutalist-header .cube-wrapper { width: 96px; }
  .brutalist-header .cube-face.front,
  .brutalist-header .cube-face.back { padding-left: 6px; padding-right: 6px; }
}

/* ------------------------------------------------------------------
   SM Max (701–767px): V2c — 3-column, equal-width 138px sides, center visible
   Cube: 84px (14×6n), face padding 4px
   ------------------------------------------------------------------ */
@media (min-width: 701px) and (max-width: 767px) {
  .brutalist-header .header-expanded .center-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 0%;
    min-width: 0;
  }
  .brutalist-header .header-expanded .container {
    padding: 0 4%;
    gap: 18px;
  }
  .brutalist-header .header-expanded .left-section,
  .brutalist-header .header-expanded .right-section {
    flex: 0 0 138px;
    padding: 0;
    min-width: 0;
  }
  .brutalist-header .cube-wrapper { width: 84px; }
  .brutalist-header .cube-face.front,
  .brutalist-header .cube-face.back { padding-left: 4px; padding-right: 4px; }
}
/* END CLEAN-FIX-8A-B8-C4C5-H5-EXPANDED-LAYOUT */

/* ------------------------------------------------------------------
   BUCKET 4: XS (≤599px) — Collapsed layout shift + compact expanded
   Height: 54px (9×6), wrapper 78%, clip-path 4%/96%
   Collapsed: Logo hidden, text centered, coords hidden
   Hint: one-word text via JS, wider max-width
   ------------------------------------------------------------------ */
@media (max-width: 599px) {
  .brutalist-header {
    --header-height-collapsed: 54px;
  }

  /* START CLEAN-FIX-8A-B8-C4C5-FIX-CLIPPATH */
  /* XS clip-path: more substantial taper — 7% collapsed, 4% expanded */
  /* Was 4%/2% — too subtle to read as intentional geometry at mobile sizes */
  /* To revert: Restore clip-path 96%/4% collapsed, 98%/2% expanded */
  .brutalist-header .header-wrapper {
    width: 78%;
    clip-path: polygon(0% 0, 100% 0, 93% 100%, 7% 100%);
  }

  .brutalist-header.expanded .header-wrapper {
    clip-path: polygon(0% 0, 100% 0, 96% 100%, 4% 100%);
  }
  /* END CLEAN-FIX-8A-B8-C4C5-FIX-CLIPPATH */

  /* --- Collapsed: logo hidden, text centered, coords hidden --- */
  .brutalist-header .header-collapsed .container {
    padding: 0 var(--spacing-12);
  }

  .brutalist-header .header-collapsed .logo-section {
    display: none;
    border-right: none;
  }

  .brutalist-header .header-collapsed .title-section {
    flex: 0 0 100%;
    justify-content: center;
  }

  .brutalist-header .header-collapsed .title-column {
    align-items: center;
  }

  .brutalist-header .header-collapsed .title-line {
    text-align: center;
    margin-right: 0;
    line-height: 1; /* Compact: default ~1.4 causes 3 lines to exceed 54px height */
  }

  /* Hide coord lines and points at XS — visual accents unnecessary at mobile */
  .brutalist-header .header-collapsed .title-line .coord-line,
  .brutalist-header .header-collapsed .title-line .coord-point {
    display: none;
  }

  /* --- Expanded: compact logo + CTA (center already hidden from ≤767px) --- */
  .brutalist-header .header-expanded .logo-container {
    width: var(--spacing-48);
    height: var(--spacing-36);
  }

  /* START CLEAN-FIX-8A-B8-C4C5-H5-EXPANDED-LAYOUT */
  /* H5: V2 Container Padding — inset container from clip-path edges */
  /* Uses 24px (original V2), NOT 42px (amplified test value) — 42px overflows CTA at 375px */
  .brutalist-header .header-expanded .container {
    padding: 0 24px;
  }
  /* END CLEAN-FIX-8A-B8-C4C5-H5-EXPANDED-LAYOUT */

  /* CLEAN-FIX-8A-B8-C4-CTA-CUBE-WIDTH: XS 90px (15×6n) — fits "me >" comfortably */
  .brutalist-header .cube-wrapper {
    width: 90px;
  }
  .brutalist-header .cube-face.front,
  .brutalist-header .cube-face.back {
    padding-left: 4px;
    padding-right: 4px;
  }

  /* --- Expanded title row compact --- */
  .brutalist-header .header-expanded .title-row {
    font-size: var(--font-size-standard);
    gap: var(--spacing-6);
  }

  .brutalist-header .header-expanded .divider {
    margin: 0 var(--spacing-6);
  }


  /* --- ≤480px mobile-specific (compound: JS class + media query) --- */
  /* JS applies .v3-header--mobile class at ≤480px via V3LayoutManager */
  .brutalist-header.v3-header--mobile .header-wrapper {
    width: 78%;
  }

  .brutalist-header.v3-header--mobile .cta-link .cube-wrapper {
    width: 60px;
  }

  .brutalist-header.v3-header--mobile .cube-face {
    font-size: var(--font-size-small);
  }
}

/* REPLACED: CLEAN-FIX-8A-B8-C4C5-HEADER-FLUID-WIDTH moved to in-block static widths */
/* vw-based clamp() formulas failed in iframe contexts (vw resolved against parent viewport) */
/* Static % values now live inside each LG/MD/SM media query block above */
/* Original fluid formulas preserved here as reference: */
/*   SM: clamp(54%, calc(-10.67vw + 496px), 72%) → replaced with 66% */
/*   MD: clamp(42%, calc(0.67vw + 409.55px), 54%) → replaced with 48% */
/*   LG: clamp(36%, calc(7.25vw + 344.76px), 42%) → replaced with 38% */

/* END CLEAN-FIX-PHASE8A-HEADER-RESPONSIVE */