/* Home: video hero, story timeline, services menu, salon cards, reviews, turning ring, the cut film. */

/* intro: logo draws in, then the cover fades away */
.loader{position:fixed;inset:0;z-index:100;background:var(--bone);display:grid;place-items:center;pointer-events:none}
.loader-logo{width:min(300px,62vw);color:var(--ink)}
.loader-logo svg{width:100%;height:auto;display:block;clip-path:inset(0 100% 0 0)}
.rm .loader{display:none}

/* hero */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;max-height:1100px;color:#fff;overflow:hidden;background:#111}
.hero-media{position:absolute;inset:-6% 0 0;will-change:transform}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
.hero-still{position:absolute;inset:0}.hero-still img{width:100%;height:100%;object-fit:cover;display:block}
.hero-film{position:absolute;inset:0;opacity:0;transition:opacity 1.3s var(--ease,ease)}
.hero-film.is-on{opacity:1}
.pause.hero-pause{position:absolute;z-index:3;right:max(16px,env(safe-area-inset-right,0px));top:calc(var(--hdr) + 14px);color:#fff;opacity:.75}
.hero-pause:hover,.hero-pause:focus-visible{opacity:1}
@media (prefers-reduced-motion:reduce){.hero-film{transition:none}}
/* stand-in tag retired */.stand-in-old{position:absolute;right:16px;top:calc(var(--hdr) + 7% + 16px);font:600 11px/1 var(--b);background:#fff;color:#000;padding:7px 10px;border-radius:3px;opacity:.9}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,14,.4) 0%,rgba(8,10,14,0) 24%,rgba(8,10,14,0) 46%,rgba(8,10,14,.7) 100%)}
.hero-copy{position:absolute;left:0;right:0;bottom:clamp(40px,7vh,72px);display:flex;justify-content:space-between;align-items:flex-end;gap:40px;will-change:transform,opacity}
/* Thomas 25 Oct: heading to the left edge, slogan and Book to the right edge, past the 1320px column */
.hero .hero-copy.wrap{max-width:none;padding-left:max(clamp(20px,4vw,80px),env(safe-area-inset-left,0px));padding-right:max(clamp(20px,4vw,80px),env(safe-area-inset-right,0px))}
.hero-left{min-width:0}
.hero-title{font:400 clamp(40px,6.2vw,112px)/.94 var(--d);letter-spacing:-.02em;text-wrap:balance}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.22em;margin-bottom:-.22em}
.hero-title .line>span{display:block}
.hero-title em{font-style:italic}
.hero-sub{margin-top:22px;font-size:16px;max-width:40ch;opacity:.9}
.hero-right{display:flex;flex-direction:column;align-items:flex-start;gap:16px;text-align:left;flex:none}
.hero-slogan{font-size:16px;line-height:1.4;max-width:22ch;opacity:.94}

/* intro */
.intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:72px;align-items:start;padding-block:clamp(96px,13vw,180px) clamp(72px,9vw,120px)}
.intro h2{font:400 clamp(40px,5vw,76px)/1.02 var(--d);letter-spacing:-.015em}
.reveal-words .w{display:inline-block;opacity:.14;will-change:opacity}
.rm .reveal-words .w{opacity:1}
.intro-side>p{font-size:19px;line-height:1.6;color:var(--mute);max-width:46ch}
.facts{display:flex;gap:44px;margin-top:40px;flex-wrap:wrap}
.facts>div{display:flex;flex-direction:column;align-items:center;text-align:center}
.fact-stars{display:flex;align-items:center;height:52px}
.stars5{font:400 30px/1 var(--b);letter-spacing:3px;color:var(--brass)}
.facts dt{font:400 52px/1 var(--d)}.facts dd{font-size:14px;color:var(--mute);margin-top:8px}

/* story: pinned, slides sideways */
.story{position:relative;background:var(--paper);border-block:1px solid var(--line)}
.story-pin{height:100vh;height:100svh;display:flex;flex-direction:column;overflow:hidden}
.story-head{padding-top:calc(var(--hdr) + 24px)}
.story-head .sub{margin-top:6px}
.track-wrap{position:relative;flex:1;min-height:0}
.track{position:absolute;top:0;bottom:0;left:0;display:flex;align-items:center;padding-left:max(var(--gut),calc((100vw - var(--max))/2 + var(--gut)));padding-right:12vw;will-change:transform}
.rail{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.rail-done{position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
.ms{position:relative;flex:0 0 auto;width:clamp(240px,24vw,340px);height:100%;margin-right:clamp(24px,4vw,64px)}
.ms .stem{position:absolute;left:0;width:1px;background:var(--ink);transform:scaleY(0)}
.ms.up .stem{bottom:50%;height:36px;transform-origin:50% 100%}
.ms.down .stem{top:50%;height:36px;transform-origin:50% 0}
.ms .stem::after{content:"";position:absolute;left:-3.5px;width:8px;height:8px;border-radius:50%;background:var(--ink)}
.ms.up .stem::after{bottom:-4px}.ms.down .stem::after{top:-4px}
.ms-body{position:absolute;left:0;right:0;opacity:0;transform:translateY(16px)}
.ms.up .ms-body{bottom:calc(50% + 48px)}.ms.down .ms-body{top:calc(50% + 48px)}
.ms-body img{width:100%;height:clamp(96px,19vh,210px);object-fit:cover;margin-bottom:12px}
.ms-body img.bw{filter:grayscale(1) contrast(1.05)}
.ms-body time{font:400 clamp(24px,2.2vw,30px)/1 var(--d);display:block;margin-bottom:6px}
.ms-body h3{font-size:15px;font-weight:600;margin-bottom:4px}
.ms-body p{font-size:14px;color:var(--mute);line-height:1.5}
.rm .ms-body{opacity:1;transform:none}.rm .ms .stem{transform:none}.rm .rail-done{transform:scaleX(1)}
.rm .story-pin{height:auto;padding-bottom:40px}
.rm .track-wrap{flex:none;height:min(80vh,720px);overflow-x:auto;overscroll-behavior-x:contain}
.rm .track{position:relative;height:100%}

/* services menu */
.services{padding-block:clamp(96px,12vw,170px)}
.menu{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,6vw,88px);align-items:stretch}
.menu-pic{position:relative;overflow:hidden;background:#ece8df;min-height:420px}
.menu-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;opacity:0;transform:scale(1.06);transition:opacity .9s var(--ease),transform 4.5s var(--ease-out)}
.menu-pic img.is-on{opacity:1;transform:scale(1)}
.menu-list .h2{margin-bottom:8px}
.cat{border-top:1px solid var(--ink);padding-top:18px;margin-top:36px}
.cat h3{font:400 30px/1.1 var(--d);margin-bottom:10px}
.row{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line);font-size:16px;position:relative;transition:padding .3s var(--ease-out)}
.row span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;transition:opacity .2s}
.row::after{content:"Book";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:12px;font-weight:600;letter-spacing:.04em;opacity:0;transition:opacity .25s}
.row:hover{padding-left:10px}.row:hover span:last-child{opacity:0}.row:hover::after{opacity:1}
.menu-cta{margin-top:34px}

/* salons: picture cards, Book and View salon on each */
.salons{padding-block:0 clamp(80px,10vw,140px)}
.sal-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.link-more{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.scards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.scard{position:relative;aspect-ratio:3/4;overflow:hidden;background:#222;color:#fff;isolation:isolate}
.scard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.scard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.72));z-index:1}
.scard:hover img{transform:scale(1.05)}
.scard-txt{position:absolute;left:24px;right:24px;bottom:24px;z-index:2}
.scard h3{font:400 clamp(36px,3.4vw,52px)/1 var(--d)}
.scard p{font-size:14px;opacity:.85;margin-top:4px}
.scard-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

.pause{position:relative;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--night-line);color:var(--snow)}
.pause::before{content:"";position:absolute;inset:-6px}
.pause svg{width:12px;height:12px;fill:currentColor}
.pause[aria-pressed="true"] svg rect{display:none}
.pause[aria-pressed="true"] svg{background:currentColor;clip-path:polygon(25% 12%,90% 50%,25% 88%)}
@media (prefers-reduced-motion:reduce){.pause.hero-pause{display:none}}

/* booking band with the cut film */
.book{background:radial-gradient(120% 140% at 80% 50%,#1b1916 0%,#0a0a0a 55%,#000 100%);color:var(--snow);overflow:hidden}
.book-pin{min-height:100vh;min-height:100svh;display:flex;align-items:center}
.book-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center;width:100%;padding-block:calc(var(--hdr) + 20px) 60px}
.book .h2{font-size:clamp(44px,5.4vw,84px);max-width:11ch}
.book-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.cutfilm{justify-self:end;width:min(100%,380px);margin:0}
.cutfilm video{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:#151412;display:block}
.cutfilm figcaption{margin-top:12px;font-size:12px;color:var(--night-mute)}

@media (max-width:980px){
  .hero-copy{flex-direction:column;align-items:flex-start;gap:26px}
  .hero-right{align-items:flex-start;text-align:left}
  .intro{grid-template-columns:1fr;gap:28px}
  .menu{grid-template-columns:1fr}
  .menu-pic{min-height:0;aspect-ratio:4/5}
  .scards{grid-template-columns:1fr}
  .scard{aspect-ratio:4/3.4}
  .book-in{grid-template-columns:1fr}
  .cutfilm{justify-self:start;width:min(72vw,320px)}
  .ms{width:min(68vw,280px)}
  .track{padding-right:6vw}
}
@media (max-width:520px){ .facts{gap:28px}.facts dt{font-size:42px} }
@media (prefers-reduced-motion:reduce){ .menu-pic img{transition:none!important} }
.story-pin>.wrap{width:100%}
@media (max-width:980px){
  .book-in{gap:24px;padding-block:calc(var(--hdr) + 12px) 28px}
  .book .h2{font-size:clamp(38px,10vw,56px)}
  .book-btns{margin-top:22px}
  .cutfilm{width:min(50vw,250px)}
}

/* phones (Thomas 26 Oct): still layouts for the story and our work; films keep playing */
.flat .story-pin{height:auto;padding-bottom:clamp(40px,10vw,64px)}
.flat .track-wrap{flex:none;height:auto;overflow:visible}
.flat .track{position:static;transform:none!important;display:grid;grid-template-columns:1fr;gap:36px;padding:28px max(var(--gut),env(safe-area-inset-right,0px)) 0 max(var(--gut),env(safe-area-inset-left,0px));will-change:auto}
.flat .rail,.flat .ms .stem{display:none}
.flat .ms{width:auto;height:auto;margin:0;padding-left:18px;border-left:1px solid var(--line)}
.flat .ms-body{position:static;opacity:1;transform:none}
.flat .ms-body img{height:auto;aspect-ratio:16/10}
.flat .ms-body time{font-size:30px}
/* Thomas 26 Oct 16:32: Our story is not shown on phones; the reels (27 Oct) show on every screen */
@media (max-width:760px){ .story{display:none} }
@media (min-width:701px) and (max-width:980px){ .scards{grid-template-columns:repeat(2,minmax(0,1fr))} .scard{aspect-ratio:4/5} .menu-pic{aspect-ratio:4/3} }

/* facts on phones (Thomas 26 Oct; 28 Oct 07:47): 50 and 3 side by side, each number centred over its line; stars centred under both */
@media (max-width:760px){
  .facts{display:grid;grid-template-columns:1fr 1fr;gap:34px 16px;margin-top:44px;width:100%}
  .facts>div:nth-child(1),.facts>div:nth-child(2){align-items:center;text-align:center}
  .facts>div:nth-child(3){grid-column:1/-1;align-items:center;text-align:center;padding-top:30px;border-top:1px solid var(--line)}
  .facts dt{font-size:72px!important}
  .facts dd{font-size:17px;margin-top:10px}
  .fact-stars{height:auto}.stars5{font-size:36px;letter-spacing:6px}
}
@media (max-width:760px){ .intro{padding-bottom:40px} }

/* Seen on You, Styled by Us (Thomas 27 Oct): story circles over a row of reel cards, measured from toniandguy.com
   (circles 84px with a 2px gradient ring and 2px gap, cards 9:16 about 225px wide, 8px apart, 10px corners, a play mark, arrows at the ends) */
.seen{padding-block:clamp(88px,10vw,140px) clamp(72px,8vw,120px);background:var(--bone)}
.seen-head{text-align:center}
.seen-head .sub{margin-inline:auto;max-width:52ch}
.seen-circles{list-style:none;display:flex;justify-content:center;gap:8px;margin:clamp(26px,3.4vw,46px) auto 0;padding-block:6px;padding-inline:max(var(--gut),env(safe-area-inset-left,0px)) max(var(--gut),env(safe-area-inset-right,0px));overflow-x:auto;scrollbar-width:none;max-width:100%}
.seen-circles::-webkit-scrollbar{display:none}
.sc{display:block;width:84px;height:84px;border-radius:50%;flex:none;transition:transform .35s var(--ease-out)}
.sc:hover{transform:scale(1.05)}
.sc-ring{display:block;width:100%;height:100%;border-radius:50%;padding:2px;background:linear-gradient(to right top,#eab308,#c026d3)}
.sc-in{display:block;width:100%;height:100%;border-radius:50%;padding:2px;background:var(--bone)}
.sc-in video{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 30%}
.sc:focus-visible{outline-offset:4px}
.seen-feed{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:stretch;margin-top:30px;padding-inline:max(calc(var(--gut) - 16px),env(safe-area-inset-left,0px)) max(calc(var(--gut) - 16px),env(safe-area-inset-right,0px))}
.seen-viewport{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;min-width:0}
.seen-viewport::-webkit-scrollbar{display:none}
.seen-track{list-style:none;display:flex;gap:8px;width:max-content}
.rc{flex:none;width:clamp(170px,15.6vw,250px);scroll-snap-align:start}
.rc-btn{position:relative;display:block;width:100%;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:#1a1916}
.rc-v{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.rc-btn:hover .rc-v{transform:scale(1.04)}
.rc-play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.rc-play svg{width:40px;height:40px;fill:none;stroke:#fff;stroke-width:2;filter:drop-shadow(0 1px 6px rgba(0,0,0,.35))}
.rc-play path{fill:#fff;stroke:none}
.rc-btn:focus-visible{outline-offset:-4px}
.seen-arrow{display:grid;place-items:center;color:var(--ink);transition:opacity .25s}
.seen-arrow svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.seen-arrow:disabled{opacity:.18;cursor:default}
@media (max-width:760px){
  .seen-circles{justify-content:flex-start;gap:10px}
  .sc{width:72px;height:72px}
  .seen-feed{grid-template-columns:minmax(0,1fr);padding-inline:0}
  .seen-arrow{display:none}
  .seen-viewport{scroll-padding-inline:max(var(--gut),env(safe-area-inset-left,0px))}
  .seen-track{padding-inline:max(var(--gut),env(safe-area-inset-left,0px)) max(var(--gut),env(safe-area-inset-right,0px))}
  .rc{width:42vw;max-width:230px}
}

/* reel player (Thomas 27 Oct 22:08): the reel glides from the card or circle you tapped into a phone frame in the centre;
   the page stays behind it, softly faded; arrows only where there is a reel to that side */
.reelplayer{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,44px);padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.rp-backdrop{position:absolute;inset:0;background:rgba(244,243,239,.66);-webkit-backdrop-filter:blur(12px) saturate(1.05);backdrop-filter:blur(12px) saturate(1.05);opacity:0;transition:opacity .45s var(--ease)}
.reelplayer.is-in .rp-backdrop{opacity:1}
.rp-phone{position:relative;z-index:1;flex:none;height:min(86svh,880px);aspect-ratio:9/16;max-width:calc(100vw - 32px);border-radius:30px;overflow:hidden;background:#000;color:#fff;
  box-shadow:0 0 0 7px #101114,0 0 0 8px rgba(255,255,255,.12),0 40px 90px -30px rgba(24,32,43,.55);will-change:transform}
.rp-v{width:100%;height:100%;object-fit:cover;background:#000}
.rp-bar{position:absolute;left:14px;right:14px;top:12px;height:2px;background:rgba(255,255,255,.32);border-radius:2px;overflow:hidden}
.rp-bar span{display:block;height:100%;width:100%;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.rp-close{position:absolute;left:10px;top:22px;width:44px;height:44px;display:grid;place-items:center}
.rp-close svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 1px 4px rgba(0,0,0,.4))}
.rp-side{position:absolute;right:10px;bottom:86px;display:flex;flex-direction:column;gap:12px}
.rp-btn{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:rgba(0,0,0,.28);transition:background .2s}
.rp-btn:hover{background:rgba(0,0,0,.45)}
.rp-btn svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#rpSound .on{display:none}#rpSound[aria-pressed="true"] .on{display:block}#rpSound[aria-pressed="true"] .off{display:none}
.rp-unmute{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(0,0,0,.5);font:500 14px/1 var(--b);white-space:nowrap}
.rp-unmute svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rp-cap{position:absolute;left:0;right:64px;bottom:0;padding:40px 18px 20px;background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0));font-size:14px;line-height:1.4;display:flex;flex-direction:column;gap:3px;pointer-events:none}
.rp-cap b{font-weight:600}
.rp-arrow{position:relative;z-index:1;flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink);box-shadow:0 8px 24px -8px rgba(24,32,43,.35);transition:opacity .3s,transform .2s}
.rp-arrow:hover{transform:scale(1.06)}
.rp-arrow svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rp-arrow.is-none{visibility:hidden}
.reelplayer:not(.is-in) .rp-arrow{opacity:0}
@media (max-width:760px){
  .reelplayer{gap:0}
  .rp-phone{height:min(88svh,calc((100vw - 32px) * 16 / 9))}
  .rp-arrow{position:absolute;top:50%;margin-top:-22px;width:44px;height:44px;z-index:2;background:rgba(255,255,255,.92)}
  #rpPrev{left:max(6px,env(safe-area-inset-left,0px))}#rpNext{right:max(6px,env(safe-area-inset-right,0px))}
}
@media (prefers-reduced-motion:reduce){.rp-backdrop,.rp-arrow{transition:none}}
body.reel-open{overflow:hidden}

/* What Our Clients Say (Thomas 27 Oct): three rows of cards looping in turn left, right, left (50 s, 40 s, 60 s),
   edges fade out, a row stops while the pointer or focus is on it; pause button for all (WCAG 2.2.2) */
.voices{position:relative;overflow:hidden;background:var(--paper);padding-block:clamp(88px,11vw,150px);isolation:isolate}
.voices::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 60% at 50% 62%,rgba(176,138,91,.16),rgba(176,138,91,0) 70%)}
.voices-head{text-align:center}
.voices-head .sub{margin-inline:auto;max-width:56ch}
.voices-rows{max-width:1152px;margin:clamp(40px,5vw,60px) auto 0;display:flex;flex-direction:column;gap:32px}
/* 28 Oct: edges fade with two paper-coloured overlays, not mask-image (an animated track inside a CSS mask blanks or flickers in iPhone Safari);
   the track is its own GPU layer (translate3d, will-change) and the row clips and contains its paint */
.vrow{position:relative;overflow:hidden;contain:paint}
.vrow::before,.vrow::after{content:"";position:absolute;top:0;bottom:0;width:10%;z-index:1;pointer-events:none}
.vrow::before{left:0;background:linear-gradient(90deg,var(--paper),rgba(244,243,239,0))}
.vrow::after{right:0;background:linear-gradient(270deg,var(--paper),rgba(244,243,239,0))}
.vtrack{display:flex;width:max-content;animation:vscroll var(--dur,50s) linear infinite;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.vrow[data-dir="right"] .vtrack{animation-name:vscroll-r}
.vrow:hover .vtrack,.vrow:focus-within .vtrack,.voices.is-paused .vtrack,.voices.is-off .vtrack{animation-play-state:paused}
@keyframes vscroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes vscroll-r{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.vset{list-style:none;display:flex;align-items:stretch;gap:32px;padding-inline:16px}
/* 28 Oct (Website 11): fixed card width. Safari sizes a flex row inside width:max-content by each card's unwrapped text, not its flex-basis:
   the set measured 8,840 px for 8 cards (2,368 px in Chrome), so most of each loop was empty and the rows went blank on iPhone. */
.vcard{flex:0 0 auto;width:384px;display:flex;flex-direction:column;gap:14px;padding:24px;background:#fff;border-radius:8px;box-shadow:0 10px 15px -3px rgba(24,32,43,.08),0 4px 6px -4px rgba(24,32,43,.06)}
.vstars{color:var(--brass);letter-spacing:2px;font-size:14px;line-height:1}
.vq{font-size:17px;line-height:1.55;color:var(--ink-2)}
.vby{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:6px}
.vav{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#ece8df;color:var(--ink-2);font:600 15px/1 var(--b);letter-spacing:.02em}
.vwho{display:flex;flex-direction:column;gap:2px;min-width:0}
.vwho b{font-weight:600;font-size:15px;line-height:1.3}
.vwho small{font-size:13px;color:var(--mute);line-height:1.3}
.voices-foot{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:36px;font-size:14px;color:var(--mute)}
.voices .pause{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
@media (max-width:760px){
  .voices-rows{gap:20px}
  .vset{gap:16px;padding-inline:8px}
  .vcard{width:280px;padding:20px;box-shadow:0 6px 14px -6px rgba(24,32,43,.12)}
  .vq{font-size:16px}
  .vrow::before,.vrow::after{width:8%}
}
@media (prefers-reduced-motion:reduce){
  .vtrack,.vrow[data-dir="right"] .vtrack{animation:none}
  .vrow{overflow-x:auto;contain:none;scrollbar-width:thin}
  .vrow::before,.vrow::after{display:none}
  .vset[aria-hidden="true"]{display:none}
  .voices .pause{display:none}
}