:root {
  /* Core Palette */
  --color-cream: #FAEBDE;
  --color-chocolate: #402D1B;
  --color-red: #D32F24;
  --color-charcoal: #333333;

  /* Typography */
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', Times, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display-edge: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Spacing */
  --space-4: 1rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-48: 12rem;
}

/* Order Mode (Default) */
[data-theme="order"] {
  --bg-primary: var(--color-cream);
  --fg-primary: var(--color-chocolate);
  --bg-secondary: color-mix(in srgb, var(--color-cream) 90%, var(--color-chocolate));
  --fg-secondary: color-mix(in srgb, var(--color-chocolate) 70%, var(--color-cream));
  --accent-primary: var(--color-red);
  
  --font-display: var(--font-serif);
  --font-body: var(--font-sans);
  
  --tracking-display: -0.02em;
  --leading-display: 0.95;
  --text-transform-display: none;
  
  --transition-speed: 800ms;
  --transition-ease: cubic-bezier(0.25, 1, 0.5, 1);
  
  --radius-ui: 0px;

  /* Header Variables */
  --header-padding: 2rem 3rem;
  
  /* Toggle Variables */
  --toggle-bg: var(--bg-primary);
  --toggle-border: rgba(64, 45, 27, 0.1);
  --toggle-radius: 100px;
  --toggle-padding: 6px;
  --toggle-active-bg: var(--color-chocolate);
  --toggle-active-color: var(--color-cream);
  --toggle-shadow: 0 4px 20px rgba(64, 45, 27, 0.08);
}

/* Edge Mode */
[data-theme="edge"] {
  --bg-primary: var(--color-chocolate);
  --fg-primary: var(--color-cream);
  --bg-secondary: var(--color-charcoal);
  --fg-secondary: color-mix(in srgb, var(--color-cream) 70%, var(--color-chocolate));
  --accent-primary: var(--color-red);
  
  --font-display: var(--font-display-edge);
  --font-body: var(--font-sans);
  
  --tracking-display: -0.04em;
  --leading-display: 0.85;
  --text-transform-display: none; /* We use uppercase in HTML */
  
  --transition-speed: 400ms;
  --transition-ease: cubic-bezier(0.7, 0, 0.3, 1);
  
  --radius-ui: 0px;

  /* Header Variables */
  --header-padding: 2rem 3rem;
  
  /* Toggle Variables */
  --toggle-bg: transparent;
  --toggle-border: var(--fg-primary);
  --toggle-radius: 6px;
  --toggle-padding: 4px;
  --toggle-active-bg: var(--fg-primary);
  --toggle-active-color: var(--bg-primary);
  --toggle-shadow: 3px 3px 0px var(--accent-primary);
}

/* Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  html.custom-cursor-enabled,
  html.custom-cursor-enabled * {
    cursor: none !important;
  }
}

body {
  background-color: var(--bg-primary);
  color: var(--fg-primary);
  font-family: var(--font-body);
  transition: background-color var(--transition-speed) var(--transition-ease),
              color var(--transition-speed) var(--transition-ease);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Custom Cursor */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background-color: var(--accent-primary);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  opacity: 0;
  will-change: left, top, width, height, opacity;
  transition: width 0.3s, height 0.3s, background-color 0.3s, opacity 0.2s ease;
  mix-blend-mode: difference;
}

html.custom-cursor-enabled .custom-cursor.is-visible {
  opacity: 1;
}

.custom-cursor.hover {
  width: 48px;
  height: 48px;
  background-color: var(--fg-primary);
}

/* Noise Overlay */
.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  transition: opacity var(--transition-speed);
}

[data-theme="edge"] .noise-overlay {
  opacity: 0.15; /* Heavier grain in edge mode */
  background-image: 
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.2) 2px, rgba(0,0,0,0.2) 4px);
  animation: tv-static 0.2s steps(4) infinite;
  mix-blend-mode: overlay;
}

/* ---------- LOAD-IN PRELOADER ----------
   A full-viewport overlay rendered into the HTML so it covers the page from
   first paint. The centered August wordmark melts into place via the SVG
   turbulence/displacement filter declared in index.html. After the resolve
   + a brief hold, the inline <script> in <head> adds .is-leaving and the
   element fades out and is removed from the DOM, restoring scroll.

   Why not driven by an animation: the resolve-then-hold-then-fade cadence
   is coordinated in JS so it can wait on `document.fonts.ready` before
   triggering the liquify (otherwise the wordmark would melt with a fallback
   face). CSS owns the visual treatment + the fade-out transition.

   Reduced-motion: the displacement filter is bypassed entirely (logo renders
   crisp from frame 1) and the JS uses a shorter hold so the brand moment
   stays brief without distracting motion.
---------------------------------------- */

body.is-loading {
  overflow: hidden;
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: var(--color-cream);
  color: var(--color-chocolate);
  padding: 2rem;
  /* `cursor: none` so the custom cursor doesn't compete with the focal logo,
     and `auto` pointer-events so any clicks during preload are absorbed. */
  cursor: none;
  pointer-events: auto;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}

.preloader.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.preloader-logo {
  width: clamp(280px, 46vw, 520px);
  height: auto;
  display: block;
  overflow: visible;
}

/* These mirror the nav .logo-text-* font treatments, but live on the SVG
   text elements directly so the preloader doesn't depend on the live theme.
   The preloader is always rendered in the default (Refined) brand voice
   because it loads before the user has a chance to switch modes. */
.preloader-logo-main {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 500;
}

.preloader-logo-sub {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.25em;
}

@media (prefers-reduced-motion: reduce) {
  .preloader-logo-warp {
    filter: none;
  }
  .preloader {
    transition-duration: 0.3s;
  }
}

@keyframes tv-static {
  0% { background-position: 0px 0px, 0px 0px; }
  25% { background-position: -100px 50px, 0px 5px; }
  50% { background-position: 100px -50px, 0px 10px; }
  75% { background-position: -50px 100px, 0px 15px; }
  100% { background-position: 50px -100px, 0px 20px; }
}

h1, h2, h3, .font-display {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  transition: font-family 0s, letter-spacing var(--transition-speed), line-height var(--transition-speed);
}

.italic {
  font-style: italic;
  font-weight: 300;
}

.accent {
  color: var(--accent-primary);
}

.accent-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--accent-primary);
}

a {
  color: inherit;
  text-decoration: none;
}

  /* Mode Content Toggling */
.order-content {
  display: block;
}
.edge-content {
  display: none;
}

[data-theme="edge"] .order-content {
  display: none;
}
[data-theme="edge"] .edge-content {
  display: block;
}


.hero-footnote {
  margin-top: var(--space-8);
  font-size: 0.85rem;
  opacity: 0.7;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

[data-theme="order"] .hero-footnote {
  font-family: var(--font-sans);
  font-style: italic;
}

[data-theme="edge"] .hero-footnote {
  font-family: var(--font-display-edge);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--accent-primary);
  opacity: 1;
}

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: var(--header-padding);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  z-index: 100;
  color: var(--fg-primary);
  transition: all var(--transition-speed) var(--transition-ease);
  pointer-events: none; /* Let clicks pass through empty space */
}

/* Refined mode: per-pixel inversion via blend mode */
[data-theme="order"] .site-header:not(.menu-open) {
  mix-blend-mode: difference;
  /* #BABEC3 difference with Cream (#FAEBDE) results in exact Chocolate (#402D1B) */
  color: #BABEC3;
  --fg-primary: #BABEC3;
  --toggle-bg: transparent;
  --toggle-border: rgba(186, 190, 195, 0.3);
  --toggle-active-bg: #BABEC3;
  /* Black difference with Cream results in exact Cream */
  --toggle-active-color: #000;
}

/* Raw mode: JS-driven inversion on portfolio image sections.
   Math note: mix-blend-mode: difference cannot produce Cream over Chocolate
   (would require a color value > 255), so we use a class-based switch instead.
   When over the dark filtered portfolio images, switching to pure white gives
   a clean, distinctly brighter inversion that's legible on both chocolate
   and dark image backgrounds. */
[data-theme="edge"] .site-header.over-light:not(.menu-open) {
  --fg-primary: #ffffff;
  --toggle-bg: rgba(0, 0, 0, 0.25);
  --toggle-border: rgba(255, 255, 255, 0.35);
  --toggle-active-bg: #ffffff;
  --toggle-active-color: var(--color-chocolate);
}

[data-theme="edge"] .site-header.over-light:not(.menu-open) .logo-svg,
[data-theme="edge"] .site-header.over-light:not(.menu-open) .menu-toggle,
[data-theme="edge"] .site-header.over-light:not(.menu-open) .mode-toggle {
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.35));
}

[data-theme="edge"] .site-header.over-light:not(.menu-open) .menu-toggle,
[data-theme="edge"] .site-header.over-light:not(.menu-open) .mode-toggle {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

[data-theme="edge"] .site-header.over-light:not(.menu-open) .menu-toggle {
  background: rgba(0, 0, 0, 0.25);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
}


.logo {
  justify-self: start;
  pointer-events: auto;
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
}

.logo:hover {
  transform: scale(1.02);
}

.logo-svg {
  height: 56px;
  width: auto;
  display: block;
  overflow: visible;
  transition: filter var(--transition-speed) var(--transition-ease);
}

.logo-border {
  transition: all var(--transition-speed) var(--transition-ease);
}

.logo-text-main {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 500;
  transition: all var(--transition-speed) var(--transition-ease);
}

.logo-text-sub {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.25em;
  transition: all var(--transition-speed) var(--transition-ease);
}

[data-theme="edge"] .logo-border {
  stroke: var(--fg-primary);
  stroke-width: 2.5px;
  stroke-dasharray: 6 6; /* Gives it a slightly rougher, technical edge feel */
}

[data-theme="edge"] .logo-text-main {
  font-family: var(--font-display-edge);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

[data-theme="edge"] .logo-text-sub {
  fill: var(--accent-primary);
  font-weight: 700;
  letter-spacing: 0.35em;
}

.logo:hover {
  transform: scale(1.02);
}

.mode-toggle {
  justify-self: center;
  display: flex;
  background: var(--toggle-bg);
  border: 1px solid var(--toggle-border);
  border-radius: var(--toggle-radius);
  padding: var(--toggle-padding);
  box-shadow: var(--toggle-shadow);
  transition: all var(--transition-speed) var(--transition-ease);
  pointer-events: auto;
}

.mode-btn {
  font-family: var(--font-sans);
  background: transparent;
  border: none;
  color: var(--fg-primary);
  opacity: 0.5;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 24px;
  border-radius: var(--toggle-radius);
  transition: all 0.3s;
}

.mode-btn.active {
  color: var(--toggle-active-color);
  background: var(--toggle-active-bg);
  opacity: 1;
}

[data-theme="edge"] .mode-btn {
  opacity: 0.6;
  font-family: var(--font-display-edge);
  font-weight: 600;
}

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  pointer-events: auto;
}

.menu-toggle {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 14px 28px;
  background: var(--toggle-bg);
  color: var(--fg-primary);
  border: 1px solid var(--toggle-border);
  border-radius: var(--toggle-radius);
  box-shadow: var(--toggle-shadow);
  transition: all var(--transition-speed) var(--transition-ease);
  cursor: pointer;
  white-space: nowrap;
  z-index: 101; /* Ensure it stays above the menu */
  position: relative;
}

.menu-toggle:hover {
  background: var(--fg-primary);
  color: var(--bg-primary);
  transform: translateY(-2px);
}

[data-theme="edge"] .menu-toggle {
  background: transparent;
  color: var(--fg-primary);
  border-color: var(--fg-primary);
  font-family: var(--font-display-edge);
  font-weight: 600;
  box-shadow: 3px 3px 0px var(--accent-primary);
  border-radius: 6px;
}

[data-theme="edge"] .menu-toggle:hover {
  background: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0px var(--fg-primary);
}

/* Full Screen Menu */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.site-menu.is-open {
  pointer-events: auto;
}

.site-menu-bg {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.7, 0, 0.3, 1);
  z-index: 1;
}

.site-menu.is-open .site-menu-bg {
  opacity: 0.98;
}

[data-theme="edge"] .site-menu-bg {
  background: var(--bg-primary);
  opacity: 0;
}

[data-theme="edge"] .site-menu.is-open .site-menu-bg {
  opacity: 0.95;
}

.site-menu-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: auto; /* Centers vertically when content is smaller than viewport */
  padding: 120px var(--space-16) var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.site-menu.is-open .site-menu-inner {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.site-menu-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.menu-item {
  overflow: hidden;
}

.menu-link {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, min(8vw, 8vh), 6rem);
  font-weight: 300;
  line-height: 1;
  color: var(--fg-primary);
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  transition: color 0.3s ease, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  transform-origin: left center;
}

.menu-link:hover {
  color: var(--accent-primary);
  transform: translateX(20px);
}

[data-theme="edge"] .menu-link {
  font-family: var(--font-display-edge);
  font-weight: 700;
  letter-spacing: -0.02em;
}

[data-theme="edge"] .menu-link:hover {
  transform: translateX(30px) skewX(-10deg);
}

.menu-num {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--fg-primary) 40%, transparent);
}

[data-theme="edge"] .menu-num {
  font-family: var(--font-display-edge);
  font-size: 1.5rem;
  color: var(--accent-primary);
}

.site-menu-footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid color-mix(in srgb, var(--fg-primary) 20%, transparent);
  padding-top: var(--space-16);
}

.menu-contact, .menu-social {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.social-links {
  display: flex;
  gap: var(--space-8);
}

.hover-line {
  position: relative;
  display: inline-block;
}

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

.hover-line:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Hero Section */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-32) var(--space-16) var(--space-16);
  max-width: 1800px;
  margin: 0 auto;
  position: relative;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  opacity: 0.6;
  margin-bottom: var(--space-8);
  display: block;
}

[data-theme="edge"] .eyebrow {
  color: var(--accent-primary);
  opacity: 1;
}

.hero-headline {
  font-size: clamp(3.5rem, 7.5vw, 7.5rem);
  margin-bottom: var(--space-8);
  max-width: 1400px;
  position: relative;
  z-index: 2;
  font-weight: 300;
}

[data-theme="order"] .hero-headline {
  letter-spacing: -0.02em; /* Slightly tighter for massive serif */
}

/* Word Rotator Animation */
.word-rotator {
  display: inline-grid;
  vertical-align: baseline;
  overflow: hidden;
  color: var(--accent-primary);
  /* Add padding to prevent clipping of italic ascenders/descenders */
  padding-top: 0.1em;
  padding-bottom: 0.15em;
  margin-top: -0.1em;
  margin-bottom: -0.15em;
  text-align: center; /* Keeps the word centered if there are tiny width differences */
}

.word-rotator > span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(100%);
  animation: rotate-word 8s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

.word-rotator > span:nth-child(1) { animation-delay: 0s; }
.word-rotator > span:nth-child(2) { animation-delay: 2s; }
.word-rotator > span:nth-child(3) { animation-delay: 4s; }
.word-rotator > span:nth-child(4) { animation-delay: 6s; }

@keyframes rotate-word {
  0% { opacity: 0; transform: translateY(100%); }
  6.25% { opacity: 1; transform: translateY(0); }
  25% { opacity: 1; transform: translateY(0); }
  31.25% { opacity: 0; transform: translateY(-100%); }
  100% { opacity: 0; transform: translateY(-100%); }
}

.hero-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: flex-start;
  margin-top: var(--space-16);
  position: relative;
  z-index: 2;
}

.hero-subhead {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 400;
  max-width: 40ch;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--fg-primary) 80%, transparent);
}

[data-theme="edge"] .hero-subhead {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  justify-content: flex-start;
}

.btn-primary {
  position: relative;
  padding: 20px 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--fg-primary);
}

.btn-text {
  font-family: var(--font-sans);
  position: relative;
  z-index: 2;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  color: var(--fg-primary);
  transition: color 0.3s;
}

.btn-bg {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--fg-primary);
  transition: top 0.4s cubic-bezier(0.7, 0, 0.3, 1);
  z-index: 1;
}

.btn-primary:hover .btn-bg {
  top: 0;
}

.btn-primary:hover .btn-text {
  color: var(--bg-primary);
}

[data-theme="edge"] .btn-primary {
  border-color: var(--accent-primary);
  border-width: 2px;
  border-radius: 0;
  box-shadow: 6px 6px 0px var(--accent-primary);
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
}

[data-theme="edge"] .btn-primary:hover {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0px var(--accent-primary);
}

[data-theme="edge"] .btn-text {
  color: var(--accent-primary);
  font-weight: 700;
}

[data-theme="edge"] .btn-bg {
  display: none; /* Remove smooth fill effect for raw mode */
}

[data-theme="edge"] .btn-primary:hover .btn-text {
  color: var(--accent-primary);
}

.btn-secondary {
  font-family: var(--font-sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-secondary::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transition: transform 0.3s ease;
  transform-origin: right;
}

.btn-secondary:hover::after {
  transform: scaleX(0);
  transform-origin: left;
}

/* Hero Visual */
.hero-visual {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.1;
  transition: opacity var(--transition-speed);
}

[data-theme="edge"] .hero-visual {
  opacity: 0.05;
}

.visual-container {
  position: relative;
  width: 80%;
  aspect-ratio: 1;
}

.visual-circle {
  position: absolute;
  inset: 0;
  border: 1px solid var(--fg-primary);
  border-radius: 50%;
  transition: all var(--transition-speed);
}

[data-theme="edge"] .visual-circle {
  border-radius: 0;
  border-color: var(--accent-primary);
  transform: rotate(45deg);
}

.visual-square {
  position: absolute;
  inset: 10%;
  border: 1px solid var(--fg-primary);
  transition: all var(--transition-speed);
}

[data-theme="edge"] .visual-square {
  border-color: var(--accent-primary);
  transform: rotate(-15deg);
}

.visual-line {
  position: absolute;
  top: 50%;
  left: -20%;
  right: -20%;
  height: 1px;
  background: var(--fg-primary);
  transform: rotate(-45deg);
  transition: all var(--transition-speed);
}

[data-theme="edge"] .visual-line {
  background: var(--accent-primary);
  transform: rotate(0deg);
}

/* ─────────────────────────────────────────────────────────────────────
   OPERATIONAL DIAGNOSTIC PANEL
   Editorial 4-up spec-sheet sitting just below the hero. Each card
   carries a custom SVG glyph that *visualises* the symptom itself.
   Continuous ambient motion in the glyphs; staggered scan-reveal on
   entry; hairline grid that scales from 4-up → 2x2 → 1-stack.
   ───────────────────────────────────────────────────────────────────── */

.diagnostic {
  position: relative;
  padding: clamp(3rem, 6vw, 6rem) 0 clamp(3rem, 5vw, 5rem);
  border-top: 1px solid color-mix(in srgb, var(--fg-primary) 14%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--fg-primary) 14%, transparent);
  overflow: hidden;
}

.diagnostic-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 4rem);
}

/* Header: eyebrow row + headline */
.diagnostic-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-bottom: clamp(2rem, 4.5vw, 4rem);
}

.diagnostic-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--fg-primary) 14%, transparent);
}

.diagnostic-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  opacity: 0.6;
}

[data-theme="edge"] .diagnostic-eyebrow {
  font-family: var(--font-display-edge);
  color: var(--accent-primary);
  opacity: 1;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
}

.diagnostic-range {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: color-mix(in srgb, var(--fg-primary) 50%, transparent);
  font-variant-numeric: tabular-nums;
}

[data-theme="edge"] .diagnostic-range {
  font-family: var(--font-display-edge);
  color: var(--accent-primary);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
}

.diagnostic-headline {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-weight: 300;
  color: var(--fg-primary);
  max-width: 18ch;
}

[data-theme="edge"] .diagnostic-headline {
  font-family: var(--font-display-edge);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: clamp(2.25rem, 5.5vw, 5rem);
  line-height: 0.92;
}

/* The board: shared-border grid (spec-sheet feel) */
.diagnostic-board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid color-mix(in srgb, var(--fg-primary) 16%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--fg-primary) 16%, transparent);
}

/* Individual card */
.diag-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  padding: clamp(1.5rem, 2.4vw, 2.25rem) clamp(1.25rem, 2vw, 1.875rem);
  min-height: clamp(360px, 32vw, 420px);
  border-right: 1px solid color-mix(in srgb, var(--fg-primary) 16%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--fg-primary) 16%, transparent);
  background: transparent;
  color: var(--fg-primary);
  /* Stagger reveal — opacity/transform handled in .scroll-reveal cascade below */
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s cubic-bezier(0.25, 1, 0.5, 1) calc(0.18s + var(--diag-i, 0) * 0.12s),
    transform 0.9s cubic-bezier(0.25, 1, 0.5, 1) calc(0.18s + var(--diag-i, 0) * 0.12s),
    background-color 0.4s ease,
    color 0.4s ease;
}

.diagnostic.scroll-reveal.visible .diag-card {
  opacity: 1;
  transform: translateY(0);
}

/* Card top row — number + status pulse */
.diag-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.diag-card-num {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: color-mix(in srgb, var(--fg-primary) 55%, transparent);
  font-variant-numeric: tabular-nums;
}

[data-theme="edge"] .diag-card-num {
  font-family: var(--font-display-edge);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-primary);
  letter-spacing: 0.05em;
}

/* Status pulse (ambient) — staggered across cards */
.diag-card-pulse {
  position: relative;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

.diag-pulse-dot,
.diag-pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.diag-pulse-dot {
  background: var(--accent-primary);
  transform: scale(0.6);
}

.diag-pulse-ring {
  border: 1px solid var(--accent-primary);
  opacity: 0;
}

/* Pulse-ring is gated to engagement so the card stays still at rest and
   only signals "live" when hovered (or scrolled into the central focus
   zone on touch — see .is-active hook below). */
.diag-card:is(:hover, :focus-within, .is-active) .diag-pulse-ring {
  animation: diag-pulse 2.6s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  animation-delay: calc(var(--diag-i, 0) * 0.45s);
}

@keyframes diag-pulse {
  0%   { transform: scale(0.6); opacity: 0.85; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* Card glyph — the visual centrepiece. Glyph dominates the card; phrase
   reads as caption beneath it. */
.diag-card-glyph {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-primary);
  transition: color 0.5s ease, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.diag-glyph {
  width: clamp(240px, 100%, 380px);
  height: auto;
  display: block;
  overflow: visible;
  /* Draw-in stroke effect on reveal */
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.4, 0.0, 0.2, 1) calc(0.4s + var(--diag-i, 0) * 0.12s);
}

.diagnostic.scroll-reveal.visible .diag-glyph {
  stroke-dashoffset: 0;
}

/* Card base — phrase + tag + rule */
.diag-card-base {
  display: flex;
  flex-direction: column;
  gap: clamp(0.875rem, 1.4vw, 1.25rem);
  position: relative;
}

.diag-card-phrase {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.95vw, 2.05rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 300;
  color: var(--fg-primary);
  max-width: 14ch;
}

[data-theme="edge"] .diag-card-phrase {
  font-family: var(--font-display-edge);
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: clamp(1.4rem, 1.85vw, 1.95rem);
  line-height: 1;
}

.diag-card-tag {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: color-mix(in srgb, var(--fg-primary) 45%, transparent);
  font-variant-numeric: tabular-nums;
}

[data-theme="edge"] .diag-card-tag {
  font-family: var(--font-display-edge);
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  color: color-mix(in srgb, var(--fg-primary) 55%, transparent);
}

/* The thin rule under the phrase — animates in on hover */
.diag-card-rule {
  display: block;
  height: 1px;
  width: 36px;
  background: var(--accent-primary);
  transform: scaleX(0.6);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.diag-card:hover .diag-card-rule {
  transform: scaleX(1);
  width: 72px;
}

/* Card engagement: subtle lift, glyph turns red.
   The background tint is reserved for hover-capable pointers (a true
   "I'm pointing at this" affordance). The glyph color shift extends
   to the touch-only `.is-active` state so the diagram comes alive in
   sync with its animations as the card scrolls into focus. */
@media (hover: hover) and (pointer: fine) {
  .diag-card:hover {
    background: color-mix(in srgb, var(--fg-primary) 4%, transparent);
  }
  [data-theme="edge"] .diag-card:hover {
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
  }
}

.diag-card:is(:hover, :focus-within, .is-active) .diag-card-glyph {
  color: var(--accent-primary);
  transform: translateY(-2px);
}

/* Corner brackets — only render in raw mode */
.diag-card-corners {
  position: absolute;
  inset: 8px;
  pointer-events: none;
  display: none;
  /* 8 stacked gradients = 4 corner brackets, no SVG needed */
  background:
    /* top-left */
    linear-gradient(to right, var(--accent-primary) 0 12px, transparent 12px) top    left  / 12px 1px no-repeat,
    linear-gradient(to bottom, var(--accent-primary) 0 12px, transparent 12px) top    left  / 1px 12px no-repeat,
    /* top-right */
    linear-gradient(to left,  var(--accent-primary) 0 12px, transparent 12px) top    right / 12px 1px no-repeat,
    linear-gradient(to bottom, var(--accent-primary) 0 12px, transparent 12px) top    right / 1px 12px no-repeat,
    /* bottom-left */
    linear-gradient(to right, var(--accent-primary) 0 12px, transparent 12px) bottom left  / 12px 1px no-repeat,
    linear-gradient(to top,   var(--accent-primary) 0 12px, transparent 12px) bottom left  / 1px 12px no-repeat,
    /* bottom-right */
    linear-gradient(to left,  var(--accent-primary) 0 12px, transparent 12px) bottom right / 12px 1px no-repeat,
    linear-gradient(to top,   var(--accent-primary) 0 12px, transparent 12px) bottom right / 1px 12px no-repeat;
  transition: inset 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

[data-theme="edge"] .diag-card-corners {
  display: block;
}

[data-theme="edge"] .diag-card:is(:hover, :focus-within, .is-active) .diag-card-corners {
  inset: 4px;
}

/* Section foot: the editorial closing line */
.diagnostic-foot {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
  padding-top: clamp(1rem, 2vw, 1.5rem);
}

.diagnostic-foot-line {
  flex: 0 0 auto;
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  background: var(--accent-primary);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.2s;
}

.diagnostic.scroll-reveal.visible .diagnostic-foot-line {
  transform: scaleX(1);
}

.diagnostic-foot-text {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--fg-primary) 60%, transparent);
  font-style: italic;
}

[data-theme="edge"] .diagnostic-foot-text {
  font-family: var(--font-display-edge);
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  color: var(--fg-primary);
}

/* ─── Per-glyph ambient motion ─────────────────────────────────────── */

/* 01 — Fragmented workflows ─────────────────────────────────────────
   Three workflow lanes (each a row of 3 step nodes wired by directional
   arrows) connected by cross-lane handoffs that are visibly SEVERED at
   the rupture. Inside each lane, packets flow continuously through all
   three steps. Cross-lane packets descend toward the rupture and DISSOLVE
   into the break — the literal moment of a fragmented handoff. */

/* Step nodes — outlined "task cards" */
.diag-glyph-1 .step {
  fill: none;
  stroke-width: 1.2;
}

/* Step interior mark — a tiny inner line suggesting "task content" */
.diag-glyph-1 .step-mark {
  stroke-width: 0.9;
  stroke-opacity: 0.55;
}

/* Lane drift — each lane group slides subtly in X, opposite phases.
   Gated to engagement: the diagram is a still circuit at rest and
   wakes up the moment the card is hovered / focused / centered. */
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-1 .lane-a { animation: diag-lane-drift 8s ease-in-out  0s    infinite; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-1 .lane-b { animation: diag-lane-drift 8s ease-in-out -2.7s  infinite reverse; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-1 .lane-c { animation: diag-lane-drift 8s ease-in-out -5.4s  infinite; }

@keyframes diag-lane-drift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-1.4px); }
}

/* Cross-handoff line — visibly attempting to connect lanes, but severed */
.diag-glyph-1 .cross-line {
  stroke-dasharray: 1.4 1.8;
  stroke-dashoffset: 0;
  stroke-width: 0.9;
  stroke-opacity: 0.55;
}

/* Rupture mark — clean X mark at every cross-lane break.
   Two crossing lines that read at-a-glance as a "severed" handoff.
   Visible at rest; the periodic punch amplification fires on engagement. */
.diag-glyph-1 .rupture-mark {
  fill: none;
  stroke: var(--accent-primary);
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  stroke-width: 1.4;
  stroke-opacity: 0.9;
  transition: stroke-width 0.45s ease, stroke-opacity 0.45s ease;
}
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-1 .cross-1 .rupture-mark { animation: diag-rupture-punch 4.4s ease-out  0s   infinite; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-1 .cross-2 .rupture-mark { animation: diag-rupture-punch 4.4s ease-out -2.2s infinite; }

@keyframes diag-rupture-punch {
  0%, 70%   { stroke-width: 1.4; stroke-opacity: 0.9; }
  78%       { stroke-width: 2.2; stroke-opacity: 1;   }
  86%       { stroke-width: 1.4; stroke-opacity: 0.9; }
  100%      { stroke-width: 1.4; stroke-opacity: 0.9; }
}

/* In-lane packets — fill-only circles that flow continuously through
   all three step nodes of their lane, fade out past the last step,
   then loop. Each lane is staggered so the panel always has motion. */
.diag-glyph-1 .lane-packet {
  fill: currentColor;
  stroke: none;
  opacity: 0;
}
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-1 .lane-a .lane-packet { animation: diag-lane-flow 5.5s linear  0s    infinite; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-1 .lane-b .lane-packet { animation: diag-lane-flow 5.5s linear -1.8s  infinite; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-1 .lane-c .lane-packet { animation: diag-lane-flow 5.5s linear -3.6s  infinite; }

@keyframes diag-lane-flow {
  0%   { transform: translateX(0);    opacity: 0; }
  6%   { opacity: 0.95; }
  88%  { transform: translateX(84px); opacity: 0.95; }
  98%  { transform: translateX(84px); opacity: 0; }
  100% { transform: translateX(84px); opacity: 0; }
}

/* Cross-handoff packets — descend from the source step, hit the rupture,
   and DISSOLVE. This is the literal "work lost between teams" moment. */
.diag-glyph-1 .cross-packet {
  fill: currentColor;
  stroke: none;
  opacity: 0;
}
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-1 .cross-1 .cross-packet { animation: diag-cross-fall 4.4s cubic-bezier(0.45, 0, 0.55, 1)  0s    infinite; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-1 .cross-2 .cross-packet { animation: diag-cross-fall 4.4s cubic-bezier(0.45, 0, 0.55, 1) -2.2s  infinite; }

@keyframes diag-cross-fall {
  0%   { transform: translateY(0);   opacity: 0; }
  10%  { opacity: 0.95; }
  72%  { transform: translateY(9px); opacity: 0.95; }
  82%  { transform: translateY(9px); opacity: 0; }
  100% { transform: translateY(9px); opacity: 0; }
}

/* 02 — Manual operational drag ──────────────────────────────────────
   A faint IDEAL throughput line at the top with a fast packet zipping
   along it, against a sagging ACTUAL pipeline below being pulled down
   by 4 manual touchpoints. The slow packet stutters through the pipeline,
   pausing at every touchpoint — visceral speed differential. */

/* Ideal throughput: dashed straight path — clearly visible at rest so
   the contrast with the sagging actual pipeline reads at-a-glance. */
.diag-glyph-2 .ideal-line,
.diag-glyph-2 .ideal-arrow {
  stroke-dasharray: 1.5 2;
  stroke-dashoffset: 0;
  stroke-width: 1;
  stroke-opacity: 0.65;
  transition: stroke-opacity 0.45s ease;
}
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-2 .ideal-line,
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-2 .ideal-arrow {
  animation: diag-ideal-breathe 6.5s ease-in-out infinite;
}

@keyframes diag-ideal-breathe {
  0%, 100% { stroke-opacity: 0.5; }
  50%      { stroke-opacity: 0.85; }
}

/* Pipeline arrow inherits global draw-in; nothing extra needed */

/* Manual touchpoints — weights bob slowly on Y as if "in use".
   Static at rest; staggered bob fires only on engagement. */
.diag-glyph-2 .touchpoint .weight {
  transform-origin: center;
}
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-2 .touchpoint .weight {
  animation: diag-weight-bob 4.4s ease-in-out infinite;
}
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-2 .touchpoint-1 .weight { animation-delay: -0.5s; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-2 .touchpoint-2 .weight { animation-delay: -1.5s; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-2 .touchpoint-3 .weight { animation-delay: -2.5s; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-2 .touchpoint-4 .weight { animation-delay: -3.5s; }

@keyframes diag-weight-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(1.4px); }
}

/* Fast IDEAL packet — small, fast, repeats multiple times per slow cycle */
.diag-glyph-2 .ideal-packet {
  fill: currentColor;
  stroke: none;
  opacity: 0;
}
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-2 .ideal-packet {
  animation: diag-ideal-flow 1.9s linear infinite;
}

@keyframes diag-ideal-flow {
  0%   { cx: 6;  cy: 16; opacity: 0; }
  10%  { opacity: 0.95; }
  85%  { cx: 91; cy: 16; opacity: 0.95; }
  100% { cx: 91; cy: 16; opacity: 0; }
}

/* Slow ACTUAL packet — animates cx & cy along curve sample points,
   pausing at each touchpoint to feel the manual delay. */
.diag-glyph-2 .actual-packet {
  fill: currentColor;
  stroke: none;
  opacity: 0;
}
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-2 .actual-packet {
  animation: diag-pipeline-stutter 7.5s ease-in-out infinite;
}

@keyframes diag-pipeline-stutter {
  0%   { cx: 6;  cy: 32; opacity: 0; }
  6%   { opacity: 1; }
  16%  { cx: 24; cy: 44; opacity: 1; }
  20%  { cx: 24; cy: 44; opacity: 1; }   /* pause at touchpoint 1 */
  35%  { cx: 42; cy: 54; opacity: 1; }
  40%  { cx: 42; cy: 54; opacity: 1; }   /* pause at touchpoint 2 */
  55%  { cx: 58; cy: 54; opacity: 1; }
  60%  { cx: 58; cy: 54; opacity: 1; }   /* pause at touchpoint 3 */
  75%  { cx: 76; cy: 44; opacity: 1; }
  80%  { cx: 76; cy: 44; opacity: 1; }   /* pause at touchpoint 4 */
  94%  { cx: 94; cy: 32; opacity: 1; }
  100% { cx: 94; cy: 32; opacity: 0; }
}

/* 03 — Disconnected tools ───────────────────────────────────────────
   Four distinct tool shapes (square, circle, triangle, diamond) wired
   via dashed perimeter links to a missing integration HUB at center.
   Packets travel along each link but FADE OUT before reaching their
   destination — every integration call dies in transit. */

/* Missing hub — dashed circle with an X mark at the centre, marking the
   integration layer that should exist but doesn't. Visible at rest so the
   diagram immediately reads "void at the centre." */
.diag-glyph-3 .missing-hub {
  stroke: var(--accent-primary);
  stroke-dasharray: 1.6 2.2;
  stroke-dashoffset: 0;
  stroke-width: 1;
  stroke-opacity: 0.55;
  transition: stroke-opacity 0.45s ease;
}
.diag-glyph-3 .missing-mark {
  stroke: var(--accent-primary);
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  stroke-width: 1.4;
  stroke-opacity: 0.7;
  transition: stroke-opacity 0.45s ease;
}
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-3 .missing-hub,
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-3 .missing-mark {
  animation: diag-missing-breathe 5.5s ease-in-out infinite;
}

@keyframes diag-missing-breathe {
  0%, 100% { stroke-opacity: 0.45; }
  50%      { stroke-opacity: 0.85; }
}

/* Tool inner-detail marks — subtle, just enough to differentiate */
.diag-glyph-3 .tool-mark {
  stroke-width: 0.9;
  stroke-opacity: 0.55;
  fill: none;
}

/* Dashed links — visible at rest as static dashed connections; the
   continuous flow only fires on engagement ("always trying" feel). */
.diag-glyph-3 .link {
  stroke-dasharray: 2 3;
  stroke-dashoffset: 0;
  stroke-width: 1;
  stroke-opacity: 0.7;
}
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-3 .link {
  animation: diag-link-flow 3.2s linear infinite;
}
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-3 .link-a { animation-delay:  0s; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-3 .link-b { animation-delay: -0.8s; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-3 .link-c { animation-delay: -1.6s; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-3 .link-d { animation-delay: -2.4s; }

@keyframes diag-link-flow {
  to { stroke-dashoffset: -25; }
}

/* Link packets — travel along each link but fade out at ~70% before arriving.
   Each link has a different axis/direction so the keyframes are link-specific. */
.diag-glyph-3 .link-packet {
  fill: currentColor;
  stroke: none;
  opacity: 0;
}
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-3 .packet-a { animation: diag-link-pa 4s ease-in  0s    infinite; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-3 .packet-b { animation: diag-link-pb 4s ease-in -1s    infinite; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-3 .packet-c { animation: diag-link-pc 4s ease-in -2s    infinite; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-3 .packet-d { animation: diag-link-pd 4s ease-in -3s    infinite; }

/* All four packets now radiate from corner tools toward the missing hub
   at the centre, fading out before they arrive — every integration call
   dies in transit. */

/* Link A: top-left → centre — (22,20) toward (40,35). 70% point ≈ (35,30) */
@keyframes diag-link-pa {
  0%   { cx: 22; cy: 20; opacity: 0; }
  10%  { opacity: 0.95; }
  60%  { cx: 35; cy: 30; opacity: 0.95; }
  72%  { cx: 35; cy: 30; opacity: 0; }
  100% { cx: 35; cy: 30; opacity: 0; }
}
/* Link B: top-right → centre — (78,20) toward (60,35). 70% point ≈ (65,30) */
@keyframes diag-link-pb {
  0%   { cx: 78; cy: 20; opacity: 0; }
  10%  { opacity: 0.95; }
  60%  { cx: 65; cy: 30; opacity: 0.95; }
  72%  { cx: 65; cy: 30; opacity: 0; }
  100% { cx: 65; cy: 30; opacity: 0; }
}
/* Link C: bottom-left → centre — (22,60) toward (40,45). 70% point ≈ (35,50) */
@keyframes diag-link-pc {
  0%   { cx: 22; cy: 60; opacity: 0; }
  10%  { opacity: 0.95; }
  60%  { cx: 35; cy: 50; opacity: 0.95; }
  72%  { cx: 35; cy: 50; opacity: 0; }
  100% { cx: 35; cy: 50; opacity: 0; }
}
/* Link D: bottom-right → centre — (78,60) toward (60,45). 70% point ≈ (65,50) */
@keyframes diag-link-pd {
  0%   { cx: 78; cy: 60; opacity: 0; }
  10%  { opacity: 0.95; }
  60%  { cx: 65; cy: 50; opacity: 0.95; }
  72%  { cx: 65; cy: 50; opacity: 0; }
  100% { cx: 65; cy: 50; opacity: 0; }
}

/* 04 — Decisions made without data ──────────────────────────────────
   A confident DECISION at the centre (filled diamond + forward arrow).
   A slow rotating VISIBILITY RADIUS sweeps the small slice of data the
   decision can actually see. Outside it, scattered SIGNAL DOTS pulse
   alive and emit expanding RING PINGS like sonar — most rings die well
   before reaching the visibility ring. A few SIGNALS fire DATA PROBES
   that travel toward the decision and dissolve before arriving. The
   field is full of motion and broadcast; almost none of it is seen. */

/* Decision marker — confident, filled, committing forward. Visible at
   rest at a slightly muted opacity; the breathing pulse only fires
   when the card is engaged. */
.diag-glyph-4 .decision-shape {
  stroke: none;
  fill: currentColor;
  opacity: 0.85;
  transition: opacity 0.45s ease;
}
.diag-glyph-4 .decision-arrow,
.diag-glyph-4 .decision-arrowhead {
  stroke-width: 1.2;
  opacity: 0.85;
  transition: opacity 0.45s ease;
}
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .decision-shape,
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .decision-arrow,
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .decision-arrowhead {
  animation: diag-decision-pulse 4s ease-in-out infinite;
}

@keyframes diag-decision-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* Visibility radius — clearly visible at rest as the boundary between
   "what the decision can see" and "everything else." */
.diag-glyph-4 .visibility-radius {
  fill: none;
  stroke: var(--accent-primary);
  stroke-dasharray: 1.8 2.4;
  stroke-width: 1;
  stroke-opacity: 0.7;
  transition: stroke-opacity 0.45s ease;
}
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .visibility-radius {
  animation:
    diag-radius-sweep   8s linear infinite,
    diag-radius-breathe 5.5s ease-in-out infinite;
}

@keyframes diag-radius-sweep {
  0%   { stroke-dashoffset: 0;   }
  100% { stroke-dashoffset: -42; }
}
@keyframes diag-radius-breathe {
  0%, 100% { stroke-opacity: 0.55; }
  50%      { stroke-opacity: 0.85; }
}

/* SIGNAL DOTS — outer signals sit faded (unseen by the decision).
   Inner signals, inside the visibility radius, render bright and red
   (caught data). */
.diag-glyph-4 .signal {
  fill: currentColor;
  stroke: none;
  opacity: 0.32;
  transition: opacity 0.45s ease;
}
.diag-glyph-4 .signal-inner {
  fill: var(--accent-primary);
  opacity: 1;
}

.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .signal {
  animation: diag-signal-pulse 3.6s ease-in-out infinite;
}
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .signal-inner {
  animation: diag-signal-inner-pulse 3.6s ease-in-out infinite;
}
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .signal-1  { animation-delay:  0s;    }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .signal-2  { animation-delay: -0.4s;  }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .signal-3  { animation-delay: -0.8s;  }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .signal-4  { animation-delay: -1.2s;  }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .signal-5  { animation-delay: -1.6s;  }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .signal-6  { animation-delay: -2.0s;  }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .signal-7  { animation-delay: -2.4s;  }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .signal-8  { animation-delay: -2.8s;  }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .signal-9  { animation-delay: -3.2s;  }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .signal-10 { animation-delay: -0.2s;  }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .signal-11 { animation-delay: -1.0s;  }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .signal-12 { animation-delay: -1.5s;  }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .signal-13 { animation-delay: -2.7s;  }

@keyframes diag-signal-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.85; }
}

@keyframes diag-signal-inner-pulse {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

/* SIGNAL RING PINGS — each ring expands outward from its signal and fades.
   Invisible at rest; the rolling ping fires only on engagement. */
.diag-glyph-4 .signal-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.9;
  opacity: 0;
}
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .signal-ring {
  animation: diag-signal-ping 3.2s ease-out infinite;
}
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .ring-1  { animation-delay:  0s;    }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .ring-2  { animation-delay: -0.32s; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .ring-3  { animation-delay: -0.64s; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .ring-4  { animation-delay: -0.96s; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .ring-5  { animation-delay: -1.28s; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .ring-6  { animation-delay: -1.60s; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .ring-7  { animation-delay: -1.92s; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .ring-8  { animation-delay: -2.24s; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .ring-9  { animation-delay: -2.56s; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .ring-10 { animation-delay: -2.88s; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .ring-11 { animation-delay: -1.16s; }

@keyframes diag-signal-ping {
  0%   { r: 2;   opacity: 0.55; stroke-width: 0.9; }
  60%  { r: 5;   opacity: 0.18; stroke-width: 0.5; }
  100% { r: 6.5; opacity: 0;    stroke-width: 0.4; }
}

/* DATA PROBES — small packets fired from a few outer signals toward
   the decision centre at (42, 40). Each fades out before reaching the
   visibility radius — broadcast that never gets received. */
.diag-glyph-4 .data-probe {
  fill: currentColor;
  stroke: none;
  opacity: 0;
}
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .probe-a { animation: diag-probe-a 5s ease-in  0s    infinite; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .probe-b { animation: diag-probe-b 5s ease-in -1.25s infinite; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .probe-c { animation: diag-probe-c 5s ease-in -2.5s  infinite; }
.diag-card:is(:hover, :focus-within, .is-active) .diag-glyph-4 .probe-d { animation: diag-probe-d 5s ease-in -3.75s infinite; }

/* Probe A: from (10, 12) toward (42, 40). 70% point ≈ (32, 32) */
@keyframes diag-probe-a {
  0%   { cx: 10;   cy: 12;   opacity: 0; }
  10%  { opacity: 0.8; }
  60%  { cx: 32;   cy: 32;   opacity: 0.7; }
  72%  { cx: 32;   cy: 32;   opacity: 0; }
  100% { cx: 32;   cy: 32;   opacity: 0; }
}
/* Probe B: from (92, 28) toward (42, 40). 70% point ≈ (57, 36) */
@keyframes diag-probe-b {
  0%   { cx: 92;   cy: 28;   opacity: 0; }
  10%  { opacity: 0.8; }
  60%  { cx: 57;   cy: 36;   opacity: 0.7; }
  72%  { cx: 57;   cy: 36;   opacity: 0; }
  100% { cx: 57;   cy: 36;   opacity: 0; }
}
/* Probe C: from (20, 68) toward (42, 40). 70% point ≈ (35, 48) */
@keyframes diag-probe-c {
  0%   { cx: 20;   cy: 68;   opacity: 0; }
  10%  { opacity: 0.8; }
  60%  { cx: 35;   cy: 48;   opacity: 0.7; }
  72%  { cx: 35;   cy: 48;   opacity: 0; }
  100% { cx: 35;   cy: 48;   opacity: 0; }
}
/* Probe D: from (78, 68) toward (42, 40). 70% point ≈ (53, 48) */
@keyframes diag-probe-d {
  0%   { cx: 78;   cy: 68;   opacity: 0; }
  10%  { opacity: 0.8; }
  60%  { cx: 53;   cy: 48;   opacity: 0.7; }
  72%  { cx: 53;   cy: 48;   opacity: 0; }
  100% { cx: 53;   cy: 48;   opacity: 0; }
}

/* Reduced motion: silence the ambient loops, keep entry transitions */
@media (prefers-reduced-motion: reduce) {
  .diag-glyph-1 .lane-a,
  .diag-glyph-1 .lane-b,
  .diag-glyph-1 .lane-c,
  .diag-glyph-1 .lane-packet,
  .diag-glyph-1 .cross-packet,
  .diag-glyph-1 .rupture-mark,
  .diag-glyph-2 .ideal-line,
  .diag-glyph-2 .ideal-arrow,
  .diag-glyph-2 .ideal-packet,
  .diag-glyph-2 .actual-packet,
  .diag-glyph-2 .weight,
  .diag-glyph-3 .missing-hub,
  .diag-glyph-3 .missing-mark,
  .diag-glyph-3 .link,
  .diag-glyph-3 .link-packet,
  .diag-glyph-4 .decision-shape,
  .diag-glyph-4 .decision-arrow,
  .diag-glyph-4 .decision-arrowhead,
  .diag-glyph-4 .visibility-radius,
  .diag-glyph-4 .signal,
  .diag-glyph-4 .signal-inner,
  .diag-glyph-4 .signal-ring,
  .diag-glyph-4 .data-probe,
  .diag-pulse-ring {
    animation: none !important;
  }
  /* Static fallback states — every diagram still reads clearly without motion */
  .diag-glyph-1 .lane-packet      { opacity: 0; }
  .diag-glyph-1 .cross-packet     { opacity: 0; }
  .diag-glyph-1 .rupture-mark     { stroke-opacity: 0.85; }
  .diag-glyph-2 .ideal-line,
  .diag-glyph-2 .ideal-arrow      { stroke-opacity: 0.4; }
  .diag-glyph-2 .ideal-packet,
  .diag-glyph-2 .actual-packet    { opacity: 0; }
  .diag-glyph-3 .missing-hub,
  .diag-glyph-3 .missing-mark     { stroke-opacity: 0.4; }
  .diag-glyph-3 .link-packet      { opacity: 0; }
  .diag-glyph-4 .visibility-radius{ stroke-opacity: 0.5; }
  .diag-glyph-4 .signal           { opacity: 0.55; }
  .diag-glyph-4 .signal-inner     { opacity: 0.9; }
  .diag-glyph-4 .signal-ring      { opacity: 0; }
  .diag-glyph-4 .data-probe       { opacity: 0; }
}

/* Marquee — kept available for any other consumer */
.marquee-container {
  padding: var(--space-4) 0;
  background: var(--accent-primary);
  color: white;
  max-width: none;
}

.marquee {
  display: flex;
  white-space: nowrap;
  animation: scroll 20s linear infinite;
  font-family: var(--font-display-edge);
  font-size: 2rem;
  letter-spacing: -0.02em;
}

.marquee span {
  padding-right: 2rem;
}

.accent-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: white;
  margin: 0 1rem;
  transform: translateY(-4px);
}

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

/* Sections Base */
.problem, .capabilities, .proof, .apply-cta {
  padding: var(--space-48) var(--space-16);
  max-width: 1600px;
  margin: 0 auto;
}

.section-number {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  opacity: 0.4;
  margin-bottom: var(--space-4);
}

[data-theme="edge"] .section-number {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--accent-primary);
  opacity: 1;
}

.section-title {
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-16);
  font-weight: 300;
}

.body-large {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--fg-primary) 85%, transparent);
  max-width: 35ch;
}

[data-theme="edge"] .body-large {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
}

/* ---------- THESIS — REFINED EDITORIAL COMPOSITION ----------
   Two-zone asymmetric composition:

     +-----------------------------------------+
     |  Thesis                                 |
     |                          (negative      |
     |  Growth gets messy        space)        |
     |  before it gets                         |
     |  expensive.*                            |
     |                                         |
     |  *We rebuild           +----------------+
     |   the operating layer. |                |
     |                        |  dense canvas  |
     |                        |  block:        |
     |                        |  diagnostic +  |
     |                        |  italic accent |
     |                        |  resolve lines |
     |                        |                |
     +------------------------+----------------+

   The asterisk + footnote pair (matching the hero motif) binds the headline
   and resolve. The dense block has an inner-edge alpha gradient so the
   typography itself fades into the negative space — no halo overlay. The
   canvas engine (pretext-demo.js) draws this block; CSS only positions the
   reading column and provides the static fallback.

   Reduced motion / mobile fall back to .thesis-poster.
---------------------------------------------- */

.thesis-interactive {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 680px;
  background: var(--bg-primary);
  overflow: hidden;
  /* No flex centering — children are positioned absolutely so the composition
     is precise and predictable. */
}

/* ---- Primary statement (upper-left reading column) ---- */

.thesis-statement {
  position: absolute;
  top: clamp(8vh, 14vh, 18vh);
  left: clamp(2rem, 7vw, 7rem);
  width: min(620px, 56vw);
  z-index: 2;
  /* Doesn't intercept pointer events so the canvas underneath can still
     receive cursor moves. */
  pointer-events: none;
}

.thesis-eyebrow {
  /* No `display` declaration here on purpose — the global mode toggle
     (`.order-content` / `.edge-content`) owns show/hide via display, and
     declaring display here at equal specificity overrides it and renders
     both variants at once. The element is a <span>; the global rule sets
     it to block when active, none when inactive. */
  font-family: var(--font-mono, var(--font-sans));
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fg-primary) 65%, transparent);
  margin: 0 0 clamp(1.25rem, 2.4vh, 2rem) 0;
}

.thesis-headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.75rem, 5.6vw, 5.75rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--fg-primary);
}

.thesis-headline em {
  font-style: italic;
  font-weight: 300;
  color: var(--fg-primary);
}

/* The accent asterisk: small superscript red mark that points to the
   resolve below. Same device as the hero `*` after "brands". */
.thesis-headline .accent,
.thesis-resolve .accent {
  color: var(--accent-primary);
  font-style: normal;
  font-weight: 400;
}

.thesis-headline .accent {
  display: inline-block;
  font-size: 0.55em;
  vertical-align: 0.55em;
  margin-left: 0.06em;
  line-height: 1;
}

.thesis-resolve {
  margin: clamp(1.5rem, 3.2vh, 2.6rem) 0 0 0;
  /* Indent slightly so the resolve reads as a footnote-class element rather
     than a second headline. */
  padding-left: clamp(0.5rem, 1.2vw, 1rem);
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.25rem, 1.7vw, 1.85rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: color-mix(in srgb, var(--fg-primary) 78%, transparent);
  max-width: 32ch;
}

.thesis-resolve em {
  font-style: italic;
  color: var(--fg-primary);
  /* Subtle weight bump on the key noun so the eye lands on what's being
     rebuilt. */
  font-weight: 400;
}

.thesis-resolve .accent {
  font-style: normal;
  margin-right: 0.15em;
}

/* Raw-mode overrides — same composition, harder voice. */
[data-theme="edge"] .thesis-eyebrow {
  font-family: var(--font-display-edge);
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--fg-primary);
}

[data-theme="edge"] .thesis-headline {
  font-family: var(--font-display-edge);
  font-weight: 700;
  font-size: clamp(2.5rem, 5.6vw, 5.75rem);
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

[data-theme="edge"] .thesis-headline em {
  font-style: normal;
}

[data-theme="edge"] .thesis-resolve {
  font-family: var(--font-display-edge);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(0.95rem, 1.45vw, 1.4rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fg-primary) 70%, transparent);
}

[data-theme="edge"] .thesis-resolve em {
  font-style: normal;
  color: var(--fg-primary);
  font-weight: 700;
}

/* ---- Dense canvas block (lower-right) ---- */

.thesis-canvas-wrapper {
  position: absolute;
  /* Anchored to lower-right corner. The width/height percentages here only
     define the wrapper bounds; the canvas engine reads them and applies the
     internal alpha gradient (full at outer corner → 0.25 at inner corner). */
  right: 0;
  bottom: 0;
  width: 56%;
  height: 64%;
  z-index: 1;
}

#thesis-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* On the dense block region only, hide the OS cursor — the typography
   responding to the reader IS the cursor. The reading column keeps its
   default cursor so links and buttons elsewhere stay normal. */
.thesis-canvas-wrapper {
  cursor: none;
}

/* ---- Static poster fallback (reduced motion / mobile) ----
   Mirrors the refined two-zone composition as a single composed page. */
.thesis-poster {
  display: none;
  padding: clamp(5rem, 12vh, 10rem) clamp(1.5rem, 8vw, 8rem);
  max-width: 1400px;
  margin: 0 auto;
}

.thesis-poster-line,
.thesis-poster-resolve {
  font-family: var(--font-display);
  color: var(--fg-primary);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
}

.thesis-poster-line {
  font-size: clamp(2.5rem, 7vw, 6.5rem);
  font-weight: 300;
  line-height: 1.05;
}

.thesis-poster-line em {
  font-style: italic;
  color: var(--fg-primary);
  font-weight: 300;
}

.thesis-poster-line .accent,
.thesis-poster-resolve .accent {
  color: var(--accent-primary);
  font-style: normal;
  font-weight: 400;
}

.thesis-poster-line .accent {
  display: inline-block;
  font-size: 0.55em;
  vertical-align: 0.55em;
  margin-left: 0.06em;
  line-height: 1;
}

.thesis-poster-resolve {
  margin-top: clamp(1.5rem, 3vh, 2.5rem);
  padding-left: clamp(0.5rem, 1.2vw, 1rem);
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.35;
  color: color-mix(in srgb, var(--fg-primary) 78%, transparent);
  max-width: 38ch;
}

.thesis-poster-resolve em {
  color: var(--fg-primary);
  font-weight: 400;
}

.thesis-poster-resolve .accent {
  font-style: normal;
  margin-right: 0.15em;
}

[data-theme="edge"] .thesis-poster-line {
  font-family: var(--font-display-edge);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

[data-theme="edge"] .thesis-poster-resolve {
  font-family: var(--font-display-edge);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Reduced motion / mobile: hide the canvas + statement DOM, show the
   static poster instead. The interactive composition needs both a pointer
   and viewport real estate that mobile doesn't have. */
@media (prefers-reduced-motion: reduce) {
  .thesis-interactive {
    height: auto;
    min-height: 0;
  }
  .thesis-interactive .thesis-canvas-wrapper,
  .thesis-interactive .thesis-statement {
    display: none;
  }
  .thesis-interactive .thesis-poster {
    display: block;
  }
}

@media (max-width: 900px) {
  .thesis-interactive {
    height: auto;
    min-height: 0;
  }
  .thesis-interactive .thesis-canvas-wrapper,
  .thesis-interactive .thesis-statement {
    display: none;
  }
  .thesis-interactive .thesis-poster {
    display: block;
  }
}

/* Systems Section (Sticky Layout) */
.systems {
  padding: var(--space-48) var(--space-16);
  max-width: 1600px;
  margin: 0 auto;
}

.systems-container {
  display: flex;
  gap: var(--space-24);
  align-items: flex-start;
}

.systems-left {
  flex: 0 0 35%;
  position: sticky;
  top: 120px; /* Offset for header */
}

.systems-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-top: 1px solid color-mix(in srgb, var(--fg-primary) 20%, transparent);
}

.system-row {
  display: flex;
  gap: var(--space-16);
  padding: var(--space-16) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--fg-primary) 20%, transparent);
  transition: padding 0.4s ease;
}

.system-row:hover {
  padding-left: var(--space-8);
}

.system-num {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--fg-primary) 40%, transparent);
  flex-shrink: 0;
}

[data-theme="edge"] .system-num {
  font-family: var(--font-display-edge);
  font-size: 2rem;
  color: var(--accent-primary);
}

.system-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.system-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--fg-primary);
}

[data-theme="edge"] .system-title {
  font-family: var(--font-display-edge);
  font-weight: 700;
  line-height: 1;
}

.system-desc {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--fg-primary) 80%, transparent);
  max-width: 45ch;
}

[data-theme="edge"] .system-desc {
  font-family: var(--font-display-edge);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--fg-primary);
}

/* Security */
.security {
  padding: var(--space-48) var(--space-16);
  max-width: 1600px;
  margin: 0 auto;
}

.security-header {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--space-16);
  align-items: start;
  margin-bottom: var(--space-24);
}

.security-header-copy .section-title {
  margin-bottom: var(--space-8);
}

.security-header-copy .body-large {
  max-width: 52ch;
}

[data-theme="edge"] .security-header-copy .body-large {
  max-width: 30ch;
}

.security-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  background: color-mix(in srgb, var(--fg-primary) 18%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--fg-primary) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--fg-primary) 18%, transparent);
}

.security-card {
  grid-column: span 4;
  min-height: 300px;
  padding: var(--space-16);
  background: color-mix(in srgb, var(--bg-primary) 94%, var(--fg-primary) 6%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-16);
  transition: transform 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease;
}

.security-card:nth-child(4),
.security-card:nth-child(5) {
  grid-column: span 6;
}

.security-card:hover {
  transform: translateY(-6px);
}

[data-theme="edge"] .security-card {
  background: color-mix(in srgb, var(--bg-primary) 86%, var(--bg-secondary) 14%);
}

[data-theme="edge"] .security-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 4px 4px 0px var(--accent-primary);
}

.security-card-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fg-primary) 45%, transparent);
}

[data-theme="edge"] .security-card-label {
  font-family: var(--font-display-edge);
  font-size: 0.9rem;
  line-height: 1;
  color: var(--accent-primary);
}

.security-card-mark {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.5vw, 5rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.02em;
  max-width: 9ch;
  text-wrap: balance;
}

[data-theme="edge"] .security-card-mark {
  font-family: var(--font-display-edge);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.security-card-text {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--fg-primary) 82%, transparent);
  max-width: 34ch;
}

[data-theme="edge"] .security-card-text {
  font-family: var(--font-display-edge);
  font-size: 1.125rem;
  line-height: 1.12;
  color: var(--fg-primary);
  max-width: 22ch;
}

.security-note {
  margin-top: var(--space-8);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--fg-primary) 60%, transparent);
  max-width: 56ch;
}

[data-theme="edge"] .security-note {
  font-family: var(--font-display-edge);
  font-size: 0.95rem;
  line-height: 1.2;
  color: color-mix(in srgb, var(--fg-primary) 82%, transparent);
  max-width: 34ch;
}

/* Proof */
.proof {
  padding: var(--space-48) var(--space-16);
  max-width: 1600px;
  margin: 0 auto;
}

.proof-header {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  column-gap: clamp(var(--space-16), 6vw, var(--space-32));
  row-gap: var(--space-16);
  margin-bottom: var(--space-32);
  align-items: end;
}

.proof-header .section-number {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.proof-header-content .section-title {
  margin-bottom: 0;
}

.proof-header-content {
  display: contents;
}

.proof-header-content .section-title {
  grid-column: 1;
  align-self: end;
}

.proof-intro {
  grid-column: 2;
  align-self: end;
  font-family: var(--font-sans);
  font-size: 1.25rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--fg-primary) 80%, transparent);
  max-width: 38ch;
  margin: 0;
  padding-bottom: 0.4em;
}

[data-theme="edge"] .proof-intro {
  font-family: var(--font-display-edge);
  font-size: 1.625rem;
  line-height: 1.05;
  color: var(--fg-primary);
}

.portfolio-showcase {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 0 var(--space-16);
  margin-top: var(--space-32);
}

.portfolio-track {
  display: flex;
  width: 100%;
  height: 75vh;
  min-height: 500px;
  max-height: 800px;
  gap: var(--space-16);
}

.portfolio-item {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: 24px;
  overflow: hidden;
  transition: flex 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s ease, background-color 0.6s ease;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.75rem, 2.4vw, 2.5rem);
  cursor: pointer;

  /* Refined card "plate": chocolate base + warm radial spotlight where
     the device sits. Per-card tints are layered on via nth-of-type below. */
  background-color: var(--color-chocolate);
  background-image:
    radial-gradient(
      ellipse 68% 55% at 50% 28%,
      color-mix(in srgb, var(--color-chocolate) 78%, var(--color-red) 18%) 0%,
      transparent 70%
    );
}

/* Per-card tonal variation in Refined mode — same family, distinct identity */
.portfolio-track > .portfolio-item:nth-of-type(1) {
  background-color: var(--color-chocolate);
}
.portfolio-track > .portfolio-item:nth-of-type(2) {
  background-color: color-mix(in srgb, var(--color-chocolate) 84%, var(--color-red) 16%);
}
.portfolio-track > .portfolio-item:nth-of-type(3) {
  background-color: color-mix(in srgb, var(--color-chocolate) 88%, var(--color-charcoal) 12%);
}

[data-theme="edge"] .portfolio-item {
  border-radius: 0;
  border: none;
  box-shadow: none;
  transition: flex 0.6s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease;

  /* Raw mode: brutalist red plate with a slightly hotter top highlight */
  background-color: var(--color-red);
  background-image:
    radial-gradient(
      ellipse 70% 55% at 50% 26%,
      color-mix(in srgb, var(--color-red) 85%, #ffffff 15%) 0%,
      transparent 72%
    );
}

[data-theme="edge"] .portfolio-track > .portfolio-item:nth-of-type(1) {
  background-color: var(--color-red);
}
[data-theme="edge"] .portfolio-track > .portfolio-item:nth-of-type(2) {
  background-color: color-mix(in srgb, var(--color-red) 90%, var(--color-chocolate) 10%);
}
[data-theme="edge"] .portfolio-track > .portfolio-item:nth-of-type(3) {
  background-color: color-mix(in srgb, var(--color-red) 82%, #000000 18%);
}

/* Field-plate corner reticle — replaces the box-shadow brutalism with
   four L-shaped brackets at the corners (camera/scope feel). 8 linear
   gradients = 4 corners × 2 strokes each. */
[data-theme="edge"] .portfolio-item::before {
  content: '';
  position: absolute;
  inset: 10px;
  pointer-events: none;
  z-index: 5;
  --b: 18px;          /* bracket arm length */
  --t: 1.5px;         /* stroke thickness */
  --c: var(--accent-primary);
  background:
    linear-gradient(var(--c), var(--c)) top    left  / var(--b) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) top    left  / var(--t) var(--b) no-repeat,
    linear-gradient(var(--c), var(--c)) top    right / var(--b) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) top    right / var(--t) var(--b) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--b) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--b) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left  / var(--b) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left  / var(--t) var(--b) no-repeat;
  transition: inset 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}

/* A faint hairline at the card's actual edge — keeps the card defined
   without going back to a heavy red border. */
[data-theme="edge"] .portfolio-item::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, transparent);
  transition: border-color 0.4s ease;
}

.portfolio-item:hover {
  flex: 3;
}

/* Brackets travel toward the corners on hover (scope locks on). */
[data-theme="edge"] .portfolio-item:hover::before {
  inset: 4px;
}

[data-theme="edge"] .portfolio-item:hover::after {
  border-color: color-mix(in srgb, var(--accent-primary) 60%, transparent);
}

/* Device PNG sits in the upper "stage" zone of the card. The text band
   below (driven by .portfolio-item-overlay) is solid plate color, so
   the device never overlaps text — eliminates white-on-white and
   red-on-red clashes.

   The source mockups have hard-black backgrounds (RGB, no alpha) — we
   use `mix-blend-mode: screen` to make the black pixels mathematically
   invisible over whatever plate color is underneath (chocolate, red, or
   any future hue). Screen formula: 1 - (1-src)(1-dst) → black src
   leaves the backdrop untouched; bright src pixels lighten toward white.
   The device's bright UI surfaces stay color-true; the dark rock
   pedestal appears as a softly-lit texture on the plate.

   Sizing strategy: at narrow rest cards we use a WIDTH-based size so
   the device fills the available width without exploding past it. On
   the expanded hover card and in the wide carousel cards we switch to
   a HEIGHT-based size so the device fills the taller-feeling stage. */
/* Device PNG sits in the upper portion of the plate. The text band
   below (driven by .portfolio-item-overlay) is solid plate color, so
   the device never overlaps text — eliminates white-on-white and
   red-on-red clashes.

   The source mockups have hard-black backgrounds (RGB, no alpha) — we
   use `mix-blend-mode: screen` to make the black pixels mathematically
   invisible over whatever plate color is underneath (chocolate, red, or
   any future hue). Screen formula: 1 - (1-src)(1-dst) → black src
   leaves the backdrop untouched; bright src pixels lighten toward white.
   The device's bright UI surfaces stay color-true; the dark rock
   pedestal appears as a softly-lit texture on the plate. */
.portfolio-item-bg {
  position: absolute;
  inset: 0;
  background-size: auto 68%;
  background-position: 50% 4%;
  background-repeat: no-repeat;
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
  mix-blend-mode: screen;
}

.portfolio-item:hover .portfolio-item-bg {
  transform: scale(1.04) translateY(-1.5%);
}

/* Overlay slab — defines the bottom "label band" of the card. Solid
   plate color guarantees every piece of text (meta, title, description,
   metrics) sits on a clean, legible field. The transition from
   transparent device-stage to solid-plate band is short so the two
   zones read as a deliberate two-part composition (artifact above,
   label below) rather than a vignette.

   In Refined mode the band is a slightly darker chocolate than the
   plate above it — gives the card a "plinth base" feel. */
/* Overlay slab — fades the bottom of the card to a darker version of
   the plate so the title and reveal copy stay legible without muddying
   the device colors above. Per-mode hue match so the fade reads as
   one continuous surface. */
.portfolio-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-chocolate) 96%, #000) 0%,
    color-mix(in srgb, var(--color-chocolate) 94%, #000) 52%,
    color-mix(in srgb, var(--color-chocolate) 55%, transparent) 72%,
    transparent 88%
  );
  z-index: 2;
  transition: opacity 0.5s ease;
}

[data-theme="edge"] .portfolio-item-overlay {
  background:
    /* Faint horizontal scan-lines (1px lit, 2px gap) — gives a printed/
       scanned plate feel without being kitsch. Intensity tuned to be
       almost subliminal. */
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 2px,
      rgba(0, 0, 0, 0.18) 2px,
      rgba(0, 0, 0, 0.18) 3px
    ),
    /* Bottom-up deep-red fade — keeps the red plate identity while
       guaranteeing text legibility at the bottom of the card. */
    linear-gradient(
      to top,
      color-mix(in srgb, var(--color-red) 78%, #000) 0%,
      color-mix(in srgb, var(--color-red) 86%, #000) 20%,
      transparent 60%
    );
}

.portfolio-item-content {
  position: relative;
  z-index: 3;
  width: 100%;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}

/* "Specimen ID" stamp in the bottom-right corner of each Raw card —
   a tiny monospace code (001/03, 002/03, 003/03) that gives the cards
   a technical-archive feel. Per-card content is set via :nth-of-type. */
[data-theme="edge"] .portfolio-item-content::after {
  position: absolute;
  bottom: 0;
  right: 0;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--accent-primary) 80%, transparent) !important;
  pointer-events: none;
  white-space: nowrap;
}
[data-theme="edge"] .portfolio-track > .portfolio-item:nth-of-type(1) .portfolio-item-content::after { content: '001 / 03'; }
[data-theme="edge"] .portfolio-track > .portfolio-item:nth-of-type(2) .portfolio-item-content::after { content: '002 / 03'; }
[data-theme="edge"] .portfolio-track > .portfolio-item:nth-of-type(3) .portfolio-item-content::after { content: '003 / 03'; }

.portfolio-item-content * {
  color: #fff;
}

[data-theme="edge"] .portfolio-item-content * {
  color: var(--fg-primary);
}

.portfolio-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: auto;
  opacity: 0.85;
  transform: translateY(0);
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.portfolio-item:hover .portfolio-meta {
  opacity: 1;
}

.portfolio-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 300;
}

[data-theme="edge"] .portfolio-num {
  font-family: var(--font-display-edge);
  font-weight: 700;
  color: var(--accent-primary) !important;
}

.portfolio-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 0.4em;
  column-gap: 0.75em;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.85) !important;
  text-align: right;
  min-width: 0;
  max-width: 70%;
}

.portfolio-tags > span:not(.meta-dot) {
  white-space: nowrap;
}

[data-theme="edge"] .portfolio-tags {
  font-family: var(--font-display-edge);
  letter-spacing: 0.05em;
}

.meta-dot {
  width: 4px;
  height: 4px;
  background: var(--accent-primary);
  border-radius: 50%;
}

[data-theme="edge"] .meta-dot {
  border-radius: 0;
}

.portfolio-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.portfolio-title {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2.4vw, 3rem);
  font-weight: 300;
  line-height: 1.05;
  margin: 0;
  transition: font-size 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), letter-spacing 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
  letter-spacing: -0.01em;
}

.portfolio-item:hover .portfolio-title {
  font-size: clamp(2.5rem, 4.5vw, 4.75rem);
  letter-spacing: -0.02em;
}

[data-theme="edge"] .portfolio-title {
  font-family: var(--font-display-edge);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-cream) !important;
  position: relative;
  padding-left: 0.55em;
  transition: font-size 0.6s cubic-bezier(0.25, 1, 0.5, 1),
              padding-left 0.5s cubic-bezier(0.25, 1, 0.5, 1),
              letter-spacing 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Red marker bar to the left of the title — replaces the stroked-text
   effect. Starts short, extends on hover. */
[data-theme="edge"] .portfolio-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 4px;
  background: var(--accent-primary);
  transition: width 0.5s cubic-bezier(0.7, 0, 0.3, 1),
              background 0.4s ease;
}

[data-theme="edge"] .portfolio-item:hover .portfolio-title::before {
  width: 8px;
}

.portfolio-reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.portfolio-item:hover .portfolio-reveal {
  grid-template-rows: 1fr;
}

.portfolio-reveal-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding-top: var(--space-8);
}

.portfolio-desc {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.1s;
  max-width: 45ch;
  white-space: normal;
}

[data-theme="edge"] .portfolio-desc {
  font-family: var(--font-display-edge);
  font-size: 1.25rem;
}

.portfolio-item:hover .portfolio-desc {
  opacity: 0.9;
  transform: translateY(0);
}

.portfolio-metrics {
  display: flex;
  gap: var(--space-32);
  margin-top: var(--space-8);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.2s;
  white-space: normal;
  position: relative;
}

/* Hard red rule above the metric block in Raw mode — gives the data
   block that spec-sheet/dossier feel. Animates from 0 → full width. */
[data-theme="edge"] .portfolio-metrics::before {
  content: '';
  position: absolute;
  top: calc(var(--space-8) * -0.5);
  left: 0;
  height: 1px;
  width: 0;
  background: var(--accent-primary);
  transition: width 0.7s cubic-bezier(0.7, 0, 0.3, 1) 0.15s;
}

[data-theme="edge"] .portfolio-item:hover .portfolio-metrics::before {
  width: 64px;
}

.portfolio-item:hover .portfolio-metrics {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-metrics .metric {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  min-width: 0;
}

.portfolio-metrics .metric-val {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 2.4vw, 2.5rem);
  color: #fff;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

[data-theme="edge"] .portfolio-metrics .metric-val {
  font-family: var(--font-display-edge);
  font-weight: 700;
  font-size: 3rem;
  color: var(--accent-primary) !important;
}

.portfolio-metrics .metric-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.7) !important;
}

[data-theme="edge"] .portfolio-metrics .metric-label {
  color: #fff !important;
}

.img-1 { background-image: url('assets/portfolio/01-gallery-momo.png'); }
.img-2 { background-image: url('assets/portfolio/02-sundae.png'); }
.img-3 { background-image: url('assets/portfolio/03-arthouse.png'); }

/* Portfolio indicators (mobile carousel) */
.portfolio-indicators {
  display: none;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-24);
  padding: 0 var(--space-16);
}

.portfolio-indicator {
  appearance: none;
  border: none;
  background: color-mix(in srgb, var(--fg-primary) 25%, transparent);
  width: 28px;
  height: 4px;
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease, width 0.3s ease;
}

.portfolio-indicator:hover {
  background: color-mix(in srgb, var(--fg-primary) 50%, transparent);
}

.portfolio-indicator.is-active {
  background: var(--fg-primary);
  width: 48px;
}

[data-theme="edge"] .portfolio-indicator {
  border-radius: 0;
  background: color-mix(in srgb, var(--fg-primary) 30%, transparent);
}

[data-theme="edge"] .portfolio-indicator.is-active {
  background: var(--accent-primary);
}

/* Apply CTA */
.apply-cta {
  position: relative;
  padding: var(--space-32) 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.apply-inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 4rem);
}

.apply-card {
  border: 1px solid color-mix(in srgb, var(--fg-primary) 25%, transparent);
  padding: clamp(2rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  position: relative;
  transition: all var(--transition-speed) var(--transition-ease);
}

[data-theme="edge"] .apply-card {
  border: 2px solid var(--fg-primary);
  box-shadow: 16px 16px 0px var(--accent-primary);
  background: var(--bg-primary);
}

.apply-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--fg-primary) 15%, transparent);
  padding-bottom: var(--space-4);
}

[data-theme="edge"] .apply-card-header {
  border-bottom: 2px solid var(--fg-primary);
}

.apply-card-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.6;
}

[data-theme="edge"] .apply-card-label {
  font-family: var(--font-display-edge);
  color: var(--accent-primary);
  opacity: 1;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.apply-card-number {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  opacity: 0.6;
}

[data-theme="edge"] .apply-card-number {
  font-family: var(--font-display-edge);
  color: var(--accent-primary);
  opacity: 1;
  font-weight: 700;
}

.apply-card-body {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-16);
  align-items: end;
}

.apply-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.5vw, 4.5rem);
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -0.02em;
  max-width: 14ch;
}

[data-theme="edge"] .apply-title {
  font-family: var(--font-display-edge);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.apply-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: flex-start;
}

.apply-text {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--fg-primary) 80%, transparent);
  max-width: 40ch;
}

[data-theme="edge"] .apply-text {
  font-family: var(--font-display-edge);
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--fg-primary);
  font-weight: 500;
}

.btn-primary.huge {
  font-size: 1.25rem;
  padding: 24px 48px;
  border-color: var(--fg-primary);
  background: var(--fg-primary);
}

.btn-primary.huge .btn-text {
  color: var(--bg-primary);
}

.btn-primary.huge .btn-bg {
  background: var(--bg-primary);
}

.btn-primary.huge:hover .btn-text {
  color: var(--fg-primary);
}

[data-theme="edge"] .btn-primary.huge {
  border-color: var(--accent-primary);
  border-width: 2px;
  border-radius: 0;
  box-shadow: 8px 8px 0px var(--accent-primary);
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
}

[data-theme="edge"] .btn-primary.huge:hover {
  transform: translate(6px, 6px);
  box-shadow: 2px 2px 0px var(--accent-primary);
}

[data-theme="edge"] .btn-primary.huge .btn-text {
  color: var(--accent-primary);
  font-weight: 700;
}

[data-theme="edge"] .btn-primary.huge .btn-bg {
  display: none;
}

[data-theme="edge"] .btn-primary.huge:hover .btn-text {
  color: var(--accent-primary);
}

/* Animations */
body.fonts-loaded .reveal-on-load {
  opacity: 0;
  transform: translateY(20px);
  animation: reveal 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: var(--delay, 0s);
}

.reveal-on-load {
  opacity: 0;
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Site Footer ───────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  padding: var(--space-32) 0 var(--space-8);
  overflow: hidden;
}

.footer-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
}

.footer-top {
  display: grid;
  grid-template-columns: 2.5fr 1fr 1fr 1fr;
  border-top: 1px solid color-mix(in srgb, var(--fg-primary) 15%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--fg-primary) 15%, transparent);
}

.footer-col {
  padding: var(--space-12) var(--space-8);
  border-right: 1px solid color-mix(in srgb, var(--fg-primary) 15%, transparent);
  display: flex;
  flex-direction: column;
}

.footer-col:last-child {
  border-right: none;
  padding-right: 0;
}

.footer-col-brand {
  padding-left: 0;
  justify-content: space-between;
  gap: var(--space-16);
}

.footer-monogram {
  font-size: clamp(3.5rem, 6vw, 5rem);
  line-height: 1;
  margin-bottom: var(--space-8);
}

[data-theme="order"] .footer-monogram {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--fg-primary);
  letter-spacing: -0.02em;
}

[data-theme="edge"] .footer-monogram {
  font-family: var(--font-display-edge);
  font-weight: 700;
  color: var(--fg-primary);
}

.footer-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: color-mix(in srgb, var(--fg-primary) 70%, transparent);
  font-weight: 500;
}

[data-theme="edge"] .footer-status {
  font-family: var(--font-display-edge);
  font-weight: 600;
  color: var(--accent-primary);
  letter-spacing: 0.1em;
}

.status-pulse {
  width: 6px;
  height: 6px;
  background-color: var(--accent-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(211, 47, 36, 0.7);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(211, 47, 36, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(211, 47, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(211, 47, 36, 0); }
}

.footer-desc {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--fg-primary) 80%, transparent);
}

[data-theme="edge"] .footer-desc {
  font-family: var(--font-display-edge);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--fg-primary);
}

.footer-heading {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  opacity: 0.6;
  margin-bottom: var(--space-8);
}

[data-theme="edge"] .footer-heading {
  font-family: var(--font-display-edge);
  color: var(--accent-primary);
  opacity: 1;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-links li a,
.footer-text {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--fg-primary);
  line-height: 1.5;
}

[data-theme="edge"] .footer-links li a,
[data-theme="edge"] .footer-text {
  font-family: var(--font-display-edge);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: var(--space-16);
}

.footer-massive-text {
  font-size: clamp(6rem, 20vw, 24rem);
  line-height: 0.85;
  text-align: center;
  margin-bottom: var(--space-12);
  overflow: hidden;
  padding-bottom: 0.1em; /* Prevent descenders from clipping */
  white-space: nowrap;
}

[data-theme="order"] .footer-massive-text {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
  margin-left: -0.05em; /* Optical centering */
}

[data-theme="edge"] .footer-massive-text {
  font-family: var(--font-display-edge);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--fg-primary);
}

.footer-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--fg-primary) 60%, transparent);
}

[data-theme="edge"] .footer-legal {
  font-family: var(--font-display-edge);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--fg-primary);
}

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

/* Responsive */
@media (max-width: 1024px) {
  /* Diagnostic panel: 4-up → 2x2 */
  .diagnostic-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .diag-card {
    min-height: clamp(340px, 46vw, 420px);
  }
  .diag-glyph {
    width: clamp(190px, 70%, 280px);
  }
  .diagnostic-headline {
    max-width: 22ch;
  }

  .systems-container {
    flex-direction: column;
    gap: var(--space-16);
  }
  .systems-left {
    position: static;
  }
  .security-header {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .security-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .security-card,
  .security-card:nth-child(4),
  .security-card:nth-child(5) {
    grid-column: span 1;
  }
  .system-title {
    font-size: clamp(2rem, 6vw, 3rem);
  }
  
  .site-header {
    padding: 1rem 1.5rem;
  }
  .menu-toggle {
    padding: 10px 16px;
  }
  .mode-btn {
    padding: 6px 16px;
  }
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-bottom {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .hero-ctas {
    justify-content: flex-start;
  }
  .proof-header {
    grid-template-columns: 1fr;
    margin-bottom: var(--space-24);
  }
  .proof-intro {
    grid-column: 1;
    padding-bottom: 0;
  }
  .proof-header-content .section-title {
    grid-column: 1;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    border-top: none;
    border-bottom: none;
  }
  .footer-col {
    padding: var(--space-8) 0;
    border-right: none;
    border-bottom: 1px solid color-mix(in srgb, var(--fg-primary) 15%, transparent);
  }
  .footer-col-brand {
    grid-column: 1 / -1;
    max-width: 600px;
    padding-top: 0;
  }
}

/* PORTFOLIO CAROUSEL — applies to tablets, phones, and any touch-only device.
   Comma-separated media query = OR. Touch devices get carousel regardless of width
   because hover-to-expand is awkward on touch. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .portfolio-showcase {
    padding: 0;
    margin-top: var(--space-24);
  }

  .portfolio-track {
    flex-direction: row;
    height: auto;
    max-height: none;
    gap: var(--space-16);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 0 6vw;
    scroll-padding-inline: 6vw;
    scrollbar-width: none;
  }
  .portfolio-track::-webkit-scrollbar {
    display: none;
  }

  .portfolio-item {
    flex: 0 0 88%;
    height: clamp(440px, 68vh, 680px);
    min-height: 0;
    max-height: none;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .portfolio-item:hover {
    flex: 0 0 88%;
    transform: none;
  }

  [data-theme="edge"] .portfolio-item:hover {
    transform: none;
    box-shadow: none;
  }

  /* Carousel mode brackets stay at rest position (no hover affordance) */
  [data-theme="edge"] .portfolio-item::before {
    inset: 8px;
  }

  /* Reveal all content by default since there's no hover affordance */
  .portfolio-meta,
  .portfolio-desc,
  .portfolio-metrics {
    opacity: 1;
    transform: translateY(0);
  }
  .portfolio-meta {
    opacity: 0.95;
  }
  .portfolio-desc {
    opacity: 0.85;
  }
  .portfolio-reveal {
    grid-template-rows: 1fr;
  }
  .portfolio-title {
    white-space: normal;
    font-size: clamp(2rem, 5.5vw, 3.25rem);
    line-height: 1.05;
  }
  [data-theme="edge"] .portfolio-title {
    color: var(--color-cream) !important;
    -webkit-text-stroke: 0;
  }

  /* Show the red rule above metrics in carousel mode (no hover state) */
  [data-theme="edge"] .portfolio-metrics::before {
    width: 56px;
  }

  /* Carousel mode: cards are wider/shorter, so push the device a touch
     lower so it sits inside the visible upper "stage" area, not pinned
     to the very top. The chocolate overlay handles the title legibility
     band underneath. */
  .portfolio-item-bg {
    background-position: 50% 12%;
  }
  [data-theme="edge"] .portfolio-item-bg {
    background-position: 50% 12%;
  }

  .portfolio-indicators {
    display: flex;
  }
}

@media (max-width: 768px) {
  /* Diagnostic panel: 2x2 → 1-stack */
  .diagnostic-board {
    grid-template-columns: 1fr;
  }
  .diag-card {
    min-height: 0;
    padding: clamp(1.5rem, 6vw, 2rem) clamp(1.25rem, 5vw, 1.75rem);
    grid-template-rows: auto auto auto;
    gap: 1.25rem;
  }
  .diag-card-glyph {
    justify-content: center;
  }
  .diag-glyph {
    width: 150px;
  }
  .diag-card-phrase {
    font-size: clamp(1.625rem, 5.5vw, 2rem);
    max-width: 18ch;
  }
  [data-theme="edge"] .diag-card-phrase {
    font-size: clamp(1.5rem, 5.2vw, 1.85rem);
  }
  .diagnostic-foot {
    flex-wrap: wrap;
  }
  
  :root {
    --space-4: 0.75rem;
    --space-8: 1.25rem;
    --space-12: 1.625rem;
    --space-16: 2rem;
    --space-20: 2.5rem;
    --space-24: 3rem;
    --space-32: 4rem;
    --space-48: 5rem;
  }
  
  .site-menu-inner {
    padding: 100px var(--space-8) var(--space-16);
    gap: var(--space-16);
  }
  
  .site-menu-nav {
    gap: var(--space-4);
  }
  
  .menu-link {
    font-size: clamp(2rem, 7vw, 4rem);
    flex-wrap: wrap;
  }
  
  .site-menu-footer {
    flex-direction: column;
    gap: var(--space-16);
  }
  
  .site-header {
    grid-template-columns: 1fr auto 1fr;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    align-items: center;
  }
  .logo {
    grid-column: 1;
    justify-self: start;
  }
  .logo-svg {
    height: 40px; /* Matched with toggle height */
  }
  .mode-toggle {
    grid-column: 2;
    justify-self: center;
    padding: var(--toggle-padding);
  }
  .header-actions {
    grid-column: 3;
    justify-self: end;
    display: block;
  }
  .menu-toggle {
    padding: 10px 16px;
    font-size: 0.65rem;
  }
  .mode-btn {
    padding: 8px 14px;
    font-size: 0.8rem; /* Increased to match logo scale */
  }
  .main-nav {
    display: none;
  }
  .hero {
    padding-top: 6rem; /* Adjusted for smaller header */
    padding-bottom: 4rem;
    min-height: 85vh; /* Ensure it doesn't feel too short */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero-headline {
    font-size: clamp(2.5rem, 8vw + 0.5rem, 3.25rem);
    margin-bottom: var(--space-8);
    line-height: 1.1; /* Tighter line-height for better grouping */
    letter-spacing: -0.02em; /* Restore slight tracking for elegance */
    max-width: 100%;
  }
  [data-theme="edge"] .hero-headline {
    font-size: clamp(2.5rem, 10vw, 3.25rem);
    line-height: 1;
    letter-spacing: -0.02em;
    max-width: 100%;
  }
  .accent-outline {
    -webkit-text-stroke: 1.5px var(--accent-primary);
  }
  .hero-subhead {
    font-size: 1.125rem;
    line-height: 1.5;
    margin-bottom: var(--space-16);
    max-width: 95%;
  }
  [data-theme="edge"] .hero-subhead {
    font-size: 1.125rem;
    line-height: 1.4;
    margin-bottom: var(--space-16);
    max-width: 90%;
  }
  .body-large {
    font-size: 1.0625rem;
    line-height: 1.5;
  }
  .hero-footnote {
    margin-top: var(--space-8);
    font-size: 0.75rem;
  }
  .hero-ctas {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
  }
  .btn-primary {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 18px 24px;
    font-size: 1rem;
  }
  .btn-secondary {
    width: auto;
    text-align: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 0.85rem;
    border: none;
  }
  [data-theme="edge"] .btn-secondary {
    border: none;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .btn-secondary::after {
    display: block;
    bottom: 0;
  }
  .system-row {
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-16) 0;
  }
  .security-grid {
    grid-template-columns: 1fr;
  }
  .security-card,
  .security-card:nth-child(4),
  .security-card:nth-child(5) {
    grid-column: span 1;
    min-height: auto;
  }
  .system-num {
    margin-bottom: var(--space-4);
  }
  .system-title {
    font-size: clamp(2rem, 8vw, 2.5rem);
  }
  /* Phone-specific portfolio refinements (carousel base lives at 1024px) */
  .portfolio-track {
    gap: var(--space-12);
    padding: 0 5vw;
  }
  .portfolio-item {
    flex: 0 0 90%;
    height: clamp(460px, 70vh, 600px);
  }
  .portfolio-item:hover {
    flex: 0 0 90%;
  }
  .portfolio-title {
    font-size: clamp(2rem, 7vw, 2.75rem);
  }
  .proof-title {
    font-size: clamp(2rem, 9vw, 3.5rem);
  }
  .marquee {
    font-size: 1.25rem;
    padding: 1rem 0;
  }
  .section-title {
    font-size: clamp(2rem, 9vw, 3.5rem);
    margin-bottom: 2rem;
  }
  .apply-card-body {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .apply-title {
    font-size: clamp(2.5rem, 8vw, 4rem);
  }
  .apply-text {
    font-size: 1.125rem;
    margin-bottom: var(--space-8);
  }
  [data-theme="edge"] .apply-text {
    font-size: 1.25rem;
  }
  .btn-primary.huge {
    font-size: 1rem;
    padding: 18px 24px;
    width: 100%;
  }
  .visual-container {
    width: 100%;
  }
  .hero-visual {
    width: 100%;
    opacity: 0.05;
  }
  [data-theme="edge"] .hero-visual {
    opacity: 0.03;
  }
  .custom-cursor {
    display: none;
  }
  .footer-top {
    grid-template-columns: 1fr;
  }
  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .footer-legal-links {
    flex-direction: column;
    gap: 0.5rem;
  }
}

@media (max-width: 480px) {
  /* Phone-portrait portfolio tweaks */
  .portfolio-track {
    gap: var(--space-8);
    padding: 0 var(--space-12);
  }
  .portfolio-item {
    flex: 0 0 92%;
    height: clamp(440px, 72vh, 580px);
    padding: var(--space-20);
  }
  .portfolio-item:hover {
    flex: 0 0 92%;
  }
  .portfolio-title {
    font-size: clamp(1.875rem, 8vw, 2.5rem);
  }
  .portfolio-desc {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  [data-theme="edge"] .portfolio-desc {
    font-size: 1rem;
  }
  .portfolio-metrics {
    gap: var(--space-16);
    flex-wrap: wrap;
  }
  .portfolio-metrics .metric-val {
    font-size: 1.875rem;
  }
  [data-theme="edge"] .portfolio-metrics .metric-val {
    font-size: 2rem;
  }
  .portfolio-metrics .metric-label {
    font-size: 0.6875rem;
  }
  .portfolio-tags {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
  }
  .portfolio-num {
    font-size: 1.5rem;
  }
  .portfolio-indicators {
    margin-top: var(--space-16);
    gap: 6px;
  }
  .portfolio-indicator {
    width: 22px;
    height: 3px;
  }
  .portfolio-indicator.is-active {
    width: 36px;
  }
  .site-menu-inner {
    padding: 80px var(--space-8) var(--space-8);
    gap: var(--space-8);
  }
  .site-menu-nav {
    gap: 0;
  }
  .menu-link {
    font-size: clamp(1.5rem, 8vw, 2.25rem);
    padding: 0.5rem 0;
    gap: var(--space-4);
    flex-wrap: wrap;
  }
  .menu-num {
    font-size: 0.8rem;
  }
  [data-theme="edge"] .menu-num {
    font-size: 1rem;
  }
  .site-menu-footer {
    gap: var(--space-8);
  }
  .site-header {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0.5rem;
    gap: 0.25rem;
  }
  .logo-svg {
    height: 32px; /* Scaled down further for mobile */
  }
  .mode-btn {
    padding: 6px 10px;
    font-size: 0.7rem;
  }
  .menu-toggle {
    padding: 8px 12px;
    font-size: 0.6rem;
  }
  .hero {
    padding-top: 5rem;
  }
  .hero-headline {
    font-size: clamp(2rem, 9vw + 0.5rem, 2.5rem);
    line-height: 1.05;
  }
  [data-theme="edge"] .hero-headline {
    font-size: clamp(2rem, 11vw, 2.75rem);
  }
  .accent-outline {
    -webkit-text-stroke: 1px var(--accent-primary);
  }
  .hero-subhead {
    font-size: 1.0625rem;
  }
  .body-large {
    font-size: 1rem;
  }
  [data-theme="edge"] .hero-subhead {
    font-size: 1rem;
  }
  .btn-primary {
    padding: 16px 20px;
    font-size: 0.95rem;
  }
  .btn-secondary {
    font-size: 0.8rem;
  }
  .btn-primary.huge {
    padding: 18px 24px;
    font-size: 1rem;
  }
}

/* Landscape phones / very short viewports — keep portfolio cards from blowing
   out vertically when the viewport is short. */
@media (max-height: 600px) and (orientation: landscape) {
  .portfolio-item {
    height: clamp(360px, 95vh, 460px);
    min-height: 0;
    padding: clamp(1.125rem, 2.4vh, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  }
  .portfolio-title {
    font-size: clamp(1.5rem, 4.5vw, 2.25rem);
    line-height: 1.05;
  }
  [data-theme="edge"] .portfolio-title {
    font-size: clamp(1.5rem, 4.5vw, 2.25rem);
  }
  .portfolio-desc {
    font-size: 0.875rem;
    line-height: 1.45;
  }
  [data-theme="edge"] .portfolio-desc {
    font-size: 0.95rem;
    line-height: 1.25;
  }
  .portfolio-num {
    font-size: 1.375rem;
  }
  .portfolio-tags {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
  }
  .portfolio-reveal-inner {
    gap: 0.75rem;
    padding-top: 0.25rem;
  }
  .portfolio-main {
    gap: 0.4rem;
  }
  .portfolio-metrics {
    gap: clamp(1rem, 4vw, 2rem);
    margin-top: 0.25rem;
  }
  .portfolio-metrics .metric-val {
    font-size: 1.5rem;
  }
  [data-theme="edge"] .portfolio-metrics .metric-val {
    font-size: 1.625rem;
  }
  .portfolio-metrics .metric-label {
    font-size: 0.625rem;
  }
}