/* Price Match Guarantee page. No script: the chips are plain jump links and all motion is scroll-driven CSS, off for
   reduced motion and showing the finished (matched) state where scroll timelines are not supported. */

#guarantee,#how,#qualifies,#like-for-like,#confidence{scroll-margin-top:96px}

/* Hero: the live abstract graphic under a light veil (as UKAS and the policy pages), drifting gently on scroll */
.pm-hero::after{background:linear-gradient(90deg,rgba(0,23,63,.78),rgba(0,23,63,.36) 55%,rgba(0,23,63,.08))}
.pm-hero>img{object-position:50% 50%}
.pm-hero .crumbs{margin-bottom:clamp(28px,5vw,64px)}
.pm-hero .crumbs a[aria-current]{text-decoration:none;color:#fff}
.pm-hero .label{color:#fff}
.pm-hero .lead{max-width:36em}

/* Preview only: facts still to confirm (same look as the cutting and UKAS pages) */
.pv-todo{max-width:var(--wrap);margin:20px auto 0;padding:14px var(--gutter)}
.pv-todo strong{display:block;margin-bottom:6px;color:#7d5200;font-size:14px}
.pv-todo ul{display:flex;flex-wrap:wrap;gap:6px}
.pv-todo li{padding:4px 10px;border:1px dashed #c9a24a;border-radius:3px;background:#fff8e8;color:#7d5200;font-size:13.5px}

/* The guarantee + the matched-quotes card */
.pm-intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:center}
.pm-meta{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--muted);font-size:14px}
.pm-meta li{display:flex;align-items:center;gap:7px}
.pm-meta svg{width:17px;height:17px;flex:none;color:var(--orange)}
.pm-meta b{font-weight:600;color:var(--navy)}
.pm-o{color:var(--orange)}

.pm-match{margin:0;padding:clamp(20px,2.4vw,30px);background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 34px 64px -40px rgba(0,23,63,.55);view-timeline:--match block}
.pm-match-top{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:13.5px;font-weight:600}
.pm-match-top i{padding:3px 10px;border:1px solid var(--navy);border-radius:999px;color:var(--navy);font-size:12.5px;font-style:normal}
.pm-rows{position:relative;display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:22px 18px;align-items:center;margin:24px 0 22px}
.pm-who{display:flex;align-items:center;gap:8px;color:var(--navy);font-size:14.5px;font-weight:600;line-height:1.25}
.pm-who svg{width:20px;height:20px;flex:none;color:var(--muted)}
.pm-them{grid-area:1/1}
.pm-us{grid-area:2/1;justify-self:start;padding:9px 12px;border-radius:4px;background:var(--navy)}
.pm-us img{width:auto;height:16px}
.pm-bar{position:relative;height:16px;border-radius:999px;background:var(--ground)}
.pm-bar span{position:absolute;inset:0;border-radius:inherit;clip-path:inset(0 38% 0 0 round 999px)}
.pm-bar-them{grid-area:1/2}
.pm-bar-them span{background:var(--navy)}
.pm-bar-us{grid-area:2/2}
.pm-bar-us span{background:var(--orange)}
/* The dashed line marks the other laboratory's price and runs down through our bar */
.pm-guide{grid-area:1/2/3/3;position:relative;z-index:1;align-self:stretch;margin:-10px 0;pointer-events:none}
.pm-guide::before{content:"";position:absolute;top:0;bottom:0;left:62%;border-left:2px dashed var(--orange);transform-origin:top}
.pm-match-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding-top:18px;border-top:1px solid var(--line)}
.pm-stamp{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-size:15px;font-weight:600}
.pm-stamp svg{flex:none;width:28px;height:28px;padding:5px;border-radius:50%;background:var(--orange);color:#fff}
.pm-note{color:var(--muted);font-size:14px}

/* How it works: four numbered steps joined by a line; nodes turn orange one after another as the row scrolls in */
.pm-how-head p{color:var(--muted)}
.pm-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;view-timeline:--pmsteps block}
.pm-steps li{position:relative;padding-right:22px}
.pm-steps li::before,.pm-steps li::after{content:"";position:absolute;top:27px;left:56px;right:0;height:2px;background:#d3dae6}
.pm-steps li::after{display:none;background:var(--orange);transform-origin:left}
.pm-steps li:last-child::before,.pm-steps li:last-child::after{display:none!important}
.pm-steps b{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;margin-bottom:18px;border-radius:50%;background:var(--navy);color:#fff;font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;box-shadow:0 0 0 6px var(--ground);transition:background .25s}
.pm-steps li:hover b{background:var(--orange)}
.pm-steps h4{margin-bottom:6px;font-size:clamp(18px,.5vw + 15.5px,21px);line-height:1.25}
.pm-steps p{color:var(--muted);font-size:15.5px}
.pm-how-btns{margin-top:clamp(28px,3.4vw,44px)}

/* What qualifies: the live conditions as a ticked list, beside the like-for-like rule as an equals sign */
.pm-qual{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:center}
.pm-qual-list{margin-top:26px;border-bottom:1px solid var(--line)}
.pm-qual-list li{display:flex;align-items:flex-start;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.pm-tick{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--navy)}
.pm-tick .tick{margin:0;color:#fff}
.pm-qual-list h4{margin:2px 0 4px;font-size:clamp(17px,.4vw + 15.5px,19px);line-height:1.3}
.pm-qual-list p{color:var(--muted)}
.pm-lfl{padding:clamp(26px,3.4vw,44px);border-radius:6px;background:var(--navy);box-shadow:0 34px 64px -40px rgba(0,23,63,.7);view-timeline:--lfl block}
.pm-lfl-mark{display:grid;gap:9px;width:56px;margin-bottom:22px}
.pm-lfl-mark i{display:block;height:7px;border-radius:2px;background:var(--orange)}
.pm-nw{white-space:nowrap}
.pm-lfl p{color:#fff;font-size:clamp(21px,.9vw + 17px,29px);font-weight:600;line-height:1.28;letter-spacing:-.01em;text-wrap:balance}

/* Confidence and peace of mind: the live paragraphs beside what a matched price still includes */
.pm-conf{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:center}
.pm-kept{padding:clamp(22px,2.8vw,36px);background:#fff;border:1px solid var(--line);border-radius:6px}
.pm-kept-h{margin-bottom:16px;color:var(--navy);font-size:clamp(19px,.5vw + 17px,23px);font-weight:600;line-height:1.25}
.pm-kept ul{display:grid;gap:12px}
.pm-kept li{display:flex;gap:10px;color:var(--ink)}
.pm-kept-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:14px}
.pm-kept-foot a{color:var(--navy);font-weight:500;text-underline-offset:3px}
.pm-kept-foot a:hover{color:var(--orange)}

@media (min-width:901px) and (max-width:1024px){
  .pm-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
  .pm-steps li:nth-child(2)::before,.pm-steps li:nth-child(2)::after{display:none!important}
}
@media (max-width:900px){
  .pm-intro,.pm-qual,.pm-conf{grid-template-columns:1fr}
  .pm-match,.pm-lfl,.pm-kept{max-width:600px}
  .pm-steps{grid-template-columns:1fr;row-gap:0}
  .pm-steps li{display:flex;gap:16px;padding:0 0 26px}
  .pm-steps li::before,.pm-steps li::after{top:48px;bottom:0;left:23px;right:auto;width:2px;height:auto}
  .pm-steps li::after{transform-origin:top}
  .pm-steps b{flex:none;width:48px;height:48px;margin:0;font-size:17px;box-shadow:0 0 0 5px var(--ground)}
  .pm-steps h4{margin-top:10px}
}
@media (max-width:640px){
  .pm-hero .btns .btn{flex:1 1 100%}
  .pm-how-btns .btn{flex:1 1 100%}
  .pm-rows{grid-template-columns:1fr;gap:10px;margin:20px 0}
  .pm-them{grid-area:1/1}
  .pm-bar-them{grid-area:2/1;margin-bottom:12px}
  .pm-us{grid-area:3/1}
  .pm-bar-us{grid-area:4/1}
  .pm-guide{grid-area:2/1/5/2;margin:-6px 0}
  .pm-qual-list li{gap:14px}
  .pm-tick{width:34px;height:34px}
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .pm-hero>img{animation:pm-drift linear both;animation-timeline:scroll(root);animation-range:0 80vh}
    /* The matched-quotes card: theirs fills, ours fills longer, the line drops, ours comes down to it, the tick lands */
    .pm-bar-them span{animation:pm-them linear both;animation-timeline:--match;animation-range:cover 10% cover 20%}
    .pm-bar-us span{animation:pm-us linear both;animation-timeline:--match;animation-range:cover 18% cover 42%}
    .pm-guide::before{animation:pm-drop linear both;animation-timeline:--match;animation-range:cover 26% cover 32%}
    .pm-stamp svg{animation:pm-pop linear both;animation-timeline:--match;animation-range:cover 40% cover 46%}
    .pm-stamp,.pm-note{animation:pm-fade linear both;animation-timeline:--match;animation-range:cover 40% cover 46%}
    /* Steps: each node turns orange, then the line to the next one fills */
    .pm-steps li{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
    .pm-steps b{animation:node linear both;animation-timeline:--pmsteps;animation-range:entry calc(50% + var(--i) * 12%) entry calc(62% + var(--i) * 12%)}
    .pm-steps li::after{display:block;animation:pm-line-x linear both;animation-timeline:--pmsteps;animation-range:entry calc(58% + var(--i) * 12%) entry calc(68% + var(--i) * 12%)}
    /* Like-for-like: the two bars of the equals sign slide in from either side and meet */
    .pm-lfl-mark i:first-child{animation:pm-left linear both;animation-timeline:--lfl;animation-range:entry 30% cover 40%}
    .pm-lfl-mark i:last-child{animation:pm-right linear both;animation-timeline:--lfl;animation-range:entry 30% cover 40%}
    .pm-qual-list li,.pm-kept,.pm-lfl{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  }
  @media (prefers-reduced-motion:no-preference) and (max-width:900px){
    .pm-steps li::after{animation-name:pm-line-y}
  }
}
@keyframes pm-drift{from{transform:scale(1.16)}to{transform:translateY(6%) scale(1.16)}}
@keyframes pm-them{from{clip-path:inset(0 100% 0 0 round 999px)}to{clip-path:inset(0 38% 0 0 round 999px)}}
@keyframes pm-us{0%{clip-path:inset(0 100% 0 0 round 999px)}35%,60%{clip-path:inset(0 12% 0 0 round 999px)}100%{clip-path:inset(0 38% 0 0 round 999px)}}
@keyframes pm-drop{from{transform:scaleY(0)}to{transform:none}}
@keyframes pm-pop{from{transform:scale(.3)}to{transform:none}}
@keyframes pm-fade{from{opacity:0}to{opacity:1}}
@keyframes pm-line-x{from{transform:scaleX(0)}to{transform:none}}
@keyframes pm-line-y{from{transform:scaleY(0)}to{transform:none}}
@keyframes pm-left{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes pm-right{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}