/* ────────────────────────────────────────────────────────────────
   Cruz Ctrl Productions — Public Site Styles
   ────────────────────────────────────────────────────────────────
   Aesthetic: dark engineering / oscilloscope / pedal schematic
   Palette: electric blue (#3d8bff) + warning orange (#ff8a47) on
            deep blue-black bg (#0a0e14) with light cool text.
   ────────────────────────────────────────────────────────────────
*/

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

  :root {
    --bg:           #0a0e14;        /* deep blue-black, page background */
    --bg-2:         #10171f;        /* card / panel */
    --bg-3:         #1a2331;        /* elevated / hover */
    --ink:          #e8eef5;        /* primary text */
    --ink-2:        #c8d3e0;
    --ink-3:        #a3b3c5;
    --ink-4:        #6b7d92;
    --ink-5:        #4a5d75;
    --line:         #1f2c3d;        /* hairline */
    --line-2:       #2a3a4f;
    --line-3:       #3d4f6a;
    --accent:       #3d8bff;        /* electric blue, primary action (brightened for dark) */
    --accent-2:     #5fa3ff;        /* lighter for hover */
    --accent-dim:   rgba(61, 139, 255, 0.18);
    --warn:         #ff8a47;        /* orange — engineering alert / highlight (brightened) */
    --warn-2:       #ffa572;
    --dot:          rgba(232, 238, 245, 0.06);
    --scope-glow:   rgba(61, 139, 255, 0.4);

    --sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  }

  html, body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--ink);
    font-size: 17px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* ─── Page-level dot grid: blueprint paper feel ─── */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0);
    background-size: 22px 22px;
  }

  body > * { position: relative; z-index: 1; }

  .container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
  }
  .container-narrow { max-width: 760px; }

  /* ─── NAV: technical document header bar ─── */
  .nav {
    position: sticky;
    top: 0;
    background: rgba(10, 14, 20, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-2);
    z-index: 50;
  }
  .nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 32px;
    max-width: 1240px;
    margin: 0 auto;
  }
  .nav-left {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .nav-brand {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ink);
    text-decoration: none;
  }
  .nav-brand span { color: var(--accent); }
  .nav-tag {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
    border-left: 1px solid var(--line-2);
    padding-left: 12px;
  }
  .nav-cta {
    background: var(--accent);
    color: #fff;
    padding: 9px 16px;
    border-radius: 2px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--mono);
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background 0.15s;
  }
  .nav-cta:hover { background: var(--accent-2); }

  /* Scroll readout in nav — small instrument indicator */
  .nav-readout {
    margin-left: auto;
    margin-right: 16px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--line-2);
    background: var(--bg-2);
    border-radius: 2px;
  }
  .nav-readout-label { color: var(--ink-4); }
  .nav-readout-value {
    color: var(--accent);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 26px;
    display: inline-block;
    text-align: right;
  }

  /* ──────────────────────────────────────────────────────────── */
  /* HERO — dense, radar element + corner crosshairs + callouts     */
  /* ──────────────────────────────────────────────────────────── */
  .hero {
    min-height: calc(100vh - 53px);
    padding: 60px 0 80px;
    position: relative;
    border-bottom: 1px solid var(--line-2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Corner crosshair marks — top-left and bottom-right */
  .hero::before, .hero::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    background-image:
      linear-gradient(to right, var(--ink-4) 1px, transparent 1px),
      linear-gradient(to bottom, var(--ink-4) 1px, transparent 1px);
    background-size: 40px 1px, 1px 40px;
    background-repeat: no-repeat;
    background-position: center, center;
  }
  .hero::before {
    top: 28px;
    left: 32px;
  }
  .hero::after {
    bottom: 28px;
    right: 32px;
  }

  /* Oscilloscope — top right of hero */
  .hero-scope {
    position: absolute;
    top: 80px;
    right: 80px;
    width: 380px;
    height: 280px;
    pointer-events: none;
  }
  .hero-scope svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* Scope trace: a slow write-and-refresh cycle.
     - 0%   : nothing drawn (offset=100)
     - 90%  : fully drawn (offset=0) — trace persists most of the cycle
     - 100% : reset back to nothing (offset=100, jumps before next cycle)
     This mimics a real scope with a slow time-base: trace writes across,
     persists, then refreshes when the sweep starts a new cycle. */
  @keyframes scope-trace {
    0%   { stroke-dashoffset: 100; }
    90%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
  }
  .scope-head {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: scope-trace 12s linear infinite;
  }

  /* Peak markers — pulse subtly, staggered */
  @keyframes scope-peak-pulse {
    0%, 100% { opacity: 0.35; r: 2.5; }
    50%      { opacity: 1;    r: 4;   }
  }
  .scope-peak {
    animation: scope-peak-pulse 6s ease-in-out infinite;
  }

  /* Faint scrolling grid pulse — adds subtle ambient movement to the reticle */
  @keyframes scope-grid-breath {
    0%, 100% { opacity: 0.18; }
    50%      { opacity: 0.28; }
  }
  .scope-reticle {
    animation: scope-grid-breath 12s ease-in-out infinite;
  }

  /* Hero content */
  .hero-content {
    position: relative;
    z-index: 2;
  }

  .hero-meta-row {
    display: flex;
    gap: 0;
    margin-bottom: 36px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
  }
  .hero-meta-cell {
    padding: 8px 16px 8px 0;
    margin-right: 16px;
    border-right: 1px solid var(--line-2);
    color: var(--ink-3);
  }
  .hero-meta-cell:last-child { border-right: none; }
  .hero-meta-cell strong {
    color: var(--ink);
    font-weight: 600;
  }
  .hero-meta-cell .blink {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--warn);
    border-radius: 50%;
    margin-right: 6px;
    animation: blink 1.4s ease-in-out infinite;
    vertical-align: middle;
  }
  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
  }

  /* Hero title — the span around "Sound." is the emphasis */
  .hero-title {
    font-size: clamp(56px, 11vw, 140px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.95;
    margin-bottom: 32px;
    color: var(--ink);
    position: relative;
  }
  .hero-title .accent {
    color: var(--accent);
    position: relative;
    display: inline-block;
  }

  .hero-line {
    font-size: clamp(20px, 2.4vw, 26px);
    color: var(--ink-2);
    line-height: 1.4;
    max-width: 30ch;
    margin-bottom: 32px;
    font-weight: 400;
  }
  .hero-line em {
    font-style: normal;
    color: var(--ink);
    font-weight: 500;
    background: linear-gradient(to bottom, transparent 60%, var(--accent-dim) 60%);
  }

  .hero-cta-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 28px;
  }
  .btn-primary {
    background: var(--accent);
    color: #fff;
    padding: 14px 28px;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--mono);
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background 0.15s;
    display: inline-block;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
  }
  .btn-primary::after {
    content: ' ↗';
    font-family: var(--sans);
    margin-left: 4px;
  }
  .btn-primary:hover { background: var(--accent-2); }
  .btn-secondary {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line-3);
    padding: 14px 28px;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--mono);
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    display: inline-block;
    cursor: pointer;
    text-transform: uppercase;
  }
  .btn-secondary:hover {
    border-color: var(--accent);
    background: var(--accent-dim);
    color: var(--ink);
  }

  .hero-stamp {
    position: absolute;
    bottom: 50px;
    left: 32px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-4);
    letter-spacing: 0.06em;
    line-height: 1.6;
    border-left: 2px solid var(--warn);
    padding-left: 12px;
  }
  .hero-stamp .label { color: var(--ink-3); }
  .hero-stamp .value { color: var(--ink); }
  .hero-stamp .status-active { color: var(--warn); }

  /* ─── SECTION ─── */
  .section {
    padding: 100px 0;
    border-bottom: 1px solid var(--line-2);
    position: relative;
  }

  /* Sparse vs dense markers on left edge of each section */
  .section-marker {
    position: absolute;
    top: 30px;
    left: 32px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-4);
    letter-spacing: 0.08em;
  }
  .section-marker::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--warn);
    margin-right: 8px;
    vertical-align: middle;
  }

  .section-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
  }
  .section-eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--accent);
  }
  .section-title {
    font-size: clamp(36px, 5.5vw, 60px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin-bottom: 22px;
    max-width: 18ch;
    position: relative;
  }
  /* //: marker sits in the left gutter, vertically centered on the title.
     On wider screens it floats outside the title's flow so the title text
     aligns flush with the body content below. On mobile it sits inline. */
  .title-prefix {
    color: var(--accent);
    font-family: var(--mono);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.04em;
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
  }
  @media (max-width: 880px) {
    .title-prefix {
      position: static;
      transform: none;
      display: inline-block;
      margin-right: 0.4em;
      font-size: 0.5em;
      vertical-align: middle;
    }
  }
  .section-sub {
    font-size: 18px;
    color: var(--ink-3);
    max-width: 50ch;
    line-height: 1.55;
    margin-bottom: 64px;
  }

  /* ─── SERVICES: sparse, three clean schematic blocks ─── */
  .services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line-2);
    border: 1px solid var(--line-2);
  }
  .service {
    background: var(--bg-2);
    padding: 48px 32px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: background 0.15s;
  }
  .service:hover { background: var(--bg-3); }

  /* Service has a small corner tick mark */
  .service::before {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 12px;
    height: 12px;
    border-top: 1px solid var(--line-3);
    border-right: 1px solid var(--line-3);
  }
  .service-num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
    margin-bottom: 28px;
    letter-spacing: 0.06em;
    font-weight: 600;
  }
  .service-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    color: var(--ink);
  }
  .service-desc {
    color: var(--ink-3);
    font-size: 15px;
    line-height: 1.6;
  }

  /* ─── PRODUCTION: dense, instrument readout blocks ─── */
  .production-desc {
    font-size: clamp(20px, 2.4vw, 26px);
    color: var(--ink);
    line-height: 1.4;
    max-width: 38ch;
    margin-bottom: 48px;
    font-weight: 400;
  }
  .production-desc strong { font-weight: 600; }
  .production-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .stat-block {
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    padding: 20px;
    position: relative;
  }
  /* Status indicator dot in top-right of each stat block (override per-block) */
  .stat-block::after {
    content: '';
    position: absolute;
    top: 14px;
    right: 14px;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
  }
  .stat-block.alert::after { background: var(--warn); }
  .stat-header {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    margin-bottom: 14px;
    text-transform: uppercase;
  }
  .stat-value {
    font-family: var(--mono);
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .stat-value .unit {
    font-size: 14px;
    color: var(--ink-3);
    font-weight: 400;
    margin-left: 4px;
  }
  .stat-meta {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-4);
    margin-top: 8px;
    letter-spacing: 0.04em;
  }

  /* ─── RECENT WORK: Eurorack-style modular patch panel ─── */
  .patchbay {
    position: relative;
    margin: 24px 0 24px;
    padding: 0;
  }
  .patchbay-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--line-2);
  }
  .patchbay-head .lbl { color: var(--ink-2); font-weight: 600; }
  .patchbay-head .lbl-meta { color: var(--ink-4); }

  /* The rack holds the modules + the signal cable down the side */
  .rack {
    position: relative;
    padding-left: 80px;  /* leave room for the side cable */
    padding-right: 12px;
  }

  /* Side cable — a vertical line that connects all modules.
     Drawn as an absolutely positioned SVG running floor-to-ceiling. */
  .rack-cable {
    position: absolute;
    left: 32px;
    top: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
  }
  .rack-cable svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* Each module — looks like a labeled rack unit */
  .module {
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    margin-bottom: 14px;
    padding: 22px 24px 22px 26px;
    position: relative;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
    cursor: default;
  }
  /* Module corner ticks for the engineering doc feel */
  .module::before, .module::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-color: var(--ink-4);
    border-style: solid;
    border-width: 0;
    transition: border-color 0.18s;
  }
  .module::before {
    top: 6px; left: 6px;
    border-top-width: 1px;
    border-left-width: 1px;
  }
  .module::after {
    bottom: 6px; right: 6px;
    border-bottom-width: 1px;
    border-right-width: 1px;
  }
  .module:hover {
    border-color: var(--accent);
    background: var(--bg-3);
    box-shadow: 0 1px 0 var(--accent);
  }
  .module:hover::before, .module:hover::after {
    border-color: var(--accent);
  }

  /* Patch-in connector that sits on the LEFT edge — connects to the side cable */
  .module-jack {
    position: absolute;
    left: -54px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: var(--bg);
    border: 1.5px solid var(--ink-2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.18s, background 0.18s;
    z-index: 2;
  }
  .module-jack::after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    transition: background 0.18s, transform 0.18s;
  }
  .module-jack.warn { border-color: var(--warn); }
  .module-jack.warn::after { background: var(--warn); }
  /* The "patch cable" from the jack to the module — short horizontal segment */
  .module-jack-cable {
    position: absolute;
    left: -26px;
    top: 50%;
    width: 26px;
    height: 2px;
    background: var(--accent);
    transform: translateY(-50%);
    transition: background 0.18s;
    z-index: 1;
  }
  .module-jack-cable.warn { background: var(--warn); }
  .module:hover .module-jack::after {
    transform: scale(1.4);
  }
  .module:hover .module-jack-cable {
    background: var(--accent-2);
  }
  .module:hover .module-jack.warn ~ .module-jack-cable,
  .module-jack.warn + .module-jack-cable {
    background: var(--warn);
  }

  /* Module content layout */
  .module-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
  }
  .module-left { flex: 1; min-width: 0; }
  .module-ch {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--warn);
    letter-spacing: 0.08em;
    margin-bottom: 6px;
    display: block;
  }
  .module-name {
    font-size: clamp(22px, 3.2vw, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.1;
    margin-bottom: 4px;
  }
  .module-role {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .module-right {
    text-align: right;
    flex-shrink: 0;
  }
  .module-date {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink);
    letter-spacing: 0.04em;
    font-weight: 600;
  }
  .module-status {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-4);
    letter-spacing: 0.08em;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
  }
  .module-status::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
  }
  .module:hover .module-status { color: var(--accent); }

  /* Output bus — the terminating block at the bottom of the rack */
  .rack-output {
    background: var(--bg-3);
    color: var(--ink);
    padding: 18px 24px 18px 26px;
    margin-top: 4px;
    position: relative;
    margin-left: 0;
    border-top: 2px solid var(--warn);
    border-left: 1px solid var(--line-2);
    border-right: 1px solid var(--line-2);
    border-bottom: 1px solid var(--line-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
  }
  .rack-output-label {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--ink);
    white-space: nowrap;
  }
  .rack-output-label span { color: var(--warn); }

  /* Channel labels — small mono with tick marks above each, like a console */
  .rack-output-channels {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--ink-4);
    border-left: 1px solid var(--line-3);
    border-right: 1px solid var(--line-3);
    padding: 0 18px;
    height: 28px;
  }
  .rack-output-channel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 18px;
  }
  .rack-output-channel::before {
    content: '';
    width: 1px;
    height: 7px;
    background: var(--ink-4);
    opacity: 0.6;
  }
  .rack-output-channel.main {
    color: var(--ink);
    font-weight: 600;
  }
  .rack-output-channel.main::before {
    background: var(--warn);
    opacity: 1;
    height: 9px;
  }

  /* Level meter — row of pulsing LED segments */
  .rack-output-meter {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 20px;
    flex: 0 0 auto;
  }
  .rack-output-meter-bar {
    width: 3px;
    height: 20px;
    background: var(--accent);
    border-radius: 0.5px;
    transform-origin: bottom;
    opacity: 0.85;
    animation: meter-pulse 1.8s ease-in-out infinite;
  }
  /* The last 2 bars go orange — the "peak" zone */
  .rack-output-meter-bar.peak { background: var(--warn); }

  @keyframes meter-pulse {
    0%, 100% { transform: scaleY(0.30); opacity: 0.5; }
    20%      { transform: scaleY(0.55); opacity: 0.7; }
    45%      { transform: scaleY(0.85); opacity: 1; }
    65%      { transform: scaleY(0.45); opacity: 0.65; }
    85%      { transform: scaleY(0.95); opacity: 1; }
  }

  .rack-output-meta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  .rack-output-meta::after {
    content: ' →';
    color: var(--warn);
    font-weight: 700;
  }
  /* The patch cable from the side bus down to the output bar */
  .rack-output-jack {
    position: absolute;
    left: -54px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: var(--bg);
    border: 1.5px solid var(--warn);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .rack-output-jack::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--warn);
    border-radius: 50%;
  }
  .rack-output-jack-cable {
    position: absolute;
    left: -26px;
    top: 50%;
    width: 26px;
    height: 2px;
    background: var(--warn);
    transform: translateY(-50%);
  }

  .press-block {
    margin-top: 24px;
    padding: 20px 22px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-left: 2px solid var(--warn);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
  }
  .press-intro {
    font-size: 14px;
    color: var(--ink-3);
    line-height: 1.5;
    flex: 1;
    min-width: 280px;
  }
  .press-intro strong { color: var(--ink); font-weight: 600; }
  .press-list {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink);
    letter-spacing: 0.08em;
    font-weight: 600;
    flex-wrap: wrap;
  }
  .press-dot { color: var(--ink-4); }
  .press-label {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--warn);
    letter-spacing: 0.08em;
    margin-bottom: 6px;
    font-weight: 600;
    display: block;
  }

  /* ─── INQUIRY FORM: medium-dense, form-fillable doc feel ─── */
  .form-area {
    position: relative;
    padding: 40px 36px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
  }
  /* Faint dot grid behind the form area only */
  .form-area::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(232, 238, 245, 0.07) 1px, transparent 0);
    background-size: 18px 18px;
    pointer-events: none;
    z-index: 0;
  }
  .form-area > * { position: relative; z-index: 1; }
  .form-area-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
  }
  .form-area-title {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
  }
  .form-area-title strong { color: var(--ink); font-weight: 600; }
  .form-area-status {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--accent);
    letter-spacing: 0.06em;
  }
  .form-area-status::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
  }

  .form-toggle-row {
    display: inline-flex;
    background: var(--bg-3);
    border: 1px solid var(--line-2);
    border-radius: 2px;
    padding: 2px;
    margin-bottom: 32px;
    gap: 0;
  }
  .form-toggle-btn {
    background: transparent;
    color: var(--ink-3);
    border: none;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--mono);
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
    border-radius: 2px;
  }
  .form-toggle-btn:hover:not(.active) {
    color: var(--ink);
    background: var(--bg-2);
  }
  .form-toggle-btn.active {
    background: var(--accent);
    color: #fff;
  }

  .inquiry-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .form-extra {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .form-extra.hidden { display: none; }
  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .form-row { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

  label {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .req { color: var(--warn); }

  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="date"], select, textarea {
    background: var(--bg);
    border: 1px solid var(--line-2);
    color: var(--ink);
    font-size: 15px;
    font-family: var(--sans);
    padding: 11px 14px;
    border-radius: 2px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    transition: border-color 0.15s, background 0.15s;
  }
  input::placeholder, textarea::placeholder { color: var(--ink-4); }
  input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-2);
    box-shadow: 0 0 0 3px var(--accent-dim);
  }
  textarea { resize: vertical; min-height: 100px; line-height: 1.5; }

  .check-pill, .budget-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg);
    border: 1px solid var(--line-2);
    padding: 10px 14px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 13px;
    color: var(--ink-2);
    font-family: var(--mono);
    letter-spacing: 0.02em;
    transition: all 0.15s;
  }
  .check-pill:hover, .budget-pill:hover {
    border-color: var(--line-3);
    background: var(--bg-2);
    color: var(--ink);
  }
  .check-pill input, .budget-pill input {
    width: 14px;
    height: 14px;
    accent-color: var(--accent);
    cursor: pointer;
  }
  .check-pill:has(input:checked), .budget-pill:has(input:checked) {
    border-color: var(--accent);
    background: var(--bg-2);
    color: var(--ink);
  }
  .checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .budget-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .budget-pill { flex: 1 1 auto; min-width: 110px; }

  .form-submit-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
  }
  .form-help {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
  }

  /* ─── FOOTER: dense, pedal-circuit schematic + clean text strip ─── */
  .footer {
    position: relative;
    border-top: 1px solid var(--line-2);
    background: var(--bg);
  }
  .footer-schematic-wrap {
    padding: 48px 0 32px;
    position: relative;
    overflow: hidden;
  }
  .footer-schematic-head {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--line-2);
  }
  .footer-schematic-head .lbl { color: var(--ink-2); font-weight: 600; }
  .footer-schematic-head .lbl-meta { color: var(--ink-4); }
  /* Schematic is part of the page flow, not absolutely positioned */
  .footer-circuit {
    width: 100%;
    opacity: 0.78;
    pointer-events: none;
  }
  .footer-circuit svg {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Clean separator + text strip */
  .footer-text-strip {
    border-top: 1px solid var(--line-2);
    background: var(--bg);
    padding: 32px 0 48px;
    position: relative;
  }
  .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 32px;
  }
  .footer-brand {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ink);
  }
  .footer-brand span { color: var(--accent); }
  .footer-sub {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    margin-top: 4px;
  }
  .footer-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    text-align: right;
  }
  .footer-meta a {
    color: var(--ink);
    text-decoration: none;
    transition: color 0.15s;
  }
  .footer-meta a:hover { color: var(--accent); }
  .footer-revision {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-4);
    letter-spacing: 0.06em;
  }

  /* ─── RESPONSIVE ─── */
  @media (max-width: 880px) {
    body { font-size: 16px; }
    body::before {
      background-size: 18px 18px;
    }
    .container { padding: 0 20px; }
    .nav-inner { padding: 12px 20px; }
    .nav-tag { display: none; }
    .nav-readout { display: none; }
    .hero { min-height: calc(100vh - 50px); padding: 40px 0 60px; }
    .hero::before, .hero::after { width: 24px; height: 24px; background-size: 24px 1px, 1px 24px; }
    .hero::before { top: 20px; left: 20px; }
    .hero::after { bottom: 20px; right: 20px; }
    .hero-scope { width: 240px; height: 180px; top: 40px; right: 24px; opacity: 0.6; }
    .hero-meta-row { flex-wrap: wrap; }
    .hero-stamp { display: none; }
    .section { padding: 70px 0; }
    .section-marker { position: static; margin-bottom: 16px; padding-left: 0; }
    .services { grid-template-columns: 1fr; }
    .service { min-height: 0; padding: 36px 24px; }
    .production-stats { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; gap: 14px; }
    .checkbox-grid { grid-template-columns: 1fr; }
    /* Native date inputs need a small font-size on iOS so the picker UI fits */
    input[type="date"] { font-size: 14px; }
    .form-area { padding: 28px 22px; }
    .form-area::before { background-size: 14px 14px; }
    .footer-schematic-wrap { padding: 32px 0 20px; }
    .footer-text-strip { padding: 24px 0 36px; }
    .footer-inner { flex-direction: column; align-items: flex-start; }
    .footer-meta { text-align: left; }
    .patchbay { margin: 16px 0 36px; }
    .rack { padding-left: 36px; padding-right: 0; }
    .rack-cable { left: 14px; width: 16px; }
    .module-jack { left: -28px; width: 20px; height: 20px; }
    .module-jack::after { width: 6px; height: 6px; }
    .module-jack-cable { left: -14px; width: 14px; }
    .module { padding: 18px 18px 18px 22px; }
    .module-row { gap: 10px; }
    .module-right { text-align: left; }
    .module-status { justify-content: flex-start; }
    .rack-output { padding: 14px 18px 14px 22px; flex-wrap: wrap; gap: 12px; }
    .rack-output-channels { display: none; }
    .rack-output-meter { height: 14px; }
    .rack-output-meter-bar { width: 2.5px; }
    .rack-output-jack { left: -28px; width: 20px; height: 20px; }
    .rack-output-jack::after { width: 7px; height: 7px; }
    .rack-output-jack-cable { left: -14px; width: 14px; }
  }
  @media (max-width: 480px) {
    .hero-cta-row { flex-direction: column; align-items: stretch; }
    .hero-cta-row .btn-primary, .hero-cta-row .btn-secondary { text-align: center; }
    .production-stats { grid-template-columns: 1fr; }
    .budget-pill { flex: 1 1 calc(50% - 4px); min-width: 0; }
  }

/* ─── FORM STATES: success, error, loading (dark theme) ─── */
  .form-error {
    background: rgba(255, 138, 71, 0.08);
    border: 1px solid var(--warn);
    border-left-width: 3px;
    color: var(--ink);
    padding: 12px 16px 12px 18px;
    border-radius: 2px;
    font-size: 13px;
    margin-bottom: 16px;
    font-family: var(--sans);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .form-error::before {
    content: '⚠';
    color: var(--warn);
    font-size: 14px;
    flex-shrink: 0;
  }
  .form-error[hidden] { display: none; }

  .form-success {
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    padding: 48px 36px;
    position: relative;
  }
  .form-success[hidden] { display: none; }
  .form-success::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
  }
  .form-success-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
  }
  .form-success-title {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
  }
  .form-success-title strong { color: var(--ink); font-weight: 600; }
  .form-success-status {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--accent);
    letter-spacing: 0.06em;
  }
  .form-success-status::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
  }
  .form-success h3 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 12px;
  }
  .form-success p {
    font-size: 15px;
    color: var(--ink-3);
    line-height: 1.6;
    max-width: 50ch;
  }

  /* Loading state on submit button */
  .btn-primary.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
  }
  .btn-primary.loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: loading-spin 0.7s linear infinite;
  }
  @keyframes loading-spin {
    to { transform: rotate(360deg); }
  }
  .btn-primary.loading::after { content: ''; margin-left: 0; }

  /* Honeypot field — hidden from users, visible to bots */
  .honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }