/* ============================================
   ARCHVISION STUDIO - Master Stylesheet
   Professional Architectural Portfolio
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
  /* Light Theme */
  --bg-primary: #FAFAF8;
  --bg-secondary: #F0EEEA;
  --bg-card: #FFFFFF;
  --bg-overlay: rgba(0,0,0,0.6);
  --text-primary: #1A1A1A;
  --text-secondary: #5A5A58;
  --text-muted: #8A8A88;
  --accent: #B8860B;
  --accent-light: #D4A94C;
  --accent-dark: #8B6508;
  --border: #E0DDD8;
  --border-light: #EEECE8;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
  --shadow-xl: 0 24px 60px rgba(0,0,0,0.15);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  --max-width: 1400px;
  --nav-height: 72px;
}

[data-theme="dark"] {
  --bg-primary: #0F0F0F;
  --bg-secondary: #1A1A1A;
  --bg-card: #222222;
  --bg-overlay: rgba(0,0,0,0.8);
  --text-primary: #F0EEEA;
  --text-secondary: #A8A8A6;
  --text-muted: #6A6A68;
  --accent: #D4A94C;
  --accent-light: #E8C878;
  --accent-dark: #B8860B;
  --border: #333330;
  --border-light: #2A2A28;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.4);
  --shadow-xl: 0 24px 60px rgba(0,0,0,0.5);
}

/* --- Architectural Heritage Background --- */
@keyframes architectScroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@keyframes architectScrollReverse {
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

/* --- Skip Navigation Link --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 10000;
  padding: 0.75rem 1.5rem;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 1rem;
}

/* --- Focus Styles --- */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg-primary);
  transition: background var(--transition);
}

body {
  font-family: var(--font-body);
  background: transparent;
  color: var(--text-primary);
  line-height: 1.7;
  overflow-x: hidden;
  transition: color var(--transition);
  position: relative;
}

html {
  background: var(--bg-primary);
}

/* Breathing Architectural Heritage Watermark */
body::before,
body::after {
  content:
    'IMHOTEP · 2650 BC  ·  IKTINOS · 447 BC  ·  VITRUVIUS · 80 BC  ·  ISIDORE OF MILETUS · 537  ·  FILIPPO BRUNELLESCHI · 1420  ·  LEON BATTISTA ALBERTI · 1452  ·  DONATO BRAMANTE · 1502  ·  MICHELANGELO BUONARROTI · 1546  ·  ANDREA PALLADIO · 1570  ·  GIAN LORENZO BERNINI · 1624  ·  CHRISTOPHER WREN · 1675  ·  JOHN NASH · 1811  ·  KARL FRIEDRICH SCHINKEL · 1816  ·  EUGÈNE VIOLLET-LE-DUC · 1840  ·  LOUIS SULLIVAN · 1890  ·  ANTONI GAUDÍ · 1882  ·  FRANK LLOYD WRIGHT · 1893  ·  WALTER GROPIUS · 1919  ·  LUDWIG MIES VAN DER ROHE · 1929  ·  LE CORBUSIER · 1928  ·  ALVAR AALTO · 1935  ·  OSCAR NIEMEYER · 1940  ·  LOUIS KAHN · 1951  ·  EERO SAARINEN · 1956  ·  JØRN UTZON · 1957  ·  BUCKMINSTER FULLER · 1960  ·  PAUL RUDOLPH · 1963  ·  KENZO TANGE · 1964  ·  TADAO ANDO · 1976  ·  I. M. PEI · 1978  ·  RENZO PIANO · 1977  ·  NORMAN FOSTER · 1979  ·  RICHARD ROGERS · 1977  ·  FRANK GEHRY · 1989  ·  ZAHA HADID · 1993  ·  REM KOOLHAAS · 1994  ·  SANTIAGO CALATRAVA · 1996  ·  DANIEL LIBESKIND · 2001  ·  PETER ZUMTHOR · 2009  ·  TOYO ITO · 2013  ·  SHIGERU BAN · 2014  ·  FREI OTTO · 2015  ·  ALEJANDRO ARAVENA · 2016  ·  BALKRISHNA DOSHI · 2018  ·  ARATA ISOZAKI · 2019  ·  DIÉBÉDO FRANCIS KÉRÉ · 2022  ·  DAVID ADJAYE · 2023  ·  ';
  position: fixed;
  top: 0;
  width: 200px;
  white-space: nowrap;
  writing-mode: vertical-lr;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.35em;
  line-height: 200px;
  color: var(--accent);
  opacity: 0.04;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}
body::before {
  left: 0;
  animation: architectScroll 180s linear infinite;
}
body::after {
  right: 0;
  animation: architectScrollReverse 200s linear infinite;
}
[data-theme="dark"] body::before,
[data-theme="dark"] body::after {
  opacity: 0.035;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
  font-weight: 700;
  color: var(--text-primary);
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
h4 { font-size: clamp(1.1rem, 2vw, 1.4rem); }

p { color: var(--text-secondary); max-width: 72ch; overflow-wrap: break-word; word-break: break-word; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 3rem);
}

/* --- Navigation --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: rgba(250,250,248,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  transition: all var(--transition);
}

[data-theme="dark"] .nav {
  background: rgba(15,15,15,0.8);
}

.nav.scrolled {
  background: rgba(250, 250, 248, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .nav.scrolled {
  background: rgba(15, 15, 15, 0.95);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 3rem);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  min-width: 0;
}

.nav-logo-icon {
  width: 36px;
  height: 36px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links a {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--transition);
  position: relative;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width var(--transition);
}

.nav-links a:hover, .nav-links a.active {
  color: var(--text-primary);
}

.nav-links a:hover::after, .nav-links a.active::after {
  width: 100%;
}

.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all var(--transition);
  font-size: 1.1rem;
  border: 1px solid var(--border);
}

.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.nav-hamburger span {
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  transition: all var(--transition);
}

.nav-hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; }
.nav-hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* --- Mobile Nav --- */
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-primary);
  z-index: 999;
  padding: 2rem;
  flex-direction: column;
  gap: 1.5rem;
}

.mobile-menu.active { display: flex; }

.mobile-menu a {
  font-size: 1.2rem;
  font-weight: 500;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Hero Section --- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-height);
  position: relative;
  overflow: hidden;
  z-index: 5;
  background: transparent;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(240,238,234,0.7) 0%, rgba(250,250,248,0.5) 50%, rgba(240,238,234,0.7) 100%);
  z-index: 0;
}

[data-theme="dark"] .hero-bg {
  background: linear-gradient(135deg, rgba(15,15,15,0.45) 0%, rgba(26,26,26,0.3) 50%, rgba(15,15,15,0.45) 100%);
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-light) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.5;
  z-index: 0;
}

/* Horizontal architect-name ticker */
@keyframes architectTicker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.architect-ticker {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  background: var(--bg-secondary);
  position: relative;
  z-index: 1;
}
.architect-ticker-inner {
  display: inline-block;
  animation: architectTicker 90s linear infinite;
}
.architect-ticker span {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-style: italic;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  padding: 0 1.5rem;
}
.architect-ticker span strong {
  color: var(--accent);
  font-weight: 600;
  font-style: normal;
}

.hero-content {
  max-width: 800px;
  position: relative;
  z-index: 10;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 2rem;
}

.hero-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

.hero h1 {
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.hero h1 span {
  color: var(--accent);
  font-style: italic;
}

.hero p {
  font-size: 1.15rem;
  margin-bottom: 2.5rem;
  line-height: 1.8;
  text-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.hero-stats {
  display: flex;
  gap: 3rem;
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border);
}

.hero-stat h3 {
  font-size: 2.5rem;
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 800;
}

.hero-stat p {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-top: 4px;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  transition: all var(--transition);
  text-transform: uppercase;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  border: 2px solid var(--border);
  color: var(--text-primary);
}

.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-ghost {
  color: var(--accent);
  padding: 14px 0;
}

.btn-ghost:hover { color: var(--accent-dark); }
.btn-ghost::after { content: ' →'; transition: transform var(--transition); }

.btn-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* --- Section Styles --- */
.section {
  padding: clamp(4rem, 8vw, 8rem) 0;
  position: relative;
  z-index: 10;
  background: rgba(250,250,248,0.93);
}

[data-theme="dark"] .section {
  background: rgba(15,15,15,0.88);
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-label {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 1rem;
}

.section-header h2 {
  margin-bottom: 1rem;
}

.section-header p {
  margin: 0 auto;
  font-size: 1.05rem;
}

.section-divider {
  width: 60px;
  height: 3px;
  background: var(--accent);
  margin: 1.5rem auto 0;
}

/* --- Project Gallery Grid --- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 2rem;
}

.project-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
  position: relative;
}

.project-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.project-card-image {
  height: 280px;
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.3s ease;
}

.project-card:hover .project-card-image img {
  transform: scale(1.05);
}

.project-card-image svg {
  width: 90%;
  height: 90%;
  opacity: 0.9;
}

.project-card-overlay {
  position: absolute;
  inset: 0;
  background: var(--bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition);
}

.project-card:hover .project-card-overlay {
  opacity: 1;
}

.project-card-overlay .btn {
  transform: translateY(10px);
  transition: all var(--transition);
}

.project-card:hover .project-card-overlay .btn {
  transform: translateY(0);
}

.project-card-body {
  padding: 1.5rem;
}

.project-card-type {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 0.5rem;
  display: block;
}

.project-card-body h3 {
  margin-bottom: 0.5rem;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.3;
}

.project-card-body p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-card-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
}

.project-card-meta span {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* --- Project Detail Page --- */
.project-hero {
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav-height) + 4rem) 0 4rem;
  position: relative;
  background: rgba(240,238,234,0.85);
  z-index: 10;
}

[data-theme="dark"] .project-hero {
  background: rgba(26,26,26,0.8);
}

.project-hero-content {
  max-width: 700px;
  position: relative;
  z-index: 10;
}

.project-hero .section-label { margin-bottom: 1rem; }

.project-hero h1 {
  margin-bottom: 1rem;
  line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.project-hero p {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  line-height: 1.7;
  text-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.project-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
}

.project-spec {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.5rem;
  min-width: 140px;
}

.project-spec-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 600;
}

.project-spec-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 2px;
}

/* --- Blueprint Viewer --- */
.blueprint-section {
  background: var(--bg-secondary);
  padding: clamp(3rem, 6vw, 6rem) 0;
}

.blueprint-viewer {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.blueprint-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}

.blueprint-toolbar-title {
  font-weight: 700;
  font-size: 0.9rem;
}

.blueprint-controls {
  display: flex;
  gap: 0.5rem;
}

.blueprint-controls button {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all var(--transition);
  background: var(--bg-card);
  color: var(--text-secondary);
}

.blueprint-controls button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.blueprint-canvas {
  position: relative;
  overflow: hidden;
  cursor: grab;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.blueprint-canvas:active { cursor: grabbing; }

.blueprint-canvas svg {
  max-width: 100%;
  max-height: 100%;
  transition: transform var(--transition);
}

.blueprint-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.blueprint-tabs::-webkit-scrollbar { display: none; }

.blueprint-tab {
  padding: 1rem 1.5rem;
  font-size: clamp(0.72rem, 1.5vw, 0.85rem);
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
}

.blueprint-tab:hover, .blueprint-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Blueprint panel show/hide */
.blueprint-panel {
  display: none !important;
}

.blueprint-panel.active {
  display: flex !important;
}

/* --- Before/After Slider --- */
.ba-slider-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  max-height: 600px;
}

.ba-slider-before, .ba-slider-after {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
}

.ba-slider-before {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
}

.ba-slider-after {
  position: relative;
  z-index: 1;
}

.ba-slider-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
  z-index: 3;
  cursor: ew-resize;
  left: 50%;
  transform: translateX(-50%);
}

.ba-slider-handle::before {
  content: '⟨ ⟩';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 4px;
  box-shadow: var(--shadow-md);
}

.ba-label {
  position: absolute;
  top: 1rem;
  padding: 6px 14px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-sm);
  z-index: 4;
}

.ba-label-before { left: 1rem; }
.ba-label-after { right: 1rem; }

/* --- Layout Grid --- */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.detail-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: all var(--transition);
  overflow-wrap: break-word;
  word-break: break-word;
}

.detail-card:hover {
  box-shadow: var(--shadow-md);
}

.detail-card h4 {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.detail-card h4 .icon {
  color: var(--accent);
}

.detail-card ul {
  margin-top: 1rem;
}

.detail-card ul li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.92rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-card ul li::before {
  content: '◇';
  color: var(--accent);
  font-size: 0.7rem;
}

/* --- 3D View Section --- */
.render-section {
  padding: clamp(3rem, 6vw, 6rem) 0;
}

.render-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.render-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
  position: relative;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.render-item:hover {
  box-shadow: var(--shadow-lg);
  transform: scale(1.02);
}

.render-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.render-item:hover img {
  transform: scale(1.05);
}

.render-item svg {
  width: 100%;
  height: 100%;
}

.render-label {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  padding: 6px 14px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- About Section --- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.about-visual {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  border: 1px solid var(--border);
}

.about-content h2 { margin-bottom: 1.5rem; }
.about-content p { margin-bottom: 1rem; }

.about-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}

.about-feature {
  padding: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.about-feature h4 {
  font-size: 1rem;
  margin-bottom: 0.3rem;
  line-height: 1.4;
}

.about-feature p {
  font-size: 0.85rem;
  line-height: 1.5;
}

/* --- Contact Section --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group { display: flex; flex-direction: column; gap: 0.5rem; }

.form-group label {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.form-group input, .form-group textarea, .form-group select {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-primary);
  background: var(--bg-card);
  transition: border-color var(--transition);
}

.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

.form-group textarea { resize: vertical; min-height: 120px; }

.contact-info { display: flex; flex-direction: column; gap: 2rem; }

.contact-info-item {
  padding: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.contact-info-item h4 {
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.contact-info-item p { font-size: 0.9rem; }

/* --- Footer --- */
.footer {
  border-top: 1px solid var(--border);
  padding: 3rem 0;
  text-align: center;
  position: relative;
  z-index: 10;
  background: rgba(250,250,248,0.93);
}

[data-theme="dark"] .footer {
  background: rgba(15,15,15,0.88);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer p {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.footer-links {
  display: flex;
  gap: 1.5rem;
}

.footer-links a {
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: color var(--transition);
}

.footer-links a:hover { color: var(--accent); }

/* --- Animations --- */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }

/* --- Page-specific layouts --- */
.layout-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.layout-fullwidth { max-width: 100%; }

.layout-tabs-content {
  display: none;
}

.layout-tabs-content.active {
  display: block;
  animation: fadeTab 0.4s ease;
}

@keyframes fadeTab {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Interior Layout Suggestions --- */
.interior-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.interior-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  text-align: center;
}

.interior-card .icon {
  font-size: 2rem;
  margin-bottom: 0.8rem;
}

.interior-card h4 { font-size: 1rem; margin-bottom: 0.3rem; }
.interior-card p { font-size: 0.85rem; text-align: center; margin: 0 auto; }

/* --- Download CTA --- */
.download-cta {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 3rem;
  text-align: center;
  margin-top: 3rem;
}

.download-cta h3 { margin-bottom: 0.5rem; }
.download-cta p { margin: 0 auto 1.5rem; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .detail-grid,
  .about-grid,
  .contact-grid,
  .layout-split {
    grid-template-columns: 1fr;
  }

  .hero-stats { gap: 2rem; }
}

@media (max-width: 768px) {
  .nav-links, .theme-toggle-desktop {
    display: none;
  }

  .nav-hamburger { display: flex; }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .hero-stats {
    flex-direction: column;
    gap: 1.5rem;
  }

  .about-features {
    grid-template-columns: 1fr;
  }

  .project-specs {
    flex-direction: column;
    gap: 1rem;
  }

  .btn-group {
    flex-direction: column;
  }

  .footer-content {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .render-gallery {
    grid-template-columns: 1fr;
  }

  .interior-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Utility Classes --- */
.text-center { text-align: center; }
.text-accent { color: var(--accent); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 2rem; }
.gap-2 { gap: 1rem; }
.bg-alt { background: rgba(240,238,234,0.93); }
[data-theme="dark"] .bg-alt { background: rgba(26,26,26,0.88); }

/* ============================================
   HD PHOTOREALISTIC IMAGE ENHANCEMENTS
   Comparable to Banana Island, Vancouver, Stockholm
   ============================================ */

/* HD Image Container - Photographic Quality */
.hd-render {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 
    0 4px 6px rgba(0,0,0,0.07),
    0 12px 28px rgba(0,0,0,0.12),
    0 20px 48px rgba(0,0,0,0.08);
  background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%);
}

.hd-render::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.02) 0%,
    transparent 30%,
    transparent 70%,
    rgba(0,0,0,0.03) 100%
  );
  pointer-events: none;
  z-index: 10;
}

.hd-render svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Photographic Depth Enhancement */
.render-item.hd-quality,
.project-card-image.hd-quality {
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.04),
    0 8px 16px rgba(0,0,0,0.08),
    0 16px 32px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

.render-item.hd-quality svg,
.project-card-image.hd-quality svg {
  filter: contrast(1.02) saturate(1.05);
}

.render-item.hd-quality:hover svg,
.project-card-image.hd-quality:hover svg {
  filter: contrast(1.04) saturate(1.08) brightness(1.02);
}

/* HD Gallery Grid - Magazine Layout */
.hd-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.hd-gallery .render-item {
  aspect-ratio: 16/10;
  border: none;
  background: transparent;
}

/* Luxury Real Estate Photo Frame */
.photo-frame {
  position: relative;
  padding: 12px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 
    0 1px 2px rgba(0,0,0,0.04),
    0 4px 8px rgba(0,0,0,0.04),
    0 8px 16px rgba(0,0,0,0.04),
    0 16px 32px rgba(0,0,0,0.02);
}

.photo-frame::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(0,0,0,0.03);
  border-radius: calc(var(--radius-lg) - 4px);
  pointer-events: none;
}

/* HD Render Labels - Professional Typography */
.hd-label {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  padding: 10px 18px;
  background: rgba(15,15,15,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  text-transform: uppercase;
}

.hd-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  border-radius: 3px 0 0 3px;
}

/* Project Card HD Enhancement */
.project-card.hd-card {
  border: none;
  box-shadow: 
    0 2px 8px rgba(0,0,0,0.06),
    0 8px 24px rgba(0,0,0,0.08);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
              box-shadow 0.4s ease;
}

.project-card.hd-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 
    0 12px 32px rgba(0,0,0,0.12),
    0 24px 48px rgba(0,0,0,0.08);
}

/* Atmospheric Lighting Effect */
.atmosphere-glow {
  position: relative;
}

.atmosphere-glow::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    ellipse at 30% 20%,
    rgba(255,200,100,0.08) 0%,
    transparent 50%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.atmosphere-glow:hover::after {
  opacity: 1;
}

/* Blueprint to HD Transition Effect */
@keyframes blueprintToHD {
  0% {
    filter: saturate(0.3) contrast(0.9);
    opacity: 0.7;
  }
  100% {
    filter: saturate(1) contrast(1);
    opacity: 1;
  }
}

.blueprint-reveal {
  animation: blueprintToHD 1s ease-out forwards;
}

/* Real Estate Location Badge */
.location-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 6px 12px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(4px);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 4px;
}

.location-badge svg {
  width: 12px;
  height: 12px;
}

/* ============================================
   VINCENT VAN GOGH — THE STARRY NIGHT (1889)
   Post-impressionist swirling sky with cobalt
   blues, cadmium yellows, thick impasto strokes
   ============================================ */

/* --- Starry Night Animations --- */
@keyframes starrySwirl1 {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(90deg) scale(1.08); }
  50%  { transform: rotate(180deg) scale(1.15); }
  75%  { transform: rotate(270deg) scale(1.06); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes starrySwirl2 {
  0%   { transform: rotate(360deg) scale(1.1); }
  25%  { transform: rotate(270deg) scale(1.02); }
  50%  { transform: rotate(180deg) scale(0.95); }
  75%  { transform: rotate(90deg) scale(1.05); }
  100% { transform: rotate(0deg) scale(1.1); }
}
@keyframes starrySwirl3 {
  0%   { transform: rotate(0deg) translateX(0) translateY(0); }
  25%  { transform: rotate(45deg) translateX(15px) translateY(-10px); }
  50%  { transform: rotate(90deg) translateX(0) translateY(5px); }
  75%  { transform: rotate(135deg) translateX(-10px) translateY(-5px); }
  100% { transform: rotate(180deg) translateX(0) translateY(0); }
}
@keyframes starPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  30%      { opacity: 1;   transform: scale(1.5); }
  60%      { opacity: 0.7; transform: scale(1.2); }
}
@keyframes starTwinkle {
  0%, 100% { opacity: 0.3; }
  25%      { opacity: 1; }
  50%      { opacity: 0.5; }
  75%      { opacity: 0.9; }
}
@keyframes moonGlow {
  0%, 100% {
    box-shadow:
      0 0 30px 8px rgba(255,223,100,0.2),
      0 0 60px 20px rgba(255,210,70,0.1),
      0 0 100px 40px rgba(255,200,60,0.05);
  }
  50% {
    box-shadow:
      0 0 50px 15px rgba(255,223,100,0.35),
      0 0 90px 35px rgba(255,210,70,0.18),
      0 0 140px 60px rgba(255,200,60,0.08);
  }
}
@keyframes moonHaloRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes swirlDrift {
  0%   { transform: translateX(0) translateY(0) rotate(0deg) scaleY(1); }
  20%  { transform: translateX(8px) translateY(-12px) rotate(3deg) scaleY(1.02); }
  40%  { transform: translateX(20px) translateY(-8px) rotate(6deg) scaleY(0.98); }
  60%  { transform: translateX(5px) translateY(10px) rotate(-3deg) scaleY(1.01); }
  80%  { transform: translateX(-15px) translateY(5px) rotate(-5deg) scaleY(0.99); }
  100% { transform: translateX(0) translateY(0) rotate(0deg) scaleY(1); }
}
@keyframes brushStroke {
  0%   { opacity: 0.4; transform: scaleX(1); }
  50%  { opacity: 0.6; transform: scaleX(1.03); }
  100% { opacity: 0.4; transform: scaleX(1); }
}

/* --- Deep Night Sky Base --- Van Gogh's rich cobalt-to-prussian gradient */
.starry-night {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  background:
    /* Warm luminous nebula patches — Van Gogh's cadmium yellow undertones */
    radial-gradient(ellipse at 72% 12%, rgba(60,90,170,0.5) 0%, transparent 45%),
    radial-gradient(ellipse at 20% 30%, rgba(40,70,150,0.45) 0%, transparent 40%),
    radial-gradient(ellipse at 85% 55%, rgba(50,80,160,0.35) 0%, transparent 35%),
    radial-gradient(ellipse at 40% 75%, rgba(30,55,120,0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 65%, rgba(45,75,155,0.3) 0%, transparent 40%),
    /* Base sky gradient — Prussian blue to cobalt to ultramarine */
    linear-gradient(
      180deg,
      #060d1a 0%,
      #091526 8%,
      #0c1d38 16%,
      #10274d 25%,
      #153162 35%,
      #1a3c7a 45%,
      #1e4590 52%,
      #1a3c7a 60%,
      #153162 70%,
      #10274d 80%,
      #0c1d38 90%,
      #060d1a 100%
    );
}

/* --- Swirling Cloud Layers --- Van Gogh's thick impasto brushstroke turbulence */
.starry-night::before {
  content: '';
  position: absolute;
  inset: -60%;
  background:
    /* Primary great swirl — top-right (the iconic spiral) */
    radial-gradient(ellipse 420px 220px at 68% 16%, rgba(50,90,175,0.55) 0%, rgba(35,65,140,0.35) 30%, rgba(25,50,110,0.15) 55%, transparent 70%),
    radial-gradient(ellipse 360px 180px at 72% 18%, rgba(65,110,195,0.4) 0%, rgba(45,80,160,0.2) 40%, transparent 65%),
    radial-gradient(ellipse 280px 140px at 75% 14%, rgba(80,125,210,0.3) 0%, transparent 55%),
    /* Secondary swirl — center-left */
    radial-gradient(ellipse 480px 240px at 22% 38%, rgba(40,75,160,0.5) 0%, rgba(30,60,130,0.3) 30%, rgba(20,45,100,0.12) 55%, transparent 70%),
    radial-gradient(ellipse 380px 190px at 20% 36%, rgba(55,95,180,0.35) 0%, rgba(40,70,150,0.15) 45%, transparent 65%),
    /* Tertiary swirl — bottom center-right */
    radial-gradient(ellipse 350px 200px at 58% 68%, rgba(45,80,165,0.45) 0%, rgba(30,60,130,0.2) 35%, transparent 60%),
    radial-gradient(ellipse 280px 160px at 62% 72%, rgba(60,100,185,0.3) 0%, transparent 55%),
    /* Van Gogh's cadmium yellow luminous bands — warm strokes between swirls */
    radial-gradient(ellipse 600px 45px at 48% 22%, rgba(255,210,70,0.09) 0%, rgba(255,190,50,0.04) 50%, transparent 80%),
    radial-gradient(ellipse 500px 35px at 30% 48%, rgba(255,215,80,0.07) 0%, rgba(255,200,60,0.03) 50%, transparent 75%),
    radial-gradient(ellipse 450px 30px at 68% 62%, rgba(255,200,55,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 550px 40px at 15% 55%, rgba(255,220,90,0.05) 0%, transparent 75%),
    /* Green-teal undertones — Van Gogh mixed viridian into the sky */
    radial-gradient(ellipse 300px 150px at 45% 45%, rgba(30,80,80,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 250px 120px at 80% 50%, rgba(25,70,75,0.06) 0%, transparent 55%);
  animation: starrySwirl1 100s linear infinite;
  opacity: 0.75;
}

.starry-night::after {
  content: '';
  position: absolute;
  inset: -40%;
  background:
    /* Counter-rotating swirl layers — creates the turbulent depth */
    radial-gradient(ellipse 360px 190px at 78% 28%, rgba(55,95,180,0.45) 0%, rgba(40,70,150,0.2) 40%, transparent 65%),
    radial-gradient(ellipse 300px 170px at 12% 52%, rgba(50,85,170,0.4) 0%, rgba(35,65,140,0.15) 40%, transparent 60%),
    radial-gradient(ellipse 250px 140px at 55% 78%, rgba(40,75,155,0.35) 0%, transparent 55%),
    radial-gradient(ellipse 320px 160px at 38% 20%, rgba(60,105,190,0.3) 0%, transparent 55%),
    /* Warm impasto accent strokes — thick paint texture feel */
    radial-gradient(ellipse 400px 25px at 42% 32%, rgba(255,220,95,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 350px 20px at 72% 52%, rgba(255,205,75,0.05) 0%, transparent 65%),
    radial-gradient(ellipse 300px 22px at 25% 72%, rgba(255,210,80,0.06) 0%, transparent 70%);
  animation: starrySwirl2 130s linear infinite;
  opacity: 0.55;
}

/* --- Stars Container --- */
.starry-stars {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

/* --- Van Gogh's Stars --- Large radiating stars with halos, not just dots */
.starry-stars::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fffde0;
  box-shadow:
    /* ===== Large radiating stars (Van Gogh's iconic haloed stars) ===== */
    120px 75px 0 2px rgba(255,253,220,1),
    120px 75px 8px 4px rgba(255,240,150,0.4),
    120px 75px 16px 8px rgba(255,230,100,0.15),

    350px 140px 0 2.5px rgba(255,248,180,1),
    350px 140px 10px 5px rgba(255,235,130,0.45),
    350px 140px 20px 10px rgba(255,220,80,0.15),

    780px 190px 0 3px rgba(255,245,160,1),
    780px 190px 12px 6px rgba(255,230,110,0.5),
    780px 190px 24px 12px rgba(255,215,70,0.18),

    580px 55px 0 2px rgba(255,250,200,0.95),
    580px 55px 8px 4px rgba(255,240,150,0.35),

    950px 110px 0 2px rgba(255,253,220,0.95),
    950px 110px 8px 4px rgba(255,240,150,0.3),

    /* ===== Medium stars ===== */
    200px 290px 0 1.5px rgba(255,250,200,0.9),
    200px 290px 6px 3px rgba(255,240,150,0.25),
    450px 240px 0 1.5px rgba(255,248,190,0.85),
    700px 340px 0 2px rgba(255,245,170,0.9),
    700px 340px 8px 4px rgba(255,235,120,0.3),
    100px 490px 0 1.5px rgba(255,253,220,0.85),
    300px 440px 0 1.5px rgba(255,250,200,0.9),
    1100px 250px 0 1.5px rgba(255,248,190,0.85),
    1300px 180px 0 2px rgba(255,245,170,0.9),

    /* ===== Small dim stars — depth layer ===== */
    50px 175px 0 0.5px rgba(255,253,220,0.5),
    250px 95px 0 0.5px rgba(255,250,200,0.4),
    500px 175px 0 0.5px rgba(255,253,220,0.45),
    650px 85px 0 0.5px rgba(255,250,200,0.4),
    850px 275px 0 0.5px rgba(255,253,220,0.45),
    1050px 55px 0 0.5px rgba(255,250,200,0.4),
    150px 395px 0 0.5px rgba(255,253,220,0.35),
    400px 345px 0 0.5px rgba(255,250,200,0.45),
    600px 445px 0 0.5px rgba(255,253,220,0.4),
    800px 495px 0 0.5px rgba(255,250,200,0.35),
    1100px 175px 0 0.5px rgba(255,253,220,0.45),
    1250px 295px 0 0.5px rgba(255,250,200,0.4),
    180px 215px 0 0.5px rgba(255,253,220,0.35),
    420px 125px 0 0.5px rgba(255,250,200,0.45),
    680px 265px 0 0.5px rgba(255,253,220,0.4),
    1400px 120px 0 0.5px rgba(255,250,200,0.35),
    1500px 350px 0 0.5px rgba(255,253,220,0.4),
    30px 550px 0 0.5px rgba(255,250,200,0.3),
    520px 520px 0 0.5px rgba(255,248,190,0.35),
    900px 420px 0 0.5px rgba(255,253,220,0.3);
  animation: starPulse 4s ease-in-out infinite;
}

/* Second star layer — offset timing for twinkling depth */
.starry-stars::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff8c0;
  box-shadow:
    /* Haloed stars */
    80px 35px 0 2px rgba(255,248,180,1),
    80px 35px 8px 4px rgba(255,235,130,0.4),
    80px 35px 16px 8px rgba(255,220,80,0.12),

    730px 275px 0 2.5px rgba(255,240,140,1),
    730px 275px 10px 5px rgba(255,225,100,0.45),
    730px 275px 20px 10px rgba(255,210,60,0.15),

    280px 195px 0 2px rgba(255,245,160,0.95),
    280px 195px 8px 4px rgba(255,230,110,0.35),

    520px 105px 0 1.5px rgba(255,248,180,0.9),
    900px 175px 0 1.5px rgba(255,245,160,0.85),
    1150px 95px 0 2px rgba(255,248,180,0.9),
    1150px 95px 8px 4px rgba(255,235,120,0.3),

    /* Medium & small */
    340px 375px 0 1px rgba(255,248,180,0.8),
    550px 315px 0 2px rgba(255,240,140,0.9),
    160px 475px 0 1px rgba(255,248,180,0.8),
    420px 545px 0 1.5px rgba(255,245,160,0.85),
    1000px 345px 0 1px rgba(255,248,180,0.75),
    760px 415px 0 0.5px rgba(255,248,180,0.5),
    1200px 215px 0 0.5px rgba(255,245,160,0.4),
    60px 345px 0 0.5px rgba(255,248,180,0.45),
    480px 475px 0 0.5px rgba(255,245,160,0.35),
    1350px 280px 0 0.5px rgba(255,248,180,0.4),
    1450px 150px 0 0.5px rgba(255,245,160,0.35),
    240px 580px 0 0.5px rgba(255,248,180,0.3),
    680px 530px 0 0.5px rgba(255,245,160,0.35);
  animation: starTwinkle 5s ease-in-out infinite 1.5s;
}

/* --- Crescent Moon --- Van Gogh's thick haloed crescent with concentric rings */
.starry-moon {
  position: fixed;
  top: 7%;
  right: 11%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 42%,
      #fffbe6 0%,
      #ffe680 25%,
      #ffd633 50%,
      #f0b800 75%,
      #d4a000 100%
    );
  z-index: 2;
  pointer-events: none;
  animation: moonGlow 6s ease-in-out infinite;
}

/* Concentric halo rings — Van Gogh's radiating energy circles */
.starry-moon::before {
  content: '';
  position: absolute;
  top: -30px;
  left: -30px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(255,230,100,0.2) 0%,
      rgba(255,220,80,0.12) 25%,
      rgba(255,210,60,0.06) 45%,
      transparent 55%,
      rgba(255,200,50,0.03) 60%,
      transparent 70%,
      rgba(255,190,40,0.02) 75%,
      transparent 85%
    );
  animation: moonHaloRotate 60s linear infinite;
}

/* Crescent shadow cutout */
.starry-moon::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 14px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 60% 50%,
      #0c1d38 0%,
      #0e2242 60%,
      #10274d 100%
    );
  box-shadow: 0 0 12px 4px rgba(12,29,56,0.7);
}

/* --- Cypress Tree --- Van Gogh's dark flame-like foreground */
.starry-cypress {
  position: fixed;
  bottom: 0;
  left: 5%;
  width: 55px;
  height: 38vh;
  z-index: 2;
  pointer-events: none;
  opacity: 0.3;
  animation: swirlDrift 22s ease-in-out infinite;
}

.starry-cypress::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 100%;
  background: linear-gradient(to top, #080e18 0%, #0b1525 50%, #0e1a30 80%, transparent 100%);
  border-radius: 5px;
}

.starry-cypress::after {
  content: '';
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 88%;
  background:
    /* Flame-like foliage clusters — dark green-black masses */
    radial-gradient(ellipse 48px 70px at 50% 15%, #0c1a28 0%, #0a1520 40%, transparent 70%),
    radial-gradient(ellipse 42px 55px at 55% 30%, #0e1d30 0%, #0b1825 35%, transparent 65%),
    radial-gradient(ellipse 38px 50px at 45% 45%, #0c1a28 0%, #091420 40%, transparent 60%),
    radial-gradient(ellipse 32px 42px at 52% 60%, #0e1d30 0%, transparent 55%),
    radial-gradient(ellipse 25px 35px at 48% 75%, #0c1a28 0%, transparent 50%),
    radial-gradient(ellipse 18px 25px at 50% 88%, #0e1d30 0%, transparent 45%);
  border-radius: 40% 40% 8% 8%;
}

/* Second cypress — smaller, behind */
.starry-cypress-2 {
  position: fixed;
  bottom: 0;
  left: 2.5%;
  width: 35px;
  height: 24vh;
  z-index: 2;
  pointer-events: none;
  opacity: 0.2;
  animation: swirlDrift 28s ease-in-out infinite 4s;
}

.starry-cypress-2::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 100%;
  background: linear-gradient(to top, #080e18 0%, #0b1525 55%, transparent 100%);
  border-radius: 3.5px;
}

.starry-cypress-2::after {
  content: '';
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 88%;
  background:
    radial-gradient(ellipse 32px 45px at 50% 20%, #0c1a28 0%, transparent 65%),
    radial-gradient(ellipse 26px 38px at 52% 45%, #0e1d30 0%, transparent 60%),
    radial-gradient(ellipse 20px 30px at 48% 70%, #0c1a28 0%, transparent 55%);
  border-radius: 42% 42% 6% 6%;
}

/* --- Village Silhouette --- rolling hills with church steeple and clustered buildings */
.starry-village {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 14vh;
  z-index: 3;
  pointer-events: none;
  background:
    /* Undulating hills — organic Van Gogh curves */
    radial-gradient(ellipse 700px 90px at 15% 100%, #080e1c 0%, transparent 65%),
    radial-gradient(ellipse 550px 80px at 42% 100%, #0a1325 0%, transparent 60%),
    radial-gradient(ellipse 600px 85px at 70% 100%, #080e1c 0%, transparent 65%),
    radial-gradient(ellipse 450px 70px at 90% 100%, #0a1325 0%, transparent 55%),
    linear-gradient(to top, #060a14 0%, #080e1c 30%, #0a1325 50%, transparent 100%);
}

.starry-village::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    /* Church steeple — the tallest element */
    linear-gradient(to top, #080c16, #080c16) 46% 100% / 5px 60px no-repeat,
    linear-gradient(135deg, transparent 46%, #080c16 46%, #080c16 54%, transparent 54%) 45% calc(100% - 58px) / 16px 12px no-repeat,
    /* Cross on steeple */
    linear-gradient(to top, #080c16, #080c16) 46.15% calc(100% - 68px) / 2px 10px no-repeat,
    linear-gradient(to right, #080c16, #080c16) 45.2% calc(100% - 72px) / 8px 2px no-repeat,
    /* Building cluster — left village */
    linear-gradient(to top, #090d18, #090d18) 25% 100% / 35px 28px no-repeat,
    linear-gradient(to top, #0a1020, #0a1020) 28% 100% / 22px 35px no-repeat,
    linear-gradient(to top, #090d18, #090d18) 31% 100% / 28px 22px no-repeat,
    linear-gradient(to top, #0a1020, #0a1020) 34% 100% / 18px 30px no-repeat,
    /* Building cluster — center */
    linear-gradient(to top, #090d18, #090d18) 42% 100% / 30px 24px no-repeat,
    linear-gradient(to top, #0a1020, #0a1020) 50% 100% / 25px 20px no-repeat,
    /* Building cluster — right */
    linear-gradient(to top, #090d18, #090d18) 58% 100% / 24px 26px no-repeat,
    linear-gradient(to top, #0a1020, #0a1020) 61% 100% / 20px 32px no-repeat,
    linear-gradient(to top, #090d18, #090d18) 64% 100% / 30px 20px no-repeat,
    linear-gradient(to top, #0a1020, #0a1020) 68% 100% / 22px 28px no-repeat,
    linear-gradient(to top, #090d18, #090d18) 72% 100% / 26px 24px no-repeat,
    linear-gradient(to top, #0a1020, #0a1020) 75% 100% / 18px 35px no-repeat;
}

/* Window lights — warm golden glow in the village */
.starry-village::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  background: #ffe066;
  border-radius: 50%;
  box-shadow:
    0 0 4px 1px rgba(255,224,102,0.7),
    calc(25vw + 4px) calc(100vh - 40px) 0 1px rgba(255,224,102,0.8),
    calc(25vw + 16px) calc(100vh - 36px) 0 1px rgba(255,224,102,0.6),
    calc(28vw + 6px) calc(100vh - 50px) 0 1px rgba(255,224,102,0.85),
    calc(28vw + 14px) calc(100vh - 44px) 0 1px rgba(255,224,102,0.5),
    calc(31vw + 3px) calc(100vh - 42px) 0 1px rgba(255,224,102,0.7),
    calc(34vw + 8px) calc(100vh - 55px) 0 1px rgba(255,224,102,0.65),
    calc(42vw + 5px) calc(100vh - 38px) 0 1px rgba(255,224,102,0.7),
    calc(50vw + 3px) calc(100vh - 35px) 0 1px rgba(255,224,102,0.6),
    calc(58vw + 7px) calc(100vh - 44px) 0 1px rgba(255,224,102,0.75),
    calc(61vw + 4px) calc(100vh - 52px) 0 1px rgba(255,224,102,0.6),
    calc(61vw + 12px) calc(100vh - 48px) 0 1px rgba(255,224,102,0.5),
    calc(64vw + 6px) calc(100vh - 36px) 0 1px rgba(255,224,102,0.7),
    calc(68vw + 5px) calc(100vh - 46px) 0 1px rgba(255,224,102,0.65),
    calc(72vw + 3px) calc(100vh - 40px) 0 1px rgba(255,224,102,0.7),
    calc(75vw + 8px) calc(100vh - 56px) 0 1px rgba(255,224,102,0.6);
}

/* --- Theme Adjustments --- */
/* Light mode — subtle so content stays readable */
.starry-night { opacity: 0.3; }
.starry-stars::before,
.starry-stars::after { opacity: 0.35; }
.starry-moon { opacity: 0.25; }
.starry-village { opacity: 0.25; }
.starry-cypress { opacity: 0.15; }
.starry-cypress-2 { opacity: 0.1; }

/* Dark mode — the full Starry Night experience */
[data-theme="dark"] .starry-night { opacity: 1; }
[data-theme="dark"] .starry-stars::before,
[data-theme="dark"] .starry-stars::after { opacity: 1; }
[data-theme="dark"] .starry-moon { opacity: 0.95; }
[data-theme="dark"] .starry-village { opacity: 0.85; }
[data-theme="dark"] .starry-cypress { opacity: 0.45; }
[data-theme="dark"] .starry-cypress-2 { opacity: 0.3; }

/* Dark mode text readability over Starry Night */
[data-theme="dark"] .hero h1,
[data-theme="dark"] .project-hero h1 {
  text-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 0 30px rgba(0,0,0,0.3);
}
[data-theme="dark"] .hero p,
[data-theme="dark"] .project-hero p,
[data-theme="dark"] .section-label {
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
[data-theme="dark"] .section-header h2 {
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
[data-theme="dark"] .hero-stat h3 {
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  .starry-night::before,
  .starry-night::after,
  .starry-stars::before,
  .starry-stars::after,
  .starry-moon::before,
  .starry-cypress,
  .starry-cypress-2 {
    animation: none !important;
  }
}

/* --- Mobile Performance --- */
@media (max-width: 768px) {
  .starry-cypress,
  .starry-cypress-2 { display: none; }
  .starry-village::before { display: none; }
  .starry-village { height: 8vh; }
  .starry-moon {
    width: 45px;
    height: 45px;
    top: 4%;
    right: 6%;
  }
  .starry-moon::before {
    width: 100px;
    height: 100px;
    top: -25px;
    left: -25px;
  }
  .starry-moon::after {
    width: 38px;
    height: 38px;
    left: 10px;
  }
}

/* ============================================
   LEGENDARY ARCHITECTS BACKGROUND DESIGNS
   Transformative page-specific heritage patterns
   ============================================ */

/* Architectural Blueprint Grid Background */
.architect-bg-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  opacity: 0.03;
}

/* Frank Lloyd Wright - Fallingwater */
.page-index .architect-bg-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(135deg, rgba(26,26,26,0.92) 0%, rgba(26,26,26,0.85) 100%),
    url('https://images.wikimedia.org/wikipedia/commons/thumb/c/c8/Fallingwater_-_exterior_wall.jpg/1280px-Fallingwater_-_exterior_wall.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.6;
  filter: grayscale(100%) contrast(1.1) brightness(0.8);
}

/* Le Corbusier - Villa Savoye */
.page-gallery .architect-bg-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to bottom, rgba(26,26,26,0.90) 0%, rgba(26,26,26,0.82) 100%),
    url('https://images.wikimedia.org/wikipedia/commons/thumb/4/48/Villa_Savoye_-_front.jpg/1280px-Villa_Savoye_-_front.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.65;
  filter: grayscale(100%) saturate(0.8) brightness(0.75);
}

/* Zaha Hadid - Guangzhou Opera House */
.page-about .architect-bg-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(45deg, rgba(26,26,26,0.88) 0%, rgba(26,26,26,0.80) 100%),
    url('https://images.wikimedia.org/wikipedia/commons/thumb/f/fc/Guangzhou_opera_house.jpg/1280px-Guangzhou_opera_house.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.7;
  filter: grayscale(100%) contrast(1.15) brightness(0.7);
}

/* Mies van der Rohe - Barcelona Pavilion */
.page-contact .architect-bg-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(135deg, rgba(26,26,26,0.91) 0%, rgba(26,26,26,0.85) 100%),
    url('https://images.wikimedia.org/wikipedia/commons/thumb/7/7f/Barcelona_Pavilion_5.jpg/1280px-Barcelona_Pavilion_5.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.6;
  filter: grayscale(100%) brightness(0.75) contrast(1.1);
}

/* Tadao Ando - Concrete Minimalism */
.page-project .architect-bg-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      135deg,
      rgba(26,26,26,0.92) 0%,
      rgba(26,26,26,0.85) 100%
    ),
    url('https://images.wikimedia.org/wikipedia/commons/thumb/8/8d/Church_of_the_Light_02.jpg/1280px-Church_of_the_Light_02.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.65;
  filter: grayscale(100%) brightness(0.75) contrast(1.15);
}

/* Project-Specific Architect Backgrounds */

/* Tadao Ando - Church of the Light */
body.project-tadao-ando .architect-bg-grid::before {
  background-image:
    linear-gradient(135deg, rgba(26,26,26,0.92) 0%, rgba(26,26,26,0.85) 100%),
    url('https://images.wikimedia.org/wikipedia/commons/thumb/8/8d/Church_of_the_Light_02.jpg/1280px-Church_of_the_Light_02.jpg') !important;
  filter: grayscale(100%) brightness(0.75) contrast(1.15);
}

/* Louis Kahn - Kimbell Art Museum */
body.project-louis-kahn .architect-bg-grid::before {
  background-image:
    linear-gradient(135deg, rgba(26,26,26,0.92) 0%, rgba(26,26,26,0.85) 100%),
    url('https://images.wikimedia.org/wikipedia/commons/thumb/1/15/Kimbell_Art_Museum_1.JPG/1280px-Kimbell_Art_Museum_1.JPG') !important;
  filter: grayscale(100%) brightness(0.72) contrast(1.2);
}

/* Alvar Aalto - Villa Mairea */
body.project-alvar-aalto .architect-bg-grid::before {
  background-image:
    linear-gradient(120deg, rgba(26,26,26,0.91) 0%, rgba(26,26,26,0.85) 100%),
    url('https://images.wikimedia.org/wikipedia/commons/thumb/1/1f/Villa_Mairea_01.jpg/1280px-Villa_Mairea_01.jpg') !important;
  filter: grayscale(100%) brightness(0.78) contrast(1.08);
}

/* Norman Foster - The Gherkin (30 St Mary Axe) */
body.project-norman-foster .architect-bg-grid::before {
  background-image:
    linear-gradient(45deg, rgba(26,26,26,0.88) 0%, rgba(26,26,26,0.82) 100%),
    url('https://images.wikimedia.org/wikipedia/commons/thumb/d/d5/30_St_Mary_Axe_-_London.JPG/1280px-30_St_Mary_Axe_-_London.JPG') !important;
  filter: grayscale(100%) brightness(0.70) contrast(1.18);
}

/* Renzo Piano - Pompidou Centre */
body.project-renzo-piano .architect-bg-grid::before {
  background-image:
    linear-gradient(135deg, rgba(26,26,26,0.90) 0%, rgba(26,26,26,0.85) 100%),
    url('https://images.wikimedia.org/wikipedia/commons/thumb/0/02/Centre_Pompidou%2C_Paris_2.JPG/1280px-Centre_Pompidou%2C_Paris_2.JPG') !important;
  filter: grayscale(100%) brightness(0.68) contrast(1.22);
}

/* Oscar Niemeyer - Niterói Contemporary Art Museum */
body.project-oscar-niemeyer .architect-bg-grid::before {
  background-image:
    linear-gradient(to bottom, rgba(26,26,26,0.89) 0%, rgba(26,26,26,0.82) 100%),
    url('https://images.wikimedia.org/wikipedia/commons/thumb/e/ed/Museu_de_Arte_Contempor%C3%A2nea_de_Niter%C3%B3i.jpg/1280px-Museu_de_Arte_Contempor%C3%A2nea_de_Niter%C3%B3i.jpg') !important;
  filter: grayscale(100%) brightness(0.72) contrast(1.12);
}

/* Peter Zumthor - Therme Vals */
body.project-peter-zumthor .architect-bg-grid::before {
  background-image:
    linear-gradient(110deg, rgba(26,26,26,0.93) 0%, rgba(26,26,26,0.86) 100%),
    url('https://images.wikimedia.org/wikipedia/commons/thumb/f/f3/Therme_Vals_2009-06-27.jpg/1280px-Therme_Vals_2009-06-27.jpg') !important;
  filter: grayscale(100%) brightness(0.75) contrast(1.10);
}

/* Kengo Kuma - Yusuhara Wooden Bridge Museum */
body.project-kengo-kuma .architect-bg-grid::before {
  background-image:
    linear-gradient(to right, rgba(26,26,26,0.90) 0%, rgba(26,26,26,0.85) 100%),
    url('https://images.wikimedia.org/wikipedia/commons/thumb/a/a0/Yusuhara_Wooden_Bridge_Museum.JPG/1280px-Yusuhara_Wooden_Bridge_Museum.JPG') !important;
  filter: grayscale(100%) brightness(0.74) contrast(1.14);
}

/* Floating Architect Quotes */
.architect-quote {
  position: fixed;
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--accent);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
  letter-spacing: 0.05em;
}

.architect-quote-1 {
  top: 15%;
  left: 5%;
  font-size: 1.2rem;
  transform: rotate(-5deg);
}

.architect-quote-2 {
  top: 40%;
  right: 3%;
  font-size: 1rem;
  transform: rotate(3deg);
}

.architect-quote-3 {
  bottom: 25%;
  left: 8%;
  font-size: 1.1rem;
  transform: rotate(-2deg);
}

.architect-quote-4 {
  bottom: 10%;
  right: 5%;
  font-size: 0.95rem;
  transform: rotate(4deg);
}

/* Animated Blueprint Overlay */
@keyframes blueprintPulse {
  0%, 100% { opacity: 0.02; }
  50% { opacity: 0.05; }
}

.blueprint-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: 
    linear-gradient(var(--accent) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.02;
  animation: blueprintPulse 8s ease-in-out infinite;
}

/* Architect Heritage Sidebar */
.architect-heritage-sidebar {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--accent);
  opacity: 0.08;
  padding: 2rem 0.5rem;
  z-index: 0;
  pointer-events: none;
}

.architect-heritage-sidebar-right {
  left: auto;
  right: 0;
  transform: translateY(-50%) rotate(180deg);
}

/* Golden Ratio Spiral (Fibonacci) */
.golden-spiral {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.015;
}

.golden-spiral svg {
  width: 100%;
  height: 100%;
}

/* Vitruvian Proportion Guides */
.vitruvian-guides {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.vitruvian-guides::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--accent) 20%,
    var(--accent) 80%,
    transparent
  );
  opacity: 0.03;
}

.vitruvian-guides::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--accent) 20%,
    var(--accent) 80%,
    transparent
  );
  opacity: 0.03;
}

/* Page-Specific Architect Tributes */
.architect-tribute {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.15;
  z-index: 0;
  pointer-events: none;
}

/* Dark Theme Adjustments */
[data-theme="dark"] .architect-bg-grid::before {
  opacity: 0.25;
}

[data-theme="dark"] .architect-quote {
  opacity: 0.04;
}

[data-theme="dark"] .blueprint-overlay {
  opacity: 0.015;
}

[data-theme="dark"] .architect-heritage-sidebar {
  opacity: 0.05;
}

[data-theme="dark"] .vitruvian-guides::before,
[data-theme="dark"] .vitruvian-guides::after {
  opacity: 0.02;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .architect-heritage-sidebar {
    display: none;
  }
  
  .architect-quote {
    font-size: 0.8rem;
  }
  
  .golden-spiral {
    width: 400px;
    height: 400px;
  }
}

/* ============================================
   EXTRAORDINARY BREATHING EFFECTS
   Immersive architectural experience
   ============================================ */

/* Ambient Light Glow Animation */
@keyframes ambientGlow {
  0%, 100% { 
    box-shadow: 
      0 0 60px rgba(184,134,11,0.03),
      0 0 120px rgba(184,134,11,0.02);
  }
  50% { 
    box-shadow: 
      0 0 80px rgba(184,134,11,0.05),
      0 0 160px rgba(184,134,11,0.03);
  }
}

/* Floating Sections */
.section {
  animation: ambientGlow 12s ease-in-out infinite;
}

/* Parallax Scroll Effect Hint */
@keyframes subtleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.hero-content {
  animation: subtleFloat 6s ease-in-out infinite;
}

/* Golden Line Accents */
.section-header::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  margin-top: 1rem;
  animation: expandLine 2s ease-out forwards;
}

@keyframes expandLine {
  from { width: 0; opacity: 0; }
  to { width: 60px; opacity: 1; }
}

/* Breathing Card Effect */
@keyframes cardBreathe {
  0%, 100% { 
    transform: scale(1);
    box-shadow: var(--shadow-md);
  }
  50% { 
    transform: scale(1.002);
    box-shadow: var(--shadow-lg);
  }
}

.detail-card {
  animation: cardBreathe 8s ease-in-out infinite;
  animation-delay: calc(var(--stagger, 0) * 0.5s);
}

.detail-card:nth-child(1) { --stagger: 0; }
.detail-card:nth-child(2) { --stagger: 1; }
.detail-card:nth-child(3) { --stagger: 2; }
.detail-card:nth-child(4) { --stagger: 3; }
.detail-card:nth-child(5) { --stagger: 4; }
.detail-card:nth-child(6) { --stagger: 5; }
.detail-card:nth-child(7) { --stagger: 6; }
.detail-card:nth-child(8) { --stagger: 7; }

/* Glowing Border on Focus */
.project-card:focus-within,
.detail-card:focus-within {
  outline: none;
  box-shadow: 
    0 0 0 2px var(--accent),
    0 0 20px rgba(184,134,11,0.2);
}

/* Text Shimmer Effect for Headlines */
@keyframes textShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

h1, h2 {
  background: linear-gradient(
    90deg,
    var(--text-primary) 0%,
    var(--text-primary) 40%,
    var(--accent) 50%,
    var(--text-primary) 60%,
    var(--text-primary) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--text-primary);
  animation: textShimmer 8s linear infinite;
  animation-play-state: paused;
}

h1:hover, h2:hover {
  animation-play-state: running;
}

/* Ensure h3/h4 never inherit background-clip */
h3, h4, h5, h6 {
  -webkit-text-fill-color: initial;
  background-clip: initial;
  -webkit-background-clip: initial;
}

/* Architectural Grid Overlay for Hero */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(90deg, transparent 99%, var(--accent) 99%) 0 0 / 100px 100%,
    linear-gradient(0deg, transparent 99%, var(--accent) 99%) 0 0 / 100% 100px;
  opacity: 0.03;
  pointer-events: none;
}

/* Elegant Scroll Indicator */
@keyframes scrollPulse {
  0%, 100% { 
    transform: translateY(0) translateX(-50%);
    opacity: 1;
  }
  50% { 
    transform: translateY(10px) translateX(-50%);
    opacity: 0.5;
  }
}

.hero::after {
  content: '↓';
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
  color: var(--accent);
  opacity: 0.6;
  animation: scrollPulse 2s ease-in-out infinite;
}

/* Image Reveal Animation */
@keyframes imageReveal {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

.project-card-image img,
.render-item img {
  animation: imageReveal 1s ease-out forwards;
}

/* Luxury Border Frame */
.photo-frame-luxury {
  position: relative;
  padding: 3px;
  background: linear-gradient(
    135deg,
    var(--accent) 0%,
    var(--accent-light) 25%,
    var(--accent) 50%,
    var(--accent-dark) 75%,
    var(--accent) 100%
  );
  background-size: 400% 400%;
  animation: borderGlow 4s ease infinite;
  border-radius: var(--radius-lg);
}

@keyframes borderGlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.photo-frame-luxury > * {
  background: var(--bg-card);
  border-radius: calc(var(--radius-lg) - 3px);
}

/* Heritage List Styling */
.detail-card ul li {
  position: relative;
  padding-left: 0.5rem;
  border-left: 2px solid transparent;
  transition: all var(--transition);
}

.detail-card ul li:hover {
  border-left-color: var(--accent);
  padding-left: 1rem;
  background: rgba(184,134,11,0.03);
}

.detail-card ul li strong {
  color: var(--accent);
}

/* Ambient Corner Decorations */
.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-top: 1px solid var(--accent);
  border-left: 1px solid var(--accent);
  opacity: 0.1;
  pointer-events: none;
}

.section::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 100px;
  border-bottom: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  opacity: 0.1;
  pointer-events: none;
}

/* Responsive Breathing Effects */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 768px) {
  .section::before,
  .section::after {
    width: 50px;
    height: 50px;
  }
  
  .hero::after {
    display: none;
  }
}

/* --- Print Styles --- */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }
  body::before,
  body::after,
  .nav,
  .mobile-menu,
  .architect-bg-grid,
  .blueprint-overlay,
  .architect-quote,
  .architect-heritage-sidebar,
  .vitruvian-guides,
  .golden-spiral,
  .architect-tribute,
  .hero::before,
  .hero::after,
  .section::before,
  .section::after,
  .skip-link,
  .theme-toggle,
  .nav-hamburger,
  .footer {
    display: none !important;
  }
  .blueprint-viewer {
    border: 1px solid #ccc;
    box-shadow: none;
    break-inside: avoid;
  }
  .blueprint-canvas svg {
    max-width: 100%;
    height: auto;
  }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
  .nav-logo a[href]::after,
  .footer a[href]::after {
    content: none;
  }
  h1, h2, h3 {
    background: none !important;
    -webkit-text-fill-color: #000 !important;
    color: #000 !important;
  }
}