/* ==========================================================================
   Humble Crew Auto Spa — service landing pages
   Same Style as the homepage (tokens.css + site.css): pure black ground, the
   logo ramp used only as emissive light, Epic Pro / Figtree / Rajdhani.
   What differs is the SKELETON of each section, so a service page reads as
   its own room in the same building.

   Compositions used (GetLayers):
     hero      creative-director-hero   full-bleed video, label row across the
                                        middle, display title at the base
     intro     clarix-feature           pinned left column | open right half
     reasons   vexon-showcase           4|8 heading over an even card row
     numbers   altitude-stats           shallow hairline-opened rail
     install   baseline-programs        eyebrow + heading, then ruled rows
     packages  artist-acquire           head row on a shared bottom edge, then
                                        plates with the price hard right
   ========================================================================== */

.lp{background:var(--bg);color:var(--ink);font-family:var(--font-body)}
.lp :target,.lp [id]{scroll-margin-top:96px}

/* The raking light is meant to read as light in the room, not as a coloured
   wash behind type. On a narrow viewport the beam fills the whole frame, so
   it is pulled back and every section lays a soft scrim under its own
   content — the beam still glows at the edges, the type keeps its ground. */
.lp .ground__light,.lp .ground__drift{opacity:.62}
.lp main > section,.lp .rail{isolation:isolate}
.lp main > section::before,.lp .rail::before{content:"";position:absolute;inset:0;z-index:-1;
  pointer-events:none;
  background:radial-gradient(130% 92% at 50% 50%,rgba(0,0,0,.72),rgba(0,0,0,.42) 58%,transparent 88%)}
.lp .proof::before{display:none}

/* ── masthead ───────────────────────────────────────────────────────────
   Over the hero to start, then a solid condensed bar the rest of the way. */
/* `body > *:not(.ground)` in site.css (0,1,1) outranks a bare `.lnav`, which
   quietly put the masthead back in flow and pushed the hero down by its own
   height. Match that specificity so fixed actually sticks. */
body > .lnav{position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
  /* 原来是 max-width:1560px + margin:auto —— 视口一超过 1688px,吸顶条的底色和
     下边框就在 1560 处截断,变成一根悬空的短横条(首页的 .hero__nav 是通栏的,
     两者对不上)。改成条子通栏、用内边距把内容推到 1560 栏的边上:
     1688px 以下 padding 还是原来的 clamp,视觉一模一样。 */
  padding:clamp(14px,1.6vw,22px)
          max(clamp(var(--sp-5),4vw,var(--sp-8)), calc((100% - 1560px) / 2));
  isolation:isolate;will-change:transform;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             padding var(--dur) var(--ease),backdrop-filter var(--dur) var(--ease);
  border-bottom:1px solid transparent}
.lnav.is-stuck{background:rgba(4,2,6,.82);backdrop-filter:blur(18px) saturate(1.2);
  border-bottom-color:var(--line);padding-block:10px}
.lnav__links{display:flex;align-items:center;gap:clamp(var(--sp-4),2vw,var(--sp-6));
  list-style:none;margin:0;padding:0}
.lnav__links a{font-family:var(--font-mono);font-weight:600;font-size:16px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  transition:color var(--dur-fast) var(--ease)}
.lnav__links a:hover{color:var(--accent-quiet)}
.lnav__links .is-cta{padding:9px 16px;border:1px solid var(--line-accent);border-radius:var(--radius);white-space:nowrap}
.lnav__links .is-cta:hover{color:#fff;background:var(--brand-sweep);border-color:transparent}

/* ── hero — creative-director-hero ──────────────────────────────────────
   The frame belongs to the footage. Type occupies only the mid-line and the
   base; the middle of the picture is left alone.                          */
/* Two rows: the label row rides the open middle, the title block sits on the
   base. The minmax floor and the row gap are what stop a three-line headline
   from eating the label row — without them the 1fr track collapses and the
   two overlap. */
.lhero{position:relative;min-height:calc(100svh / var(--z));overflow:hidden;
  display:grid;grid-template-rows:minmax(90px,1fr) auto;align-items:end;
  row-gap:clamp(var(--sp-5),calc(3.4vh / var(--z)),var(--sp-7));
  padding:clamp(var(--sp-7),7vw,var(--sp-9)) clamp(var(--sp-5),4vw,var(--sp-8)) clamp(var(--sp-7),5vw,var(--sp-9))}
.lhero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.lhero__video{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.66) contrast(1.14) brightness(.82)}
/* the logo ramp as light on the footage, never as a painted panel */
.lhero__grade{position:absolute;inset:0;z-index:1;mix-blend-mode:color;opacity:.34;
  background:linear-gradient(118deg,#ff0000 0%,#a20086 54%,#8a00b0 100%)}
.lhero__topfade{position:absolute;inset:0 0 auto;height:44%;z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.42) 46%,transparent 100%)}
.lhero__basefade{position:absolute;inset:auto 0 0;height:62%;z-index:2;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.52) 34%,rgba(0,0,0,.88) 68%,var(--bg) 99%)}
.lhero__bloom{position:absolute;left:-10%;bottom:-34%;width:80vw;height:80vw;max-width:1180px;
  z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.34;filter:blur(120px);
  background:radial-gradient(closest-side,rgba(255,0,128,.85),rgba(138,0,176,.4) 52%,transparent 74%)}
/* the decorative ring the composition calls for — edge-faded, never a shape */
.lhero__ring{position:absolute;left:50%;top:46%;translate:-50% -50%;z-index:1;
  width:min(calc(78vh / var(--z)),58vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  border:1px solid rgba(255,255,255,.16);
  -webkit-mask-image:radial-gradient(closest-side,transparent 78%,#000 84%,#000 96%,transparent 100%);
          mask-image:radial-gradient(closest-side,transparent 78%,#000 84%,#000 96%,transparent 100%);
  animation:ringDrift 26s var(--ease-in-out) infinite}
@keyframes ringDrift{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.05);opacity:.9}}

.lhero__row{position:relative;z-index:3;align-self:center;margin:0;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  max-width:1180px;width:100%;margin-inline:auto;
  font-family:var(--font-mono);font-weight:600;
  font-size:clamp(14px,1.254vw,18.5px);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink)}
.lhero__row span{position:relative;text-shadow:0 1px 18px rgba(0,0,0,.7)}
.lhero__row span::before{content:"";position:absolute;left:0;bottom:-10px;width:100%;height:1px;
  background:linear-gradient(90deg,var(--accent),transparent);opacity:.5}

/* The headline is white over a clip that keeps playing, so its legibility was
   whatever frame happened to be behind it — measured down to 1.4:1 across
   14-18% of the glyph area on three pages. The base scrim covers the band but
   not reliably behind the type itself. This one is tied to the copy block, so
   contrast no longer depends on the footage. */
.lhero__foot{position:relative;z-index:3;isolation:isolate}
.lhero__foot::before{content:"";position:absolute;z-index:-1;
  inset:-46% -44% -40% -40%;pointer-events:none;
  background:radial-gradient(58% 52% at 42% 56%,rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.72) 34%,rgba(0,0,0,.40) 56%,rgba(0,0,0,.14) 74%,transparent 88%)}
.lhero__h1{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(34px,min(6.6vw,calc(11.5svh / var(--z))),112px);line-height:.94;letter-spacing:-.012em;
  text-wrap:balance;max-width:17ch}
.lhero__h1 .word{display:inline-block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.lhero__h1 .word > span{display:inline-block;will-change:transform}
.lhero__sub{margin:clamp(var(--sp-4),1.6vw,var(--sp-5)) 0 0;
  font-size:clamp(19.5px,1.853vw,28.5px);line-height:1.4;color:var(--ink);max-width:34ch;font-weight:500}
.lhero__btns{display:flex;gap:var(--sp-4);margin-top:clamp(var(--sp-5),2.6vw,var(--sp-6));flex-wrap:wrap}
.lhero__cue{position:absolute;right:clamp(var(--sp-5),4vw,var(--sp-8));
  bottom:clamp(var(--sp-7),5vw,var(--sp-9));z-index:3;
  display:inline-flex;align-items:center;gap:var(--sp-3);
  color:var(--ink-faint);letter-spacing:var(--tracking-label);text-transform:uppercase;
  font-family:var(--font-mono);font-weight:600;font-size:14px}
.lhero__cue i{display:block;width:34px;height:1px;background:var(--line-strong);position:relative;overflow:hidden}
.lhero__cue i::after{content:"";position:absolute;inset:0;background:var(--brand-sweep);
  animation:cue 2.4s var(--ease-in-out) infinite}

/* ── shared section chrome ──────────────────────────────────────────── */
.split,.reasons,.cmp,.proc,.pkg{position:relative;z-index:1;
  max-width:1560px;margin:0 auto;
  padding:clamp(var(--sp-8),7vw,var(--sp-10)) clamp(var(--sp-5),4vw,var(--sp-8))}
.frame{position:relative;padding:clamp(10px,1vw,14px);
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 48%),var(--surface)}
.frame__ratio{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.frame__ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.frame__cap{margin:var(--sp-4) 0 0;color:var(--ink-faint);
  letter-spacing:var(--tracking-label);text-transform:uppercase}

/* ── intro — clarix-feature ─────────────────────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:clamp(var(--sp-6),5vw,var(--sp-9));align-items:center}
.split__col{display:flex;flex-direction:column;align-items:flex-start}
.split__top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
  width:100%;color:var(--ink-faint);letter-spacing:var(--tracking-label);text-transform:uppercase;
  padding-bottom:var(--sp-5);border-bottom:1px solid var(--line);margin-bottom:clamp(var(--sp-6),3vw,var(--sp-7))}
.split__h2{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(30px,3.6vw,62px);line-height:1.02;letter-spacing:-.005em;max-width:15ch}
.split__rule{display:block;width:min(180px,50%);height:1px;margin:clamp(var(--sp-5),2.4vw,var(--sp-6)) 0;
  background:linear-gradient(90deg,var(--accent),transparent)}
.split__p{margin:0;font-size:clamp(18.5px,1.526vw,23px);line-height:1.62;color:var(--ink-subtle);max-width:46ch}
.split__cta{margin-top:clamp(var(--sp-5),2.6vw,var(--sp-6))}

/* ── three reasons — vexon-showcase ─────────────────────────────────── */
.reasons__head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(var(--sp-5),3vw,var(--sp-7));align-items:start;
  margin-bottom:clamp(var(--sp-7),4.5vw,var(--sp-9))}
.reasons__label,.cmp__label,.proc__label,.pkg__label{color:var(--ink-faint);
  letter-spacing:var(--tracking-label);text-transform:uppercase;margin:0;padding-top:.5em}
.reasons__h2{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(30px,4.1vw,70px);line-height:1.02;letter-spacing:-.005em}
.reasons__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(var(--sp-5),2.4vw,var(--sp-6))}
/* site.css 里的修饰类 .reasons__grid--two 和上面这条 .reasons__grid 同特异度
   (0,1,0),而 landing.css 后加载 —— 于是 3 列把 2 列盖掉了,城市页那四张服务卡
   排成 3+1,最后一张孤零零占一整行。用 (0,2,0) 修回来;窄屏那条也要跟着提到同
   特异度,否则会被这条 base 反过来盖住。 */
.reasons__grid.reasons__grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.rcard{position:relative;perspective:1100px}
.rcard__face{position:relative;height:100%;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 42%),var(--surface);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.rcard:hover .rcard__face{border-color:var(--line-accent)}
.rcard__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#000}
.rcard__media img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.74) contrast(1.06) brightness(.92);
  transition:transform var(--dur-slow) var(--ease),filter var(--dur) var(--ease)}
.rcard:hover .rcard__media img{transform:scale(1.045);filter:saturate(.9) contrast(1.08) brightness(1)}
.rcard__veil{position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 34%,rgba(0,0,0,.55) 100%)}
.rcard__title{margin:clamp(var(--sp-5),2vw,var(--sp-6)) clamp(var(--sp-5),2vw,var(--sp-6)) 0;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(22px,1.853vw,30.5px);line-height:1.1;letter-spacing:.01em}
.rcard__body{margin:var(--sp-4) clamp(var(--sp-5),2vw,var(--sp-6)) clamp(var(--sp-6),2.4vw,var(--sp-7));
  font-size:18.5px;line-height:1.6;color:var(--ink-subtle);flex:1}
.rcard__body b{font-weight:700;background:var(--brand-type);-webkit-background-clip:text;
  background-clip:text;color:transparent}
@supports not (background-clip:text){ .rcard__body b{color:var(--accent-quiet)} }

/* ── the numbers — altitude-stats ───────────────────────────────────── */
.rail{position:relative;z-index:1;max-width:1560px;margin:0 auto;
  padding:clamp(var(--sp-6),3.4vw,var(--sp-8)) clamp(var(--sp-5),4vw,var(--sp-8));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-5) clamp(var(--sp-5),4vw,var(--sp-8));align-items:start}
.rail__item{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.rail__item:nth-child(2){text-align:center;align-items:center}
.rail__item:last-child{text-align:right;align-items:flex-end}
.rail__fig{font-family:var(--font-display);font-weight:700;line-height:1;
  font-size:clamp(46px,6vw,104px);letter-spacing:-.01em;
  background:var(--brand-type);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums}
@supports not (background-clip:text){ .rail__fig{color:var(--accent-quiet)} }
.rail__lab{color:var(--ink-subtle);letter-spacing:var(--tracking-label);text-transform:uppercase;
  line-height:1.5;max-width:26ch}

/* ── the comparison ─────────────────────────────────────────────────────
   Their before/after pair as one instrument: the handle opens at dead
   centre, the cursor is a grab handle across the whole plate, and the
   keyboard drives it in 2% steps.                                        */
.cmp{padding-bottom:clamp(var(--sp-8),7vw,var(--sp-10))}
.cmp__head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(var(--sp-5),3vw,var(--sp-7));align-items:start;
  margin-bottom:clamp(var(--sp-6),3.4vw,var(--sp-7))}
.cmp__h2{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(28px,3.5vw,58px);line-height:1.04;letter-spacing:-.005em}
.cmp__stage{position:relative}
.cmp__box{position:relative;overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--line-strong);background:#000;
  aspect-ratio:16/9;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.cmp__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none;-webkit-user-drag:none}
.cmp__clip{position:absolute;inset:0;overflow:hidden;
  clip-path:inset(0 0 0 var(--cmp,50%))}
.cmp__clip .cmp__img{width:100%}
.cmp__tag{position:absolute;bottom:clamp(12px,1.6vw,22px);z-index:3;
  padding:8px 14px;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);
  background:rgba(4,2,6,.62);backdrop-filter:blur(10px);
  font-family:var(--font-mono);font-weight:600;font-size:clamp(13px,1.09vw,16px);
  letter-spacing:.13em;text-transform:uppercase;color:#fff;white-space:nowrap;pointer-events:none;
  transition:opacity var(--dur) var(--ease)}
.cmp__tag--l{left:clamp(12px,1.6vw,22px)}
.cmp__tag--r{right:clamp(12px,1.6vw,22px);border-color:var(--line-accent);
  box-shadow:0 0 26px rgba(255,0,128,.28)}
.cmp__handle{position:absolute;top:0;bottom:0;left:var(--cmp,50%);z-index:4;
  width:56px;translate:-50% 0;cursor:ew-resize;
  display:flex;align-items:center;justify-content:center;background:none;border:0}
.cmp__handle:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cmp__line{position:absolute;top:0;bottom:0;left:50%;width:2px;translate:-50% 0;
  background:linear-gradient(180deg,rgba(255,255,255,.25),#fff 22%,#fff 78%,rgba(255,255,255,.25));
  box-shadow:0 0 22px rgba(255,0,128,.5)}
.cmp__grip{position:relative;display:flex;align-items:center;justify-content:center;gap:5px;
  width:54px;height:54px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);background:rgba(4,2,6,.66);
  backdrop-filter:blur(10px);box-shadow:0 0 34px rgba(255,0,128,.42);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.cmp__box:hover .cmp__grip,.cmp__handle:focus-visible .cmp__grip{transform:scale(1.08);
  box-shadow:0 0 46px rgba(255,0,128,.6)}
.cmp__grip i{display:block;width:0;height:0;border-block:5px solid transparent}
.cmp__grip i:first-child{border-right:7px solid #fff}
.cmp__grip i:last-child{border-left:7px solid #fff}
.cmp__hint{margin:var(--sp-4) 0 0;color:var(--ink-faint);
  letter-spacing:var(--tracking-label);text-transform:uppercase;text-align:center;
  transition:opacity var(--dur) var(--ease)}
.cmp__hint.is-gone{opacity:0}

/* ── the install — baseline-programs ────────────────────────────────── */
.proc__head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(var(--sp-5),3vw,var(--sp-7));align-items:start;
  margin-bottom:clamp(var(--sp-6),4vw,var(--sp-8))}
.proc__h2{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(26px,3.2vw,54px);line-height:1.04;letter-spacing:-.005em}
.proc__body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(var(--sp-6),4vw,var(--sp-8));align-items:start}
.proc__rows{display:flex;flex-direction:column}
.prow{padding:clamp(var(--sp-6),3vw,var(--sp-7)) 0;border-top:1px solid var(--line)}
.prow:last-child{border-bottom:1px solid var(--line)}
.prow__t{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(21px,1.9vw,30px);line-height:1.12;letter-spacing:.01em}
.prow__list{margin:var(--sp-5) 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--sp-4)}
.prow__list li{position:relative;padding-left:26px;font-size:18.5px;line-height:1.6;color:var(--ink-subtle)}
.prow__list li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:1px;
  background:var(--accent)}
.prow__lead{margin:var(--sp-4) 0 0;font-size:clamp(19.5px,1.635vw,25px);line-height:1.4;
  font-weight:500;color:var(--ink)}
.prow__p{margin:var(--sp-4) 0 0;font-size:18.5px;line-height:1.62;color:var(--ink-subtle);max-width:52ch}
.proc__cta{margin-top:clamp(var(--sp-5),2.4vw,var(--sp-6))}
.proc__fig{position:relative;margin:0;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:var(--surface)}
.proc__vid{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  filter:saturate(.76) contrast(1.06) brightness(.94)}
.proc__fig figcaption{padding:var(--sp-4) clamp(var(--sp-4),2vw,var(--sp-5));
  border-top:1px solid var(--line);color:var(--ink-faint);
  letter-spacing:var(--tracking-label);text-transform:uppercase}

/* ── packages — artist-acquire ──────────────────────────────────────── */
.pkg__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(var(--sp-5),3vw,var(--sp-7));align-items:end;
  padding-bottom:clamp(var(--sp-5),2.6vw,var(--sp-6));border-bottom:1px solid var(--line);
  margin-bottom:clamp(var(--sp-6),4vw,var(--sp-8))}
.pkg__h2{margin:var(--sp-4) 0 0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(30px,4.1vw,70px);line-height:1.02;letter-spacing:-.005em}
.pkg__lead{margin:0;font-size:clamp(18.5px,1.472vw,23px);line-height:1.6;color:var(--ink-subtle);max-width:42ch}
.pkg__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(var(--sp-5),2.4vw,var(--sp-6))}
.tier{position:relative;display:flex;flex-direction:column;
  padding:clamp(var(--sp-5),2.4vw,var(--sp-7));
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.028),transparent 46%),var(--surface);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.tier:hover{border-color:var(--line-accent);transform:translateY(-4px)}
.tier--top{border-color:var(--line-accent)}
.tier--top::before{content:"";position:absolute;inset:-1px -1px auto;height:2px;
  background:var(--brand-sweep)}
.tier__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);
  flex-wrap:wrap;padding-bottom:var(--sp-5);border-bottom:1px solid var(--line)}
.tier__name{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(19.5px,1.635vw,26px);line-height:1.12;letter-spacing:.01em;color:var(--ink-subtle)}
.tier__name span{display:block;color:var(--ink);font-size:1.28em}
.tier__price{margin:0;font-family:var(--font-mono);font-weight:600;font-size:15.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.tier__price b{display:block;font-family:var(--font-display);font-size:clamp(24px,2vw,34px);
  line-height:1;letter-spacing:0;
  background:var(--brand-type);-webkit-background-clip:text;background-clip:text;color:transparent}
@supports not (background-clip:text){ .tier__price b{color:var(--accent-quiet)} }
.tier__hero{margin:clamp(var(--sp-5),2.2vw,var(--sp-6)) 0 0;
  font-size:clamp(19.5px,1.635vw,25px);line-height:1.35;color:var(--ink);font-weight:500}
.tier__hero b{font-weight:700;background:var(--brand-type);-webkit-background-clip:text;
  background-clip:text;color:transparent}
@supports not (background-clip:text){ .tier__hero b{color:var(--accent-quiet)} }
.tier__list{margin:var(--sp-5) 0 0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:12px;flex:1}
.tier__list li{position:relative;padding-left:22px;font-size:18px;line-height:1.5;color:var(--ink-subtle)}
.tier__list li::before{content:"";position:absolute;left:0;top:.6em;width:11px;height:1px;
  background:var(--line-strong)}
.tier__cta{margin-top:clamp(var(--sp-5),2.4vw,var(--sp-6));width:100%}

/* reviews: the shared .proof/.feed chrome, plus a closing action */
.feed__foot{margin-top:clamp(var(--sp-5),2.6vw,var(--sp-6))}

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .reasons__grid,.pkg__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* removed: an inverted duplicate of site.css's own
     `.lnav__links li:nth-child(-n+4){display:block}` at the same
     specificity. Loading later, it won — and hid the Services
     dropdown plus the next three items from every phone menu. */
}
@media (max-width:960px){
  .lnav{padding-block:12px}
  .lnav__links .is-cta{padding:8px 12px;font-size:13.5px;letter-spacing:.08em}
  .brand img{width:26px;height:auto}
  .brand__txt b{font-size:15.5px}
  .brand__txt i{display:none}
  .split{grid-template-columns:1fr;gap:var(--sp-6)}
  .split__h2{max-width:none}
  .reasons__head,.cmp__head,.proc__head{grid-template-columns:1fr;gap:var(--sp-4)}
  .reasons__label,.cmp__label,.proc__label{padding-top:0}
  .proc__body{grid-template-columns:1fr;gap:var(--sp-6)}
  .pkg__head{grid-template-columns:1fr;align-items:start;gap:var(--sp-5)}
  .rail{gap:var(--sp-6);grid-template-columns:1fr}
  .rail__item,.rail__item:nth-child(2),.rail__item:last-child{
    text-align:left;align-items:baseline;flex-direction:row;gap:var(--sp-5);
    padding-bottom:var(--sp-5);border-bottom:1px solid var(--line)}
  .rail__item:last-child{border-bottom:0;padding-bottom:0}
  .rail__fig{flex:0 0 auto;font-size:clamp(42px,12vw,66px)}
  .rail__lab{max-width:none}
  .lhero{min-height:calc(100svh / var(--z));padding-bottom:clamp(var(--sp-7),9vw,var(--sp-8))}
  .lhero__row{flex-direction:column;align-items:flex-start;gap:14px;
    align-self:end;margin-bottom:clamp(var(--sp-6),7vw,var(--sp-7))}
  .lhero__row span::before{width:56px}
  .lhero__btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
  .lhero__btns .btn{width:100%;padding-inline:12px;font-size:14.5px}
  .lhero__cue{display:none}
  .cmp__box{aspect-ratio:4/3}
  .cmp__grip{width:46px;height:46px}
}
@media (max-width:660px){
  .reasons__grid.reasons__grid--two{grid-template-columns:1fr}
  /* Epic Pro is wide: a long word like PRESERVATION, overshoots a 342px
     column at 43px and gets clipped by the hero's own overflow. */
  .lhero__h1{font-size:clamp(30px,8.2vw,44px);max-width:none}
  .lhero__btns .btn{font-size:13.5px;letter-spacing:.06em;padding-inline:8px}
  .lp .ground__light,.lp .ground__drift{opacity:.46}
  .lp main > section::before,.lp .rail::before{
    background:radial-gradient(150% 90% at 50% 46%,rgba(0,0,0,.84),rgba(0,0,0,.55) 62%,rgba(0,0,0,.18) 92%)}
  .reasons__grid,.pkg__grid{grid-template-columns:1fr}
  .cmp__box{aspect-ratio:3/4}
  .cmp__tag{font-size:12.5px;padding:7px 10px;bottom:10px}
  .cmp__tag--l{left:10px}
  .cmp__tag--r{right:10px}
}
@media (prefers-reduced-motion:reduce){
  .lhero__ring{animation:none}
  .lhero__cue i::after{animation:none}
  .rcard__media img,.rcard__face,.tier{transition:none}
}

/* ==========================================================================
   Ceramic coating page — the sections the tint page does not have.
   Same Style; different skeletons.
     bird poop / vetted / about   clarix-feature, mirrored on alternate beats
     packages                     artist-acquire (plates, price hard right)
     testimonials                 marcus-vane-voices (name list drives quote)
     portfolio                    marcus-vane-ventures (two-up ruled cards)
     FAQ                          artist-faq (4|8, hairline-topped rows)
   ========================================================================== */

/* hero with a still plate instead of footage */
.lhero__still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.7) contrast(1.12) brightness(.82)}
.lhero__note{margin:clamp(var(--sp-4),1.6vw,var(--sp-5)) 0 0;color:var(--ink-faint);
  letter-spacing:var(--tracking-label);text-transform:uppercase}

/* the split alternates sides down the page */
.split--flip{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
.split--flip .split__media{order:-1}
.split__p + .split__p{margin-top:var(--sp-4)}
.split__p--lift{color:var(--ink);font-weight:500;
  font-size:clamp(19.5px,1.635vw,25px);line-height:1.45}
.split__facts{margin:clamp(var(--sp-5),2.4vw,var(--sp-6)) 0 0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:var(--sp-4);width:100%}
.split__facts li{position:relative;padding:0 0 var(--sp-4) 26px;
  border-bottom:1px solid var(--line);font-size:19px;line-height:1.5;color:var(--ink)}
.split__facts li:last-child{border-bottom:0;padding-bottom:0}
.split__facts li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:1px;
  background:var(--accent)}
.split__marks{display:flex;align-items:center;gap:clamp(var(--sp-5),3vw,var(--sp-6));
  margin-top:clamp(var(--sp-5),2.4vw,var(--sp-6));flex-wrap:wrap}
.split__marks img{width:auto;opacity:.9}
.split__marks img:first-child{height:26px}
.split__marks img:last-child{height:30px}
.frame__vid,.frame__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.78) contrast(1.05) brightness(.95)}

/* the comparison, video edition: the treated clip is the LEFT side here, so
   the clip inset runs from the right instead */
.cmp__box--vid{cursor:ew-resize}
.cmp__clip--left{clip-path:inset(0 calc(100% - var(--cmp,50%)) 0 0)}
.cmp__tag--hot{border-color:var(--line-accent);box-shadow:0 0 26px rgba(255,0,128,.28)}
.cmp__box--vid .cmp__tag--r{border-color:rgba(255,255,255,.28);box-shadow:none}
.cmp__p{margin:var(--sp-5) 0 0;font-size:18.5px;line-height:1.62;color:var(--ink-subtle);max-width:70ch}

/* packages as plates */
.pkg__plates{display:flex;flex-direction:column;gap:clamp(var(--sp-6),3.4vw,var(--sp-8))}
.plate{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(var(--sp-5),3vw,var(--sp-7));align-items:center;
  padding-top:clamp(var(--sp-6),3.4vw,var(--sp-8));border-top:1px solid var(--line)}
.plate:first-child{padding-top:0;border-top:0}
.plate:nth-child(even) .plate__media{order:2}
.plate__media{position:relative;overflow:hidden;border:1px solid var(--line);
  border-radius:var(--radius);aspect-ratio:16/10;background:#000}
.plate__media img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.74) contrast(1.06) brightness(.9);
  transition:transform var(--dur-slow) var(--ease)}
.plate:hover .plate__media img{transform:scale(1.035)}
.plate__veil{position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 46%,rgba(0,0,0,.5) 100%)}
.plate--top .plate__media{border-color:var(--line-accent)}
.plate__body{display:flex;flex-direction:column;align-items:flex-start}
.plate__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-5);
  width:100%;flex-wrap:wrap;padding-bottom:var(--sp-4);border-bottom:1px solid var(--line)}
.plate__name{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(19.5px,1.635vw,26px);line-height:1.14;letter-spacing:.01em;color:var(--ink-subtle)}
.plate__name span{display:block;color:var(--ink);font-size:1.45em}
.plate__price{margin:0;font-family:var(--font-mono);font-weight:600;font-size:15.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);text-align:right}
.plate__price b{display:block;font-family:var(--font-display);font-size:clamp(28px,2.6vw,44px);
  line-height:1;letter-spacing:0;
  background:var(--brand-type);-webkit-background-clip:text;background-clip:text;color:transparent}
@supports not (background-clip:text){ .plate__price b{color:var(--accent-quiet)} }
.plate__p{margin:clamp(var(--sp-5),2.2vw,var(--sp-6)) 0 0;
  font-size:19px;line-height:1.6;color:var(--ink-subtle);max-width:60ch}
.plate__cta{margin-top:clamp(var(--sp-5),2.2vw,var(--sp-6))}

/* testimonials */
.voices{position:relative;z-index:1;max-width:1560px;margin:0 auto;
  padding:clamp(var(--sp-8),7vw,var(--sp-10)) clamp(var(--sp-5),4vw,var(--sp-8))}
.voices__head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(var(--sp-5),3vw,var(--sp-7));align-items:start;
  margin-bottom:clamp(var(--sp-6),4vw,var(--sp-8))}
.voices__label,.work__label,.faq__label{color:var(--ink-faint);
  letter-spacing:var(--tracking-label);text-transform:uppercase;margin:0;padding-top:.5em}
.voices__h2{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(28px,3.5vw,58px);line-height:1.04;letter-spacing:-.005em}
.voices__body{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(var(--sp-5),3vw,var(--sp-7));align-items:start}
.voices__list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.vname{display:flex;flex-direction:column;gap:5px;width:100%;text-align:left;
  padding:clamp(var(--sp-4),1.8vw,var(--sp-5)) 0;
  background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer;color:inherit;
  transition:padding-left var(--dur) var(--ease)}
.vname:hover{padding-left:10px}
.vname__n{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(20.5px,1.744vw,28.5px);line-height:1.1;color:var(--ink-faint);
  transition:color var(--dur-fast) var(--ease)}
.vname__c{color:var(--ink-faint);letter-spacing:var(--tracking-label);text-transform:uppercase}
.vname.is-on{padding-left:14px;border-bottom-color:var(--line-accent)}
.vname.is-on .vname__n{background:var(--brand-type);-webkit-background-clip:text;
  background-clip:text;color:transparent}
@supports not (background-clip:text){ .vname.is-on .vname__n{color:var(--accent-quiet)} }
.vname.is-on .vname__c{color:var(--ink)}
.voices__quotes{position:relative;padding:clamp(var(--sp-5),2.6vw,var(--sp-7));
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 44%),var(--surface)}
.vq__stars{display:block;color:var(--brand-red);letter-spacing:.22em;font-size:18.5px;
  margin-bottom:var(--sp-5)}
.vq p{margin:0;font-size:clamp(18.5px,1.526vw,23px);line-height:1.62;color:var(--ink-subtle);max-width:64ch}
.vq p + p{margin-top:var(--sp-4)}
.vq footer{margin-top:clamp(var(--sp-5),2.2vw,var(--sp-6));padding-top:var(--sp-4);
  border-top:1px solid var(--line);color:var(--ink);
  letter-spacing:var(--tracking-label);text-transform:uppercase}

/* portfolio */
.work{position:relative;z-index:1;max-width:1560px;margin:0 auto;
  padding:clamp(var(--sp-8),7vw,var(--sp-10)) clamp(var(--sp-5),4vw,var(--sp-8))}
.work__head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(var(--sp-5),3vw,var(--sp-7));align-items:start;
  margin-bottom:clamp(var(--sp-6),4vw,var(--sp-8))}
.work__h2{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(28px,3.5vw,58px);line-height:1.04;letter-spacing:-.005em}
.work__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(var(--sp-5),2.6vw,var(--sp-7))}
.wcard{margin:0;border-top:1px solid var(--line);padding-top:clamp(var(--sp-4),1.8vw,var(--sp-5))}
.wcard__media{position:relative;overflow:hidden;border-radius:var(--radius);aspect-ratio:16/9;background:#000}
.wcard__media img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.74) contrast(1.06) brightness(.9);
  transition:transform var(--dur-slow) var(--ease),filter var(--dur) var(--ease)}
.wcard:hover .wcard__media img{transform:scale(1.04);filter:saturate(.9) brightness(1)}
.wcard h3{margin:clamp(var(--sp-5),2vw,var(--sp-6)) 0 0;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(22px,1.853vw,30.5px);line-height:1.1;letter-spacing:.01em}
.wcard p{margin:var(--sp-4) 0 0;font-size:18.5px;line-height:1.6;color:var(--ink-subtle);max-width:52ch}

/* FAQ */
.faq{position:relative;z-index:1;max-width:1560px;margin:0 auto;
  padding:clamp(var(--sp-8),7vw,var(--sp-10)) clamp(var(--sp-5),4vw,var(--sp-8))}
.faq__head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(var(--sp-5),3vw,var(--sp-7));align-items:start;
  margin-bottom:clamp(var(--sp-5),3vw,var(--sp-6))}
.faq__h2{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(28px,3.5vw,58px);line-height:1.04;letter-spacing:-.005em}
.faq__list{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.faq__list > *{grid-column:2}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
  padding:clamp(var(--sp-5),2.2vw,var(--sp-6)) 0;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary span{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(18.5px,1.635vw,27.5px);line-height:1.16;letter-spacing:.01em;
  transition:color var(--dur-fast) var(--ease)}
.qa summary:hover span{color:var(--accent-quiet)}
.qa summary i{position:relative;flex:0 0 auto;width:18px;height:18px}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;inset:50% 0 auto;
  height:1px;background:var(--ink);transition:transform var(--dur) var(--ease)}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i::after{transform:rotate(0)}
.qa[open] summary span{background:var(--brand-type);-webkit-background-clip:text;
  background-clip:text;color:transparent}
@supports not (background-clip:text){ .qa[open] summary span{color:var(--accent-quiet)} }
.qa p{margin:0 0 clamp(var(--sp-5),2.2vw,var(--sp-6));
  font-size:19px;line-height:1.62;color:var(--ink-subtle);max-width:66ch}

@media (max-width:960px){
  .split--flip{grid-template-columns:1fr}
  .split--flip .split__media{order:0}
  .plate{grid-template-columns:1fr;gap:var(--sp-5)}
  .plate:nth-child(even) .plate__media{order:0}
  .voices__head,.voices__body,.work__head,.faq__head{grid-template-columns:1fr;gap:var(--sp-5)}
  .voices__label,.work__label,.faq__label{padding-top:0}
  .faq__list{grid-template-columns:1fr}
  .faq__list > *{grid-column:1}
  .work__grid{grid-template-columns:1fr}
}

/* ── comparison: fixes from the measured pass ───────────────────────────
   · the handle is inset so its grip is never sliced by the frame's clip
   · the label on the side that is no longer showing steps back, so the
     chips never contradict the picture at the extremes
   · below ~375px the two chips collided, so they stack there            */
.cmp__handle{left:clamp(28px,var(--cmp,50%),calc(100% - 28px))}
.cmp__clip{clip-path:inset(0 0 0 clamp(0px,var(--cmp,50%),100%))}
.cmp__tag{transition:opacity var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.cmp__box[data-end="left"] .cmp__tag--l,
.cmp__box[data-end="right"] .cmp__tag--r{opacity:.22}
@media (max-width:420px){
  .cmp__tag{bottom:auto;top:10px;font-size:12px;padding:6px 9px;letter-spacing:.09em}
  .cmp__tag--l{left:10px}
  .cmp__tag--r{right:10px;top:44px}
}

/* ══ measured review pass ═══════════════════════════════════════════════
   Each item below is a number that came back wrong, with the number.     */

/* 1. The headline must be the biggest thing on the page. It was 83.5px
      against a decorative stat at 90.7px — 1.09x the wrong way. The svh
      term is what capped it on a short laptop. */
.lhero__h1{font-size:clamp(34px,min(6.8vw,calc(14svh / var(--z))),116px)}
.rail__fig{font-size:clamp(40px,min(4.4vw,calc(7.6svh / var(--z))),76px)}

/* 2. 85% of the copy sat at 17px or below. Body steps up and the label
      tier stops being tiny. */
.rcard__body,.prow__list li,.prow__p,.split__p,.plate__p,.wcard p,.qa p,
.cmp__p,.tier__list li,.split__facts li{font-size:clamp(18.5px,1.439vw,22px)}
.mono{font-size:clamp(15.5px,1.145vw,17.5px)}
.cmp__tag{font-size:clamp(14px,1.09vw,16.5px)}
.btn{font-size:clamp(16.5px,1.254vw,18.5px)}
.lnav__links a{font-size:clamp(16px,1.145vw,18px)}
/* phone tap targets: eight footer links were 19px tall */
.foot__two a,.foot__social a,.foot__addr a,.foot__legal a{display:inline-block;padding-block:8px}
@media (max-width:760px){
  .foot__two a,.foot__social a{padding-block:11px}
}

/* 3. Epic Pro draws % at 1.48x a digit and $ at 1.18x, so "72%" read as a
      slashed pair of zeros bigger than the number. The unit character is
      wrapped and set back to its proper weight in the composition. */
.rail__fig i,.tier__price b i,.tier__hero b i,.plate__price b i,
.rcard__body b i{font-style:normal;font-size:.52em;vertical-align:.42em;letter-spacing:0}

/* 4. The comparison was 782px tall in a 726px viewport — the handle, both
      labels and the hint all sat below the fold on a laptop. */
@media (min-width:961px){
  .cmp__box{aspect-ratio:auto;height:clamp(340px,calc(52svh / var(--z)),620px)}
}

/* 5. Two of the three reason plates measured 0.06 saturation — grey
      rectangles on black. They are lit with the ramp rather than drained,
      and the veil now runs the full height instead of the bottom third. */
.rcard__media img{filter:saturate(.9) contrast(1.12) brightness(.72)}
.rcard:hover .rcard__media img{filter:saturate(1.02) contrast(1.12) brightness(.86)}
.rcard__veil{background:linear-gradient(180deg,rgba(8,0,10,.44) 0%,rgba(0,0,0,.16) 42%,rgba(0,0,0,.76) 100%)}
.rcard__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  mix-blend-mode:color;opacity:.26;
  background:linear-gradient(140deg,#ff0000,#a20086 60%,#8a00b0)}

/* 6. The hero's base fade started too late: in the strip just above the
      first headline line the footage reached L 0.40, putting white type at
      2.34:1 over it. */
.lhero__basefade{background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.34) 18%,
  rgba(0,0,0,.62) 38%,rgba(0,0,0,.9) 70%,var(--bg) 99%)}

/* 7. Optical gaps between sections ran 136px to 264px — a 1.94x spread, so
      no rhythm at all. The gap belongs on the boundary, not inside each
      block, and the two odd blocks are brought onto the same beat. */
.lp main > section{padding-block:clamp(56px,4.6vw,84px)}
.lp main > section + section{padding-top:clamp(84px,6.6vw,120px)}
.lp .rail{padding-block:clamp(56px,5vw,92px)}
.lp .proof{padding-block:clamp(84px,6.6vw,120px) clamp(56px,4.6vw,84px)}

/* 8. YouTube stays a poster until asked for. */
.ytf{position:absolute;inset:0;cursor:pointer;border:0;padding:0;width:100%;height:100%;
  background:#000;display:block;overflow:hidden}
.ytf img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.72) contrast(1.06) brightness(.78);
  transition:transform var(--dur-slow) var(--ease),filter var(--dur) var(--ease)}
.ytf:hover img{transform:scale(1.03);filter:saturate(.86) brightness(.9)}
.ytf__play{position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:clamp(64px,7vw,88px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;pointer-events:none;
  border:1px solid rgba(255,255,255,.5);background:rgba(4,2,6,.5);
  backdrop-filter:blur(8px);box-shadow:0 0 44px rgba(255,0,128,.42);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.ytf:hover .ytf__play{transform:translate(-50%,-50%) scale(1.07);
  box-shadow:0 0 60px rgba(255,0,128,.6)}
.ytf__play::after{content:"";width:0;height:0;margin-left:5px;
  border-block:11px solid transparent;border-left:18px solid #fff}
.ytf__cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;text-align:left;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));
  color:var(--ink);font-family:var(--font-mono);font-weight:600;
  font-size:clamp(14px,1.09vw,16.5px);letter-spacing:var(--tracking-label);text-transform:uppercase}
.ytf.is-playing{background:#000}
.ytf.is-playing iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

@media (max-width:660px){
  .lhero__h1{font-size:clamp(32px,9vw,48px)}
  .rail__fig{font-size:clamp(38px,9vw,50px)}
}

/* the rail figure must stay under the headline at every width — on a phone
   it was 38px against a 35px H1 */
@media (max-width:660px){
  .rail__fig{font-size:clamp(28px,7.2vw,40px)}
}

/* ══ book online ════════════════════════════════════════════════════════
   One job, so no viewport-tall picture: a short masthead, then the shop's
   own storefront takes the frame with a rail of facts beside it.        */
.lp--book{padding-top:0}
/* 同 `.gal` / `.jr`:裸 `.bk` (0,1,0) 压不住上面的 `.lp main > section` (0,1,2),
   上留白被吃掉,标题贴在固定 masthead 底下。 */
.lp main > section.bk{position:relative;z-index:1;max-width:1560px;margin:0 auto;
  padding:clamp(96px,10vw,150px) clamp(var(--sp-5),4vw,var(--sp-8)) clamp(var(--sp-7),5vw,var(--sp-9))}
.bk__head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(var(--sp-5),3vw,var(--sp-7));align-items:start;
  padding-bottom:clamp(var(--sp-5),2.6vw,var(--sp-6));border-bottom:1px solid var(--line);
  margin-bottom:clamp(var(--sp-6),3.4vw,var(--sp-7))}
.bk__label{margin:0;color:var(--ink);letter-spacing:var(--tracking-label);
  text-transform:uppercase;padding-top:.5em}
.bk__h1{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(30px,4.6vw,76px);line-height:1;letter-spacing:-.008em;max-width:16ch}
.bk__h1 .word{display:inline-block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.bk__h1 .word > span{display:inline-block;will-change:transform}
.bk__sub{margin:var(--sp-5) 0 0;font-size:clamp(18.5px,1.635vw,24px);line-height:1.5;
  color:var(--ink);max-width:46ch}

.bk__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.38fr);
  gap:clamp(var(--sp-5),2.6vw,var(--sp-7));align-items:start}
.bk__stage{border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;
  background:var(--surface);box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 70px rgba(255,0,128,.12)}
.bk__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:12px clamp(12px,1.6vw,20px);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent)}
.bk__bartitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.bk__out{flex:0 0 auto;color:var(--accent-quiet);letter-spacing:var(--tracking-label);
  text-transform:uppercase;white-space:nowrap}
.bk__out:hover{color:var(--ink)}
.bk__frame{position:relative;height:clamp(560px,calc(78svh / var(--z)),940px);background:#f4f4f6}
.bk__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.bk__spin{position:absolute;left:50%;top:50%;width:34px;height:34px;translate:-50% -50%;
  border:2px solid rgba(0,0,0,.14);border-top-color:var(--accent);border-radius:50%;
  animation:bookspin .9s linear infinite}
.bk__fallback{padding:var(--sp-5);color:var(--ink)}

.bk__rail{display:flex;flex-direction:column;gap:clamp(var(--sp-4),2vw,var(--sp-5))}
.bk__card{padding:clamp(var(--sp-5),2vw,var(--sp-6));
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 46%),var(--surface)}
.bk__cardh{margin:0 0 var(--sp-4);color:var(--ink);letter-spacing:var(--tracking-label);
  text-transform:uppercase;padding-bottom:var(--sp-3);border-bottom:1px solid var(--line)}
.bk__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.bk__list li{position:relative;padding-left:22px;font-size:clamp(17.5px,1.363vw,19.5px);
  line-height:1.45;color:var(--ink)}
.bk__list li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:1px;
  background:var(--accent)}
.bk__hours{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px var(--sp-4);
  font-size:clamp(17.5px,1.363vw,19.5px);line-height:1.45}
.bk__hours dt{color:var(--ink);font-family:var(--font-mono);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase}
.bk__hours dd{margin:0;color:var(--ink)}
.bk__addr{display:flex;flex-direction:column;gap:10px;font-style:normal;
  font-size:clamp(17.5px,1.363vw,19.5px);line-height:1.45;color:var(--ink)}
.bk__addr a:hover{color:var(--accent-quiet)}
.bk__call{margin-top:var(--sp-5);width:100%}
.bk__note{color:var(--ink);letter-spacing:.06em;text-transform:none;line-height:1.6;
  font-size:clamp(15.5px,1.145vw,17.5px)}

@media (max-width:960px){
  .bk__head{grid-template-columns:1fr;gap:var(--sp-4)}
  .bk__label{padding-top:0}
  .bk__h1{max-width:none}
  .bk__body{grid-template-columns:1fr}
  .bk__frame{height:clamp(520px,calc(72svh / var(--z)),760px)}
}
@media (max-width:660px){
  /* 这条一直是死规则:裸 `.bk` (0,1,0) 既压不住 `.lp main > section` (0,1,2),
     也压不住 mobile.css 里同名的手机规则。留言在这里,值由 mobile.css 统一给。 */
  .bk__out{display:none}
  .bk__frame{height:calc(78svh / var(--z))}
}
@media (prefers-reduced-motion:reduce){ .bk__spin{animation:none} }

/* ══ coverage selector (PPF) ════════════════════════════════════════════
   The diagram is the plate and the tab row is the control; the spec sits
   beside it. The client's own diagrams are transparent PNGs with the
   covered panels picked out in magenta, which is already the brand ramp. */
.cov{position:relative;z-index:1;max-width:1560px;margin:0 auto;
  padding:clamp(56px,4.6vw,84px) clamp(var(--sp-5),4vw,var(--sp-8))}
.cov__head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(var(--sp-5),3vw,var(--sp-7));align-items:start;
  margin-bottom:clamp(var(--sp-6),3.4vw,var(--sp-7))}
.cov__label{color:var(--ink);letter-spacing:var(--tracking-label);text-transform:uppercase;
  margin:0;padding-top:.5em}
.cov__h2{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(28px,3.5vw,58px);line-height:1.04;letter-spacing:-.005em}
.cov__p{margin:var(--sp-5) 0 0;font-size:clamp(18.5px,1.439vw,22px);line-height:1.6;
  color:var(--ink);max-width:56ch}
.cov__tabs{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0 0 clamp(var(--sp-5),2.6vw,var(--sp-6));
  padding:0;border-bottom:1px solid var(--line)}
.ctab{position:relative;background:none;border:0;cursor:pointer;color:var(--ink);
  padding:14px clamp(14px,1.8vw,26px);
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(16.5px,1.417vw,23px);letter-spacing:.01em;
  transition:color var(--dur-fast) var(--ease)}
.ctab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--brand-sweep);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease)}
.ctab:hover{color:var(--accent-quiet)}
.ctab.is-on::after{transform:scaleX(1)}
/* An author `display` beats the `hidden` attribute's UA rule, so the three
   closed coverage panels were still laying out at full height — 2,776px of
   invisible page on a phone, and the tab bar above them did nothing. */
.cpanel[hidden]{display:none}
.cpanel{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(var(--sp-5),3vw,var(--sp-7));align-items:center}
.cpanel__plate{position:relative;padding:clamp(var(--sp-4),2vw,var(--sp-6));
  border:1px solid var(--line);border-radius:var(--radius);
  background:radial-gradient(120% 100% at 50% 40%,rgba(255,0,128,.10),transparent 70%),var(--surface)}
.cpanel__plate img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 26px 50px rgba(0,0,0,.6))}
.cpanel__spec{display:flex;flex-direction:column;align-items:flex-start}
.cpanel__name{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(24px,2.6vw,42px);line-height:1.04;letter-spacing:-.005em}
.cpanel__inc{margin:clamp(var(--sp-5),2.2vw,var(--sp-6)) 0 var(--sp-4);color:var(--ink);
  letter-spacing:var(--tracking-label);text-transform:uppercase}
.cpanel__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;width:100%}
.cpanel__list li{position:relative;padding:0 0 11px 24px;border-bottom:1px solid var(--line);
  font-size:clamp(18px,1.395vw,20.5px);line-height:1.45;color:var(--ink)}
.cpanel__list li::before{content:"";position:absolute;left:0;top:.62em;width:13px;height:1px;
  background:var(--accent)}
.cpanel__price{margin:clamp(var(--sp-5),2.2vw,var(--sp-6)) 0 0;
  font-family:var(--font-mono);font-weight:600;font-size:16px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.cpanel__price b{display:block;font-family:var(--font-display);
  font-size:clamp(30px,3vw,50px);line-height:1;letter-spacing:0;
  background:var(--brand-type);-webkit-background-clip:text;background-clip:text;color:transparent}
@supports not (background-clip:text){ .cpanel__price b{color:var(--accent-quiet)} }
.cpanel__cta{margin-top:clamp(var(--sp-5),2.2vw,var(--sp-6))}
.proc__still{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  filter:saturate(.76) contrast(1.06) brightness(.94)}
.faq__p{margin:var(--sp-5) 0 0;font-size:clamp(18.5px,1.439vw,22px);line-height:1.6;color:var(--ink);max-width:60ch}

@media (max-width:960px){
  .cov__head{grid-template-columns:1fr;gap:var(--sp-4)}
  .cov__label{padding-top:0}
  .cpanel{grid-template-columns:1fr;gap:var(--sp-5)}
  .cov__tabs{gap:0}
  .ctab{padding:12px 14px;font-size:16.5px}
}

/* the Tesla guide: three questions, then three routes */
.steps__list--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.step--q .step__t{font-size:clamp(20.5px,1.853vw,28.5px);line-height:1.14}
.step__list{margin:var(--sp-5) 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.step__list li{position:relative;padding:0 0 11px 22px;border-bottom:1px solid var(--line);
  font-size:clamp(17.5px,1.308vw,19.5px);line-height:1.5;color:var(--ink)}
.step__list li:last-child{border-bottom:0;padding-bottom:0}
.step__list li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:1px;background:var(--accent)}
.rcard__hit{position:absolute;inset:0;z-index:3;border-radius:var(--radius)}
.rcard__kicker{margin:clamp(var(--sp-5),2vw,var(--sp-6)) clamp(var(--sp-5),2vw,var(--sp-6)) 0;
  color:var(--ink);letter-spacing:var(--tracking-label);text-transform:uppercase;line-height:1.4}
.rcard__kicker + .rcard__title{margin-top:12px}
.rcard__list{margin:var(--sp-4) clamp(var(--sp-5),2vw,var(--sp-6)) 0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:10px;flex:1}
.rcard__list li{position:relative;padding-left:22px;font-size:clamp(17.5px,1.308vw,19.5px);
  line-height:1.5;color:var(--ink)}
.rcard__list li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:1px;background:var(--accent)}
.rcard .card__more{display:block;margin:clamp(var(--sp-5),2vw,var(--sp-6)) clamp(var(--sp-5),2vw,var(--sp-6)) clamp(var(--sp-5),2vw,var(--sp-6));
  color:var(--accent-quiet)}
@media (max-width:1100px){ .steps__list--three{grid-template-columns:1fr} }

/* ── from the journal — internal linking, service page → write-ups ──────────
   Every service page had 24 relevant articles one click away and linked to
   none of them. Three per page, chosen by keyword overlap, in the same ruled
   language as the rest of the site. */
/* padding-block is deliberately left to `.lp main > section` (0,1,2) so this
   block keeps the same vertical rhythm as every other section — setting it
   here in a (0,1,0) shorthand would silently lose to that rule anyway. */
.jpost{position:relative;z-index:1;max-width:1560px;margin:0 auto;
  padding-inline:clamp(var(--sp-5),4vw,var(--sp-8))}
.jpost__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-5);flex-wrap:wrap;color:var(--ink-faint);text-transform:uppercase;
  letter-spacing:var(--tracking-label);padding-bottom:var(--sp-5);
  border-bottom:1px solid var(--line)}
.jpost__head a{color:var(--accent-quiet)}
.jpost__head a:hover{color:#fff}
.jpost__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(var(--sp-5),2.4vw,var(--sp-6));margin-top:clamp(var(--sp-5),2.4vw,var(--sp-6));
  list-style:none;padding:0}
.jpost__card{display:flex;flex-direction:column}
/* these are spans inside the link; without display:block the aspect-ratio is
   ignored and the date runs into the title on one line */
.jpost__card > a{display:flex;flex-direction:column;gap:var(--sp-4);height:100%}
.jpost__shot{display:block;overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--line);aspect-ratio:16/10;background:#000}
.jpost__date,.jpost__t{display:block}
.jpost__shot img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.78) contrast(1.06);
  transition:transform .8s cubic-bezier(.22,1,.36,1),filter .6s ease}
.jpost__card a:hover .jpost__shot img{transform:scale(1.045);filter:saturate(1)}
.jpost__date{color:var(--ink-faint);text-transform:uppercase;letter-spacing:var(--tracking-label)}
.jpost__t{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(17.5px,1.439vw,22px);line-height:1.16;transition:color .3s ease}
.jpost__card a:hover .jpost__t{color:var(--accent-quiet)}
@media (max-width:760px){
  .jpost__grid{grid-template-columns:1fr;gap:var(--sp-5)}
  .jpost__card a{display:grid;grid-template-columns:96px minmax(0,1fr);
    gap:var(--sp-4);align-items:center}
  .jpost__shot{aspect-ratio:1;border-radius:10px}
  .jpost__t{font-size:17.5px}
}

/* ── xlink:服务页 / 博客 <-> gallery 的互链带 ──────────────────
   用 .lp main > section.xlink (0,1,2) 才压得住 .lp main > section 的
   padding-block —— 裸 .xlink 是 (0,1,0),会被静默盖掉。这个坑在本站
   已经吃过一次(.jr 的 padding)。 */
.lp main > section.xlink{position:relative;z-index:1;max-width:1560px;margin:0 auto;
  padding:clamp(var(--sp-6),4vw,var(--sp-8)) clamp(var(--sp-5),4vw,var(--sp-8));
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-5) var(--sp-6);flex-wrap:wrap;
  border-top:1px solid var(--line)}
.xlink__t{font-size:clamp(17px,1.35vw,21px);line-height:1.55;font-weight:500;
  color:var(--ink-muted);max-width:62ch;margin:0}
.xlink__t b{font-family:var(--font-mono);font-weight:700;color:var(--ink);
  font-size:1.06em;letter-spacing:.02em}
.xlink__t a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;transition:color var(--dur-fast) var(--ease)}
.xlink__t a:hover{color:var(--accent-quiet)}
.xlink__go{flex:0 0 auto}
.lp main > section.xlink--wide .xlink__t{max-width:80ch}
@media (max-width:760px){
  .lp main > section.xlink{flex-direction:column;align-items:flex-start;
    padding-block:var(--sp-6)}
  .xlink__go{width:100%}
}

/* 城市页服务卡的"了解更多" */
.rcard__more{margin-top:var(--sp-4)}
.rcard__more a{font-family:var(--font-mono);font-weight:700;font-size:14.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
  transition:color var(--dur-fast) var(--ease)}
.rcard__more a:hover{color:var(--accent-quiet)}

/* ============================================================================
   .doc —— contact-us / faqs / terms-and-conditions 三个内容页。
   客户原站有这三页,我们之前漏了;它们不是服务落地页,不需要大 hero,只要
   一块能好好读字的版心 + 全站同一套排版。
   ========================================================================= */
.lp--doc main{position:relative;z-index:1;max-width:1560px;margin:0 auto;
  padding:calc(var(--sp-5) + 132px) max(clamp(var(--sp-5),4vw,var(--sp-8)),0px)
          clamp(60px,8vw,110px)}
.doc__head{max-width:72ch;margin:0 0 clamp(var(--sp-7),5vw,var(--sp-9))}
.doc__kicker{margin:0 0 var(--sp-4);font-size:13.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-muted)}
.doc__h1{margin:0;font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;font-size:clamp(32px,4.6vw,68px);line-height:1.02;
  letter-spacing:-.012em;text-wrap:balance}
.doc__lede{margin:var(--sp-5) 0 0;font-size:clamp(18px,1.33vw,20.5px);
  line-height:1.7;color:var(--ink-subtle);max-width:60ch}
.doc__btns{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-6)}

/* --- 联系页 ------------------------------------------------------------- */
.doc__cards{display:grid;gap:var(--sp-5);
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.dcard{padding:var(--sp-6);border:1px solid var(--line);border-radius:var(--r-2);
  background:rgba(255,255,255,.022)}
.dcard__h{margin:0 0 var(--sp-4);font-family:var(--font-mono);font-weight:600;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted)}
.dcard__p{margin:0 0 var(--sp-3);font-size:16.5px;line-height:1.6;color:var(--ink)}
.dcard__p:last-child{margin-bottom:0}
.dcard__p a,.faqx__a a{color:var(--ink);text-decoration:underline;
  text-underline-offset:4px;text-decoration-color:rgba(255,0,128,.5)}
.dcard__hours{margin:0;display:grid;grid-template-columns:auto 1fr;
  gap:var(--sp-3) var(--sp-5);font-size:16.5px}
.dcard__hours dt{color:var(--ink-muted)}
.dcard__hours dd{margin:0;color:var(--ink)}
.doc__map{margin-top:clamp(var(--sp-7),5vw,var(--sp-9))}
.doc__mapframe{margin-top:var(--sp-5);border:1px solid var(--line);
  border-radius:var(--r-2);overflow:hidden;aspect-ratio:16/7;background:#0b0710}
.doc__mapframe iframe{display:block;width:100%;height:100%;border:0;
  filter:invert(.92) hue-rotate(180deg) saturate(.7) contrast(.92)}

/* --- FAQ ---------------------------------------------------------------- */
.faqx{max-width:82ch;border-top:1px solid var(--line)}
.faqx__item{border-bottom:1px solid var(--line)}
.faqx__q{list-style:none;cursor:pointer;padding:var(--sp-5) 44px var(--sp-5) 0;
  position:relative;font-family:var(--font-display);font-weight:700;
  font-size:clamp(18px,1.5vw,23px);line-height:1.25;color:var(--ink);
  text-wrap:balance;transition:color var(--dur-fast) var(--ease)}
.faqx__q::-webkit-details-marker{display:none}
.faqx__q::after{content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;
  border-right:1.5px solid var(--ink-muted);border-bottom:1.5px solid var(--ink-muted);
  translate:0 -70%;rotate:45deg;transition:rotate var(--dur) var(--ease)}
.faqx__item[open] .faqx__q::after{rotate:225deg;translate:0 -20%}
.faqx__a{padding:0 0 var(--sp-6)}
.faqx__a p{margin:0 0 var(--sp-4);font-size:clamp(16.5px,1.2vw,18.5px);
  line-height:1.72;color:var(--ink-subtle);max-width:70ch}
.faqx__a p:last-child{margin-bottom:0}

/* --- 条款正文 ----------------------------------------------------------- */
.doc__prose{max-width:74ch}
.doc__prose p{margin:0 0 var(--sp-5);font-size:clamp(16.5px,1.2vw,18.5px);
  line-height:1.74;color:var(--ink-subtle)}
.doc__h2{margin:clamp(var(--sp-7),4vw,var(--sp-8)) 0 var(--sp-5);
  padding-top:var(--sp-5);border-top:1px solid var(--line);
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(22px,2.1vw,32px);line-height:1.1;text-wrap:balance}
.doc__h3{margin:var(--sp-6) 0 var(--sp-4);font-family:var(--font-display);
  font-weight:700;font-size:clamp(18px,1.45vw,22px);line-height:1.25;color:var(--ink)}
.doc__list{margin:0 0 var(--sp-5);padding:0;list-style:none}
.doc__list li{position:relative;padding-left:26px;margin:0 0 var(--sp-3);
  font-size:clamp(16px,1.15vw,17.5px);line-height:1.68;color:var(--ink-subtle)}
.doc__list li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:1px;
  background:var(--brand-sweep)}