/* ==========================================================================
   Marry Me — Jewelry Repair & Care
   Storefront pages: repair-service.html, repair-request.html, repair-track.html
   Built on the site tokens (Fraunces / Instrument Sans / teal + champagne gold).
   ========================================================================== */

:root {
  --rs-ink: #2F2924;
  --rs-muted: #736759;
  --rs-line: #D9CFC2;
  --rs-bg: #FBFAF7;
  --rs-card: #FFFDF9;
  --rs-soft: #F1ECE3;
  --rs-teal: #0B6B63;
  --rs-teal-deep: #064F4A;
  --rs-gold: #B8905A;
  --rs-gold-soft: #F3E9DA;
  --rs-danger: #9B3F36;
  --rs-display: "Fraunces", Georgia, serif;
  --rs-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rs-max: 1180px;
}

.rs-page {
  background: var(--rs-bg);
  color: var(--rs-ink);
  font-family: var(--rs-body);
}

/* ==========================================================================
   Mobile/desktop content-parity requirement: every repair + unified-tracking
   page must show its full content immediately, never gated by scroll
   position or JS timing. The shared site-wide scroll-reveal system
   (`.mm-reveal` / `.mm-revealed`, enhancements.js + enhancements.css) still
   runs unmodified everywhere else on the site; here it is only ever allowed
   to ADD a subtle motion flourish, never to withhold content — a below-the-
   fold section that hasn't yet crossed the IntersectionObserver threshold
   (or a full-page render that never really "scrolls") must render at full
   opacity from the first paint. Scoped to `.rs-page` (repair-service.html,
   repair-request.html) and `.mm-track-shell` (track-order.html) only.
   ========================================================================== */
.rs-page .mm-reveal,
.mm-track-shell .mm-reveal {
  opacity: 1;
  transform: none;
}
.rs-page main { display: block; }
.rs-shell { max-width: var(--rs-max); margin: 0 auto; padding: 0 clamp(18px, 5vw, 48px); }
.rs-page h1, .rs-page h2, .rs-page h3 { font-family: var(--rs-display); font-weight: 400; color: var(--rs-ink); }
.rs-eyebrow {
  display: inline-block;
  color: var(--rs-teal);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ---- buttons ---- */
.rs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.rs-btn-primary { background: var(--rs-teal); color: #FFFDF9; border-color: var(--rs-teal); }
.rs-btn-primary:hover, .rs-btn-primary:focus-visible { background: var(--rs-teal-deep); border-color: var(--rs-teal-deep); }
.rs-btn-ghost { background: transparent; color: var(--rs-ink); border-color: var(--rs-line); }
.rs-btn-ghost:hover, .rs-btn-ghost:focus-visible { background: var(--rs-soft); }
.rs-btn:focus-visible { outline: 2px solid var(--rs-gold); outline-offset: 3px; }
.rs-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ==========================================================================
   Homepage teaser (loaded on index.html)
   ========================================================================== */
.rs-home { max-width: var(--rs-max); margin: 0 auto; padding: clamp(48px, 8vw, 90px) clamp(22px, 4vw, 52px); }
.rs-home-inner {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  border-top: 1px solid var(--rs-line);
  padding-top: clamp(36px, 5vw, 60px);
}
.rs-home-copy h2 { margin: 0 0 16px; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.03; letter-spacing: -0.02em; }
.rs-home-copy p { margin: 0 0 24px; max-width: 46ch; color: var(--rs-muted); font-size: 0.98rem; line-height: 1.75; }
.rs-home-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.rs-home-art { display: block; }
.rs-home-art .rs-video { max-width: 360px; margin: 0 0 0 auto; }
@media (max-width: 720px) {
  .rs-home-inner { grid-template-columns: 1fr; }
  .rs-home-art .rs-video { max-width: 340px; margin: 4px auto 0; }
}

/* ==========================================================================
   Repair service page
   ========================================================================== */
.rs-hero {
  background: linear-gradient(180deg, var(--rs-gold-soft) 0%, var(--rs-bg) 100%);
  padding: clamp(48px, 8vw, 104px) 0 clamp(40px, 6vw, 72px);
}
.rs-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.rs-hero h1 { margin: 0 0 20px; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -0.03em; }
.rs-hero p { margin: 0 0 30px; max-width: 48ch; color: var(--rs-muted); font-size: 1.02rem; line-height: 1.75; }
.rs-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.rs-hero-art svg { width: 100%; max-width: 360px; margin: 0 auto; display: block; color: var(--rs-teal); }
.rs-hero-art img {
  width: 100%; max-width: 420px; height: auto; margin: 0 auto; display: block;
  border-radius: 18px;
}
@media (max-width: 820px) {
  .rs-hero-grid { grid-template-columns: 1fr; }
  .rs-hero-art { order: -1; max-width: 300px; margin: 0 auto; }
}

.rs-section { padding: clamp(44px, 7vw, 88px) 0; }
.rs-section + .rs-section { border-top: 1px solid var(--rs-line); }
.rs-section-head { max-width: 62ch; margin: 0 0 clamp(24px, 4vw, 44px); }
.rs-section-head h2 { margin: 0 0 12px; font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.1; }
.rs-section-head p { margin: 0; color: var(--rs-muted); line-height: 1.75; }

/* Trust row */
.rs-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 32px); }
.rs-trust li { list-style: none; }
.rs-trust-card { background: var(--rs-card); border: 1px solid var(--rs-line); border-radius: 16px; padding: 22px; height: 100%; }
.rs-trust-card svg { width: 30px; height: 30px; color: var(--rs-gold); margin-bottom: 12px; }
.rs-trust-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.rs-trust-card p { margin: 0; color: var(--rs-muted); font-size: 0.9rem; line-height: 1.65; }
.rs-trust { padding: 0; margin: 0; }
@media (max-width: 720px) { .rs-trust { grid-template-columns: 1fr; } }

/* ==========================================================================
   "Repairs We Assess" — five alternating editorial service sections
   (repair-service.html section 3). Each .rs-assess-block puts copy FIRST in
   DOM order (so mobile + screen readers always meet the heading before the
   media) and uses CSS `order` only to flip which side the media sits on at
   desktop widths.
   ========================================================================== */
.rs-assess-note-lead { margin: 0 0 clamp(20px, 3vw, 32px); color: var(--rs-muted); line-height: 1.7; max-width: 68ch; }

.rs-assess-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding: clamp(32px, 5.5vw, 60px) 0;
}
.rs-assess-block + .rs-assess-block { border-top: 1px solid var(--rs-line); }
.rs-assess-copy { order: 1; }
.rs-assess-media { order: 2; }
.rs-assess-block.rs-assess-flip .rs-assess-media { order: -1; }

.rs-assess-copy h3 { margin: 0 0 10px; font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.15; }
.rs-assess-copy > p.rs-assess-lede { margin: 0 0 16px; color: var(--rs-muted); line-height: 1.75; max-width: 46ch; }
.rs-assess-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
.rs-assess-list li {
  position: relative; padding-left: 24px; color: var(--rs-ink); font-size: 0.94rem; line-height: 1.5;
}
.rs-assess-list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px; border-radius: 999px; background: var(--rs-gold);
}
.rs-assess-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.rs-assess-inspect-note { margin: 0; color: var(--rs-muted); font-size: 0.78rem; font-style: italic; }

.rs-assess-media { min-width: 0; }
.rs-assess-media-frame {
  max-width: 420px; margin: 0 auto;
  border: 1px solid var(--rs-line); border-radius: 18px;
  background: var(--rs-card); padding: clamp(20px, 4vw, 36px);
  display: grid; place-items: center;
}
.rs-assess-media-frame img { width: 100%; max-width: 220px; height: auto; display: block; }
.rs-assess-media-frame .rs-assess-media-secondary { width: 40%; max-width: 90px; margin-top: 14px; opacity: 0.75; }

/* Chains/Necklaces/Bracelets + Engraving — real photos, not icons: they need
   to read at a useful size (full composition preserved via height:auto, no crop). */
.rs-assess-media-frame.rs-assess-media-photo { padding: clamp(10px, 2vw, 16px); }
.rs-assess-media-frame.rs-assess-media-photo img { max-width: 360px; border-radius: 12px; }

@media (max-width: 860px) {
  .rs-assess-block { grid-template-columns: 1fr; }
  .rs-assess-copy, .rs-assess-media,
  .rs-assess-block.rs-assess-flip .rs-assess-media { order: unset; }
}

/* ---- craftsmanship video component (repair-video.js) ---- */
.rs-video {
  position: relative; max-width: 420px; margin: 0 auto;
  aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden;
  background: var(--rs-soft); border: 1px solid var(--rs-line);
}
.rs-video-el { width: 100%; height: 100%; object-fit: cover; display: block; background: #14110d; }
/* Portrait (9:16) footage shown whole — the action spans the full height, so
   the default 4:5 box would crop the hands or the machine head. */
.rs-video.rs-video--portrait { aspect-ratio: 9 / 16; max-width: 340px; }
.rs-assess-media:has(.rs-video--portrait) .rs-video-caption { max-width: 340px; }
.rs-video-toggle {
  position: absolute; right: 12px; bottom: 12px; width: 46px; height: 46px;
  border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(20, 17, 13, 0.72); color: #fff;
  display: grid; place-items: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.rs-video-toggle:hover { background: rgba(20, 17, 13, 0.86); }
.rs-video-toggle:focus-visible { outline: 2px solid var(--rs-gold); outline-offset: 3px; }
.rs-video-toggle svg { width: 18px; height: 18px; display: block; }
.rs-video-toggle .rs-video-icon-pause { display: none; }
.rs-video-toggle.is-playing .rs-video-icon-play { display: none; }
.rs-video-toggle.is-playing .rs-video-icon-pause { display: block; }
.rs-video-caption {
  margin: 10px auto 0; max-width: 420px; text-align: center;
  font-size: 0.78rem; color: var(--rs-muted); letter-spacing: 0.02em;
}

.rs-video-switcher { max-width: 420px; margin: 0 auto; }
.rs-video-tabs { display: flex; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.rs-video-tabs [role="tab"] {
  flex: 1 1 auto; min-height: 40px; padding: 8px 12px;
  border: 1px solid var(--rs-line); border-radius: 999px; background: #fff;
  color: var(--rs-muted); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.02em;
  cursor: pointer; text-align: center;
}
.rs-video-tabs [role="tab"][aria-selected="true"] { background: var(--rs-teal); border-color: var(--rs-teal); color: #FFFDF9; }
.rs-video-tabs [role="tab"]:focus-visible { outline: 2px solid var(--rs-gold); outline-offset: 2px; }
.rs-video-panel .rs-video { margin: 0 auto; }
.rs-video-panel .rs-video-caption { margin-top: 10px; }

/* Process steps */
.rs-steps { counter-reset: rs; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 3vw, 28px); padding: 0; margin: 0; }
.rs-steps li { list-style: none; position: relative; padding-top: 46px; }
.rs-steps li::before {
  counter-increment: rs; content: counter(rs);
  position: absolute; top: 0; left: 0;
  width: 34px; height: 34px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--rs-teal); color: #FFFDF9; font-weight: 700; font-size: 0.9rem;
}
.rs-steps h3 { margin: 0 0 6px; font-size: 1rem; font-family: var(--rs-body); font-weight: 600; }
.rs-steps p { margin: 0; color: var(--rs-muted); font-size: 0.88rem; line-height: 1.6; }
@media (max-width: 860px) { .rs-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .rs-steps { grid-template-columns: 1fr; } }

/* Before / after (placeholder) */
.rs-ba { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; padding: 0; margin: 0; }
.rs-ba li { list-style: none; }
.rs-ba-card { border: 1px solid var(--rs-line); border-radius: 16px; overflow: hidden; background: var(--rs-card); }
.rs-ba-imgs { display: grid; grid-template-columns: 1fr 1fr; }
.rs-ba-ph {
  aspect-ratio: 1 / 1; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, #F1ECE3, #F1ECE3 10px, #EDE6DA 10px, #EDE6DA 20px);
  color: var(--rs-muted); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; padding: 8px;
}
.rs-ba-ph b { display: block; font-size: 0.62rem; }
.rs-ba-card figcaption { padding: 14px 16px; font-size: 0.86rem; color: var(--rs-muted); }
.rs-ba-note { margin: 16px 0 0; font-size: 0.8rem; color: var(--rs-muted); font-style: italic; }

/* Info panel */
.rs-info { background: var(--rs-soft); border-radius: 20px; padding: clamp(24px, 4vw, 44px); }
.rs-info h2 { margin: 0 0 16px; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.rs-info ul { margin: 0; padding-left: 1.1em; }
.rs-info li { margin: 0 0 10px; color: var(--rs-muted); line-height: 1.7; }
.rs-info li strong { color: var(--rs-ink); }
.rs-todo {
  margin-top: 18px; padding: 12px 14px;
  background: var(--rs-gold-soft); border: 1px solid var(--rs-line); border-radius: 10px;
  font-size: 0.82rem; color: var(--rs-muted);
}
.rs-todo::before {
  content: "To confirm"; display: block;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rs-gold); margin-bottom: 3px;
}

/* FAQ */
.rs-faq details {
  border: 1px solid var(--rs-line); border-radius: 12px; background: var(--rs-card);
  padding: 4px 18px; margin-bottom: 10px;
}
.rs-faq summary {
  cursor: pointer; list-style: none; padding: 14px 0; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.rs-faq summary::-webkit-details-marker { display: none; }
.rs-faq summary::after { content: "+"; color: var(--rs-teal); font-size: 1.2rem; line-height: 1; }
.rs-faq details[open] summary::after { content: "\2212"; }
.rs-faq summary:focus-visible { outline: 2px solid var(--rs-gold); outline-offset: 3px; border-radius: 6px; }
.rs-faq details > p { margin: 0 0 16px; color: var(--rs-muted); line-height: 1.7; }
.rs-faq .rs-todo { margin: 0 0 16px; }

/* Final CTA */
.rs-cta { text-align: center; background: var(--rs-teal); color: #FFFDF9; border-radius: 24px; padding: clamp(36px, 6vw, 72px) clamp(20px, 4vw, 48px); }
.rs-cta h2 { color: #FFFDF9; margin: 0 0 12px; font-size: clamp(1.9rem, 4vw, 3rem); }
.rs-cta p { margin: 0 auto 24px; max-width: 52ch; color: #E6F0EE; line-height: 1.7; }
.rs-cta .rs-btn-primary { background: #FFFDF9; color: var(--rs-teal-deep); border-color: #FFFDF9; }
.rs-cta .rs-btn-primary:hover, .rs-cta .rs-btn-primary:focus-visible { background: var(--rs-gold-soft); }
.rs-cta .rs-btn-ghost { color: #FFFDF9; border-color: rgba(255,255,255,0.5); }
.rs-cta .rs-btn-ghost:hover, .rs-cta .rs-btn-ghost:focus-visible { background: rgba(255,255,255,0.12); }

/* ==========================================================================
   Multi-step request form
   ========================================================================== */
.rs-form-page { padding: clamp(32px, 6vw, 72px) 0; }
.rs-form-head { max-width: 60ch; margin: 0 0 28px; }
.rs-form-head h1 { margin: 0 0 10px; font-size: clamp(2rem, 4vw, 3rem); }
.rs-form-head p { margin: 0; color: var(--rs-muted); line-height: 1.7; }

.rs-progress { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.rs-progress li {
  flex: 1 1 auto; min-width: 90px; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--rs-muted); padding: 8px 6px; border-top: 3px solid var(--rs-line); text-align: center;
}
.rs-progress li[aria-current="step"] { color: var(--rs-teal); border-top-color: var(--rs-teal); font-weight: 700; }
.rs-progress li.is-done { color: var(--rs-ink); border-top-color: var(--rs-gold); }

.rs-form { background: var(--rs-card); border: 1px solid var(--rs-line); border-radius: 18px; padding: clamp(20px, 4vw, 36px); }
.rs-step { display: none; }
.rs-step.is-active { display: block; }
.rs-step h2 { margin: 0 0 6px; font-size: 1.3rem; }
.rs-step > p.rs-step-hint { margin: 0 0 20px; color: var(--rs-muted); font-size: 0.9rem; line-height: 1.6; }

.rs-field { margin-bottom: 18px; }
.rs-field > label, .rs-fieldset > legend {
  display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; margin-bottom: 7px; color: var(--rs-ink);
}
.rs-field .rs-req { color: var(--rs-danger); }
.rs-field input[type="text"],
.rs-field input[type="email"],
.rs-field input[type="tel"],
.rs-field select,
.rs-field textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--rs-line); border-radius: 10px;
  padding: 12px 13px; font: inherit; background: #fff; color: var(--rs-ink); min-height: 44px;
}
.rs-field textarea { min-height: 110px; resize: vertical; }
.rs-field input:focus, .rs-field select:focus, .rs-field textarea:focus {
  outline: 2px solid var(--rs-gold); outline-offset: 1px; border-color: var(--rs-gold);
}
.rs-field .rs-hint { margin: 6px 0 0; font-size: 0.8rem; color: var(--rs-muted); }
.rs-field .rs-error { margin: 6px 0 0; font-size: 0.82rem; color: var(--rs-danger); font-weight: 600; }
.rs-field.has-error input, .rs-field.has-error select, .rs-field.has-error textarea { border-color: var(--rs-danger); }
.rs-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .rs-two { grid-template-columns: 1fr; } }

.rs-fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.rs-choice { display: flex; flex-wrap: wrap; gap: 10px; }
.rs-choice label {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; min-height: 44px;
  border: 1px solid var(--rs-line); border-radius: 999px; cursor: pointer; font-size: 0.88rem; background: #fff;
}
.rs-choice input { accent-color: var(--rs-teal); width: 18px; height: 18px; }
.rs-choice label:focus-within { outline: 2px solid var(--rs-gold); outline-offset: 2px; }

.rs-consent { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.rs-consent input { margin-top: 3px; width: 20px; height: 20px; accent-color: var(--rs-teal); flex: none; }
.rs-consent label { font-size: 0.88rem; color: var(--rs-muted); line-height: 1.6; }

/* photo uploader — premium drop card is provided by css/mm-uploader.css;
   this only resets the legacy .rs-drop box and styles the preview grid. */
.rs-drop.mm-uploader { display: block; margin: 0; border: 0; padding: 0; background: none; text-align: left; }
.rs-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.rs-previews li {
  position: relative; border: 1px solid var(--rs-line); border-radius: 12px; overflow: hidden;
  background: var(--rs-card); box-shadow: 0 6px 18px rgba(47, 41, 36, .06);
}
.rs-previews img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--rs-soft); }
.rs-previews .rs-preview-meta { display: grid; gap: 1px; padding: 7px 9px; min-width: 0; }
.rs-previews .rs-preview-name {
  display: block; font-size: 0.72rem; color: var(--rs-ink); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rs-previews .rs-preview-size { display: block; font-size: 0.66rem; color: var(--rs-muted); }
.rs-previews button {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 999px;
  border: 0; background: rgba(24,20,17,0.72); color: #fff; cursor: pointer; font-size: 0.82rem; line-height: 1;
  display: grid; place-items: center;
}
.rs-previews button:hover { background: var(--rs-danger); }
.rs-previews button:focus-visible { outline: 2px solid var(--rs-gold); outline-offset: 2px; }

.rs-review dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.rs-review dt { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rs-muted); font-weight: 700; }
.rs-review dd { margin: 0; overflow-wrap: anywhere; }

.rs-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.rs-actions .rs-btn { flex: 0 1 auto; }
/* The step buttons rely on the [hidden] attribute; .rs-btn's display would otherwise override it. */
.rs-actions .rs-btn[hidden] { display: none !important; }
/* Next / Submit Request always sit on the right; Back (when shown) stays on the left. No empty gap on step 1. */
.rs-actions [data-rs-next], .rs-actions [data-rs-submit] { margin-left: auto; }
.rs-status { margin: 14px 0 0; font-size: 0.9rem; min-height: 1.3em; }
.rs-status.is-error { color: var(--rs-danger); font-weight: 600; }
.rs-status.is-ok { color: var(--rs-teal-deep); font-weight: 600; }

/* success panel */
.rs-done { text-align: center; background: var(--rs-card); border: 1px solid var(--rs-line); border-radius: 18px; padding: clamp(28px, 5vw, 52px); }
.rs-done h2 { margin: 0 0 10px; }
.rs-code-box {
  display: inline-flex; flex-direction: column; gap: 4px; align-items: center;
  margin: 18px auto; padding: 16px 26px; border: 1px dashed var(--rs-gold); border-radius: 12px; background: var(--rs-gold-soft);
}
.rs-code-box strong { font-size: 1.4rem; letter-spacing: 0.06em; font-family: var(--rs-display); }
.rs-code-box span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--rs-muted); }
.rs-token { word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86rem; background: #fff; border: 1px solid var(--rs-line); border-radius: 8px; padding: 10px 12px; margin: 8px 0 0; }
.rs-warn { color: var(--rs-danger); font-size: 0.82rem; margin-top: 8px; }

/* ==========================================================================
   Tracking page
   ========================================================================== */
.rs-track-page { padding: clamp(32px, 6vw, 72px) 0; }
.rs-track-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; margin: 0 0 24px; }
@media (max-width: 640px) { .rs-track-form { grid-template-columns: 1fr; } }
.rs-track-form .rs-field { margin: 0; }
.rs-track-state { margin: 0 0 20px; font-size: 0.92rem; min-height: 1.3em; }
.rs-track-state.is-loading { color: var(--rs-muted); }
.rs-track-state.is-error { color: var(--rs-danger); font-weight: 600; }
.rs-track-state.is-ok { color: var(--rs-teal-deep); font-weight: 600; }

.rs-track-result { display: grid; gap: 18px; }
.rs-track-card { background: var(--rs-card); border: 1px solid var(--rs-line); border-radius: 16px; padding: 22px; }
.rs-track-card h3 { margin: 0 0 12px; font-size: 1.1rem; }
.rs-track-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: baseline; }
.rs-track-top .rs-track-ref { font-family: var(--rs-display); font-size: 1.5rem; }
.rs-chip { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--rs-gold-soft); color: var(--rs-teal-deep); font-size: 0.78rem; font-weight: 700; }

.rs-progressbar { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.rs-progressbar li { flex: 1 1 70px; text-align: center; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rs-muted); padding-top: 26px; position: relative; }
.rs-progressbar li::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 999px; border: 2px solid var(--rs-line); background: #fff;
  display: grid; place-items: center; font-size: 0.6rem; line-height: 1; color: #fff;
}
.rs-progressbar li.is-done::before { content: "\2713"; background: var(--rs-teal); border-color: var(--rs-teal); }
.rs-progressbar li.is-current::before { border-color: var(--rs-gold); box-shadow: 0 0 0 3px var(--rs-gold-soft); }
/* Mobile: the same horizontal row of status dots becomes a vertical
   timeline — each stage its own left-aligned row (dot + label), matching
   the existing Order-mode `.mm-track-step` mobile pattern. Every stage
   stays on screen (no wrap-cramming, no sideways scroll), and status is
   never color-only: a done stage gets a check mark glyph, a current stage
   gets a gold ring, an upcoming stage is a plain hollow dot. */
@media (max-width: 640px) {
  .rs-progressbar { flex-direction: column; gap: 2px; }
  .rs-progressbar li {
    flex: none; display: flex; align-items: center; gap: 12px;
    text-align: left; padding: 9px 0 9px 30px; font-size: 0.72rem;
  }
  .rs-progressbar li::before { left: 0; top: 50%; transform: translateY(-50%); }
}

.rs-timeline { list-style: none; margin: 0; padding: 0; }
.rs-timeline li { padding: 12px 0; border-bottom: 1px solid var(--rs-line); }
.rs-timeline li:last-child { border-bottom: 0; }
.rs-timeline time { display: block; font-size: 0.75rem; color: var(--rs-muted); margin-top: 2px; }

.rs-est-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.rs-est-table td { padding: 8px 6px; border-bottom: 1px solid var(--rs-line); font-size: 0.92rem; vertical-align: top; }
.rs-est-table .rs-amt { text-align: right; white-space: nowrap; }
.rs-est-total td { font-weight: 700; border-bottom: 0; }
.rs-est-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
@media (max-width: 480px) {
  .rs-est-actions { flex-direction: column; align-items: stretch; }
  .rs-est-actions .rs-btn { width: 100%; }
}
.rs-photos-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.rs-photos-strip img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--rs-line); background: var(--rs-soft); }

/* ==========================================================================
   Repair illustrations (decorative line-art SVGs, images/repair/*.svg)
   Champagne-gold + charcoal line work baked into each file; no recolour here.
   ========================================================================== */
/* request form — a small mark beside each step heading */
.rs-step-headrow { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; }
.rs-step-headrow h2 { margin: 0; }
.rs-step-mark { width: 30px; height: 30px; flex: none; display: block; }

/* photo guidance illustration (informative) */
.rs-photo-guide {
  display: block; width: 100%; max-width: 560px; height: auto;
  margin: 0 0 18px; padding: 10px;
  border: 1px solid var(--rs-line); border-radius: 12px; background: var(--rs-card);
}

/* ==========================================================================
   Cinematic repair journey — repair-service.html "How Your Repair Journey Works"
   ONE continuous supplied film (videos/repair-journey-web.mp4), not five
   clips. Base rules below are the safe, always-correct fallback: the video
   shows once, paused on its poster, as a static hero image; the five stages
   are listed as plain accessible HTML text below it — what no-JS,
   prefers-reduced-motion, and any browser without IntersectionObserver get.
   JS only ever ADDS the sticky scroll-scrubbed stage on top of this, via the
   .repair-film--cinematic modifier — it never withholds content.
   ========================================================================== */
.repair-film-section { padding-bottom: 0; }
.repair-film-section .rs-section-head { margin-bottom: clamp(20px, 3vw, 32px); }

.repair-film { position: relative; }
.repair-film-track { position: relative; }
/* Pass-through everywhere except <=600px — see that breakpoint below,
   where this becomes the fixed-size canvas the whole desktop composition
   scales down as one unit. display:contents means it's invisible to
   layout/positioning here: video/chapters/progress position exactly as if
   they were direct children of .repair-film-stage, unchanged from before
   this wrapper existed. */
.repair-film-canvas { display: contents; }
.repair-film-stage {
  position: relative;
  isolation: isolate;
  min-height: 46vw;
  max-height: 640px;
  overflow: hidden;
  background: #052E2B;
}
.repair-film-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.scene-scrim {
  position: absolute; inset: 0; z-index: 1;
  display: none;
  background:
    linear-gradient(90deg, rgba(5, 27, 25, 0.74) 0%, rgba(5, 27, 25, 0.34) 42%, rgba(5, 27, 25, 0) 68%),
    linear-gradient(0deg, rgba(5, 27, 25, 0.58) 0%, rgba(5, 27, 25, 0) 42%);
}

/* Chapters exist in the DOM at all times (so their text is always in the
   accessibility tree in source order) but are only positioned as overlays
   once cinematic mode is active; in the base layout they are not rendered
   at all — the plain .repair-film-static-list below carries the same
   information as ordinary HTML instead. */
.chapter { display: none; }

/* Mobile-only in-video heading/CTA/progress overlays (see the <=600px block
   further down): hidden by default at every width/mode so they never
   appear as bare unstyled text on desktop or outside mobile cinematic
   mode. */
.repair-film-mobile-head,
.repair-film-mobile-cta,
.repair-film-mobile-progress { display: none; }

.scene-copy {
  position: relative; z-index: 2;
  padding: clamp(32px, 6vw, 72px) clamp(20px, 5vw, 64px) clamp(48px, 8vw, 96px);
  max-width: 640px;
  color: #FFFDF9;
}
.scene-eyebrow {
  display: block; margin: 0 0 16px;
  color: #E9C989; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
}
h3.scene-headline {
  margin: 0 0 16px; font-family: var(--rs-display); font-weight: 400;
  color: #FFFDF9; font-size: clamp(2.2rem, 5vw, 5.6rem); line-height: 1.04;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}
.scene-secondary {
  margin: 0; color: #E9C989; font-family: var(--rs-display);
  font-size: clamp(1.05rem, 1.6vw, 1.4rem); line-height: 1.45;
}

/* Accessible static fallback — real headings/paragraphs, ordinary site
   typography, no image overlay, no motion. This is what renders whenever
   cinematic mode is off. */
.repair-film-static-list {
  padding: clamp(28px, 5vw, 48px) 0 0;
}
.repair-film-static-items {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(18px, 3vw, 28px);
}
.repair-film-static-items li {
  display: flex; gap: 16px; align-items: flex-start;
  padding-bottom: clamp(18px, 3vw, 28px);
  border-bottom: 1px solid var(--rs-line);
}
.repair-film-static-items li:last-child { border-bottom: 0; padding-bottom: 0; }
.repair-film-static-items .rs-journey-num {
  width: 32px; height: 32px; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  background: var(--rs-teal); color: #FFFDF9;
  font-family: var(--rs-body); font-weight: 700; font-size: 0.86rem;
}
.repair-film-static-items h3 {
  margin: 0 0 4px; font-size: 1.05rem; font-family: var(--rs-body); font-weight: 600;
}
.repair-film-static-items p { margin: 0; color: var(--rs-muted); font-size: 0.92rem; line-height: 1.6; }

/* editorial chapter indicator — 01 | 02 | 03 | 04 | 05. Cinematic-only. */
.repair-film-progress {
  display: none;
  list-style: none; margin: 0; padding: 0;
  flex-direction: column; align-items: center; gap: 10px;
}
.repair-film-progress li {
  font-family: var(--rs-body); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; color: rgba(255, 253, 249, 0.38);
  transition: color .35s ease;
}
.repair-film-progress li::after {
  content: ""; display: block; width: 1px; height: 16px; margin: 6px auto 0;
  background: rgba(255, 253, 249, 0.28);
}
.repair-film-progress li:last-child::after { display: none; }
.repair-film-progress li.is-active { color: #E9C989; }

.repair-film-cta {
  text-align: center;
  max-width: var(--rs-max); margin: 0 auto; padding: clamp(40px, 7vw, 72px) clamp(18px, 5vw, 48px) clamp(48px, 7vw, 84px);
}

/* ==========================================================================
   Cinematic mode — added by JS only when IntersectionObserver is supported
   and prefers-reduced-motion is NOT set (all viewport widths, including
   mobile — the same one video, sticky-scrubbed, stays cinematic there too).
   Turns the static hero + plain list above into one sticky stage occupying
   the whole viewport, with the single <video> filling it and its
   currentTime eased toward scroll progress; the five chapters become text
   overlays cross-fading at the film's real cut points, and the static list
   is hidden since the same information now lives in the overlay text.
   ========================================================================== */
.repair-film--cinematic .repair-film-track {
  height: 450vh;
}
.repair-film--cinematic .repair-film-stage {
  position: sticky; top: 0; height: 100vh; max-height: none; width: 100%;
}
.repair-film--cinematic .scene-scrim { display: block; }
.repair-film--cinematic .chapter {
  display: flex;
  align-items: flex-end;
  position: absolute; inset: 0; z-index: 2;
  opacity: 0;
  will-change: opacity, transform;
  pointer-events: none;
}
.repair-film--cinematic .chapter.is-active { pointer-events: auto; }
/* .repair-film-static-list is a SIBLING of .repair-film in the markup, not
   a descendant — a descendant selector here can never match it, which was
   a real pre-existing bug: this fallback list was rendering visible below
   the film even in normal (non-reduced-motion) mode, all viewports,
   included the entire time the video-scrubbing architecture has existed. */
.repair-film--cinematic ~ .repair-film-static-list { display: none; }
.repair-film--cinematic .repair-film-progress {
  display: flex;
  position: absolute; right: clamp(18px, 4vw, 44px); top: 50%; transform: translateY(-50%);
  z-index: 5;
}
@media (max-width: 1040px) {
  .repair-film--cinematic .repair-film-progress { display: none; }
}

/* ==========================================================================
   MOBILE REPAIR JOURNEY (<=600px) — same scrub mechanism as desktop, plus a
   purpose-built portrait video.

   Mobile reuses the exact desktop scrub mechanism (sticky stage pinned
   inside a tall .repair-film-track, same computeTargetProgress() formula
   in repair-service.html) with only the track height shortened here. 220vh
   gives ~1.2x the viewport in actual scroll distance: enough for a couple
   of deliberate swipes through the five scenes, short enough that the CTA
   still follows naturally right after, with no dead empty gap.

   Unlike the desktop 16:9 film, mobile loads a dedicated PORTRAIT source
   (videos/repair-journey-mobile.mp4, generated with ffmpeg from the same
   approved desktop film — see the generation notes at the top of that
   file's companion report) composed as three vertical bands at 720x1280:
     - top ~34%: heavily blurred, darkened repeat of the footage
     - middle ~32%: the COMPLETE original sharp 16:9 film, uncropped
     - bottom ~34%: heavily blurred, darkened repeat of the footage
   The blurred bands are intentionally reserved as backdrops for real HTML
   text/controls, not decoration — repair-service.html swaps the external
   heading (#rsProcess) and CTA (.repair-film-cta) for two in-video overlay
   duplicates (.repair-film-mobile-head / .repair-film-mobile-cta) the
   instant mobile cinematic mode is active. The base .repair-film-video
   object-fit:cover rule (shared with desktop) is kept: the portrait
   source's own aspect (9:16) is close enough to real phone viewports that
   cover only trims a modest ~9% off the left/right edges, never the
   top/bottom bands where the text lives.

   Text placement within those bands (top band = title + a second,
   mobile-only horizontal 01-05 rail; sharp middle = left completely
   clean; bottom band = active chapter's wording + the CTA underneath):
   the chapter number/label (.scene-eyebrow) is never shown on mobile —
   it's only ever the 01-05 rail under the title — and only the headline +
   secondary line move into the bottom band, via .scene-copy's own
   absolute position rather than moving .chapter itself, so the existing
   opacity-based crossfade in applyProgress() (repair-service.html,
   unchanged) keeps driving it exactly as it drives desktop's.
   ========================================================================== */
@media (max-width: 600px) {
  .repair-film--cinematic .repair-film-track {
    height: 220vh;
  }

  /* The external heading stays in the DOM (so aria-labelledby="rsProcess"
     keeps working) but is visually replaced by the in-video overlay once
     mobile cinematic mode is on — visually-hidden, not display:none, so it
     remains in the accessibility tree as the section's real label. */
  .repair-film-section--cinematic .rs-section-head {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    border: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%);
  }
  /* The external CTA is a real duplicate interactive control, so — unlike
     the heading above — it is fully removed from the accessibility tree
     while its in-video twin is the active one, to avoid two identical
     "Start a Repair Request" links both being tab-reachable at once. */
  .repair-film-section--cinematic .repair-film-cta {
    display: none;
  }

  .repair-film-mobile-head,
  .repair-film-mobile-cta,
  .repair-film-mobile-progress {
    display: none;
    position: absolute;
    left: 0; right: 0;
    align-items: center;
    justify-content: center;
    z-index: 3;
  }
  .repair-film-section--cinematic .repair-film-mobile-head,
  .repair-film-section--cinematic .repair-film-mobile-cta,
  .repair-film-section--cinematic .repair-film-mobile-progress {
    display: flex;
  }

  /* TOP blurred band: title + the horizontal 01-05 indicator stacked
     underneath it — this is a second, mobile-only progress list (see the
     HTML comment above it); the desktop vertical rail on the right edge is
     completely untouched and stays hidden below 1040px as it always was. */
  .repair-film-mobile-head {
    top: 0; bottom: 66%;
    flex-direction: column;
    gap: clamp(14px, 4vw, 20px);
    text-align: center;
    padding: 0 20px;
    pointer-events: none; /* decorative overlay — aria-hidden content carries no interactive role */
  }
  .repair-film-mobile-head h2 {
    margin: 0;
    max-width: 88%;
    font-family: var(--rs-display);
    font-weight: 400;
    color: #FFFDF9;
    font-size: clamp(2.1rem, 9vw, 2.8rem);
    line-height: 1.0;
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.42);
  }

  /* Positioned by .repair-film-mobile-head above (a flex child, not
     independently placed) — only the internal row layout is set here.
     Specificity note: the shared .repair-film-progress class carries
     desktop's own position:absolute;right:...;top:50% at (0,2,0) via
     .repair-film--cinematic .repair-film-progress, so this override must
     match or beat that — .repair-film-mobile-head .repair-film-mobile-progress
     does, since ol is its DOM child. */
  .repair-film-mobile-head .repair-film-mobile-progress {
    position: static;
    right: auto; top: auto; transform: none;
    flex-direction: row !important; /* override .repair-film-progress's column default */
    gap: clamp(16px, 5vw, 26px);
  }
  .repair-film-mobile-progress li {
    font-size: 0.8rem;
  }
  .repair-film-mobile-progress li::after {
    display: none; /* remove the desktop rail's vertical tick under every item */
  }
  .repair-film-mobile-progress li.is-active::after {
    content: "";
    display: block;
    width: 14px; height: 2px;
    margin: 5px auto 0;
    background: #E9C989;
  }

  /* BOTTOM blurred band: the active chapter's descriptive wording only (no
     repeated number/label — that already lives in the rail above), with
     the CTA directly underneath it in the same band. */
  .repair-film-mobile-cta {
    top: 84%; bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .repair-film-mobile-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px; /* thumb-sized tap target */
    padding: 0 30px;
    border-radius: 999px;
    background: #FFFDF9;
    color: var(--rs-teal-deep);
    font-family: var(--rs-body);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  }
  .repair-film-mobile-cta-btn:hover,
  .repair-film-mobile-cta-btn:focus-visible,
  .repair-film-mobile-cta-btn:active {
    background: var(--rs-gold-soft);
  }

  /* Chapter wording moves into the bottom blurred band (above the CTA) —
     the sharp center video stays completely clean of text. The chapter
     .chapter element itself is left at desktop's own inset:0 (no override
     here), since only its child .scene-copy needs repositioning; the
     existing crossfade (opacity set by applyProgress() in
     repair-service.html, unchanged) still drives this element exactly as
     it drives desktop's, just at a different screen position. */
  .repair-film--cinematic .chapter .scene-copy {
    position: absolute;
    left: 0; right: 0;
    top: 66%; bottom: 19%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 26px;
    max-width: 100%;
  }
  .repair-film--cinematic .chapter .scene-eyebrow {
    display: none; /* the chapter number/label already lives in the top rail — never repeated here */
  }
  .repair-film--cinematic .chapter h3.scene-headline {
    font-size: clamp(1.45rem, 6vw, 2rem);
    line-height: 1.1;
    margin-bottom: 8px;
  }
  .repair-film--cinematic .chapter .scene-secondary {
    font-size: 0.86rem;
  }

  /* Step the floating chat/help widgets aside while the cinematic film is
     in view, so they never sit over the bottom blurred CTA band — the CTA
     itself stays put in its designed zone rather than being moved. */
  body.repair-film-in-view .mm-social-widget,
  body.repair-film-in-view .mm-service-dock {
    /* .mm-service-dock is globally opacity:1 !important (enhancements.css) —
       matching !important here is the only way to step it aside for this
       one page-specific, narrowly-scoped state. */
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rs-btn, .mm-loc-overlay, .mm-loc-dialog { transition: none; }
  html { scroll-behavior: auto; }
}