:root {
  --paper: #f5f0e6;
  --paper-alt: #fae3ea;
  --roast: #3e2723;
  --honey: #f4c9d6;
  --fern: #d68fa3;
  --ink: #3e2723;
  --text-muted: #6b5049;
  --label: #8a6b67;
  --border: #b9637c;
  /* A hairline for ordinary containers, so the pink is spent on the things
     that should actually be noticed. */
  --rule: rgba(185, 99, 124, 0.30);
  /* Cards sit a shade above the paper sheet they are laid on. */
  --card: #fbf8f2;
  --on-roast: #f5ede6;
  --dot: #8a6b67;
  --contact-bg: #3e2723;
  --shadow-accent: 0 2px 6px rgba(185, 99, 124, 0.30);
  --shadow-accent-hover: 0 4px 12px rgba(185, 99, 124, 0.42);
  --shadow-warm: 0 4px 12px rgba(62, 39, 35, 0.26);
  /* One type scale. Every near miss below (0.92 next to 0.94 next to 0.95)
     read as a mistake rather than as hierarchy, so sizes snap to these. */
  --t-micro: 0.62rem;
  --t-label: 0.72rem;
  --t-sm: 0.85rem;
  --t-body: 0.95rem;
  --t-md: 1.05rem;
  --t-lg: 1.2rem;
  --t-xl: 1.4rem;
  --t-2xl: 1.75rem;

  --radius: 16px;
  --sidebar-w: 240px;
  --speaker-w: 96px;
}

:root[data-theme="dark"] {
  --paper: #201a17;
  --paper-alt: #2a211d;
  --ink: #f5ede6;
  --text-muted: #c9b5ad;
  --label: #b39a92;
  --dot: #b39a92;
  --contact-bg: #2c2320;
  /* A roast-tinted shadow vanishes on a roast ground, so dark mode leans on
     the rose glow for lift and a near-black for depth. */
  --rule: rgba(214, 143, 163, 0.26);
  --card: #2b2421;
  --shadow-accent: 0 2px 8px rgba(214, 143, 163, 0.26);
  --shadow-accent-hover: 0 4px 14px rgba(214, 143, 163, 0.38);
  --shadow-warm: 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* The theme wipe is driven by a clip-path animation in theme.js, so the
   default cross-fade is switched off and the new theme stacks on top. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) { z-index: 0; }
::view-transition-new(root) { z-index: 1; }

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

/* The browser default is blue, the one colour not in the palette. */
:focus-visible {
  outline: 2px solid var(--fern);
  outline-offset: 3px;
  border-radius: 4px;
}

body {
  background-color: var(--paper);
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  cursor: url('img/cursor-note.png') 6 4, auto;
}

h1, h2, h3 {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0 0 0.4em;
}

.dot { color: var(--honey); font-style: normal; }

.shapes-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  pointer-events: none;
}

/* ---------- intro gate (cassette claim ticket) ---------- */

.intro-gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Blurred, not just dimmed: the page behind reads as shapes and colour so
     there is something to be curious about, but nothing legible yet. */
  background: rgba(62, 39, 35, 0.88);
  -webkit-backdrop-filter: blur(16px) saturate(0.85);
  backdrop-filter: blur(16px) saturate(0.85);
  padding: 24px;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.intro-gate.is-claimed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-gate.is-claiming {
  background: rgba(62, 39, 35, 0.98);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

@media (prefers-reduced-motion: reduce) {
  .intro-gate { transition-duration: 0ms; }
  .ticket { transition-duration: 0ms !important; }
}

.ticket {
  width: min(420px, 100%);
  background: var(--paper);
  border-radius: 22px;
  padding: 32px 28px 28px;
  text-align: center;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.intro-gate.is-claiming .ticket {
  transform: scale(1.08);
  opacity: 0;
}

.ticket-top { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.ticket-photo-wrap {
  position: relative;
  width: 104px;
  height: 104px;
  flex: none;
  perspective: 400px;
}

.ticket-photo-flip {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  display: block;
  width: 104px;
  height: 104px;
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.ticket-photo-flip.is-flipped { transform: rotateY(180deg); }

@media (prefers-reduced-motion: reduce) {
  .ticket-photo-flip { transition-duration: 0ms; }
}

.ticket-photo-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  backface-visibility: hidden;
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 2px var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--roast);
}

.ticket-photo-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ticket-photo-face-back { transform: rotateY(180deg); }

.ticket-photo-tile {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.55rem;
  color: var(--paper);
  letter-spacing: -0.05em;
}

.ticket-photo-tile .dot { color: var(--honey); font-style: normal; }

.tape {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #4a332e, var(--roast));
  border-radius: 14px;
  padding: 12px 16px 14px;
  margin: 4px 0 0;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.tape-screw {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #201a17;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.08);
}

.tape-screw-tl { top: 8px; left: 8px; }
.tape-screw-tr { top: 8px; right: 8px; }
.tape-screw-bl { bottom: 14px; left: 8px; }
.tape-screw-br { bottom: 14px; right: 8px; }

.tape-label {
  position: relative;
  width: 100%;
  height: 92px;
  background: var(--paper);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tape-stripe {
  display: block;
  height: 12px;
  background: linear-gradient(90deg, var(--roast), var(--fern), var(--honey), var(--fern), var(--roast));
}

.tape-caption {
  display: block;
  padding: 3px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label);
  text-align: center;
}

.tape-window {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: rgba(62, 39, 35, 0.08);
}

.tape-reel {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--roast);
  position: relative;
  opacity: 0.85;
  animation: reelSpin 2.6s linear infinite;
}

@keyframes reelSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tape-reel { animation: none; }
}

.tape-reel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--roast);
  transform: translate(-50%, -50%);
  box-shadow:
    0 -10px 0 -3px var(--roast),
    0 10px 0 -3px var(--roast),
    -10px 0 0 -3px var(--roast),
    10px 0 0 -3px var(--roast);
}

.tape-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.tape-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(245, 240, 230, 0.18);
  background: rgba(245, 240, 230, 0.08);
  color: var(--on-roast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-sm);
  cursor: default;
  pointer-events: none;
  opacity: 0.55;
}

.tape-btn-play {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--border);
  color: var(--roast);
  font-size: 1.05rem;
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.tape-btn-play:hover { transform: translateY(-1px) scale(1.05); opacity: 0.92; }

.ticket-play-caption {
  margin: 16px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--label);
  text-align: center;
}

.ticket-mark {
  margin: 0;
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.ticket-tagline {
  margin: 0;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: var(--t-md);
  color: var(--fern);
  max-width: 300px;
}

.ticket-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 34px;
  margin: 22px -28px;
  padding: 0 28px;
}

.wave-bar {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: var(--border);
  transform-origin: center;
  animation: wavePulse 1s ease-in-out infinite;
  animation-play-state: paused;
}

/* is-playing comes from the audio player, not the theme, so the wave, the
   speaker cones and the record all move only while there is sound. */
body.is-playing .wave-bar { animation-play-state: running; }

@keyframes wavePulse {
  0%, 100% { transform: scaleY(0.55); }
  50% { transform: scaleY(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .wave-bar { animation: none; }
}

.wave-bar:nth-child(8n + 1) { height: 10px; }
.wave-bar:nth-child(8n + 2) { height: 22px; }
.wave-bar:nth-child(8n + 3) { height: 6px; }
.wave-bar:nth-child(8n + 4) { height: 28px; }
.wave-bar:nth-child(8n + 5) { height: 14px; }
.wave-bar:nth-child(8n + 6) { height: 20px; }
.wave-bar:nth-child(8n + 7) { height: 8px; }
.wave-bar:nth-child(8n) { height: 16px; }

.wave-bar:nth-child(5n + 1) { animation-delay: 0s; }
.wave-bar:nth-child(5n + 2) { animation-delay: 0.12s; }
.wave-bar:nth-child(5n + 3) { animation-delay: 0.24s; }
.wave-bar:nth-child(5n + 4) { animation-delay: 0.36s; }
.wave-bar:nth-child(5n) { animation-delay: 0.48s; }

.ticket-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  text-align: left;
  margin-bottom: 24px;
}

.ticket-field { display: flex; flex-direction: column; gap: 2px; }

.ticket-field span {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--label);
}

.ticket-field strong {
  font-size: var(--t-sm);
  font-weight: 600;
}

/* ---------- top nav ---------- */

.top-nav {
  height: 64px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 32px;
  margin: 0 var(--speaker-w);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.top-nav-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.top-nav-logo {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--roast);
  color: var(--on-roast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: -0.05em;
  text-decoration: none;
}

.top-nav-mark {
  flex: none;
  font-weight: 700;
  font-size: var(--t-md);
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
}

.top-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.top-nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
}

/* Qualified with .btn because the .btn rule sits later in this file and
   would otherwise win on display, padding and font-size. */
.btn.top-nav-cta {
  padding: 9px 18px;
  font-size: var(--t-sm);
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* A light sweep across the button on hover, like tape passing a head. */
.top-nav-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(245, 237, 230, 0.26), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s ease;
  pointer-events: none;
}

.top-nav-cta:hover::before { left: 150%; }

.cta-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--honey);
  flex: none;
  animation: ctaPulse 2.4s ease-out infinite;
}

@keyframes ctaPulse {
  0% { box-shadow: 0 0 0 0 rgba(244, 201, 214, 0.7); }
  70% { box-shadow: 0 0 0 7px rgba(244, 201, 214, 0); }
  100% { box-shadow: 0 0 0 0 rgba(244, 201, 214, 0); }
}

.cta-arrow {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.34, 1.3, 0.5, 1);
}

.top-nav-cta:hover .cta-arrow { transform: translate(3px, -3px); }
.btn.top-nav-cta:active { transform: translateY(1px) scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  .cta-dot { animation: none; }
  .top-nav-cta::before { display: none; }
  .cta-arrow { transition: none; }
}

/* ---------- app shell ---------- */

.app {
  display: flex;
  height: calc(100vh - 64px);
  overflow: hidden;
  margin: 0 var(--speaker-w);
}

.footer-copy {
  position: fixed;
  left: calc(var(--speaker-w) + 20px);
  bottom: 14px;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-size: var(--t-label);
  color: var(--label);
  z-index: 4;
}

@media (max-width: 900px) {
  .footer-copy { left: 16px; }
}

.orbit-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 0 0 32px;
  padding: 32px 0;
}

.orbit-arrow {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--paper-alt);
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
}

.orbit-arrow:hover { background: var(--honey); }

.orbit-stage {
  position: relative;
  width: 360px;
  height: 360px;
  flex: none;
}

.orbit-ring {
  position: absolute;
  inset: 45px;
  border: 1px dashed var(--rule);
  border-radius: 50%;
}

.orbit-hub {
  position: absolute;
  inset: 78px;
  border-radius: 50%;
  background: var(--roast);
  color: var(--on-roast);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

.orbit-hub-label {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: var(--t-md);
}

.orbit-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 42px;
  margin: -21px 0 0 -34px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-accent);
  transition: transform 0.5s cubic-bezier(0.34, 1.2, 0.64, 1), background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.orbit-item.is-active {
  background: var(--border);
  color: #fff;
  z-index: 2;
  box-shadow: var(--shadow-accent-hover);
}

@media (max-width: 640px) {
  .orbit-stage { width: 260px; height: 260px; }
  .orbit-ring { inset: 28px; }
  .orbit-hub { inset: 56px; padding: 10px; }
  .orbit-hub-label { font-size: var(--t-sm); }
  .orbit-item { width: 52px; height: 34px; margin: -17px 0 0 -26px; }
}

.marker.is-active { opacity: 1; width: 18px; border-radius: 999px; }

.stack-cassette {
  flex: none;
  width: 46px;
  height: 30px;
  border-radius: 7px;
  background: var(--roast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}

.stack-cassette::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 4px;
  height: 6px;
  border-radius: 2px;
  background: rgba(245, 240, 230, 0.1);
  border: 1px solid rgba(245, 240, 230, 0.2);
}

.stack-cassette-reel {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--honey);
  margin-top: 5px;
  animation: reelSpin 2.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .stack-cassette-reel { animation: none; }
}

.stack-cassette-fern .stack-cassette-reel { border-color: var(--fern); }
.stack-cassette-honey .stack-cassette-reel { border-color: var(--paper); }
.stack-cassette-fern { background: var(--fern); }
.stack-cassette-honey { background: var(--honey); }

.stack-icon-vinyl {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at center, var(--roast) 0px, var(--roast) 1px, transparent 1px, transparent 4px),
    var(--label);
  position: relative;
}

.stack-icon-vinyl::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--honey);
}

.stack-icon-mail {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background: var(--roast);
  color: var(--on-roast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stack-label {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}

.side-actions-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: var(--honey);
  border: 1px solid var(--rule);
}

.speaker {
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--speaker-w);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #4a332e, var(--roast));
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  opacity: 1;
  transition: opacity 0.6s ease;
}

.speaker.is-pending { opacity: 0; }

.speaker-left { left: 0; }
.speaker-right { right: 0; }

.speaker-screw {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #201a17;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.08);
}

.speaker-screw-tl { top: 16px; left: 16px; }
.speaker-screw-tr { top: 16px; right: 16px; }
.speaker-screw-bl { bottom: 16px; left: 16px; }
.speaker-screw-br { bottom: 16px; right: 16px; }

.speaker-driver { position: relative; width: 64px; height: 64px; flex: none; }

.speaker-ring {
  position: absolute;
  border-radius: 50%;
  border: 3px solid var(--honey);
}

.speaker-ring-1 { inset: 0; }
.speaker-ring-2 { inset: 13px; border-color: var(--fern); }

.speaker-ring-3 {
  inset: 20px;
  border: none;
  background: conic-gradient(var(--honey) 0deg 180deg, transparent 180deg 360deg);
  animation: reelSpin 3s linear infinite;
  animation-play-state: paused;
}

body.is-playing .speaker-ring-3 { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  .speaker-ring-3 { animation: none; }
}

.speaker-cap {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  z-index: 1;
}

@media (max-width: 900px) {
  .speaker { display: none; }
  .top-nav, .app { margin: 0; }
}

.tape-flying {
  z-index: 200;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform, opacity;
}

.theme-toggle,
.reopen-gate,
.mute-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--t-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.reopen-gate:hover,
.mute-toggle:hover { background: var(--paper-alt); border-color: var(--border); }

.theme-toggle:hover,
.reopen-gate:hover,
.mute-toggle:hover { background: var(--paper-alt); }

.theme-toggle svg { display: block; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

.mute-toggle.is-muted { opacity: 0.5; }

.top-nav-socials {
  display: flex;
  gap: 8px;
}

.top-nav-socials a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--t-label);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-nav-socials a {
  box-shadow: var(--shadow-accent);
  transition: box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.top-nav-socials a:hover {
  box-shadow: var(--shadow-accent-hover);
  transform: translateY(-1px);
}

.top-nav-socials a svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* OnlineJobsPH ships no monochrome glyph, so its logo is tinted through a
   mask to pick up currentColor in both themes. */
.oj-mark {
  width: 15px;
  height: 15px;
  display: block;
  background-color: currentColor;
  -webkit-mask: url('img/onlinejobsph.png') center / contain no-repeat;
  mask: url('img/onlinejobsph.png') center / contain no-repeat;
}

.top-nav-socials a:hover { background: var(--paper-alt); }

.nav-item {
  appearance: none;
  border: none;
  background: transparent;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.nav-item:hover { background: var(--paper-alt); color: var(--ink); }

.nav-item.is-active {
  background: var(--roast);
  color: var(--on-roast);
}

/* ---------- stage / panels ---------- */

.stage {
  flex: 1;
  /* A flex item will not shrink past its content without this, which let the
     marquee and the bento push the whole page wider than the viewport. */
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  padding: 40px 48px;
}

/* One sheet per section. The dot grid still runs behind everything, it just
   no longer runs through the text. */
.panel,
.ghl-builds,
.projects-scroll {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 30px 32px;
  margin: 0 0 28px;
}

/* These two already carry their own board, so the board goes flat and the
   section becomes the sheet instead of nesting one card inside another. */
.builds-board,
.side-board {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-top: 20px;
}

.panel-head { margin-bottom: 28px; }
.panel.about > .panel-head { margin-bottom: 18px; }
.panel-head-center { text-align: center; }

.section-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-label);
  /* The one deliberate pink mark per section, now that the borders are quiet. */
  color: var(--border);
  margin-bottom: 8px;
}

.panel-head h2,
.panel h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin-bottom: 0; }

/* home hero */

/* Hero copy on the left, the featured build on the right, marquee under
   both. Left aligned in the split, because centred text beside a card reads
   as two things that were not meant to be together. */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  margin: 0 0 30px;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 14px;
  max-width: none;
  margin: 0;
}

@media (max-width: 1080px) {
  .hero-split { grid-template-columns: 1fr; gap: 28px; }
  .hero { align-items: center; text-align: center; }
  .hero .cred-chip-row { justify-content: center; }
}

.hero-photo {
  /* Matched to the deck card's height so the two ends of the band balance. */
  width: 228px;
  height: 228px;
  flex: none;
  margin-bottom: 4px;
  perspective: 700px;
  position: relative;
}

.hero-photo::after,
.hero-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--border);
  opacity: 0;
  pointer-events: none;
}

.hero-photo.is-pulsing::after { animation: photoRipple 0.9s ease-out; }
.hero-photo.is-pulsing::before { animation: photoRipple 0.9s ease-out 0.14s; }

@keyframes photoRipple {
  from { transform: scale(1); opacity: 0.6; }
  to { transform: scale(1.32); opacity: 0; }
}

.hero-photo-flip {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.78s cubic-bezier(0.34, 1.32, 0.48, 1);
}

.hero-photo-flip.is-flipped { transform: rotateY(180deg); }

@media (prefers-reduced-motion: reduce) {
  .hero-photo-flip { transition-duration: 0ms; }
  .hero-photo.is-pulsing::after,
  .hero-photo.is-pulsing::before { animation: none; }
}

.hero-photo-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  backface-visibility: hidden;
  border: 4px solid var(--paper);
  box-shadow: 0 0 0 3px var(--border), 0 24px 40px rgba(0, 0, 0, 0.18);
}

.hero-photo-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-photo-face-back { transform: rotateY(180deg); }

.hero-eyebrow {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--label);
}

/* The dot grid runs behind every page and reads straight through small
   letterspaced type. A halo in the page colour clears the dots out from
   behind the words without putting a box around them. --paper flips with the
   theme, so this holds in dark mode too. */
.hero-eyebrow,
.section-label {
  text-shadow:
    0 0 4px var(--paper),
    0 0 4px var(--paper),
    0 0 9px var(--paper);
}

/* Sections that paint their own ground already hide the dots, so there is
   nothing for the halo to clear and it would only glow. */
.contact .section-label,
.method .section-label {
  text-shadow: none;
}

.hero-title {
  margin: 0;
  font-size: clamp(1.8rem, 3.1vw, 2.5rem);
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.hero-sub {
  max-width: 480px;
  color: var(--text-muted);
  font-size: var(--t-md);
  margin: 0;
}

.hero .btn-primary { margin-top: 6px; }

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--t-body);
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.18s ease;
  white-space: nowrap;
  border: none;
}

.btn:hover { transform: translateY(-1px); opacity: 0.9; }

.btn-primary {
  background: var(--roast);
  color: var(--on-roast);
  box-shadow: var(--shadow-warm);
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-accent);
}

.btn-secondary:hover { box-shadow: var(--shadow-accent-hover); }

.contact .btn-secondary { color: var(--on-roast); border-color: rgba(245, 240, 230, 0.35); }
.contact .btn-primary { background: var(--honey); color: var(--roast); }

/* tool stack marquee, the last band on the home page */

/* Sits under the hero split, breaking out to the full width of the sheet. */
.tool-marquee {
  margin: 0 -32px 4px;
  padding: 0;
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.marquee-item img {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: #fff;
  padding: 1px;
  box-sizing: border-box;
}

.marquee {
  overflow: hidden;
  background: var(--card);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
  margin: 0;
}

.marquee-fade {
  -webkit-mask-image: linear-gradient(90deg, transparent, black 26%, black 74%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 26%, black 74%, transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  white-space: nowrap;
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--text-muted);
  animation: marqueeScroll 42s linear infinite;
}

.marquee-dot { color: var(--border); font-size: var(--t-label); }

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

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* bento grid + cassette tapes */

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.bento-compact { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; }
}

.tape-card,
.bento-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 20px;
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: default;
  text-decoration: none;
}

.tape-card {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}

.tape-card:hover { background: var(--honey); }

.cassette {
  flex: none;
  width: 72px;
  height: 46px;
  border-radius: 9px;
  background: var(--roast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
}

.cassette::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 7px;
  height: 10px;
  border-radius: 3px;
  background: rgba(245, 240, 230, 0.1);
  border: 1px solid rgba(245, 240, 230, 0.2);
}

.cassette .reel {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid var(--honey);
  margin-top: 8px;
  position: relative;
  animation: reelSpin 2.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cassette .reel { animation: none; }
}

.cassette.cassette-fern .reel { border-color: var(--fern); }
.cassette.cassette-honey .reel { border-color: var(--paper); }

.tape-body { display: flex; flex-direction: column; gap: 4px; }

.tape-title { font-weight: 600; font-size: 0.98rem; }
.tape-sub { font-size: 0.82rem; color: var(--text-muted); }

.bento-label {
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--t-label);
  color: var(--label);
  margin: 0 0 8px;
}

.bento-text {
  font-size: var(--t-body);
  color: var(--text-muted);
  margin: 0;
}

.badge-caption {
  font-size: var(--t-sm);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.bento-card-link {
  cursor: pointer;
  display: block;
  width: 100%;
}

.bento-card-link:hover { background: var(--honey); }

/* Home directory: one card per section, so the offer is readable without
   clicking anything. */
.home-map { margin: 40px 0 0; }

.home-map .bento { grid-auto-rows: minmax(132px, auto); }

.map-services { grid-row: span 2; }
.map-wide { grid-column: span 2; }

.bento-card-link {
  display: flex;
  flex-direction: column;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.bento-card-link:hover { border-color: var(--border); transform: translateY(-2px); }

.bento-title {
  margin: 0 0 8px;
  font-size: var(--t-md);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.map-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  flex: 1;
}

.map-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-sm);
}

.map-list li:last-child { border-bottom: 0; }

.map-list em {
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-size: var(--t-label);
  color: var(--label);
}

.map-cred { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.map-cred .bento-label { margin: 0; }
.map-cred .bento-title { margin: 0; }

/* Three cards fanned out, like a stack of prints someone dropped on the desk. */
.photo-stack {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 18px 0 6px;
  padding-bottom: 6px;
}

.photo-card {
  width: 84px;
  height: 108px;
  flex: none;
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper);
  border: 3px solid var(--paper);
  box-shadow: 0 6px 16px rgba(62, 39, 35, 0.22);
  transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.5, 1);
}

.photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

.photo-card:nth-child(1) { transform: rotate(-11deg) translateY(4px); }
.photo-card:nth-child(2) { margin-left: -26px; transform: rotate(-2deg); z-index: 1; }
.photo-card:nth-child(3) { margin-left: -26px; transform: rotate(9deg) translateY(4px); z-index: 2; }

.photo-card-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--roast);
  color: var(--on-roast);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.photo-card-mark em { color: var(--honey); font-style: normal; }

.bento-card-link:hover .photo-card:nth-child(1) { transform: rotate(-16deg) translateY(0); }
.bento-card-link:hover .photo-card:nth-child(3) { transform: rotate(14deg) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .photo-card { transition: none; }
}

.bento-go {
  margin-top: auto;
  padding-top: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--border);
}

@media (max-width: 1080px) {
  .home-map .bento { grid-template-columns: repeat(2, 1fr); }
  .map-services { grid-row: auto; }
  .map-wide { grid-column: span 2; }
}

@media (max-width: 620px) {
  .home-map .bento { grid-template-columns: 1fr; }
  .map-wide { grid-column: auto; }
}

.bento-quote {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: var(--t-md);
  margin: 0 0 8px;
}

.bento-cite {
  font-size: var(--t-sm);
  color: var(--fern);
  font-weight: 600;
  margin: 0;
}

/* services */

.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.service-list li {
  display: grid;
  grid-template-columns: 44px 220px 1fr;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}

.service-num {
  font-family: 'JetBrains Mono', monospace;
  color: var(--fern);
  font-weight: 600;
}

.service-name { font-weight: 600; }
.service-desc { color: var(--text-muted); font-size: var(--t-body); }

@media (max-width: 720px) {
  .service-list li { grid-template-columns: 32px 1fr; }
  .service-desc { grid-column: 2; }
}

/* side projects (horizontal pinned scroll) */

.projects-scroll { margin: 48px 0 0; }

.side-board {
  margin-top: 24px;
  padding: 26px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--paper);
}

/* A track listing read top to bottom, with the spine running through the
   markers. Nothing here scrolls sideways or gets clipped. */
.side-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 38px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.side-list::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--border);
}

.side-item { position: relative; }

/* The marker sits on the spine, aligned with the top of each card. */
.side-item::before {
  content: '';
  position: absolute;
  left: -35px;
  top: 22px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--roast);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 2px var(--border);
}

.side-item-cta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.side-item-cta::before { top: 50%; margin-top: -7px; }

.side-cta-text {
  margin: 0;
  font-size: var(--t-body);
  color: var(--text-muted);
}

.project-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-warm);
}

.project-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--roast);
  color: var(--on-roast);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.project-card h3 { margin: 0 0 6px; font-size: 1rem; }
.project-card p { margin: 0; max-width: 62ch; font-size: 0.85rem; color: var(--text-muted); }

.plus-btn {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--roast);
  color: var(--on-roast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--shadow-warm);
  transition: transform 0.2s ease;
}

.plus-btn:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .plus-btn { transition: none; }
}

@media (max-width: 560px) {
  .side-board { padding: 20px 16px; }
  .side-list { padding-left: 30px; }
  .side-item::before { left: -27px; }
  .side-list::before { left: 5px; }
}

/* work carousel (coverflow) */

.wcarousel { margin: 0 0 40px; }

.wcarousel-viewport {
  width: 100%;
  overflow: hidden;
  padding: 40px 0 20px;
}

.wcarousel-track {
  display: flex;
  width: max-content;
  padding-left: calc(50% - 125px);
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wcarousel-slide-wrap {
  flex: none;
  width: 250px;
  padding: 0 18px;
  perspective: 1200px;
}

.wcarousel-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-style: preserve-3d;
}

.wcarousel-cover {
  appearance: none;
  border: 2px solid var(--rule);
  padding: 20px;
  width: 100%;
  /* Fixed height, so widening the card widens it rather than making it
     taller too, which 3/4 was doing. */
  height: 256px;
  border-radius: 16px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  text-align: left;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.wcarousel-cover-ghl { background: var(--roast); }
.wcarousel-cover-cs { background: var(--fern); }
.wcarousel-cover-ops { background: var(--honey); }

.wcarousel-cover-watermark {
  position: absolute;
  right: -8px;
  bottom: -24px;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 800;
  font-size: 4.5rem;
  line-height: 1;
  opacity: 0.16;
  color: var(--on-roast);
}

.wcarousel-cover-ops .wcarousel-cover-watermark { color: var(--roast); }

.wcarousel-cover-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(245, 240, 230, 0.18);
  color: var(--on-roast);
}

.wcarousel-cover-ops .wcarousel-cover-tag { background: rgba(62, 39, 35, 0.12); color: var(--roast); }

.wcarousel-cover-text { position: relative; display: flex; flex-direction: column; gap: 4px; }

.wcarousel-cover-title {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: var(--t-body);
  line-height: 1.25;
  color: var(--on-roast);
}

.wcarousel-cover-company {
  font-size: var(--t-label);
  color: var(--on-roast);
  opacity: 0.85;
}

.wcarousel-cover-ops .wcarousel-cover-title,
.wcarousel-cover-ops .wcarousel-cover-company { color: var(--roast); }

.wcarousel-caption {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-label);
  text-align: center;
  color: var(--label);
  white-space: nowrap;
  transition: opacity 0.4s ease, filter 0.4s ease;
}

.wcarousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

.wcarousel-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--paper-alt);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.wcarousel-btn:hover { background: var(--honey); }
.wcarousel-btn:disabled { opacity: 0.35; cursor: default; }
.wcarousel-btn:disabled:hover { background: var(--paper-alt); }

.wcarousel-dots { display: flex; align-items: center; gap: 6px; }

.wcarousel-dot {
  height: 8px;
  width: 8px;
  border-radius: 999px;
  background: var(--border);
  opacity: 0.35;
  cursor: pointer;
  transition: width 0.3s ease, opacity 0.3s ease;
}

.wcarousel-dot.is-active { width: 26px; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .wcarousel-track, .wcarousel-slide { transition-duration: 0ms; }
}

/* timeline (Work panel) */

.timeline {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
  background: var(--card);
}

.timeline-item:last-child { border-bottom: none; padding-bottom: 0; }

.timeline-when {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--fern);
  font-size: var(--t-sm);
}

.tl-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
  color: var(--on-roast);
}

.tl-tag-ghl { background: var(--roast); }
.tl-tag-cs { background: var(--fern); }
.tl-tag-ops { background: var(--honey); color: var(--roast); }

.timeline-body h3 { font-size: var(--t-lg); margin-bottom: 2px; }
.timeline-sub { color: var(--text-muted); font-size: var(--t-sm); margin: 0 0 8px; font-style: italic; }
.timeline-body p:not(.timeline-sub) { margin: 0; color: var(--ink); font-size: var(--t-body); }

@media (max-width: 640px) {
  .timeline-item { grid-template-columns: 1fr; gap: 6px; }
}

/* tools */

.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.tool-card {
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--rule);
}

.tool-group {
  margin: 0 0 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
}

.tool-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tool-chips li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 7px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-size: var(--t-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Third party logos keep their own colours, so they sit on a light chip in
   both themes rather than being tinted. */
.tool-chips img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #fff;
  padding: 1px;
  box-sizing: border-box;
}

@media (max-width: 1250px) {
  .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .tools-grid { grid-template-columns: 1fr; }
}

/* testimonials */

.quote {
  background: var(--paper-alt);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--fern);
  border-radius: var(--radius);
  padding: 28px;
  margin: 0;
}

.quote p { font-family: 'Instrument Serif', serif; font-size: var(--t-lg); font-style: italic; margin: 0; }

.reviews-carousel { --reviews-dur: 450ms; outline: none; }

.reviews-stack { position: relative; min-height: 220px; margin: 0 0 24px; }

@media (min-width: 640px) {
  .reviews-stack { min-height: 180px; }
}

.review-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(560px, 100%);
  margin: 0;
  transition: transform var(--reviews-dur) cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity var(--reviews-dur) ease,
              filter var(--reviews-dur) ease;
}

.review-card figcaption {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-weight: 600;
  font-size: var(--t-body);
  color: var(--fern);
}

.reviews-controls { display: flex; align-items: center; justify-content: center; gap: 20px; }

.reviews-nav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--t-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.reviews-nav:hover { background: var(--paper-alt); }

.reviews-indicators { display: flex; gap: 8px; }

.reviews-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--border);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.reviews-indicator.is-active { background: var(--fern); transform: scale(1.3); }

@media (prefers-reduced-motion: reduce) {
  .review-card { transition-duration: 0ms; }
}

/* contact panel */

/* Inset rather than full bleed. Running it edge to edge put its brown right
   up against the speakers' brown, and two close browns touching read as one
   muddy mass with a seam in it. A strip of paper between them separates the
   two, and it matches every other block on the site being a rounded sheet. */
.panel.contact {
  background: var(--contact-bg);
  border: 0;
  border-radius: var(--radius);
  color: var(--on-roast);
  margin: 48px 0 0;
  padding: 64px 40px;
  text-align: center;
}

.contact h2 { color: var(--on-roast); }
.contact-sub { color: #e3cbcf; margin: 0 auto 32px; max-width: 480px; }

/* What actually happens after Book a call, so the button is not a blind
   click. Lifted onto its own panel so it reads as the offer, not footnotes. */
.contact-plan {
  max-width: 620px;
  margin: 0 auto 32px;
  padding: 22px 28px 24px;
  border-radius: var(--radius);
  background: rgba(245, 237, 230, 0.07);
  border: 1px solid rgba(244, 201, 214, 0.28);
  text-align: left;
}

.contact-plan-label {
  margin: 0 0 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--honey);
}

.contact-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.contact-steps li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: var(--t-sm);
  color: #f0dfe2;
}

.contact-steps li + li {
  padding-top: 12px;
  border-top: 1px solid rgba(244, 201, 214, 0.18);
}

.contact-steps span {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--honey);
  color: var(--roast);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0;
  align-self: flex-start;
}

/* Required by the track's licence, so it stays visible rather than tucked
   into a tooltip. */
.audio-credit {
  margin: 10px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: #b79ba0;
}

.audio-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* The licence asks for a visible credit, so it is there, but it is the least
   important line on the site. Page coloured and unbordered so it does not
   read as a band, solid only so the dot grid stops behind the type. */
.page-credit {
  margin: 20px -48px -40px;
  padding: 14px 20px 16px;
  text-align: center;
  background: var(--paper);
}

/* It sits on the dot grid down here, so it gets the same halo the section
   labels get rather than having dots read through it. */
.page-credit .audio-credit {
  margin: 0;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: var(--dot);
  opacity: 0.7;
}

.page-credit .audio-credit a { color: inherit; }

.contact-foot {
  margin: 8px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b79ba0;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-row-center { justify-content: center; }

@media (max-width: 640px) {
  .stage { padding: 28px 20px; }
  .tool-marquee { margin: 0 -18px 4px; }
  .page-credit { margin: 0 -20px -28px; }
  .panel.contact { margin: 36px 0 0; padding: 48px 20px; }
  .app { height: auto; min-height: calc(100vh - 56px); }
  .stage { height: auto; overflow: visible; }
  html, body { height: auto; }
  .top-nav { height: auto; padding: 10px 16px; flex-wrap: wrap; gap: 10px 16px; }
  .top-nav-links { flex-wrap: wrap; gap: 4px; }
  .hero-photo { width: 160px; height: 160px; }
}

/* ---------- services: method + offer cards ---------- */

.method {
  margin: 0 0 40px;
  padding: 26px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(200px, 250px) 1fr;
  gap: 26px;
  align-items: start;
}

.method-intro h3 {
  margin: 6px 0 10px;
  font-size: var(--t-xl);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.method-note {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--text-muted);
}

.method-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}

.method-steps li {
  position: relative;
  padding: 16px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-accent);
}

/* A dashed run between the steps, so they read as a sequence, not three
   unrelated boxes. Hidden on the last step and when they stack. */
.method-steps li::after {
  content: '';
  position: absolute;
  top: 38px;
  right: -15px;
  width: 14px;
  border-top: 2px dashed var(--rule);
  opacity: 0.55;
}

.method-steps li:last-child::after { display: none; }

.method-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--rule);
  color: var(--ink);
  margin-bottom: 10px;
}

.method-icon svg { width: 18px; height: 18px; display: block; }

.method-ghost {
  position: absolute;
  top: 2px;
  right: 10px;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
}

.method-num {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  color: var(--label);
}

.method-steps h4 {
  margin: 6px 0 6px;
  font-size: var(--t-md);
  letter-spacing: -0.01em;
}

.method-steps p {
  margin: 0 0 12px;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--text-muted);
}

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--card);
  color: var(--text-muted);
  border: 1px solid var(--rule);
}

.svc-head { margin: 0 0 18px; }

.svc-head h3 {
  margin: 0 0 4px;
  font-size: var(--t-xl);
  letter-spacing: -0.02em;
}

.svc-head p {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--text-muted);
}

.svc-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 860px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }

.svc-card {
  display: flex;
  flex-direction: column;
  padding: 18px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-accent);
}

.svc-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  color: var(--label);
}

.svc-card h4 {
  margin: 8px 0 6px;
  font-size: var(--t-md);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Content stacks from the top, spare height falls at the bottom of shorter cards. */
.svc-card > p {
  margin: 0 0 14px;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--text-muted);
}

.svc-badge {
  align-self: flex-start;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--roast);
  color: var(--on-roast);
  margin-bottom: 14px;
}

.svc-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.svc-points li {
  position: relative;
  padding-left: 22px;
  font-size: var(--t-sm);
  line-height: 1.45;
}

.svc-points li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 5px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--rule);
  border-bottom: 2px solid var(--rule);
  transform: rotate(-45deg);
}

.svc-tools { margin-top: 16px; }

.svc-note {
  margin-top: 10px;
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--text-muted);
}

@media (max-width: 780px) {
  .method { grid-template-columns: 1fr; gap: 20px; }
  .method-steps li::after { display: none; }
}

/* ---------- work: GoHighLevel build gallery ---------- */

.ghl-builds { margin: 48px 0 8px; }

.builds-note {
  margin: 6px 0 0;
  max-width: 62ch;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--text-muted);
}

/* All six builds sit on one board. They used to pin and run sideways, but
   the journey reads better when every step is on screen at once. */
.builds-board {
  position: relative;
  margin-top: 24px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--paper);
}

.build-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1080px) {
  .build-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .build-grid { grid-template-columns: minmax(0, 1fr); }
}

.build-card {
  display: flex;
  flex-direction: column;
  padding: 14px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-accent);
}

/* The screenshots are tall; a fixed window keeps every card the same height
   and shows the top of the workflow, which is the part that reads. */
.build-shot {
  position: relative;
  display: block;
  height: 210px;
  overflow: hidden;
  border-radius: 10px;
  background: #f7f8fa;
  border: 1px solid rgba(62, 39, 35, 0.12);
}

.build-shot img {
  width: 100%;
  height: auto;
  display: block;
}

.build-open {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px 12px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(transparent, rgba(30, 20, 18, 0.72));
  opacity: 0;
  transition: opacity 0.22s ease;
}

.build-shot:hover .build-open,
.build-shot:focus-visible .build-open { opacity: 1; }

.build-num {
  margin-top: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label);
}

.build-card h3 {
  margin: 6px 0 6px;
  font-size: var(--t-md);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* What the build changed, not what it does. The mechanics are above it. */
.build-outcome {
  margin-top: 10px !important;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-size: var(--t-sm);
  color: var(--text-muted);
}

.build-outcome strong {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--border);
  margin-bottom: 3px;
}

.build-card p {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--text-muted);
}

/* A play triangle for the steps, because each one is a thing the workflow
   does, and a tick for the result, because that one already happened. */
.build-points,
.role-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.build-points li,
.role-points li {
  position: relative;
  padding-left: 20px;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--text-muted);
}

.build-points li::before,
.role-points li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 6px;
  width: 0;
  height: 0;
  border-left: 6px solid var(--border);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  opacity: 0.75;
}

.build-outcome strong::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 4px;
  margin-left: 7px;
  border-left: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
  transform: rotate(-45deg) translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .build-open { transition: none; }
}

.build-aside {
  margin-top: 18px;
  padding: 14px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-accent);
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 18px;
  align-items: center;
}

.build-shot-wide { height: 150px; }

.build-aside-body h3 { margin: 6px 0 6px; font-size: var(--t-md); letter-spacing: -0.01em; }

.build-aside-body p {
  margin: 0;
  max-width: 62ch;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--text-muted);
}

@media (max-width: 660px) {
  .build-aside { grid-template-columns: 1fr; }
}

/* ---------- home: now playing featured build ---------- */

/* In the hero split it has half the width, so it stacks: copy over the
   screenshot instead of squeezing both into one row. */
.now-playing {
  margin: 0;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--paper-alt);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-accent);
  text-align: left;
}

.np-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label);
}

.np-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  flex: none;
  animation: npPulse 2.4s ease-out infinite;
}

@keyframes npPulse {
  0% { box-shadow: 0 0 0 0 rgba(185, 99, 124, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(185, 99, 124, 0); }
  100% { box-shadow: 0 0 0 0 rgba(185, 99, 124, 0); }
}

.now-playing h2 {
  margin: 0 0 8px;
  font-size: var(--t-xl);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.np-desc {
  margin: 0 0 14px;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--text-muted);
}

.np-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}

.np-link span { transition: transform 0.25s cubic-bezier(0.34, 1.3, 0.5, 1); }
.np-link:hover span { transform: translateX(4px); }

/* Roast bezel and a fixed window, so the screenshot reads as tape in a deck. */
.np-shot {
  display: block;
  height: 210px;
  overflow: hidden;
  border-radius: 12px;
  padding: 9px;
  background: linear-gradient(180deg, #4a332e, var(--roast));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.np-shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

@media (max-width: 760px) {
  .now-playing { grid-template-columns: 1fr; }
  .np-shot { height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .np-dot { animation: none; }
  .np-link span { transition: none; }
}

/* ---------- home: tools and systems ---------- */

.home-tools {
  margin: 52px auto 0;
  max-width: 900px;
  text-align: left;
}

.home-tools .panel-head { margin-bottom: 16px; }

/* ---------- vinyl nav ---------- */

.vinyl-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border-radius: 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-accent);
}

/* Every part of the deck is a fraction of --deck, so shrinking the band at a
   breakpoint only means changing that one number. */
.vinyl-deck {
  --deck: 84px;
  position: relative;
  width: var(--deck);
  height: var(--deck);
  flex: none;
}

.vinyl-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* Three layers: a sheen that sweeps as it turns, fine grooves in percentages
     so they hold at any deck size, and the disc itself. */
  background:
    conic-gradient(from 200deg,
      rgba(255, 255, 255, 0.10) 0deg,
      rgba(255, 255, 255, 0.02) 80deg,
      rgba(255, 255, 255, 0) 150deg,
      rgba(255, 255, 255, 0.07) 235deg,
      rgba(255, 255, 255, 0.01) 310deg,
      rgba(255, 255, 255, 0.10) 360deg),
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255, 237, 230, 0.055) 0 1px,
      rgba(0, 0, 0, 0) 1px 4px),
    radial-gradient(circle at 50% 50%, #4a332e 0 18%, var(--roast) 18% 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    inset 0 0 12px rgba(0, 0, 0, 0.4),
    0 6px 16px rgba(62, 39, 35, 0.32);
  animation: reelSpin 4.5s linear infinite;
  animation-play-state: paused;
}

/* The record turns only while the site is playing, same signal as the speakers. */
body.is-playing .vinyl-disc { animation-play-state: running; }

.vinyl-groove {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(245, 237, 230, 0.1);
}

.vinyl-groove-1 { inset: calc(var(--deck) * 0.087); }
.vinyl-groove-2 { inset: calc(var(--deck) * 0.163); }
.vinyl-groove-3 { inset: calc(var(--deck) * 0.24); }

.vinyl-label {
  position: absolute;
  inset: calc(var(--deck) * 0.327);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #cf7e97, var(--border) 70%);
  box-shadow: 0 0 0 1px rgba(62, 39, 35, 0.25), inset 0 -1px 3px rgba(62, 39, 35, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vinyl-hole {
  width: 20%;
  height: 20%;
  border-radius: 50%;
  background: var(--paper);
}

.vinyl-arm {
  position: absolute;
  top: calc(var(--deck) * 0.058);
  right: calc(var(--deck) * 0.02);
  width: calc(var(--deck) * 0.04);
  height: calc(var(--deck) * 0.6);
  border-radius: 999px;
  /* Lit down one side so the arm reads as a round tube, not a flat bar. */
  background: linear-gradient(90deg, rgba(62, 39, 35, 0.35), var(--label) 45%, var(--text-muted));
  box-shadow: 0 1px 2px rgba(62, 39, 35, 0.3);
  transform-origin: 50% calc(var(--deck) * 0.058);
  transition: transform 0.45s cubic-bezier(0.34, 1.25, 0.5, 1);
}

/* The pivot the arm swings on, centred exactly on its transform origin. */
.vinyl-arm::before {
  content: '';
  position: absolute;
  top: calc(var(--deck) * -0.007);
  left: 50%;
  width: calc(var(--deck) * 0.13);
  height: calc(var(--deck) * 0.13);
  margin-left: calc(var(--deck) * -0.065);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6b5049, #3e2723 70%);
  box-shadow: 0 1px 3px rgba(62, 39, 35, 0.4);
}

.vinyl-arm-head {
  position: absolute;
  bottom: calc(var(--deck) * -0.058);
  left: calc(var(--deck) * -0.048);
  width: calc(var(--deck) * 0.135);
  height: calc(var(--deck) * 0.096);
  border-radius: 2px;
  background: linear-gradient(180deg, #5b4139, var(--roast));
  box-shadow: 0 1px 2px rgba(62, 39, 35, 0.35);
  transform: rotate(-14deg);
}

.vinyl-side {
  margin: 0 0 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--label);
}

.vinyl-tracks { display: flex; flex-direction: column; }

.vinyl-track {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 4px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-muted);
  transition: background 0.2s ease, color 0.2s ease;
}

.vinyl-track-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  color: var(--label);
}

.vinyl-track-name {
  font-size: var(--t-sm);
  font-weight: 500;
  white-space: nowrap;
}

.vinyl-track:hover,
.vinyl-track.is-active { background: var(--paper-alt); color: var(--ink); }

.vinyl-track.is-current-page { color: var(--ink); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .vinyl-disc { animation: none; }
  .vinyl-arm { transition: none; }
}

/* ---------- about ---------- */

.about-lede {
  margin: 6px 0 0;
  max-width: 48ch;
  font-family: 'Instrument Serif', serif;
  font-size: var(--t-lg);
  font-style: italic;
  color: var(--text-muted);
}

/* Statement on the left, story on the right. The facts rail that used to sit
   here repeated the credentials section and the copy underneath it. */
.about-intro {
  margin-top: 4px;
  display: grid;
  /* Two equal columns, and the copy fills its column rather than stopping at
     its own max-width, which is what left dead space down the right. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: stretch;
}

.about-side {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
}

/* The photo takes whatever height the story leaves, so the two columns end
   level however the copy reflows. The image is absolute so it contributes
   nothing to the row's intrinsic height, which is what makes that work. */
.about-photo {
  position: relative;
  min-height: 220px;
  margin: 26px 0 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-warm);
}

.about-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
}

.contact-meta {
  margin: 26px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cfb2b6;
}

.about-meta {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  line-height: 2;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  color: var(--label);
}

.about-story p {
  margin: 0 0 14px;
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--text-muted);
}

.about-story p:last-child { margin-bottom: 0; }
.about-story strong { color: var(--ink); }

/* Two tone opener: the claim in ink, the answer in muted, so the eye reads
   the problem first and the fix second without any extra markup. */
.about-statement {
  margin: 0;
  font-size: var(--t-2xl);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.about-statement strong { font-weight: 600; color: var(--ink); }
.about-statement span { color: var(--text-muted); font-weight: 500; }

.cred-badge {
  flex: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(62, 39, 35, 0.22);
}

.cred-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 0;
}

/* Home hero trust markers, sized down so they support the headline rather
   than competing with it. */
.cred-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 4px 0 0;
  padding: 6px 16px 6px 6px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Below this the story column gets narrow enough that matching its height
   would stretch the photo into a very tall crop, so the two stack instead. */
@media (max-width: 1150px) {
  .about-intro { grid-template-columns: 1fr; gap: 26px; }
  .about-photo { min-height: 0; aspect-ratio: 16 / 10; }
}

.about-roles { margin-top: 44px; }

/* Same 44px the other About sections get. This one was added later and
   never picked up a margin, so it sat 12px under the role cards. */
.about-tools { margin-top: 44px; }

.about-roles h3 { font-size: var(--t-xl); margin-bottom: 16px; }

.about-role-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.about-role-list li {
  padding: 16px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-accent);
}

.about-role-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  color: var(--label);
}

.about-role-list h4 { margin: 6px 0 6px; font-size: var(--t-md); }

.about-role-list p {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--text-muted);
}

@media (max-width: 860px) {
  .about-role-list { grid-template-columns: 1fr; }
}

/* The fixed nav sits over the stage, so the content is inset to clear it.
   Below the breakpoint the nav drops into flow and the inset is dropped. */
/* ---------- credentials ---------- */

.creds { margin: 44px 0 0; }

.creds .panel-head { margin-bottom: 20px; }

.creds h3 {
  margin: 4px 0 0;
  font-size: var(--t-xl);
  letter-spacing: -0.01em;
}

.creds-note {
  margin: 8px 0 0;
  max-width: 62ch;
  font-size: var(--t-body);
  color: var(--text-muted);
}

.cred-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.cred-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--card);
}

/* The badges are other people's marks, so they keep their own colours on a
   white chip rather than being recoloured into the palette. */
.cred-mark {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(62, 39, 35, 0.2);
}

.cred-body { min-width: 0; }

.cred-issuer {
  margin: 0 0 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
}

.cred-card h4 {
  margin: 0 0 6px;
  font-size: var(--t-md);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.cred-meta {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--text-muted);
}

.cred-verify {
  display: inline-block;
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--border);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.cred-verify:hover { border-bottom-color: var(--border); }

.creds-extra {
  margin: 16px 0 0;
  max-width: 62ch;
  font-size: var(--t-sm);
  color: var(--text-muted);
}

/* The three marks overlapped on the home card, so they read as a set. */
.cred-stack { display: flex; margin: 2px 0 12px; }

.cred-stack img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(62, 39, 35, 0.2);
}

.cred-stack img + img { margin-left: -14px; }

@media (max-width: 680px) {
  .cred-grid { grid-template-columns: minmax(0, 1fr); }
}


/* ---------- automation flow diagram ---------- */

.flow-panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 30px 32px;
  margin: 0 0 28px;
  text-align: center;
}

.flow-panel .panel-head { margin-bottom: 22px; }
.flow-panel .builds-note { margin-left: auto; margin-right: auto; }

.flow-stack {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}

/* The window chrome frames it as a screen, the way the real builder looks. */
.flow-frame {
  border-radius: 14px;
  border: 1px solid var(--rule);
  overflow: hidden;
  background: var(--card);
}

.flow-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-alt);
}

.flow-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  opacity: 0.55;
}

.flow-bar em {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
}

.flow-scroll {
  overflow-x: auto;
  opacity: 1;
  background-image: radial-gradient(circle, var(--dot) 0.8px, transparent 0.8px);
  background-size: 26px 26px;
  background-position: 13px 13px;
}

.flow-svg {
  display: block;
  width: 100%;
  min-width: 860px;
  height: auto;
}

.flow-edge {
  fill: none;
  stroke: var(--border);
  stroke-width: 1.6;
  opacity: 0.5;
}

.flow-edge-dot { stroke-dasharray: 1 7; stroke-linecap: round; opacity: 0.6; }
.flow-edge-dash { stroke-dasharray: 8 6; opacity: 0.4; }

.flow-pulse { fill: var(--border); }

.flow-label-bg { fill: var(--card); }

.flow-edge-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--label);
}

.flow-chip {
  fill: var(--paper);
  stroke: var(--rule);
  stroke-width: 1.4;
}

.flow-icon {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flow-title {
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  fill: var(--ink);
}

.flow-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  fill: var(--text-muted);
}

/* The three nodes that carry meaning: where it starts, where it decides,
   and the two ways it can end. */
.flow-node.is-start .flow-chip { fill: var(--paper-alt); stroke: var(--border); }
.flow-node.is-focus .flow-chip { fill: var(--paper-alt); stroke: var(--border); stroke-width: 2.2; }
.flow-node.is-won .flow-chip { fill: var(--paper-alt); stroke: var(--border); stroke-width: 2.2; }
.flow-node.is-won .flow-title { fill: var(--border); }
.flow-node.is-lost .flow-chip { stroke-dasharray: 5 4; }
.flow-node.is-lost .flow-icon { stroke: var(--label); }
.flow-node.is-lost .flow-title { fill: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .flow-pulse { display: none; }
}

@media (max-width: 640px) {
  .flow-panel { padding: 22px 18px; }
}

/* ---------- testimonials ---------- */

/* Second block on the page, so it needs the breathing room the first one
   gets from the masthead above it. */
.panel.reviews-team { margin-top: 48px; }

.reviews-note {
  margin: 6px 0 0;
  max-width: 58ch;
  font-size: var(--t-body);
  color: var(--text-muted);
}

.reviews-grid {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}

.reviews-grid .review-card {
  position: static;
  width: auto;
  left: auto;
  top: auto;
  display: flex;
  flex-direction: column;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-accent);
  transition: none;
}

.reviews-grid .quote { margin: 0 0 18px; flex: 1; }

.reviews-grid .quote p {
  margin: 0;
  font-family: 'Instrument Serif', serif;
  font-size: var(--t-lg);
  line-height: 1.5;
  font-style: italic;
  color: var(--ink);
}

.reviews-grid .quote p::before { content: '\201C'; }
.reviews-grid .quote p::after { content: '\201D'; }

.review-by { display: flex; align-items: center; gap: 11px; }

/* An initial rather than a stock face: these are real people, and a bought
   photo next to a real name would be a lie about who said it. */
.review-avatar {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--roast);
  color: var(--on-roast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.95rem;
}

.review-who { display: flex; flex-direction: column; line-height: 1.3; }
.review-who strong { font-size: 0.92rem; }
.review-who span { font-size: 0.78rem; color: var(--text-muted); }

/* ---------- masthead: photo, wave, deck ---------- */



/* The same band on every page: photo, wave, deck. It is a direct child of
   the stage everywhere, so one set of rules covers the whole site. */
.hero-composition {
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr) auto;
  align-items: center;
  gap: 22px;
  width: 100%;
  max-width: 880px;
  margin: 0 auto 34px;
}

/* The wave runs between the two, so it reads as signal passing from one to
   the other rather than as decoration sitting near them. */
.hero-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 28px;
  min-width: 0;
}

@media (max-width: 1080px) {
  .hero-composition { gap: 16px; }
  .vinyl-deck { --deck: 68px; }
}

/* The wave is the decorative third of the band, so it is the first to go. */
@media (max-width: 720px) {
  .hero-composition {
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 14px;
  }
  .hero-wave { display: none; }
  .hero-photo { width: 150px; height: 150px; }
  .vinyl-deck { --deck: 56px; }
  .vinyl-nav { gap: 12px; padding: 12px; }
  .vinyl-track-name { font-size: var(--t-sm); }
}

@media (max-width: 400px) {
  .hero-composition { grid-template-columns: 1fr; justify-items: center; }
}

/* ---------- landing page tweaks ---------- */

.hero-photo { position: relative; }

.flip-hint {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  pointer-events: none;
  animation: flipNudge 2.6s ease-in-out infinite;
}

.flip-hint svg { width: 12px; height: 12px; }

@keyframes flipNudge {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}

/* Once they have flipped it, the prompt has done its job. */
.hero-photo-flip.is-flipped ~ .flip-hint { opacity: 0; animation: none; }

@media (prefers-reduced-motion: reduce) {
  .flip-hint { animation: none; }
}