/*
  Direction C · Slate and Terracotta. Motion language "Tactile": things respond like objects.
  Cards tilt toward the pointer and press down on touch; tiles settle in with a small overshoot;
  the before/after slider follows a finger or a mouse 1:1.
  Radius rule: panels and cards 22px, photos inside cards 14px, controls are pills, inputs 14px.
*/
:root{
  --ground:#E6EAEC; --surface:#F6F8F9; --ink:#1D252B; --muted:#505C64;
  --clay:#A9472A; --clay-press:#8E3B22; --slate:#2E3B44; --on-dark:#FFFFFF;
  --line:rgba(29,37,43,.13);
  --shadow:0 1px 1px rgba(46,59,68,.06),0 10px 30px -12px rgba(46,59,68,.28);
  --shadow-lift:0 2px 2px rgba(46,59,68,.06),0 26px 48px -18px rgba(46,59,68,.42);
  --display:"Archivo","Helvetica Neue",system-ui,sans-serif;
  --text:"Atkinson Hyperlegible Next","Helvetica Neue",system-ui,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-drawer:cubic-bezier(.32,.72,0,1);
  --pad:clamp(16px,4vw,48px);
  --wrap:min(1240px, 100% - 2*var(--pad));
  --r:22px;
  --logo:var(--ink); --accent-ui:var(--clay); --dirs-bg:var(--slate); --dirs-fg:#E9EEF1;
  --sel-bg:var(--clay); --sel-fg:#fff; --scroll-thumb:rgba(46,59,68,.4);
  --ft-bg:var(--slate); --ft-fg:#fff; --ft-muted:#C5CFD5;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.6 var(--text);-webkit-tap-highlight-color:transparent;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;font-weight:760;font-stretch:118%}
p{margin:0}
fieldset{border:0;margin:0;padding:0;min-width:0}
a[href^="tel:"],.ft-tel{font-family:var(--display);font-stretch:100%;letter-spacing:.01em}
.wrap{width:var(--wrap);margin-inline:auto}
:focus-visible{outline:2.5px solid var(--clay);outline-offset:3px;border-radius:8px}
.ph{display:inline-flex;align-items:center;font:700 11px/1 var(--text);letter-spacing:.05em;text-transform:uppercase;color:#6B4200;border:1px dashed #B77A16;background:rgba(236,170,60,.18);padding:4px 7px;border-radius:4px;vertical-align:middle;white-space:nowrap}
.ph--dark{color:#FFD9A0;border-color:#E0A54A;background:rgba(224,165,74,.14)}


/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;border:0;background:var(--clay);color:var(--on-dark);font:700 16px/1 var(--text);text-decoration:none;cursor:pointer;white-space:nowrap;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 8px 18px -10px rgba(169,71,42,.7);transition:transform .16s var(--ease-out),background .2s ease,box-shadow .25s ease}
.btn:active{transform:translateY(1px) scale(.97);background:var(--clay-press);box-shadow:0 2px 6px -4px rgba(169,71,42,.7)}
.btn--quiet{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn--quiet:active{background:#E9EDEF;box-shadow:inset 0 0 0 1px var(--line)}
.btn .arr{transition:transform .4s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 14px 24px -12px rgba(169,71,42,.75)}
  .btn:hover .arr{transform:translateX(4px)}
  .btn--quiet:hover{box-shadow:inset 0 0 0 1px var(--ink)}
}

/* ---------- Header ---------- */
.hdr{position:sticky;top:10px;z-index:30;margin-top:10px}
.hdr .brand{--lh:24px}
.hdr .bar{width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:14px;height:64px;padding:0 8px 0 18px;border-radius:999px;background:rgba(246,248,249,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--line)}
.nav{display:flex;gap:2px}
.nav a{text-decoration:none;font-weight:600;font-size:15px;padding:10px 14px;border-radius:999px;transition:background .2s ease}
.nav a:active{background:rgba(29,37,43,.08)}
.hdr .btn{min-height:48px;padding:0 20px}
.menu-btn{display:none;width:48px;height:48px;border-radius:999px;border:0;background:var(--ink);color:#fff;cursor:pointer;place-items:center;transition:transform .16s var(--ease-out)}
.menu-btn:active{transform:scale(.94)}
.menu-btn .i{width:20px;height:20px;transition:transform .4s var(--ease-out)}
.menu-btn[aria-expanded="true"] .i{transform:rotate(45deg)}
.pop{position:absolute;right:var(--pad);top:72px;width:min(320px,calc(100vw - 2*var(--pad)));background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-lift),inset 0 0 0 1px var(--line);padding:10px;display:grid;transform-origin:top right;transform:scale(.94) translateY(-6px);opacity:0;visibility:hidden;transition:transform .28s var(--ease-out),opacity .2s ease,visibility 0s linear .28s}
.pop.open{transform:none;opacity:1;visibility:visible;transition:transform .32s var(--ease-out),opacity .2s ease,visibility 0s}
.pop a{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 14px;border-radius:14px;text-decoration:none;font:700 18px/1 var(--display);font-stretch:112%}
.pop a:active{background:var(--ground)}
@media (hover:hover) and (pointer:fine){ .nav a:hover{background:rgba(29,37,43,.07)} }
@media (max-width:900px){ .nav{display:none} .menu-btn{display:grid} .hdr .btn{display:none} }

/* ---------- Hero bento ---------- */
.hero{padding:clamp(18px,3vw,32px) 0 clamp(20px,3vw,40px)}
.bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(0,auto);gap:14px}
.tile{margin:0;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);padding:clamp(20px,3vw,36px);position:relative;overflow:hidden}
.t-head{grid-column:1/8;grid-row:1/3;display:grid;align-content:space-between;gap:36px;min-height:min(520px,62vh)}
.t-head h1{font-size:clamp(40px,5.4vw,80px);line-height:.96;letter-spacing:-.03em;font-stretch:118%;font-weight:800}
.t-head h1 em{font-style:normal;color:var(--clay)}
.t-head p{color:var(--muted);font-size:clamp(17px,1.5vw,19px);max-width:36ch}
.t-head .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.t-photo{grid-column:8/13;grid-row:1/3;padding:0;min-height:320px}
.t-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.t-start{grid-column:1/6;background:var(--clay);color:#fff}
.t-start h2{font-size:clamp(24px,2.2vw,30px);font-stretch:112%;margin-bottom:14px}
.t-start .quick{display:flex;flex-wrap:wrap;gap:8px}
.t-start button{appearance:none;border:0;min-height:44px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font:700 15px/1 var(--text);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);transition:background .2s ease,transform .16s var(--ease-out),color .2s ease}
.t-start button:active{transform:scale(.95);background:#fff;color:var(--clay)}
.t-proof{grid-column:6/10;background:var(--slate);color:#fff}
.t-proof ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.t-proof li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-weight:600}
.t-proof li small{display:block;font-weight:400;color:#C5CFD5}
.dotcheck{display:grid;place-items:center;width:22px;height:22px;border-radius:999px;background:rgba(255,255,255,.14);margin-top:2px}
.dotcheck .i{width:14px;height:14px}
.t-voice{grid-column:10/13;display:grid;align-content:space-between;gap:16px}
.t-voice blockquote{margin:0;font:700 clamp(19px,1.7vw,22px)/1.25 var(--display);font-stretch:108%}
.t-voice figcaption{font-size:14px;color:var(--muted);display:grid;gap:6px;justify-items:start}
.t-voice .src{font:700 11px/1 var(--text);letter-spacing:.05em;text-transform:uppercase;box-shadow:inset 0 0 0 1px var(--line);padding:5px 7px;border-radius:4px}
@media (hover:hover) and (pointer:fine){ .t-start button:hover{background:rgba(255,255,255,.26)} }
@media (prefers-reduced-motion:no-preference){
  .bento>.tile{animation:settle-in .8s var(--ease-out) both}
  .bento>.tile:nth-child(2){animation-delay:.07s}.bento>.tile:nth-child(3){animation-delay:.14s}.bento>.tile:nth-child(4){animation-delay:.21s}.bento>.tile:nth-child(5){animation-delay:.28s}
  .t-photo img{animation:photo-settle 1.8s var(--ease-out) both}
  .t-head h1{animation:press 1.1s var(--ease-out) both .1s}
}
@keyframes settle-in{0%{opacity:0;transform:translateY(22px) scale(.97)}70%{opacity:1;transform:translateY(-3px) scale(1.003)}100%{opacity:1;transform:none}}
@keyframes photo-settle{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes press{from{font-weight:300;letter-spacing:.01em}to{font-weight:800;letter-spacing:-.03em}}
@media (max-width:1000px){
  .t-head{grid-column:1/-1;grid-row:auto;min-height:0}
  .t-photo{grid-column:1/-1;grid-row:auto;min-height:0;aspect-ratio:16/10}
  .t-start{grid-column:1/7}.t-proof{grid-column:7/13}.t-voice{grid-column:1/-1}
}
@media (max-width:640px){
  .bento{gap:10px}
  .t-start,.t-proof,.t-voice{grid-column:1/-1}
  .t-photo{aspect-ratio:4/3;order:-1}
  .t-head{gap:24px}
  .t-head .cta .btn{flex:1 1 auto}
}

/* ---------- Section scaffolding ---------- */
section.block{padding:clamp(56px,8vw,112px) 0}
.h2{font-size:clamp(34px,4.6vw,62px);line-height:.98;letter-spacing:-.025em;font-stretch:122%;font-weight:800;max-width:18ch}
.sub{color:var(--muted);font-size:18px;max-width:52ch;margin-top:16px}

/* ---------- Before / after ---------- */
.ba{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,72px);align-items:center}
.ba .notes{display:grid;gap:18px}
.ba .notes ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px}
.ba .notes li{display:flex;gap:10px;align-items:center;font-weight:600}
.ba .notes li .i{color:var(--clay)}
.cmp{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/2;box-shadow:var(--shadow-lift);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;background:#cfd6da}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cmp .before{filter:sepia(.45) saturate(.7) brightness(.78) contrast(.92)}
.cmp .grime{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 40% at 30% 80%,rgba(92,72,40,.35),transparent 70%),radial-gradient(40% 30% at 75% 30%,rgba(92,80,50,.22),transparent 70%)}
.cmp .after-wrap{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.cmp .handle{position:absolute;top:0;bottom:0;left:0;width:0;transform:translateX(50%)}
.cmp .handle::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.cmp .knob .i{width:24px;height:24px}
.cmp .knob{position:absolute;top:50%;left:0;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:999px;background:#fff;box-shadow:var(--shadow-lift);display:grid;place-items:center;color:var(--ink);transition:transform .2s var(--ease-out)}
.cmp.dragging .knob{transform:scale(1.12)}
.cmp .lbl{position:absolute;bottom:14px;font:700 12px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(29,37,43,.78);padding:7px 10px;border-radius:999px;pointer-events:none}
.cmp .lbl.l{left:14px}.cmp .lbl.r{right:14px}
.cmp input{position:absolute;inset:auto 0 0 0;width:100%;height:1px;opacity:0;margin:0}
.cmp:has(input:focus-visible){outline:2.5px solid var(--clay);outline-offset:4px}
.demo-note{margin-top:12px;font-size:14px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
@media (max-width:860px){ .ba{grid-template-columns:1fr} .cmp{aspect-ratio:4/3} }

/* ---------- Service cards ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(28px,4vw,48px);perspective:1100px}
.card{position:relative;display:grid;grid-template-rows:auto 1fr;gap:14px;padding:10px 10px 18px;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);text-decoration:none;transform-style:preserve-3d;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.card .img{border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:#cfd6da}
.card .img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.card .body{padding:0 8px;display:grid;gap:6px;align-content:start}
.card h3{font-size:clamp(19px,1.6vw,22px);line-height:1.12;font-stretch:112%;font-weight:750}
.card p{font-size:15px;color:var(--muted);line-height:1.45}
.card .go .i{width:18px;height:18px}
.card .go{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:999px;background:var(--surface);color:var(--ink);display:grid;place-items:center;box-shadow:var(--shadow);transform:translateZ(30px) scale(.85);opacity:0;transition:opacity .3s ease,transform .45s var(--ease-out)}
.card--clay{background:var(--clay);color:#fff}
.card--clay p{color:#FBE8E1}
.card--slate{background:var(--slate);color:#fff}
.card--slate p{color:#C5CFD5}
.card:active{transform:scale(.975);box-shadow:var(--shadow);transition-duration:.14s}
@media (hover:hover) and (pointer:fine){
  .card:hover{box-shadow:var(--shadow-lift)}
  .card:hover .img img{transform:scale(1.06)}
  .card:hover .go,.card:focus-visible .go{opacity:1;transform:translateZ(30px) scale(1)}
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .card{animation:card-in linear both;animation-timeline:view();animation-range:entry 0% entry 75%}
    .card:nth-child(4n+2){animation-range:entry 6% entry 81%}
    .card:nth-child(4n+3){animation-range:entry 12% entry 87%}
    .card:nth-child(4n){animation-range:entry 18% entry 93%}
  }
}
@keyframes card-in{0%{opacity:.4;translate:0 48px;rotate:1.5deg;scale:.96}75%{opacity:1;translate:0 -5px;rotate:0deg;scale:1.005}100%{opacity:1;translate:none;rotate:none;scale:none}}
@media (max-width:1000px){ .cards{grid-template-columns:repeat(2,1fr)} .card:nth-child(2n){animation-range:entry 8% entry 83%} }
@media (max-width:640px){ .cards{gap:10px} .card{padding:8px 8px 14px;gap:10px} .card .body{padding:0 4px} .card p{font-size:14px} .card h3{font-size:18px} }

/* ---------- Reviews ---------- */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(28px,4vw,48px)}
.rev{margin:0;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);padding:clamp(22px,3vw,34px);display:grid;gap:20px;align-content:space-between}
.rev blockquote{margin:0;font:650 clamp(20px,1.8vw,24px)/1.28 var(--display);font-stretch:106%}
.rev figcaption{font-size:15px;color:var(--muted);display:grid;gap:8px;justify-items:start}
.rev figcaption b{color:var(--ink)}
.rev--real{background:var(--slate);color:#fff}
.rev--real figcaption,.rev--real figcaption b{color:#fff}
.rev--real .src{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.src{font:700 11px/1 var(--text);letter-spacing:.05em;text-transform:uppercase;padding:5px 7px;border-radius:4px}
@media (max-width:900px){
  .revs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--pad));padding:6px var(--pad) 18px;scroll-padding-inline:var(--pad);scrollbar-width:none}
  .revs::-webkit-scrollbar{display:none}
  .rev{flex:0 0 min(82vw,360px);scroll-snap-align:start}
}

/* ---------- Quote wizard ---------- */
.wiz{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,5vw,72px);align-items:start}
.wiz .contact{list-style:none;display:grid;gap:10px;margin:28px 0 0;padding:20px;border-radius:var(--r);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.wiz .contact li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;color:var(--muted)}
.wiz .contact li:last-child{grid-template-columns:1fr}
.wiz .contact .i{width:22px;height:22px;color:var(--clay);margin-top:2px}
.wiz .contact b{display:block;color:var(--ink);font:750 20px/1.2 var(--display);font-stretch:112%}
.wiz .contact a{display:inline-flex;align-items:center;min-height:44px;margin-top:-10px;color:var(--ink);font-weight:700}
.panel{border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-lift);padding:clamp(20px,3.4vw,40px);overflow:hidden}
.prog{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.prog .bar{flex:1;height:6px;border-radius:999px;background:var(--ground);overflow:hidden}
.prog .bar i{display:block;height:100%;width:100%;border-radius:999px;background:var(--clay);transform-origin:left;transform:scaleX(.3333);transition:transform .6s var(--ease-drawer)}
.prog span{font-size:14px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.steps{display:grid}
.step{grid-area:1/1;display:grid;gap:22px;align-content:start;transition:transform .55s var(--ease-drawer),opacity .35s ease,visibility 0s linear .55s}
.step[data-pos="past"]{transform:translateX(-12%);opacity:0;visibility:hidden}
.step[data-pos="next"]{transform:translateX(12%);opacity:0;visibility:hidden}
.step[data-pos="now"]{transform:none;opacity:1;visibility:visible;transition:transform .55s var(--ease-drawer),opacity .35s ease .08s,visibility 0s}
.step h3{font-size:clamp(24px,2.4vw,32px);font-stretch:116%}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px;border-radius:999px;background:var(--ground);font-weight:600;font-size:15px;transition:background .2s ease,color .2s ease,transform .16s var(--ease-out),box-shadow .2s ease}
.chip input:checked+span{background:var(--ink);color:#fff}
.chip input:active+span{transform:scale(.95)}
.chip input:focus-visible+span{outline:2.5px solid var(--clay);outline-offset:2px}
@media (hover:hover) and (pointer:fine){ .chip input:not(:checked):hover+span{box-shadow:inset 0 0 0 1.5px var(--ink)} }
.rowf{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stepper{display:grid;gap:8px}
.stepper .lab{font-weight:700;font-size:15px}
.stepper .ctl{display:flex;align-items:center;justify-content:space-between;height:56px;border-radius:999px;background:var(--ground);padding:0 6px}
.stepper button{appearance:none;border:0;width:44px;height:44px;display:grid;place-items:center;border-radius:999px;background:var(--surface);color:var(--ink);cursor:pointer;box-shadow:var(--shadow);transition:transform .16s var(--ease-out)}
.stepper button:active{transform:scale(.9)}
.stepper output{font:800 22px/1 var(--display);font-variant-numeric:tabular-nums;min-width:2ch;text-align:center}
.stepper output.bump{animation:bump .3s var(--ease-out)}
@keyframes bump{50%{transform:translateY(-4px) scale(1.15)}}
.seg{display:grid;grid-template-columns:repeat(3,1fr);background:var(--ground);border-radius:999px;padding:5px;position:relative}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{position:relative;z-index:1;min-height:46px;display:grid;place-items:center;font-weight:700;font-size:15px;cursor:pointer;border-radius:999px;transition:color .25s ease}
.seg .pill{position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 10px)/3);border-radius:999px;background:var(--surface);box-shadow:var(--shadow);transition:transform .45s var(--ease-drawer)}
.seg:has(input:focus-visible){outline:2.5px solid var(--clay);outline-offset:2px}
.field{display:grid;gap:8px}
.field label{font-weight:700;font-size:15px}
.field input{font:400 16px/1.2 var(--text);height:54px;padding:0 16px;border-radius:14px;border:1.5px solid rgba(29,37,43,.22);background:#fff;color:var(--ink);width:100%;transition:border-color .2s ease,box-shadow .2s ease}
.field input::placeholder{color:#6A757C}
.field input:focus{outline:0;border-color:var(--clay);box-shadow:0 0 0 4px rgba(169,71,42,.16)}
.field .err{font-size:14px;color:#9B2C1F;min-height:1.4em}
.help{font-size:14px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.nav-row{display:flex;justify-content:space-between;gap:10px;margin-top:6px}
.done{text-align:left}
.done svg{width:64px;height:64px}
.done circle{fill:var(--clay)}
.done path{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40}
.step[data-pos="now"] .done path{animation:tick .5s var(--ease-out) .3s forwards}
@keyframes tick{to{stroke-dashoffset:0}}
@media (max-width:900px){ .wiz{grid-template-columns:1fr} }
@media (max-width:520px){ .rowf{grid-template-columns:1fr} .nav-row .btn{flex:1} }

/* ---------- Footer ---------- */

@media (prefers-reduced-motion:reduce){ .done path{stroke-dashoffset:0} }
@media print{ *,*::before,*::after{animation:none!important} }

/* ---------- Motion pass 2 ---------- */
.ft,.ft-addr,.ft-legal{font-family:var(--display);font-stretch:100%}
.stars{--star:var(--clay)}
.rev .ex{color:var(--muted)}
.rev--real .ex{color:#fff}
.rev{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.rev:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){ .rev:hover{box-shadow:var(--shadow-lift)} }
.revs{perspective:1100px}
.revs+.sub,.revs .sub{margin-top:0}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    /* Reviews are dealt onto the table, each at its own small angle */
    .revs{view-timeline:--revs block}
    .rev{animation:deal linear both;animation-timeline:--revs}
    .rev:nth-child(1){--rot:-3deg;animation-range:entry 5% cover 32%}
    .rev:nth-child(2){--rot:2.5deg;animation-range:entry 15% cover 42%}
    .rev:nth-child(3){--rot:-2deg;animation-range:entry 25% cover 52%}
    .rev .st{animation:star-pop linear both;animation-timeline:--revs}
    .rev:nth-child(2) .st:nth-child(1){animation-range:cover 30% cover 36%}.rev:nth-child(2) .st:nth-child(2){animation-range:cover 33% cover 39%}.rev:nth-child(2) .st:nth-child(3){animation-range:cover 36% cover 42%}.rev:nth-child(2) .st:nth-child(4){animation-range:cover 39% cover 45%}.rev:nth-child(2) .st:nth-child(5){animation-range:cover 42% cover 48%}
    .rev:nth-child(3) .st:nth-child(1){animation-range:cover 38% cover 44%}.rev:nth-child(3) .st:nth-child(2){animation-range:cover 41% cover 47%}.rev:nth-child(3) .st:nth-child(3){animation-range:cover 44% cover 50%}.rev:nth-child(3) .st:nth-child(4){animation-range:cover 47% cover 53%}.rev:nth-child(3) .st:nth-child(5){animation-range:cover 50% cover 56%}
    /* Before and after: the ticks press in one at a time */
    .ba .notes ul{view-timeline:--ticks block}
    .ba .notes li .i{animation:tick-press linear both;animation-timeline:--ticks}
    .ba .notes li:nth-child(1) .i{animation-range:entry 20% entry 60%}
    .ba .notes li:nth-child(2) .i{animation-range:entry 40% entry 80%}
    .ba .notes li:nth-child(3) .i{animation-range:entry 60% entry 100%}
    /* Quote: the wizard panel settles like a card put down; contact lines follow */
    .wiz .panel{animation:panel-settle linear both;animation-timeline:view();animation-range:entry 0% entry 75%}
    .wiz .contact li{animation:field-up linear both;animation-timeline:view();animation-range:entry 30% entry 90%}
    @media (max-width:900px){
      /* Carousel: the card in the middle is full size, its neighbours sit back */
      .revs .rev{animation:card-enter linear both,card-leave linear forwards;animation-timeline:view(inline),view(inline);animation-range:entry 0% entry 100%,exit 0% exit 100%}
      .rev .st{animation:none}
    }
  }
}
@keyframes deal{from{opacity:.4;translate:0 64px;rotate:var(--rot,0deg);scale:.95}75%{opacity:1;translate:0 -4px;rotate:0deg;scale:1.005}to{opacity:1;translate:none;rotate:none;scale:none}}
@keyframes star-pop{from{opacity:.25;scale:.5}to{opacity:1;scale:1}}
@keyframes tick-press{from{scale:.3;opacity:.3}70%{scale:1.2;opacity:1}to{scale:1;opacity:1}}
@keyframes panel-settle{from{opacity:.45;translate:0 56px;scale:.97}80%{opacity:1;translate:0 -4px;scale:1.004}to{opacity:1;translate:none;scale:none}}
@keyframes field-up{from{opacity:.4;translate:0 14px}to{opacity:1;translate:none}}
@keyframes card-enter{from{scale:.92;opacity:.55}to{scale:1;opacity:1}}
@keyframes card-leave{from{scale:1;opacity:1}to{scale:.92;opacity:.55}}