/* ═══════════════════════════════════════════════
   components.css — Shared Components (vh/vw-based)
   Navigation, Grids, Buttons, Capability Blocks,
   Info Cards, Image Band, Layers, Carousel,
   Project Layouts, Footer, and utility patterns.
   ═══════════════════════════════════════════════ */

/* ═══ NAVIGATION ═══ */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-border);
  padding: calc(var(--fs-base) * 1.5) 0;
  transition: background .3s, backdrop-filter .3s;
}

nav.blur {
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
}

.nav-logo {
  font-size: var(--nav-font);
  font-weight: var(--fw-regular);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--color-text);
}

.nav-logo .hl {
  font-weight: var(--fw-bold);
  color: var(--color-accent);
}

.nav-links {
  display: flex;
  list-style: none;
  align-items: center;
  flex: 1;
  justify-content: space-evenly;
}

.nav-links a,
.nav-group {
  font-size: var(--nav-font);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: rgba(44, 44, 44, .65);
  opacity: .65;
  transition: opacity .3s, color .15s;
}

.nav-links .active {
  color: var(--color-accent);
}

/* ─── Dropdown ─── */
.nav-dropdown {
  position: relative;
}

.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  background: transparent;
  border: none;
  padding: var(--space-1);
  min-width: 20vw;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility .35s;
  z-index: 101;
}

.nav-dropdown:hover .dropdown-content {
  opacity: 1;
  visibility: visible;
}

.dropdown-content a {
  display: block;
  padding: var(--space-03) 0;
  white-space: nowrap;
  font-size: var(--nav-font);
}

.dropdown-content a:hover {
  color: var(--color-accent);
}

/* ═══ GRIDS ═══ */
.grid-2 {
  display: grid;
  grid-template-columns: var(--grid-2col);
  gap: var(--gap-col) var(--gap-row);
}

.grid-3 {
  display: grid;
  grid-template-columns: var(--grid-3col);
  gap: var(--gap-col);
}

.grid-icon {
  display: grid;
  grid-template-columns: var(--grid-icon);
  gap: var(--gap-row);
  align-items: center;
}

/* ─── cap-icon-row alias (canonical: capability-icons.md) ─── */
.cap-icon-row {
  display: grid;
  grid-template-columns: var(--grid-icon);
  gap: var(--gap-row);
  align-items: start;
  padding: .85rem 0;
}
.cap-icon-row strong {
  font-weight: 400;
  color: #2c2c2c;
}
.cap-icon-row p {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════
   CAPABILITY ICONS — CSS-drawn icon system
   Source: workspace/knowledge/frontend/capability-icons.md
   ═══════════════════════════════════════════════ */

/* ─── Base Icon ─── */
.icn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #f7f6f4 0%, #ece8df 100%);
}

/* ─── FEA — Heat Deformation ────────────────────────────── */
.icn-fea::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 40%,
    rgba(254,80,0,.35) 0%,
    rgba(254,80,0,.18) 30%,
    rgba(254,80,0,.08) 60%,
    transparent 100%);
}
.icn-fea::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px dashed var(--color-accent-mid);
}

/* ─── AM — Stacked Layers ───────────────────────────────── */
.icn-am-layers i {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 3px;
  border-radius: 1.5px;
  background: var(--color-accent);
}
.icn-am-layers i:nth-child(1) { top: 10px; opacity: .15; }
.icn-am-layers i:nth-child(2) { top: 18px; opacity: .2; }
.icn-am-layers i:nth-child(3) { top: 26px; opacity: .3; height: 4px; }
.icn-am-layers i:nth-child(4) { top: 34px; opacity: .35; height: 4px; }
.icn-am-layers i:nth-child(5) { top: 40px; opacity: .4; height: 4px; }
.icn-am-layers i:nth-child(6) { top: 46px; opacity: .25; }

/* ─── AM — Honeycomb ────────────────────────────────────── */
.icn-am-hex::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-linear-gradient(60deg,
      rgba(254,80,0,.12) 0px,
      rgba(254,80,0,.12) 1px,
      transparent 1px,
      transparent 8px),
    repeating-linear-gradient(-60deg,
      rgba(254,80,0,.12) 0px,
      rgba(254,80,0,.12) 1px,
      transparent 1px,
      transparent 8px),
    repeating-linear-gradient(0deg,
      rgba(254,80,0,.08) 0px,
      rgba(254,80,0,.08) 1px,
      transparent 1px,
      transparent 8px);
  mask: radial-gradient(circle, black 55%, transparent 58%);
  -webkit-mask: radial-gradient(circle, black 55%, transparent 58%);
}
.icn-am-hex::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px solid var(--color-accent-mid);
}

/* ─── macOS — App Window ────────────────────────────────── */
.icn-mac::before {
  content: '';
  position: absolute;
  top: 11px; left: 9px; right: 9px; bottom: 11px;
  border-radius: 5px;
  background: var(--color-accent-dim);
  border: 1.5px solid rgba(254,80,0,.2);
}
.icn-mac::after {
  content: '';
  position: absolute;
  top: 15px; left: 14px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(254,80,0,.35);
  box-shadow:
    9px 0 0 rgba(254,80,0,.12),
    18px 0 0 rgba(254,80,0,.12);
}
.icn-mac c {
  position: absolute;
  left: 15px;
  height: 2.5px;
  border-radius: 1.5px;
  background: rgba(254,80,0,.18);
}
.icn-mac c:nth-child(1) { top: 24px; right: 12px; }
.icn-mac c:nth-child(2) { top: 30px; right: 14px; width: 8px; }

/* ─── CI/CD — Continuous Loop ───────────────────────────── */
.icn-ci::before {
  content: '';
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--color-accent-mid);
  border-top-color: transparent;
  border-right-color: transparent;
  animation: icn-spin 3s linear infinite;
}
.icn-ci::after {
  content: '';
  position: absolute;
  inset: 17px;
  border-radius: 50%;
  border: 1px solid rgba(254,80,0,.18);
  border-bottom-color: transparent;
  border-left-color: transparent;
  animation: icn-spin 4s linear infinite reverse;
}
.icn-ci r {
  position: absolute;
  top: 50%; left: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: .4;
  transform: translate(-50%,-50%);
}
@keyframes icn-spin {
  to { transform: rotate(360deg); }
}

/* ─── EXTRACTION (rx-ex) ────────────────────────────────── */
.rx-ex::before {
  content: '';
  position: absolute;
  top: 15px; left: 50%;
  width: 13px; height: 10px;
  border: 1.5px solid rgba(254,80,0,.35);
  border-radius: 2px 2px 0 0;
  transform: translateX(-50%);
}
.rx-ex::after {
  content: '';
  position: absolute;
  top: 30px; left: 50%;
  width: 1.5px; height: 7px;
  background: var(--color-accent);
  opacity: .4;
  transform: translateX(-50%);
}
.rx-ex a {
  position: absolute;
  top: 33px; left: 50%;
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid var(--color-accent);
  opacity: .5;
  transform: translateX(-50%);
}
.rx-ex d {
  position: absolute;
  top: 23px; left: 5px;
  width: 3px; height: 1.5px;
  background: var(--color-accent);
  border-radius: 1px;
}
.rx-ex d:nth-child(4) { left: 10px; opacity: .35; width: 5px; }
.rx-ex d:nth-child(5) { left: 17px; opacity: .2; }

/* ─── PATTERN ANALYSIS (rx-pa) ──────────────────────────── */
.rx-pa::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(254,80,0,.08) 1px, transparent 1px) 12px 10px,
    radial-gradient(circle, rgba(254,80,0,.08) 1px, transparent 1px) 20px 10px,
    radial-gradient(circle, rgba(254,80,0,.08) 1px, transparent 1px) 28px 10px,
    radial-gradient(circle, rgba(254,80,0,.35) 2.5px, transparent 2.5px) 12px 20px,
    radial-gradient(circle, rgba(254,80,0,.08) 1px, transparent 1px) 20px 20px,
    radial-gradient(circle, rgba(254,80,0,.08) 1px, transparent 1px) 28px 20px,
    radial-gradient(circle, rgba(254,80,0,.08) 1px, transparent 1px) 12px 30px,
    radial-gradient(circle, rgba(254,80,0,.35) 2.5px, transparent 2.5px) 28px 30px,
    radial-gradient(circle, rgba(254,80,0,.08) 1px, transparent 1px) 20px 30px;
  background-size: 100% 100%;
}
.rx-pa::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(254,80,0,.18);
}

/* ─── EVIDENCE DOSSIER (rx-ed) ──────────────────────────── */
.rx-ed::before {
  content: '';
  position: absolute;
  top: 12px; left: 15px;
  width: 15px; height: 17px;
  border-radius: 2px;
  border: 1.5px solid var(--color-accent-mid);
  background: rgba(254,80,0,.08);
  transform: rotate(-2deg);
}
.rx-ed::after {
  content: '';
  position: absolute;
  top: 15px; left: 18px;
  width: 15px; height: 17px;
  border-radius: 2px;
  border: 1.5px solid rgba(254,80,0,.35);
  background: rgba(254,80,0,.12);
  transform: rotate(2deg);
}
.rx-ed s {
  position: absolute;
  top: 18px; left: 23px;
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 1.5px solid var(--color-accent);
  opacity: .45;
  transform: rotate(2deg);
}
.rx-ed c {
  position: absolute;
  top: 28px; left: 22px;
  width: 7px; height: 1.5px;
  border-radius: 1px;
  background: var(--color-accent);
  opacity: .25;
  transform: rotate(2deg);
}
.rx-ed c:nth-child(3) { top: 31px; width: 4px; }

/* ─── ESCALATION (rx-es) ────────────────────────────────── */
.rx-es::before {
  content: '';
  position: absolute;
  top: 8px; left: 10px;
  width: 1.5px; height: 10px;
  background: rgba(254,80,0,.35);
}
.rx-es::after {
  content: '';
  position: absolute;
  top: 23px; left: 34px;
  width: 1.5px; height: 11px;
  background: rgba(254,80,0,.5);
}
.rx-es z {
  position: absolute;
  height: 1.5px;
  background: var(--color-accent);
  border-radius: 1px;
}
.rx-es z:nth-child(1) { top: 18px; left: 10px; width: 17px; opacity: .35; }
.rx-es z:nth-child(2) { top: 32px; left: 25px; width: 10px; opacity: .45; }
.rx-es a {
  position: absolute;
  top: 5px; right: 8px;
  width: 0; height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 5px solid var(--color-accent);
  opacity: .55;
}
.rx-es a:nth-child(4) {
  top: 34px; left: 27px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 5px solid var(--color-accent);
  border-bottom: none;
  opacity: .45;
}

/* ─── PIPELINE (rx-pp) ──────────────────────────────────── */
.rx-pp::before {
  content: '';
  position: absolute;
  top: 8px; left: 12px;
  width: 8px; height: 12px;
  border: 1.5px solid rgba(254,80,0,.35);
  transform: skewY(-10deg);
}
.rx-pp::after {
  content: '';
  position: absolute;
  top: 8px; left: 12px;
  width: 12px; height: 8px;
  border: 1.5px solid rgba(254,80,0,.25);
  transform: skewX(-15deg) translate(4px,8px);
}
.rx-pp p {
  position: absolute;
  bottom: 10px; left: 50%;
  width: 17px; height: 5px;
  border: 1.5px solid rgba(254,80,0,.35);
  background: var(--color-accent-soft);
  transform: translateX(-50%);
}
.rx-pp a {
  position: absolute;
  top: 25px; left: 50%;
  width: 0; height: 0;
  border-left: 2.5px solid transparent;
  border-right: 2.5px solid transparent;
  border-top: 4px solid var(--color-accent);
  opacity: .3;
  transform: translateX(-50%);
}

/* ─── MULTI-AGENT (rx-ma) ───────────────────────────────── */
.rx-ma::before {
  content: '';
  position: absolute;
  top: 10px; left: 20px;
  width: 1.5px; height: 8px;
  background: rgba(254,80,0,.18);
  transform: rotate(-30deg);
}
.rx-ma::after {
  content: '';
  position: absolute;
  top: 28px; left: 20px;
  width: 1.5px; height: 8px;
  background: rgba(254,80,0,.18);
  transform: rotate(30deg);
}
.rx-ma n {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 1.5px solid var(--color-accent);
}
.rx-ma n:nth-child(1) { top: 8px; left: 14px; background: var(--color-accent); opacity: .35; }
.rx-ma n:nth-child(2) { top: 30px; left: 14px; opacity: .35; }
.rx-ma n:nth-child(3) { top: 19px; left: 34px; background: var(--color-accent); opacity: .5; }
.rx-ma d {
  position: absolute;
  top: 19px; left: 20px;
  width: 14px; height: 1.5px;
  background: rgba(254,80,0,.18);
}
.rx-ma d:nth-child(5) { width: 1.5px; height: 12px; left: auto; right: 24px; }

/* ─── LOCAL LLM (rx-ll) ─────────────────────────────────── */
.rx-ll::before {
  content: '';
  position: absolute;
  top: 12px; left: 50%;
  width: 14px; height: 15px;
  border-radius: 2px;
  border: 1.5px solid var(--color-accent-mid);
  background: var(--color-accent-soft);
  transform: translateX(-50%);
}
.rx-ll::after {
  content: '';
  position: absolute;
  top: 17px; left: 50%;
  width: 6px; height: 4px;
  border-radius: 0 0 3px 3px;
  border: 1.5px solid rgba(254,80,0,.35);
  background: rgba(254,80,0,.12);
  transform: translateX(-50%);
}
.rx-ll l {
  position: absolute;
  bottom: 7px;
  width: 3px; height: 3px;
  border-radius: 1px;
  background: var(--color-accent);
  opacity: .3;
}
.rx-ll l:nth-child(1) { left: 7px; }
.rx-ll l:nth-child(2) { left: 15px; width: 4px; opacity: .4; }
.rx-ll l:nth-child(3) { left: 23px; opacity: .25; }
.rx-ll s {
  position: absolute;
  top: 28px; left: 50%;
  width: 8px; height: 1px;
  background: rgba(254,80,0,.18);
  transform: translateX(-50%);
}
.rx-ll s:nth-child(5) { top: 31px; width: 12px; opacity: .3; }

/* ─── DISCOVERY (rx-dw) ─────────────────────────────────── */
.rx-dw::before {
  content: '';
  position: absolute;
  bottom: 12px; left: 10px; right: 10px;
  height: 1.5px;
  background: rgba(254,80,0,.18);
  border-radius: 1px;
}
.rx-dw c {
  position: absolute;
  bottom: 15px;
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1.5px solid rgba(254,80,0,.25);
  background: var(--color-accent-soft);
}
.rx-dw c:nth-child(1) { left: 11px; }
.rx-dw c:nth-child(2) { left: 25px; border-color: rgba(254,80,0,.35); background: rgba(254,80,0,.12); }
.rx-dw c:nth-child(3) { left: 39px; border-color: rgba(254,80,0,.25); background: var(--color-accent-soft); }

/* ─── IDEATION (rx-id) ──────────────────────────────────── */
.rx-id::before {
  content: '';
  position: absolute;
  top: 12px; left: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(254,80,0,.35);
  background: radial-gradient(circle at 50% 50%, rgba(254,80,0,.18) 0%, transparent 60%);
  transform: translateX(-50%);
}
.rx-id::after {
  content: '';
  position: absolute;
  top: 24px; left: 50%;
  width: 7px; height: 5px;
  border-radius: 0 0 2.5px 2.5px;
  border: 1.5px solid var(--color-accent-mid);
  border-top: none;
  transform: translateX(-50%);
}
.rx-id f {
  position: absolute;
  top: 16px; left: 50%;
  width: 1.5px; height: 3px;
  background: var(--color-accent);
  opacity: .4;
  transform: translateX(-50%);
}
.rx-id f:nth-child(2) { transform: translateX(-50%) rotate(60deg); }
.rx-id f:nth-child(3) { transform: translateX(-50%) rotate(-60deg); }
.rx-id f:nth-child(4) { top: 42px; left: 12px; width: 2.5px; height: 1.5px; background: rgba(254,80,0,.12); border-radius: 1px; opacity: .5; transform: none; }
.rx-id f:nth-child(5) { top: 42px; left: 18px; transform: none; }
.rx-id f:nth-child(6) { top: 42px; left: 25px; opacity: .3; transform: none; }

/* ─── STRUCTURE (rx-st) ─────────────────────────────────── */
.rx-st::before {
  content: '';
  position: absolute;
  left: 50%;
  width: 1.5px;
  top: 17px; bottom: 17px;
  background: rgba(254,80,0,.18);
  transform: translateX(-50%);
}
.rx-st b {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent-soft);
  border: 1.5px solid rgba(254,80,0,.25);
  border-radius: 2px;
}
.rx-st b:nth-child(1) { top: 17px; width: 8px; height: 5px; border-color: var(--color-accent); background: rgba(254,80,0,.12); }
.rx-st b:nth-child(2) { top: 25px; width: 12px; height: 5px; border-color: rgba(254,80,0,.35); }
.rx-st b:nth-child(3) { top: 33px; width: 15px; height: 5px; border-color: rgba(254,80,0,.25); }
.rx-st v {
  position: absolute;
  left: 50%;
  width: 1.5px; height: 3px;
  background: rgba(254,80,0,.18);
  transform: translateX(-50%);
}
.rx-st v:nth-child(4) { top: 22px; }
.rx-st v:nth-child(5) { top: 30px; }

/* ─── ROADMAP (rx-rm) ───────────────────────────────────── */
.rx-rm::before {
  content: '';
  position: absolute;
  left: 12px;
  width: 1.5px;
  top: 7px; bottom: 7px;
  background: linear-gradient(180deg,
    rgba(254,80,0,.35),
    rgba(254,80,0,.18),
    rgba(254,80,0,.18));
}
.rx-rm d {
  position: absolute;
  left: 12px;
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--color-accent);
  transform: translateX(-50%);
}
.rx-rm d:nth-child(1) { top: 8px; background: var(--color-accent); opacity: .5; }
.rx-rm d:nth-child(2) { top: 22px; opacity: .4; background: var(--color-accent-soft); }
.rx-rm d:nth-child(3) { top: 36px; opacity: .35; background: var(--color-accent-soft); }
.rx-rm r {
  position: absolute;
  left: 22px;
  height: 1.5px;
  background: var(--color-accent);
  border-radius: 1px;
}
.rx-rm r:nth-child(4) { top: 7px; width: 15px; opacity: .25; }
.rx-rm r:nth-child(5) { top: 21px; width: 10px; opacity: .2; }
.rx-rm r:nth-child(6) { top: 35px; width: 13px; opacity: .2; }

/* ═══ BUTTONS ═══ */
.btn-inline {
  display: inline-block;
  padding: calc(var(--fs-base) * 0.7) calc(var(--fs-base) * 2);
  border: var(--border-width) solid var(--color-border);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  transition: all .3s;
  cursor: pointer;
  background: transparent;
  color: var(--color-text);
}

.btn-inline:hover {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}

.btn-accent {
  background: var(--color-accent);
  color: var(--color-bg);
  border: var(--border-width) solid var(--color-accent);
  display: inline-block;
  padding: calc(var(--fs-base) * 0.7) calc(var(--fs-base) * 2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  transition: all .3s;
  cursor: pointer;
}

.btn-accent:hover {
  background: var(--color-text);
}

.btn-row {
  display: flex;
  gap: var(--space-15);
  flex-wrap: wrap;
}

/* ═══ CAPABILITY BLOCK ═══ */
.cap-block {
  padding: 0 5%;
  max-width: 720px;
  margin: 0 auto;
}

.cap-block p {
  font-size: var(--fs-base);
  color: var(--color-text-secondary);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: var(--space-2) 0;
}

.m-num {
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  color: var(--color-accent);
  line-height: var(--lh-heading);
}

.m-label {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}

/* ═══ INFO CARDS ═══ */
.inf-grid {
  display: grid;
  grid-template-columns: var(--grid-2col);
  gap: var(--gap-card);
}

.inf-card {
  border: var(--border-width) solid var(--color-border);
  padding: var(--space-2);
  transition: border-color .3s;
}

.inf-card:hover {
  border-color: var(--color-accent);
}

.inf-card h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  margin-bottom: var(--space-05);
}

.inf-cat {
  font-size: var(--fs-sm);
  color: var(--color-accent);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--fw-light);
  margin-bottom: var(--space-05);
}

.inf-note { display: block; margin-top: var(--space-05); font-size: var(--fs-xs); color: var(--color-accent); font-style: italic; }

/* ═══ IMAGE BAND SYSTEM (canonical: band-overlay.md) ═══ */

/* Container */
.img-band {
  position: fixed;
  right: 0;
  height: var(--sec-img-h);
  width: calc(var(--bar-w) + var(--band-w));
  z-index: 100;
  display: flex;
  transform: translateX(calc(100% - var(--bar-w)));
  transition: transform .45s cubic-bezier(.4,0,.2,1);
  pointer-events: auto;
}
.img-band.preview {
  transform: translateX(calc(100% - (var(--band-w) + var(--bar-w))));
}

/* Orange Bar */
.img-band::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--bar-w);
  background: var(--color-accent);
  opacity: .1;
  transition: opacity .15s ease;
  z-index: 3;
}
.img-band:hover::before,
.img-band.bar-hot::before {
  opacity: 1;
}

/* Links-Variante */
.img-band.band-left {
  left: 0; right: auto;
  transform: translateX(calc(-100% + var(--bar-w)));
}
.img-band.band-left.preview { transform: translateX(0); }
.img-band.band-left::before { display: none; }
.img-band.band-left::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: var(--bar-w);
  background: var(--color-accent);
  opacity: .1;
  transition: opacity 1s ease;
  z-index: 3;
}
.img-band.band-left:hover::after,
.img-band.band-left.bar-hot::after { opacity: 1; }
.img-band.band-left .band-inner {
  margin-left: 0;
  margin-right: var(--bar-w);
}

/* Band-Inner */
.band-inner {
  display: flex; height: 100%;
  margin-left: var(--bar-w); flex: 1; min-width: 0;
}
.band-item {
  flex: 1; height: 100%; overflow: hidden;
  cursor: pointer; position: relative;
  border-right: .5px solid rgba(254,80,0,.3);
}
.band-item:last-child { border-right: none; }
.band-item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.band-item.selected { flex: 0 0 auto; }
.band-item.selected img {
  width: auto; height: 100%;
  object-fit: contain;
}

/* Proximity-Trigger */
.band-trigger {
  position: fixed;
  right: 0; top: 0;
  width: var(--trigger-w);
  height: var(--sec-img-h);
  z-index: 99;
  cursor: pointer;
}
.band-trigger.left { left: 0; right: auto; }

/* ═══ END BAND SYSTEM ═══ */

/* ═══ LAYER SYSTEMS ═══ */
.lb-canvas-wrap {
  position: relative;
  overflow: hidden;
  border: var(--border-width) solid var(--color-border-soft);
}

.lb-canvas {
  position: relative;
  width: calc(100vw / 3);
  height: calc(100vw / 3);
  margin: 0 auto;
}

.lb-canvas .ly {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

.lb-canvas .ly.on {
  opacity: 1;
  pointer-events: auto;
}

#lb2Canvas { width: calc(100vw * .75); height: calc(100vw / 4); }
#lb2Canvas .ly { object-fit: cover; }

.ly.ana-depth.on { mix-blend-mode: screen; }
.ly.ana-norm.on { mix-blend-mode: overlay; }
.ly.ana-objs.on { mix-blend-mode: screen; }

.ctrl-row {
  display: flex;
  gap: .35vw;
  flex-wrap: wrap;
  margin-top: var(--space-05);
}

.ctrl-btn {
  padding: clamp(8px, var(--space-03), 12px) clamp(10px, var(--space-07), 16px);
  border: var(--border-width) solid var(--color-border-soft);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: all .3s;
  background: transparent;
  color: var(--color-text-muted);
}

.ctrl-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-text-secondary);
}
.ctrl-btn.on {
  background: var(--color-accent-dim);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.ctrl-label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: var(--space-03);
}

/* ═══ GALLERY / CAROUSEL ═══ */
.gallery {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
}

.carousel-track {
  display: flex;
  height: 30vh;
  transition: transform .2s ease;
}

.carousel-slide {
  flex: 0 0 auto;
  height: 100%;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-05);
  margin-top: var(--space-1);
}

.carousel-dots button {
  width: clamp(14px, 0.8vw, 0.8vw);
  height: clamp(14px, 0.8vw, 0.8vw);
  border-radius: 50%;
  border: var(--border-width) solid var(--color-border);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .2s, border-color .2s;
}

.carousel-dots button.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* ═══ PROJECT LAYOUTS ═══ */
.proj {
  margin-bottom: 5%;
}

.proj.full img {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.proj .txt {
  padding: 0;
}

.proj .txt .title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-normal);
  color: var(--color-text);
  line-height: var(--lh-heading);
}

.proj .txt p {
  color: var(--color-text-secondary);
  line-height: var(--lh-body);
}

.proj img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 50vh;
  object-fit: cover;
}

.stack-wrap {
  position: relative;
}

/* ═══ DROPDOWN (details/summary) ═══ */
.proj-details summary {
  font-size: var(--fs-sm);
  color: var(--color-accent);
  cursor: pointer;
  letter-spacing: .08em;
  padding: var(--space-1) 0;
  list-style: none;
  text-transform: uppercase;
  border-bottom: var(--border-width) solid var(--color-accent);
  display: inline-block;
}

.proj-details summary::after {
  content: '▼';
  display: inline-block;
  margin-left: var(--space-05);
  transition: transform .2s;
  font-size: var(--fs-xs);
}

.proj-details[open] summary::after {
  transform: rotate(180deg);
}

.proj-details .details-content {
  background: var(--color-bg);
  padding: var(--space-1) 0;
}

/* ═══ FOOTER ═══ */
footer {
  text-align: center;
  padding: var(--space-4) var(--side-pad);
  font-size: var(--fs-sm);
  color: #999;
  letter-spacing: .15em;
  position: relative;
  text-transform: uppercase;
}

footer::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--color-accent);
  margin: 0 auto var(--space-2);
}

footer::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: radial-gradient(ellipse at bottom right, var(--color-accent-soft), transparent 70%);
  pointer-events: none;
}

footer .hl {
  color: var(--color-accent);
  font-weight: var(--fw-bold);
}

/* ═══ STACK CONTAINER (layer dissection) ═══ */
.stack-container {
  position: relative;
  width: 100vw;
  margin: 2% 0;
  margin-left: calc(-50vw + 50%);
  height: calc(100vw / 3);
  perspective: 800px;
  cursor: ew-resize;
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
}

.stack-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  will-change: transform;
  backface-visibility: hidden;
  z-index: 1;
}

.stack-layer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ═══ TYPEWRITER ═══ */
.typewriter {
  font-family: var(--ff-mono);
  font-size: clamp(14px, 3vw, 3vw);
  letter-spacing: .05em;
}

.schatten-typewriter {
  font-family: 'Courier New', monospace;
  font-size: 3vw;
  letter-spacing: .05em;
  background: var(--color-accent);
  color: #fff;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) 0;
  min-height: 3vw;
}

/* ═══ A-FRAME PANORAMA ═══ */
.a-enter-vr, .a-orientation-modal { display: none !important; }
a-scene {
  width: 100%;
  height: 45vh;
  display: block;
}

.pano-wrap {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
  background: #111;
  margin: 2% 0;
}
/* data-drag overlay (for panoramas and drag-enabled elements) */
[data-drag="true"]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,.03);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
#social .pano-wrap:first-of-type { height: 20vh; }
#social .pano-wrap:first-of-type a-scene { height: 100%; }
#social .pano-wrap:last-of-type { height: 30vh; }
#social .pano-wrap:last-of-type a-scene { height: 100%; }

/* ═══ VIDEO ═══ */
video.ambient {
  width: 100%;
  height: 20vh;
  object-fit: cover;
  cursor: pointer;
  transition: height .3s;
}

video.ambient.expanded {
  height: 80vh;
}

.video-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 99;
  display: none;
}

.video-backdrop.on {
  display: block;
}

/* ═══ 2-COLUMN PROJECT ROW ═══ */
.row-2col {
  display: grid;
  grid-template-columns: var(--grid-2col);
  gap: var(--gap-row);
  align-items: start;
}

.txt-left { text-align: right; justify-self: end; }  /* text hugs image on right */
.txt-right { text-align: left; justify-self: start; }  /* text hugs image on left */
.row-2col img { width: 100%; height: auto; display: block; }

/* ═══ ACCENT HIGHLIGHT ═══ */
.hl {
  color: var(--color-accent);
  font-weight: var(--fw-bold);
}

/* ═══ TOOLS LINE (about section) ═══ */
.tools-line {
  font-family: var(--ff-mono);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-body);
}

/* ═══ INFO LINE (about section) ═══ */
.info-line {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-body);
}

/* ═══ PORTRAIT (about section) ═══ */
.portrait {
  width: clamp(80px, 13vw, 13vw);
  max-width: 15vw;
  height: auto;
  border-radius: 50%;
  display: block;
  margin: var(--space-15) auto 0;
}

/* ═══ SECTION SUB-HEADINGS ═══ */
h4 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  margin: var(--space-2) 0 var(--space-05);
}

/* ═══ NAV HOVER ═══ */
.nav-links a:hover,
.nav-group:hover {
  color: var(--color-accent);
  opacity: 1;
  cursor: pointer;
}

/* ═══ PROJECT CATEGORY LABEL ═══ */
.proj .txt .title small {
  display: block;
  font-size: var(--fs-sm);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  margin-bottom: var(--space-03);
  font-weight: var(--fw-light);
}

/* ═══ PROJECT IMAGES (stack-wrap) ═══ */
.stack-wrap .proj-img,
.stack-wrap img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Section-specific: match band height (canonical: --sec-img-h) */
#lamps .stack-wrap .proj-img,
#industrial .stack-wrap .proj-img,
#social .stack-wrap .proj-img {
  display: block;
  width: 100%;
  height: var(--sec-img-h);
  object-fit: cover;
}

/* ═══ SEC-LABEL ADJACENT MARGIN ═══ */
.sec-label + .sec-label {
  margin-top: var(--space-5);
}

/* ═══ GALLERY EDGE BARS ═══ */
.gallery::before,
.gallery::after {
  content: '';
  position: absolute;
  top: 0;
  width: 1vw;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  opacity: .15;
  background: var(--color-accent);
  transition: opacity .2s;
}

.gallery::before {
  left: 0;
}

.gallery::after {
  right: 0;
}

.gallery.hover-left::before { opacity: 1; }
.gallery.hover-right::after { opacity: 1; }
.gallery.at-start::before {
  opacity: 0 !important;
}

.gallery.at-end::after {
  opacity: 0 !important;
}

/* ═══ A-FRAME LOADING STATES ═══ */
.pano-loading {
  opacity: .5;
  transition: opacity .6s;
}

.pano-active {
  opacity: 1;
}

/* ═══ DEPTH PARALLAX HERO (dp-hero) ═══ */
.dp-hero {
  height: 20vh;
  overflow: hidden;
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-top: 2%;
  margin-bottom: 2%;
}

.dp-hero canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
  image-rendering: high-quality;
}

/* ═══ HERO OVERLAY (dp-ol) ═══ */
.dp-ol {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dp-ol img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
  image-rendering: high-quality;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ═══ HERO WRAPPER SPACING ═══ */
#hero {
  margin: 45vh 0 5vh 0;
}

/* ═══ CUSTOM CURSOR (ring-based, original design) ═══ */
body { cursor: none !important; }
body *, a, button, input, textarea, [onclick], .btn, .nav-links a, .nav-logo { cursor: none !important; }

#cur {
  position: fixed;
  top: 0; left: 0;
  width: 1vw; height: 1vw;
  min-width: 10px; min-height: 10px;
  max-width: 18px; max-height: 18px;
  border: 1.5px solid var(--color-accent-strong);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width .1s, height .1s, background .1s, filter .1s, opacity .1s;
  opacity: 0;
}
#cur.vis { opacity: 1; }
#cur.on {
  background: var(--color-accent);
  border-color: var(--color-accent);
  width: 1.4vw; height: 1.4vw;
  min-width: 16px; min-height: 16px;
  max-width: 28px; max-height: 28px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.2));
}
#cur.split {
  background: transparent !important;
  border-color: transparent !important;
}

#cur .dot {
  position: absolute;
  width: 52%; height: 52%;
  border-radius: 50%;
  background: var(--color-accent);
  pointer-events: none;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: none;
}
#cur.split .dot {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
#cur.rejoin .dot {
  transform: translate(-50%, -50%) scale(0) !important;
  transition: transform .25s ease-in;
}

/* ═══ CAP-BLOCK SUBHEADING ═══ */
.subhead {
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  letter-spacing: var(--ls-normal);
  margin-bottom: var(--space-05);
  line-height: var(--lh-heading);
}

/* ═══ SPACIAL PANORAMA + RENDER GRID (pano-2col) ═══ */
.pano-2col {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr;
  width: 100vw;
  height: 28vh;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
  background: #111;
}

.pano-2col a-scene {
  height: 100%;
}

.pano-2col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ═══ 3-COLUMN PANORAMA GRID (pano-grid) ═══ */
.pano-grid {
  position: relative;
  display: grid;
  grid-template-columns: var(--grid-3col);
  width: 100vw;
  margin-top: 2%;
  margin-bottom: 2%;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
  background: #111;
}

.pano-grid a-scene {
  height: 20vh;
}

/* ═══ LAYER BREAK CONTROL GROUP WRAPPER (ctrl-section) ═══ */
.ctrl-section {
  margin-bottom: var(--space-2);
}

/* ═══ DOT INSIDE CTRL BTN ═══ */
.ctrl-btn .dot {
  display: inline-block;
  width: clamp(8px, 0.4vw, 0.4vw);
  height: clamp(8px, 0.4vw, 0.4vw);
  border-radius: 50%;
  background: var(--color-border-soft);
  margin-right: var(--space-03);
  transition: background .2s;
  vertical-align: middle;
}

.ctrl-btn.on .dot {
  background: var(--color-accent);
}

/* ═══ LAYER LABEL (ly-label) ═══ */
.ly-label {
  position: absolute;
  bottom: var(--space-05);
  left: var(--space-05);
  font-size: var(--fs-xs);
  background: rgba(0,0,0,.5);
  color: rgba(255,255,255,.8);
  padding: var(--space-03) var(--space-05);
  pointer-events: none;
  opacity: 1;
}

/* ═══ DISSECTION SET SWITCHER (stack-switcher) ═══ */
.stack-switcher {
  display: flex;
  justify-content: center;
  gap: var(--space-05);
  margin-top: var(--space-1);
  margin-bottom: var(--space-2);
}

.stack-set-btn {
  font-size: var(--fs-xs);
}

/* ═══ GALLERY GAP FIX ═══ */
.gallery .carousel-slide img {
  height: 100%;
  width: auto;
  display: block;
}

/* ═══ PROJ-DETAILS PARAGRAPH SPACING ═══ */
.proj-details .details-content p {
  margin-bottom: var(--space-1);
}

/* ═══ ANCHOR OFFSET FIX (nav overlap) ═══ */
#audio,
#furniture {
  scroll-margin-top: var(--space-5);
}

/* ═══ COMING SOON BUTTON (btn-coming) ═══ */
.btn-coming {
  position: relative;
  display: inline-block;
  padding: var(--space-05) var(--space-1);
  border: var(--border-width) dashed var(--color-border);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  cursor: default;
  color: var(--color-text-muted);
}

.btn-coming::after {
  content: 'in Kürze';
  position: absolute;
  top: -0.5em;
  right: -0.5em;
  font-size: 9px;
  background: var(--color-accent);
  color: #fff;
  padding: 1px 4px;
  border-radius: 2px;
  white-space: nowrap;
}

/* ═══ NAV SUB-DROPDOWN (sub-dropdown) ═══ */
.sub-dropdown {
  position: relative;
}

.sub-dropdown .dropdown-content {
  right: 100%; left: auto;
  top: 0;
}

/* ═══ NAV PROXIMITY ═══ */
nav.proximity .nav-links a { color: var(--color-accent); }
.nav-dropdown.active .dropdown-content { opacity: 1; visibility: visible; }

/* ═══ GRID-3 IMAGES ═══ */
.grid-3 img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 1px; }

/* ═══ SECTION ANCHORS ═══ */
section[id] { scroll-margin-top: clamp(60px, 8vh, 80px); }

/* ═══ HERO OVERLAY OPACITY ═══ */
.dp-ol img { opacity: 0; }

/* ═══ LAYER BREAK AMBIENT ═══ */
.lb-canvas-wrap { background-image: var(--lb-ambient); background-size: cover; background-position: center; }
.lb-canvas-wrap::before { content: ''; position: absolute; inset: -2px; background-image: var(--lb-ambient); background-size: cover; background-position: center; filter: blur(2vw); transform: scaleX(-1); z-index: 0; }
.lb-canvas-wrap .lb-canvas { position: relative; z-index: 1; }

/* ═══ LAYER DISSECTION AMBIENT ═══ */
.stack-container::before {
  content: '';
  position: absolute;
  inset: -2px;
  background-image: var(--ambient);
  background-size: cover;
  background-position: center;
  filter: blur(30px) brightness(1.8) contrast(.4);
  transform: scaleX(-1);
  z-index: 0;
}
/* Note: .stack-layer already has z-index: 1 from its definition above */

/* ═══ LAYER DISSECTION HOVER ═══ */
.stack-layer.hover { outline: var(--border-width) solid var(--color-accent); outline-offset: -1px; z-index: 2; }
.stack-layer.hover .ly-label { color: var(--color-accent); font-weight: var(--fw-regular); }

.stack-layer[data-dist="10"] { opacity: 0.5; }