/* ============================================================
   CRS HOMEPAGE — studio-rack-demo.css
   LOCKED PALETTE: nettle green · mustard · off-white · signal red
   Analogue machine interface. Not a web app.
   Cowley Road Studios, Oxford
   ============================================================ */

/* ── PALETTE (THE ONLY COLOURS THAT EXIST) ──────────────── */
:root {
  /* Nettle green — machine identity */
  --nettle-deep:   #1A231A;   /* page background */
  --nettle:        #243024;   /* panel surface */
  --nettle-mid:    #2F3E2F;   /* raised element */
  --nettle-lift:   #3A4E3A;   /* borders, dividers */
  --nettle-border: rgba(58,78,58,0.70);
  --nettle-border-hi: rgba(80,108,80,0.85);

  /* Mustard — primary accent, the ONLY warm colour in CRS mode */
  --mustard:       #C2A43A;
  --mustard-hi:    #D8B94A;
  --mustard-lo:    rgba(194,164,58,0.18);
  --mustard-glow:  rgba(216,185,74,0.35);

  /* Off-white — all text + café mode background
     SOLID values — no low-opacity rgba for text on dark green backgrounds */
  --offwhite:      #F4F1E8;   /* full — headings, primary labels */
  --offwhite-dim:  #D8D4C8;   /* body copy — was rgba(0.62), now solid equiv */
  --offwhite-mute: #A8A498;   /* secondary/muted — was rgba(0.30), now solid equiv */

  /* Signal red — LEDs and recording-live ONLY */
  --red:           #B23A2B;
  --red-glow:      rgba(178,58,43,0.55);

  /* Café warm tones (used ONLY inside café panel)
     Text on cream bg needs DARKER values for contrast */
  --cafe-bg:       #F4F1E8;   /* cream page bg */
  --cafe-surface:  #E8E0C8;   /* card surface — slightly darker for depth */
  --cafe-deep:     #D8CBAA;   /* inset surface */
  --cafe-border:   #B89A50;   /* border tan */
  --cafe-border-hi:#8A7230;   /* stronger border for visibility on cream */
  --cafe-text:     #1E2A1E;   /* darker nettle — ~13:1 contrast on cream */
  --cafe-text-dim: #4A5E3A;   /* solid dark olive — was rgba(0.60), now solid */
  --cafe-text-mute:#7A7058;   /* quiet secondary on cream */
  --cafe-mustard:  #8A6A10;   /* DARKER mustard for text on cream — ~5:1 contrast */

  /* Typography */
  --font-mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* Geometry — tight, analogue corners */
  --r: 2px;
  --r-md: 4px;
  --r-lg: 6px;
}

/* ── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── BASE — override everything, no framework tokens ─────── */
html, body {
  background: var(--nettle-deep);
  color: var(--offwhite);
  font-family: var(--font-sans);
  font-size: 18px;           /* v5.1 — desktop base: 18px */
  line-height: 1.6;          /* v5.1 — prevents text-wall fatigue */
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 767px) {
  html, body { font-size: 16px; }
}

a { color: inherit; text-decoration: none; }
button { background: none; border: none; font: inherit; cursor: pointer; }

/* ── PAGE SHELL ─────────────────────────────────────────── */
.hp-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--nettle-deep);
  position: relative;
}

/* ── v5.29 OVERRIDES — removed; second block below is authoritative */

/* ── BACKGROUND — Workshop Café neon shopfront
   Image is 869×214px (very wide, shallow strip).
   Neon sign brightness peaks at 30–60% down the image.
   With cover + position center 5vh, the sign lands in the
   18vh gap above the chassis top-plate.
   v5.25: cover fills the window, position pulls sign into gap. */
.hp-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/static/images/bg-cafe-neon.jpg');
  /* Image is 869×214px — very wide, shallow strip.
     100% width keeps it full-bleed; auto height preserves aspect ratio.
     The sign sits 30–60% down the image, so at 100vw width the strip
     is ~25vh tall. background-position top centres it in the 18vh gap. */
  background-size: 869px 214px;      /* v5.42 — native pixel size, no stretch */
  background-position: center top;   /* pinned to top of viewport, centred */
  background-repeat: no-repeat;
  background-attachment: fixed;
  filter: grayscale(100%) blur(1px) brightness(0.75);
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
}

.hp-page > * {
  position: relative;
  z-index: 1;
}

/* ── ACTION BAR — REMOVED (QuickBar deleted) ─────────────── */
.hp-action-bar,
.hp-action-bar-grid,
.hp-action-btn,
.hp-action-btn--primary,
.hp-action-btn--secondary,
.hp-action-btn--ghost,
.hp-action-btn--active { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   IDENTITY MODULE — 1U rack unit (below nav)
   ═══════════════════════════════════════════════════════════════ */
.hp-identity-rail {
  /* 1U rack module — physical edges */
  background-color: #1f1f1f;
  border-top: 2px solid #3a3a3a;       /* Overhead light catch */
  border-bottom: 3px solid #000;       /* Heavy bottom shadow */
  box-shadow:
    inset 0 8px 10px rgba(255,255,255,0.02),
    0 6px 10px rgba(0,0,0,0.4);
  padding: 0.6rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.hp-identity-logo-link {
  flex-shrink: 0;
  display: block;
  opacity: 0.88;
  transition: opacity 0.15s;
}
.hp-identity-logo-link:hover { opacity: 1; }

.hp-identity-address {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244,241,232,0.62);
}
.hp-identity-sep { opacity: 0.35; }

/* Right-side cluster: CRS Active + Contact stacked */
.hp-identity-right {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.28rem;
  flex-shrink: 0;
}

.hp-identity-status {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  font-family: var(--font-mono);
  font-size: 0.60rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(244,241,232,0.62);
}

/* Contact link — sits directly below CRS ACTIVE */
.hp-identity-contact {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(244,241,232,0.42);
  border-bottom: 1px solid rgba(244,241,232,0.18);
  padding-bottom: 1px;
  transition: color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.hp-identity-contact:hover {
  color: rgba(244,241,232,0.85);
  border-color: rgba(194,164,58,0.55);
}

/* ============================================================
   LOCATION LOGO BADGE
   ============================================================ */
.loc-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.loc-logo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.loc-logo--crs    .loc-logo-img { transform: scale(1.0); }
.loc-logo--cricket .loc-logo-img { transform: scale(0.82); }

.loc-logo--btn  { width: 28px; height: 17px; padding: 1px 2px; }
.loc-logo--rail { width: 188px; height: 70px; padding: 2px 3px; }  /* 2× larger */

.loc-logo--card {
  width: 52px; height: 28px;
  padding: 2px 4px;
  background: rgba(244,241,232,0.04);
  border: 1px solid rgba(244,241,232,0.08);
  border-radius: var(--r);
}
.loc-logo--card.loc-logo--crs     { border-color: rgba(194,164,58,0.22); }
.loc-logo--card.loc-logo--cricket { border-color: rgba(58,78,58,0.50); }

.loc-logo--footer { width: 116px; height: 42px; padding: 3px 6px; }

@media (max-width: 640px) {
  .loc-logo--rail   { width: 74px;  height: 27px; }
  .loc-logo--footer { width: 92px;  height: 34px; }
}

/* ─── Cricket Road panel logo — prominent header badge ───────
   Yellow diamond road-sign logo, top-right of panel header.
   Large enough to register as branding, not just an icon.
   ─────────────────────────────────────────────────────────── */
.hp-panel-header--cricket {
  position: relative;
}

.hp-panel-cricket-logo {
  position: absolute;
  top: 0;
  right: 0;
  width: 88px;
  height: 88px;
  opacity: 0.92;
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}

.hp-panel-cricket-logo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 640px) {
  .hp-panel-cricket-logo {
    width: 56px;
    height: 56px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   BRAND PLATE — v3.3
   Manufacturer's anchor. Dominant CRS logo, top and bottom of
   the rack. Static (scrolls with page). Links to home.
   Top plate  = "whose gear is this" — above the chassis.
   Bottom plate = "signature" — closes the circuit below scope.
   ═══════════════════════════════════════════════════════════════ */
.crs-brand-plate {
  display: flex;
  justify-content: center;
  align-items: center;
  /* Max-width tracks the rack chassis so they stay aligned */
  max-width: min(1200px, 90vw);
  width: 90vw;
  margin-left: auto;
  margin-right: auto;
}

/* Top plate — no longer a floating header; kept for bottom-plate only.
   The gap now comes from .hp-machine margin-top:18vh (v5.14). */
.crs-brand-plate--top {
  display: none; /* Logo moved inside chassis as .hp-top-plate (v5.14) */
}

/* Bottom plate — breathing room ABOVE it after the rack chassis */
.crs-brand-plate--bottom {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* The anchor link — block so it contains the image cleanly */
.crs-brand-plate-link {
  display: block;
  line-height: 0;           /* kill phantom inline gap */
  border-radius: 4px;
  transition: opacity 0.18s ease, filter 0.18s ease;
  /* Machined focus ring */
  outline-offset: 6px;
}
.crs-brand-plate-link:hover {
  opacity: 0.82;
  filter: brightness(1.15) drop-shadow(0 0 18px rgba(194,164,58,0.35));
}
.crs-brand-plate-link:focus-visible {
  outline: 2px solid var(--mustard);
}

/* The logo image — large, crisp, object-fit: contain */
.crs-brand-plate-img {
  display: block;
  width: 200px;             /* v3.3 desktop target */
  height: auto;
  object-fit: contain;
  /* Subtle drop-shadow gives the "enamel badge" depth */
  filter:
    drop-shadow(0 2px 6px rgba(0,0,0,0.70))
    drop-shadow(0 0 1px rgba(0,0,0,0.90));
}

/* Mobile */
@media (max-width: 640px) {
  .crs-brand-plate {
    max-width: 100%;
    width: 100%;
  }
  .crs-brand-plate--bottom { padding-top: 1.25rem; padding-bottom: 1.25rem; }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1088px) {
  .crs-brand-plate {
    max-width: min(1200px, calc(100% - 2rem));
    width: calc(100% - 2rem);
  }
}

/* ═══════════════════════════════════════════════════════════════
   TOP PLATE — 1U rack unit: CRS logo bolted into chassis cap (v5.14)
   Rails start here. Logo is NOT a floating header — it IS the top
   of the physical hardware frame.
   ═══════════════════════════════════════════════════════════════ */
.hp-top-plate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.6rem;
  background: linear-gradient(180deg, #1a1a1a 0%, #111 100%);
  /* border-top removed — chassis cap is now on .hp-machine (v5.15) */
  border-bottom: 2px solid #0a0a0a;      /* seam between logo plate and LCD below */
  box-shadow:
    inset 0 4px 8px rgba(255,255,255,0.025),  /* bevelled top highlight */
    inset 0 -2px 6px rgba(0,0,0,0.7),          /* base shadow */
    0 4px 12px rgba(0,0,0,0.5);               /* cast shadow onto LCD below */
  flex-shrink: 0;
}

/* Logo link / reactive button */
.hp-top-plate-link {
  display: block;
  line-height: 0;
  flex-shrink: 0;
  transition: opacity 0.15s, filter 0.15s, transform 0.08s;
  outline-offset: 6px;
  /* reset <button> chrome when used as button */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.hp-top-plate-link:hover {
  opacity: 0.82;
  filter: brightness(1.15) drop-shadow(0 0 14px rgba(194,164,58,0.3));
}
.hp-top-plate-link:focus-visible {
  outline: 2px solid var(--mustard);
}
/* When a service is active — logo glows Nettle Green as a "home" indicator */
.hp-top-plate-link--active .hp-top-plate-img {
  filter:
    drop-shadow(0 0 8px rgba(52,179,74,0.55))
    drop-shadow(0 1px 4px rgba(0,0,0,0.80));
}
.hp-top-plate-link--active:hover .hp-top-plate-img {
  filter:
    drop-shadow(0 0 14px rgba(52,179,74,0.85))
    brightness(1.12)
    drop-shadow(0 1px 3px rgba(0,0,0,0.70));
}
/* Physical press: logo sinks 1 px like a rack button */
.hp-top-plate-link--pressing .hp-top-plate-img,
.hp-top-plate-link:active     .hp-top-plate-img {
  transform: translateY(1px);
  filter:
    drop-shadow(0 0 4px rgba(52,179,74,0.35))
    brightness(0.88)
    drop-shadow(0 1px 2px rgba(0,0,0,0.90));
}

/* Logo image */
.hp-top-plate-img {
  display: block;
  width: 180px;   /* desktop — sits comfortably in the 1U plate height */
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 1px 4px rgba(0,0,0,0.80))
    drop-shadow(0 0 1px rgba(0,0,0,0.90));
}

/* Hardware metadata — right side */
.hp-top-plate-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.18rem;
}
.hp-top-plate-meta-row {
  font-family: var(--font-mono);
  font-size: 0.60rem;
  letter-spacing: 0.12em;
  color: rgba(212,160,23,0.50);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Mobile: tighter, smaller logo, hide metadata */
@media (max-width: 599px) {
  .hp-top-plate {
    padding: 0.65rem 0.75rem;
  }
  .hp-top-plate-img { width: 120px; }
  .hp-top-plate-meta { display: none; }
}

/* Tablet */
@media (min-width: 600px) and (max-width: 1088px) {
  .hp-top-plate-img { width: 155px; }
}

/* Large desktop */
@media (min-width: 1200px) {
  .hp-top-plate-img { width: 200px; }
}

/* ============================================================
   LED INDICATORS
   ============================================================ */
.hp-led {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Green — status only, no glow blur */
.hp-led--on.hp-led--green {
  background: #3CB84A;
  box-shadow: none;
}
/* Red — recording/live signal only */
.hp-led--on.hp-led--red {
  background: var(--red);
  box-shadow: none;
}
/* Mustard — active state feedback */
.hp-led--on.hp-led--mustard {
  background: var(--mustard);
  box-shadow: none;
}
.hp-led--off { background: rgba(244,241,232,0.08); box-shadow: none; }

@keyframes led-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
.hp-led--pulse { animation: led-pulse 2.8s ease-in-out infinite; }

/* ============================================================
   SEGMENTED VU METERS — live signal-driven broadcast meters
   Vertical bar: green 0–60%, amber 60–85%, red 85–100%
   Peak hold marker. Driven by rAF signal engine.
   ============================================================ */

/* Outer wrapper — pair container */
.rack-vu-pair {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  flex-shrink: 0;
}

/* Single meter */
.rack-vu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 18px;
}

.rack-vu-body {
  width: 100%;
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  border-radius: 1px;
  padding: 3px 2px 2px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rack-vu-segments {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Individual segment */
.rack-vu-seg {
  width: 14px;
  height: 4px;
  border-radius: 1px;
  transition: opacity 0.04s linear;
}

/* Unlit — very dim */
.rack-vu-seg--green  { background: #0d2e0d; opacity: 0.55; }
.rack-vu-seg--amber  { background: #2e2200; opacity: 0.55; }
.rack-vu-seg--red    { background: #2e0a0a; opacity: 0.55; }

/* Lit segments */
.rack-vu-seg--green.rack-vu-seg--lit  { background: #2ECC40; opacity: 1; }
.rack-vu-seg--amber.rack-vu-seg--lit  { background: #FFB300; opacity: 1; }
.rack-vu-seg--red.rack-vu-seg--lit    { background: #E03020; opacity: 1; }

/* Peak hold marker — brighter than lit */
.rack-vu-seg--green.rack-vu-seg--peak  { background: #5FFF6A; opacity: 1; }
.rack-vu-seg--amber.rack-vu-seg--peak  { background: #FFD740; opacity: 1; }
.rack-vu-seg--red.rack-vu-seg--peak    { background: #FF5040; opacity: 1; }

/* Channel label below meter */
.rack-vu-label {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 900;
  color: #4a5a4a;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
}

/* Legacy VU (kept for café panel compat — maps to segmented now) */
.hp-vu { display: none; }
.hp-vu-body, .hp-vu-face, .hp-vu-scale, .hp-vu-needle,
.hp-vu-needle-tip, .hp-vu-pivot, .hp-vu-label { display: none; }

/* Idle meters — base colours; higher-specificity block below overrides lit/size */
.hp-idle-meters .rack-vu-body { border-color: #3a3a3a; background: #080808; }

/* ============================================================
   MACHINE SHELL
   ============================================================ */
/* ============================================================
   RACK RAILS — anodised aluminium extrusion with hex bolts
   ============================================================ */
/* ═══════════════════════════════════════════════════════════════
   STEEL RACK RAILS — thick metallic pillars holding modules
   Sit IN FRONT of gear, cast heavy shadow inward
   ═══════════════════════════════════════════════════════════════ */
.srd-rail {
  width: 52px;               /* v3.2 — wider rail for larger chassis presence */
  flex-shrink: 0;
  background: linear-gradient(90deg, #111 0%, #2a2a2a 30%, #1a1a1a 70%, #0a0a0a 100%);
  border-left: 1px solid #333;
  border-right: 2px solid #000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.8rem 8px;
  align-items: center;
  z-index: 50;
  position: relative;
  box-shadow: 
    inset -4px 0 8px rgba(0,0,0,0.6),
    15px 0 20px -5px rgba(0, 0, 0, 0.9);
}
.srd-rail--right {
  transform: scaleX(-1);
  border-left: 2px solid #000;
  border-right: 1px solid #333;
  box-shadow: 
    inset -4px 0 8px rgba(0,0,0,0.6),
    -15px 0 20px -5px rgba(0, 0, 0, 0.9);
}
@media (min-width: 640px) {
  .srd-rail { width: 56px; padding: 1.8rem 10px; }
}

/* Hex bolt icons */
.srd-bolt {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.10))
    drop-shadow(0 2px 4px rgba(0,0,0,0.95));
}
.srd-bolt polygon { fill: #3e3e3e; stroke: #0d0d0d; stroke-width: 4; }
.srd-bolt circle:first-of-type { fill: #1f1f1f; }
.srd-bolt circle:last-of-type  { fill: #0a0a0a; }
/* Slight random rotation for realism */
.srd-bolt:nth-of-type(2n)  { transform: rotate(12deg); }
.srd-bolt:nth-of-type(3n)  { transform: rotate(-8deg); }
.srd-bolt:nth-of-type(5n)  { transform: rotate(22deg); }
.srd-bolt:nth-of-type(7n)  { transform: rotate(-15deg); }
.srd-bolt:nth-of-type(11n) { transform: rotate(33deg); }
@media (min-width: 640px) {
  .srd-bolt { width: 24px; height: 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   HEAVY RACK CHASSIS — physical steel frame, centered, shadowed
   ═══════════════════════════════════════════════════════════════ */
.hp-machine {
  flex: 1;
  max-width: min(1200px, 90vw);  /* v3.2 — wider rack, fills viewport on large screens */
  width: 90vw;
  margin: 18vh auto 0 !important; /* v5.29 — locked 18vh to reveal café window */
  padding: 0;
  display: flex;
  flex-direction: row;            /* rails left | centre-column | rails right */
  align-items: stretch;           /* UNIFIED CHASSIS: rails stretch top-plate → footer */
  gap: 0;
  background-color: #050505;
  border-top: 2px solid #3a3a3a; /* v5.15 — chassis cap shared by rails + logo plate */
  box-shadow:
    0 0 60px 16px rgba(0,0,0,0.9),
    0 0 120px 32px rgba(0,0,0,0.6);
  border-radius: 4px;
  position: relative;
}
/* Tablet: keep side margin */
@media (max-width: 1088px) {
  .hp-machine {
    margin: 18vh auto 0;
    max-width: min(1200px, calc(100% - 2rem));
    width: calc(100% - 2rem);
  }
}
@media (max-width: 599px) {
  .hp-machine {
    margin: 8vh 0.25rem 0;        /* v5.14 — 8vh on mobile keeps BOOK buttons in first fold */
    max-width: calc(100% - 0.5rem);
    width: calc(100% - 0.5rem);
  }
  .srd-rail {
    width: 28px;
    padding: 1rem 3px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MODULE STACK — physical gaps between rack units
   Wider seams expose the black void behind the gear
   ═══════════════════════════════════════════════════════════════ */
/* Centre column — wraps both the interactive rack AND the documentation bay */
.hp-chassis-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.hp-machine-inner {
  flex: 0 0 auto;      /* Don't stretch — only as tall as screen + controls */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;              /* Zero gap — modules sit flush, no black lines */
  background-color: #000;
  padding: 0;
}

/* ============================================================
   SCREEN MODULE — 3U rack unit with physical edges
   ============================================================ */
.hp-screen {
  overflow: hidden;
  /* No min-height — shrinks to fit content (sign + display fill the slot) */
  background: transparent;  /* transparent when idle so no black bleed */
  position: relative;
  border-top: 2px solid #3a3a3a;
  border-bottom: 3px solid #000;
  box-shadow:
    inset 0 8px 10px rgba(255,255,255,0.02),
    0 6px 10px rgba(0,0,0,0.4),
    inset 0 0 38px rgba(0,0,0,0.38);
  transition: border-color 0.5s ease, background 0.5s ease;
}

/* When a service panel is open (powered + active), give the screen room + dark bg */
.hp-page--powered .hp-screen:has(.hp-display-panel),
.hp-page--powered .hp-screen:has(.hp-loc-selector) {
  min-height: 340px;
  background-color: #000000;
}

/* Screen shifts toward warm when café is active */
.hp-page--cafe .hp-screen {
  border-color: var(--cafe-border);
  background: var(--cafe-bg);
  box-shadow:
    inset 0 0 30px rgba(47,62,47,0.08),
    0 0 0 1px rgba(194,164,58,0.12);
}

/* ═══════════════════════════════════════════════════════════════
   IDLE STATE — rack-mounted display layout
   ═══════════════════════════════════════════════════════════════ */

/* Module background: transparent — nothing bleeds behind sign/display */
.hp-idle {
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* v3.2 — rack-unit separators between modules */
  row-gap: 0;
}

/* ═══════════════════════════════════════════════════════════════
   UNIT 3 — BRANDING PLATE  v5.21
   One element. Dark metal. Sign fills wall-to-wall. No float.
   ═══════════════════════════════════════════════════════════════ */
.hp-idle-faceplate {
  display: block !important;
  /* Bleed over rails exactly like .hp-idle-display — same -52px trick */
  width: calc(100% + 104px) !important;
  margin: 0 -52px !important;
  padding: 0 !important;
  background: #060c06;
  border-top: 2px solid #2a2a2a;
  border-bottom: 2px solid #000;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.8),
    inset 0 -2px 4px rgba(0,0,0,0.6);
  overflow: hidden;
  position: relative;
  z-index: 55; /* above rails (z-index: 50) so sign ears sit on top */
}

/* picture must be block — inline default shrinks it to content width */
.hp-idle-faceplate picture {
  display: block !important;
  width: 100% !important;
  line-height: 0;
}

/* Sign image — wall-to-wall, no padding gaps */
.hp-idle-sign {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: fill;
  padding: 0 !important;
  margin: 0 !important;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.95));
}

/* ═══════════════════════════════════════════════════════════════
   DISPLAY MODULE — shallow status screen (real hardware)
   Compressed height, fitted bezel, smoked glass, scanlines
   ═══════════════════════════════════════════════════════════════ */
.hp-idle-display {
  /* Shallow fitted display module — top of idle stack */
  padding: 0;
  margin: 0 -52px;   /* v3.2 — extends over wider rails */
  background: 
    linear-gradient(180deg, #0a0a0a 0%, #121212 50%, #0a0a0a 100%);
  position: relative;
  z-index: 60;
  border: 4px solid #1a1a1a;
  border-top-width: 8px;
  border-bottom-width: 4px;
  border-radius: 2px;
  box-shadow: 
    inset 0 0 40px rgba(0,0,0,0.95),
    inset 0 10px 22px rgba(0,0,0,0.9),
    inset 0 -4px 10px rgba(0,0,0,0.70),
    0 -2px 0 rgba(255,255,255,0.03),
    0 3px 0 rgba(0,0,0,0.6);
  overflow: hidden;
}
/* Rail widths by breakpoint: mobile=28px desktop=56px */
@media (max-width: 639px) {
  .hp-idle-display {
    margin: 0 -28px;
  }
}
@media (min-width: 640px) {
  .hp-idle-display {
    margin: 0 -56px;
  }
}

/* Display face — LCD panel with dot-matrix pixel grid */
.hp-idle-lcd {
  padding: 1.1rem 2rem 1.15rem;   /* v3.2 — taller LCD bezel, more breathing room */
  position: relative;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(0,28,8,0.95) 0%, rgba(0,10,4,1) 100%);
}

/* Dot-matrix pixel grid overlay — authentic LCD look */
.hp-idle-lcd::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(0,0,0,0.55) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events: none;
  z-index: 1;
}

/* Glass reflection — top-left highlight */
.hp-idle-lcd::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 55%;
  bottom: 65%;
  background: linear-gradient(135deg, rgba(255,255,255,0.025) 0%, transparent 100%);
  pointer-events: none;
  z-index: 3;
}

/* Display lines — shared LCD character style */
.hp-display-line {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
  display: block;
  /* Amber LCD phosphor colour */
  color: #e8a020;
  /* Segment glow: tight bright core + soft wide halo */
  text-shadow:
    0 0 4px  rgba(255,180,40,1),
    0 0 10px rgba(255,160,20,0.8),
    0 0 22px rgba(255,140,0,0.45),
    0 0 40px rgba(200,100,0,0.2);
}

/* Line 1 — OXFORD location tag (v3.2: +40% larger) */
.hp-display-line--location {
  font-size: 15px;            /* was 11px — ~+36% */
  font-weight: 400;
  letter-spacing: 0.50em;
  line-height: 1.25;
  margin-bottom: 0.45rem;
  color: #c87010;
  text-shadow:
    0 0 3px  rgba(220,140,20,0.9),
    0 0 8px  rgba(200,110,10,0.5),
    0 0 18px rgba(180,80,0,0.25);
  animation: lcd-boot 0.5s ease-out 0.05s both;
}

/* Line 2 — Core services (v3.2: +40% larger) */
.hp-display-line--primary {
  font-size: 18px;            /* was 13px — ~+38% */
  font-weight: 400;
  letter-spacing: 0.20em;
  line-height: 1.35;
  color: #f0b030;
  text-shadow:
    0 0 4px  rgba(255,200,50,1),
    0 0 12px rgba(255,170,30,0.85),
    0 0 26px rgba(240,140,10,0.5),
    0 0 50px rgba(200,100,0,0.25);
  animation: lcd-boot 0.5s ease-out 0.15s both;
}

/* Line 3 — Grassroots tagline */
.hp-display-line--tagline {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.30em;
  line-height: 1.3;
  margin-top: 0.55rem;
  color: #c87010;
  text-shadow:
    0 0 3px  rgba(220,140,20,0.9),
    0 0 8px  rgba(200,110,10,0.5),
    0 0 18px rgba(180,80,0,0.25);
  animation: lcd-boot 0.5s ease-out 0.28s both;
}

/* LCD boot flicker — each line fades in with a single flicker */
@keyframes lcd-boot {
  0%   { opacity: 0; }
  30%  { opacity: 0.7; }
  45%  { opacity: 0.2; }
  60%  { opacity: 1; }
  75%  { opacity: 0.85; }
  100% { opacity: 1; }
}

/* Slow idle pulse — like a real LCD panel with slight brightness variation */
@keyframes lcd-pulse {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(1.06); }
}
.hp-idle-lcd {
  animation: lcd-pulse 4s ease-in-out infinite;
}

/* Meters removed — terminal screen only */

/* Single analogue dial wrapper */
.avu-dial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 88px;
}

/* SVG dial — 1.5× the base 60px → ~90px wide */
.avu-svg {
  width: 88px;
  height: auto;
  display: block;
  /* Subtle glass depth */
  filter:
    drop-shadow(0 1px 2px rgba(0,0,0,0.55))
    drop-shadow(0 0 1px rgba(0,0,0,0.4));
}

/* Channel label beneath dial */
.avu-label {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4a5a4a;
  line-height: 1;
  text-align: center;
}

@media (max-width: 600px) {
  .hp-idle-faceplate { border-top-width: 1px; margin: 0 !important; padding: 0 !important; }
  .hp-idle-sign      { padding: 0 !important; margin: 0 !important; width: 100% !important; }
  .hp-idle-display   { padding: 0; }
  .hp-idle-meters    { gap: 1rem; padding: 1rem 1.25rem; }
}

/* ============================================================
   DISPLAY PANEL — animates in on state change
   ============================================================ */
@keyframes panel-enter {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes panel-enter-warm {
  from { opacity: 0; transform: translateY(3px); filter: saturate(0.7); }
  to   { opacity: 1; transform: translateY(0);   filter: saturate(1); }
}

.hp-display-panel { display: flex; flex-direction: column; }

.hp-display-panel--dark.hp-display-panel--enter {
  animation: panel-enter 0.28s ease-out both;
}
.hp-display-panel--warm.hp-display-panel--enter {
  animation: panel-enter-warm 0.42s ease-out both;
}

/* ── Chrome strip (dark panels only) ───────────────────── */
.hp-display-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.38rem 1.25rem;
  background: var(--nettle-deep);
  border-bottom: 1px solid var(--nettle-border);
}

.hp-display-chrome-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.60rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--offwhite-mute);
}

.hp-display-service-id {
  color: var(--mustard);
  letter-spacing: 0.18em;
  font-weight: 700;
}

.hp-display-chrome-right {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  opacity: 0.65;
}

/* ── Dark panel body ────────────────────────────────────── */
.hp-panel-body {
  padding: 1.75rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: var(--nettle);
}

.hp-panel-header { display: flex; flex-direction: column; gap: 0.32rem; }

.hp-panel-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mustard);
  opacity: 0.75;
}

.hp-panel-title {
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 2.7vw, 1.55rem);
  font-weight: 700;
  color: var(--offwhite);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.hp-panel-desc {
  font-size: 1.06rem;          /* v3.2 — was 0.94rem, min 1.05rem per spec */
  color: var(--offwhite-dim);
  line-height: 1.6;
  max-width: 52ch;
}

/* ── Spec table ─────────────────────────────────────────── */
.hp-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 1.5rem;
}

.hp-spec-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.38rem 0;
  border-bottom: 1px solid var(--nettle-border);
}

.hp-spec-key {
  font-family: var(--font-mono);
  font-size: 0.60rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--offwhite-mute);
  flex-shrink: 0;
  min-width: 88px;  /* F-pattern: brand names always flush-left, never wrapping */
}

.hp-spec-val {
  font-size: 1rem;  /* 18 px — body-copy size for gear list readability */
  color: var(--offwhite);
  line-height: 1.4;
}

/* ── CTA buttons ────────────────────────────────────────── */
.hp-panel-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.hp-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.62rem 1.2rem;
  min-height: 48px;            /* WCAG 2.5.8 — 48 × 48 px minimum touch target */
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r);
  cursor: pointer;
  transition: filter 0.12s, transform 0.1s, box-shadow 0.12s;
  border: 1px solid transparent;
  white-space: nowrap;
}
.hp-cta:hover  { filter: brightness(1.10); transform: translateY(-1px); }
.hp-cta:active { transform: translateY(0);  filter: brightness(0.94); }

.hp-cta-arrow { opacity: 0.60; transition: transform 0.12s, opacity 0.12s; }
.hp-cta:hover .hp-cta-arrow { transform: translateX(3px); opacity: 1; }

/* Dark mode CTA — mustard fill */
.hp-cta--primary {
  background: var(--mustard);
  color: var(--nettle-deep);
  border-color: #9A8028;
  box-shadow: 0 1px 6px rgba(194,164,58,0.22);
}
.hp-cta--primary:hover {
  background: var(--mustard-hi);
  box-shadow: 0 3px 12px var(--mustard-glow);
}

.hp-cta--secondary {
  background: transparent;
  color: var(--mustard);
  border-color: rgba(194,164,58,0.35);
}
.hp-cta--secondary:hover {
  background: var(--mustard-lo);
  border-color: var(--mustard);
}

/* Warm mode CTA — same mustard, reads differently on light bg */
.hp-cta--warm-primary {
  background: var(--mustard);
  color: var(--nettle-deep);
  border-color: #9A8028;
  box-shadow: 0 1px 6px rgba(194,164,58,0.28);
}
.hp-cta--warm-primary:hover {
  background: var(--mustard-hi);
  box-shadow: 0 3px 12px var(--mustard-glow);
}

/* Page link CTA — quiet ghost link inside panel */
.hp-cta--page-link {
  background: transparent;
  color: var(--offwhite-dim);
  border-color: var(--nettle-border);
  font-size: 0.65rem;
  letter-spacing: 0.10em;
}
.hp-cta--page-link:hover {
  color: var(--offwhite);
  border-color: var(--nettle-border-hi);
}

/* Warm secondary — for café panel */
.hp-cta--warm-secondary {
  background: transparent;
  color: var(--cafe-text-dim);
  border-color: var(--cafe-border);
  font-size: 0.65rem;
  letter-spacing: 0.10em;
}
.hp-cta--warm-secondary:hover {
  color: var(--cafe-text);
  border-color: var(--cafe-mustard);
}

/* ============================================================
   LOCATION SELECTOR — hardware-style intermediate layer
   Appears between service selection and service detail.
   Matches rack panel language: dark surface, monospaced labels,
   mustard/nettle accent system, physical button feel.
   ============================================================ */
.hp-loc-selector {
  display: flex;
  flex-direction: column;
  background: var(--nettle);
  animation: panel-enter 0.28s ease-out both;
}

/* Instruction header */
.hp-loc-body {
  padding: 1.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hp-loc-header { display: flex; flex-direction: column; gap: 0.25rem; }

.hp-loc-instruction {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--offwhite-mute);
  margin: 0;
}

/* Location option buttons — hardware selector pads */
.hp-loc-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 560px) {
  .hp-loc-options { grid-template-columns: 1fr; }
}

.hp-loc-btn {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.1rem 1.1rem 1.1rem 1rem;
  min-height: 48px;            /* WCAG 2.5.8 — 48 × 48 px minimum touch target */
  background: var(--nettle-deep);
  border: 1px solid var(--nettle-lift);
  border-top: 2px solid var(--nettle-lift);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.08s;
  position: relative;
  /* Physical button depth shadow */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 2px 6px rgba(0,0,0,0.45),
    0 1px 2px rgba(0,0,0,0.35);
}
.hp-loc-btn:hover {
  background: var(--nettle-mid);
  border-color: var(--mustard);
  border-top-color: var(--mustard-hi);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(194,164,58,0.18),
    0 4px 14px rgba(0,0,0,0.5),
    0 0 18px rgba(194,164,58,0.12);
  transform: translateY(-1px);
}
.hp-loc-btn:active,
.hp-loc-btn--focused {
  transform: translateY(0);
  background: var(--nettle-mid);
  border-color: var(--mustard-hi);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.4),
    0 1px 3px rgba(0,0,0,0.5);
}

/* CRS site — mustard top accent */
.hp-loc-btn--crs {
  border-top-color: var(--mustard);
}
.hp-loc-btn--crs:hover,
.hp-loc-btn--crs.hp-loc-btn--focused {
  border-top-color: var(--mustard-hi);
}

/* Cricket Road — nettle-green top accent */
.hp-loc-btn--cricket {
  border-top-color: var(--nettle-lift);
}
.hp-loc-btn--cricket:hover,
.hp-loc-btn--cricket.hp-loc-btn--focused {
  border-top-color: #5A7A5A;
}

/* Logo badge slot */
.hp-loc-btn-logo {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* Text block */
.hp-loc-btn-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
}

.hp-loc-btn-name {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--offwhite);
  line-height: 1.2;
}

.hp-loc-btn-address {
  font-family: var(--font-mono);
  font-size: 0.60rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--mustard);
  opacity: 0.80;
}

.hp-loc-btn-desc {
  font-size: 1.05rem;          /* v3.2 — was 0.82rem, min 1.05rem per spec */
  color: var(--offwhite-dim);
  line-height: 1.58;
  margin-top: 0.3rem;
}

/* Hardware indicator: LED + arrow */
.hp-loc-btn-indicator {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.1rem 0;
  min-height: 2.5rem;
}

.hp-loc-btn-led {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nettle-lift);
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
  transition: background 0.15s, box-shadow 0.15s;
}
.hp-loc-btn:hover .hp-loc-btn-led,
.hp-loc-btn--focused .hp-loc-btn-led {
  background: var(--mustard);
  box-shadow: 0 0 8px var(--mustard-glow), 0 0 3px var(--mustard);
}

.hp-loc-btn-arrow {
  font-family: var(--font-mono);
  font-size: 0.80rem;
  color: var(--offwhite-mute);
  transition: color 0.12s, transform 0.12s;
}
.hp-loc-btn:hover .hp-loc-btn-arrow,
.hp-loc-btn--focused .hp-loc-btn-arrow {
  color: var(--mustard);
  transform: translateX(3px);
}

/* Back button — quiet ghost control */
.hp-loc-back {
  display: flex;
  align-items: center;
  padding-top: 0.25rem;
  border-top: 1px solid var(--nettle-border);
}

.hp-loc-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: none;
  color: var(--offwhite-mute);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.3rem 0;
  transition: color 0.12s;
}
.hp-loc-back-btn:hover { color: var(--offwhite); }

/* ── Location nav strip inside service panel ── */
.hp-panel-location-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 1.25rem;
  background: var(--nettle-deep);
  border-bottom: 1px solid var(--nettle-border);
  flex-wrap: wrap;
}

.hp-panel-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid var(--nettle-border);
  color: var(--offwhite-mute);
  font-family: var(--font-mono);
  font-size: 0.60rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.28rem 0.65rem;
  border-radius: var(--r);
  transition: color 0.12s, border-color 0.12s;
}
.hp-panel-back-btn:hover {
  color: var(--offwhite);
  border-color: var(--mustard);
}

.hp-panel-location-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.60rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mustard);
  opacity: 0.85;
}

/* Single-location rehearsal layout */
.hp-rehearsal-split--single {
  grid-template-columns: 1fr;
  max-width: 380px;
}

/* Mobile loc body padding */
@media (max-width: 640px) {
  .hp-loc-body { padding: 1.2rem 1rem 1.5rem; }
  .hp-panel-location-nav { padding: 0.5rem 0.75rem; }
}

/* ============================================================
   REHEARSAL PANEL — two-location cards
   ============================================================ */
.hp-panel-body--rehearsal { gap: 1.2rem; }

.hp-rehearsal-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 620px) {
  .hp-rehearsal-split { grid-template-columns: 1fr; }
}

.hp-rehearsal-card {
  padding: 1.2rem;
  border-radius: var(--r-md);
  background: var(--nettle-mid);
  border: 1px solid var(--nettle-border);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
/* Mustard top accent for CRS; nettle-lift accent for Cricket */
.hp-rehearsal-card--crs     { border-top: 2px solid var(--mustard); }
.hp-rehearsal-card--cricket { border-top: 2px solid var(--nettle-lift); }

.hp-rehearsal-card-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.hp-rehearsal-name {
  font-family: var(--font-mono);
  font-size: 0.80rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--offwhite);
}
.hp-rehearsal-post {
  font-family: var(--font-mono);
  font-size: 0.60rem;
  letter-spacing: 0.10em;
  color: var(--mustard);
  opacity: 0.60;
  margin-top: 1px;
}

.hp-rehearsal-specs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.26rem;
  flex: 1;
}
.hp-rehearsal-specs li {
  font-size: 0.83rem;
  color: var(--offwhite-dim);
  padding-left: 0.9rem;
  position: relative;
}
.hp-rehearsal-specs li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--mustard);
  opacity: 0.65;
}

/* ============================================================
   ████████████████████████████████████████████████████████
   WORKSHOP CAFÉ PANEL — the full warm mode
   "Stepping out of the control room into the café"
   ████████████████████████████████████████████████████████
   ============================================================ */

/* Entire display switches to off-white */
.hp-display-panel--warm {
  background: var(--cafe-bg);
}

/* ── Sign-shaped header ─────────────────────────────────── */
/*
   Borrows from the physical café sign language:
   a slight angled bottom, warm parchment field,
   thick mustard left rule, hand-printed feel
*/
.hp-cafe-sign-header {
  position: relative;
  padding: 1.4rem 2rem 1.2rem;
  background: var(--cafe-surface);
  border-bottom: 2px solid var(--cafe-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;

  /* Angled bottom — signage motif */
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 10px),
    97% 100%,
    3%  100%,
    0   calc(100% - 10px)
  );

  /* Subtle horizontal line texture — aged paper */
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 7px,
    rgba(47,62,47,0.030) 7px,
    rgba(47,62,47,0.030) 8px
  );
}

/* Thick mustard left rule — like a printed sign border */
.hp-cafe-sign-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--mustard);
}

.hp-cafe-sign-inner {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.hp-cafe-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--cafe-mustard);
  font-weight: 600;
}

.hp-cafe-logo-mark {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 2px;
  opacity: 0.80;
}

.hp-cafe-title {
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 700;
  color: var(--cafe-text);
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.hp-cafe-subtitle {
  font-size: 0.87rem;
  color: var(--cafe-text-dim);
  font-style: italic;
}

.hp-cafe-meters {
  display: flex;
  gap: 0.4rem;
  align-self: flex-start;
  opacity: 0.55;
  margin-top: 2px;
}

/* ── Café body ──────────────────────────────────────────── */
.hp-cafe-body {
  padding: 1.5rem 2rem 2rem;
  background: var(--cafe-bg);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hp-cafe-desc {
  font-size: 0.96rem;
  color: var(--cafe-text);
  line-height: 1.72;
  max-width: 52ch;
  opacity: 0.82;
}

.hp-cafe-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 640px) {
  .hp-cafe-grid { grid-template-columns: 1fr; }
}

/* ── Spec cards (print-like, warm) ──────────────────────── */
.hp-cafe-spec-cards {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.hp-cafe-spec-card {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.48rem 0.7rem;
  background: var(--cafe-surface);
  border: 1px solid var(--cafe-border);
  border-left: 3px solid var(--cafe-mustard);
  border-radius: 0 var(--r) var(--r) 0;
  box-shadow: 0 1px 2px rgba(47,62,47,0.07);
}

.hp-cafe-spec-key {
  font-family: var(--font-mono);
  font-size: 0.60rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cafe-mustard);
  flex-shrink: 0;
  min-width: 58px;
  font-weight: 700;
}

.hp-cafe-spec-val {
  font-size: 0.86rem;
  color: var(--cafe-text);
  line-height: 1.4;
}

/* ── CTA block ──────────────────────────────────────────── */
.hp-cafe-cta-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.2rem;
  background: var(--cafe-deep);
  border: 1px solid var(--cafe-border);
  border-radius: var(--r-md);
  box-shadow:
    inset 0 1px 0 rgba(244,241,232,0.55),
    0 2px 6px rgba(47,62,47,0.09);
}

.hp-cafe-cta-lead {
  font-size: 0.87rem;
  color: var(--cafe-text-dim);
  line-height: 1.62;
}

.hp-cafe-social-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cafe-text);
  opacity: 0.55;
  text-decoration: underline;
  text-decoration-color: rgba(47,62,47,0.25);
  text-underline-offset: 3px;
  transition: opacity 0.14s;
}
.hp-cafe-social-link:hover { opacity: 0.90; }

/* ============================================================
   ████████████████████████████████████████████████████████
   SERVICE CONTROLS — hardware button panel below screen
   ████████████████████████████████████████████████████████
   ============================================================ */
/* ═══════════════════════════════════════════════════════════════
   CONTROL MODULE — lower rack unit with physical edges
   ═══════════════════════════════════════════════════════════════ */
.hp-controls {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0E0E0E;
  /* 3D module edges */
  background-color: #1f1f1f;
  border-top: 2px solid #3a3a3a;       /* Overhead light catch */
  border-bottom: 3px solid #000;       /* Heavy bottom shadow */
  box-shadow:
    inset 0 8px 10px rgba(255,255,255,0.02),
    0 6px 10px rgba(0,0,0,0.4);
}

/* Seam rail — flat divider line */
.hp-controls-rail {
  height: 1px;
  background: #2a2a2a;
}

/* Button grid — v5.29: flex nowrap, 5 buttons always single row */
.hp-controls-buttons {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 1rem 0.75rem 1.1rem;
  background: transparent;
}

/* Tablet — keep flex nowrap */
@media (max-width: 900px) {
  .hp-controls-buttons {
    gap: 4px !important;
    padding: 0.75rem 0.4rem 0.9rem;
  }
}
/* Phone portrait — tighten but stay single row */
@media (max-width: 480px) {
  .hp-controls-buttons {
    gap: 2px !important;
    padding: 0.6rem 0.3rem 0.75rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RACK BUTTON — physical hardware switch
   States: idle | hover | press | active
   Physical: bevel, inset shadow, LED, translateY on press
   ═══════════════════════════════════════════════════════════════ */
.rack-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 1.1rem 0.3rem 1.15rem;
  padding-inline: 4px !important;  /* v5.29 — flex: even narrower horizontal pad */
  margin: 2px;
  min-width: 0 !important;         /* v5.29 — must be 0 inside flex to prevent wrap */
  flex: 1 1 0 !important;          /* v5.29 — equal-width flex items */
  min-height: 100px;

  /* MUSTARD default state — warm neon standby */
  background:
    linear-gradient(180deg,
      #2a2208 0%,
      #1f1a06 40%,
      #151204 100%
    );
  border: 1px solid #5a4a15;
  border-bottom-color: #3a2a0a;
  border-radius: 2px;

  /* Machined bevel */
  box-shadow:
    inset 0 1px 0 rgba(200,170,66,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.7),
    inset 1px 0 0 rgba(200,170,66,0.04),
    inset -1px 0 0 rgba(0,0,0,0.5),
    0 0 10px rgba(181,166,66,0.30);

  color: rgba(200,176,64,0.90);
  cursor: pointer;
  transition:
    border-color   0.08s ease,
    color          0.08s ease,
    transform      0.06s ease,
    box-shadow     0.08s ease,
    background     0.08s ease;
  will-change: transform;
  touch-action: manipulation;
  user-select: none;
}

/* Hover — brighter mustard neon glow */
.rack-btn:hover:not(.rack-btn--active) {
  color: #FFEBB0;
  border-color: #C9A227;
  border-bottom-color: #8A7830;
  background:
    linear-gradient(180deg,
      #3a2f08 0%,
      #2a2206 40%,
      #1a1604 100%
    );
  box-shadow:
    0 0 12px rgba(200,170,66,0.60),
    0 0 24px rgba(200,170,66,0.35),
    inset 0 1px 0 rgba(255,235,120,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.7);
  /* Flicker animation — subtle strobe before settling */
  animation: btn-flicker 0.35s ease-out forwards;
}

@keyframes btn-flicker {
  0%   { box-shadow: 0 0 8px rgba(200,170,66,0.4), inset 0 1px 0 rgba(255,235,120,0.1); }
  15%  { box-shadow: 0 0 16px rgba(200,170,66,0.65), 0 0 28px rgba(200,170,66,0.40), inset 0 1px 0 rgba(255,235,120,0.2); }
  30%  { box-shadow: 0 0 6px rgba(200,170,66,0.35), inset 0 1px 0 rgba(255,235,120,0.08); }
  50%  { box-shadow: 0 0 14px rgba(200,170,66,0.60), 0 0 26px rgba(200,170,66,0.38), inset 0 1px 0 rgba(255,235,120,0.18); }
  100% { box-shadow: 0 0 12px rgba(200,170,66,0.60), 0 0 24px rgba(200,170,66,0.35), inset 0 1px 0 rgba(255,235,120,0.18), inset 0 -1px 0 rgba(0,0,0,0.7); }
}

/* Physical press — button depresses 1px */
.rack-btn--press {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8),
    inset 0 -0px 0 rgba(0,0,0,0.2);
}

/* Active / selected — GREEN indicator, system ready */
.rack-btn--active {
  background:
    linear-gradient(180deg,
      #0a1f0a 0%,
      #061806 40%,
      #041004 100%
    );
  border-color: #2ECC40;
  border-bottom-color: #1a8028;
  color: #5FFF6A;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.90),
    inset 0 -1px 0 rgba(46,204,64,0.15),
    0 0 12px rgba(46,204,64,0.40),
    0 0 24px rgba(46,204,64,0.20);
}

/* Focus visible — keyboard nav */
.rack-btn:focus-visible {
  outline: 2px solid var(--mustard);
  outline-offset: 1px;
  z-index: 2;
}

/* Café variant — warm amber tint when inactive */
.rack-btn--cafe {
  border-color: rgba(194,164,58,0.28);
  color: rgba(194,164,58,0.55);
}
.rack-btn--cafe:hover:not(.rack-btn--active) {
  border-color: #B5A642;
  color: #E0D060;
}
.rack-btn--cafe.rack-btn--active {
  border-color: #C8A830;
  color: #D4B040;
}

/* ── Button label — brightens to orange on hover ─────────── */
.rack-btn-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;          /* v5.27 — fits 5 labels including CAFÉ & VENUE */
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  overflow-wrap: break-word;
  word-break: break-word;      /* last resort: break long label rather than wrap button */
  transition: color 0.08s ease;
}
.rack-btn:hover:not(.rack-btn--active) .rack-btn-label {
  color: #FFB870;
  pointer-events: none;
  color: inherit;
}

/* ── Per-button LED indicator ───────────────────────────── */
.rack-btn-led {
  display: block;
  width: 5px; height: 5px;
  border-radius: 50%;
  pointer-events: none;
  flex-shrink: 0;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

/* Off — nearly invisible housing indent */
.rack-btn-led--off {
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.8);
}

/* Active — solid green, no soft glow, just clean LED */
.rack-btn-led--active {
  background: #2ECC40;
  box-shadow: none;
}

/* Bloom — brief bright flash on click, then fades to active */
@keyframes led-bloom {
  0%   { background: #7FFFA0; box-shadow: none; }
  30%  { background: #4EE860; }
  100% { background: #2ECC40; }
}
.rack-btn-led--bloom {
  animation: led-bloom 0.38s ease-out forwards;
}

/* Legacy selectors — kept for any residual refs */
.hp-ctrl-btn        { display: none; }
.hp-ctrl-label      { display: none; }
.hp-ctrl-led        { display: none; }

/* ── Status strip at bottom ──────────────────────────────── */
.hp-controls-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.38rem;
  padding: 0.28rem 0.9rem;
  border-top: 1px solid rgba(0,0,0,0.45);
  background: rgba(0,0,0,0.20);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--offwhite-mute);
}

/* ═══════════════════════════════════════════════════════════════
   CAFÉ HIRE UNIT (chу) — v5.32
   Reference: Workshop Café hardware panel image.
   Layout: [gear-logo | text block | knobs / VU meters / jacks+LED]
   Fascia: deep olive-green powder-coat, gold inset border frame,
   chrome knobs top-right, amber VU meters mid-right,
   jack socket row + power LED bottom-right.
   ═══════════════════════════════════════════════════════════════ */

/* ── Scoped design tokens ──────────────────────────────────── */
.chу {
  --cg:      #3a4e28;   /* fascia green — dark olive/forest  */
  --cg-hi:   #4d6635;   /* highlight top edge                */
  --cg-lo:   #242f17;   /* shadow bottom edge                */
  --cg-mid:  #2e3f1e;   /* mid tone                         */
  --gold:    #c8a84b;   /* warm brass gold                   */
  --gold-dk: #7a6020;   /* shadow gold                       */
  --gold-lt: #e8c870;   /* highlight gold                    */
  --cream:   #f0e0b0;   /* primary text                      */
  --cream-d: #a89060;   /* secondary / dim text              */

  position: relative;
  width: 100%;
  border-top:    2px solid #111;
  border-bottom: 2px solid #080808;
}

/* ── FASCIA ─────────────────────────────────────────────────── */
.chу-fascia {
  position: relative;
  width: 100%;
  min-height: 130px;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  border: none;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0px, transparent 2px,
      rgba(0,0,0,0.06) 2px, rgba(0,0,0,0.06) 3px
    ),
    linear-gradient(160deg,
      var(--cg-hi) 0%,
      var(--cg)    30%,
      var(--cg-mid) 65%,
      var(--cg-lo) 100%
    );
  box-shadow:
    inset 0  2px 0 rgba(255,255,255,0.10),
    inset 0 -2px 0 rgba(0,0,0,0.60),
    inset 3px 0 0 rgba(255,255,255,0.04),
    inset -3px 0 0 rgba(0,0,0,0.40),
    0 4px 16px rgba(0,0,0,0.7);
  transition: filter 0.12s ease;
}
.chу-fascia:hover   { filter: brightness(1.07); }
.chу-fascia--press  { filter: brightness(0.88); transform: translateY(1px); }

/* ── IMAGE FASCIA (v5.43) — high-res render replaces CSS fascia ── */
.chу-fascia-img-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
  display: block;
}
.chу-fascia-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
  /* Slight press shadow on sides to seat it in the rack */
  box-shadow:
    inset 3px 0 8px rgba(0,0,0,0.6),
    inset -3px 0 8px rgba(0,0,0,0.6),
    0 4px 16px rgba(0,0,0,0.8);
}
/* Invisible full-face click button — sits over entire image */
.chу-fascia-click {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 3;
  /* Subtle press feedback */
  transition: background 0.1s ease;
}
.chу-fascia-click:active {
  background: rgba(0,0,0,0.12);
}
/* Green power LED — overlaid precisely on the render's LED position
   Image is 1024px wide. LED is ~94% from left, ~78% from top. */
.chу-power-led-overlay {
  position: absolute;
  right: 3.2%;
  top: 64%;
  width: 1.6%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #1a3a0a, #0a1a04);
  border: 1px solid #1a2a0a;
  box-shadow: none;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  z-index: 4;
  pointer-events: none;
}
.chу-power-led-overlay.chу-power-led--on {
  background: radial-gradient(circle at 35% 30%,
    #afffaa 0%, #4fe030 40%, #1aaa08 100%);
  border-color: #3ac010;
  box-shadow:
    0 0  6px #7fff40,
    0 0 14px rgba(80,255,30,0.8),
    0 0 28px rgba(40,200,10,0.4);
}

/* ── GOLD INSET BORDER FRAME ────────────────────────────────── */
.chу-border-frame {
  position: absolute;
  inset: 8px 10px;
  border: 1.5px solid var(--gold-dk);
  border-radius: 6px;
  pointer-events: none;
  z-index: 3;
  box-shadow:
    inset 0 0 0 1px rgba(200,168,75,0.08),
    0 0 0 1px rgba(0,0,0,0.5);
}

/* ── LEFT — GEAR LOGO ZONE ──────────────────────────────────── */
.chу-logo-zone {
  flex: 0 0 auto;
  width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px 10px 18px;
  z-index: 2;
}

/* Gear outer ring — 12-tooth cog via CSS clip-path polygon */
.chу-gear {
  position: relative;
  width: 72px;
  height: 72px;
  clip-path: polygon(
    50% 0%,   61% 4%,  68% 0%,  76% 6%,  84% 4%,  88% 13%,
    97% 15%,  98% 24%, 100% 32%, 94% 37%, 97% 46%, 90% 50%,
    97% 54%,  94% 63%, 100% 68%, 98% 76%, 97% 85%,  88% 87%,
    84% 96%,  76% 94%, 68% 100%, 61% 96%, 50% 100%, 39% 96%,
    32% 100%, 24% 94%, 16% 96%,  12% 87%,  3% 85%,   2% 76%,
    0% 68%,    6% 63%,  3% 54%,  10% 50%,  3% 46%,   6% 37%,
    0% 32%,    2% 24%,  3% 15%,  12% 13%,  16% 4%,   24% 6%,
    32% 0%,   39% 4%
  );
  background: radial-gradient(circle at 40% 35%,
    #b89040 0%, var(--gold-dk) 55%, #3a2808 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Neon halo ring inside gear */
.chу-gear-halo {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.95) 22%,
    rgba(220,240,220,0.60) 40%,
    rgba(100,200,100,0.15) 65%,
    transparent 75%
  );
  box-shadow:
    0 0  8px rgba(255,255,255,0.9),
    0 0 18px rgba(180,255,180,0.6),
    0 0 32px rgba(100,220,100,0.3);
}

/* Coffee cup SVG */
.chу-cup-icon {
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 3px rgba(200,168,75,0.6));
}

/* Wordmark below gear */
.chу-logo-wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1;
}
.chу-logo-word1 {
  font-family: var(--font-mono);
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8), 0 0 8px rgba(200,168,75,0.4);
}
.chу-logo-word2 {
  font-family: var(--font-mono);
  font-size: 0.50rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--gold-dk);
  text-transform: uppercase;
}

/* ── CENTRE — TEXT BLOCK ─────────────────────────────────────── */
.chу-text-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  padding: 14px 16px;
  z-index: 2;
}
.chу-eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(0.44rem, 0.85vw, 0.56rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-d);
  margin: 0;
  line-height: 1.3;
}
.chу-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(1.0rem, 2.2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
  line-height: 1.1;
  text-shadow:
    0  1px 0 rgba(0,0,0,0.8),
    0 -1px 0 rgba(255,255,255,0.07),
    0  0 14px rgba(200,168,75,0.22);
}
.chу-tagline {
  font-family: var(--font-mono);
  font-size: clamp(0.42rem, 0.82vw, 0.56rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-dk);
  margin: 0;
  line-height: 1.4;
}

/* ── RIGHT — CONTROLS ZONE ──────────────────────────────────── */
.chу-controls-zone {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  padding: 12px 16px 10px 8px;
  gap: 6px;
  z-index: 2;
  border-left: 1px solid rgba(200,168,75,0.18);
}

/* ── KNOB ROW ─────────────────────────────────────────────── */
.chу-knob-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  justify-content: center;
}
.chу-knob-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.chу-knob {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  background:
    radial-gradient(circle at 38% 28%,
      #e8e8e8 0%,
      #c0c0c0 20%,
      #909090 50%,
      #585858 75%,
      #2a2a2a 100%
    );
  border: 2px solid #1a1a1a;
  box-shadow:
    0 3px 8px  rgba(0,0,0,0.8),
    0 1px 2px  rgba(0,0,0,0.9),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.5);
}
.chу-knob::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%) rotate(var(--rot, 0deg));
  transform-origin: bottom center;
  width: 2px;
  height: 12px;
  background: linear-gradient(180deg, var(--gold-lt) 0%, var(--gold) 100%);
  border-radius: 1px;
  box-shadow: 0 0 4px rgba(200,168,75,0.8);
}
.chу-knob-label {
  font-family: var(--font-mono);
  font-size: 0.50rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dk);
  line-height: 1;
}

/* ── VU METER ROW ─────────────────────────────────────────── */
.chу-vu-row {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.chу-vu {
  width: 46px;
  height: 38px;
  background: #0a0a0a;
  border: 2px solid #1a1a1a;
  border-radius: 3px;
  padding: 2px;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
}
.chу-vu-face {
  width: 100%;
  height: 100%;
  position: relative;
  background:
    radial-gradient(ellipse at 50% 110%,
      rgba(220,140,20,0.90) 0%,
      rgba(200,110,10,0.70) 35%,
      rgba(140,70,0,0.50)   65%,
      rgba(60,30,0,0.30)    100%
    ),
    linear-gradient(180deg, #1a0800 0%, #2a1200 100%);
  border-radius: 1px;
  overflow: hidden;
}
.chу-vu-scale {
  position: absolute;
  inset: 2px 2px 10px;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 5px,
      rgba(200,130,20,0.45) 5px,
      rgba(200,130,20,0.45) 6px
    );
  -webkit-mask: linear-gradient(90deg,
    rgba(0,0,0,0.2) 0%,
    rgba(0,0,0,0.6) 60%,
    rgba(0,0,0,0.9) 80%,
    rgba(0,0,0,1.0) 100%
  );
  mask: linear-gradient(90deg,
    rgba(0,0,0,0.2) 0%,
    rgba(0,0,0,0.6) 60%,
    rgba(0,0,0,0.9) 80%,
    rgba(0,0,0,1.0) 100%
  );
}
.chу-vu-needle {
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 1px;
  height: 78%;
  background: linear-gradient(180deg, rgba(30,20,10,0.95) 0%, transparent 100%);
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(-18deg);
  animation: chу-needle-a 3.4s ease-in-out infinite alternate;
}
.chу-vu-needle--b {
  animation-name: chу-needle-b;
  animation-duration: 2.9s;
  animation-delay: -0.8s;
}
.chу-vu-needle--c {
  animation-name: chу-needle-a;
  animation-duration: 3.8s;
  animation-delay: -1.6s;
}
@keyframes chу-needle-a {
  0%   { transform: translateX(-50%) rotate(-25deg); }
  35%  { transform: translateX(-50%) rotate(8deg);   }
  65%  { transform: translateX(-50%) rotate(-5deg);  }
  100% { transform: translateX(-50%) rotate(14deg);  }
}
@keyframes chу-needle-b {
  0%   { transform: translateX(-50%) rotate(-20deg); }
  40%  { transform: translateX(-50%) rotate(12deg);  }
  70%  { transform: translateX(-50%) rotate(-8deg);  }
  100% { transform: translateX(-50%) rotate(6deg);   }
}

/* ── JACK SOCKET ROW + POWER LED ──────────────────────────── */
.chу-jack-row {
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: flex-end;
  padding-top: 2px;
}
.chу-jack {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3a3a3a, #0a0a0a);
  border: 1.5px solid #404040;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.9),
    0 1px 0 rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.chу-jack-symbol {
  font-size: 7px;
  color: rgba(200,168,75,0.45);
  line-height: 1;
  user-select: none;
}
.chу-power-led {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #1a3a0a, #0a1a04);
  border: 1.5px solid #1a2a0a;
  box-shadow: none;
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
  margin-left: 4px;
}
.chу-power-led--on {
  background: radial-gradient(circle at 35% 30%,
    #afffaa 0%, #4fe030 40%, #1aaa08 100%);
  border-color: #3ac010;
  box-shadow:
    0 0  6px #7fff40,
    0 0 14px rgba(80,255,30,0.8),
    0 0 28px rgba(40,200,10,0.4);
}

/* ── RACK BOLT CORNERS ────────────────────────────────────── */
.chу-bolt {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%,
    #d0b050 0%, #7a5818 55%, #2a1a04 100%);
  border: 1px solid #2a1808;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(255,255,255,0.15);
  z-index: 4;
}
.chу-bolt::before,
.chу-bolt::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: rgba(0,0,0,0.55);
  border-radius: 1px;
}
.chу-bolt::before {
  width: 5px; height: 1px;
  transform: translate(-50%,-50%);
}
.chу-bolt::after {
  width: 1px; height: 5px;
  transform: translate(-50%,-50%);
}
.chу-bolt--tl { top:  7px; left:  8px; }
.chу-bolt--tr { top:  7px; right: 8px; }
.chу-bolt--bl { bottom: 7px; left:  8px; }
.chу-bolt--br { bottom: 7px; right: 8px; }

/* ── DRAWER ──────────────────────────────────────────────── */
.chу-drawer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.40s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(180deg, #1c2e0e 0%, #111e08 60%, #0a1404 100%);
  border-top: 1px solid rgba(200,168,75,0.15);
}
.chу--open .chу-drawer { max-height: 300px; }

.chу-drawer-inner {
  padding: 1.0rem 1.4rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.chу-drawer-address {
  font-family: var(--font-mono);
  font-size: 0.60rem;
  letter-spacing: 0.12em;
  color: rgba(200,168,75,0.45);
  text-transform: uppercase;
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(200,168,75,0.12);
}

/* Menu items */
.chу-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chу-menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.50rem 0.7rem;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-d);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.chу-menu-item:hover {
  background: rgba(200,168,75,0.08);
  color: var(--cream);
  border-color: rgba(200,168,75,0.22);
}
.chу-menu-item--primary {
  color: var(--gold);
  border-color: rgba(200,168,75,0.28);
  background: rgba(200,168,75,0.05);
}
.chу-menu-item--primary:hover {
  background: rgba(200,168,75,0.13);
  border-color: rgba(200,168,75,0.48);
}
.chу-menu-led {
  display: block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(200,168,75,0.30);
  flex-shrink: 0;
}
.chу-menu-item--primary .chу-menu-led {
  background: var(--gold);
  box-shadow: 0 0 4px rgba(200,168,75,0.8);
}
.chу-menu-label { flex: 1; }
.chу-menu-arrow {
  font-size: 0.8rem;
  opacity: 0.45;
  flex-shrink: 0;
}
.chу-menu-item:hover .chу-menu-arrow { opacity: 1; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 700px) {
  .chу-fascia        { min-height: 100px; }
  .chу-logo-zone     { width: 90px; padding: 10px 6px 8px 10px; }
  .chу-gear          { width: 52px; height: 52px; }
  .chу-cup-icon      { width: 28px; height: 28px; }
  .chу-title         { font-size: 0.85rem; }
  .chу-eyebrow,
  .chу-tagline       { display: none; }
  .chу-knob          { width: 28px; height: 28px; }
  .chу-vu            { width: 34px; height: 30px; }
  .chу-controls-zone { padding: 8px 10px 8px 6px; gap: 4px; }
  .chу-knob-row      { gap: 6px; }
  .chу-vu-row        { gap: 4px; }
  .chу-jack-row      { gap: 5px; }
  .chу-jack          { width: 16px; height: 16px; }
  .chу--open .chу-drawer { max-height: 360px; }
}
@media (max-width: 480px) {
  .chу-logo-zone  { display: none; }
  .chу-text-zone  { padding: 10px 12px; }
  .chу-title      { font-size: 0.78rem; letter-spacing: 0.04em; }
}

/* ============================================================
   TRUST / FOOTER STRIP
   ============================================================ */
/* ═══════════════════════════════════════════════════════════════
   MANUFACTURER'S SPEC PLATE — etched industrial safety warnings
   ═══════════════════════════════════════════════════════════════ */
.hp-spec-plate {
  background: transparent;  /* doc-unit provides the background */
  border: none;
  border-radius: 0;
  padding: 2rem;
  margin: 0 auto;
  max-width: 1000px;
  color: #4a4a4a;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  box-shadow: none;
  position: relative;
}

/* Faux corner bolts */
.hp-spec-plate::before,
.hp-spec-plate::after {
  content: '⊕';
  position: absolute;
  top: 10px;
  font-size: 14px;
  color: #222;
}
.hp-spec-plate::before { left: 15px; }
.hp-spec-plate::after { right: 15px; }

.hp-spec-header {
  color: #8c7322; /* Mustard brand tone */
  border-bottom: 1px dashed #222;
  padding-bottom: 10px;
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 0.9rem;
}

.hp-spec-body p {
  margin-bottom: 10px;
  line-height: 1.5;
  color: #555;
}

.hp-spec-body strong {
  color: #666; /* Keep keywords slightly brighter */
}

.hp-spec-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #1a1a1a;
  color: #8c7322;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

/* ═══════════════════════════════════════════════════════════════
   TRUST RAIL — bottom structural rim of the rack
   ═══════════════════════════════════════════════════════════════ */
.hp-trust-strip {
  background-color: transparent;  /* doc-unit provides the background */
  border-top: none;
  margin-top: 0;
  padding-top: 2rem;
}

.hp-trust-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.6rem 1.5rem 1.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.7rem;
}

@media (max-width: 768px) {
  .hp-trust-inner { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
@media (max-width: 480px) {
  .hp-trust-inner { grid-template-columns: 1fr; gap: 1rem; }
}

.hp-trust-brand {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.hp-trust-tag {
  font-size: 0.80rem;
  color: var(--offwhite-mute);
  line-height: 1.5;
}

.hp-trust-links {
  display: flex;
  flex-direction: column;
  gap: 0.30rem;
}
.hp-trust-links a {
  font-size: 0.82rem;
  color: #555;
  text-decoration: none;
  transition: color 0.2s ease;
}
.hp-trust-links a:hover { color: #c9a227; /* Mustard hover */ }

.hp-trust-locations {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.hp-trust-address {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  font-size: 0.80rem;
  color: var(--offwhite-dim);
}
.hp-trust-address strong { color: var(--mustard); font-size: 0.82rem; }
.hp-trust-address a { color: var(--mustard); font-size: 0.78rem; transition: color 0.12s; }
.hp-trust-address a:hover { color: var(--mustard-hi); }

.hp-trust-base {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  padding: 0.62rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid #111;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.60rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #333;
}

/* ============================================================
   MOBILE POLISH
   ============================================================ */
@media (max-width: 640px) {
  .hp-machine { padding: 0; }
  .hp-machine-inner { padding: 0; }

  /* Identity rail: stack address on small screens */
  .hp-identity-rail { flex-wrap: wrap; gap: 0.6rem; padding: 0.5rem 0.75rem; }
  .hp-identity-address { font-size: 0.56rem; }
  .hp-identity-contact { font-size: 0.54rem; }

  /* Screen shrinks to fit content — no min-height set */

  .hp-panel-body { padding: 1.2rem 1rem 1.5rem; gap: 1.2rem; }
  .hp-specs { grid-template-columns: 1fr; }

  .hp-panel-ctas { flex-direction: column; }
  .hp-cta { justify-content: center; }

  .rack-btn { min-height: 52px; padding: 0.5rem 0.3rem 0.54rem; margin: 1px; }
  .rack-btn-label { font-size: 0.58rem; letter-spacing: 0.06em; }

  .hp-cafe-sign-header {
    padding: 1.1rem 1rem 1rem;
    clip-path: none;
  }
  .hp-cafe-body { padding: 1.1rem 1rem 1.5rem; }
  .hp-cafe-grid { grid-template-columns: 1fr; }
  .hp-cafe-meters { display: none; }
}

/* ============================================================
   POWER-ON STATE — page starts off, fades in on mount
   ============================================================ */
@keyframes rack-power-on {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Chrome right side — full opacity for live meters */
.hp-display-chrome-right {
  opacity: 1 !important;
}

/* ── Power-on LED sweep ─────────────────────────────────── */
/* Buttons fade in staggered — each rack-btn gets a short delay */
.hp-page--powered .rack-btn:nth-child(1) { animation: rack-power-on 0.25s 0.05s ease both; }
.hp-page--powered .rack-btn:nth-child(2) { animation: rack-power-on 0.25s 0.10s ease both; }
.hp-page--powered .rack-btn:nth-child(3) { animation: rack-power-on 0.25s 0.15s ease both; }
.hp-page--powered .rack-btn:nth-child(4) { animation: rack-power-on 0.25s 0.20s ease both; }
.hp-page--powered .rack-btn:nth-child(5) { animation: rack-power-on 0.25s 0.25s ease both; }
.hp-page--powered .rack-btn:nth-child(6) { animation: rack-power-on 0.25s 0.30s ease both; }

/* Before powered class — buttons invisible */
:not(.hp-page--powered) .rack-btn { opacity: 0; }

/* ── Segmented VU meter — display chrome size ───────────── */
/* In the panel chrome strip the meters are slightly smaller */
.hp-display-chrome-right .rack-vu {
  width: 14px;
}
.hp-display-chrome-right .rack-vu-seg {
  width: 10px;
  height: 3px;
}
.hp-display-chrome-right .rack-vu-body {
  padding: 2px 1px 1px;
}
.hp-display-chrome-right .rack-vu-label {
  font-size: 7px;
}

/* ── Idle meters — scaled 1.5× for readability, high contrast ─ */
.hp-idle-meters .rack-vu {
  width: 24px;
}
.hp-idle-meters .rack-vu-seg {
  width: 20px;
  height: 6px;
}
.hp-idle-meters .rack-vu-body {
  padding: 4px 2px 3px;
  border-color: #3a3a3a;
  background: #080808;
}
/* Override the earlier subtle-opacity block with full contrast */
.hp-idle-meters .rack-vu-seg--green     { background: #0a1f0a; opacity: 0.6; }
.hp-idle-meters .rack-vu-seg--amber     { background: #1f1500; opacity: 0.6; }
.hp-idle-meters .rack-vu-seg--red       { background: #1f0808; opacity: 0.6; }
.hp-idle-meters .rack-vu-seg--green.rack-vu-seg--lit { background: #2ECC40; opacity: 1; }
.hp-idle-meters .rack-vu-seg--amber.rack-vu-seg--lit { background: #FFB300; opacity: 1; }
.hp-idle-meters .rack-vu-seg--red.rack-vu-seg--lit   { background: #E03020; opacity: 1; }
.hp-idle-meters .rack-vu-seg--green.rack-vu-seg--peak { background: #5FFF6A; opacity: 1; }
.hp-idle-meters .rack-vu-label { color: #3a4a3a; font-size: 9px; }

/* ── Café panel meters ──────────────────────────────────── */
.hp-cafe-meters .rack-vu-pair {
  gap: 5px;
}
.hp-cafe-meters .rack-vu {
  width: 20px;
}
.hp-cafe-meters .rack-vu-body {
  background: #1a1208;
  border-color: #3a3020;
}
.hp-cafe-meters .rack-vu-seg--green { background: #0d2005; }
.hp-cafe-meters .rack-vu-seg--green.rack-vu-seg--lit { background: #5CB830; }
.hp-cafe-meters .rack-vu-seg--amber { background: #2a1a00; }
.hp-cafe-meters .rack-vu-seg--amber.rack-vu-seg--lit { background: #D4A000; }

/* ── Idle sign responsive ───────────────────────────────── */
/* ============================================================
   PRINT / REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Idle sign responsive ───────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   SKYLINE OSCILLOSCOPE — phosphor-trace CRT display
   Oxford Dreaming Spires silhouette / mode-specific waveforms

   KEY DESIGN INTENT:
   • The PHOSPHOR PERSISTENCE TRACE (.hp-osc-dim) is what you always
     see — it must be bright enough to read the skyline shape clearly.
   • The ACTIVE (lit) TRACE (.hp-osc-active) is the freshly-written
     bright line revealed as the electron beam sweeps left→right.
   • Together they produce the classic "CRT persistence" look where
     the full shape glows dimly and the beam brightens it as it passes.
   ═══════════════════════════════════════════════════════════════ */

/* Outer bezel frame — skyline above the sign (v5.38: original size restored) */
.hp-osc-frame {
  display: block;
  position: relative;
  width: calc(100% + 104px);  /* matches wider rails (52px × 2) */
  margin: 8px -52px 0;        /* 8px top seam = visual gap above; flush to sign below */
  background: linear-gradient(to bottom,
      #182518 0%,
      #0b190b 40%,
      #020803 80%,
      #000000 100%);
  border-top: 3px solid #111;
  border-bottom: 3px solid #111;
  border-left: none;
  border-right: none;
  overflow: hidden;
  min-height: 200px;          /* original CRT presence */
  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.92),
    inset 0 12px 24px rgba(0,0,0,0.80),
    inset 0 -8px 16px rgba(0,0,0,0.65),
    inset 3px 0  12px rgba(0,0,0,0.5),
    inset -3px 0 12px rgba(0,0,0,0.5),
    0 2px 0 rgba(255,255,255,0.03);
}

/* Responsive — match wider rails exactly */
@media (max-width: 639px) {
  .hp-osc-frame {
    width: calc(100% + 56px);
    margin: 4px -28px 0;
    min-height: 120px;
  }
}
@media (min-width: 640px) {
  .hp-osc-frame {
    width: calc(100% + 112px);  /* 56px rail × 2 */
    margin: 8px -56px 0;
    min-height: 200px;
  }
}
@media (min-width: 1024px) {
  .hp-osc-frame {
    min-height: 240px;          /* full CRT slab on large desktop */
  }
}

/* SVG fills the frame — aspect ratio enforced by min-height on container */
.hp-osc-svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 200px;          /* fallback for browsers that need explicit height */
  aspect-ratio: unset;
}

/* ── GRATICULE — 10H × 8V precision grid (v5.16)
   Main axes (x=500, y=50):  rgba(0,40,10,0.30)
   Secondary lines:           rgba(0,30,10,0.15)
   No glow, no blur, 1px max. Always behind the active beam.
──────────────────────────────────────────────────────────── */
.hp-osc-grid-minor {
  stroke: rgba(0,30,10,0.15);
  stroke-width: 0.6;
}
.hp-osc-grid-axis {
  stroke: rgba(0,40,10,0.30);
  stroke-width: 0.8;
}

/* ── SILHOUETTE MASS — architectural building band ────────────
   Near-black gradient stroke, width 120 in SVG units (~120/100 of
   viewBox height = floods well past the baseline).
   CSS stroke-width is the fallback; inline strokeWidth="120" wins.
   No filter — crisp miter joins keep spire peaks razor-sharp.
   This is the dark building mass; the phosphor crest rides on top.
────────────────────────────────────────────────────────────── */
.hp-osc-dim {
  /* v5.16 — skyline decommissioned; hard CSS safety net */
  display: none !important;
}

/* ── PHOSPHOR CREST — thin glowing line on the roofline ───────
   Pure phosphor-green gradient (no orange, no red).
   3 px wide — sits exactly on the roofline of the dark mass below.
   glow filter applied inline; beam mask reveals left→right.
   Voltage jitter (+/-0.8 px translateY) from JS keeps it shimmering.
────────────────────────────────────────────────────────────── */
.hp-osc-active {
  /* stroke colour + width set inline — pure phosphor green */
  stroke-linecap: butt;
  stroke-linejoin: miter;
  opacity: 1;
  will-change: transform;
  /* ── BOOT-UP DRAW (v5.31) ─────────────────────────────────────
     stroke-dasharray covers the full ~2500 SVG-unit path length.
     Offset starts at 2500 (fully hidden) and animates to 0 (fully
     revealed) — the beam physically traces left→right on load.
     JS voltage-jitter (translateY) lives on this element; CSS
     animation lives on the parent <g> wrapper — zero conflict.
  ──────────────────────────────────────────────────────────── */
  stroke-dasharray: 2500;
  stroke-dashoffset: 2500;
  animation: draw-skyline 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Electron beam sweep line */
.hp-osc-beam {
  will-change: transform;
}

/* ── AMPLITUDE WRAPPER — owns the Y-axis beat (v5.31) ─────────
   transform-origin: center 90% pins the pivot to the skyline
   baseline (Y=90 in the 0-100 viewBox) so spires always grow
   upward — never float away from the ground.
   will-change promotes to its own compositor layer so the CSS
   animation never battles the JS translateY on the child polyline.
────────────────────────────────────────────────────────────── */
.hp-osc-amplitude-wrapper {
  transform-origin: center 90%;
  will-change: transform;
}

/* ── KEYFRAME: BOOT-UP DRAW ────────────────────────────────── */
@keyframes draw-skyline {
  to { stroke-dashoffset: 0; }
}

/* ── KEYFRAME: AUDIO TRANSIENT (THE BEAT) ──────────────────── */
@keyframes osc-strike {
  0%   { transform: scaleY(1);    filter: brightness(1); }
  20%  { transform: scaleY(1.6);  filter: brightness(1.8) drop-shadow(0 0 8px #1aff40); }
  40%  { transform: scaleY(0.7);  filter: brightness(1); }
  60%  { transform: scaleY(1.15); }
  80%  { transform: scaleY(0.95); }
  100% { transform: scaleY(1);    filter: brightness(1); }
}

/* ── HOVER TRIGGERS — :has() listens on the rack inner panel ──
   Any .rack-btn hover OR any <a> hover inside .hp-machine-inner
   fires a 0.35 s transient strike on the amplitude wrapper.
   No JavaScript required — pure CSS reactivity.
────────────────────────────────────────────────────────────── */
.hp-machine-inner:has(.rack-btn:hover) .hp-osc-amplitude-wrapper,
.hp-machine-inner:has(a:hover)         .hp-osc-amplitude-wrapper {
  animation: osc-strike 0.35s ease-out forwards;
}


/* ============================================================
   PRINT / REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   IDLE SWITCHBOARD — nested booking menu
   Primary: Recording · Café · Room Hire
   Sub-menu: Control Room · Big Booth · Small Booth · Service · ← Back
   ═══════════════════════════════════════════════════════════════ */

.hp-idle-switchboard {
  display: block;
  width: calc(100% + 104px);  /* v3.2 — 52px rail × 2 */
  margin: 8px -52px 0;        /* 8px top seam gap below oscilloscope */
  background: #0d0d0d;
  border-top: 2px solid #1a1a1a;
  border-bottom: 2px solid #1a1a1a;
  padding: 10px 20px;         /* v3.2 — slightly taller switchboard row */
  box-sizing: border-box;
}
@media (max-width: 639px) {
  .hp-idle-switchboard {
    width: calc(100% + 56px);
    margin: 4px -28px 0;
    padding: 6px 10px;
  }
}
@media (min-width: 640px) {
  .hp-idle-switchboard {
    width: calc(100% + 112px);  /* 56px rail × 2 */
    margin: 8px -56px 0;
  }
}

.hp-idle-switchboard-primary,
.hp-idle-switchboard-submenu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.hp-idle-sb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 18px;           /* v3.2 — taller, wider pill buttons */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.72rem;          /* v3.2 — was 0.60rem */
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: #39e839;
  background: #0a140a;
  border: 1px solid #1f5c1f;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 3px rgba(0,0,0,0.5);
}
.hp-idle-sb-btn:hover,
.hp-idle-sb-btn:focus-visible {
  background: #112211;
  border-color: #39e839;
  color: #80ff80;
  outline: none;
}
.hp-idle-sb-btn--hire {
  color: #f0c040;
  border-color: #6a5010;
}
.hp-idle-sb-btn--hire:hover,
.hp-idle-sb-btn--hire:focus-visible {
  background: #1a1200;
  border-color: #f0c040;
  color: #ffe080;
}
.hp-idle-sb-btn--back {
  color: #777;
  border-color: #2a2a2a;
  margin-left: auto;
}
.hp-idle-sb-btn--back:hover,
.hp-idle-sb-btn--back:focus-visible {
  background: #111;
  border-color: #555;
  color: #aaa;
}

/* Belt-and-braces: hide unbolted legacy nav if CSS reaches them */
.hp-identity-rail,
.hp-action-bar {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   CRS TYPOGRAPHY — body copy selectors (base already set at line 60)
   ═══════════════════════════════════════════════════════════════ */
.hp-panel-body,
.hp-spec-val,
.hp-spec-body p,
.hp-cafe-body,
.hp-trust-tag {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--offwhite-dim);  /* #D8D4C8 — solid, ≥4.5:1 on dark green */
}

/* ═══════════════════════════════════════════════════════════════
   LCD STATUS BAR — persistent header ribbon
   "OXFORD HQ: FULLY OPERATIONAL / BOOKINGS OPEN"
   ═══════════════════════════════════════════════════════════════ */
.crs-lcd-status-bar {
  position: sticky;
  top: 0;
  z-index: 10000;
  width: 100%;
  background: #050e05;
  border-bottom: 1px solid rgba(80,255,80,0.25);
  padding: 0.375rem 1rem;
  text-align: center;
  overflow: hidden;
}
.crs-lcd-status-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #50ff50;
  text-shadow: 0 0 8px rgba(80,255,80,0.55);
}
.crs-lcd-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #50ff50;
  box-shadow: 0 0 6px rgba(80,255,80,0.8);
  animation: lcd-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes lcd-dot-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .crs-lcd-dot { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   THREE-BUTTON CTA — header right zone
   Primary: BOOK REHEARSAL  Secondary: BOOK RECORDING  Tertiary: GENERAL ENQUIRY
   ═══════════════════════════════════════════════════════════════ */
.rack-header-cta--triple {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}
.crs-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.8125rem;       /* v5.1 — lifted to ~13px (base 16px × 0.8125) */
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 2px;
  padding: 0.55rem 1rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}
/* Desktop: go full 20px-tier for header CTA labels */
@media (min-width: 769px) {
  .crs-cta {
    font-size: 0.8rem;         /* ~14px at 18px base — punchy, scannable */
    padding: 0.55rem 1.1rem;
  }
}
/* Primary — BOOK REHEARSAL: filled mustard + ambient glow (max visual weight) */
.crs-cta--primary {
  background: var(--mustard);
  color: #000;
  border: 1px solid var(--mustard);
  box-shadow:
    0 0 10px 2px rgba(212,160,23,0.40),   /* ambient halo */
    0 0 22px 4px rgba(212,160,23,0.18);   /* wide soft bloom */
  animation: cta-primary-pulse 2.8s ease-in-out infinite;
}
@keyframes cta-primary-pulse {
  0%, 100% { box-shadow: 0 0 10px 2px rgba(212,160,23,0.40), 0 0 22px 4px rgba(212,160,23,0.18); }
  50%       { box-shadow: 0 0 16px 4px rgba(212,160,23,0.65), 0 0 36px 8px rgba(212,160,23,0.28); }
}
@media (prefers-reduced-motion: reduce) {
  .crs-cta--primary { animation: none; }
}
.crs-cta--primary:hover {
  background: var(--mustard-hi);
  border-color: var(--mustard-hi);
  box-shadow: 0 0 22px 6px rgba(212,160,23,0.70), 0 0 44px 12px rgba(212,160,23,0.32);
  animation: none; /* freeze pulse on hover — intentional snap */
}
/* Secondary — outlined mustard */
.crs-cta--secondary {
  background: transparent;
  color: var(--mustard);
  border: 1px solid var(--mustard);
}
.crs-cta--secondary:hover {
  background: var(--mustard-lo);
}
/* Tertiary — ghost / dim */
.crs-cta--tertiary {
  background: transparent;
  color: var(--offwhite-mute);
  border: 1px solid rgba(245,241,232,0.22);
}
.crs-cta--tertiary:hover {
  color: var(--offwhite);
  border-color: rgba(245,241,232,0.5);
}
/* Mobile: stack vertically, hide tertiary to save space */
@media (max-width: 640px) {
  .rack-header-cta--triple {
    gap: 0.35rem;
  }
  .crs-cta {
    font-size: 0.625rem;
    padding: 0.45rem 0.6rem;
  }
  .crs-cta--tertiary {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE NAV — show only 5 links on mobile, all links on desktop
   ═══════════════════════════════════════════════════════════════ */
.nav-link--desktop-only { display: inline; }
.nav-link--mobile       { display: none; }

@media (max-width: 768px) {
  .nav-link--desktop-only { display: none !important; }
  .nav-link--mobile       { display: inline !important; }
}

/* ═══════════════════════════════════════════════════════════════
   RECESSED METAL PANEL — Who We Are / FAQ / Location wrappers
   ═══════════════════════════════════════════════════════════════ */
.crs-recessed-panel {
  background: #0d120d;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.55),
    inset 0 -1px 2px rgba(255,255,255,0.03);
  border-radius: var(--r-md);
  padding: 2rem 2rem 2rem;
  margin: 1.5rem 0;
}
.crs-recessed-panel h2,
.crs-recessed-panel h3 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mustard);
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.crs-recessed-panel p,
.crs-recessed-panel li {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--offwhite-dim);
}

/* ═══════════════════════════════════════════════════════════════
   UNIFIED CHASSIS — rails run full height, documentation bay below
   ═══════════════════════════════════════════════════════════════ */

/* Rails stretch automatically because hp-machine uses align-items:stretch.
   space-between puts first bolt at top, last bolt at bottom of the full
   chassis height — spans both the screen section AND the documentation bay. */
.srd-rail {
  justify-content: space-between;   /* bolts at true top + bottom of chassis */
}

/* ── DOCUMENTATION UNIT ──────────────────────────────────────
   Recessed metal bay bolted into the same rails as the screen.
   Heavy inset shadow + bevelled top edge = sunken panel feel.
   The .hp-page::before pseudo-element (SSL BiG SiX, position:fixed)
   bleeds visually through this near-transparent dark layer.
   ─────────────────────────────────────────────────────────── */
.hp-documentation-unit {
  flex: 1;                          /* fills remaining column height */
  /* #0d120d at 95% opacity — dark enough to read, thin enough to let the
     fixed SSL backdrop bleed through on browsers that support it */
  background: rgba(13, 18, 13, 0.95);
  border-top: 1px solid rgba(255,255,255,0.08);  /* bevelled top edge — metal plate join */
  box-shadow:
    inset 0 10px 30px rgba(0,0,0,0.90),   /* deep recess — sunken bay */
    inset 0 2px 8px rgba(0,0,0,0.60);
  position: relative;
  overflow: hidden;
  /* Monospaced throughout — technical manual feel */
  font-family: var(--font-mono);
}
/* SSL backdrop bleed — keeps the console visible behind the bay */
.hp-documentation-unit::before {
  content: '';
  position: absolute;
  inset: 0;
  /* The .hp-page background is already fixed, so we only need a very
     subtle reinforcing overlay here — do NOT re-render the full image
     (that would double the blur cost and block the fixed layer) */
  background: linear-gradient(
    180deg,
    rgba(13,18,13,0.0) 0%,
    rgba(13,18,13,0.4) 100%
  );
  pointer-events: none;
  z-index: 0;
}
.hp-documentation-unit > * {
  position: relative;
  z-index: 1;
}

/* ── MANUFACTURER'S SEAL — engraved plate at chassis base ─── */
.hp-chassis-seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 2.5rem 2rem 3rem;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.hp-chassis-seal-link {
  display: block;
  opacity: 0.55;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.hp-chassis-seal-link:hover {
  opacity: 0.85;
  filter: drop-shadow(0 0 14px rgba(194,164,58,0.30));
}
.hp-chassis-seal-img {
  width: 140px;
  height: auto;
  display: block;
  filter:
    drop-shadow(0 1px 4px rgba(0,0,0,0.80))
    brightness(0.7);
}
.hp-chassis-seal-sub {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.18);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   TECH SPECS FAQ — Parking / Backline / Process accordion rows
   ═══════════════════════════════════════════════════════════════ */
.crs-faq {
  margin: 1.5rem 0;
}
.crs-faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 1rem 0;
}
.crs-faq-item:first-child { border-top: 1px solid rgba(255,255,255,0.06); }
.crs-faq-q {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--offwhite);
  margin-bottom: 0.5rem;
}
.crs-faq-a {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--offwhite-dim);
}

/* ═══════════════════════════════════════════════════════════════
   MODULE HOVER GLOW — Recording / Rehearsal / Control Room / Repairs
   Phosphor-green inset glow + subtle scale on rack-btn hover
   ═══════════════════════════════════════════════════════════════ */
.rack-btn:hover:not(.rack-btn--active) {
  box-shadow:
    inset 0 0 15px rgba(0,255,0,0.06),
    inset 0 2px 4px rgba(0,0,0,0.5),
    0 0 8px rgba(0,255,0,0.04);
  transform: translateY(1px) scale(1.01);
}

/* Rehearsal cards: inset phosphor glow on hover */
.hp-rehearsal-card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.hp-rehearsal-card:hover {
  box-shadow: inset 0 0 15px rgba(0,255,0,0.03), 0 2px 12px rgba(0,0,0,0.4);
  transform: scale(1.01);
}

/* ═══════════════════════════════════════════════════════════════
   RECORDING.TSX — recessed panel styles for standalone FAQ
   ═══════════════════════════════════════════════════════════════ */
.recording-section .crs-recessed-panel {
  max-width: 820px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════
   SUB-PAGE CHASSIS — v8.0
   Every sub-page is an expansion module of the same machine.
   body.subpage picks up hp-page backdrop (SSL BiG SiX, fixed).
   The rails + recessed panels below create the "maintenance bay"
   look without the interactive oscilloscope.
   ═══════════════════════════════════════════════════════════════ */

/* Subpage body — same fixed SSL backdrop as home */
body.subpage {
  position: relative;
  min-height: 100dvh;
}
body.subpage::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/static/images/bg-cafe-neon.jpg');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  filter: grayscale(100%) blur(1px) brightness(0.6);
  opacity: 0.12;
  z-index: 0;
  pointer-events: none;
}

/* Subpage wrapper — rails + centre column */
.subpage-chassis {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 100dvh;
  max-width: min(1200px, 96vw);
  margin: 0 auto;
}

/* Machined rails — reuse existing srd-rail variables */
.subpage-rail {
  width: 52px;
  flex-shrink: 0;
  background:
    linear-gradient(to right, #1a1a1a 0%, #2a2a2a 30%, #222 60%, #111 100%);
  border-left:  1px solid #333;
  border-right: 1px solid #111;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.2rem 6px;
  box-shadow:
    inset 2px 0 6px rgba(0,0,0,0.6),
    inset -1px 0 3px rgba(255,255,255,0.04);
}
.subpage-rail--right {
  background:
    linear-gradient(to left, #1a1a1a 0%, #2a2a2a 30%, #222 60%, #111 100%);
  border-left:  1px solid #111;
  border-right: 1px solid #333;
  box-shadow:
    inset -2px 0 6px rgba(0,0,0,0.6),
    inset 1px 0 3px rgba(255,255,255,0.04);
}

/* Centre content column */
.subpage-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: rgba(8, 12, 8, 0.88);
  border-left:  1px solid rgba(255,255,255,0.05);
  border-right: 1px solid rgba(255,255,255,0.05);
}

/* Header anchor — CRS logo plate at top of every sub-page */
.subpage-header-anchor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.75rem;
  background: rgba(0,0,0,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  box-shadow: inset 0 -4px 12px rgba(0,0,0,0.5);
}
.subpage-header-anchor a {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
}
.subpage-header-logo {
  width: 180px;
  height: auto;
}
.subpage-header-back {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mustard);
  opacity: 0.7;
  transition: opacity 0.15s;
}
.subpage-header-back:hover { opacity: 1; }

/* LCD status ticker on sub-pages */
.subpage-lcd {
  background: #020c02;
  border-bottom: 1px solid #0f1f0f;
  padding: 0.55rem 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c87010;
  text-shadow: 0 0 6px rgba(220,140,20,0.5);
  white-space: nowrap;
  overflow: hidden;
}

/* Module content sections */
.subpage-module {
  padding: 2.5rem 1.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.subpage-module:last-of-type { border-bottom: none; }

/* Module heading — engraved plate style */
.subpage-module-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mustard);
  font-weight: 700;
  margin-bottom: 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(212,160,23,0.2);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.subpage-module-label::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mustard);
  box-shadow: 0 0 6px rgba(212,160,23,0.8);
}

/* Recessed module panel — heavier inset than crs-recessed-panel */
.subpage-recessed {
  background: #080a08;
  border: 1px solid #1a1a1a;
  border-top: 1px solid rgba(255,255,255,0.06); /* bevel */
  box-shadow:
    inset 0 10px 40px rgba(0,0,0,1),
    inset 0 2px 6px rgba(0,0,0,0.8);
  border-radius: 3px;
  padding: 2rem;
  margin-bottom: 1.5rem;
}

/* Form elements inside subpage modules */
.subpage-form-group {
  margin-bottom: 1.25rem;
}
.subpage-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mustard);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.subpage-input,
.subpage-select,
.subpage-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(212,160,23,0.25);
  border-top-color: rgba(255,255,255,0.06);
  color: var(--offwhite);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  line-height: 1.5;
  box-sizing: border-box;
  transition: border-color 0.15s;
  -webkit-appearance: none;
}
.subpage-input:focus,
.subpage-select:focus,
.subpage-textarea:focus {
  outline: none;
  border-color: rgba(212,160,23,0.6);
  box-shadow: 0 0 0 2px rgba(212,160,23,0.1);
}
.subpage-textarea { resize: vertical; }

/* Primary CTA button — subpage */
.subpage-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  min-height: 48px;            /* WCAG 2.5.8 — 48 × 48 px minimum touch target */
  background: var(--mustard);
  color: #000;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, box-shadow 0.15s;
}
.subpage-cta:hover {
  background: var(--mustard-hi, #e8c040);
  box-shadow: 0 0 20px rgba(212,160,23,0.3);
}
.subpage-cta--full { width: 100%; }
.subpage-cta--ghost {
  background: transparent;
  color: var(--mustard);
  border: 1px solid var(--mustard);
}
.subpage-cta--ghost:hover {
  background: rgba(212,160,23,0.08);
}

/* Static map plate */
.subpage-map-plate {
  position: relative;
  background: #0a0f0a;
  border: 1px solid #1a2a1a;
  border-top-color: rgba(255,255,255,0.06);
  overflow: hidden;
  border-radius: 3px;
}
.subpage-map-img {
  width: 100%;
  display: block;
  filter: saturate(0.4) brightness(0.7);
  transition: filter 0.3s;
}
.subpage-map-plate:hover .subpage-map-img {
  filter: saturate(0.6) brightness(0.85);
}
.subpage-map-overlay {
  position: absolute;
  bottom: 1rem; right: 1rem;
}

/* Footer seal — manufacturer's plate at chassis base */
.subpage-seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 2rem 1.75rem;
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.5);
}
.subpage-seal a { text-decoration: none; }
.subpage-seal-img {
  width: 120px;
  opacity: 0.65;
  filter: brightness(0.9) drop-shadow(0 2px 8px rgba(0,0,0,0.8));
  transition: opacity 0.2s;
}
.subpage-seal a:hover .subpage-seal-img { opacity: 0.9; }
.subpage-seal-sub {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--offwhite-mute);
}

/* Sub-page hex bolts — smaller version of srd-bolt */
.subpage-bolt {
  width: 18px; height: 18px;
  display: block;
  margin: 0 auto;
}

/* Space Hire sub-menu panel */
.hp-spacehire-panel {
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hp-spacehire-header {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mustard);
  font-weight: 700;
  margin-bottom: 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(212,160,23,0.2);
}
.hp-spacehire-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 560px) {
  .hp-spacehire-grid { grid-template-columns: 1fr; }
}
.hp-spacehire-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.25rem;
  background: #080a08;
  border: 1px solid rgba(255,255,255,0.06);
  border-top-color: rgba(255,255,255,0.1);
  box-shadow: inset 0 6px 20px rgba(0,0,0,0.8);
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hp-spacehire-card:hover {
  border-color: rgba(212,160,23,0.4);
  box-shadow: inset 0 6px 20px rgba(0,0,0,0.8), 0 0 16px rgba(212,160,23,0.08);
}
.hp-spacehire-card-title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mustard);
}
.hp-spacehire-card-desc {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--offwhite-mute);
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.hp-spacehire-card-arrow {
  font-size: 0.8rem;
  color: var(--mustard);
  margin-top: auto;
  padding-top: 0.5rem;
  opacity: 0.6;
}
.hp-spacehire-back {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--offwhite-mute);
  cursor: pointer;
  border: none;
  background: none;
  padding: 0.5rem 0;
  transition: color 0.15s;
}
.hp-spacehire-back:hover { color: var(--offwhite); }

/* Responsive — collapse rails on mobile */
@media (max-width: 480px) {
  .subpage-rail { width: 28px; padding: 0.8rem 4px; }
  .subpage-bolt { width: 12px; height: 12px; }
  .subpage-module { padding: 2rem 1rem; }
  .subpage-header-anchor { padding: 1rem; }
  .subpage-recessed { padding: 1.25rem; }
  .subpage-header-logo { width: 130px; }
}

/* ─── Space Hire card inner elements (v5.5) ─────────────────── */
.hp-spacehire-icon {
  font-size: 1.1rem;
  color: rgba(212,160,23,0.55);
  line-height: 1;
  margin-bottom: 0.15rem;
}
.hp-spacehire-label {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mustard);
}
.hp-spacehire-sub {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--offwhite-mute);
  letter-spacing: 0.04em;
  line-height: 1.45;
  flex: 1;
}
.hp-spacehire-arrow {
  font-size: 0.8rem;
  color: var(--mustard);
  opacity: 0.55;
  margin-top: 0.5rem;
  transition: opacity 0.15s;
}
.hp-spacehire-card:hover .hp-spacehire-arrow { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   BRAND PLATE — anchored header, docked to rail cap (v5.8)
   Layout merged into root .crs-brand-plate--top rule above.
   ═══════════════════════════════════════════════════════════════ */

/* Hardware metadata block — right side of brand plate */
.crs-brand-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
}
.crs-brand-meta-row {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: rgba(212,160,23,0.55);
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 639px) {
  .crs-brand-meta { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO MODULE — recessed rack unit between sign and OSS (v5.8)
   ═══════════════════════════════════════════════════════════════ */
.hp-hero-module {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 -52px;
  padding: 0.9rem 1.5rem;
  background: #0d120d;
  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(0,0,0,0.8);
  box-shadow:
    inset 0 8px 24px rgba(0,0,0,0.85),
    inset 0 -2px 6px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
@media (max-width: 639px) {
  .hp-hero-module { margin: 0 -28px; padding: 0.75rem 1rem; }
}
@media (min-width: 640px) {
  .hp-hero-module { margin: 0 -56px; }
}

.hp-hero-module-bolts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-shrink: 0;
}
.hp-hero-bolt {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #555, #1a1a1a);
  box-shadow: 0 1px 3px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.1);
}

.hp-hero-module-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.hp-hero-h1 {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--offwhite);
  margin: 0;
  line-height: 1.1;
}

.hp-hero-sub {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: clamp(0.8rem, 1.5vw, 0.95rem);
  font-weight: 400;
  color: var(--offwhite-dim);
  margin: 0;
  letter-spacing: 0.01em;
}

.hp-hero-signal {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: rgba(212,160,23,0.7);
  margin: 0;
  text-transform: uppercase;
}

/* Grassroots line — sans, sentence case, human not system */
.hp-display-line--tagline {
  font-family: Inter, system-ui, -apple-system, sans-serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: rgba(212,160,23,0.55) !important;
  font-weight: 400 !important;
}

/* ═══════════════════════════════════════════════════════════════
   v5.9 — RAIL ALIGNMENT, LOGO DOCK, GLOBAL TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */


/* v5.14 — margin-top: 18vh on .hp-machine is the single source of the
   café-backdrop gap. Logo is now .hp-top-plate inside the chassis. */

/* ── Global panel typography — #d1d1d1 on dark green ─────── */
/* Body copy inside all panels and chassis units */
.hp-panel-body,
.hp-chassis-column,
.hp-trust-strip,
.seo-text,
.hp-idle {
  color: #d1d1d1;
}

/* Labels: 20 px minimum on desktop */
.hp-spacehire-label,
.hp-panel-eyebrow,
.hp-controls-buttons .rack-btn,
.rack-btn {
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);  /* ≥ ~18 px on desktop */
}

/* Subpage body text */
.subpage-module p,
.subpage-module li,
.hp-panel-desc {
  font-size: 1rem;   /* 18 px from base */
  color: #d1d1d1;
  line-height: 1.65;
}

/* TrustStrip — keep its internal link colour readable */
.hp-trust-strip a,
.hp-trust-brand,
.hp-trust-tag {
  color: #d1d1d1;
}


/* ═══════════════════════════════════════════════════════════════
   HERO LCD STRIP — second amber display between sign and OSS
   Matches the top LCD exactly: same dark chamber, dot-grid,
   amber phosphor glyphs, centred, full-width flush to rails.
   v5.9
   ═══════════════════════════════════════════════════════════════ */

/* Wrapper — inherits hp-idle-display full-width flush behaviour */
.hp-hero-lcd-wrap {
  margin-top: 0;           /* butt straight against sign bottom */
  border-top: 2px solid #0d0d0d;
}

/* Inner LCD — same dark chamber as top display */
.hp-hero-lcd {
  padding: 0.9rem 2rem 1rem;
  text-align: center;
}

/* H1 — biggest amber line: RECORDING STUDIO — OXFORD */
.hp-display-line--hero-h1 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(14px, 2.8vw, 22px);
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #f0b030;
  text-shadow:
    0 0 4px  rgba(255,200,50,1),
    0 0 12px rgba(255,170,30,0.9),
    0 0 28px rgba(240,140,10,0.55),
    0 0 55px rgba(200,100,0,0.25);
  margin-bottom: 0.45rem;
  animation: lcd-boot 0.5s ease-out 0.30s both;
}

/* Sub-line — "Hybrid analogue–digital recording" */
.hp-display-line--hero-sub {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(10px, 1.6vw, 14px);
  font-weight: 400;
  letter-spacing: 0.22em;
  line-height: 1.35;
  text-transform: uppercase;
  color: #c87010;
  text-shadow:
    0 0 3px  rgba(220,140,20,0.9),
    0 0 8px  rgba(200,110,10,0.5),
    0 0 18px rgba(180,80,0,0.25);
  margin-bottom: 0.3rem;
  animation: lcd-boot 0.5s ease-out 0.42s both;
}

/* Signal-path footer — "SSL · VALVE COMPRESSION · TAPE INTEGRATION" */
.hp-display-line--hero-signal {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(8px, 1.1vw, 11px);
  font-weight: 400;
  letter-spacing: 0.35em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #a05808;
  text-shadow:
    0 0 3px  rgba(200,120,10,0.8),
    0 0 8px  rgba(180,90,0,0.4);
  animation: lcd-boot 0.5s ease-out 0.55s both;
}

/* Mobile: tighten padding */
@media (max-width: 639px) {
  .hp-hero-lcd { padding: 0.65rem 1rem 0.75rem; }
  .hp-display-line--hero-h1  { font-size: 13px; letter-spacing: 0.10em; }
  .hp-display-line--hero-sub { font-size: 9px;  letter-spacing: 0.12em; }
  .hp-display-line--hero-signal { font-size: 8px; letter-spacing: 0.18em; }
}

/* ── Remove old hero-module bolt styling (replaced by LCD) ── */
.hp-hero-module,
.hp-hero-module-bolts,
.hp-hero-bolt,
.hp-hero-module-body,
.hp-hero-h1,
.hp-hero-sub,
.hp-hero-signal { display: none !important; }


/* ═══════════════════════════════════════════════════════════════
   AUDIT v6.0 — Tier-1 Usability & Conversion Hardening
   Implements: skeleton screens · touch targets · F-pattern nav ·
               contrast lockdown · 48 px CTAs · desktop-first nav
   ═══════════════════════════════════════════════════════════════ */

/* ── SKELETON SHIMMER — perceived speed while OSS/panels load ── */
@keyframes skeleton-sweep {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* OSC frame shows a phosphor-green shimmer until hp-page--powered */
:not(.hp-page--powered) .hp-osc-frame {
  background: linear-gradient(
    90deg,
    #0b190b 0%,
    #0b190b 35%,
    #112611 50%,
    #0b190b 65%,
    #0b190b 100%
  );
  background-size: 800px 100%;
  animation: skeleton-sweep 1.6s ease-in-out infinite;
}

/* Spec rows shimmer before the panel animates in — wave stagger */
.hp-display-panel--enter .hp-spec-row {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(58,78,58,0.22) 40%,
    rgba(58,78,58,0.38) 50%,
    rgba(58,78,58,0.22) 60%,
    transparent 100%
  );
  background-size: 600px 100%;
  animation: skeleton-sweep 1.1s ease-in-out 1;
  border-radius: 2px;
}
/* 80 ms stagger per row — gives a left-to-right wave feel */
.hp-display-panel--enter .hp-spec-row:nth-child(1) { animation-delay: 0.00s; }
.hp-display-panel--enter .hp-spec-row:nth-child(2) { animation-delay: 0.08s; }
.hp-display-panel--enter .hp-spec-row:nth-child(3) { animation-delay: 0.16s; }
.hp-display-panel--enter .hp-spec-row:nth-child(4) { animation-delay: 0.24s; }
.hp-display-panel--enter .hp-spec-row:nth-child(5) { animation-delay: 0.32s; }
.hp-display-panel--enter .hp-spec-row:nth-child(6) { animation-delay: 0.40s; }

/* ── DESKTOP NAV — always-visible button strip ─────────────────
   The rack controls ARE the navigation. Ensure they read as a
   coherent nav bar on all screen sizes: equal weight, scannable.
   No hamburger. No hidden menus. Physical buttons only.
─────────────────────────────────────────────────────────────── */
.hp-controls-buttons {
  /* Ensure equal-width columns — nav bars need visual balance */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

/* Desktop: lock to 4 equal columns (matches NAV_ORDER length) */
@media (min-width: 640px) {
  .hp-controls-buttons {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Rack button label — scannable size for studio environment */
.rack-btn-label {
  font-size: clamp(0.78rem, 1.4vw, 1.05rem);  /* ≥14px → ~19px at 1440px */
  letter-spacing: 0.07em;
}

/* ── GEAR LIST — F-PATTERN ALIGNMENT ──────────────────────────
   Musicians scan left for brand names (SSL, Neumann, Adam Audio).
   Key column must be flush-left, bold, and never wrap.
   Value column reads naturally on the next visual stop.
─────────────────────────────────────────────────────────────── */
.hp-specs {
  /* Single column on mobile, 2-col on desktop — F scan reads top-to-bottom */
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .hp-specs {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

.hp-spec-row {
  /* Baseline align: key sits at cap-height of value text */
  align-items: baseline;
  gap: 0.75rem;
}

/* Boost contrast on spec value text — brand names are primary scan targets */
.hp-spec-val {
  color: var(--offwhite);   /* full white — not dimmed */
  font-weight: 500;
}

/* ── CTA TOUCH TARGETS — 48×48 px minimum (WCAG 2.5.8) ────────
   Already applied via min-height above; add explicit min-width
   for buttons that might be narrower than 48px on mobile.
─────────────────────────────────────────────────────────────── */
.hp-cta {
  min-width: 48px;
}

/* Inline "Book Recording" primary CTA inside panels — boost prominence */
.hp-cta--primary {
  font-size: 0.82rem;
  padding: 0.75rem 1.5rem;
  letter-spacing: 0.08em;
}

/* ── RACK BUTTON — WCAG focus ring hardening ───────────────────
   The existing outline fires on focus-visible only;
   add a more visible ring for keyboard users in studio environments.
─────────────────────────────────────────────────────────────── */
.rack-btn:focus-visible {
  outline: 3px solid var(--mustard);
  outline-offset: 2px;
  z-index: 3;
}

/* ── CONTRAST INSURANCE — secondary / muted text ───────────────
   offwhite-mute #a8a498 on nettle #243024 = 5.53:1 (PASS).
   Bump just the eyebrow and spec-key which are small text
   to ensure 4.5:1 at small sizes per WCAG 1.4.3.
─────────────────────────────────────────────────────────────── */
.hp-panel-eyebrow {
  color: var(--mustard);  /* 5.69:1 on nettle — replaces near-invisible mute */
  opacity: 1;             /* was 0.75 — remove opacity loss on small text */
}

/* ── SEMANTIC NAV LABEL — screen reader clarity ────────────────
   The role="tablist" aria-label is set in JSX.
   Ensure the status strip reads as status, not nav.
─────────────────────────────────────────────────────────────── */
.hp-controls-status {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
}

/* ── LOCATION BUTTON TOUCH TARGET — min-width ──────────────────
   On mobile the two-column grid can produce narrow buttons;
   guarantee the 48px horizontal minimum.
─────────────────────────────────────────────────────────────── */
.hp-loc-btn {
  min-width: 48px;
}

/* ── SUBPAGE FORM — 3-field layout ────────────────────────────
   Rule of Three: Name → Service → Project Notes.
   Applied via selector — any hidden 4th+ field is display:none.
─────────────────────────────────────────────────────────────── */
.contact-form--rule-of-three .subpage-form-group--hide {
  display: none;
}

/* ── DOCUMENTATION UNIT — recessed panel text contrast ─────────
   All body copy inside the doc bay must hit 4.5:1.
   Overrides any residual rgba colour that fails at opacity.
─────────────────────────────────────────────────────────────── */
.hp-documentation-unit .hp-trust-tag,
.hp-documentation-unit .hp-trust-address,
.hp-documentation-unit .hp-trust-links a,
.hp-documentation-unit .hp-spec-body p {
  color: #d1d1d1;  /* 9.03:1 on nettle — well above 4.5:1 */
}

/* ── REDUCED MOTION — respect user preference ──────────────────
   Skeleton animations stop; transitions collapse to instant.
─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :not(.hp-page--powered) .hp-osc-frame,
  .hp-display-panel--enter .hp-spec-row {
    animation: none;
    background: #0b190b;
  }
}


/* ═══════════════════════════════════════════════════════════════
   WORKSHOP CAFÉ CONTACT PAGE — WSC COMMS MODULE v1.0
   Overrides subpage chassis with olive-green + brass-gold palette
   matching the CHU rack unit and reference hardware image.
   ═══════════════════════════════════════════════════════════════ */

/* ── Scoped WSC tokens (mirror CHU tokens on the subpage) ───── */
.wsc-chassis {
  --wsc-bg:        #0d1508;   /* deepest green-black */
  --wsc-surface:   #131d0c;   /* column background   */
  --wsc-panel:     #0a1006;   /* recessed panel      */
  --wsc-rail-bg:   #1a2710;   /* rail background     */
  --wsc-green:     #3a4e28;   /* fascia olive green  */
  --wsc-green-hi:  #4d6635;   /* highlight           */
  --wsc-gold:      #c8a84b;   /* warm brass gold     */
  --wsc-gold-dk:   #7a6020;   /* shadow gold         */
  --wsc-gold-lt:   #e8c870;   /* highlight gold      */
  --wsc-cream:     #f0e0b0;   /* primary text        */
  --wsc-cream-d:   #a89060;   /* secondary text      */
  --wsc-cream-m:   #6a5c3a;   /* muted / tertiary    */
  --wsc-border:    rgba(200,168,75,0.25);   /* default border */
  --wsc-border-hi: rgba(200,168,75,0.55);   /* focus border   */
}

/* ── Chassis backdrop — replace SSL grey with olive studio ──── */
.wsc-chassis.subpage-chassis {
  max-width: min(1100px, 96vw);
}
body.subpage.wsc-page::before {
  background-image: none;
  background: linear-gradient(160deg, #0a1006 0%, #131d0c 60%, #1a2710 100%);
  filter: none;
  opacity: 1;
}

/* ── Rails ───────────────────────────────────────────────────── */
.wsc-rail {
  background:
    linear-gradient(to right, #0d1508 0%, #1a2710 40%, #131d0c 70%, #0a1006 100%);
  border-left-color:  #0d1508;
  border-right-color: #0a1006;
  box-shadow:
    inset 2px 0 6px rgba(0,0,0,0.8),
    inset -1px 0 3px rgba(200,168,75,0.05);
}
.subpage-rail--right.wsc-rail {
  background:
    linear-gradient(to left, #0d1508 0%, #1a2710 40%, #131d0c 70%, #0a1006 100%);
}
.wsc-bolt polygon { fill: #1a2710; stroke: #0a1006; }
.wsc-bolt circle:first-of-type { fill: #0d1508; }
.wsc-bolt circle:last-of-type  { fill: #0a1006; }

/* ── Centre column ───────────────────────────────────────────── */
.wsc-column {
  background: rgba(13, 21, 8, 0.92);
  border-left-color:  rgba(200,168,75,0.08);
  border-right-color: rgba(200,168,75,0.08);
}

/* ── Header anchor ───────────────────────────────────────────── */
.wsc-header-anchor {
  background: rgba(10, 16, 6, 0.85);
  border-bottom: 1px solid rgba(200,168,75,0.18);
  box-shadow: inset 0 -4px 16px rgba(0,0,0,0.7);
}
.wsc-header-logo {
  width: 160px;
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8));
}
.wsc-header-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.wsc-back-link {
  color: var(--wsc-gold) !important;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.15s;
}
.wsc-back-link:hover { opacity: 1; }
.wsc-back-sep {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--wsc-gold-dk);
  opacity: 0.5;
}

/* ── LCD ticker — warmer amber/olive tint ────────────────────── */
.wsc-lcd {
  background: #060e04;
  border-bottom: 1px solid #0d1508;
  color: #c8a84b;
  text-shadow: 0 0 8px rgba(200,168,75,0.55);
}

/* ── Modules ─────────────────────────────────────────────────── */
.wsc-module {
  border-bottom-color: rgba(200,168,75,0.06);
}
.wsc-module-label {
  color: var(--wsc-gold);
  border-bottom-color: rgba(200,168,75,0.2);
}
.wsc-module-label::before {
  background: var(--wsc-gold);
  box-shadow: 0 0 6px rgba(200,168,75,0.8);
}

/* ── Recessed panels ─────────────────────────────────────────── */
.wsc-recessed {
  background: #080f06;
  border-color: #0f1a0a;
  border-top-color: rgba(200,168,75,0.06);
  box-shadow:
    inset 0 10px 40px rgba(0,0,0,0.95),
    inset 0 2px 6px rgba(0,0,0,0.8);
}

/* ── Hero lockup ─────────────────────────────────────────────── */
.wsc-hero-lockup {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(200,168,75,0.15);
}
.wsc-hero-gear {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--wsc-gold);
  opacity: 0.85;
}
.wsc-hero-title {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 3vw, 1.5rem);
  font-weight: 700;
  color: var(--wsc-gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
  line-height: 1.1;
}
.wsc-hero-sub {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wsc-cream-d);
  margin: 0.25rem 0 0;
}
.wsc-intro-copy {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--wsc-cream-d);
  line-height: 1.65;
  margin: 0;
  max-width: 600px;
}
.wsc-inline-link {
  color: var(--wsc-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(200,168,75,0.35);
  transition: border-color 0.15s;
}
.wsc-inline-link:hover { border-bottom-color: var(--wsc-gold); }

/* ── Direct lines grid ───────────────────────────────────────── */
.wsc-direct-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 2rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 560px) {
  .wsc-direct-grid { grid-template-columns: 1fr; }
}
.wsc-direct-item {
  font-family: var(--font-mono);
}
.wsc-direct-label {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wsc-gold);
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.wsc-direct-value {
  font-size: 0.9rem;
  color: var(--wsc-cream);
  text-decoration: none;
  transition: color 0.15s;
}
a.wsc-direct-value:hover { color: var(--wsc-gold-lt); }
.wsc-direct-value--muted { color: var(--wsc-cream-d); }

/* ── Capacity spec plate ─────────────────────────────────────── */
.wsc-capacity-plate {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #060e04;
  border: 1px solid rgba(200,168,75,0.18);
  border-radius: 3px;
  overflow: hidden;
}
.wsc-capacity-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 0.5rem;
  gap: 0.2rem;
}
.wsc-capacity-num {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--wsc-gold);
  line-height: 1;
}
.wsc-capacity-unit {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wsc-cream-d);
}
.wsc-capacity-divider {
  width: 1px;
  background: rgba(200,168,75,0.18);
  align-self: stretch;
}

/* ── Use case pills ──────────────────────────────────────────── */
.wsc-use-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.wsc-use-pill {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wsc-cream-d);
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(200,168,75,0.22);
  border-radius: 2px;
  background: rgba(200,168,75,0.04);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.wsc-use-pill:hover {
  background: rgba(200,168,75,0.1);
  color: var(--wsc-gold);
  border-color: rgba(200,168,75,0.45);
}

/* ── Form inputs ─────────────────────────────────────────────── */
.wsc-input {
  background: rgba(0,0,0,0.7) !important;
  border-color: var(--wsc-border) !important;
  border-top-color: rgba(200,168,75,0.06) !important;
  color: var(--wsc-cream) !important;
}
.wsc-input::placeholder { color: var(--wsc-cream-m); }
.wsc-input:focus {
  outline: none !important;
  border-color: var(--wsc-border-hi) !important;
  box-shadow: 0 0 0 2px rgba(200,168,75,0.1) !important;
}
.wsc-label {
  color: var(--wsc-gold) !important;
}

/* ── CTA buttons ─────────────────────────────────────────────── */
.wsc-cta {
  background: var(--wsc-gold) !important;
  color: #0d1508 !important;
  font-weight: 700;
  border: none !important;
  transition: background 0.15s, box-shadow 0.15s;
}
.wsc-cta:hover {
  background: var(--wsc-gold-lt) !important;
  box-shadow: 0 0 24px rgba(200,168,75,0.35) !important;
}
.wsc-cta--full { width: 100%; }

/* ── Status panels ───────────────────────────────────────────── */
.wsc-status { margin-bottom: 1.5rem; }
.wsc-status--ok  { border-color: rgba(100,200,80,0.2) !important; }
.wsc-status--err { border-color: rgba(255,111,97,0.2) !important; }
.wsc-status-head {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.wsc-status--ok  .wsc-status-head { color: #7ecf5a; }
.wsc-status--err .wsc-status-head { color: #ff6f61; }
.wsc-status-body {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--wsc-cream-d);
  margin: 0;
  line-height: 1.6;
}

/* ── Location ────────────────────────────────────────────────── */
.wsc-location-copy {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--wsc-cream-d);
  margin: 0 0 1.25rem;
  letter-spacing: 0.05em;
}
.wsc-map-plate {
  border-color: #1a2710;
  background: #060e04;
}

/* ── Seal ────────────────────────────────────────────────────── */
.wsc-seal {
  background: rgba(6,14,4,0.7);
  border-top-color: rgba(200,168,75,0.1);
}
.wsc-seal-img {
  filter: brightness(1.1) drop-shadow(0 2px 10px rgba(0,0,0,0.9)) !important;
}
.wsc-seal-sub {
  color: var(--wsc-cream-d) !important;
}
.wsc-seal-crs-link {
  display: flex;
  align-items: center;
  margin-top: 0.5rem;
  opacity: 0.45;
  text-decoration: none;
  transition: opacity 0.2s;
}
.wsc-seal-crs-link:hover { opacity: 0.75; }
.wsc-seal-crs-logo {
  width: 90px;
  height: auto;
  filter: brightness(0.7);
}

/* ── Responsive tweaks ───────────────────────────────────────── */
@media (max-width: 599px) {
  .wsc-hero-lockup {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .wsc-hero-title { font-size: 1rem; }
  .wsc-capacity-plate { flex-wrap: wrap; }
  .wsc-capacity-cell { flex: 1 1 30%; }
}


/* ══════════════════════════════════════════════════════════════
   LOCATION PAGES — /crs-cowley-road  /crs-cricket-road
   CRS brand: nettle green + mustard + charcoal chassis
   ══════════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────────── */
.loc-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

/* ── Hero strip ─────────────────────────────────────────────── */
.loc-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem 2rem 1.75rem;
  background: #0e140e;
  border: 1px solid rgba(58,78,58,0.55);
  border-radius: 4px;
  margin-bottom: 2rem;
}
.loc-hero-left { flex: 1; min-width: 0; }
.loc-hero-eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6a8a5a;
  margin: 0 0 0.5rem;
}
.loc-hero-name {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f4f1e8;
  margin: 0 0 0.35rem;
  line-height: 1.15;
}
.loc-hero-address {
  font-size: 0.8rem;
  font-weight: 400;
  color: rgba(212,204,184,0.65);
  letter-spacing: 0.03em;
  margin: 0;
  line-height: 1.6;
}
.loc-hero-logo {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  object-fit: contain;
  opacity: 0.92;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.7));
}

/* ── Two-column layout ──────────────────────────────────────── */
.loc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
@media (max-width: 600px) {
  .loc-cols { grid-template-columns: 1fr; }
  .loc-hero { flex-direction: column-reverse; gap: 1rem; }
  .loc-hero-logo { width: 56px; height: 56px; align-self: flex-end; }
}

/* ── Panel card ─────────────────────────────────────────────── */
.loc-panel {
  background: #0d0d0d;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 4px;
  padding: 1.375rem 1.5rem 1.5rem;
}
.loc-panel--accent {
  border-color: rgba(58,78,58,0.55);
  background: #0e140e;
}
.loc-panel--full {
  grid-column: 1 / -1;
}
.loc-panel-label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6a8a5a;
  margin: 0 0 0.875rem;
}
.loc-panel-label--mustard {
  color: #b89328;
}
.loc-panel-heading {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #f4f1e8;
  margin: 0 0 0.75rem;
  letter-spacing: 0;
}

/* ── Service list ───────────────────────────────────────────── */
.loc-services {
  list-style: none;
  padding: 0;
  margin: 0;
}
.loc-services li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.055);
  font-size: 0.875rem;
  color: #d4cbb8;
  line-height: 1.4;
}
.loc-services li:last-child { border-bottom: none; }
.loc-services li::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4e6e3e;
  flex-shrink: 0;
}

/* ── Spec table ─────────────────────────────────────────────── */
.loc-specs {
  width: 100%;
  border-collapse: collapse;
}
.loc-specs tr { border-bottom: 1px solid rgba(255,255,255,0.055); }
.loc-specs tr:last-child { border-bottom: none; }
.loc-specs td {
  padding: 0.45rem 0;
  font-size: 0.8125rem;
  vertical-align: top;
  line-height: 1.5;
}
.loc-specs td:first-child {
  width: 42%;
  font-weight: 500;
  color: rgba(212,204,184,0.6);
  letter-spacing: 0.03em;
  padding-right: 1rem;
  text-transform: uppercase;
  font-size: 0.7rem;
}
.loc-specs td:last-child {
  color: #d4cbb8;
}

/* ── Transport block ────────────────────────────────────────── */
.loc-transport {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 600px) {
  .loc-transport { grid-template-columns: 1fr 1fr; }
}
.loc-transport-item {}
.loc-transport-icon {
  font-size: 1.25rem;
  line-height: 1;
  margin-bottom: 0.25rem;
  display: block;
}
.loc-transport-label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6a8a5a;
  display: block;
  margin-bottom: 0.2rem;
}
.loc-transport-detail {
  font-size: 0.8125rem;
  color: #d4cbb8;
  line-height: 1.4;
  margin: 0;
}

/* ── Map embed placeholder ──────────────────────────────────── */
.loc-map-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 3px;
  text-decoration: none;
  color: var(--mustard, #C2A43A);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: border-color 0.2s, background 0.2s;
  margin-top: 0.875rem;
}
.loc-map-link:hover {
  border-color: rgba(194,164,58,0.35);
  background: #0e0e0a;
}
.loc-map-link svg {
  flex-shrink: 0;
  opacity: 0.75;
}

/* ── Photo strip ────────────────────────────────────────────── */
.loc-photo-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.875rem;
}
.loc-photo-strip img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 3px;
  filter: brightness(0.88);
}

/* ── CTA bar ────────────────────────────────────────────────── */
.loc-cta-bar {
  display: flex;
  gap: 0.875rem;
  flex-wrap: wrap;
  margin-top: 0.875rem;
}
.loc-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.6875rem 1.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.loc-cta--primary {
  background: #243024;
  color: #c8d8a8;
  border: 1px solid rgba(58,78,58,0.7);
}
.loc-cta--primary:hover {
  background: #2f3e2f;
  color: #dce8bc;
  box-shadow: 0 0 12px rgba(58,118,38,0.2);
}
.loc-cta--secondary {
  background: transparent;
  color: rgba(212,204,184,0.75);
  border: 1px solid rgba(255,255,255,0.12);
}
.loc-cta--secondary:hover {
  border-color: rgba(194,164,58,0.35);
  color: #C2A43A;
}

/* ── Status pill ────────────────────────────────────────────── */
.loc-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: 2px;
  margin-bottom: 0.875rem;
}
.loc-status--operational {
  background: rgba(46,90,30,0.25);
  color: #7ab85a;
  border: 1px solid rgba(46,90,30,0.5);
}
.loc-status--led {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ec93e;
  box-shadow: 0 0 5px #4ec93e;
  animation: led-blink 2.5s ease-in-out infinite;
}
@keyframes led-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── Divider ────────────────────────────────────────────────── */
.loc-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(58,78,58,0.35), transparent);
  margin: 2rem 0;
}

/* ═══════════════════════════════════════════════════════════════
   DG3 VU METERS — secondary rack chrome (top-plate hardware strip)
   Spec per brief: segmented LED, green/amber/red thresholds,
   peak-hold dot, aria-hidden decorative element.
   ═══════════════════════════════════════════════════════════════ */

.dg3-vu-meter {
  display: flex;
  flex-direction: row;
  gap: 4px;
  padding: 4px 6px;
  background: #050705;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.06);
  /* Sits in top-plate chrome — never grows to push layout */
  flex-shrink: 0;
  align-self: center;
}

.dg3-vu-channel {
  display: flex;
  flex-direction: column-reverse; /* segment 0 = bottom */
  gap: 2px;
  background: #040404;
  padding: 2px;
  border-radius: 1px;
}

/* Base segment — unlit */
.dg3-vu-segment {
  width: 7px;
  height: 5px;
  background: radial-gradient(circle at 30% 20%, #111, #020302 65%);
  opacity: 0.32;
  transition: opacity 80ms, background-color 80ms;
  border-radius: 1px;
}

/* Colour band CSS variables */
.dg3-vu-segment--green { --vu-lit: #46cc40; }
.dg3-vu-segment--amber { --vu-lit: #ffb440; }
.dg3-vu-segment--red   { --vu-lit: #ff4a40; }

/* Lit state — written by RAF loop via classList */
.dg3-vu-segment.is-active {
  background-color: var(--vu-lit);
  background-image: none;
  opacity: 1;
  box-shadow: 0 0 3px var(--vu-lit);
}

/* Mobile — slightly smaller segments, still row layout */
@media (max-width: 767px) {
  .dg3-vu-meter  { flex-direction: row; gap: 3px; padding: 3px 4px; }
  .dg3-vu-channel { gap: 1px; }
  .dg3-vu-segment { width: 5px; height: 4px; }
}

/* Desktop — same row layout, full size */
@media (min-width: 768px) {
  .dg3-vu-meter { flex-direction: row; }
}

/* Placement in the top-plate right slot */
.hp-top-plate-vu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  /* Label above the meters */
}
.hp-top-plate-vu-label {
  font-size: 8px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.25);
  text-transform: uppercase;
  line-height: 1;
  align-self: flex-end;
  padding-bottom: 3px;
}

/* ─── Reduced-motion: hide animation chrome entirely ───────── */
@media (prefers-reduced-motion: reduce) {
  .dg3-vu-segment {
    transition: none;
  }
}

/* ── SUPPORT THE SCENE STRIP ─────────────────────────────────────────────
   Community funding callout — mounted in the documentation unit.
   Dark panel with Nettle Green CTA button.
   ──────────────────────────────────────────────────────────────────────── */
.hp-support-strip {
  margin: 1.5rem 0 0;
  border: 1px solid rgba(52,179,74,0.22);
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(13,20,13,0.95) 0%, rgba(9,15,9,0.98) 100%);
  overflow: hidden;
}

.hp-support-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1rem 1.25rem;
  flex-wrap: wrap;
}

.hp-support-strip-left {
  flex: 1;
  min-width: 180px;
}

.hp-support-strip-eyebrow {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #34B34A;
  margin-bottom: 0.375rem;
}

.hp-support-strip-copy {
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(212,204,184,0.72);
  margin: 0;
}

.hp-support-strip-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.625rem 1.25rem;
  background: #34B34A;
  color: #0a1a0f;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  border: 1px solid #2a8a38;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 6px rgba(52,179,74,0.25);
}

.hp-support-strip-btn:hover {
  background: #3fd455;
  box-shadow: 0 3px 14px rgba(52,179,74,0.45);
}

.hp-support-strip-arrow {
  font-size: 0.9rem;
}

@media (max-width: 480px) {
  .hp-support-strip-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .hp-support-strip-btn {
    width: 100%;
    justify-content: center;
  }
}