/* =====================================================================================================================
   OBSIDIAN /services/ (site/css/services.css, owned by the services page)
   The menu: every service as a big editorial row. On desktop the photo stays put on the left and the clean line wipes
   each new service across it as its words arrive (services.js). Phones and reduced motion: one photo per row.
   Prefixes: .srv-* (rows, hero index), .reel-* (the pinned stage). Nothing here touches the header's .svc-* menu.
   ===================================================================================================================== */

/* ---------- hero: jump list ---------- */
.srv-hero .phero-media img { object-position: 62% 50%; }
.srv-index { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; max-width: 760px; }
.srv-index a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 17px 0 13px; border-radius: 999px; font: 500 13px/1 var(--mono); letter-spacing: 0.02em; color: rgba(243, 245, 247, 0.78);
  background: rgba(4, 5, 6, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: color 0.25s, box-shadow 0.3s, background 0.3s; }
.srv-index a b { font-weight: 500; color: var(--ice); }
.srv-index a:hover { color: var(--ink); background: rgba(139, 233, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(139, 233, 255, 0.7), 0 0 22px rgba(139, 233, 255, 0.14); }

/* ---------- the menu: rows (the static layout: phones, reduced motion, no script) ---------- */
.reel .head { margin-bottom: clamp(28px, 4vw, 60px); }
.reel-grid { display: grid; }
.reel-side { display: none; }
.srv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5.4vw, 92px); align-items: center; padding-block: clamp(56px, 6.4vw, 104px); scroll-margin-top: 40px; }
.srv + .srv { border-top: 1px solid var(--line); }
.srv:nth-child(even) .srv-pic { order: 2; }

.srv-pic { --p: 1; --lo: 0; position: relative; isolation: isolate; overflow: hidden; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-lg); background: var(--char);
  box-shadow: inset 0 0 0 1px var(--line), 0 40px 90px rgba(0, 0, 0, 0.5); }
.srv-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0); }
/* the clean line that wipes the photo in (phones) */
.srv-pic::after { content: ""; position: absolute; z-index: 3; top: 0; bottom: 0; left: calc(var(--p) * 100%); width: 2px; margin-left: -1px; background: #fff; opacity: var(--lo); pointer-events: none;
  box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.9), 0 0 34px 6px rgba(139, 233, 255, 0.55); }
.srv-pic::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(to top, rgba(4, 5, 6, 0.72), transparent 42%), linear-gradient(165deg, rgba(255, 255, 255, 0.09), transparent 26%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
#upkeep .srv-pic img { object-position: 50% 76%; }
.srv-pic-n { position: absolute; z-index: 2; left: clamp(16px, 2vw, 28px); bottom: clamp(8px, 1.4vw, 18px); font: 900 clamp(84px, 9vw, 150px)/0.9 var(--display); font-stretch: 125%; letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: max(1.5px, 0.016em) var(--ice); text-shadow: 0 0 0.2em rgba(139, 233, 255, 0.28); }

.srv-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; justify-items: start; align-content: center; max-width: 620px; }
.srv-kicker { display: flex; align-items: center; gap: 12px; font: 500 13px/1.3 var(--mono); letter-spacing: 0.04em; color: var(--ice); }
.srv-kicker .srv-n { display: inline-grid; place-items: center; min-width: 38px; height: 26px; padding: 0 8px; border-radius: 999px; color: var(--ice-ink); background: var(--ice); box-shadow: 0 0 18px rgba(139, 233, 255, 0.35); }
.srv-kicker .srv-of { color: var(--mute); }
.srv-title { font-size: clamp(38px, 4.3vw, 72px); font-weight: 900; font-stretch: 125%; line-height: 0.9; letter-spacing: -0.02em; }
.srv-for { display: grid; gap: 8px; font-size: var(--fs-lead); line-height: 1.36; color: var(--ink); max-width: 26em; text-wrap: pretty; }
.srv-for .tag { color: var(--ice); }
.srv-body { color: var(--dim); max-width: 32em; text-wrap: pretty; }

/* what's included: a spec sheet that ticks off, one line after another */
.srv-inc { list-style: none; display: grid; width: 100%; margin-top: 4px; border-top: 1px solid var(--line); }
.srv-inc li { --d: 0; position: relative; display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.35; color: var(--mute);
  transition: color 0.5s calc(var(--d) * 110ms + 120ms); }
.srv-inc li::before { content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--faint); transition: box-shadow 0.5s calc(var(--d) * 110ms + 120ms), background-color 0.5s calc(var(--d) * 110ms + 120ms); }
.srv-inc li::after { content: ""; position: absolute; left: 0; top: 50%; width: 24px; height: 24px; margin-top: -12px; pointer-events: none; clip-path: inset(0 100% 0 0);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.4l3.3 3.3L17.2 8.6' fill='none' stroke='%2303161b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  transition: clip-path 0.45s var(--ease) calc(var(--d) * 110ms + 260ms); }
.srv-inc li.on, html.no-motion .srv-inc li, html:not(.js) .srv-inc li { color: var(--ink); }
.srv-inc li.on::before, html.no-motion .srv-inc li::before, html:not(.js) .srv-inc li::before { background-color: var(--ice); box-shadow: 0 0 0 4px rgba(139, 233, 255, 0.1), 0 0 16px rgba(139, 233, 255, 0.45); }
.srv-inc li.on::after, html.no-motion .srv-inc li::after, html:not(.js) .srv-inc li::after { clip-path: inset(0 0 0 0); }
.srv-copy .cta-row { margin-top: 6px; gap: 12px 26px; }

/* ---------- the pinned stage (desktop with motion; services.js drives --p, --lp, --lo and the counters) ---------- */
.reel-box { position: relative; width: 100%; height: min(78vh, 880px); }
.reel-stage { position: absolute; inset: 0; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); background: var(--char); box-shadow: inset 0 0 0 1px var(--line), 0 50px 110px rgba(0, 0, 0, 0.6); }
.reel-layer { --p: 0; position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0); }
.reel-layer:first-child { clip-path: none; }
/* each photo arrives a little zoomed in and settles, then drifts gently while you read its row (--f) */
.reel-layer img { width: 100%; height: 100%; object-fit: cover; transform: translateY(calc((var(--f, 0.5) - 0.5) * -3.2%)) scale(calc(1.16 - var(--p) * 0.12)); transform-origin: 50% 50%; will-change: transform; }
.reel-layer:first-child img { transform: translateY(calc((var(--f, 0.5) - 0.5) * -3.2%)) scale(1.04); }
.reel-layer:nth-child(2) img { object-position: 50% 30%; }
.reel-layer:nth-child(5) img { object-position: 50% 78%; }
/* light on the glass, and shade at the foot for the number */
.reel-stage::before { content: ""; position: absolute; z-index: 4; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.1), transparent 24%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.reel-stage::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(4, 5, 6, 0.82), rgba(4, 5, 6, 0.1) 40%, transparent 60%), linear-gradient(180deg, rgba(4, 5, 6, 0.5), transparent 22%); }
.reel-line { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--lp, 0%); width: 2px; margin-left: -1px; background: #fff; opacity: var(--lo, 0); pointer-events: none;
  box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.95), 0 0 40px 8px rgba(139, 233, 255, 0.5); }
.reel-line::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60px; width: 120px; background: radial-gradient(50% 50% at 50% 50%, rgba(214, 249, 255, 0.16), transparent 70%); }
/* the odometer: the big number and the name roll to the service you're reading */
/* each number sits in a 1.3em slot so its glow fades out inside the window instead of being cut square */
.reel-num { position: absolute; z-index: 5; left: clamp(20px, 2.2vw, 36px); bottom: clamp(30px, 3.4vw, 52px); height: 1.3em; overflow: hidden; padding: 0 0.16em; margin-left: -0.16em;
  font: 900 clamp(110px, 12vw, 210px)/1.3 var(--display); font-stretch: 125%; letter-spacing: -0.03em;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
.reel-num-track { --i: 0; display: grid; transform: translateY(calc(var(--i) * -1.3em)); transition: transform 0.85s var(--ease); }
.reel-num-track span { height: 1.3em; color: transparent; -webkit-text-stroke: max(1.5px, 0.014em) var(--ice); text-shadow: 0 0 0.16em rgba(139, 233, 255, 0.32); }
.reel-cap { position: absolute; z-index: 5; left: clamp(22px, 2.4vw, 38px); right: 24px; bottom: clamp(22px, 2.4vw, 34px); height: 1.4em; overflow: hidden; font: 500 13px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.reel-cap-track { --i: 0; display: grid; transform: translateY(calc(var(--i) * -1.4em)); transition: transform 0.7s var(--ease) 0.05s; }
.reel-cap-track span { height: 1.4em; white-space: nowrap; }
/* six segments across the top, like a story: the one you're on fills as you read */
.reel-ticks { position: absolute; z-index: 6; top: 10px; left: 18px; right: 18px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.reel-ticks a { position: relative; display: block; height: 44px; border-radius: 6px; }
.reel-ticks i { --f: 0; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.22); transition: background 0.3s; }
.reel-ticks i::after { content: ""; position: absolute; inset: 0; background: #fff; box-shadow: 0 0 10px var(--ice); transform-origin: 0 50%; transform: scaleX(var(--f)); }
.reel-ticks a:hover i { background: rgba(255, 255, 255, 0.4); }
.reel-ticks a:focus-visible { outline-offset: -2px; }

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  html.js:not(.no-motion) .reel-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 96px); align-items: start; }
  html.js:not(.no-motion) .reel-side { display: grid; align-items: center; position: sticky; top: 0; height: 100vh; padding-top: 4vh; }
  html.js:not(.no-motion) .srv { grid-template-columns: minmax(0, 1fr); min-height: 100vh; padding-block: 14vh; border-top: 0; opacity: 0.26; transition: opacity 0.7s var(--ease); }
  html.js:not(.no-motion) .srv.is-on { opacity: 1; }
  html.js:not(.no-motion) .srv-pic { display: none; }
  html.js:not(.no-motion) .reel-rows .srv:last-child { padding-bottom: 8vh; }
  html.js:not(.no-motion) .reel { padding-bottom: clamp(40px, 5vw, 80px); }
}

/* ---------- every job: the three rules and the prices slot ---------- */
.srv-prices { margin-top: clamp(14px, 1.6vw, 22px); }

/* ---------- not sure ---------- */
.srv-unsure-pic { aspect-ratio: 4 / 3; }
.srv-unsure .stack { gap: 24px; }
/* the photo takes 40% and the words the rest, sized so "Tell us the car." stays on one line */
@media (min-width: 901px) {
  .srv-unsure .split.wide-right { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .srv-unsure .display { font-size: clamp(32px, 4.2vw, 62px); }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) and (min-width: 900px) {
  .srv-title { font-size: clamp(36px, 4vw, 52px); }
}
@media (max-width: 899px) {
  .srv { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 52px; }
  .srv:nth-child(even) .srv-pic { order: 0; }
  .srv-pic { aspect-ratio: 5 / 6; max-height: 76svh; width: 100%; }
  .srv-copy { max-width: none; }
}
@media (max-width: 720px) {
  /* the car's bright paint sits right behind the words on a phone: dim it so the lead reads */
  .srv-hero .phero-media img { object-position: 70% 50%; filter: brightness(0.6) saturate(0.9); }
  .srv-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 6px; }
  .srv-index a { padding: 0 12px 0 11px; font-size: 12px; gap: 8px; }
  .srv-pic { aspect-ratio: 4 / 4.6; border-radius: 22px; }
  .srv-title { font-size: min(9.3vw, 48px); }
  .srv-for { font-size: 19px; }
  .srv-inc li { font-size: 16.5px; min-height: 50px; }
  .srv-copy { gap: 20px; }
  .srv-copy .cta-row { width: 100%; }
  .srv-copy .cta-row .btn { flex: 1 1 100%; min-height: 56px; }
  .srv + .srv { border-top: 1px solid var(--line); }
}