/* Service detail interactions (2026-10-23). Replaces the repeated card grids with six patterns, mixed per section:
   xsplit (sticky headline, rows scrub in), xpeel (stacked cards peel away), xstrike (problem struck through on scroll),
   xacc (accordion to panel, magnetic labels), xbento (bento with hover depth), xscram (scramble reveal list),
   xtrack (horizontal scroll track), xrail (filling timeline), xcount (count-up dials).
   Every pattern is fully readable with no JS and with reduced motion. Content stays inside .park > .wrap, so the parked mark keeps its own column. */
.x{margin-top:clamp(40px,5vw,72px)}
.x > .eyebrow{margin-bottom:22px}
.xsr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.x h3{font-size:clamp(1.15rem,1.7vw,1.5rem);letter-spacing:-.025em;line-height:1.15}
.x p{color:var(--ink2);font-size:15.5px;line-height:1.5;margin:8px 0 0;max-width:46ch}

/* ---------- xsplit ---------- */
.xsplit{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,72px);align-items:start}
.xs-l{position:sticky;top:clamp(96px,22vh,200px)}
.x .xs-big{font-size:clamp(1.6rem,2.8vw,2.6rem);font-weight:700;letter-spacing:-.04em;line-height:1.02;color:var(--ink);max-width:12ch;margin:0}
.xs-big b{color:var(--c)}
.xs-r{list-style:none;margin:0;padding:0}
.xs-row{--p:1;display:grid;grid-template-columns:auto 1fr;gap:18px;padding:clamp(22px,3vw,34px) 0;position:relative;
  opacity:calc(.18 + .82 * var(--p));transform:translate3d(calc((1 - var(--p)) * 46px),0,0)}
.xs-row::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);transform-origin:left;transform:scaleX(var(--p))}
.xs-row::before{content:"";position:absolute;left:0;bottom:0;height:2px;width:72px;background:var(--c);transform-origin:left;transform:scaleX(var(--p))}
.xs-n{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--c);padding-top:6px}

/* ---------- xpeel ---------- */
.xp-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.xp-card{--q:0;position:sticky;top:calc(clamp(96px,16vh,150px) + var(--i) * 22px);padding:clamp(24px,3vw,40px);border-radius:26px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 22%,#17110D),#140F0C 70%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 34%,transparent),0 24px 60px rgba(0,0,0,.45);
  transform:scale(calc(1 - var(--q) * .06)) translate3d(0,calc(var(--q) * -10px),0);filter:brightness(calc(1 - var(--q) * .45));transform-origin:50% 0;min-height:clamp(170px,22vh,230px)}
.xp-n{display:block;font-size:clamp(2.6rem,4.4vw,4rem);font-weight:800;letter-spacing:-.06em;line-height:1;color:var(--c);margin-bottom:14px}

/* ---------- xstrike ---------- */
.xk-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(26px,3.4vw,44px)}
.xk-row{--p:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(16px,3vw,48px);align-items:end;padding-bottom:clamp(22px,3vw,34px);border-bottom:1px solid var(--line)}
.xk-row h3{position:relative;font-size:clamp(1.6rem,3.2vw,2.8rem);letter-spacing:-.045em;line-height:1.02;display:inline}
.xk-row h3 span{background:linear-gradient(var(--c),var(--c)) no-repeat 0 58% / calc(var(--p) * 100%) 4px;padding-bottom:2px}
.xk-row .xk-tag{display:inline-block;margin-top:14px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c);opacity:var(--p)}
.xk-row p{margin:0}

/* ---------- xacc ---------- */
.xa-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);column-gap:clamp(28px,4vw,72px);align-items:start}
.xa-i{display:contents}
.xa-b{grid-column:1;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;width:100%;text-align:left;font:inherit;color:var(--ink2);
  background:none;border:0;border-top:1px solid var(--line);padding:18px 4px;cursor:pointer;transition:color .3s}
.xa-i:last-child .xa-b{border-bottom:1px solid var(--line)}
.xa-n{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--c)}
.xa-t{display:block;font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:700;letter-spacing:-.02em;transition:translate .25s var(--ease)}
.xa-b i{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);position:relative;transition:background .3s,box-shadow .3s}
.xa-b i::before{content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg) translate(-1px,1px)}
.xa-b[aria-expanded="true"]{color:var(--ink)}
.xa-b[aria-expanded="true"] i{background:var(--c);box-shadow:none;color:#0A0A0A}
.xa-b:focus-visible{outline:2px solid var(--c);outline-offset:3px;border-radius:6px}
.xa-p{grid-column:2;grid-row:1 / span var(--n);position:sticky;top:clamp(96px,20vh,190px);padding:clamp(26px,3.4vw,46px);border-radius:28px;
  background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--c) 26%,transparent),transparent 62%),rgba(244,244,244,.04);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent);
  animation:xaIn .55s var(--ease)}
.xa-p p{font-size:clamp(1.02rem,1.4vw,1.2rem);max-width:30ch}
.xa-big{font-size:clamp(1.9rem,3.4vw,3.2rem)!important;font-weight:700;letter-spacing:-.045em;line-height:1.02;color:var(--ink)!important;margin:0 0 14px!important;max-width:12ch!important}
@keyframes xaIn{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}

/* ---------- xbento ---------- */
.xb-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;perspective:1100px}
.xb-t{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;grid-column:span var(--sp);border-radius:24px;position:relative;transform:rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;transition:transform .45s var(--ease),box-shadow .45s;background:rgba(244,244,244,.045);box-shadow:inset 0 0 0 1px rgba(244,244,244,.1);min-height:170px}
.xb-t::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(260px 200px at var(--mx) var(--my),color-mix(in srgb,var(--c) 34%,transparent),transparent 70%)}
.xb-t:hover::before{opacity:1}
.xb-t:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent),0 30px 60px rgba(0,0,0,.4)}
.xb-in{position:relative;padding:clamp(20px,2.4vw,30px);transform:translateZ(0);transition:transform .45s var(--ease)}
.xb-t:hover .xb-in{transform:translateZ(36px)}
.xb-n{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--c);margin-bottom:26px}
.xb-t.big .xb-in h3{font-size:clamp(1.5rem,2.4vw,2.1rem)}

/* ---------- xscram ---------- */
.xc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,4vw,64px)}
.xc-list li{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--line)}
.xc-n{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--c);padding-top:5px;font-variant-numeric:tabular-nums}
.xc-s{display:inline-block;min-height:1.15em}
.xc-s .g{color:var(--c);opacity:.8}

/* ---------- xtrack ---------- */
.xtrack{position:relative}
.xt-stick{position:relative}
.xt-row{list-style:none;margin:0;padding:0;display:flex;gap:clamp(16px,2vw,28px)}
.xt-row li{flex:0 0 clamp(280px,34vw,460px);padding:clamp(26px,3vw,40px);border-radius:28px;min-height:clamp(300px,42vh,400px);display:flex;flex-direction:column;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 18%,transparent),transparent 75%),rgba(244,244,244,.035);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 28%,transparent)}
.xt-row .xt-num{font-size:clamp(4.4rem,9vw,8rem);font-weight:800;letter-spacing:-.07em;line-height:.86;color:transparent;-webkit-text-stroke:1.5px var(--c)}
.xt-row small{display:block;margin-top:auto;padding-top:24px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.xt-row h3{margin-top:8px}
.xt-bar{height:2px;background:var(--line);margin-top:26px;border-radius:2px;overflow:hidden}
.xt-bar i{display:block;height:100%;background:var(--c);transform-origin:left;transform:scaleX(var(--p,1))}
.xtrack:not(.on) .xt-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}  /* no JS, reduced motion: a plain grid, never wider than the column */
.xtrack:not(.on) .xt-row li{flex:none}
.xtrack.on{height:var(--h)}
.xtrack.on .xt-stick{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.xtrack.on .xt-row{will-change:transform}

/* ---------- xrail ---------- */
.xr-list{list-style:none;margin:0;padding:0 0 0 clamp(70px,9vw,120px);position:relative;display:grid;gap:clamp(36px,6vh,64px)}
.xr-line{position:absolute;left:clamp(24px,3vw,40px);top:8px;bottom:8px;width:2px;background:var(--line)}
.xr-line b{position:absolute;inset:0;background:var(--c);transform-origin:top;transform:scaleY(var(--p,1))}
.xr-node{position:relative;transition:opacity .5s}
.xr-list.arm .xr-node{opacity:.35}
.xr-list.arm .xr-node.on{opacity:1}
.xr-node::before{content:"";position:absolute;left:calc(-1 * clamp(70px,9vw,120px) + clamp(24px,3vw,40px) - 8px);top:10px;width:18px;height:18px;border-radius:50%;background:var(--ground);box-shadow:inset 0 0 0 2px var(--line);transition:background .4s,box-shadow .4s}
.xr-node.on::before{background:var(--c);box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 22%,transparent)}
.xr-num{font-size:clamp(2.8rem,5vw,4.6rem);font-weight:800;letter-spacing:-.06em;line-height:.9;color:var(--c)}
.xr-num em{font-style:normal;font-size:.32em;letter-spacing:.02em;margin-left:8px;color:var(--ink2);font-weight:700}
.xr-node small{display:block;margin-top:12px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--label)}

/* ---------- xcount ---------- */
.xn-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.xn-dial{position:relative;width:clamp(130px,13vw,180px);aspect-ratio:1;margin-bottom:22px}
.xn-dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.xn-dial circle{fill:none;stroke-width:5}
.xn-dial .bg{stroke:var(--line)}
.xn-dial .fg{stroke:var(--c);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--f) * var(--d,1));transition:stroke-dashoffset 1.4s var(--ease)}
.xn-num{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(2.4rem,4vw,3.4rem);font-weight:800;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.xn-dial small{position:absolute;left:0;right:0;bottom:24%;text-align:center;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--label)}
.xn-row h3{margin-top:4px}

/* ---------- light sheets ---------- */
.proof .x p,.sheet .x p{color:var(--onpaper2)}

/* ---------- tablet and phone ---------- */
/* accordion without JS: every panel open, in a single column under its own button */
.xacc:not(.js) .xa-grid{grid-template-columns:1fr}
.xacc:not(.js) .xa-i{display:block}
.xacc:not(.js) .xa-p{position:static;grid-row:auto;margin:4px 0 18px;animation:none}
@media (max-width:900px){
  .xsplit,.xa-grid,.xk-row{grid-template-columns:1fr}
  .xs-l{position:static}
  .xa-i{display:block}
  .xa-p{position:static;grid-row:auto;margin:4px 0 18px;padding:22px;border-radius:20px}
  .xa-i:last-child .xa-b{border-bottom:0}
  .xa-grid{border-bottom:1px solid var(--line)}
  .xb-grid{grid-template-columns:1fr 1fr}
  .xb-t{grid-column:span 2}
  .xc-list{grid-template-columns:1fr}
  .xn-row{grid-template-columns:1fr;gap:34px}
  .xn-row li{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
  .xn-dial{width:112px;margin:0}
  .xn-num{font-size:2.1rem}
  .xt-row{flex-direction:column}
  .xt-row li{flex:none;min-height:0}
  .xt-row .xt-num{font-size:4.2rem}
  .xp-card{top:calc(84px + var(--i) * 14px);min-height:0}
}
@media (min-width:560px) and (max-width:900px){.xb-t{grid-column:span 1}.xb-t.big{grid-column:span 2}}
@media (prefers-reduced-motion:reduce){
  .xs-row,.xp-card,.xk-row,.xr-line b,.xt-bar i{--p:1!important;--q:0!important}
  .xp-card{position:relative;top:auto}
  .xa-p{animation:none}
  .xb-t,.xb-in{transition:none;transform:none!important}
  .xn-dial .fg{transition:none}
  .xr-list.arm .xr-node{opacity:1}
}

/* 2026-10-23 Ricky: the service run is wide, gutter to gutter (about 1300px of content at 1440). The mark fades out over
   these sections (fade() keys) instead of squeezing the text into a column beside it. */
.park.wide > .wrap{max-width:1440px;padding-right:var(--gutter)}
@media (min-width:901px){.wide .svgrid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}}
.wide .fixes span{max-width:60ch}
.wide .svproof .shot{max-width:1120px}
.wide .x p{max-width:62ch}
.wide .x .xs-big,.wide .xa-big{max-width:20ch!important}
.wide .xa-p p{max-width:52ch}
/* the sideways track runs edge to edge: the pinned stage breaks out of the content column, the first card still starts at
   the content edge and the last one ends at it, and nothing is clipped short of the screen edge */
.xtrack.on .xt-stick{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%)}
section:has(> .wrap .xtrack){overflow-x:clip}