/* Carpet Cleaning Wizards, homepage only styles. Loaded after site.css on the home page.
   The opening record (split hero on the ink board), the promises strip, the hero intro motion.
   The comparison frame here uses the .hero classes; site.js drives it through the same
   data-record / data-knob / data-pos attributes as every .record__ba frame. */

/* HERO: the opening record. Text on the ink board, the photograph mounted whole on a parchment mat at its native 4:5. */
.opening{position:relative;isolation:isolate;background:var(--ink);color:var(--on-ink);min-height:640px;
  display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);align-items:center;gap:clamp(28px,4vw,64px);
  padding:calc(var(--header-h) + clamp(24px,4.5vw,56px)) var(--pad) clamp(48px,6vw,80px)}
.opening>*{position:relative;z-index:1}
.hero__lock{max-width:620px}
.hero__lock .eyebrow{color:var(--mark-400);text-wrap:balance}
.hero__lock h1{font-family:var(--font-display);font-weight:800;font-variation-settings:"opsz" 72;line-height:.84;
  letter-spacing:-.03em;font-size:clamp(3.3rem,6.4vw,6.4rem);color:#fff;margin:18px 0 0}
.hero__lock h1 em{font-family:var(--font-serif);font-style:italic;font-weight:500;font-variation-settings:"opsz" 96;letter-spacing:-.01em}
.hero__sub{color:var(--on-ink-2);font-size:var(--t-lead);max-width:44ch;margin:22px 0 30px;line-height:1.5;letter-spacing:-.009em;text-wrap:pretty}
/* the opening's CTA row is the shared partials/cta-row.html; .ctarow in site.css lays it out */
.opening .ctarow{margin-top:0}
/* the mat: parchment around the whole photograph, gold registration ticks just outside the corners, the record tab hung off the bottom edge.
   Its width is capped so the whole record sits inside the first screen on common desktops. */
.hero__mat{position:relative;width:min(100%,max(360px,calc((100svh - 220px) * .8)));margin-inline:auto;padding:12px;
  background:var(--paper);border-radius:3px;
  box-shadow:0 0 0 1px var(--hair-gold),0 44px 90px -34px rgba(0,0,0,.8),0 14px 30px -14px rgba(0,0,0,.6)}
.hero__mat::before{content:"";position:absolute;inset:-11px;pointer-events:none;--tick:linear-gradient(var(--gold),var(--gold));
  background:var(--tick) 0 0/16px 1px,var(--tick) 0 0/1px 16px,var(--tick) 100% 0/16px 1px,var(--tick) 100% 0/1px 16px,
    var(--tick) 0 100%/16px 1px,var(--tick) 0 100%/1px 16px,var(--tick) 100% 100%/16px 1px,var(--tick) 100% 100%/1px 16px;background-repeat:no-repeat}
.hero__cap{position:absolute;z-index:8;left:18px;bottom:0;transform:translateY(50%);font-family:var(--font-mono);font-size:.62rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--paper);background:var(--ink);padding:7px 11px;border-radius:3px;
  box-shadow:0 0 0 1px var(--gold),0 10px 20px -10px rgba(0,0,0,.7);pointer-events:none;margin:0}
/* the comparison frame: the element the slider script drives (--pos), sized exactly to the photograph, nothing clipped or scaled.
   Scoped to .hero__mat so a page level <header class="hero"> never inherits the frame. */
.hero__mat .hero{position:relative;aspect-ratio:4/5;--pos:50%;touch-action:pan-y;background:#140f1a;cursor:ew-resize}
.hero__mat .hero::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(34,19,46,.22)}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.hero__mat .hero .after{z-index:1}
.hero__mat .hero .before{z-index:2;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.hero__line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;z-index:4;transform:translateX(-1px);
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.9) 12%,rgba(255,255,255,.9) 88%,transparent)}
.hero__knob{position:absolute;top:50%;left:var(--pos);z-index:6;width:56px;height:56px;color:var(--mark-700);border:0;padding:0;
  transform:translate(-50%,-50%);border-radius:50%;background:#fff;display:grid;place-items:center;cursor:ew-resize;
  box-shadow:0 14px 34px -8px rgba(15,8,20,.8),0 0 0 6px rgba(255,255,255,.14);transition:transform var(--t) var(--ease-out)}
.hero__knob.grabbing{transform:translate(-50%,-50%) scale(1.09)}
.hero__knob:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.hero__pos{position:absolute;z-index:7;left:var(--pos);top:calc(50% - 52px);transform:translateX(-50%);
  font-family:var(--font-text);font-size:.68rem;color:#fff;background:rgba(20,13,24,.62);backdrop-filter:blur(4px);
  padding:5px 9px;border-radius:7px;pointer-events:none;opacity:0;transition:opacity var(--t)}
.hero__mat .hero.touched .hero__pos{opacity:1}
.hero__range-note{position:absolute;z-index:7;left:50%;bottom:14px;transform:translateX(-50%);white-space:nowrap;
  display:flex;gap:8px;align-items:center;color:#fff;font-family:var(--font-text);font-size:.7rem;
  background:rgba(20,13,24,.6);backdrop-filter:blur(6px);padding:8px 15px;border-radius:8px;border:var(--glass-border);
  box-shadow:var(--glass-top);pointer-events:none;transition:opacity var(--t-slow) ease}
.hero__mat .hero.touched .hero__range-note{opacity:0}
.hero__mat .hero .ba-tag{z-index:7}
@media(max-width:760px){
  .opening{grid-template-columns:1fr;gap:36px;min-height:0;padding-top:calc(var(--header-h) + 20px)}
  .hero__lock{max-width:none}
  .hero__mat{width:100%}
}

/* promises, field-log line */
.promises{position:relative;background:var(--ink-lift);color:var(--on-ink-2);border-block:1px solid var(--hair)}
.promises ul{position:relative;z-index:1;list-style:none;margin:0;padding:16px var(--pad);display:flex;flex-wrap:wrap;
  align-items:center;font-family:var(--font-text);font-size:.74rem;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.promises li{padding:4px clamp(14px,2.4vw,26px)}
.promises li+li{border-left:1px solid var(--hair)}
.promises b{color:var(--mark-400);font-weight:500}

/* hero intro, text only (LCP image untouched) */
.hero__lock>*{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform .9s var(--ease-out)}
.hero__lock>*:nth-child(2){transition-delay:.08s} .hero__lock>*:nth-child(3){transition-delay:.16s} .hero__lock>*:nth-child(4){transition-delay:.24s}
@starting-style{ .hero__lock>*{opacity:0;transform:translateY(16px)} }
/* filmic hero light sweep */
.hero__sweep{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
@media(prefers-reduced-motion:no-preference){
  .hero__sweep::before{content:"";position:absolute;top:-20%;left:0;width:42%;height:140%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.15),transparent);transform:skewX(-14deg) translateX(-160%);
    animation:heroSweep 2.8s .35s var(--ease-out) 1}
  @keyframes heroSweep{to{transform:skewX(-14deg) translateX(420%)}}
  /* the record tab stamps onto the mat, the knob pulses until touched (the photo itself never moves) */
  .hero__cap{animation:stampIn .5s .9s var(--ease-out) both}
  @keyframes stampIn{from{opacity:0;transform:translateY(50%) scale(1.35)}to{opacity:1;transform:translateY(50%) scale(1)}}
  .hero__knob::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(255,255,255,.5);pointer-events:none;animation:knobPulse 2.6s ease-out infinite}
  .hero__mat .hero.touched .hero__knob::after{animation:none;opacity:0}
  @keyframes knobPulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.55);opacity:0}100%{opacity:0}}
}
@media(prefers-reduced-motion:reduce){
  .hero__lock>*{transition:none}
  .hero__cap{animation:none}
  .hero__sweep{display:none}
}
html.ax-nomotion .hero__sweep{display:none}
html.ax-nomotion .hero__knob::after{animation:none;opacity:0}