/* J.P. Nagar Physio · desktop site
   The same world as the mobile app: the logo's navy for actions, the logo's cyan for small marks, cool neutrals,
   Figtree, the glass dock, the body map and the printed ticket. Laid out for a desk: a 12-column frame,
   a desktop type scale, hover, keyboard and print states. Stands alone; it does not load the mobile CSS. */
/* Figtree, served from this site (one variable file for every weight; latin first, extended latin only if a page needs it) */
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url("../canon/fonts/figtree-latin-v9.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url("../canon/fonts/figtree-latin-ext-v9.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}


:root{
  --canvas:#FFFFFF;--surface:#F3F4F7;--line:#E2E4EA;--line-2:#C9CCD6;
  --ink:#141629;--ink-2:#565A6E;--ink-3:#666A7D;
  --act:#2B3192;--act-press:#1F2470;--act-soft:#ECEDF8;
  --sky:#00A8EC;--sky-soft:#E6F6FD;--sky-ink:#0070A8;
  --err:#B42318;
  --shadow:0 1px 2px rgba(20,22,41,.06),0 12px 28px -14px rgba(20,22,41,.28);
  --shadow-lift:0 2px 4px rgba(20,22,41,.06),0 26px 50px -22px rgba(20,22,41,.36);
  --ease:cubic-bezier(.16,1,.3,1);
  /* frame: up to 1360px of content, gutters that grow with the window */
  --max:1360px;--gutter:clamp(24px,4vw,64px);--section:clamp(96px,8.5vw,136px);
  /* type: one family, five roles */
  --fs-display:clamp(3.5rem,2.2rem + 3.2vw,5.5rem);
  --fs-h1:clamp(2.75rem,1.6rem + 2.2vw,4rem);
  --fs-h2:clamp(2rem,1.25rem + 1.35vw,2.75rem);
  --fs-h3:1.375rem;
  --fs-lead:1.25rem;
  --fs-body:1.0625rem;
  --fs-small:.9375rem;
  --fs-meta:.8125rem;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;scrollbar-gutter:stable;scroll-behavior:smooth}
html.locked{overflow:hidden}
body{font:400 var(--fs-body)/1.55 "Figtree",-apple-system,system-ui,sans-serif;color:var(--ink);background:var(--canvas);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;caret-color:var(--act);min-height:100vh}
body.tint{background:var(--surface)}
main{overflow-x:clip}
::selection{background:var(--act-soft);color:var(--act-press)}
::placeholder{color:var(--ink-3);opacity:1}
img,svg{display:block}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--act);outline-offset:3px;border-radius:10px}
[hidden]{display:none!important}
h1,h2,h3{font-weight:800;line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
p,li{text-wrap:pretty}
i[data-icon]{display:inline-grid;place-items:center;font-style:normal;flex:none}
.wrap{width:100%;max-width:calc(var(--max) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.sec{margin-top:var(--section)}

/* ---------- type roles ---------- */
.display{font-size:var(--fs-display);line-height:.98;letter-spacing:-.04em}
.h1{font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.035em}
.h2{font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.03em}
.h3{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.015em;font-weight:750}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ink-2);max-width:42ch}
.muted{color:var(--ink-2)}
.nw{white-space:nowrap}
.skiplink{position:fixed;left:16px;top:12px;z-index:200;padding:12px 16px;border-radius:12px;background:var(--ink);color:#fff;font-weight:700;transform:translateY(-180%);transition:transform .25s var(--ease)}
.skiplink:focus{transform:none}
main:focus{outline:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 28px;border:0;border-radius:16px;
  font:700 var(--fs-body)/1 "Figtree",sans-serif;white-space:nowrap;cursor:pointer;
  transition:background .2s,color .2s,box-shadow .2s,transform .2s var(--ease)}
.btn svg{width:20px;height:20px}
.btn:active{transform:scale(.98)}
.btn--act{background:var(--act);color:#fff;box-shadow:0 12px 24px -14px rgba(43,49,146,.75)}
.btn--act:hover{background:var(--act-press)}
.btn .arrow svg{transition:transform .3s var(--ease)}
.btn:hover .arrow svg{transform:translateX(4px)}
.btn--ghost{background:var(--surface);color:var(--ink)}
.btn--ghost:hover{background:#E7E9EF}
.btn--line{background:var(--canvas);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--line:hover{box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.btn--sm{height:44px;padding:0 18px;border-radius:12px;font-size:var(--fs-small)}
.btn--sm svg{width:18px;height:18px}
.btn--lg{height:60px;padding:0 30px}
.btn--block{width:100%}
.btn.is-busy{pointer-events:none;opacity:.85}
.btn.is-busy::after{content:"";width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.link{display:inline-flex;align-items:center;gap:2px;font-weight:700;color:var(--sky-ink);text-underline-offset:4px;text-decoration-thickness:1.5px}
.link:hover{text-decoration-line:underline}
button.link{border:0;background:none;padding:0;font-size:var(--fs-body)}
.link svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.link:hover svg{transform:translateX(3px)}
.iconbtn{width:44px;height:44px;border:0;border-radius:14px;background:var(--surface);display:grid;place-items:center;color:var(--ink);transition:background .2s}
.iconbtn:hover{background:#E7E9EF}
.iconbtn svg{width:20px;height:20px}

/* photo placeholders, marked until the clinic's new photos arrive */
.photo{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 20% 15%,#D9D3CF 0%,transparent 60%),linear-gradient(160deg,#C8C0BB,#9E9490)}
.photo[data-label]::after{content:attr(data-label);position:absolute;right:14px;top:14px;font-size:12px;font-weight:600;letter-spacing:.01em;
  color:#fff;background:rgba(24,20,26,.45);padding:5px 10px;border-radius:999px}

/* small shared pieces */
.live{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-small);font-weight:600;white-space:nowrap}
.live i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--sky)}
.live.closed i{background:var(--line-2)}
/* only the status people read first beats; the rest stay still. The beat is a ring that grows and fades on its
   own layer, so it never makes the page repaint */
.hd .live:not(.closed) i,.qb-status .live:not(.closed) i{position:relative}
/* a few beats, then still: nothing keeps running once the header has scrolled away */
.hd .live:not(.closed) i::after,.qb-status .live:not(.closed) i::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:rgba(0,168,236,.55);animation:beat 2.4s 4;opacity:0;pointer-events:none}
@keyframes beat{0%{transform:scale(1);opacity:1}70%,100%{transform:scale(3);opacity:0}}
.deg{display:flex;flex-wrap:wrap;gap:6px}
.deg em{font-style:normal;font-size:var(--fs-meta);font-weight:750;letter-spacing:.01em;padding:5px 9px;border-radius:8px;background:var(--sky-soft);color:var(--sky-ink);cursor:help}
.stars{display:flex;gap:1px;color:var(--ink)}
.stars svg{width:17px;height:17px}
.ticks{display:grid;gap:10px}
.ticks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start}
.ticks svg{width:22px;height:22px;color:var(--sky);margin-top:1px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{height:40px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--canvas);font-size:var(--fs-small);font-weight:600;transition:border-color .2s,background .2s,color .2s}
.pill:hover{border-color:var(--ink-3)}
.pill[aria-pressed="true"]{border-color:var(--act);background:var(--sky-soft);color:var(--act)}
.seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:14px;background:var(--surface)}
.seg button{border:0;background:none;border-radius:10px;padding:9px 18px;font-weight:700;font-size:var(--fs-small);color:var(--ink-2);white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
.seg button:hover{color:var(--ink)}
.seg button[aria-checked="true"]{background:var(--canvas);color:var(--ink);box-shadow:0 2px 8px -3px rgba(20,22,41,.25)}
.seg button:disabled{opacity:.45;cursor:not-allowed}

/* tooltips: degree names, closed days */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;z-index:6;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);
  padding:7px 10px;border-radius:9px;background:var(--ink);color:#fff;font:600 13px/1.3 "Figtree",sans-serif;letter-spacing:0;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .25s var(--ease)}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0)}

/* columns split by hairlines, not boxes */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line)}
.cols--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cols li{display:grid;align-content:start;gap:8px;padding:32px 28px 36px 0}
.cols li + li{padding-left:28px;border-left:1px solid var(--line)}
.cols i{justify-self:start;color:var(--sky);margin-bottom:8px}
.cols svg{width:30px;height:30px}
.cols b{font-size:1.1875rem;font-weight:750;letter-spacing:-.01em;line-height:1.25}
.cols span{color:var(--ink-2);font-size:var(--fs-small)}
.cols .draw path,.cols .draw circle{stroke-dasharray:60;stroke-dashoffset:0}
.motion .cols .draw path,.motion .cols .draw circle{stroke-dashoffset:60;transition:stroke-dashoffset .9s var(--ease)}
.motion .cols.in .draw path,.motion .cols.in .draw circle{stroke-dashoffset:0}
.motion .cols.in li:nth-child(2) .draw *{transition-delay:.15s}
.motion .cols.in li:nth-child(3) .draw *{transition-delay:.3s}
.motion .cols.in li:nth-child(4) .draw *{transition-delay:.45s}

/* ---------- header ---------- */
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:108px}
.hd-logo{display:block;margin-left:-10px;border-radius:12px}
.hd-logo img{height:78px;width:auto}
.hd-right{display:flex;align-items:center;gap:6px}
.hd-sep{width:1px;height:28px;background:var(--line-2);margin:0 12px}
.hd-call{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:12px;font-weight:700;font-variant-numeric:tabular-nums;transition:background .2s}
.hd-call:hover{background:var(--surface)}
.hd-call svg{width:19px;height:19px;color:var(--ink-2)}
.tint .hd-call:hover,.tint .hd .btn--ghost{background:var(--canvas)}
.tint .hd .btn--ghost:hover{background:#fff;box-shadow:inset 0 0 0 1.5px var(--line)}

/* ---------- dock: five equal items, a quiet indicator; icons swell toward the pointer ---------- */
.dock{position:fixed;left:50%;bottom:18px;z-index:40;transform:translateX(-50%);display:grid;grid-template-columns:repeat(5,86px);padding:6px;border-radius:28px;isolation:isolate;
  background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.8);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(20,22,41,.07),0 22px 44px -18px rgba(20,22,41,.45);
  backdrop-filter:blur(22px) saturate(1.8);-webkit-backdrop-filter:blur(22px) saturate(1.8)}
.dock a{position:relative;height:62px;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--ink-3);font-size:.78rem;font-weight:650;transition:color .25s}
.dock a:hover{color:var(--ink)}
.dock a[aria-current="page"]{color:var(--act)}
.dock svg{width:24px;height:24px;transform-origin:50% 90%;transition:transform .2s var(--ease)}
.dock a:active svg{transform:scale(.88)!important}
.dock .ind{position:absolute;z-index:-1;top:6px;left:6px;height:62px;border-radius:22px;background:rgba(43,49,146,.07);transition:transform .45s var(--ease)}
.dock .ind::before{content:"";position:absolute;top:-6px;left:50%;width:28px;height:3px;margin-left:-14px;border-radius:0 0 3px 3px;background:var(--sky)}

/* call and WhatsApp: appear once the header scrolls away, and show the number on hover */
.fab{position:fixed;right:24px;bottom:24px;z-index:39;display:grid;gap:10px;justify-items:end;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.fab.show{opacity:1;transform:none;pointer-events:auto}
/* round buttons; the label slides out beside them on hover (transform and opacity only). No frosted backdrop: under
   a parent that fades in and out, Safari re-renders it and the buttons glitch */
.fab a{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
  font-weight:700;font-size:var(--fs-small);white-space:nowrap}
.fab a svg{width:22px;height:22px;flex:none}
.fab a span{position:absolute;right:calc(100% + 10px);top:50%;padding:9px 14px;border-radius:999px;background:#fff;box-shadow:var(--shadow);
  opacity:0;transform:translate(10px,-50%);pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}
.fab a:hover span,.fab a:focus-visible span{opacity:1;transform:translate(0,-50%)}

.toast{position:fixed;left:50%;bottom:112px;z-index:80;transform:translate(-50%,12px);opacity:0;pointer-events:none;background:var(--ink);color:#fff;
  font-size:var(--fs-small);font-weight:600;padding:12px 16px;border-radius:12px;box-shadow:0 12px 30px -12px rgba(20,22,41,.5);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- footer ---------- */
.ft{margin-top:var(--section);padding:72px 0 136px;background:var(--surface)}
.tint .ft{background:var(--canvas)}
.ft-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:48px}
.ft-brand img{height:88px;width:auto;margin:-8px 0 14px -10px}
.ft-brand p{color:var(--ink-2);font-size:var(--fs-small);max-width:32ch}
.ft-contact{display:grid;gap:4px;margin-top:18px;font-weight:700;font-size:var(--fs-small)}
.ft a:hover{color:var(--act)}
.ft-br h3{font-size:var(--fs-body);font-weight:750;letter-spacing:-.01em;margin-bottom:10px}
.ft-br address{font-style:normal;font-size:var(--fs-small);color:var(--ink-2);line-height:1.5}
.ft-br p{font-size:var(--fs-small);margin-top:10px}
.ft-br .row{display:flex;gap:16px;margin-top:10px;font-size:var(--fs-small);font-weight:700}
.ft-svcs{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:56px;padding-top:28px;border-top:1px solid var(--line);font-size:var(--fs-small);font-weight:600;color:var(--ink-2)}
.ft-base{display:flex;justify-content:space-between;gap:24px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line);font-size:var(--fs-meta);color:var(--ink-2)}
.ft--slim{padding:8px 0 128px}
.ft--slim .ft-base{margin-top:0}

/* ---------- side drawer (profiles) ---------- */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(20,22,41,.34);opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.scrim.is-open{opacity:1;pointer-events:auto}
.drawer{position:fixed;z-index:61;top:12px;right:12px;bottom:12px;width:min(540px,calc(100vw - 24px));display:flex;flex-direction:column;overflow:hidden;border-radius:30px;
  background:rgba(255,255,255,.95);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);
  box-shadow:0 0 0 1px rgba(20,22,41,.06),0 40px 80px -30px rgba(20,22,41,.55);
  transform:translateX(calc(100% + 24px));visibility:hidden;transition:transform .6s var(--ease),visibility 0s .6s}
.drawer.is-open{transform:none;visibility:visible;transition:transform .6s var(--ease),visibility 0s}
.drawer-bar{flex:none;display:flex;justify-content:flex-end;padding:18px 18px 0}
.drawer-body{flex:1;overflow:auto;overscroll-behavior:contain;padding:0 36px 36px}
.pf + .pf{margin-top:36px;padding-top:36px;border-top:1px solid var(--line)}
.pf-who{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;align-items:center}
.pf-who .photo{height:150px;border-radius:20px}
.pf h2{font-size:1.75rem;letter-spacing:-.025em}
.pf .role{color:var(--ink-2);margin-top:6px;font-size:var(--fs-small)}
.pf .deg{margin-top:12px}
.pf h3{font-size:var(--fs-body);font-weight:750;letter-spacing:-.01em;margin:28px 0 12px}
.pf .ticks{font-size:var(--fs-small)}
.pf .btn{margin-top:28px}

/* ---------- photo viewer ---------- */
.viewer{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:rgba(10,11,22,.9);opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.viewer.is-open{opacity:1;pointer-events:auto}
/* the photo fits the window both ways, leaving room above for the count and below for the hint */
.viewer .frame{width:min(76vw,720px,calc((100vh - 180px) * .7895));width:min(76vw,720px,calc((100dvh - 180px) * .7895));aspect-ratio:15/19;border-radius:28px;transform:scale(.94);transition:transform .5s var(--ease)}
.viewer.is-open .frame{transform:none}
.viewer .count{position:absolute;top:30px;left:0;right:0;text-align:center;color:rgba(255,255,255,.75);font-size:var(--fs-small);font-weight:600;font-variant-numeric:tabular-nums}
.viewer .keys{position:absolute;bottom:30px;left:0;right:0;text-align:center;color:rgba(255,255,255,.6);font-size:var(--fs-meta)}
.viewer button{position:absolute;width:52px;height:52px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;transition:background .2s}
.viewer button:hover{background:rgba(255,255,255,.26)}
.viewer button svg{width:22px;height:22px}
.viewer .close{top:20px;right:24px}
.viewer > button{margin:0}
.viewer .prev{left:28px;top:calc(50% - 26px)}
.viewer .next{right:28px;top:calc(50% - 26px)}
.viewer .prev svg{transform:rotate(180deg)}

/* ---------- day picker (shared by the home bar and booking) ---------- */
.cal-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.cal-head b{font-size:var(--fs-body);font-weight:750}
.cal-head small{color:var(--ink-2);font-size:var(--fs-meta);font-weight:600}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal .dow{text-align:center;font-size:var(--fs-meta);font-weight:700;color:var(--ink-3);padding:2px 0 6px}
.cal button{position:relative;aspect-ratio:1;display:grid;place-items:center;border:0;border-radius:12px;background:none;font-weight:700;font-variant-numeric:tabular-nums;transition:background .15s,color .15s}
/* hover only lightens a day that isn't picked: the picked day keeps its fill (white text on grey was unreadable) */
.cal button:hover:not(:disabled):not([aria-pressed="true"]){background:var(--surface)}
.cal button.today::before{content:"";position:absolute;bottom:5px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--sky)}
.cal button[aria-pressed="true"]{background:var(--act);color:#fff}
.cal button[aria-pressed="true"].today::before{background:#fff}
.cal button:disabled{color:#B5B9C6;cursor:not-allowed}
.cal button.sun:disabled{text-decoration:line-through}

/* ======================================================================
   HOME
   ====================================================================== */
.hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,4vw,64px);align-items:stretch;
  min-height:min(720px,calc(100vh - 150px));padding:clamp(32px,3.2vw,56px) clamp(36px,4vw,64px);border-radius:40px;
  background:radial-gradient(42% 60% at 14% 6%,rgba(0,168,236,.12),rgba(0,168,236,0) 100%),var(--surface)}
.hero-copy{display:flex;flex-direction:column;justify-content:center;min-width:0}
.hero .lead{margin-top:22px;max-width:560px}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
/* short laptop screens: the hero tightens so the booking bar and its times clear the dock */
@media (min-width:1025px) and (max-height:820px){
  .hero{padding-block:clamp(22px,3.6vh,40px)}
  .hero .display{font-size:clamp(3rem,7.6vh,5.5rem)}
  .hero .lead{margin-top:14px}
  .qb{margin-top:clamp(18px,3.2vh,40px)}
}

/* the booking bar: branch, day, then the next free times */
.qb{position:relative;z-index:5;margin-top:40px;max-width:680px;border-radius:24px;background:var(--canvas);box-shadow:0 0 0 1px rgba(20,22,41,.05),0 30px 60px -34px rgba(20,22,41,.42)}
.qb-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr) auto;align-items:center;gap:6px;padding:8px}
.qb-sep{height:40px;background:var(--line)}
.qb-seg{position:relative;display:grid;gap:3px;min-width:0;text-align:left;padding:12px 44px 12px 18px;border:0;border-radius:16px;background:none;transition:background .2s}
.qb-seg:hover,.qb-seg[aria-expanded="true"]{background:var(--surface)}
.qb-seg small{font-size:var(--fs-meta);font-weight:700;color:var(--ink-2)}
.qb-seg b{font-size:1.125rem;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qb-seg i{position:absolute;right:16px;top:50%;margin-top:-9px;color:var(--ink-3)}
.qb-seg svg{width:18px;height:18px;transform:rotate(90deg);transition:transform .3s var(--ease)}
.qb-seg[aria-expanded="true"] svg{transform:rotate(-90deg)}
.qb-row .btn{margin-left:4px;min-width:196px}
.qb-foot{padding:14px 18px 18px;border-top:1px solid var(--line)}
.qb-status{display:flex;justify-content:space-between;align-items:center;gap:16px}
.qb-status .live{font-weight:600;color:var(--ink)}
.qb-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tchip{height:44px;padding:0 15px;border-radius:12px;border:1.5px solid var(--line);background:var(--canvas);font-weight:700;font-variant-numeric:tabular-nums;transition:border-color .2s,background .2s,color .2s}
.tchip:hover{border-color:var(--ink-3)}
.tchip[aria-checked="true"]{background:var(--act);border-color:var(--act);color:#fff}
.qb-none{padding:10px 0 2px;color:var(--ink-2);font-size:var(--fs-small)}
.qb-none button{border:0;background:none;padding:0;font-weight:700;color:var(--sky-ink);text-decoration:underline;text-underline-offset:3px}
.pop{position:absolute;z-index:30;top:calc(100% + 2px);left:8px;width:380px;padding:8px;border-radius:22px;background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 0 0 1px rgba(20,22,41,.07),0 28px 56px -20px rgba(20,22,41,.4);
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:20% 0;visibility:hidden;transition:opacity .2s,transform .3s var(--ease),visibility 0s .3s}
.pop.is-open{opacity:1;transform:none;visibility:visible;transition:opacity .2s,transform .3s var(--ease),visibility 0s}
.pop--day{width:360px;padding:18px}
.pop.up{top:auto;bottom:calc(100% + 2px);transform-origin:20% 100%}
.opt{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 16px;width:100%;text-align:left;padding:13px 16px;border:0;border-radius:14px;background:none;transition:background .15s}
.opt:hover,.opt:focus-visible{background:var(--surface)}
.opt b{font-size:var(--fs-body);font-weight:750}
.opt .live{font-size:var(--fs-small);font-weight:500;color:var(--ink-2)}
.opt .km{grid-row:1 / span 2;grid-column:2;display:flex;align-items:center;gap:8px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.opt .km svg{width:20px;height:20px;color:var(--act);opacity:0}
.opt[aria-selected="true"] b{color:var(--act)}
.opt[aria-selected="true"] .km svg{opacity:1}

.trust{display:flex;flex-wrap:wrap;align-items:center;gap:14px 0;margin-top:36px;font-size:var(--fs-small);color:var(--ink-2)}
.trust > *{display:flex;align-items:center;gap:10px;padding-right:18px;margin-right:18px;border-right:1px solid var(--line-2)}
.trust > *:last-child{border:0;margin:0;padding:0}
.trust b{color:var(--ink)}
@media (max-width:1400px){.trust > :nth-child(3){display:none}.trust > :nth-child(2){border:0;margin:0;padding:0}}

.hero-art{position:relative;min-height:480px;border-radius:30px;overflow:hidden;isolation:isolate;clip-path:inset(0 round 30px)}
.hero-art > .photo{position:absolute;inset:0}
.motion .hero-art > .photo{animation:settle 1.6s var(--ease) both}
@keyframes settle{from{transform:scale(1.07)}}

/* first visit: three steps in a row, the line draws through them */
.visit{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(40px,5vw,96px);align-items:start}
.visit .lead{margin-top:16px}
.visit .btn{margin-top:32px}
.hsteps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding-top:6px;counter-reset:s}
.hsteps::before,.hsteps::after{content:"";position:absolute;top:33px;left:28px;right:calc((100% - 80px) / 3 - 28px);height:2px;border-radius:2px;background:var(--sky-soft)}
.hsteps::after{background:var(--sky);transform-origin:left}
.motion .hsteps::after{transform:scaleX(0);transition:transform 1.4s var(--ease) .2s}
.motion .hsteps.in::after{transform:scaleX(1)}
.hsteps li{position:relative;z-index:1;display:grid;align-content:start;gap:8px}
.hsteps li::before{counter-increment:s;content:counter(s);width:56px;height:56px;margin-bottom:16px;border-radius:50%;background:var(--canvas);border:2px solid var(--sky);
  color:var(--sky-ink);display:grid;place-items:center;font-size:1.25rem;font-weight:800}
.hsteps b{font-size:var(--fs-h3);font-weight:750;letter-spacing:-.015em;line-height:1.2}
.hsteps span{color:var(--ink-2)}

/* why patients choose us */
.why-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:48px}
.rating{display:grid;justify-items:end;gap:4px;text-align:right}
.rating .stars svg{width:22px;height:22px}
.rating p{color:var(--ink-2)}
.rating p b{font-size:1.5rem;color:var(--ink);letter-spacing:-.02em;margin-right:6px}
.rating small{font-size:var(--fs-meta);color:var(--ink-2)}
.motion .rating .stars i{opacity:.15;transform:scale(.6);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.motion .rating.in .stars i{opacity:1;transform:none}
.motion .rating.in .stars i:nth-child(2){transition-delay:.08s}
.motion .rating.in .stars i:nth-child(3){transition-delay:.16s}
.motion .rating.in .stars i:nth-child(4){transition-delay:.24s}
.motion .rating.in .stars i:nth-child(5){transition-delay:.32s}
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px}
.review{display:flex;flex-direction:column;gap:28px;padding:32px;border-radius:26px;background:var(--surface)}
.review p{font-size:1.1875rem;line-height:1.5;font-weight:500}
.review footer{display:flex;align-items:center;gap:12px;margin-top:auto;font-size:var(--fs-small);color:var(--ink-2)}
.review footer i{width:36px;height:36px;border-radius:50%;background:var(--sky-soft);color:var(--sky-ink);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:var(--fs-small)}

/* gallery: photos on a gentle convex arc; the glow behind takes the colour of the photo in front */
.gal-head{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
/* each card carries its own perspective() (carousel.js, from --gcar-persp), centred where the box's would be: Safari
   doesn't pass a parent's perspective through to the cards and drew the arc flat */
.gcar{position:relative;height:540px;margin-top:8px;--gcar-persp:1500px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
/* one still periwinkle glow behind the cards; it spills past them and fades to nothing, so it has no edge */
.gcar-glow{position:absolute;inset:-180px -12% -160px;pointer-events:none;z-index:0}
.gcar-glow i{position:absolute;inset:0;opacity:0;transition:opacity 1.6s cubic-bezier(.45,0,.55,1) .5s;
  background:
    radial-gradient(34% 40% at 50% 50%,color-mix(in srgb,var(--a,#00A8EC) 52%,transparent),transparent 100%),
    radial-gradient(34% 46% at 26% 56%,color-mix(in srgb,var(--a,#00A8EC) 30%,transparent),transparent 100%),
    radial-gradient(34% 44% at 74% 44%,color-mix(in srgb,var(--a,#00A8EC) 26%,transparent),transparent 100%),
    radial-gradient(58% 56% at 50% 52%,color-mix(in srgb,var(--a,#00A8EC) 18%,transparent),transparent 100%)}
/* the new colour fades in first; the old one lets go half a second later, so they blend before the change completes */
.gcar-glow i.on{opacity:1;transition-delay:0s}
.gcar-stage{position:absolute;inset:0;z-index:1;cursor:grab}
.gcar-stage.is-dragging{cursor:grabbing}
/* a card is not preserve-3d: opacity and preserve-3d can't both apply (opacity flattens), and Safari then skips the
   fade and snaps to full colour. The stage keeps the arc in 3D; the hover tilt brings its own perspective(). */
.gcar-card{position:absolute;left:50%;top:44%;width:300px;height:380px;padding:0;border:0;background:none;border-radius:26px;transform-origin:0 0;
  transition:transform .85s var(--ease),opacity .85s var(--ease);will-change:transform,opacity;backface-visibility:hidden}
.gcar-card .photo{width:100%;height:100%;border-radius:26px;box-shadow:0 2px 4px rgba(20,22,41,.06),0 30px 50px -26px rgba(20,22,41,.5)}
.gcar-card[data-front]{cursor:zoom-in}
/* side cards carry no label; only the photo in front names itself */
.gcar-card .photo::after{transition:opacity .4s var(--ease)}
.gcar-card:not([data-front]) .photo::after{opacity:0}
.gcar-card[data-front] .photo{box-shadow:0 2px 4px rgba(20,22,41,.06),0 40px 70px -30px rgba(20,22,41,.55)}
.gcar > .gcar-btn{position:absolute;top:44%;z-index:31;margin:0;width:58px;height:58px;border:0;border-radius:50%;display:grid;place-items:center;color:var(--ink);
  background:rgba(255,255,255,.82);box-shadow:0 0 0 1px rgba(20,22,41,.06),0 16px 34px -14px rgba(20,22,41,.5);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);transform:translateY(-50%);transition:transform .3s var(--ease),background .2s}
.gcar-btn:hover{background:#fff;transform:translateY(-50%) scale(1.07)}
.gcar-btn:active{transform:translateY(-50%) scale(.95)}
.gcar-btn svg{width:22px;height:22px}
.gcar-btn.prev{left:calc(50% - 205px)}
.gcar-btn.prev svg{transform:rotate(180deg)}
.gcar-btn.next{right:calc(50% - 205px)}
.gcar-btn.next:hover svg{transform:translateX(2px)}
.gcar-btn.prev:hover svg{transform:rotate(180deg) translateX(2px)}
.gcar-btn svg{transition:transform .3s var(--ease)}
.gcar-cap{position:absolute;z-index:2;left:0;right:0;bottom:22px;display:flex;justify-content:center;align-items:baseline;gap:12px;font-size:var(--fs-small)}
.gcar-cap b{font-weight:750}
.gcar-cap span{color:var(--ink-3);font-variant-numeric:tabular-nums}
.gcar-cap.swap{animation:capin .6s var(--ease)}
@keyframes capin{from{opacity:0;transform:translateY(6px)}}

/* ready when you are */
.ready{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding:clamp(40px,4vw,64px);border-radius:40px;background:var(--surface)}
.ready .lead{margin-top:14px}
.ready .btn{margin-top:32px}
.ready-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ready-list li{display:grid;align-content:start;gap:6px;padding:6px 26px}
.ready-list li + li{border-left:1px solid var(--line-2)}
.ready-list b{font-size:1.1875rem;font-weight:750;letter-spacing:-.01em}
.ready-list .live{display:flex;align-items:flex-start;white-space:normal}
.ready-list .live > span{min-width:0}
.ready-list .live i{margin-top:.45em}
.ready-list .wk{display:block}
.ready-list span{color:var(--ink-2);font-size:var(--fs-small)}
.ready-list .link{margin-top:10px}

/* page heads (services, branches, team) */
.ptop{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding:12px 0 52px}
.ptop .lead{margin-top:16px}

/* ======================================================================
   BOOKING: four steps on the left, the ticket fills in on the right
   ====================================================================== */
.btop{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding:8px 0 36px}
.btop .lead{margin-top:12px}
.btop-help{display:grid;justify-items:end;gap:2px;text-align:right;font-size:var(--fs-small);color:var(--ink-2)}
.btop-help a{font-weight:750;color:var(--ink);font-size:var(--fs-body);font-variant-numeric:tabular-nums}
.btop-help a:hover{color:var(--act)}
.book{display:grid;grid-template-columns:minmax(0,1fr) clamp(360px,30vw,420px);gap:clamp(28px,3vw,40px);align-items:start}
.bstep{container-type:inline-size;padding:36px 40px 40px;border-radius:28px;background:var(--canvas);box-shadow:0 1px 2px rgba(20,22,41,.04);scroll-margin-top:24px}
.bstep + .bstep{margin-top:20px}
.bstep-h{display:flex;align-items:center;gap:16px;margin-bottom:30px}
.bstep-h .n{flex:none;width:40px;height:40px;border-radius:50%;border:2px solid var(--sky);display:grid;place-items:center;color:var(--sky-ink);font-weight:800;transition:background .3s,color .3s}
.bstep.is-done .n{background:var(--sky-ink);border-color:var(--sky-ink);color:#fff}
.bstep-h h2 .opt-tag{display:inline-block;vertical-align:middle;margin-left:8px;padding:3px 9px;border-radius:8px;background:var(--surface);color:var(--ink-2);font-size:.8125rem;font-weight:700;letter-spacing:0}
.bstep-h h2{font-size:1.75rem;letter-spacing:-.025em;line-height:1.15}
.bstep-h p{color:var(--ink-2);font-size:var(--fs-small);margin-top:3px}
.bstep-h .end{margin-left:auto}
.bstep.attn{animation:attn 1.4s var(--ease)}
@keyframes attn{25%{box-shadow:0 0 0 3px var(--sky)}}
.sub-h{font-size:var(--fs-body);font-weight:750;letter-spacing:-.01em;margin-bottom:12px}
.sub-h small{font-weight:500;color:var(--ink-2);font-size:var(--fs-small)}

/* step 1: body map */
.where{display:grid;grid-template-columns:auto minmax(0,1fr);gap:44px;align-items:start}
.figs{position:relative;display:flex;gap:24px;padding:0 4px}
.figs::before{content:"";position:absolute;left:50%;top:30px;width:440px;height:440px;margin-left:-220px;border-radius:50%;background:radial-gradient(closest-side,var(--sky-soft),rgba(230,246,253,0));pointer-events:none}
.fig{position:relative;display:grid;justify-items:center;gap:12px}
.fig-stage{position:relative;width:190px;height:380px}
.fig-stage > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:opacity .25s}
.fig-stage.swap > svg{opacity:0}
.fig-side{position:absolute;top:2px;font-size:11px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.fig-side.l{left:-2px}.fig-side.r{right:-2px}
.fig figcaption{text-align:center;font-weight:750}
.fig figcaption small{display:block;font-size:var(--fs-meta);font-weight:600;color:var(--ink-2)}
.hs{position:absolute;z-index:1;width:42px;height:42px;margin:-21px 0 0 -21px;padding:0;border:0;border-radius:50%;background:none;
  -webkit-tap-highlight-color:transparent}
.hs::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--sky);opacity:.5;transition:transform .3s var(--ease),opacity .3s,box-shadow .3s}
.hs::after{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,168,236,.5),rgba(0,168,236,0));transform:scale(0);transition:transform .45s var(--ease);pointer-events:none}
.hs:hover,.hs.hl,.hs:focus-visible{z-index:3}
.hs:hover::before,.hs.hl::before{transform:scale(1.6);opacity:.9}
.hs.on::before{opacity:1;transform:scale(1.7);box-shadow:0 0 0 2px #fff,0 2px 8px rgba(0,112,168,.55)}
.hs.on::after{transform:scale(1)}
.hs.hl::after{transform:scale(1.2)}
.hs.pulse::after{animation:glow .7s var(--ease)}
@keyframes glow{0%{transform:scale(.3)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.hs:focus-visible{outline:2px solid var(--act);outline-offset:-7px}
.hs .tip{position:absolute;left:50%;bottom:calc(100% - 4px);transform:translate(-50%,4px);padding:6px 10px;border-radius:9px;background:var(--ink);color:#fff;
  font-size:13px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .25s var(--ease)}
.hs:hover .tip,.hs:focus-visible .tip,.hs.hl .tip{opacity:1;transform:translate(-50%,0)}
.where-side{display:grid;gap:30px;align-content:start;min-width:0}
.picked{display:flex;flex-wrap:wrap;gap:8px}
.picked button{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 10px 0 14px;border:0;border-radius:999px;background:var(--sky-soft);color:var(--sky-ink);font-weight:700;font-size:var(--fs-small);transition:background .2s}
.picked button:hover{background:#D2EDFA}
.picked button svg{width:16px;height:16px}
.picked .none{color:var(--ink-2);font-size:var(--fs-small);padding:8px 0}
.care{margin-top:14px;font-size:var(--fs-small);color:var(--ink-2)}
.care b{color:var(--ink);font-weight:700}

/* fields */
.field{display:grid;gap:8px;align-content:start}
.field label{font-size:var(--fs-small);font-weight:700}
.field label small{font-weight:500;color:var(--ink-2)}
.input{display:flex;align-items:center;min-height:56px;border-radius:16px;border:1.5px solid var(--line);background:var(--canvas);padding:0 16px;transition:border-color .2s,box-shadow .2s}
.input:hover{border-color:var(--line-2)}
.input:focus-within{border-color:var(--act);box-shadow:0 0 0 4px var(--sky-soft)}
.input input,.input textarea{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:var(--fs-body);color:var(--ink)}
.input textarea{resize:vertical;min-height:104px;padding:14px 0;line-height:1.5}
.input .pre{font-weight:700;color:var(--ink-2);margin-right:10px}
.input > i{color:var(--ink-3);margin-right:10px}
.input > i svg{width:20px;height:20px}
.field.err .input{border-color:var(--err)}
.field.err .input:focus-within{box-shadow:0 0 0 4px #FDECEA}
.field .msg{display:none;font-size:var(--fs-small);font-weight:600;color:var(--err)}
.field.err .msg{display:block}
.starters{margin-top:10px}
.starters .pill{height:34px;padding:0 13px;font-size:var(--fs-meta)}

/* step 2: branch, day, time */
.bropts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bropt{display:grid;gap:5px;align-content:start;min-width:0;text-align:left;padding:18px 20px 20px;border-radius:20px;border:1.5px solid var(--line);background:var(--canvas);transition:border-color .2s,background .2s}
.bropt:hover{border-color:var(--ink-3)}
.bropt[aria-checked="true"]{border-color:var(--act);background:var(--act-soft)}
.bropt-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.bropt b{font-size:var(--fs-body);font-weight:750}
.bropt .km{font-size:var(--fs-small);font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.bropt .live{font-size:var(--fs-small);font-weight:500;color:var(--ink-2);white-space:normal}
.bropt small{font-size:var(--fs-meta);color:var(--ink-2)}
.when{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:44px;margin-top:32px;padding-top:32px;border-top:1px solid var(--line)}
.slot-head{display:grid;justify-items:start;gap:12px}
.slot-head b{font-size:var(--fs-body);font-weight:750}
.slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.slot{height:52px;border-radius:14px;border:1.5px solid var(--line);background:var(--canvas);font-weight:700;font-variant-numeric:tabular-nums;transition:border-color .2s,background .2s,color .2s}
.slot:hover:not(:disabled){border-color:var(--ink-3)}
.slot:disabled{color:var(--ink-3);text-decoration:line-through;background:var(--surface);border-color:transparent;cursor:not-allowed}
.slots .slot[aria-checked="true"]{background:var(--act);border-color:var(--act);color:#fff;animation:press .35s var(--ease)}
@keyframes press{50%{transform:scale(.94)}}
/* a new day's times appear at once (the grid keeps its height, so nothing moves): a wave of buttons fading and sliding
   in gave Safari a layer per button inside the rounded card, which showed as grey and white bars */
.slots .empty{grid-column:1/-1;padding:28px;border-radius:16px;background:var(--surface);color:var(--ink-2);text-align:center;font-size:var(--fs-small)}
.legend{display:flex;gap:18px;margin-top:16px;font-size:var(--fs-meta);color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--line);background:var(--canvas)}
.legend .lg-taken{background:var(--surface);border-color:transparent}
.legend .lg-pick{background:var(--act);border-color:var(--act)}

/* step 3: who */
.docs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.doc{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;text-align:left;padding:12px 12px 16px;border-radius:22px;border:1.5px solid var(--line);background:var(--canvas);
  transition:border-color .2s,background .2s,transform .3s var(--ease)}
.doc:hover{border-color:var(--ink-3);transform:translateY(-2px)}
.doc .ph{display:block;width:100%;aspect-ratio:4/3;border-radius:14px;margin-bottom:10px}
.doc .ph.any{display:flex;align-items:center;justify-content:center;background:var(--surface)}
.doc .ph.any i{width:44px;height:44px;border-radius:50%;border:3px solid var(--surface);margin-left:-14px}
.doc .ph.any i:first-child{margin-left:0}
.doc b{font-size:var(--fs-body);line-height:1.25}
.doc .fit{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:4px 9px 4px 6px;border-radius:999px;background:var(--sky-soft);color:var(--sky-ink);font-size:var(--fs-meta);font-weight:750}
.doc .fit[hidden]{display:none}
.doc .fit svg{width:14px;height:14px}
.doc small{font-size:var(--fs-small);color:var(--ink-2);line-height:1.35}
.doc .deg{margin-top:8px}
.doc .deg em{cursor:inherit}
.doc .tick{position:absolute;top:20px;right:20px;width:28px;height:28px;border-radius:50%;background:var(--act);color:#fff;display:grid;place-items:center;
  transform:scale(0);transition:transform .35s var(--ease);box-shadow:0 4px 10px -4px rgba(43,49,146,.6)}
.doc .tick svg{width:18px;height:18px}
.doc[aria-checked="true"]{border-color:var(--act);background:var(--act-soft)}
.doc[aria-checked="true"] .tick{transform:scale(1)}

/* step 4: details */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px}
.form .full{grid-column:1/-1}
.assure{display:flex;align-items:center;gap:10px;margin-top:24px;font-size:var(--fs-small);color:var(--ink-2)}
.assure svg{width:20px;height:20px;color:var(--sky)}

/* the ticket preview */
.bk-aside{position:sticky;top:20px}
@media (max-height:860px){.bk-aside{max-height:calc(100vh - 40px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}}
.bk-aside-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 6px 10px}
/* the preview is a compact ticket so it always fits beside the steps */
.bk-aside .tk-head{padding:16px 22px 18px}
.bk-aside .tk-day{margin-top:14px}
.bk-aside .tk-time{font-size:60px}
.bk-aside .tk-time em{font-size:22px}
.bk-aside .tk-where{margin-top:12px;padding-top:12px}
.bk-aside .tk-body{padding:16px 22px}
.bk-aside .tk-grid{gap:12px 16px}
.bk-aside .tk-hurt{gap:8px 16px;margin-top:14px;padding:12px 14px}
.bk-aside .tk-figs{gap:10px}
.bk-aside .tk-figs svg{width:40px;height:80px}
.bk-aside .tk-figs figcaption{font-size:11px}
.bk-aside .tk-note{margin-top:12px}
.bk-aside-h h2{font-size:1.25rem;letter-spacing:-.02em}
.bk-aside-h small{color:var(--ink-2);font-size:var(--fs-meta);font-weight:600}
.bk-aside .tk-wrap{margin:0 -14px;padding:0 14px 20px}
.tk .ph-text{color:var(--ink-3);font-weight:600}
.tk-head .ph-text{color:rgba(255,255,255,.82)}
.tk-time.is-empty{font-size:40px;letter-spacing:-.03em;color:rgba(255,255,255,.55);padding:8px 0 6px}
/* the ticket changes without animating: it is drawn with a shadow filter and a notched mask, so anything moving
   inside it (a glow on a changed line, the time rolling in) made Safari redraw the whole ticket every frame, which
   flickered the date and time */
.tk-confirm{padding:16px 22px 18px}
.tk-todo{margin-top:10px;font-size:var(--fs-meta);color:var(--ink-2);text-align:center}
.tk-todo b{color:var(--ink)}

/* ======================================================================
   THE TICKET (preview and printed)
   ====================================================================== */
.tk-wrap{position:relative;z-index:2;overflow:hidden;filter:drop-shadow(0 18px 22px rgba(20,22,41,.18)) drop-shadow(0 2px 3px rgba(20,22,41,.1))}
.tk{--n1:200px;--n2:520px;position:relative;text-align:left;border-radius:24px;background:#fff;overflow:hidden;
  -webkit-mask:
    radial-gradient(circle 13px at 0 var(--n1),#0000 12.5px,#000 13px),
    radial-gradient(circle 13px at 100% var(--n1),#0000 12.5px,#000 13px),
    radial-gradient(circle 13px at 0 var(--n2),#0000 12.5px,#000 13px),
    radial-gradient(circle 13px at 100% var(--n2),#0000 12.5px,#000 13px);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.tk-head{position:relative;padding:18px 24px 20px;color:#fff;
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(0,168,236,.55),rgba(0,168,236,0) 55%),
    radial-gradient(rgba(255,255,255,.09) 1.2px,transparent 1.7px) 0 0/14px 14px,
    linear-gradient(160deg,#2B3192,#1E2378)}
.tk-top{display:flex;justify-content:space-between;align-items:center}
.tk-logo{display:grid;place-items:center;width:62px;height:48px;border-radius:12px;background:#fff;box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
.tk-logo img{height:46px;width:auto}
.tk-id{text-align:right}
.tk-id small{display:block;font-size:12px;font-weight:600;color:rgba(255,255,255,.86)}
.tk-id b{font-size:15px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.tk-id b.ph-text{font-size:14px;letter-spacing:0;font-weight:600}
.tk-day{margin-top:16px;font-size:var(--fs-body);font-weight:600;color:rgba(255,255,255,.9);border-radius:6px}
.tk-time{font-size:72px;font-weight:800;letter-spacing:-.045em;line-height:.95;font-variant-numeric:tabular-nums;border-radius:10px}
.tk-time em{font-style:normal;font-size:26px;letter-spacing:0;margin-left:6px;color:#8EDBFA}
.tk-where{display:flex;gap:10px;align-items:flex-start;margin-top:13px;padding-top:13px;border-top:1px solid rgba(255,255,255,.18)}
.tk-where svg{width:20px;height:20px;color:#8EDBFA;margin-top:2px}
.tk-where b{display:block;font-size:var(--fs-body)}
.tk-where small{font-size:var(--fs-small);color:rgba(255,255,255,.78)}
.tk-perf{height:2px;margin:0 22px;background:repeating-linear-gradient(90deg,#D3D7E2 0 7px,transparent 7px 13px)}
.tk-head + .tk-perf{margin-top:-1px}
.tk-body{padding:18px 24px}
.tk-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 18px}
.tk-grid dt,.tk-label{font-size:12px;font-weight:700;color:var(--ink-2);letter-spacing:.02em}
.tk-grid dd{font-size:var(--fs-body);font-weight:700;margin-top:2px;line-height:1.25;overflow-wrap:anywhere;border-radius:6px}
.tk-hurt{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 18px;margin-top:14px;padding:12px 16px;border-radius:16px;background:var(--surface)}
.tk-hurt.no-figs{grid-template-columns:minmax(0,1fr)}
.tk-hurt .tk-label{grid-column:1/-1}
.tk-figs{display:flex;gap:12px}
.tk-figs figure{display:grid;justify-items:center;gap:4px}
.tk-figs svg{width:42px;height:84px}
.tk-figs figcaption{font-size:12px;font-weight:700;color:var(--ink-2)}
.tk-figs figure.none svg{opacity:.45}
.tk-hurt.no-figs .tk-figs{display:none}
.tk-chips{display:flex;flex-wrap:wrap;gap:6px}
.tk-chips span{font-size:13px;font-weight:700;padding:5px 10px;border-radius:999px;background:#fff;color:var(--sky-ink);box-shadow:0 1px 0 rgba(20,22,41,.06)}
.tk-chips .ph-text{background:none;box-shadow:none;padding:5px 0}
.tk-note{margin-top:14px;padding:2px 0 0 16px;font-size:var(--fs-small);line-height:1.5;color:var(--ink);position:relative;font-style:italic}
.tk-note::before{content:"\201C";position:absolute;left:-3px;top:-10px;font-size:40px;font-style:normal;font-weight:800;color:var(--sky)}
.tk-stub{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:14px 24px 16px}
.tk-bar{width:100%;height:42px;fill:var(--ink)}
.tk-stub p{text-align:right}
.tk-stub span{display:block;font-size:14px;font-weight:800;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.tk-stub small{font-size:12px;color:var(--ink-2)}
.tk-stamp{position:absolute;right:22px;top:calc(var(--n2) - 40px);display:grid;justify-items:center;padding:8px 12px;border:3px solid var(--sky);border-radius:12px;
  color:var(--sky-ink);transform:rotate(-12deg);opacity:.9;mix-blend-mode:multiply;-webkit-mask:radial-gradient(circle at 30% 40%,#000 55%,rgba(0,0,0,.75) 70%,#000 85%)}
.tk-stamp b{font-size:16px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.tk-stamp small{font-size:11px;font-weight:700;letter-spacing:.1em}
.tk-sheen{position:absolute;inset:-20% -60%;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 60%);transform:translateX(-70%);opacity:0}
.printer{position:relative;z-index:3;height:16px;margin:0 6px;border-radius:9px;background:#1F2470;box-shadow:inset 0 -3px 0 rgba(0,0,0,.35),0 6px 14px -8px rgba(20,22,41,.6)}
.printer span{position:absolute;left:16px;right:16px;bottom:3px;height:3px;border-radius:2px;background:#0E1140}
.printer + .tk-wrap{margin:-7px -2px 0;padding:0 14px 30px}
/* print → stamp → shine */
.motion .tk-wrap.go .tk{animation:print 1.3s cubic-bezier(.3,.7,.2,1) both}
@keyframes print{0%{transform:translateY(-104%)}70%{transform:translateY(2%)}100%{transform:none}}
.motion .tk-wrap.go .tk-stamp{animation:stamp .45s cubic-bezier(.2,1.4,.4,1) 1.4s both}
@keyframes stamp{0%{opacity:0;transform:rotate(-12deg) scale(2.4)}100%{opacity:.9;transform:rotate(-12deg) scale(1)}}
.motion .tk-wrap.go .tk-sheen{animation:sheen 1.1s ease-in-out 1.95s both}
@keyframes sheen{0%{opacity:1;transform:translateX(-70%)}100%{opacity:1;transform:translateX(70%)}}
.motion .tk-wrap.go{animation:thud .3s ease-out 1.55s}
@keyframes thud{40%{transform:translateY(3px)}}

/* ======================================================================
   BOOKED
   ====================================================================== */
.booked{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,5vw,96px);align-items:start;padding-top:12px}
.booked-copy{padding-top:28px}
.check{width:88px;height:88px;border-radius:50%;background:var(--sky-soft);display:grid;place-items:center;margin-bottom:28px}
.check svg{width:48px;height:48px;color:var(--act)}
.check circle,.check path{stroke-dasharray:80;stroke-dashoffset:80;animation:draw .9s var(--ease) forwards}
.check path{animation-delay:.35s}
@keyframes draw{to{stroke-dashoffset:0}}
.booked-copy .lead{margin-top:16px;max-width:34ch}
.booked-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:36px;max-width:540px}
.booked-acts .btn--act{grid-column:1/-1}
.booked-acts .btn--line{background:var(--canvas)}
.booked-copy .next{margin-top:56px;max-width:540px}
.booked-copy .next h2{font-size:1.375rem;letter-spacing:-.02em;margin-bottom:22px}
.vsteps{position:relative;display:grid;gap:22px;counter-reset:s}
.vsteps::before{content:"";position:absolute;left:17px;top:20px;bottom:24px;width:2px;border-radius:2px;background:var(--sky-soft)}
.vsteps li{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px;align-items:start}
.vsteps li::before{counter-increment:s;content:counter(s);width:36px;height:36px;border-radius:50%;background:var(--surface);border:2px solid var(--sky);color:var(--sky-ink);display:grid;place-items:center;font-weight:800}
.vsteps b{display:block}
.vsteps span{font-size:var(--fs-small);color:var(--ink-2)}
.home-link{display:inline-flex;margin-top:40px}
.stage{position:relative;display:grid;justify-items:end}
.stage::before{content:"";position:absolute;right:-146px;top:-40px;width:760px;height:760px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,168,236,.13),rgba(0,168,236,0));pointer-events:none}
.stage-in{position:relative;width:min(100%,468px)}
.stage-note{position:relative;font-size:var(--fs-meta);color:var(--ink-2);text-align:center;margin-top:-6px}

/* ======================================================================
   SERVICES
   ====================================================================== */
.shop{display:grid;grid-template-columns:clamp(300px,24vw,340px) minmax(0,1fr);gap:clamp(32px,3.5vw,56px);align-items:start}
.finder{position:sticky;top:20px;display:grid;gap:22px}
.finder-map{padding:24px;border-radius:26px;background:var(--surface)}
.finder h2{font-size:1.25rem;letter-spacing:-.02em}
.finder-map > p{font-size:var(--fs-small);color:var(--ink-2);margin-top:4px}
.fm{display:grid;grid-template-columns:minmax(96px,128px) minmax(0,1fr);gap:16px;align-items:center;margin-top:18px}
.fm-fig{position:relative;width:100%;aspect-ratio:1/2}
.fm-fig > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fm-fig .hs{width:28px;height:28px;margin:-14px 0 0 -14px}
.fm-fig .hs::before{width:8px;height:8px;margin:-4px 0 0 -4px}
.fm-fig .hs::after{width:56px;height:56px;margin:-28px 0 0 -28px}
.fm-fig .hs.hl:not(:hover) .tip{opacity:0}
.regions{display:grid;gap:2px}
.regions button{display:flex;align-items:center;justify-content:space-between;gap:8px;height:36px;padding:0 10px;white-space:nowrap;border:0;border-radius:10px;background:none;font-size:var(--fs-small);font-weight:600;text-align:left;transition:background .15s,color .15s}
.regions button:hover,.regions button.hl{background:var(--canvas)}
.regions button[aria-pressed="true"]{background:var(--act);color:#fff}
.regions button span{font-size:var(--fs-meta);font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
.regions button[aria-pressed="true"] span{color:rgba(255,255,255,.75)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.filters button{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--canvas);font-size:var(--fs-small);font-weight:600;transition:border-color .2s,background .2s,color .2s}
.filters button:hover{border-color:var(--ink-3)}
.filters button[aria-checked="true"]{border-color:var(--act);background:var(--act);color:#fff}
.filters button span{font-size:var(--fs-meta);font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
.filters button[aria-checked="true"] span{color:rgba(255,255,255,.75)}
.finder-cta{display:grid;gap:12px;padding:22px 24px;border-radius:24px;box-shadow:inset 0 0 0 1.5px var(--line)}
.finder-cta p{font-size:var(--fs-small);color:var(--ink-2)}
.svc-top{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;margin-bottom:14px;font-size:var(--fs-small);color:var(--ink-2)}
.svc-top b{color:var(--ink)}
.svc-top button{border:0;background:none;font-weight:700;color:var(--sky-ink);text-decoration:underline;text-underline-offset:3px}
.svcs{container-type:inline-size;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.svc{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);min-height:236px;border-radius:24px;background:var(--canvas);box-shadow:0 0 0 1px var(--line);overflow:hidden;scroll-margin-top:24px;
  transition:box-shadow .3s,transform .35s var(--ease),opacity .3s}
.svc:hover{box-shadow:0 0 0 1px var(--line),var(--shadow-lift);transform:translateY(-3px)}
.svc .photo{min-height:100%;transition:transform .8s var(--ease)}
.svc:hover .photo{transform:scale(1.04)}
.svc-body{display:flex;flex-direction:column;gap:12px;padding:24px 24px 22px;min-width:0}
.svc h3{font-size:1.3125rem;letter-spacing:-.02em;line-height:1.2}
.svc ul{display:grid;gap:5px;font-size:var(--fs-small);color:var(--ink-2)}
.svc li{display:flex;gap:10px;align-items:baseline}
.svc li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--sky);transform:translateY(-2px)}
.svc .link{margin-top:auto}
.svc.dim{opacity:.38}
.svc.lit{box-shadow:0 0 0 2px var(--sky),var(--shadow)}
.svc:target{box-shadow:0 0 0 2px var(--sky),var(--shadow)}
.treat{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:start}
.treat .lead{margin-top:12px}
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tags span{display:inline-flex;align-items:center;height:46px;padding:0 20px;border-radius:999px;background:var(--surface);font-weight:600}

/* ======================================================================
   BRANCHES: list on the left, the map stays beside it
   ====================================================================== */
.brs{display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:clamp(28px,3vw,40px);align-items:start}
.locate{display:grid;gap:14px;padding:26px;border-radius:26px;background:var(--surface)}
.locate h2{font-size:1.25rem;letter-spacing:-.02em}
.locate-h p{font-size:var(--fs-small);color:var(--ink-2);margin-top:2px}
.locate-row{display:flex;gap:10px}
.locate .input{flex:1;min-height:52px}
.locate .btn{height:52px}
.areas{display:flex;flex-wrap:wrap;gap:6px}
.areas .pill{height:34px;padding:0 12px;font-size:var(--fs-meta)}
.found{min-height:22px;font-size:var(--fs-small);font-weight:700;color:var(--sky-ink)}
.bcards{display:grid;gap:16px;margin-top:20px}
.bcard{display:grid;grid-template-columns:150px minmax(0,1fr);border-radius:26px;background:var(--canvas);box-shadow:0 0 0 1px var(--line);overflow:hidden;transition:box-shadow .3s}
.bcard:hover,.bcard.hl{box-shadow:0 0 0 2px var(--act),var(--shadow)}
.bcard .photo{min-height:100%}
.bcard-in{padding:22px 24px 24px;min-width:0}
.bcard-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bcard h2{font-size:1.5rem;letter-spacing:-.025em}
.near-tag{font-size:var(--fs-meta);font-weight:800;padding:4px 8px;border-radius:7px;background:var(--sky-soft);color:var(--sky-ink)}
.bcard-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:8px;font-size:var(--fs-small);color:var(--ink-2)}
.bcard-meta .km{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.bcard address{font-style:normal;margin-top:10px;font-size:var(--fs-small);color:var(--ink-2);line-height:1.5}
.bcard details{margin-top:12px;font-size:var(--fs-small)}
.bcard summary{display:inline-flex;align-items:center;gap:4px;cursor:pointer;font-weight:700;color:var(--sky-ink);list-style:none;border-radius:6px}
.bcard summary::-webkit-details-marker{display:none}
.bcard summary svg{width:16px;height:16px;transform:rotate(90deg);transition:transform .3s var(--ease)}
.bcard details[open] summary svg{transform:rotate(-90deg)}
.week{display:grid;gap:2px;margin-top:10px}
.week div{display:flex;justify-content:space-between;gap:12px;padding:7px 12px;border-radius:10px}
.week .today{background:var(--sky-soft);font-weight:700}
.week .off{color:var(--ink-3)}
.bcard-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.bcard-acts .btn--sm{padding:0 15px}
.map{position:sticky;top:20px;height:calc(100vh - 40px);height:calc(100dvh - 40px);min-height:560px;max-height:920px;border-radius:30px;overflow:hidden;background:#E9EDF3}
.map .gmap{position:absolute;inset:0;width:100%;height:100%;border:0}
.bcard.on-map{box-shadow:0 0 0 2px var(--act)}
.map-note{position:absolute;left:16px;bottom:16px;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:var(--fs-meta);font-weight:600;color:var(--ink-2)}

/* ======================================================================
   TEAM
   ====================================================================== */
.lead-doc{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(40px,5vw,88px);align-items:center}
.lead-doc > .photo{aspect-ratio:4/5;border-radius:32px}
.lead-doc .role{font-size:var(--fs-lead);color:var(--ink-2);margin-top:10px}
.lead-doc .deg{margin-top:22px}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;margin-top:36px;padding-top:32px;border-top:1px solid var(--line)}
.prof-card{height:520px}
/* ---------- tilted cards (team): lean toward the cursor, catch the light, flip over to show more ---------- */
.tilted-card{position:relative;display:flex;align-items:center;justify-content:center;margin:0;outline:none;perspective:1000px;touch-action:pan-y pinch-zoom;-webkit-tap-highlight-color:transparent}
.tilted-card[data-interactive]{cursor:pointer}
.tilted-card[data-active]{z-index:2}
.tilted-card__shadow{position:absolute;inset:0;margin:auto;border-radius:30px;background:rgba(20,22,41,.42);filter:blur(22px);opacity:0;pointer-events:none;will-change:transform,opacity}
.tilted-card__body{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform}
/* Safari ignores overflow + border-radius for children on their own 3D layer (the parallax portrait), so each face
   is also clipped to its rounded shape explicitly */
.tilted-card__face{position:absolute;inset:0;overflow:hidden;border-radius:var(--tc-radius,30px);clip-path:inset(0 round var(--tc-radius,30px));backface-visibility:hidden;-webkit-backface-visibility:hidden;isolation:isolate}
.tilted-card__back{transform:rotateY(180deg);background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line)}
.tilted-card__img{position:absolute;inset:-18px}
.tilted-card__img::after{top:32px;right:32px}
.tilted-card__layer{position:absolute;inset:0}
.tilted-card__img,.tilted-card__layer{transform:translate3d(calc(var(--tc-px,0) * var(--tc-depth,0) * 1px),calc(var(--tc-py,0) * var(--tc-depth,0) * 1px),0)}
.tilted-card__glare{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(farthest-corner circle at var(--tc-gx,50%) var(--tc-gy,50%),rgba(255,255,255,calc(var(--tc-glare,0) * .34)) 0%,rgba(255,255,255,calc(var(--tc-glare,0) * .285)) 18%,rgba(255,255,255,calc(var(--tc-glare,0) * .108)) 36%,rgba(255,255,255,calc(var(--tc-glare,0) * .003)) 54%,rgba(255,255,255,0) 60%)}
.tilted-card__rim{position:absolute;inset:0;z-index:6;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.18)}
.tilted-card__edge{position:absolute;inset:0;z-index:7;box-sizing:border-box;padding:1px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(farthest-side circle at var(--tc-gx,50%) var(--tc-gy,50%),rgba(255,255,255,calc(var(--tc-glare,0) * .85)) 0%,rgba(255,255,255,calc(var(--tc-glare,0) * .43)) 36%,rgba(255,255,255,calc(var(--tc-glare,0) * .02)) 72%,rgba(255,255,255,0) 85%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.tilted-card:has([data-flip]:focus-visible) .tilted-card__rim{box-shadow:inset 0 0 0 2px rgba(255,255,255,.8),inset 0 0 0 4px var(--act)}
.tilted-card__caption{position:absolute;top:0;left:0;z-index:3;margin:16px 0 0 14px;padding:5px 10px;border-radius:8px;background:#fff;color:var(--ink);font-size:12px;font-weight:650;line-height:16px;white-space:nowrap;
  box-shadow:0 0 0 1px rgba(20,22,41,.08),0 8px 18px -8px rgba(20,22,41,.45);opacity:0;pointer-events:none;transform-origin:0 0;will-change:transform,opacity}
/* the team's cards: a portrait with the name floating above it; the back has the details */
.tc-scrim{position:absolute;inset:auto 0 0;height:62%;background:linear-gradient(to top,rgba(20,22,41,.78),rgba(20,22,41,.32) 55%,rgba(20,22,41,0))}
.tc-name{position:absolute;left:28px;right:28px;bottom:26px;color:#fff}
.tc-name h2{font-size:1.75rem;letter-spacing:-.025em;line-height:1.1}
.tc-name p{margin-top:6px;font-size:var(--fs-small);color:rgba(255,255,255,.82)}
.tc-flip,.tc-turn{font:inherit;cursor:pointer}
.tc-turn{border:0}
.tc-flip{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);font-size:var(--fs-meta);font-weight:700;color:#fff;}
.tc-flip svg{width:15px;height:15px}
.tc-back{display:flex;flex-direction:column;height:100%;padding:30px 30px 26px}
.tc-back h3{font-size:1.375rem;letter-spacing:-.02em}
.tc-back .role{margin-top:4px;font-size:var(--fs-small);color:var(--ink-2)}
.tc-back .deg{margin-top:16px}
.tc-back h4{margin-top:22px;font-size:var(--fs-meta);font-weight:750;color:var(--ink-2);letter-spacing:.01em}
.tc-back .ticks{margin-top:10px;font-size:var(--fs-small)}
.tc-back .acts-row{margin-top:auto;padding-top:20px}
.tc-back .tc-turn{position:absolute;top:22px;right:22px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--ink-2)}
.tc-back .tc-turn svg{width:16px;height:16px}
.lead-doc > .tilted-card{aspect-ratio:4/5}
.cols2 h3,.prof h3{font-size:var(--fs-body);font-weight:750;letter-spacing:-.01em;margin-bottom:14px}
.acts-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.profs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.prof{display:grid;grid-template-columns:minmax(150px,2fr) minmax(0,3fr);gap:28px;padding:24px;border-radius:30px;box-shadow:0 0 0 1px var(--line);transition:box-shadow .3s}
.prof:hover{box-shadow:0 0 0 1px var(--line),var(--shadow-lift)}
.prof > .photo{aspect-ratio:4/5;border-radius:22px}
.prof-in{display:flex;flex-direction:column;min-width:0;padding:4px 0}
.prof h2{font-size:1.625rem;letter-spacing:-.025em}
.prof .role{font-size:var(--fs-small);color:var(--ink-2);margin-top:6px}
.prof .deg{margin-top:14px}
.prof .ticks{margin-top:20px;font-size:var(--fs-small)}
.prof .acts-row{margin-top:auto;padding-top:24px}

/* ======================================================================
   TREATMENT SCENES (the services explorer and the spine page)
   ====================================================================== */
.scene-host{position:relative;aspect-ratio:6/5}
/* scenes swap with a fade and a slight settle; no blur, which Safari redraws (with all the shading) on every frame */
/* scenes cross-fade on opacity alone: a scale while the scene is drawing makes Safari redraw every filter at each size */
.scene-host > .scene{position:absolute;inset:0;width:100%;height:100%;transition:opacity .5s var(--ease)}
.scene.enter{opacity:0}
.scene.leave{opacity:0;transition-duration:.35s}
.scene text{font:600 13px "Figtree",sans-serif;fill:var(--ink-2)}
/* the treated area on the small body breathes, so the chip reads as live */
.where-ring{transform-box:fill-box;transform-origin:center;animation:where-ring 2.8s var(--ease) infinite}
/* pulses nobody can see don't run: on hidden spots, and in scenes scrolled out of view */
.bodymap .spots:not(.on) .where-ring,.scene.off .where-ring{animation:none}
@keyframes where-ring{0%{transform:scale(.55);opacity:.75}100%{transform:scale(1.9);opacity:0}}
/* the spine, drawn as vertebrae over the body */
.spine-bones .v{fill:#fff;stroke:#AEB4C9;stroke-width:.8;transition:fill .4s,stroke .4s}
.spine-bones .disc{fill:var(--sky);opacity:.3}
.spine-bones .sacrum{fill:#fff;stroke:#AEB4C9;stroke-width:.8}

/* ======================================================================
   SERVICE PAGE (Spine & Back Care)
   ====================================================================== */
.back-link{display:inline-flex;align-items:center;gap:6px;margin:4px 0 24px;font-weight:700;color:var(--ink-2);border-radius:8px}
.back-link svg{width:18px;height:18px;transform:rotate(180deg);transition:transform .3s var(--ease)}
.back-link:hover{color:var(--ink)}
.back-link:hover svg{transform:rotate(180deg) translateX(3px)}
.svc-hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(36px,4vw,72px);align-items:center}
.svc-hero .lead{margin-top:22px;max-width:30ch}
.conds{margin-top:40px}
.conds .sub-h small{font-weight:500}
.svc-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:40px}
.next-free{display:grid;gap:2px;font-size:var(--fs-small);color:var(--ink-2)}
.next-free a{font-weight:750;font-size:var(--fs-body);color:var(--ink);font-variant-numeric:tabular-nums;text-underline-offset:4px}
.next-free a:hover{color:var(--act);text-decoration:underline}
.spine-stage{position:relative;height:min(640px,calc(100vh - 230px));min-height:540px;border-radius:36px;overflow:hidden;
  background:radial-gradient(55% 45% at 50% 40%,#fff,rgba(255,255,255,0) 70%),var(--surface)}
.spine-stage > svg{position:absolute;inset:0;width:100%;height:100%}
.cond-cap{position:absolute;right:20px;bottom:20px;width:min(300px,52%);padding:16px 20px;border-radius:22px;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.8);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 18px 36px -22px rgba(20,22,41,.45)}
.cond-cap b{display:block;font-size:var(--fs-body);font-weight:750}
.cond-cap p{margin-top:2px;font-size:var(--fs-small);color:var(--ink-2)}
.spine .hl{opacity:0;transition:opacity .5s var(--ease)}
.spine[data-on="lower"] .hl-lower,.spine[data-on="neck"] .hl-neck,.spine[data-on="disc"] .hl-disc,.spine[data-on="sciatica"] .hl-nerve,
.spine[data-on="posture"] .hl-upper,.spine[data-on="posture"] .hl-tension,.spine[data-on="pregnancy"] .hl-pelvis,.spine[data-on="pregnancy"] .hl-si{opacity:1}
.spine[data-on="sciatica"] .hl-lower,.spine[data-on="disc"] .hl-lower{opacity:.55}
.spine[data-on="lower"] .v-l,.spine[data-on="neck"] .v-c,.spine[data-on="disc"] .l45,.spine[data-on="sciatica"] .l45,
.spine[data-on="posture"] .v-c,.spine[data-on="posture"] .up,.spine[data-on="pregnancy"] .v-l{fill:var(--sky);stroke:#fff}
.spine .v-hot{fill:#00A8EC;opacity:0;pointer-events:none}
.spine[data-on="stiff"] .v-hot{animation:v-wave 2.2s ease-in-out infinite;animation-delay:calc(var(--i) * 70ms)}
@keyframes v-wave{0%,100%{opacity:0}45%{opacity:1}}
.spine.off,.spine.off *{animation-play-state:paused!important}
.hl-nerve{fill:none;stroke:var(--sky);stroke-width:3;stroke-linecap:round;stroke-dasharray:6 6;animation:nerve 1.1s linear infinite paused}
.spine[data-on="sciatica"] .hl-nerve{animation-play-state:running}
.hl-nerve-glow{fill:none;stroke:var(--sky);stroke-width:9;stroke-linecap:round;opacity:0}
.spine[data-on="sciatica"] .hl-nerve-glow{opacity:.22}
@keyframes nerve{to{stroke-dashoffset:-24}}
.hl-disc .bulge{transform-box:fill-box;transform-origin:center;animation:bulge 1.6s ease-in-out infinite paused}
.spine[data-on="disc"] .hl-disc .bulge{animation-play-state:running}
@keyframes bulge{50%{transform:scaleX(1.9)}}
.hl-tension path{fill:none;stroke:var(--sky);stroke-width:2;stroke-linecap:round}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.sec-head .lead{max-width:38ch}
/* how we treat it: a sticky stage beside the chapters */
.story{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,5vw,96px);margin-top:40px}
.story-stage{position:sticky;top:24px;height:min(660px,calc(100vh - 48px));display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;padding:18px;border-radius:36px;
  background:radial-gradient(50% 45% at 50% 50%,#fff,rgba(255,255,255,0) 72%),var(--surface)}
.story-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:4px;border-radius:16px;background:rgba(255,255,255,.6)}
.story-steps button{height:40px;border:0;border-radius:12px;background:none;font-weight:700;font-size:var(--fs-small);color:var(--ink-2);transition:background .25s,color .25s,box-shadow .25s}
.story-steps button:hover{color:var(--ink)}
.story-steps button[aria-current="step"]{background:#fff;color:var(--ink);box-shadow:0 2px 8px -3px rgba(20,22,41,.25)}
.story-stage .scene-host{aspect-ratio:auto;min-height:0}
.story-cap{text-align:center;font-weight:700;font-size:var(--fs-small);color:var(--ink-2);padding-bottom:4px}
.chapter{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0}
/* chapters you're not on step back but stay readable: their text greys (still 4.5:1+) and their controls fade */
.chapter :is(h3,.lead,.note,.ticks span,.subtab span,.subtab b){transition:color .5s var(--ease)}
.chapter:not(.on) :is(h3,.lead,.note,.ticks span,.subtab span,.subtab b){color:var(--ink-3)}
.chapter :is(.n,.ticks svg,.subtab){transition:opacity .5s var(--ease),background .4s,color .4s,border-color .4s}
.chapter:not(.on) :is(.n,.ticks svg,.subtab){opacity:.6}
.chapter-h{display:flex;align-items:center;gap:18px;margin-bottom:16px}
.chapter-h .n{flex:none;width:56px;height:56px;border-radius:50%;border:2px solid var(--sky);display:grid;place-items:center;color:var(--sky-ink);font-weight:800;font-size:1.25rem;transition:background .4s,color .4s}
.chapter.on .n{background:var(--sky-ink);border-color:var(--sky-ink);color:#fff}
.chapter h3{font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.03em}
.chapter .ticks{margin-top:24px}
.subtabs{display:grid;gap:10px;margin-top:28px}
.subtab{position:relative;display:grid;gap:3px;text-align:left;padding:16px 20px 18px;border-radius:20px;border:1.5px solid var(--line);background:var(--canvas);overflow:hidden;transition:border-color .2s,background .2s}
.subtab:hover{border-color:var(--ink-3)}
.subtab[aria-pressed="true"]{border-color:var(--act);background:var(--act-soft)}
.subtab b{font-size:var(--fs-body);font-weight:750}
.subtab span{font-size:var(--fs-small);color:var(--ink-2)}
.subtab .bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--sky);transform:scaleX(0);transform-origin:left}
.subtab.run .bar{animation:subbar 7s linear forwards}
@keyframes subbar{to{transform:scaleX(1)}}
.note{margin-top:18px;font-size:var(--fs-small);color:var(--ink-2)}
/* who treats it */
.who3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px}
.mini-prof{display:grid;grid-template-columns:104px minmax(0,1fr);gap:20px;align-items:center;padding:18px;border-radius:26px;box-shadow:0 0 0 1px var(--line);transition:box-shadow .3s}
.mini-prof:hover{box-shadow:0 0 0 1px var(--line),var(--shadow-lift)}
.mini-prof > .photo{aspect-ratio:4/5;border-radius:18px}
.mini-prof b{display:block;font-size:1.125rem;font-weight:750;letter-spacing:-.01em;line-height:1.25}
.mini-prof small{display:block;margin-top:2px;font-size:var(--fs-small);color:var(--ink-2)}
.mini-prof .deg{margin-top:10px}
.mini-prof .link{margin-top:12px}
.go-times{display:grid;gap:14px;justify-items:start}
.go-times .qb-chips{margin-top:0}
a.tchip,a.pill{display:inline-flex;align-items:center}

/* the other service pages: a body map that lights where each problem happens, or a treatment scene */
.map-stage > .scene-host{position:absolute;inset:0;aspect-ratio:auto}
.bodymap .face{opacity:0;transition:opacity .6s var(--ease)}
.bodymap .face.on{opacity:1}
.bodymap .spots{opacity:0;transform-box:fill-box;transition:opacity .5s var(--ease)}
.bodymap .spots.on{opacity:1}

/* ======================================================================
   SERVICES: see how each treatment is done
   ====================================================================== */
.tx-grid{display:grid;grid-template-columns:minmax(220px,3fr) minmax(0,9fr);gap:clamp(24px,3vw,40px);align-items:start;margin-top:40px}
.tx-list{display:grid;gap:2px}
.tx-tab{position:relative;display:grid;gap:1px;text-align:left;padding:12px 16px 13px;border:0;border-radius:16px;background:none;overflow:hidden;transition:background .2s}
.tx-tab b{font-size:var(--fs-body);font-weight:700}
.tx-tab span{font-size:var(--fs-meta);font-weight:600;color:var(--ink-3)}
.tx-tab:hover{background:var(--surface)}
.tx-tab[aria-selected="true"]{background:var(--act-soft)}
.tx-tab[aria-selected="true"] b{color:var(--act)}
.tx-tab .bar{position:absolute;left:16px;right:16px;bottom:5px;height:2px;border-radius:1px;background:var(--sky);transform:scaleX(0);transform-origin:left}
.tx-tab.run .bar{animation:subbar 7.5s linear forwards}
.tx-panel{position:sticky;top:24px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);border-radius:32px;box-shadow:0 0 0 1px var(--line);overflow:hidden;background:var(--canvas)}
.tx-stage{background:radial-gradient(52% 50% at 50% 52%,var(--sky-soft),rgba(230,246,253,0) 72%),var(--canvas)}
.tx-info{display:flex;flex-direction:column;gap:20px;padding:36px 36px 32px 12px}
.tx-info h3{font-size:2rem;letter-spacing:-.025em;line-height:1.1}
.tx-full{margin-top:-14px;font-size:var(--fs-small);color:var(--ink-2)}
.tx-info dl{display:grid;gap:16px}
.tx-info dt{font-size:var(--fs-meta);font-weight:750;color:var(--ink-2);letter-spacing:.01em}
.tx-info dd{margin-top:4px}
.tx-used{display:grid;gap:8px}
.tx-used > span{font-size:var(--fs-meta);font-weight:750;color:var(--ink-2)}
.tx-used .pill{height:36px;padding:0 14px;font-size:var(--fs-meta)}
.tx-info > .link{margin-top:auto}

/* ---------- narrower windows ---------- */
@container (max-width:720px){
  .where{grid-template-columns:1fr}
  .figs{justify-content:center}
  .when{grid-template-columns:1fr}
  .docs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (max-width:780px){
  .svc{grid-template-columns:1fr}
  .svc .photo{min-height:160px}
}
@media (max-width:1180px){
  .who3{grid-template-columns:minmax(0,1fr)}
  .tx-panel{grid-template-columns:minmax(0,1fr)}
  .tx-info{padding:8px 32px 32px}
  .cols--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols--4 li:nth-child(3){padding-left:0;border-left:0}
  .cols--4 li:nth-child(n+3){border-top:1px solid var(--line)}
  .ready{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prof{grid-template-columns:1fr}
  .prof > .photo{aspect-ratio:3/2}
}
@media (max-width:1020px){
  .hero,.visit,.book,.booked,.shop,.brs,.lead-doc,.profs,.treat,.svc-hero,.story,.tx-grid,.tx-panel,.who3{grid-template-columns:minmax(0,1fr)}
  .story-stage,.tx-panel{position:relative;top:auto}
  .story-stage{height:auto}
  .story-stage .scene-host{aspect-ratio:6/5}
  .chapter{min-height:0;opacity:1}
  .sec-head{flex-direction:column;align-items:flex-start}
  .stage{justify-items:center}
  .hero-art{min-height:420px}
  .finder,.bk-aside,.map{position:static}
  .map{height:480px;min-height:0}
  .hsteps,.reviews,.cols,.ready-list{grid-template-columns:minmax(0,1fr)}
  .hsteps::before,.hsteps::after{display:none}
  .cols li + li,.ready-list li + li{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .why-head,.ptop,.btop,.gal-head{flex-direction:column;align-items:flex-start}
  .rating,.btop-help{justify-items:start;text-align:left}
  .hd-right .live,.hd-sep{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* printing from the booked page prints the ticket alone */
@media print{
  @page{margin:14mm}
  body{background:#fff!important}
  .hd,.ft,.dock,.fab,.toast,.booked-copy,.printer,.stage-note,.stage::before{display:none!important}
  .booked{display:block}
  .stage-in{width:100mm;margin:0 auto}
  .tk-wrap{filter:none;overflow:visible;padding:0!important;margin:0!important}
  .tk,.tk *{-webkit-print-color-adjust:exact;print-color-adjust:exact;animation:none!important}
  .tk{box-shadow:0 0 0 1px #D3D7E2}
}
/* booking: "Use my location" under the branch picker */
.near-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;padding:0 4px;border:0;background:none;font:inherit;font-size:15px;font-weight:700;color:var(--act);cursor:pointer}
.near-btn svg{width:18px;height:18px;flex:none}
.near-btn:disabled{color:var(--ink-3);cursor:progress}

/* the gallery's branch tabs: three equal tabs; the white marker slides under the branch in front (transform only) */
.gcar-tabs{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;max-width:460px;margin:22px auto 40px;padding:4px;border-radius:16px;background:var(--surface)}
.gcar-tabs [role="tab"]{position:relative;z-index:1;min-height:44px;padding:0 8px;border:0;background:none;font:inherit;font-size:16px;font-weight:700;color:var(--ink-2);cursor:pointer;transition:color .35s}
.gcar-tabs [role="tab"][aria-selected="true"]{color:var(--ink)}
.gcar-tabs .gt-ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--n));border-radius:12px;background:var(--canvas);box-shadow:0 1px 3px rgba(20,22,41,.12);transition:transform .55s var(--ease)}
@media (prefers-reduced-motion:reduce){.gcar-tabs .gt-ind{transition:none}}

/* a time chip still on its way from the live diary */
.tchip-skel{display:inline-block;width:92px;height:44px;border-radius:12px}
/* taps and clicks answer at once: small controls press in slightly (transform only) */
.pill,.chip,.slot,.gcar-tabs [role="tab"]{transition:transform .15s var(--ease)}
.pill:active,.chip:active,.slot:active,.gcar-tabs [role="tab"]:active{transform:scale(.96)}
/* moving between pages: a short crossfade instead of a blank flash, where the browser supports it */

/* A portrait on its way. Nothing may animate inside the 3D card: in Safari an opacity change there shows the back
   face through the front, and a moving layer escapes the card's rounded clip. So the skeleton is a flat overlay of
   the card's own shape on top of it (outside the 3D body) that pulses, opacity only, with no clip and nothing moving. */
.tilted-card__img.photo.is-loading{animation:none}
.tilted-card__skel{position:absolute;inset:0;z-index:3;display:none;border-radius:var(--tc-radius,30px);background:rgba(255,255,255,.3);pointer-events:none;
  animation:skel 1.1s ease-in-out infinite alternate}
.tilted-card:has(.tilted-card__front .is-loading) .tilted-card__skel{display:block}
.tilted-card.is-away .tilted-card__skel{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.tilted-card__skel{animation:none}}

/* ---------- switching pages: the next page's skeleton is on screen at once, and its content pops in, all of it
   together, when it's ready (canon/clinic.js: leavePage, and the arrival in each page's head). The dock stays put. */
html.leaving body>:not(.dock):not(script),html.arriving body>:not(.dock):not(script){opacity:0;pointer-events:none}
html.leaving body::after,html.arriving body::after,html.arrived body::after{content:"";position:fixed;inset:0;z-index:38;pointer-events:none;
  background:var(--canvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 760'%3E%3Crect x='0' y='22' width='118' height='88' rx='14' fill='%23E9EBF1'/%3E%3Crect x='760' y='46' width='210' height='30' rx='12' fill='%23E9EBF1'/%3E%3Crect x='1000' y='30' width='200' height='62' rx='24' fill='%23E9EBF1'/%3E%3Crect x='0' y='140' width='1200' height='620' rx='40' fill='%23F3F4F7'/%3E%3Crect x='56' y='214' width='620' height='92' rx='18' fill='%23E9EBF1'/%3E%3Crect x='56' y='334' width='470' height='26' rx='10' fill='%23E9EBF1'/%3E%3Crect x='56' y='402' width='640' height='200' rx='28' fill='%23FFFFFF'/%3E%3Crect x='84' y='436' width='250' height='22' rx='9' fill='%23E9EBF1'/%3E%3Crect x='84' y='476' width='330' height='30' rx='10' fill='%23E9EBF1'/%3E%3Crect x='470' y='430' width='200' height='70' rx='22' fill='%23E9EBF1'/%3E%3Crect x='84' y='540' width='140' height='52' rx='18' fill='%23E9EBF1'/%3E%3Crect x='744' y='176' width='410' height='560' rx='30' fill='%23E9EBF1'/%3E%3C/svg%3E") no-repeat center top/min(1200px,calc(100% - 64px)) auto;animation:page-skel 1.1s ease-in-out .3s infinite alternate}
@keyframes page-skel{to{opacity:.55}}
html.arrived body::after{animation:page-skel-out .3s ease-out both}
@keyframes page-skel-out{to{opacity:0}}
/* the content fades in over the skeleton, which fades out underneath: never a blank frame between them. Opacity only:
   a closed sheet sits off-screen by its transform, and moving things here would drag it into view */
html.arrived body>:not(.dock):not(script):not(.fab){animation:page-in .3s ease-out both}
@keyframes page-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){html.leaving body::after,html.arriving body::after{animation:none}}

/* a photo still to come shows only its grey placeholder (the label naming it was for the mock-ups) */
.photo[data-label]::after{content:none}

/* the dock's highlight sits under the current page from the first frame (--i is written into the page, see
   tools/dock.py), and slides when it changes: a tap slides it all the way before the next page opens (leavePage in
   canon/clinic.js). Pages change without a crossfade: the skeleton is the same on both sides, so the dock never blurs,
   doubles or jumps. */
.dock .ind{transition:transform .3s var(--ease);width:86px;transform:translateX(calc(var(--i,0) * 86px))}