/* 
   MONOLITH / ATELIER - Design System & Styles
   Aesthetics: Brutalist Minimalism, High-Contrast Black & White, Grid Drafting Precision
*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Syne:wght@700;800&family=Cinzel:wght@400;500;700&display=swap');

:root {
  --black: #f0f2f5; /* Light grey/off-white for high-end typography */
  --white: #0c0d10; /* Concrete charcoal deep dark background */
  --gray-dark: #050608;
  --gray-mid: #8a94a6;
  --gray-light: #5c6270;
  --gray-fine: rgba(255, 255, 255, 0.08);
  --logo-d: #1c1e22; /* Darker, high-contrast grey for sharper text */
  --logo-c: #eb6b0f; /* Exact vibrant orange from the C in the logo */
  --accent: var(--logo-c);
  --font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Syne', sans-serif;
  --font-serif: 'Cinzel', serif;
  --page-gutter: clamp(16px, 3.5vw, 90px);
  --page-gutter-double: clamp(32px, 7vw, 180px);
  --section-space: clamp(48px, 5vw, 76px);
  --section-space-compact: clamp(24px, 3vw, 40px);
  
  --cursor-size: 8px;
  --cursor-ring-size: 36px;
  
  --silhouette-fill: #000000;
  --header-bg: rgba(12, 13, 16, 0.85);
  --btn-hover-bg: rgba(255, 255, 255, 0.05);

  --cb-1-start: calc(40px - 34%); /* Start at center of the first row second block before animation (desktop) */
}

/* Base resets */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  cursor: none !important; /* Hide default cursor to enable custom architectural crosshair */
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: none;
  background-color: var(--gray-dark);
  color: var(--black);
  font-family: var(--font-sans);
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background-color: var(--gray-dark);
  transition: background-color 0.8s cubic-bezier(0.77, 0, 0.175, 1), color 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

/* Let content sections keep their natural height. The landing section defines
   its own full-screen presentation below. */
#smooth-scroll-wrapper > section,
#smooth-scroll-wrapper > footer {
  min-height: 0;
  box-sizing: border-box;
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--white);
  border-left: 1px solid var(--gray-fine);
}
::-webkit-scrollbar-thumb {
  background: var(--black);
}

/* Homepage auto-transitions into projects; keep scrolling available without
   advertising additional content through a visible scrollbar. */
html:has(body.home-page) {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html:has(body.home-page)::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body.home-page.opening-locked {
  height: 100svh;
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}

/* Global Blueprint Inversion Mode */
body.blueprint-mode {
  background-color: #0b1424; /* Deep blueprint drafting blue */
  color: #a4c3e8; /* Soft blue blueprint lines */
  --white: #0b1424;
  --black: #a4c3e8;
  --gray-fine: rgba(164, 195, 232, 0.2);
  --gray-dark: #060b14;
  --gray-mid: #688dbb;
  --gray-light: #5275a1;
  
  --silhouette-fill: #a4c3e8;
  --header-bg: rgba(11, 20, 36, 0.85);
  --btn-hover-bg: rgba(164, 195, 232, 0.08);
}

/* Blueprint structural lines backdrop overlay */
.blueprint-grid-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: 
    linear-gradient(var(--gray-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--gray-fine) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.3;
  transition: background-image 0.8s ease, opacity 0.8s ease;
}

body.blueprint-mode .blueprint-grid-overlay {
  display: none;
  opacity: 0.8;
  background-size: 40px 40px;
}

/* Interactive Canvas Backdrop */
#canvas-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.4;
  transition: opacity 0.8s ease;
}

body.blueprint-mode #canvas-backdrop {
  display: none;
  opacity: 0.8;
}

/* Custom Cursor & Architectural Crosshairs */
.custom-cursor {
  width: var(--cursor-size);
  height: var(--cursor-size);
  background-color: var(--accent);
  border-radius: 50%;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  transition: width 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), height 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.4s;
}

.custom-cursor-ring {
  width: var(--cursor-ring-size);
  height: var(--cursor-ring-size);
  border: 1px solid var(--accent);
  border-radius: 50%;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9998;
  transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), height 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.4s, transform 0.1s ease-out;
}

.custom-cursor-crosshair {
  position: fixed;
  pointer-events: none;
  z-index: 9997;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.custom-cursor-crosshair::before,
.custom-cursor-crosshair::after {
  content: '';
  position: absolute;
  background-color: var(--gray-fine);
}

.custom-cursor-crosshair::before {
  width: 100vw;
  height: 1px;
  top: var(--y, 0);
  left: 0;
}

.custom-cursor-crosshair::after {
  width: 1px;
  height: 100vh;
  left: var(--x, 0);
  top: 0;
}

body.drafting .custom-cursor-crosshair {
  opacity: 0.4;
}

.hover-interactive .custom-cursor {
  width: 12px;
  height: 12px;
  background-color: var(--accent);
}

.hover-interactive .custom-cursor-ring {
  width: 60px;
  height: 60px;
  border-color: var(--accent);
  border-width: 2px;
}

/* Header & Navigation */
header {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px var(--page-gutter);
  z-index: 9999;
  border-bottom: none;
  background-color: transparent;
  backdrop-filter: none;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: padding 0.3s ease, border-color 0.8s ease;
}

header.nav-visible {
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  display: flex !important;
}

header.nav-hidden {
  transform: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
}

header.nav-menu-hidden nav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.logo-img {
  height: 32px;
  object-fit: contain;
  transition: filter 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

body.blueprint-mode .logo-img {
  filter: grayscale(1) invert(1) brightness(1.8) contrast(1.2);
}

.logo-text {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.5px;
  text-transform: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

.logo-d-text {
  color: var(--logo-d);
  transition: color 0.8s ease;
}

.logo-c-text {
  color: var(--logo-c);
  transition: color 0.8s ease;
}

body.blueprint-mode .logo-d-text {
  color: #a4c3e8;
}

body.blueprint-mode .logo-c-text {
  color: var(--accent);
}

/* Headings: first word grey, last word accent/orange */
.section-title {
  font-family: var(--font-sans);
  font-size: clamp(1.9rem, 2.8vw, 3.4rem);
  font-weight: 800;
  color: var(--black);
  margin: 0;
  letter-spacing: 0.02em;
}

.section-title .first-word {
  color: var(--gray-mid);
  font-weight: 800;
}

.section-title .last-word {
  color: var(--accent);
  font-weight: 800;
}

.first-word {
  color: var(--gray-light);
}

.last-word {
  color: var(--accent);
}

/* Project title accent already uses .title-accent; ensure consistent color */
.title-accent {
  color: var(--accent);
}

.logo-sub {
  font-size: 0.65rem;
  color: var(--gray-light);
  letter-spacing: 4px;
  margin-top: 2px;
  text-transform: uppercase;
}

nav {
  display: flex;
  align-items: center;
  gap: 28px;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.nav-link {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  text-decoration: none;
  color: #7f7f7f;
  position: relative;
  padding: 5px 0;
  transition: color 0.3s ease;
}

.nav-link--accent {
  color: #7f7f7f;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: transparent;
  transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.nav-link:hover::after {
  width: 100%;
}

/* Control Panel Controls (Blueprint Toggle, etc) */
.controls-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.blueprint-btn {
  background: none;
  border: 1px solid var(--black);
  padding: 10px 20px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--black);
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s, color 0.3s, border-color 0.8s;
}

.blueprint-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: -1;
  transition: left 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.blueprint-btn:hover::before {
  left: 0;
}

.blueprint-btn:hover {
  color: var(--white);
}

body.blueprint-mode .blueprint-btn {
  border-color: var(--accent);
  color: var(--accent);
}

body.blueprint-mode .blueprint-btn::before {
  background-color: var(--accent);
}

body.blueprint-mode .blueprint-btn:hover {
  color: var(--white);
}

/* LANDING PAGE - Dynamic Spatial Scale Grid (Inspired by the Reference Video) */
.landing-section {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Landing Page Video styling */
.landing-video-wrapper {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: #ffffff;
}

.landing-video-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #ffffff;
  z-index: 0;
}

.landing-video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  outline: none;
  border: none;
  pointer-events: none;
  animation: videoFadeIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  /* Hardware acceleration hints to ensure crisp video rendering */
  transform: translate3d(-3%, 0, 0) scale(1.65);
  transform-origin: center center;
  backface-visibility: hidden;
  /* Blend video background transparently on grey page background */
  mix-blend-mode: multiply;
  filter: contrast(1.06) brightness(1.05);
}

/* Invert and screen-blend the video in blueprint mode to keep background transparent */
body.blueprint-mode .landing-video {
  filter: invert(1) contrast(1.06) brightness(1.05);
  mix-blend-mode: screen;
}

@keyframes videoFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

body.blueprint-mode .landing-section {
  background-image: none;
}

/* Landing Page Strapline overlay */
.landing-strapline {
  position: absolute;
  bottom: 19%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-family: var(--font-sans), sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 7px;
  color: var(--black);
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  animation: straplineFadeIn 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 1.2s;
  pointer-events: none;
  white-space: nowrap;
  transition: color 0.8s ease;
}

@keyframes straplineFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 0.85;
    transform: translate(-50%, 0);
  }
}

/* Responsive adjustment for mobile screens */
@media (max-width: 768px) {
  .landing-strapline {
    font-size: 0.72rem;
    letter-spacing: 4px;
    bottom: 17%;
  }
}

/* Main Grid Container (Centered in viewport) */
.spatial-grid-viewport {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 800px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
}

.spatial-grid-container {
  width: 100%;
  max-width: 600px;
  height: 100%;
  max-height: 600px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(16, 1fr);
  gap: 15px;
  row-gap: 6px;
  column-gap: 12px;
  position: relative;
}

/* Grid blocks styled precisely like the reference video */
.grid-block {
  background-color: transparent;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) translateY(30px);
  transform-style: preserve-3d;
  perspective: 800px;
  /* Buttery smooth transitions for fluid merging */
  transition: 
    transform 0.75s cubic-bezier(0.76, 0, 0.24, 1), 
    opacity 0.6s ease, 
    background-color 0.8s ease,
    border-color 0.8s ease,
    box-shadow 0.75s cubic-bezier(0.76, 0, 0.24, 1),
    z-index 0.3s ease;
}

/* Snappy responsive transition on hover for 3D lift */
.grid-block:hover {
  transition: 
    transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
    opacity 0.6s ease, 
    background-color 0.4s ease,
    border-color 0.35s ease,
    box-shadow 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 20;
}

.spatial-grid-container.merged-logo .grid-block:hover {
  transform: translate(var(--tx, 0px), var(--ty, 0px)) translateZ(18px) scale(1.03);
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.6),
    0 0 25px rgba(235, 107, 15, 0.45);
  border-color: rgba(255, 137, 48, 0.8) !important;
}

.spatial-grid-container.shifting-concept .grid-block:hover {
  transform: translate(var(--tx, 0px), var(--ty, 0px)) translateZ(18px) scale(1.03);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

.grid-block.active {
  opacity: 1;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) translateY(0px);
}

/* Home positions: This layout forms the D-C interlocking logo! */
.block-1  { grid-column: 2 / 4;  grid-row: 2 / 5; }   /* D Stem Top */
.block-2  { grid-column: 7 / 11; grid-row: 5 / 8; }   /* C Center Video */
.block-3  { grid-column: 4 / 7;  grid-row: 2 / 4; }   /* D Top Curve */
.block-4  { grid-column: 7 / 9;  grid-row: 4 / 9; }  /* D Right Spine */
.block-5  { grid-column: 7 / 11; grid-row: 3 / 6; }   /* C Top Curve */
.block-6  { grid-column: 2 / 4;  grid-row: 6 / 10; }  /* D Stem Bottom */
.block-7  { grid-column: 5 / 7;  grid-row: 5 / 9; }   /* C Interlocking Spine */
.block-8  { grid-column: 4 / 7;  grid-row: 10 / 12; } /* D Bottom Curve */
.block-9  { grid-column: 7 / 11; grid-row: 9 / 11; }  /* C Bottom Curve */
.block-10 { grid-column: 11 / 13; grid-row: 3 / 5; }  /* C Top End */
.block-11 { grid-column: 11 / 13; grid-row: 9 / 11; }  /* C Bottom End */

/* Merged Logo Theme Styles */
.spatial-grid-container.merged-logo .d-block {
  background-color: rgba(92, 98, 112, 0.28); /* Semi-transparent Slate Grey */
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.4), 
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    0 0 15px rgba(92, 98, 112, 0.25);
}

.spatial-grid-container.merged-logo .c-block {
  background-color: rgba(235, 107, 15, 0.28); /* Semi-transparent Safety Orange */
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 137, 48, 0.45);
  box-shadow: 
    0 15px 40px rgba(235, 107, 15, 0.3), 
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    0 0 20px rgba(235, 107, 15, 0.3);
  z-index: 4; /* Elevated overlap interlocking */
}

/* Specific overlapping drop shadow for the spine to lock on top of D */
.spatial-grid-container.merged-logo .block-7.c-block {
  box-shadow: 
    -15px 0 35px rgba(0, 0, 0, 0.55), 
    0 15px 40px rgba(235, 107, 15, 0.25), 
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    0 0 20px rgba(235, 107, 15, 0.3);
}

/* Central masterpiece hologram is kept fully vibrant and active! */
.spatial-grid-container.merged-logo .block-2 .block-video-layer {
  opacity: 1;
  mix-blend-mode: normal;
  filter: none;
}

/* Shifting Concept Animating Styles - optimized transition to 0s to prevent frame lagging */
.spatial-grid-container.shifting-concept .grid-block {
  background-color: transparent; /* All blocks pure monochrome black as in reference video */
  box-shadow: none;
  z-index: 2;
  transition: 
    transform 0.08s linear, 
    opacity 0.6s ease, 
    background-color 0.8s ease,
    border-color 0.8s ease,
    box-shadow 0.8s ease;
}

/* Technical Grid Mode Switcher */
.grid-mode-controller {
  position: absolute;
  top: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 50;
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid var(--gray-fine);
  padding: 6px 16px;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 2px;
  transition: background-color 0.8s ease, border-color 0.8s ease;
}

.grid-mode-btn {
  background: none;
  border: none;
  color: var(--gray-light);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.3s ease;
}

.grid-mode-btn:hover {
  color: var(--black);
}

.grid-mode-btn.active {
  color: var(--accent) !important; /* Highlight safety orange when active */
}

.grid-mode-divider {
  color: var(--gray-fine);
  pointer-events: none;
  font-size: 0.7rem;
}

body.blueprint-mode .grid-mode-controller {
  background-color: rgba(11, 20, 36, 0.85);
  border-color: rgba(164, 195, 232, 0.2);
}


/* Image Reveal Layers within Grid Blocks */
.block-img-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: grayscale(1) contrast(1.1);
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 3;
}

/* Hover reveal effect */
.grid-block:hover .block-img-layer {
  opacity: 0.85;
  transform: scale(1);
}

body.blueprint-mode .grid-block:hover .block-img-layer {
  filter: grayscale(1) invert(1) contrast(1.2) brightness(0.9);
}

/* Ambient video layer inside specific grid-block for reference integration */
.block-video-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  z-index: 2;
  transition: opacity 0.5s ease;
}

/* Minimalist White Vector Silhouettes for Scale Overlay */
.silhouette-svg {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  opacity: 0.95;
  transition: filter 0.8s ease;
}

/* Silhouette details based on coordinates (matching reference video human nodes) */
.sil-sitting {
  bottom: 0px;
  right: 15px;
  height: 38px;
}
.sil-standing {
  bottom: 0px;
  left: 30px;
  height: 48px;
}
.sil-waving {
  top: 5px;
  right: 25px;
  height: 48px;
}
.sil-walking {
  bottom: 0px;
  right: 25px;
  height: 48px;
}
.sil-looking {
  bottom: 0px;
  left: 20px;
  height: 52px;
}

/* CSS wireframes overlay in Blueprint mode */
.grid-block::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px dashed transparent;
  pointer-events: none;
  z-index: 6;
  transition: border-color 0.8s ease;
}

body.blueprint-mode .grid-block {
  background-color: rgba(6, 11, 20, 0.6);
  border: 1px solid var(--black);
}

body.blueprint-mode .grid-block::after {
  border-color: rgba(164, 195, 232, 0.3);
}

/* Block Metadata text showing up on Hover */
.block-meta {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 10;
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.grid-block:hover .block-meta {
  opacity: 1;
  transform: translateY(0);
}

/* Stark Text Column (Right Side of Split Layout) */
.spatial-text-panel {
  flex: 0.9;
  height: 100%;
  padding: 40px 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  justify-content: center;
  border-left: 1px solid var(--gray-fine);
  position: relative;
  z-index: 10;
  box-sizing: border-box;
  /* Subtle monolith background texture with grey overlay */
  background-image: linear-gradient(rgba(240, 242, 245, 0.90), rgba(240, 242, 245, 0.90)), url('assets/monolith_hero.png');
  background-size: cover;
  background-position: center;
}

/* Blueprint mode texture overlay */
body.blueprint-mode .spatial-text-panel {
  background-image: linear-gradient(rgba(11, 20, 36, 0.90), rgba(11, 20, 36, 0.90)), url('assets/monolith_hero.png');
}

.brand-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--gray-light);
  margin-bottom: 25px;
}

.hero-main-title {
  font-family: var(--font-display);
  font-size: 3.6rem;
  line-height: 1.1;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 30px;
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}

.hero-main-title.active {
  opacity: 1;
  transform: translateY(0);
}

.hero-main-title span {
  display: block;
}

.hero-main-title .outline-text {
  color: transparent;
  -webkit-text-stroke: 1px var(--black);
}

.hero-sub-text {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--gray-mid);
  margin-bottom: 40px;
  max-width: 480px;
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.8s ease 0.2s, opacity 0.8s ease 0.2s;
}

.hero-sub-text.active {
  opacity: 1;
  transform: translateY(0);
}

.cta-group {
  display: flex;
  justify-content: center;
  gap: 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.8s ease 0.4s, opacity 0.8s ease 0.4s;
}

.cta-group.active {
  opacity: 1;
  transform: translateY(0);
}

.primary-btn {
  background-color: transparent;
  color: var(--white);
  border: 1px solid var(--black);
  padding: 18px 36px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.8s ease;
}

.primary-btn:hover {
  background-color: var(--white);
  color: var(--black);
}

.secondary-btn {
  background: none;
  border: 1px solid var(--gray-fine);
  color: var(--black);
  padding: 18px 36px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.8s ease;
}

.secondary-btn:hover {
  border-color: var(--black);
  background-color: var(--btn-hover-bg);
}

/* Foot details of landing page (Socials and Emails) */
.hero-footer-details {
  position: static;
  margin-top: 45px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.contact-email-link {
  color: var(--black);
  text-decoration: none;
  font-weight: 600;
  position: relative;
  transition: color 0.3s ease;
}

.contact-email-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: transparent;
  transition: transform 0.3s ease;
  transform-origin: right;
  transform: scaleX(1);
}

.contact-email-link:hover::after {
  transform: scaleX(0);
}

.scroll-indicator {
  position: absolute;
  bottom: 0px;
  right: 50%;
  transform: translateX(50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 0.65rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  z-index: 10;
  color: var(--gray-light);
}

.scroll-indicator-bar {
  width: 1px;
  height: 40px;
  background-color: var(--gray-fine);
  position: relative;
  overflow: hidden;
}

.scroll-indicator-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 15px;
  background-color: transparent;
}

@keyframes scroll-line {
  0% { top: -15px; }
  50% { top: 40px; }
  100% { top: 40px; }
}

/* SECTION 2 - Cinematic Parallax Dual Scroll Gallery */
.gallery-section {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  overflow: hidden;
  background-color: var(--gray-dark);
  z-index: 15;
}

.gallery-column-left,
.gallery-column-right {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.gallery-scroller-left,
.gallery-scroller-right {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.gallery-slide {
  height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-slide-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: grayscale(1) contrast(1.15) brightness(0.7);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}

.gallery-slide:hover .gallery-slide-img {
  transform: scale(1.05);
  filter: grayscale(1) contrast(1.2) brightness(0.9);
}

.gallery-slide-content {
  position: relative;
  z-index: 10;
  text-align: center;
  color: var(--white);
  padding: 40px;
}

.gallery-slide-subtitle {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 5px;
  text-transform: uppercase;
  margin-bottom: 15px;
  color: var(--gray-fine);
  opacity: 0.8;
}

.gallery-slide-title {
  font-family: var(--font-display);
  font-size: 3rem;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
}

.gallery-slide-coords {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 10px;
  font-weight: 600;
}

.gallery-overlay-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  pointer-events: none;
  z-index: 5;
}

.gallery-center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  pointer-events: none;
  text-align: center;
}

.gallery-center-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 0.7rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}

@keyframes rotate-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* SECTION 3 - Atelier Studio Services (Accordion Schematics) */
.services-section {
  padding: 180px 10%;
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--gray-fine);
  background-color: var(--white);
  transition: background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.services-accordion {
  width: 100%;
  border-top: 1px solid var(--black);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.services-accordion.visible {
  opacity: 1;
  visibility: visible;
}

.services-item {
  border-bottom: 1px solid var(--black);
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.services-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.services-trigger {
  width: 100%;
  padding: 55px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  text-align: left;
  color: var(--black);
  cursor: pointer;
}

.services-num {
  font-size: 1rem;
  font-family: var(--font-sans);
  font-weight: 400;
  opacity: 0.5;
}

.services-title {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0px;
  flex: 1;
  margin-left: 50px;
  transition: transform 0.3s ease;
}

.services-trigger:hover .services-title {
  transform: translateX(20px);
}

.services-icon-plus {
  width: 24px;
  height: 24px;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.services-trigger:hover .services-icon-plus {
  transform: scale(1.25);
}

.services-icon-plus::before,
.services-icon-plus::after {
  content: '';
  position: absolute;
  background-color: transparent;
  transition: transform 0.4s ease;
}

.services-icon-plus::before {
  top: 11px;
  left: 0;
  width: 24px;
  height: 2px;
}

.services-icon-plus::after {
  top: 0;
  left: 11px;
  width: 2px;
  height: 24px;
}

.services-item.open .services-icon-plus::before {
  transform: rotate(180deg);
}

.services-item.open .services-icon-plus::after {
  transform: rotate(90deg);
}

.services-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  gap: 80px;
}

.services-inner {
  padding-bottom: 50px;
  padding-top: 15px;
  flex: 1;
  display: flex;
  justify-content: space-between;
  gap: 60px;
}

.services-detail-text {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--gray-mid);
  max-width: 700px;
  flex: 1;
}

.services-blueprint-sketch {
  width: 320px;
  height: 180px;
  flex-shrink: 0;
  border: 1px solid var(--black);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(8, 9, 10, 0.02);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body.blueprint-mode .services-blueprint-sketch {
  border-color: var(--black);
  background-color: rgba(164, 195, 232, 0.02);
}

.services-blueprint-sketch:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(255, 85, 0, 0.12);
}

/* SECTION 4 - Dynamic Spatial Floorplan Configurator */
.configurator-section {
  padding: 120px 80px;
  background-color: var(--gray-fine);
  position: relative;
  z-index: 10;
  transition: background-color 0.8s ease, color 0.8s ease;
}

body.blueprint-mode .configurator-section {
  background-color: var(--gray-dark);
}

.configurator-wrapper {
  display: flex;
  gap: 60px;
  margin-top: 60px;
}

.configurator-panel {
  flex: 1;
  background-color: var(--white);
  padding: 40px;
  border: 1px solid var(--black);
  display: flex;
  flex-direction: column;
  gap: 30px;
  transition: background-color 0.8s ease, border-color 0.8s ease;
}

.configurator-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
}

.configurator-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.config-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: flex;
  justify-content: space-between;
}

.config-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 10px;
}

.config-btn {
  background: none;
  border: 1px solid var(--gray-fine);
  padding: 12px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--black);
  transition: all 0.3s ease, border-color 0.8s ease;
}

.config-btn:hover {
  border-color: var(--black);
}

.config-btn.active {
  background-color: transparent;
  color: var(--white);
  border-color: var(--black);
}

.config-range {
  -webkit-appearance: none;
   appearance: none;
  background: var(--gray-fine);
  outline: none;
}

.config-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--black);
}

/* Interactive Drafting Canvas for dynamic blueprints */
.configurator-preview {
  flex: 1.2;
  height: 520px;
  background-color: var(--white);
  border: 1px solid var(--black);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  transition: background-color 0.8s ease, border-color 0.8s ease;
}

.preview-grid-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: 
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  z-index: 1;
}

#blueprint-canvas {
  width: 100%;
  height: 100%;
  z-index: 2;
}

.preview-hdr {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  font-family: var(--font-sans);
  letter-spacing: 2px;
  text-transform: uppercase;
  z-index: 10;
  color: var(--gray-light);
}

.preview-scale {
  color: var(--accent);
  font-weight: 700;
}

.preview-metrics-footer {
  display: flex;
  justify-content: space-between;
  z-index: 10;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-top: 1px solid var(--gray-fine);
  padding-top: 15px;
  transition: border-color 0.8s ease;
}

.preview-metrics-val {
  font-weight: 700;
  color: var(--black);
}

/* SECTION 5 - Contact Form / Design Brief Drafting */
.contact-section {
    position: relative;
    padding: var(--section-space) 0 clamp(48px, 5vw, 72px);

    background-image: none;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.contact-layout {
  display: flex;
  justify-content: space-between;
  width: calc(100% - var(--page-gutter-double));
  gap: clamp(32px, 5vw, 72px);
  margin: var(--section-space-compact) var(--page-gutter) 0;
  padding: 0;
}

.contact-info {
  flex: 0 1 350px;
  width: min(100%, 350px);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.contact-card {
  border: 1px solid var(--gray-fine);
  padding: 30px 30px 14px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  transition: border-color 0.8s ease;
}

.contact-card-title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.contact-card-detail {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--gray-mid);
}

.contact-address-name {
  color: var(--black);
  font-weight: 800;
}

/* Drafting layout form */
.contact-form-container {
  flex: 0 1 880px;
  width: min(100%, 880px);
}

.drafting-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border: 1px solid var(--black);
  padding: 50px;
  background-color: var(--white);
  position: relative;
  transition: background-color 0.8s ease, border-color 0.8s ease;
}

.form-row {
  display: flex;
  gap: 30px;
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.form-label {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gray-light);
}

.form-input {
  background: none;
  border: none;
  border-bottom: 1px solid var(--gray-fine);
  padding: 12px 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--black);
  outline: none;
  transition: border-color 0.3s ease;
}

.form-input:focus {
  border-bottom-color: var(--black);
}

body.blueprint-mode .form-input:focus {
  border-bottom-color: var(--accent);
}

.form-submit-btn {
  background-color: transparent;
  color: var(--black);
  border: 1px solid var(--black);
  padding: 20px 40px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-top: 20px;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.form-submit-btn:hover,
.form-submit-btn:focus,
.form-submit-btn:active {
  background-color: var(--black);
  color: var(--white);
  border-color: var(--black);
  outline: none;
}

.form-submit-btn:focus-visible {
  box-shadow: 0 0 0 4px rgba(8,9,10,0.06);
}

/* Footer Section */
footer {
  background-color: transparent;
  color: var(--white);
  padding: clamp(52px, 5vw, 76px) var(--page-gutter) clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--gray-mid);
  z-index: 10;
  position: relative;
  font-family: var(--font-sans);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: clamp(36px, 4vw, 52px);
}

.footer-logo-container {
  display: flex;
  color: inherit;
  text-decoration: none;
  flex-direction: column;
  gap: 15px;
}

.footer-logo-text {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.5px;
  text-transform: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

.footer-logo-text .logo-d-text {
  color: #ffffff !important;
}

.footer-logo-text .logo-c-text {
  color: var(--logo-c) !important;
}

.footer-tagline {
  font-size: 0.85rem;
  color: var(--gray-light);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.footer-links {
  display: flex;
  gap: 80px;
}

.footer-links-col {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer-links-col:nth-child(2) {
  margin-top: 22px;
}

.footer-col-title {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 5px;
}

.footer-link {
  font-size: 0.8rem;
  color: var(--gray-fine);
  text-decoration: none;
  letter-spacing: 1px;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: var(--white);
}

.footer-bottom {
  border-top: 1px solid var(--gray-mid);
  padding-top: clamp(24px, 3vw, 36px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  color: var(--gray-light);
  letter-spacing: 1px;
}

.footer-credits span {
  color: var(--white);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .landing-section {
    flex-direction: column;
    height: 100vh;
    padding-top: 0;
  }
  .landing-video-wrapper {
    height: 100%;
    width: 100%;
    flex: none;
  }
  .hero-main-title {
    font-size: 3rem;
  }
  .contact-layout, .configurator-wrapper {
    flex-direction: column;
  }
}

/* /* Custom Animated Monogram in Block 2 */
.vector-monogram-container {
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.05);
  perspective: 1200px;
  transform-style: preserve-3d;
}

.vector-monogram-svg {
  width: 100%;
  height: 100%;
  padding: 10px;
  position: absolute;
  top: 0;
  left: 0;
}

/* Parametric Facade Louvers (v9.0) */
.louver {
  transform-style: preserve-3d;
  transform-origin: var(--louver-x) 150px;
  transform: rotateY(var(--louver-rot, 0deg)) translateZ(var(--louver-z, 0px));
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.65s ease, fill 0.65s ease;
  fill-opacity: 0.95;
}

.d-louver {
  fill: rgba(70, 75, 86, 0.92);
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 0.5px;
  filter: url(#concrete-texture) brightness(var(--louver-light, 1));
}

.c-louver {
  fill: var(--logo-c);
  stroke: rgba(255, 137, 48, 0.35);
  stroke-width: 0.5px;
  filter: drop-shadow(0 0 5px rgba(235, 107, 15, 0.45)) brightness(var(--louver-light, 1));
}

/* Volumetric 3D Layers inside Hologram Viewport */
.hologram-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.layer-backdrop {
  transform: translateZ(-90px);
}

.layer-fibonacci {
  transform: translateZ(-45px);
}

.layer-base-structures {
  transform: translateZ(0px);
}

.layer-mid-structures {
  transform: translateZ(45px);
}

.layer-glow-effects {
  transform: translateZ(85px);
}

.layer-hud {
  transform: translateZ(130px);
}

/* Dynamic Parallax Depth Expansion on Hover */
.vector-monogram-container:hover .layer-backdrop {
  transform: translateZ(-140px) scale(0.9);
}
.vector-monogram-container:hover .layer-fibonacci {
  transform: translateZ(-65px) scale(1.15); /* Scale up as a backdrop blueprint */
}
.vector-monogram-container:hover .layer-base-structures {
  transform: translateX(-20px) translateZ(0px) rotateY(-5deg) scale(1); /* Slide concrete base left and tilt */
}
.vector-monogram-container:hover .layer-mid-structures {
  transform: translateX(20px) translateZ(65px) rotateY(5deg) scale(1.04); /* Slide glass plate right and tilt forward */
}
.vector-monogram-container:hover .layer-glow-effects {
  transform: translateZ(110px) scale(1.08);
}
.vector-monogram-container:hover .layer-hud {
  transform: translateZ(160px) scale(1.12);
}

/* Hologram 3D Viewport with CSS Variable Tilt */
.hologram-viewport {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(var(--tilt-scale, 1));
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

/* Opposing Compass Dials Rotation */
.compass-dial {
  transform: rotate(var(--dial-rot, 0deg));
  transform-origin: 200px 150px;
}

.compass-dial-outer {
  transform: rotate(var(--dial-outer-rot, 0deg));
  transform-origin: 200px 150px;
}

@keyframes rotateCompass {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes rotateCompassOuter {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

/* Fibonacci Golden Spiral Blueprint Overlay */
.fibonacci-spiral {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: drawSpiral 8s cubic-bezier(0.25, 1, 0.5, 1) infinite, pulseSpiral 4s ease-in-out infinite;
  transform-origin: 200px 150px;
}

@keyframes drawSpiral {
  0% { stroke-dashoffset: 800; }
  25% { stroke-dashoffset: 0; }
  85% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 800; }
}

@keyframes pulseSpiral {
  0%, 100% { opacity: 0.18; }
  50% { opacity: 0.48; }
}

/* Kinetic Monogram Groups */
.layer-base-structures .letter-d-group {
  transform: translate3d(var(--d-slab-tx, var(--d-tx, 0px)), var(--d-slab-ty, var(--d-ty, 0px)), 0px) rotate(var(--d-slab-rot, var(--d-rot, 0deg)));
  transform-origin: 160px 150px;
  transform-style: preserve-3d;
  filter: drop-shadow(var(--shadow-d-x, 0px) var(--shadow-d-y, 10px) var(--shadow-d-blur, 15px) rgba(92, 98, 112, 0.45));
  transition: filter 0.4s ease;
}

.layer-mid-structures .letter-d-group {
  transform: translate3d(var(--d-glass-tx, var(--d-tx, 0px)), var(--d-glass-ty, var(--d-ty, 0px)), 0px) rotate(var(--d-glass-rot, var(--d-rot, 0deg)));
  transform-origin: 160px 150px;
  transform-style: preserve-3d;
  filter: drop-shadow(var(--shadow-d-x, 0px) var(--shadow-d-y, 10px) var(--shadow-d-blur, 15px) rgba(92, 98, 112, 0.45));
  transition: filter 0.4s ease;
}

.letter-c-lower-group {
  transform: translate3d(var(--c-lower-tx, var(--c-tx, 0px)), var(--c-lower-ty, var(--c-ty, 0px)), 0px) rotate(var(--c-lower-rot, var(--c-rot, 0deg)));
  transform-origin: 260px 150px;
  transform-style: preserve-3d;
  filter: drop-shadow(var(--shadow-c-x, 0px) var(--shadow-c-y, 10px) var(--shadow-c-blur, 20px) rgba(235, 107, 15, 0.55));
  transition: filter 0.4s ease;
}

.letter-c-upper-group {
  transform: translate3d(var(--c-upper-tx, var(--c-tx, 0px)), var(--c-upper-ty, var(--c-ty, 0px)), 0px) rotate(var(--c-upper-rot, var(--c-rot, 0deg)));
  transform-origin: 260px 150px;
  transform-style: preserve-3d;
  filter: drop-shadow(var(--shadow-c-x, 0px) var(--shadow-c-y, 10px) var(--shadow-c-blur, 20px) rgba(235, 107, 15, 0.55));
  transition: filter 0.4s ease;
}

/* Glassmorphism Face highlight */
.letter-d-glass {
  transition: opacity 0.4s ease;
}

.letter-c-spotlight {
  mix-blend-mode: overlay;
}

/* Interlocking Joint Pillar / Core Intersection Glow */
.glowing-intersection-core {
  opacity: var(--core-glow-opacity, 0);
  filter: drop-shadow(0 0 calc(var(--core-glow-opacity, 0) * 12px) rgba(235, 107, 15, 0.85)) drop-shadow(0 0 calc(var(--core-glow-opacity, 0) * 20px) rgba(235, 107, 15, 0.5));
  transition: opacity 0.4s ease, filter 0.4s ease;
}

@keyframes glowCore {
  0%, 30%, 80%, 100% {
    opacity: 0;
    filter: drop-shadow(0 0 0px rgba(235, 107, 15, 0));
  }
  38%, 72% {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(235, 107, 15, 0.85)) drop-shadow(0 0 20px rgba(235, 107, 15, 0.5));
  }
}

/* Drawing animations for SVG Paths */
.letter-d-path,
.letter-d-inner-path,
.letter-d-glass {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: drawD 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.letter-c-path-upper,
.letter-c-path-lower,
.letter-c-inner-path-upper,
.letter-c-inner-path-lower,
.letter-c-acrylic-upper,
.letter-c-acrylic-lower,
.letter-c-spotlight,
.letter-c-truss {
  stroke-dasharray: 210;
  stroke-dashoffset: 210;
  animation: drawC 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.tech-grid {
  opacity: 0;
  animation: fadeInGrid 8s ease infinite;
}

/* Hover freeze locks to override animations on monogram elements when hovered (v7.0) */
.vector-monogram-container:hover .letter-d-path,
.vector-monogram-container:hover .letter-d-inner-path,
.vector-monogram-container:hover .letter-d-glass,
.vector-monogram-container:hover .letter-c-path-upper,
.vector-monogram-container:hover .letter-c-path-lower,
.vector-monogram-container:hover .letter-c-inner-path-upper,
.vector-monogram-container:hover .letter-c-inner-path-lower,
.vector-monogram-container:hover .letter-c-acrylic-upper,
.vector-monogram-container:hover .letter-c-acrylic-lower,
.vector-monogram-container:hover .letter-c-spotlight,
.vector-monogram-container:hover .letter-c-truss,
.vector-monogram-container:hover .fibonacci-spiral,
.vector-monogram-container:hover .tech-grid {
  animation-play-state: paused !important;
  stroke-dashoffset: 0 !important;
  opacity: 1 !important;
}

/* CAD HUD Telemetry labels styling */
.hud-telemetry text {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 600;
  letter-spacing: 0.5px;
  opacity: 0.25;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), fill 0.3s ease;
}

.vector-monogram-container:hover .hud-telemetry text {
  opacity: 0.9;
  fill: rgba(255, 255, 255, 0.95);
}

.hud-header text {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 600;
  letter-spacing: 1px;
  opacity: 0.3;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), fill 0.3s ease;
}

.vector-monogram-container:hover .hud-header text {
  opacity: 0.8;
  fill: rgba(255, 255, 255, 0.9);
}

/* HUD Viewfinder corner brackets styling */
.hud-corner-bracket {
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 1;
  fill: none;
  transition: stroke 0.4s ease, stroke-width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.vector-monogram-container:hover .hud-corner-bracket {
  stroke: rgba(235, 107, 15, 0.65);
  stroke-width: 1.5;
}

/* Neon Active Laser Scanning Plane */
.laser-scanner-line {
  animation: laserScan 6s ease-in-out infinite;
  filter: drop-shadow(0 0 3px #eb6b0f) drop-shadow(0 0 8px rgba(235, 107, 15, 0.6));
}

@keyframes laserScan {
  0%, 100% {
    transform: translateY(20px);
    opacity: 0.15;
  }
  50% {
    transform: translateY(280px);
    opacity: 0.95;
  }
}

/* Keyframes */
@keyframes drawD {
  0% { stroke-dashoffset: 500; }
  18% { stroke-dashoffset: 0; }
  82% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 500; }
}

@keyframes drawC {
  0% { stroke-dashoffset: 210; }
  18% { stroke-dashoffset: 0; }
  82% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 210; }
}

@keyframes fadeInGrid {
  0%, 100% { opacity: 0; }
  18%, 82% { opacity: 1; }
}

/* Advanced Kinetic Assembly Translations & Rotations */
@keyframes mergeD {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
    opacity: 0.3;
  }
  15% {
    transform: translate(-10px, -5px) rotate(-3deg);
    opacity: 0.7;
  }
  35%, 75% {
    transform: translate(25px, 0px) rotate(0deg);
    opacity: 1;
  }
  90%, 100% {
    transform: translate(0px, 0px) rotate(0deg);
    opacity: 0.3;
  }
}

@keyframes mergeC {
  0% {
    transform: translate(0px, 0px) rotate(-180deg);
    opacity: 0.3;
  }
  15% {
    transform: translate(20px, 15px) rotate(-120deg);
    opacity: 0.7;
  }
  35%, 75% {
    transform: translate(-45px, 0px) rotate(0deg);
    opacity: 1;
  }
  90%, 100% {
    transform: translate(0px, 0px) rotate(-180deg);
    opacity: 0.3;
  }
}

/* Cybernetic CNC Laser Tracer Sparks Infinite Animations */
.laser-tracer-d {
  stroke-dasharray: 80, 360;
  stroke-dashoffset: 440;
  animation: traceD 4s linear infinite;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.45));
}

.laser-tracer-c-upper {
  stroke-dasharray: 35, 120;
  stroke-dashoffset: 155;
  animation: traceCUpper 3s linear infinite;
  filter: drop-shadow(0 0 5px #eb6b0f) drop-shadow(0 0 10px rgba(235, 107, 15, 0.65));
}

.laser-tracer-c-lower {
  stroke-dasharray: 35, 120;
  stroke-dashoffset: 0;
  animation: traceCLower 3s linear infinite;
  filter: drop-shadow(0 0 5px #eb6b0f) drop-shadow(0 0 10px rgba(235, 107, 15, 0.65));
}

@keyframes traceD {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes traceCUpper {
  to {
    stroke-dashoffset: -155;
  }
}

@keyframes traceCLower {
  to {
    stroke-dashoffset: 155;
  }
}

/* ==========================================
   v8.0 DYNAMIC ARCHITECTURAL EXPLODED PROJECTION
   ========================================== */

/* Configure perspective on the viewport to enable 3D projection */
.spatial-grid-viewport {
  perspective: 2000px;
  transform-style: preserve-3d;
}

/* Exploded 3D Isometric container transition states */
.spatial-grid-container {
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), gap 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.spatial-grid-container.exploded-view {
  transform: rotateX(calc(58deg + var(--grid-tilt-x, 0deg))) rotateY(calc(0deg + var(--grid-tilt-y, 0deg))) rotateZ(-38deg) scale(0.92) translate3d(-35px, 35px, 0);
  gap: 20px; /* Expand spacing slightly to look like blueprint gaps */
}

/* Volumetric Z-Separation by Structural Material Hierarchy */
.spatial-grid-container.exploded-view .block-1,
.spatial-grid-container.exploded-view .block-6,
.spatial-grid-container.exploded-view .block-8 {
  /* Concrete foundation elements (Bedrock - bottom level) */
  transform: translate3d(0, 0, -60px);
  background-color: rgba(20, 22, 26, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.5),
    inset 0 0 12px rgba(0, 0, 0, 0.9);
}

.spatial-grid-container.exploded-view .block-5,
.spatial-grid-container.exploded-view .block-9,
.spatial-grid-container.exploded-view .block-10,
.spatial-grid-container.exploded-view .block-11 {
  /* Steel Structural framing (Mid-lower level) */
  transform: translate3d(0, 0, 60px);
  background-color: rgba(235, 107, 15, 0.12) !important;
  border: 1.5px solid rgba(235, 107, 15, 0.55) !important;
  box-shadow: 
    0 15px 30px rgba(235, 107, 15, 0.18),
    0 0 15px rgba(235, 107, 15, 0.1);
}

.spatial-grid-container.exploded-view .block-3,
.spatial-grid-container.exploded-view .block-4,
.spatial-grid-container.exploded-view .block-7 {
  /* Volumetric Glass Panels (Mid-upper level) */
  transform: translate3d(0, 0, 140px);
  background-color: rgba(164, 195, 232, 0.14) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  box-shadow: 
    0 22px 40px rgba(0, 0, 0, 0.35),
    0 0 25px rgba(164, 195, 232, 0.22);
}

.spatial-grid-container.exploded-view .block-2 {
  /* Active master hologram core (Top level) */
  transform: translate3d(0, 0, 220px);
  background-color: rgba(12, 13, 16, 0.35) !important;
  border: 1px solid rgba(235, 107, 15, 0.45) !important;
  box-shadow: 
    0 30px 60px rgba(0, 0, 0, 0.6),
    0 0 35px rgba(235, 107, 15, 0.35);
  z-index: 15;
}

/* Snappy Interactive Hover Lifts in Isometric exploded space */
.spatial-grid-container.exploded-view .block-1:hover,
.spatial-grid-container.exploded-view .block-6:hover,
.spatial-grid-container.exploded-view .block-8:hover {
  transform: translate3d(0, 0, -30px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.65);
}

.spatial-grid-container.exploded-view .block-5:hover,
.spatial-grid-container.exploded-view .block-9:hover,
.spatial-grid-container.exploded-view .block-10:hover,
.spatial-grid-container.exploded-view .block-11:hover {
  transform: translate3d(0, 0, 95px) scale(1.03);
  border-color: rgba(255, 255, 255, 0.8) !important;
  background-color: rgba(235, 107, 15, 0.22) !important;
  box-shadow: 
    0 25px 45px rgba(235, 107, 15, 0.35),
    0 0 25px rgba(235, 107, 15, 0.25);
}

.spatial-grid-container.exploded-view .block-3:hover,
.spatial-grid-container.exploded-view .block-4:hover,
.spatial-grid-container.exploded-view .block-7:hover {
  transform: translate3d(0, 0, 175px) scale(1.03);
  border-color: rgba(255, 255, 255, 0.8) !important;
  background-color: rgba(164, 195, 232, 0.24) !important;
  box-shadow: 
    0 35px 55px rgba(0, 0, 0, 0.5),
    0 0 35px rgba(164, 195, 232, 0.35);
}

.spatial-grid-container.exploded-view .block-2:hover {
  transform: translate3d(0, 0, 260px) scale(1.03);
  border-color: rgba(255, 137, 48, 0.95) !important;
  box-shadow: 
    0 45px 80px rgba(0, 0, 0, 0.75),
    0 0 50px rgba(235, 107, 15, 0.55);
}

/* Automatic internal hologram layer separation in exploded mode */
.spatial-grid-container.exploded-view .layer-backdrop {
  transform: translateZ(-130px) scale(0.92);
}
.spatial-grid-container.exploded-view .layer-fibonacci {
  transform: translateZ(-65px) scale(1.1);
}
.spatial-grid-container.exploded-view .layer-base-structures {
  transform: translateZ(0px);
}
.spatial-grid-container.exploded-view .layer-mid-structures {
  transform: translateZ(65px) scale(1.02);
}
.spatial-grid-container.exploded-view .layer-glow-effects {
  transform: translateZ(120px) scale(1.05);
}
.spatial-grid-container.exploded-view .layer-hud {
  transform: translateZ(175px) scale(1.08);
}

/* Hyper-expanded split layered hover while in Exploded Mode */
.spatial-grid-container.exploded-view .vector-monogram-container:hover .layer-backdrop {
  transform: translateZ(-190px) scale(0.85);
}
.spatial-grid-container.exploded-view .vector-monogram-container:hover .layer-fibonacci {
  transform: translateZ(-95px) scale(1.16);
}
.spatial-grid-container.exploded-view .vector-monogram-container:hover .layer-base-structures {
  transform: translateX(-15px) translateZ(0px) rotateY(-8deg);
}
.spatial-grid-container.exploded-view .vector-monogram-container:hover .layer-mid-structures {
  transform: translateX(15px) translateZ(95px) rotateY(8deg) scale(1.05);
}
.spatial-grid-container.exploded-view .vector-monogram-container:hover .layer-glow-effects {
  transform: translateZ(170px) scale(1.1);
}
.spatial-grid-container.exploded-view .vector-monogram-container:hover .layer-hud {
  transform: translateZ(245px) scale(1.15);
}

/* Tactile Lock-on Adjacent Block Ripple Pulse Styles */
@keyframes gridRipplePulse {
  0% {
    box-shadow: 0 0 0px rgba(235, 107, 15, 0);
    filter: brightness(1);
  }
  15% {
    box-shadow: 
      0 0 25px rgba(235, 107, 15, 0.75), 
      inset 0 0 15px rgba(235, 107, 15, 0.35);
    filter: brightness(1.25);
  }
  100% {
    box-shadow: 0 0 0px rgba(235, 107, 15, 0);
    filter: brightness(1);
  }
}

.grid-block.ripple-pulse {
  animation: gridRipplePulse 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Volumetric Blueprint Leader Lines (v8.0) */
.leader-line {
  position: absolute;
  height: 1px;
  background: none;
  border-top: 1px dashed var(--accent);
  transform-origin: left center;
  pointer-events: none;
  opacity: 0;
  width: 0;
  transition: opacity 0.75s ease, width 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}

/* Position in the 4 corners of the grid block */
.leader-line.corner-tl { top: 0; left: 0; }
.leader-line.corner-tr { top: 0; right: 0; }
.leader-line.corner-bl { bottom: 0; left: 0; }
.leader-line.corner-br { bottom: 0; right: 0; }

/* Show them only in exploded-view mode! */
.spatial-grid-container.exploded-view .leader-line {
  opacity: 0.45;
  animation: leaderLinePulse 3s ease-in-out infinite;
}

@keyframes leaderLinePulse {
  0%, 100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.65;
  }
}

/* Specify exact length and rotation based on parent Z-height */
/* Category 1: Concrete blocks (Z-height: -60px, floor: -90px, length: 30px) */
.spatial-grid-container.exploded-view .block-1 .leader-line,
.spatial-grid-container.exploded-view .block-6 .leader-line,
.spatial-grid-container.exploded-view .block-8 .leader-line {
  width: 30px;
  transform: rotateY(90deg);
  border-top-color: rgba(255, 255, 255, 0.25);
}

/* Category 2: Steel blocks (Z-height: 60px, floor: -90px, length: 150px) */
.spatial-grid-container.exploded-view .block-5 .leader-line,
.spatial-grid-container.exploded-view .block-9 .leader-line,
.spatial-grid-container.exploded-view .block-10 .leader-line,
.spatial-grid-container.exploded-view .block-11 .leader-line {
  width: 150px;
  transform: rotateY(90deg);
  border-top-color: rgba(235, 107, 15, 0.45);
}

/* Category 3: Glass blocks (Z-height: 140px, floor: -90px, length: 230px) */
.spatial-grid-container.exploded-view .block-3 .leader-line,
.spatial-grid-container.exploded-view .block-4 .leader-line,
.spatial-grid-container.exploded-view .block-7 .leader-line {
  width: 230px;
  transform: rotateY(90deg);
  border-top-color: rgba(164, 195, 232, 0.55);
}

/* Category 4: Hologram block (Z-height: 220px, floor: -90px, length: 310px) */
.spatial-grid-container.exploded-view .block-2 .leader-line {
  width: 310px;
  transform: rotateY(90deg);
  border-top-color: rgba(235, 107, 15, 0.65);
}

/* ==========================================
   LANDING KINETIC ARCHITECTURAL SCALES ANIMATION
   ========================================== */

.kinetic-layout-viewport {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  perspective: 1200px;
}

.kinetic-canvas-container {
  position: relative;
  width: 100%;
  max-width: 410px; /* Balanced, moderately compact spatial layout */
  height: 100%;
  max-height: 231px; /* Proportionate aspect ratio height for 16:9 */
  aspect-ratio: 16 / 9; /* Enforce 16:9 ratio */
  background-color: transparent; /* Seamless transparent background */
  border: none !important; /* Crisp fine border outline */
  padding: 16px; /* Moderately reduced padding */
  display: flex;
  gap: 5px; /* Space between vertical stem and the horizontal block stacks */
  overflow: visible; /* Prevent blocks from getting clipped/cutted during slide animations */
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.6s ease;
}

/* Elegant architectural tilt & scale on hover */
.kinetic-canvas-container:hover {
  transform: translateZ(10px) rotateX(0.5deg) rotateY(-0.5deg);
  border-color: var(--accent);
}

/* Blueprint mode overrides */
body.blueprint-mode .kinetic-canvas-container {
  background-color: transparent;
  border-color: rgba(164, 195, 232, 0.3);
}

body.blueprint-mode .kinetic-canvas-container:hover {
  border-color: var(--accent);
}

/* HUD corners - fine crosshairs / corner brackets styling */
.kinetic-canvas-container .hud-corner {
  display: none; /* Completely remove the framing box outline */
  position: absolute;
  width: 15px;
  height: 15px;
  border: 1px solid var(--gray-light);
  opacity: 0.45;
  transition: opacity 0.4s ease, border-color 0.4s ease;
  z-index: 10;
  pointer-events: none;
}

body.blueprint-mode .kinetic-canvas-container .hud-corner {
  border-color: var(--gray-light);
  opacity: 0.45;
}

.kinetic-canvas-container:hover .hud-corner {
  opacity: 0.85;
  border-color: var(--accent);
}

body.blueprint-mode .kinetic-canvas-container:hover .hud-corner {
  border-color: var(--accent);
}

.kinetic-canvas-container .hud-corner.top-left {
  top: 15px;
  left: 15px;
  border-right: none;
  border-bottom: none;
}

.kinetic-canvas-container .hud-corner.top-right {
  top: 15px;
  right: 15px;
  border-left: none;
  border-bottom: none;
}

.kinetic-canvas-container .hud-corner.bottom-left {
  bottom: 15px;
  left: 15px;
  border-right: none;
  border-top: none;
}

.kinetic-canvas-container .hud-corner.bottom-right {
  bottom: 15px;
  right: 15px;
  border-left: none;
  border-top: none;
}

/* LEFT VERTICAL BAR: Fades out and disappears slowly */
.kinetic-vertical-stem {
  width: 48px; /* Balanced stem width */
  height: calc(100% - 18px); /* Matches shifted Row 1/5 gaps */
  position: relative;
  top: 9px; /* Shifted down to align perfectly with shifted Row 1 */
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  display: none;
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

body.blueprint-mode .kinetic-vertical-stem {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Top silhouette inside the vertical stem (rotated 90deg) */
.sil-stem-top {
  top: 22px;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  height: 26px; /* Moderately scaled down */
}

/* Bottom silhouette inside the vertical stem */
.sil-stem-bottom {
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  height: 26px; /* Moderately scaled down */
}

/* Dog next to bottom silhouette in vertical stem */
.sil-stem-dog {
  position: absolute;
  bottom: 7px;
  left: 15px;
  width: 12px;
  height: 11px;
  transform: rotate(90deg);
}

/* COLUMN OF HORIZONTAL ROWS - shifts entire C shape to the right corner after monogram animation completes */
.kinetic-rows-column {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Evenly spaces the 5 rows */
  z-index: 4;
  transform: translateX(calc(20% + 233px));
}

.kinetic-row {
  width: 100%;
  height: 37px; /* Balanced row heights */
  display: flex;
  position: relative;
  align-items: center;
}

/* Top and bottom rows push to right/contain specific items, center rows shift center blocks */
.row-1 {
  display: flex;
  gap: 5px;
  position: relative;
  top: 9px; /* Shift Row 1 down to reduce vertical gap with Row 2 */
}

.row-5 {
  display: flex;
  gap: 5px;
  position: relative;
  top: -9px; /* Shift Row 5 up to reduce vertical gap with Row 4 */
}

.block-square,
.block-top-right,
.block-horizontal,
.kinetic-vertical-stem,
.block-top-single,
.block-bottom-single,
.block-d-static,
.kinetic-vertical-stem-static {
  position: relative;
  transform-style: preserve-3d;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.block-square::before,
.block-top-right::before,
.block-horizontal::before,
.kinetic-vertical-stem::before,
.block-top-single::before,
.block-bottom-single::before,
.block-d-static::before,
.kinetic-vertical-stem-static::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--white); /* Theme background inside block */
  border: 2px solid #000000; /* Solid black outline */
  border-radius: 2px;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              border-color 0.4s ease,
              background-color 0.4s ease,
              box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
  z-index: -1;
}

/* Premium 3D Tile Lift Transition on Hover */
.block-square:hover::before,
.block-top-right:hover::before,
.block-horizontal:hover::before,
.kinetic-vertical-stem:hover::before,
.block-top-single:hover::before,
.block-bottom-single:hover::before,
.block-d-static:hover::before,
.kinetic-vertical-stem-static:hover::before {
  transform: translateZ(12px) rotateX(1.5deg) rotateY(-1.5deg) scale(1.015);
  border-color: var(--accent);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.block-square {
  width: 42px; /* Balanced square blocks */
  height: 100%;
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.block-top-single,
.block-bottom-single {
  width: calc(45% + 38px); /* Reduced by 5px from right */
  height: 100%;
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Specific overrides for the second D (the static left D that appears after C starts moving) */
.kinetic-d-rows .block-top-single,
.kinetic-d-rows .block-bottom-single {
  width: calc(45% + 10px); /* Reduced by 28px from original 38px */
}

@keyframes logoRevealFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-60px) scale(0.8) rotateY(-20deg);
  }
  100% {
    opacity: 0.95;
    transform: translateX(0) scale(1) rotateY(0);
  }
}

/* Logo block styles removed */

/* New Block-Structured D Reveal Styles (Forms "D C" using matching blocks) */
.kinetic-d-blocks-container {
  position: absolute;
  left: -117px; /* Shifted 3px right to reduce spacing with C */
  top: 16px; /* Align with C padding content box perfectly */
  width: 100%; /* Matches full container width so it aligns identically */
  height: calc(100% - 32px); /* Matches C padding content height exactly */
  z-index: 3;
  opacity: 1;
  pointer-events: auto;
  transform-style: preserve-3d;
}

.kinetic-d-rows {
  position: absolute;
  left: 53px; /* Stem width (48px) + gap (5px) */
  top: 0;
  width: calc(100% - 53px);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.kinetic-vertical-stem-static {
  position: absolute;
  left: 0;
  top: 9px;
  width: 48px;
  height: calc(100% - 18px);
  z-index: 5;
}

/* Match individual static blocks with exact starting monogram grid curve/spine proportions */
.cb-1-static {
  width: calc(42% - 16px); /* Reduced by another 12px */
  transform: translateX(calc(var(--cb-1-start) - 45px)); /* Shifted right by 12px to reduce length from left */
  left: 0;
}

.cb-3-static {
  width: calc(42% - 16px); /* Original wide width */
  transform: translateX(calc(var(--cb-1-start) - 45px)); /* Original starting position matching first D */
  left: 0;
}

.cb-2-static {
  width: calc(33% - 8px); /* Reduced by 8px from original width */
  transform: translateX(calc(var(--cb-1-start) - 17px)); /* Original starting position matching first D */
  left: 0;
}

@keyframes dReveal {
  0% {
    opacity: 0;
    transform: translateX(-120%); /* Slide in from completely off-screen left side */
  }
  100% {
    opacity: 1;
    transform: translateX(0); /* Lock perfectly in place */
  }
}

@keyframes logoReveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.95;
  }
}

/* Standalone Logo Block (Outside D) */
.logo-block {
  position: absolute;
  left: 3px; /* Shifted 12px left from 15px */
  bottom: 15px; /* Docked to absolute extreme corner inside HUD bracket */
  width: 84px; /* Matches the original styling */
  height: 62px;
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  opacity: 0.95;
  z-index: 6;
}

.logo-block .row-logo-img {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s ease;
  z-index: 1;
  opacity: 0.95;
}

.logo-block:hover .row-logo-img {
  transform: translateZ(12px) rotateX(1.5deg) rotateY(-1.5deg) scale(1.015);
}

body.blueprint-mode .logo-block .row-logo-img {
  opacity: 0.85;
  filter: invert(82%) sepia(12%) saturate(902%) hue-rotate(185deg) brightness(97%) contrast(90%); /* Converts black to blueprint blue (#a4c3e8) */
}

.row-1-gap-container {
  width: 4px; /* Increased from 45px to 90px to create a more spacious gap */
  height: 100%;
  position: relative;
}

.row-5-gap-container {
  width: 4px; /* Reduced gap spacer width for Row 5 to move the blocks closer */
  height: 100%;
  position: relative;
}

.sil-row1-gap {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 36px;
}

.block-top-right {
  width: 45%; /* Reduced slightly from 50% to align with design updates */
  height: 100%;
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Center rows (cb-1, cb-2, cb-3) are justified to flex-end so they align to right */
.row-2, .row-3, .row-4 {
  justify-content: center;
}

.block-horizontal {
  height: 100%;
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Width specifications for distinct blocks */
.cb-1 {
  width: calc(42% - 4px); /* Reduced by 4px */
  position: relative;
  transform: translateX(-97.62%);
}

.cb-2 {
  width: calc(36% - 4px); /* Reduced by 4px */
  position: relative;
  transform: translateX(-144.44%);
}

.cb-3 {
  width: 42%; /* Original wide width */
  position: relative;
  transform: translateX(-97.62%);
}

/* Bottom long block */
.block-bottom {
  width: 45%; /* Match first row block size (45%) and it is fixed */
  height: 100%;
  /* Fixed in position - no animation */
}

/* Silhouettes placement inside center blocks */
.sil-cb1,
.sil-cb3 {
  bottom: 0;
  left: 20%;
  transform: translateX(-50%);
  height: 26px; /* Balanced height */
  fill: var(--gray-light); /* Show them in dark slate grey */
}

.sil-cb2 {
  bottom: 0;
  right: 15px; /* Sit precisely on the right edge */
  height: 22px; /* Balanced height */
}

/* Bottom block silhouettes */
.sil-bottom-left {
  bottom: 0;
  left: 20px;
  height: 26px; /* Balanced height */
}

/* Compensate position inside top and bottom full-width single blocks */
.row-1 .sil-bottom-left,
.row-5 .sil-bottom-left {
  left: 63px; /* Adjusted offset: block-square (42px) + gap (5px) + offset (16px) = 63px */
}

.sil-bottom-right {
  bottom: 0;
  right: 50px;
  height: 26px; /* Balanced height */
}

.sil-bottom-dog {
  bottom: 0;
  right: 22px;
  width: 11px; /* Balanced dog sizing */
  height: 10px; /* Balanced dog sizing */
  opacity: 0.95;
}

/* Global silhouette solid black styling */
.silhouette-svg {
  position: absolute;
  fill: var(--gray-light); /* Premium slate grey human silhouettes */
  transition: fill 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Blueprint mode adjustments for blocks and silhouettes */
body.blueprint-mode .block-square,
body.blueprint-mode .block-top-right,
body.blueprint-mode .block-horizontal,
body.blueprint-mode .kinetic-vertical-stem,
body.blueprint-mode .block-top-single,
body.blueprint-mode .block-bottom-single,
body.blueprint-mode .block-d-static,
body.blueprint-mode .kinetic-vertical-stem-static {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.blueprint-mode .block-square::before,
body.blueprint-mode .block-top-right::before,
body.blueprint-mode .block-horizontal::before,
body.blueprint-mode .kinetic-vertical-stem::before,
body.blueprint-mode .block-top-single::before,
body.blueprint-mode .block-bottom-single::before,
body.blueprint-mode .block-d-static::before,
body.blueprint-mode .kinetic-vertical-stem-static::before {
  background-color: rgba(6, 11, 20, 0.6);
  border: 1.5px solid #a4c3e8;
  box-shadow: inset 0 0 10px rgba(164, 195, 232, 0.15);
}

/* Premium 3D Tile Lift Transition on Hover in Blueprint Mode */
body.blueprint-mode .block-square:hover::before,
body.blueprint-mode .block-top-right:hover::before,
body.blueprint-mode .block-horizontal:hover::before,
body.blueprint-mode .kinetic-vertical-stem:hover::before,
body.blueprint-mode .block-top-single:hover::before,
body.blueprint-mode .block-bottom-single:hover::before,
body.blueprint-mode .block-d-static:hover::before,
body.blueprint-mode .kinetic-vertical-stem-static:hover::before {
  border-color: var(--accent);
  background-color: rgba(164, 195, 232, 0.12);
  box-shadow: 0 6px 16px rgba(164, 195, 232, 0.15), inset 0 0 8px rgba(164, 195, 232, 0.15);
}

body.blueprint-mode .silhouette-svg {
  fill: #a4c3e8;
}

/* ==========================================
   KINETIC SLIDE & FADE KEYFRAME PIPELINES
   ========================================== */

/* 
   Total duration: 12s
   Stepped Single-Run Timeline (4 steps of movement, 2s wait pauses):
   - 0s to 2s (0% - 16.667%): Original state (0% translation, Stop 0)
   - 2s to 3s (16.667% - 25%): Move 1 to 25% translation
   - 3s to 5s (25% - 41.667%): Pause 1 at 25% translation (Wait 2s)
   - 5s to 6s (41.667% - 50%): Move 2 to 50% translation
   - 6s to 8s (50% - 66.667%): Pause 2 at 50% translation (Wait 2s)
   - 8s to 9s (66.667% - 75%): Move 3 to 75% translation
   - 9s to 11s (75% - 91.667%): Pause 3 at 75% translation (Wait 2s)
   - 11s to 12s (91.667% - 100%): Move 4 to 100% translation (Left End position, flush alignment)
   - 12s+ (100%): Set and locked flush-left forever (animation-fill-mode: forwards)
*/

@keyframes verticalFadeOut {
  0% {
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(0.95);
  }
}

/* cb-1 (width 42%): Slides back to left past the first row block boundary (aligns left edge at -62% from center) */
@keyframes slideLeftCb1 {
  0% {
    transform: translateX(var(--cb-1-start));
  }
  100% {
    transform: translateX(-97.62%); /* Protrudes leftwards, forming the top curve of the C */
  }
}

/* cb-2 (width 36%): Slides further back to left (aligns left edge at -70% from center, forming the C spine peak) */
@keyframes slideLeftCb2 {
  0% {
    transform: translateX(calc(var(--cb-1-start) + 40px)); /* Shifted slightly to the right relative to the 2nd row block */
  }
  100% {
    transform: translateX(-144.44%); /* Protrudes furthest leftwards, forming the peak spine of the C */
  }
}

/* cb-3 (width 42%): Slides back to left past the last row block boundary (aligns left edge at -62% from center) */
@keyframes slideLeftCb3 {
  0% {
    transform: translateX(var(--cb-1-start)); /* Aligns perfectly under the 2nd row block initially */
  }
  100% {
    transform: translateX(-97.62%); /* Protrudes leftwards, forming the bottom curve of the C */
  }
}

/* shiftColumnRight: Shifts the entire completed C block shape (all 5 rows in unison) to the right corner */
@keyframes shiftColumnRight {
  0%, 66.6% {
    transform: translateX(0); /* Hold in standard left-aligned position during monogram slide and review */
  }
  100% {
    transform: translateX(calc(20% + 233px)); /* Shift C column closer to D blocks (pulled additional 40px leftward) */
  }
}

/* Media Query overrides for full responsiveness */
@media (max-width: 1024px) {
  .kinetic-layout-viewport {
    padding: 20px;
  }
  
  .kinetic-canvas-container {
    max-width: 320px; /* Balanced mobile width constraint */
    aspect-ratio: 16 / 9;
    height: auto;
    padding: 11px; /* Balanced padding */
    gap: 5px; /* Balanced gap */
  }
  
  .kinetic-vertical-stem {
    width: 31px; /* Balanced stem width on mobile */
    height: calc(100% - 10px); /* Matches shifted mobile top/bottom rows */
    top: 5px; /* Shifted down to align perfectly with mobile Row 1 */
  }
  
  .block-square {
    width: 27px; /* Balanced square blocks on mobile */
  }

  .block-top-single,
  .block-bottom-single {
    width: calc(45% + 18px); /* Reduced by 5px from right on mobile */
  }

  /* Specific overrides for the second D on mobile (appears after C starts moving) */
  .kinetic-d-rows .block-top-single,
  .kinetic-d-rows .block-bottom-single {
    width: calc(45% - 10px); /* Reduced by 28px from original 18px */
  }

  .kinetic-d-blocks-container {
    left: -6px; /* Shifted 3px right to reduce spacing with C on mobile */
    top: 11px; /* Align with mobile padding content box perfectly */
    width: 100%;
    height: calc(100% - 22px); /* Matches mobile padding content height exactly */
  }

  .kinetic-vertical-stem-static {
    width: 31px;
    height: calc(100% - 10px);
    top: 5px;
  }

  .kinetic-d-rows {
    left: 36px; /* stem 31px + gap 5px */
    width: calc(100% - 36px);
  }

  .cb-1-static {
    width: calc(42% - 16px); /* Reduced by another 12px */
    transform: translateX(calc(var(--cb-1-start) + 12px)); /* Shifted right by 12px to reduce length from left */
    left: 0;
  }

  .cb-3-static {
    width: 42%;
    transform: translateX(var(--cb-1-start));
    left: 0;
  }

  .cb-2-static {
    width: calc(36% - 8px); /* Reduced by 8px from original width */
    transform: translateX(calc(var(--cb-1-start) + 2px));
    left: 0;
  }

  .kinetic-rows-column {
    transform: translateX(calc(20% + 183px));
  }

  /* Compensate position inside top and bottom single blocks on mobile */
  .row-1 .sil-bottom-left,
  .row-5 .sil-bottom-left {
    left: 41px; /* Adjusted offset: block-square (27px) + gap (5px) + offset (9px) = 41px */
  }
  
  /* Mobile standalone logo styling */
  .logo-block {
    left: 2px; /* Shifted left on mobile to stay on screen */
    bottom: 8px; /* Docked closer to extreme corner on mobile */
    width: 55px; /* Sized for mobile screens */
    height: 46px;
  }

  .logo-block .row-logo-img {
    top: 1px;
    left: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
  }
  
  .row-1 {
    top: 5px; /* Shift Row 1 down to reduce vertical gap on mobile */
  }

  .row-5 {
    top: -5px; /* Shift Row 5 up to reduce vertical gap on mobile */
  }

  .row-1-gap-container {
    width: 5px; /* Balanced gap spacer */
  }
  
  .row-5-gap-container {
    width: 5px; /* Balanced gap spacer */
  }
  
  .kinetic-row {
    height: 26px; /* Balanced mobile row height */
  }
  
  .silhouette-svg {
    height: 18px; /* Balanced mobile silhouettes */
  }
  
  .sil-cb2 {
    height: 16px;
    right: 5px;
  }
  
  .sil-bottom-dog {
    width: 8px;
    height: 7px;
    right: 15px;
  }
  
  .sil-bottom-left {
    left: 10px;
  }
  
  .sil-bottom-right {
    right: 30px;
  }
  
  .sil-cb1,
  .sil-cb3 {
    left: 20px;
  }
  
  .sil-stem-dog {
    bottom: 5px;
    left: 10px;
    width: 9px;
    height: 8px;
  }
  
  :root {
    --cb-1-start: calc(20px - 34%); /* Start at center of the first row second block before animation (mobile) */
  }

  @keyframes shiftColumnRightMobile {
    0%, 66.6% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(20% + 183px)); /* Shifts mobile C column closer to D (pulled additional 30px leftward) */
    }
  }
}

/* ==========================================
   CINEMATIC BRAND REVEAL INTRO OVERLAY
   ========================================== */

#brand-reveal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #07080a;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 1;
  transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1), visibility 1.5s;
}

#brand-reveal-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.reveal-camera-wrapper {
  position: relative;
  width: 800px;
  height: 800px;
  max-width: 100vw;
  max-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.96);
  transition: transform 25s cubic-bezier(0.1, 0.8, 0.2, 1);
}

.reveal-camera-wrapper.zoomed {
  transform: scale(1.1);
}

#reveal-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

#reveal-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

.reveal-hud-text {
  position: absolute;
  bottom: 80px;
  left: 0;
  width: 100%;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 4px;
  text-align: center;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

#reveal-skip-btn {
  position: absolute;
  bottom: 40px;
  right: 40px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.5);
  padding: 12px 24px;
  font-family: var(--font-sans), sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 100000;
  outline: none;
}

#reveal-skip-btn:hover {
  border-color: #eb6b0f;
  color: #eb6b0f;
  background-color: rgba(235, 107, 15, 0.05);
  box-shadow: 0 0 15px rgba(235, 107, 15, 0.2);
}

/* Hide scroll wrapper during reveal animation to optimize performance */
body.revealing {
  overflow: hidden;
  height: 100vh;
}

body.revealing #smooth-scroll-wrapper {
  visibility: hidden;
  opacity: 0;
}

body:not(.revealing) #smooth-scroll-wrapper {
  visibility: visible;
  opacity: 1;
  transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Scale down responsive size of the reveal SVG on mobile devices */
@media (max-width: 768px) {
  .reveal-camera-wrapper {
    width: 450px;
    height: 450px;
  }
  
  #reveal-skip-btn {
    bottom: 20px;
    right: 20px;
    padding: 8px 16px;
    font-size: 0.65rem;
  }
  
  .reveal-hud-text {
    bottom: 40px;
    font-size: 0.65rem;
  }
}

body {
  background: var(--gray-dark);
}

body.blueprint-mode {
  background: #0b1424;
}

#landing .video-container,
#landing.landing-section,
#landing .landing-video-wrapper {
  background: #ffffff !important;
}

body.blueprint-mode #landing .video-container,
body.blueprint-mode #landing.landing-section,
body.blueprint-mode #landing .landing-video-wrapper {
  background: #ffffff !important;
}

/* Tectonic Commission Modal Popup */
.brief-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(5, 6, 8, 0.85); /* Semitransparent concrete charcoal */
  backdrop-filter: blur(10px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.brief-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.brief-modal-content {
  background-color: var(--white);
  border: 1px solid var(--gray-fine);
  width: 90%;
  max-width: 600px;
  padding: 30px;
  position: relative;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
  transform: scale(0.9) translateY(20px);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.brief-modal-overlay.active .brief-modal-content {
  transform: scale(1) translateY(0);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--gray-fine);
  padding-bottom: 15px;
  margin-bottom: 20px;
}

.modal-tag {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 2px;
  color: var(--accent);
}

.modal-close-btn {
  background: none;
  border: none;
  color: var(--black);
  font-size: 1.5rem;
  line-height: 1;
  cursor: none !important;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.modal-close-btn:hover {
  opacity: 1;
  color: var(--accent);
}

.modal-title {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  color: var(--black);
}

.modal-status-text {
  font-size: 0.85rem;
  color: var(--gray-mid);
  margin-bottom: 25px;
}

.modal-data-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
  border-top: 1px solid var(--gray-fine);
  padding-top: 20px;
}

.modal-data-item {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  padding-bottom: 10px;
}

.data-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gray-light);
  width: 150px;
  flex-shrink: 0;
  letter-spacing: 1px;
}

.data-value {
  font-size: 0.9rem;
  color: var(--black);
}

.data-value-block {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--black);
  max-height: 120px;
  overflow-y: auto;
  padding-right: 5px;
}

/* Blueprint mode overrides for modal */
body.blueprint-mode .brief-modal-content {
  background-color: #0b1424;
  border-color: rgba(164, 195, 232, 0.2);
  box-shadow: 0 30px 60px rgba(6, 11, 20, 0.9);
}

body.blueprint-mode .modal-data-item {
  border-color: rgba(164, 195, 232, 0.05);
}


/* Premium Brutalist Audio Toggle Button */
.audio-toggle-btn {
  position: absolute;
  bottom: 19%;
  right: 5%;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(240, 242, 245, 0.75);
  border: 1px solid var(--black);
  padding: 8px 16px;
  cursor: pointer;
  font-family: var(--font-sans), sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--black);
  letter-spacing: 2px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

body.blueprint-mode .audio-toggle-btn {
  background: rgba(11, 20, 36, 0.75);
  border-color: var(--black);
  color: var(--black);
}

.audio-toggle-btn:hover {
  background: var(--black);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(8, 9, 10, 0.15);
}

body.blueprint-mode .audio-toggle-btn:hover {
  background: var(--black);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(6, 11, 20, 0.3);
}

.audio-toggle-btn .speaker-icon {
  width: 14px;
  height: 14px;
  display: block;
}

.audio-toggle-btn .sound-wave-1,
.audio-toggle-btn .sound-wave-2 {
  opacity: 0.3;
  transition: opacity 0.3s ease;
  transform-origin: center left;
}

.audio-toggle-btn.playing .sound-wave-1 {
  animation: pulseWave 0.8s infinite alternate;
  opacity: 1;
}

.audio-toggle-btn.playing .sound-wave-2 {
  animation: pulseWave 0.8s infinite alternate 0.2s;
  opacity: 1;
}

@keyframes pulseWave {
  from {
    opacity: 0.2;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1.1);
  }
}

.audio-toggle-btn.attention {
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(255, 85, 0, 0.3);
  animation: borderPulse 2s infinite;
}

.audio-toggle-btn.attention .audio-btn-text {
  color: var(--accent);
}

@keyframes borderPulse {
  0% {
    border-color: rgba(255, 85, 0, 0.4);
    box-shadow: 0 0 0 0px rgba(255, 85, 0, 0.3);
  }
  50% {
    border-color: rgba(255, 85, 0, 1);
    box-shadow: 0 0 0 6px rgba(255, 85, 0, 0);
  }
  100% {
    border-color: rgba(255, 85, 0, 0.4);
    box-shadow: 0 0 0 0px rgba(255, 85, 0, 0);
  }
}

@media (max-width: 768px) {
  .audio-toggle-btn {
    bottom: 17%;
    right: 5%;
    padding: 6px 12px;
    font-size: 0.65rem;
  }
}
.services-video-section {
  position: relative;
  z-index: 10;
  padding: 0;
  background: var(--white);
  overflow: hidden;
}

.services-video-wrapper {
  width: 100%;
  height: min(72vh, 760px);
  min-height: 420px;
  overflow: hidden;
  background: #050505;
}

.services-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.services-video.is-playing {
  opacity: 1;
}

@media (max-width: 700px) {
  .services-video-wrapper {
    height: 54vh;
    min-height: 280px;
  }
}
.projects-carousel-section {
  position: relative;
  z-index: 10;
  margin-top: 0;
  padding: var(--section-space) 0;
  overflow: hidden;
  background: #ffffff;
  border-bottom: 1px solid var(--gray-fine);
}

.carousel-hdr {
  width: min(1180px, calc(100% - var(--page-gutter-double)));
  margin: 0 0 var(--section-space-compact) var(--page-gutter);
}

.services-section > .section-hdr,
.contact-section > .section-hdr {
  width: calc(100% - var(--page-gutter-double));
  margin-left: var(--page-gutter);
}

.title-accent {
  color: rgb(233,91,9);
}

.carousel-viewport {
  width: 100%;
  overflow: hidden;
  padding: 8px 0 18px;
}

.carousel-track {
  display: flex;
  width: max-content;
  gap: 22px;
  padding-left: var(--page-gutter);
  animation: carouselTreadmill 54s linear infinite;
  will-change: transform;
}

.carousel-viewport:hover .carousel-track {
  animation-play-state: paused;
}

.carousel-card {
  position: relative;
  flex: 0 0 clamp(245px, 24vw, 360px);
  height: clamp(150px, 17vw, 220px);
  overflow: hidden;
  border-radius: 8px;
  background: #d9d9d9;
  color: #d1d5db;
  text-decoration: none;
  isolation: isolate;
  box-shadow: 0 18px 50px rgba(0,0,0,0.12);
}

.carousel-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.03);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.5s ease;
}

/* Featured services quick links removed */

.carousel-card:hover img {
  transform: scale(1.045);
}

.carousel-card .project-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: block;
  padding: 18px 16px;
  background: linear-gradient(180deg, rgba(8, 9, 10, 0) 0%, rgba(8, 9, 10, 0.92) 100%);
  box-shadow: inset 0 12px 24px rgba(0, 0, 0, 0.45);
  color: var(--white);
  font-family: Montserrat, var(--font-sans);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1.35;
  text-transform: none;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.36);
  word-break: break-word;
}

.carousel-card .project-title .title-accent {
  color: var(--accent);
}

.carousel-card strong {
  color: rgb(233,91,9);
  font-weight: 700;
}

@keyframes carouselTreadmill {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 700px) {
  .projects-carousel-section {
    margin-top: 0;
    padding: 42px 0 48px;
  }

  .carousel-track {
    gap: 16px;
    padding-left: var(--page-gutter);
    animation-duration: 46s;
  }

  .carousel-card {
    flex-basis: 76vw;
    height: 190px;
  }
}
/* Opening DC video: keep a single clean white background */
#landing.landing-section,
#landing .landing-video-wrapper,
#landing .video-container {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

#landing .landing-video,
#landing .landing-video-wrapper,
#landing .video-container {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
}

body.blueprint-mode #landing .landing-video,
body.blueprint-mode #landing .landing-video-wrapper,
body.blueprint-mode #landing .video-container {
  mix-blend-mode: normal !important;
  filter: none !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
}

.services-section > .services-video-wrapper {
  margin: 0 0 70px;
  width: 100%;
  height: min(58vh, 620px);
  min-height: 340px;
  background: #050505;
  overflow: hidden;
}

.services-section > .services-video-wrapper .services-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

footer {
  background-color: #000000 !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width: 700px) {
  .services-section > .services-video-wrapper {
    height: 42vh;
    min-height: 240px;
    margin-bottom: 42px;
  }
}
/* Services section: show the full InShot video as the only background */
.services-section {
  padding: calc(var(--section-space) + clamp(24px, 2.5vw, 40px)) 0 var(--section-space) !important;
  background: #ffffff !important;
  border-bottom: none !important;
  overflow: visible;
}

.services-section > .services-video-wrapper {
  margin: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.services-section > .services-video-wrapper .services-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  opacity: 1 !important;
  background: #ffffff !important;
}

.services-grid.hidden,
.services-video-wrapper.hidden,
.service-card.hidden {
  display: none !important;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: 20px;
  width: calc(100% - var(--page-gutter-double));
  padding: var(--section-space-compact) 0 0;
  max-width: none;
  margin: 0 var(--page-gutter);
}

.service-card {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(150px, 17vw, 220px);
  min-height: 150px;
  background: #111111;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.45s ease, transform 0.45s ease, box-shadow 0.35s ease;
}

.service-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.service-card:hover {
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.24);
}

.service-card-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.service-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
}

.service-card:hover .service-card-media img {
  transform: scale(1.03);
}

.service-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px;
  background: linear-gradient(180deg, rgba(8, 9, 10, 0) 0%, rgba(8, 9, 10, 0.92) 100%);
  color: #ffffff;
}

.service-card-num {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.service-card h3 {
  margin: 0;
  font-family: Montserrat, var(--font-sans);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1.35;
  text-transform: none;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.36);
  color: var(--white);
}

.service-card p {
  display: none;
}

.service-detail-panel {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 30px;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.service-detail-panel.active {
  opacity: 1;
  pointer-events: auto;
}

.service-detail-card {
  position: relative;
  width: min(100%, 1120px);
  max-height: min(100%, calc(100vh - 60px));
  overflow: hidden;
  border-radius: 28px;
  background-color: #111;
  background-size: cover;
  background-position: center;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45);
}

.service-detail-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.92) 70%);
}

.service-detail-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 280px;
  padding: 40px;
  color: #ffffff;
}

.service-detail-copy h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.02;
}

.service-detail-copy p {
  margin-top: 18px;
  max-width: 720px;
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.92);
}

.service-detail-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

@media (max-width: 1280px) {
  .services-grid {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }
}

@media (max-width: 960px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
  .service-detail-card {
    width: min(100%, calc(100vw - 40px));
  }
}

@media (max-width: 640px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
  .service-detail-card {
    border-radius: 20px;
  }
}

@media (max-width: 900px) {
  .services-grid {
    padding: var(--section-space-compact) 0 0;
    gap: 20px;
  }
}

@media (max-width: 700px) {
  .services-section > .services-video-wrapper {
    height: 100svh !important;
    min-height: 100svh !important;
  }
}
/* InShot grey lift attempt: brighten the video background toward white */
.services-section > .services-video-wrapper .services-video {
  filter: brightness(1.36) contrast(1.08) saturate(1.02) !important;
}


/* Full-screen service detail experience */
.service-card {
  cursor: pointer;
}

.service-card:focus-visible {
  outline: 3px solid #eb6b0f;
  outline-offset: 4px;
}

.service-detail-panel {
  display: block;
  padding: 0;
  overflow: hidden;
  background: #050505;
}

.service-detail-card {
  width: 100vw;
  height: 100dvh;
  min-height: 100vh;
  max-height: none;
  border-radius: 0;
  background-color: #111111;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: none;
  transform: scale(1.018);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-detail-panel.active .service-detail-card {
  transform: scale(1);
}

.service-detail-card::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.4) 48%, rgba(0, 0, 0, 0.08) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.05) 35%, rgba(0, 0, 0, 0.86) 100%);
}

.service-detail-copy {
  min-height: 100%;
  width: min(920px, 100%);
  padding: clamp(36px, 6vw, 96px);
  justify-content: flex-end;
}

.service-detail-copy h3 {
  max-width: 850px;
  font-size: clamp(2.8rem, 6vw, 6.5rem);
  line-height: 0.94;
  text-shadow: 0 3px 28px rgba(0, 0, 0, 0.7);
}

.service-detail-copy p {
  max-width: 760px;
  margin-bottom: 0;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.75;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}

.service-detail-close {
  top: clamp(20px, 3vw, 38px);
  right: clamp(20px, 3vw, 42px);
  width: 52px;
  height: 52px;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(10px);
}

@media (max-width: 640px) {
  .service-detail-card {
    width: 100vw;
    border-radius: 0;
    background-position: center;
  }

  .service-detail-copy {
    min-height: 100%;
    padding: 96px 24px 38px;
  }

  .service-detail-copy h3 {
    font-size: clamp(2.35rem, 12vw, 4.5rem);
  }
}
.service-detail-title {
  color: #ffffff;
}

.service-detail-title .first-word {
  color: #c3c7ce;
}

.service-detail-title .last-word,
.service-detail-num {
  color: var(--accent);
}

/* Long-form service detail content */
.service-detail-panel {
  overflow-x: hidden;
  overflow-y: auto;
}

.service-detail-card {
  height: auto;
  min-height: 100dvh;
}

.service-detail-copy {
  min-height: 100dvh;
}

.service-detail-copy p {
  white-space: pre-line;
}


/* Two-line treatment for long service titles */
.service-card.has-long-title h3 {
  display: -webkit-box;
  max-height: 2.7em;
  overflow: hidden;
  text-wrap: balance;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.service-detail-title.is-long-title {
  display: -webkit-box;
  max-width: 920px;
  max-height: 1.88em;
  overflow: hidden;
  text-wrap: balance;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}


/* Services capabilities introduction */
.services-capabilities-intro {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 20px);
  width: calc(100% - var(--page-gutter-double));
  margin: 0 var(--page-gutter);
  padding: 18px 0 0;
  border-top: none;
  font-family: var(--font-sans);
  font-size: clamp(0.72rem, 0.9vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
}

.services-capabilities-count {
  color: #7f8791;
}

.services-capabilities-dot,
.services-capabilities-practice {
  color: var(--accent);
}


.services-capabilities-intro + .services-grid {
  padding-top: var(--section-space-compact);
}

@media (max-width: 640px) {
  .services-capabilities-intro {
    flex-wrap: wrap;
    gap: 7px 10px;
    margin-top: 0;
    padding-top: 15px;
    letter-spacing: 0.14em;
  }


  .services-capabilities-intro + .services-grid {
    padding-top: 24px;
  }
}
/* Final Services title typography lock */
.service-card h3,
.service-card.has-long-title h3 {
  font-family: Montserrat, var(--font-sans) !important;
  font-size: clamp(13px, 1vw, 15px) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  line-height: 1.35 !important;
}
/* Home opening video: 30% total scale increase */
#landing .landing-video {
  transform: translateY(-10%) scale(1.30) !important;
  transform-origin: center center !important;
}
/* Footer archives single-column alignment */
.footer-links {
  display: block;
}

.footer-links-col {
  align-items: flex-start;
  gap: 15px;
  min-width: 180px;
  margin: 0 !important;
}

.footer-col-title,
.footer-link {
  display: block;
  width: 100%;
  margin-left: 0;
  line-height: 1.4;
  text-align: left;
}

/* Responsive viewport safeguards: phones, tablets, and TV/HDMI displays */
@media (max-width: 768px) {
  header {
    padding: 18px var(--page-gutter);
  }

  header nav {
    gap: 12px;
  }

  .logo-text {
    font-size: 1.1rem;
  }

  .nav-link {
    font-size: 0.72rem;
    letter-spacing: 0.35px;
  }

  .landing-strapline {
    left: 16px;
    width: calc(100% - 112px);
    transform: none !important;
    animation: none;
    opacity: 0.85;
    overflow-wrap: anywhere;
    white-space: normal;
    text-align: left;
  }

  .audio-toggle-btn {
    right: 16px;
    padding: 7px;
  }

  .audio-btn-text {
    display: none;
  }

  .contact-section {
    padding-bottom: 32px;
  }

  .contact-layout {
    gap: 24px;
    margin-top: 32px;
    padding-inline: 0;
  }

  .contact-info,
  .contact-form-container {
    flex-basis: auto;
    width: 100%;
    max-width: none;
  }

  .contact-info {
    gap: 20px;
  }

  .contact-card {
    padding: 22px 20px 14px;
  }

  .drafting-form {
    gap: 22px;
    padding: 42px 20px 24px;
  }

  .form-row {
    flex-direction: column;
    gap: 22px;
  }

  footer {
    padding: 48px 20px 32px;
  }

  .footer-top {
    flex-direction: column;
    gap: 36px;
    margin-bottom: 36px;
  }
}

@media (min-width: 1600px) {
  .contact-layout {
    width: calc(100% - var(--page-gutter-double));
    margin-inline: var(--page-gutter);
  }

  .projects-carousel-section,
  .services-section,
  .contact-section,
  footer {
    font-size: clamp(16px, 0.85vw, 20px);
  }
}

/* Cross-device compatibility layer */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

img,
video,
svg,
canvas {
  max-width: 100%;
}

main,
section,
footer {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.landing-section {
  width: 100%;
  min-height: 100svh;
}

.contact-layout,
.form-row,
.footer-top {
  min-width: 0;
}

.contact-info,
.contact-form-container,
.form-group,
.drafting-form,
.form-input {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1100px) {
  header {
    gap: 24px;
  }

  header nav {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-layout {
    gap: clamp(28px, 5vw, 56px);
  }
}

@media (max-width: 768px) {
  header {
    align-items: flex-start;
  }

  header nav {
    gap: 10px 14px;
  }

  .nav-link {
    white-space: nowrap;
  }

  .landing-section,
  .landing-video-wrapper {
    min-height: 100svh;
  }

  .projects-carousel-section {
    padding-bottom: 48px;
  }

  .carousel-hdr {
    margin-bottom: 28px;
  }

  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 24px 0 0;
    gap: 14px;
  }

  .service-card {
    height: clamp(150px, 34vw, 210px);
  }

  .contact-layout {
    flex-direction: column;
    padding-inline: 0;
  }

  .drafting-form {
    padding: 34px 20px 24px;
  }

  .brief-modal-content,
  .service-detail-card {
    max-width: calc(100vw - 32px);
  }
}

@media (max-width: 520px) {
  header {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  header nav {
    justify-content: space-between;
    width: 100%;
  }

  .nav-link {
    font-size: 0.68rem;
  }

  .landing-strapline {
    bottom: 14%;
  }

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

  .service-card {
    height: clamp(180px, 54vw, 240px);
  }

  .form-row {
    flex-direction: column;
  }

  .service-detail-panel,
  .brief-modal-overlay {
    padding: 16px;
  }

  .service-detail-copy {
    padding: 28px 20px;
  }

  footer {
    padding-inline: var(--page-gutter);
  }
}

@media (max-width: 360px) {
  header nav {
    gap: 8px;
  }

  .nav-link {
    font-size: 0.62rem;
    letter-spacing: 0.2px;
  }

  .audio-toggle-btn {
    right: 12px;
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  .landing-section,
  .landing-video-wrapper {
    min-height: 100svh;
  }

  .landing-strapline,
  .audio-toggle-btn {
    bottom: 8%;
  }
}

/* Touch/mobile devices: remove the desktop custom pointer and crosshair. */
@media (hover: none), (pointer: coarse) {
  *,
  *::before,
  *::after {
    cursor: auto !important;
  }

  .custom-cursor,
  .custom-cursor-ring,
  .custom-cursor-crosshair {
    display: none !important;
    opacity: 0 !important;
  }
}

/* Final homepage vertical-guide lock: navbar logo and section headings share
   the same responsive left edge on every viewport. */
body > header {
  position: absolute;
  top: 0;
  left: 0;
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
}

body.page-transition-out {
  opacity: 0;
  background: #050505;
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.7s ease;
}

#projects-carousel > .carousel-hdr,
#services > .section-hdr,
#contact > .section-hdr {
  width: calc(100% - var(--page-gutter-double));
  margin-left: var(--page-gutter) !important;
  margin-right: var(--page-gutter) !important;
  padding-left: 0 !important;
}