/* Keyboard Spa — "Restoration Workshop" design system.
   Tokens in DESIGN.md. Warm dark, coral used sparingly. No card grids. */

:root {
  --bg: #1A1714;
  --surface: #252019;
  --surface-2: #2E2820;
  --border: #3A332B;
  --text: #F2EDE4;
  --muted: #9A9286;
  --accent: #E0816A;
  --accent-hover: #E8967F;
  --success: #5E8C61;
  --error: #E5484D;
  --display: 'Fraunces', Georgia, serif;
  --body: 'Geist', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
a { color: var(--text); }

/* ---- Nav ---- */
.nav {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 22px 0; border-bottom: 1px solid var(--border); gap: 16px;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 600; font-size: 22px;
  letter-spacing: -0.01em; text-decoration: none; color: var(--text);
}
.wordmark-logo { width: 28px; height: 28px; display: block; border-radius: 6px; }
.wordmark .dot { color: var(--accent); }
.nav .tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--muted); text-align: right;
}

/* ---- Buttons ---- */
.btn {
  display: inline-block; font-family: var(--body); font-weight: 600;
  font-size: 16px; padding: 14px 26px; border-radius: 8px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .15s ease, border-color .15s ease; min-height: 48px;
}
.btn-primary { background: var(--accent); color: #1A1714; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--accent); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-block { display: block; width: 100%; }

/* ---- Hero: copy + intake ticket over a darkened keyboard photo ---- */
.hero {
  padding: 32px 0 80px;
  background:
    linear-gradient(100deg, rgba(26,23,20,0.98) 0%, rgba(26,23,20,0.88) 44%,
                    rgba(26,23,20,0.60) 100%),
    url('assets/keyboard-1.jpg') center 58% / cover no-repeat;
}
.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: start;
}
.hero-copy { padding-top: 24px; }
.hero-copy h1 {
  font-family: var(--display); font-weight: 600; font-size: 46px;
  line-height: 1.1; letter-spacing: -0.02em;
}
.hero-copy .lead { color: var(--text); font-size: 19px; margin-top: 20px; }
.hero-copy .hero-note {
  color: var(--muted); font-size: 15px; margin-top: 20px;
  padding-top: 18px; border-top: 1px solid var(--border);
}
/* Completed-work social-proof counter, sits just under the hero note */
.restored-count { color: var(--muted); font-size: 14px; margin-top: 10px; }
.restored-count-n {
  font-family: var(--mono); font-weight: 500; color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* "Open for business" status pill — subtle pulse, not a blink */
.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 18px;
}
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0 0 rgba(94, 140, 97, 0.55);
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(94, 140, 97, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(94, 140, 97, 0); }
  100% { box-shadow: 0 0 0 0 rgba(94, 140, 97, 0); }
}
@media (prefers-reduced-motion: reduce) { .pulse-dot { animation: none; } }

/* ---- Intake ticket (the form, styled like a work order) ---- */
.intake {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
  /* Match .hero-copy's padding-top so the card top lines up with the
     "Open for business" status pill. */
  margin-top: 24px;
}
.intake-tabs {
  display: flex; background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.tab {
  flex: 1; background: transparent; border: none; cursor: pointer;
  padding: 14px 16px 12px; margin-bottom: -1px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.tab + .tab { border-left: 1px solid var(--border); }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tab.active::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.intake-body { padding: 24px 20px; }

/* ---- Form fields ---- */
.field { margin-bottom: 16px; }
.field label {
  display: block; font-family: var(--body); font-weight: 600;
  font-size: 14px; margin-bottom: 7px;
}
.field .opt { color: var(--muted); font-weight: 400; }

/* "More info" — collapsed until the keyboard model is typed.
   grid-template-rows 0fr -> 1fr animates to natural height cleanly. */
.more-info {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .35s ease, opacity .3s ease;
}
.more-info-inner { overflow: hidden; min-height: 0; }
.more-info.show { grid-template-rows: 1fr; opacity: 1; }
.field input, .field textarea, .field select {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  border-radius: 7px; padding: 12px; color: var(--text);
  font-family: var(--body); font-size: 16px; min-height: 46px;
}
.field textarea { min-height: 78px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.field input.invalid, .field textarea.invalid { border-color: var(--error); }
/* Type + quantity sit side by side, revealed with the rest of "more info". */
/* Replace the native select chrome with a custom chevron so it matches the
   dark theme, and leave room on the right so the label text never crowds it. */
.field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23a89f96' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.field select::-ms-expand { display: none; }
.err {
  display: none; color: var(--error); font-size: 13px;
  font-family: var(--mono); margin-top: 6px;
}
.err.show { display: block; }
.intake-body .btn { width: 100%; margin-top: 6px; }
.form-price { font-size: 12px; color: var(--muted); margin-top: 14px; text-align: center; }
.form-price strong { color: var(--text); font-weight: 600; }
.form-price s { margin-right: 7px; }
.form-foot { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 8px; text-align: center; }

/* ---- Confirmation (lives inside panel-new after submit) ---- */
.confirm-title {
  font-family: var(--display); font-weight: 600; font-size: 24px;
  margin-bottom: 10px;
}
.confirm-text { color: var(--muted); }

/* ---- Track tab intro ---- */
.track-intro {
  color: var(--muted); font-size: 14px; margin-bottom: 16px;
}

/* ---- Sections ---- */
section { padding: 72px 0; border-top: 1px solid var(--border); }
.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
h2.section-title {
  font-family: var(--display); font-weight: 500; font-size: 32px;
  letter-spacing: -0.01em; margin-bottom: 10px; max-width: 20ch;
}
.section-note { color: var(--muted); max-width: 56ch; margin-bottom: 36px; }

/* ---- Manifesto ---- */
.manifesto {
  padding: 80px 0; border-top: 1px solid var(--border);
  background:
    radial-gradient(ellipse 50% 100% at 15% 50%,
    rgba(224, 129, 106, 0.07), transparent 70%);
}
.manifesto-line {
  font-family: var(--display); font-weight: 600; font-size: 56px;
  line-height: 1.05; letter-spacing: -0.02em;
}
.manifesto-line em { font-style: italic; color: var(--accent); }
.manifesto-body {
  color: var(--muted); font-size: 19px; margin-top: 22px; max-width: 48ch;
}
.manifesto-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: 48px; align-items: center;
}
.manifesto-img { margin: 0; }
.manifesto-img img {
  width: 100%; display: block; border-radius: 12px;
  border: 1px solid var(--border);
}

/* ---- Bench photos (real cleaning work, in the process section) ---- */
/* Bench carousel — a slow, continuous marquee of workbench photos.
   The track holds two copies of the set; translating -50% then looping
   is seamless. Pauses on hover and under prefers-reduced-motion. */
.bench-carousel {
  overflow: hidden; margin-top: 44px;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.bench-track {
  display: flex; gap: 16px; width: max-content;
  animation: bench-slide 45s linear infinite;
}
.bench-carousel:hover .bench-track { animation-play-state: paused; }
@keyframes bench-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 8px)); } /* half the track + half the gap */
}
@media (prefers-reduced-motion: reduce) {
  .bench-track { animation: none; }
}
.bench-track figure { margin: 0; width: 300px; flex: none; }
.bench-track img {
  width: 100%; display: block; border-radius: 10px;
  border: 1px solid var(--border); aspect-ratio: 4 / 3; object-fit: cover;
}
.bench-track figcaption {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  letter-spacing: 0.03em; margin-top: 8px;
}

/* ---- Process timeline (vertical bench sequence, not a grid) ---- */
.timeline { list-style: none; position: relative; padding-left: 64px; }
.timeline::before {
  content: ''; position: absolute; left: 21px; top: 14px; bottom: 14px;
  width: 2px; background: var(--border);
}
.timeline li { position: relative; padding-bottom: 36px; }
.timeline li:last-child { padding-bottom: 0; }
.t-num {
  position: absolute; left: -64px; top: -4px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 14px; color: var(--accent);
}
.timeline h3 { font-family: var(--body); font-weight: 600; font-size: 19px; margin-bottom: 5px; }
.timeline p { color: var(--muted); max-width: 52ch; }

/* ---- Previous work: before/after sliders + bench gallery ---- */
.ba-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-top: 40px;
}
.ba-figure { margin: 0; }
.ba {
  position: relative; overflow: hidden; border-radius: 12px;
  border: 1px solid var(--border); aspect-ratio: 4 / 3;
  user-select: none; -webkit-user-select: none;
}
.ba img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* The "before" layer sits on top, clipped at --pos from the left. */
.ba-before {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; margin-left: -1px; background: var(--text);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.55);
}
.ba-handle::after {
  content: '⟨ ⟩'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-size: 13px; letter-spacing: 1px;
  display: flex; align-items: center; justify-content: center;
}
/* Invisible full-surface range input drives the divider — native
   drag/keyboard/touch support with no pointer-event bookkeeping. */
.ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; margin: 0;
  -webkit-appearance: none; appearance: none;
}
.ba:has(.ba-range:focus-visible) .ba-handle { background: var(--accent); }
.ba-label {
  position: absolute; top: 12px; z-index: 2;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text);
  background: rgba(26, 23, 20, 0.72); border: 1px solid var(--border);
  border-radius: 4px; padding: 4px 8px; pointer-events: none;
  transition: opacity 180ms ease;
}
/* Fade a label out once the divider pushes its side of the photo off-frame. */
.ba-label.hide { opacity: 0; }
.ba-label-before { left: 12px; }
.ba-label-after { right: 12px; }
.ba-figure figcaption {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  letter-spacing: 0.03em; margin-top: 8px;
}
/* Odd last slider: span the row and center at single-column width. */
.ba-figure-solo {
  grid-column: 1 / -1; width: 100%;
  max-width: calc(50% - 12px); margin: 0 auto;
}

/* ---- Trust (stacked statements) ---- */
.trust-list { border-top: 1px solid var(--border); }
.trust-row {
  padding: 26px 0; border-bottom: 1px solid var(--border);
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px;
}
.trust-row h3 {
  font-family: var(--display); font-weight: 500; font-size: 23px;
  line-height: 1.25;
}
.trust-row p { color: var(--muted); }

/* ---- Offer ---- */
.offer {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 32px;
  max-width: 680px;
}
.offer-group {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
  margin-bottom: 16px;
}
.offer ul { list-style: none; }
.offer li { padding: 8px 0; padding-left: 26px; position: relative; }
.offer li::before {
  content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700;
}
.offer-price {
  font-family: var(--display); font-weight: 600; font-size: 44px;
  letter-spacing: -0.02em; line-height: 1;
  margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--border);
}
.offer-price span {
  display: block; margin-top: 8px; font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); font-weight: 400;
}
.offer li.soon { color: var(--muted); }
.offer li.soon::before { content: '○'; color: var(--muted); font-weight: 400; }
.soon-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 2px 6px; margin-left: 8px;
}

/* ---- FAQ ---- */
details { border-bottom: 1px solid var(--border); padding: 16px 0; }
details summary {
  font-family: var(--body); font-weight: 600; font-size: 17px;
  cursor: pointer; list-style: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: ' +'; color: var(--accent); }
details[open] summary::after { content: ' −'; }
details p { color: var(--muted); margin-top: 10px; }

/* ---- Footer ---- */
footer {
  border-top: 1px solid var(--border); padding: 36px 0;
  color: var(--muted); font-size: 14px;
  /* 1fr | auto | 1fr keeps the middle cell dead-centered on the page no
     matter how wide the left/right cells are. */
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 12px;
}
footer a { color: var(--muted); }
.footer-credit { text-align: center; }
.footer-links { text-align: right; }
.footer-links a + a { margin-left: 18px; }

/* ---- SEO service pages ---- */
.nav-back {
  color: var(--text); font-size: 14px; font-weight: 600;
  text-underline-offset: 4px;
}
.subpage-hero {
  padding: 72px 0 80px;
  background:
    radial-gradient(ellipse 55% 95% at 15% 45%, rgba(224, 129, 106, 0.09), transparent 72%);
  border-bottom: 1px solid var(--border);
}
.subpage-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: 72px; align-items: center;
}
.subpage-hero h1 {
  max-width: 16ch; font-family: var(--display); font-weight: 600;
  font-size: 52px; line-height: 1.06; letter-spacing: -0.025em;
}
.subpage-hero .lead {
  max-width: 58ch; color: var(--muted); font-size: 19px; margin-top: 22px;
}
.subpage-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.subpage-fine {
  margin-top: 18px; color: var(--muted); font-family: var(--mono);
  font-size: 11px; line-height: 1.7; letter-spacing: .03em;
}
.service-ticket {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 30px;
}
.service-ticket-price {
  font-family: var(--display); font-size: 46px; font-weight: 600;
  line-height: 1; padding-bottom: 22px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.service-ticket-location {
  font-family: var(--display); font-size: 35px; font-weight: 600;
  line-height: 1.12; padding-bottom: 22px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.check-list { list-style: none; }
.check-list li { position: relative; padding: 8px 0 8px 25px; }
.check-list li::before {
  content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700;
}
.article-grid {
  display: grid; grid-template-columns: 1fr .82fr; gap: 72px; align-items: center;
}
.article-grid article > p:not(.eyebrow) { color: var(--muted); margin-top: 16px; }
.article-photo { margin: 0; }
.article-photo img {
  width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid var(--border); border-radius: 12px;
}
.article-photo figcaption {
  color: var(--muted); font-family: var(--mono); font-size: 11px;
  letter-spacing: .03em; margin-top: 10px;
}
.compact-steps { list-style: none; border-top: 1px solid var(--border); }
.compact-steps li {
  display: grid; grid-template-columns: 56px 1fr; gap: 24px;
  padding: 25px 0; border-bottom: 1px solid var(--border);
}
.compact-steps li > span {
  color: var(--accent); font-family: var(--mono); font-size: 13px; padding-top: 4px;
}
.compact-steps h3 { font-family: var(--display); font-size: 22px; font-weight: 500; }
.compact-steps p { color: var(--muted); margin-top: 4px; }
.reading-column { max-width: 1120px; }
.reading-column > * { max-width: 800px; }
.service-directory { background: var(--surface); }
.directory-links { border-top: 1px solid var(--border); }
.directory-links a {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px;
  padding: 22px 0; border-bottom: 1px solid var(--border);
  color: var(--text); text-decoration: none;
}
.directory-links a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.directory-links span { color: var(--muted); }
.local-services {
  max-width: 680px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.local-services article { padding: 32px; }
.local-services article + article { border-left: 1px solid var(--border); }
.local-services h3 {
  font-family: var(--display); font-size: 25px; font-weight: 500; margin-bottom: 12px;
}
.local-services article > p:not(.offer-group) { color: var(--muted); }
.local-services a {
  display: inline-block; margin-top: 18px; color: var(--text); text-underline-offset: 4px;
}

/* ---- Spinner ---- */
.spinner {
  display: inline-block; width: 15px; height: 15px; vertical-align: -2px;
  border: 2px solid rgba(26,23,20,0.35); border-top-color: #1A1714;
  border-radius: 50%; animation: spin .6s linear infinite; margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Order tracking lookup (landing section + status page) ---- */
.lookup { display: flex; gap: 10px; max-width: 460px; flex-wrap: wrap; }
.lookup input {
  flex: 1; min-width: 200px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px; padding: 13px;
  color: var(--text); font-family: var(--body); font-size: 16px; min-height: 48px;
}
.lookup input:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.lookup-miss { color: var(--error); font-size: 14px; margin-bottom: 16px; max-width: 48ch; }

/* ---- Status page ---- */
/* The status page is a reading column, not a full-bleed 1120px surface. The
   column starts at the shared container's left edge — under the header
   wordmark, like the homepage's text sections — and its content is capped at
   a comfortable measure rather than centered in the viewport. */
.status-wrap { padding: 56px 24px 88px; }  /* keep .container's side gutters */
.status-wrap > * { max-width: 800px; }
.status-title {
  font-family: var(--display); font-weight: 600; font-size: 38px;
  letter-spacing: -0.02em; margin: 6px 0 10px;
}
.status-sub { color: var(--muted); max-width: 52ch; margin-bottom: 44px; }

/* Running log the shop keeps for this order — a highlighted note above the pipeline */
.status-notes {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 10px;
  padding: 18px 20px; margin-bottom: 44px; max-width: 60ch;
}
.status-notes .eyebrow { margin-bottom: 8px; }
.status-notes p { white-space: pre-line; color: var(--text); }

.pipeline { list-style: none; }
.stage { position: relative; padding-left: 62px; padding-bottom: 30px; }
.stage::before {
  content: ''; position: absolute; left: 21px; top: 36px; bottom: -8px;
  width: 2px; background: var(--border);
}
.stage:last-child::before { display: none; }
.stage-mark {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 15px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
}
.stage.done .stage-mark {
  background: var(--accent); color: #1A1714; border-color: var(--accent);
}
.stage.current .stage-mark {
  border-color: var(--accent); color: var(--accent);
  box-shadow: 0 0 0 4px rgba(224, 129, 106, 0.16);
}
.stage-body h3 { font-family: var(--body); font-weight: 600; font-size: 19px; }
.stage-body p { color: var(--muted); margin-top: 3px; }
.stage.upcoming .stage-body h3 { color: #6f685a; }
.stage.upcoming .stage-body p { color: #6f685a; }
/* Detail cards break out of the stage's 62px timeline indent so their edges
   line up with the page column (and the header wordmark) instead of hanging
   off to the right of it. The stage rail sits at left:21px, i.e. inside the
   card's footprint, so the card reads as sitting on the rail. */
.stage-detail {
  margin-top: 16px; margin-left: -62px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: 20px;
  /* Paint over the rail rather than letting it show through the card. */
  position: relative; z-index: 1;
}
/* Narrow screens have no room to break out — the pull would eat the container's
   24px gutter and run the card to the screen edge. Keep it in the indent. */
@media (max-width: 700px) { .stage-detail { margin-left: 0; } }
.stage-detail h4 {
  font-family: var(--body); font-weight: 600; font-size: 14px; margin: 18px 0 8px;
}
.stage-detail .btn:first-child { margin-bottom: 4px; }
.note { color: var(--muted); font-size: 14px; }
.packing { list-style: none; margin-top: 4px; }
.packing li {
  padding: 5px 0 5px 20px; position: relative;
  color: var(--muted); font-size: 15px;
}
.packing li::before {
  content: '·'; position: absolute; left: 6px;
  color: var(--accent); font-weight: 700; font-size: 18px;
}
.photo-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.photo-grid a { display: block; border-radius: 8px; cursor: zoom-in; }
.photo-grid img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--border); display: block;
  transition: border-color 120ms ease;
}
.photo-grid a:hover img { border-color: var(--accent); }

/* Lightbox — enlarges a bench photo over a dimmed backdrop */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 32px; background: rgba(0, 0, 0, 0.85);
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: 8px; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5); cursor: default;
}
.lightbox-close {
  position: absolute; top: 20px; right: 24px;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: none; cursor: pointer;
  color: var(--text); font-size: 34px; line-height: 1;
}
.lightbox-close:hover { color: var(--accent); }

/* ---- Review popup: half-star rating + comments ---- */
.review-modal {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(0, 0, 0, .72);
}
.review-modal[hidden] { display: none; }
.review-dialog {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 28px; width: 100%; max-width: 460px;
}
.review-dialog h3 {
  font-family: var(--display); font-weight: 600; font-size: 22px; margin-bottom: 16px;
}
.review-close {
  position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; padding: 0;
  background: transparent; border: none; cursor: pointer;
  color: var(--muted); font-size: 26px; line-height: 1;
}
.review-close:hover { color: var(--accent); }
.review-field {
  display: block; margin: 18px 0 16px; font-size: 14px; font-weight: 600;
}
.review-field .opt { color: var(--muted); font-weight: 400; }
.review-field textarea {
  width: 100%; margin-top: 8px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 7px; padding: 12px; color: var(--text);
  font-family: var(--body); font-size: 15px; min-height: 84px; resize: vertical;
}
.review-field textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
/* Star widget: two SVG layers per star — a muted background and an accent fill
   clipped by width (0 / 50% / 100%); two invisible half-buttons capture the
   .5 / 1.0 clicks. SVG (not the ★ glyph) so it never renders as a color emoji. */
.stars { display: inline-flex; gap: 6px; }
.star { position: relative; width: 34px; height: 34px; line-height: 0; }
.star-bg, .star-fill {
  position: absolute; top: 0; left: 0; height: 34px; pointer-events: none;
}
.star-bg { color: var(--border); }         /* empty star */
.star-fill { color: var(--accent); width: 0; overflow: hidden; }  /* clipped reveal */
.star-bg svg, .star-fill svg { display: block; width: 34px; height: 34px; fill: currentColor; }
.star-half {
  position: absolute; top: 0; height: 100%; width: 50%;
  background: none; border: none; padding: 0; cursor: pointer; z-index: 2;
}
.star-left { left: 0; }
.star-right { right: 0; }
.status-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 28px; max-width: 560px;
}
.status-card h3 {
  font-family: var(--display); font-weight: 600; font-size: 22px; margin-bottom: 8px;
}
.status-card p { color: var(--muted); }
.status-card .btn { margin-top: 20px; }

/* ---- Legal pages (privacy, terms) ---- */
.legal { max-width: 760px; padding: 56px 0 88px; }
.legal h1 {
  font-family: var(--display); font-weight: 600; font-size: 38px;
  letter-spacing: -0.02em; margin-bottom: 8px;
}
.legal .updated {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 36px;
}
.legal .lead { color: var(--text); font-size: 19px; margin-bottom: 10px; }
.legal h2 {
  font-family: var(--display); font-weight: 500; font-size: 23px;
  margin: 36px 0 10px;
}
.legal p, .legal li { color: var(--muted); }
.legal p { margin-bottom: 12px; }
.legal ul { padding-left: 22px; margin-bottom: 12px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--text); }
.legal strong { color: var(--text); font-weight: 600; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-copy { padding-top: 0; }
  .intake { margin-top: 0; }
  .hero-copy h1 { font-size: 36px; }
  .manifesto-line { font-size: 38px; }
  .manifesto-grid { grid-template-columns: 1fr; gap: 32px; }
  .trust-row { grid-template-columns: 1fr; gap: 8px; }
  h2.section-title { font-size: 26px; }
  .ba-pair { grid-template-columns: 1fr; }
  .ba-figure-solo { max-width: 100%; }
  .subpage-hero-grid, .article-grid { grid-template-columns: 1fr; gap: 40px; }
  .subpage-hero h1 { font-size: 40px; }
  .service-ticket { max-width: 560px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero { padding: 40px 0 56px; }
  section, .manifesto { padding: 48px 0; }
  .bench-track figure { width: 240px; }
  .nav .tag { display: none; }
  footer { grid-template-columns: 1fr; text-align: center; }
  .footer-links { text-align: center; }
  .subpage-hero { padding: 48px 0 56px; }
  .subpage-hero h1 { font-size: 35px; }
  .subpage-actions .btn { width: 100%; text-align: center; }
  .service-ticket, .local-services article { padding: 24px; }
  .directory-links a { grid-template-columns: 1fr; gap: 4px; }
}