/* One accent (deep rose, from the clinic's sign), cool neutrals, light + dark.
   Radius rule: interactive = pill, surfaces and images = 20px. */
:root{
  --bg:#F4F4F2; --surface:#FFFFFF; --surface-2:#EBEBE8;
  --ink:#1C1B1F; --ink-2:#55535A; --line:#DEDDD9;
  --accent:#B3264F; --accent-ink:#FFFFFF; --accent-soft:#F6E4EA;
  --wa:#147A43;
  --r:20px; --shadow:0 18px 40px -18px rgba(40,20,30,.22);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141316; --surface:#1D1C20; --surface-2:#26242A;
  --ink:#F1EFF2; --ink-2:#B4B0B8; --line:#2F2D33;
  --accent:#E0577F; --accent-ink:#1C1B1F; --accent-soft:#3A1E28;
  --wa:#147A43; --shadow:0 18px 40px -18px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --bg:#141316; --surface:#1D1C20; --surface-2:#26242A;
  --ink:#F1EFF2; --ink-2:#B4B0B8; --line:#2F2D33;
  --accent:#E0577F; --accent-ink:#1C1B1F; --accent-soft:#3A1E28;
  --wa:#147A43; --shadow:0 18px 40px -18px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.7 Assistant,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:Rubik,system-ui,sans-serif;font-weight:600;line-height:1.15;letter-spacing:-.015em;margin:0}
h2{font-size:clamp(30px,4.2vw,46px);margin-bottom:14px}
h3{font-size:21px;margin-bottom:6px}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
section{padding:96px 0}
.body{color:var(--ink-2);max-width:60ch}
.eyebrow{display:block;font:600 15px/1 Rubik,sans-serif;color:var(--accent);margin-bottom:18px}
.skip{position:absolute;inset-inline-start:8px;top:-60px;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:999px;z-index:100}
.skip:focus{top:8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
.ph,.ph-fill{line-height:1}

/* reveal on scroll: hierarchy only. Reduced motion keeps the fade, drops the movement */
.js .rv-in{opacity:0;transform:translateY(16px);transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out);transition-delay:calc(var(--i,0) * 60ms)}
.js .rv-in.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv-in{transform:none;transition:opacity 300ms ease}
}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font:600 17px/1 Rubik,sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer;background:none;transition:transform 160ms var(--ease-out),background-color 150ms ease,border-color 150ms ease,opacity 150ms ease}
.btn i{font-size:22px}
.btn:active{transform:scale(.97)}
.btn-wa{background:var(--wa);color:#fff}
.btn-line{border:1.5px solid var(--line);color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .btn-wa:hover{background:color-mix(in srgb,var(--wa) 88%,#000)}
  .btn-line:hover{border-color:var(--ink)}
}

/* header */
#sentinel{position:absolute;top:0;height:1px;width:1px}
header.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
header.top.stuck{border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px}
.logo{font:700 21px/1 Rubik,sans-serif;text-decoration:none}
.logo span{color:var(--accent)}
.top nav{display:flex;gap:28px}
.top nav a{color:var(--ink-2);text-decoration:none;font-weight:600;position:relative;padding:10px 0;transition:color 150ms ease}
.top nav a::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transition:transform 250ms var(--ease-out)}
.top nav a.current{color:var(--ink)}
.top nav a.current::after{transform:none}
@media (hover:hover) and (pointer:fine){.top nav a:hover{color:var(--ink)}}
.call{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;direction:ltr}
.call i{color:var(--accent);font-size:20px}
@media (max-width:860px){.top nav{display:none}}

/* hero: asymmetric split */
.hero{padding:36px 0 64px}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.hero h1{font-size:clamp(40px,5.2vw,64px);line-height:1.05;letter-spacing:-.025em;margin-bottom:22px}
.hero h1 b{font-weight:600;color:var(--accent)}
.hero p{font-size:clamp(19px,2vw,22px);color:var(--ink-2);max-width:30ch;margin-bottom:34px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.hero figure{margin:0;position:relative}
.hero figure img{width:100%;height:min(620px,calc(100dvh - 140px));min-height:420px;object-fit:cover;object-position:50% 28%;border-radius:var(--r);box-shadow:var(--shadow)}
@media (max-width:860px){
  .hero{padding-top:28px}
  .hero .wrap{grid-template-columns:1fr;gap:36px}
  .hero figure{max-width:440px}
}

/* trust strip, directly under hero */
.trust{padding:0 0 24px}
.trust ul{list-style:none;margin:0;padding:26px 0;display:grid;grid-template-columns:repeat(5,1fr);gap:24px;border-top:1px solid var(--line)}
.trust li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--ink-2);line-height:1.45}
.trust i{font-size:26px;color:var(--accent);flex:none}
.trust b{display:block;color:var(--ink);font-weight:700}
@media (max-width:1060px){.trust ul{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.trust ul{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.trust ul{grid-template-columns:1fr}}

/* treatments: bento, 6 items = 6 cells */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(190px,auto);gap:16px;margin-top:44px}
.tile{border-radius:var(--r);padding:28px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.tile i{font-size:30px;color:var(--accent);margin-bottom:auto;padding-bottom:22px}
.tile p{color:var(--ink-2);font-size:16.5px;max-width:42ch}
.t-dia{grid-column:span 2;grid-row:span 2;background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.t-dia i,.t-dia p{color:inherit}
.t-dia p{opacity:.9;font-size:18px}
.t-dia h3{font-size:clamp(28px,3vw,36px);margin-bottom:12px}
.t-dia .note{margin-top:22px;font-size:15px;opacity:.85;display:flex;gap:8px;align-items:center}
.t-dia .note i{font-size:20px;padding:0;margin:0}
.t-ing{grid-column:span 2}
.t-heel{grid-column:span 2;color:#fff;border-color:transparent;background:#3a2a2e url(img/ba-heel.jpg) center 95%/cover}
.t-heel::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,12,16,.82),rgba(20,12,16,.15) 70%)}
.t-heel>*{position:relative}
.t-heel i,.t-heel p{color:#fff}
.t-heel p{opacity:.9}
.t-med{grid-column:span 2;background:var(--accent-soft);border-color:transparent}
.also{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.also b{font-weight:700;margin-left:6px}
.also span{padding:8px 16px;border-radius:999px;background:var(--surface-2);font-size:16px}
@media (max-width:900px){.bento{grid-template-columns:1fr 1fr}.t-dia,.t-ing,.t-heel,.t-med{grid-column:span 2}.t-dia{grid-row:auto}}
@media (max-width:560px){.bento{grid-template-columns:1fr}.tile{grid-column:auto!important}}

/* certificate: split */
.cert{background:var(--surface)}
.cert .wrap{display:grid;grid-template-columns:.75fr 1.25fr;gap:72px;align-items:center}
.cert figure{margin:0}
.cert img{border-radius:var(--r);box-shadow:var(--shadow);max-height:560px;margin:0 auto;cursor:zoom-in}
.cert .quote{margin:28px 0 0;padding:24px 26px;border-radius:var(--r);background:var(--bg);font-size:18px}
.cert .quote i{color:var(--accent);font-size:28px;display:block;margin-bottom:10px}
.cert small{display:block;margin-top:16px;color:var(--ink-2);font-size:15.5px}
@media (max-width:860px){.cert .wrap{grid-template-columns:1fr;gap:40px}.cert figure{order:2;max-width:340px}}

/* before / after: gallery */
.ba{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:44px 0 0;padding:0;list-style:none}
.ba li{margin:0}
.ba .frame{position:relative;aspect-ratio:1;overflow:hidden;border-radius:var(--r);background:var(--surface-2)}
.ba img{width:100%;height:100%;object-fit:cover;filter:blur(18px) saturate(.5);transform:scale(1.08);transition:filter 500ms var(--ease-out),transform 500ms var(--ease-out),opacity 400ms ease}
.ba li.shown img{filter:none;transform:none;cursor:zoom-in}
.ba .reveal{position:absolute;inset:0;display:grid;place-items:center;border:0;background:transparent;cursor:pointer;font:inherit;transition:opacity 150ms ease-out}
.ba .reveal span{display:inline-flex;align-items:center;gap:8px;background:var(--surface);color:var(--ink);padding:11px 20px;border-radius:999px;font:600 16px/1 Rubik,sans-serif;box-shadow:var(--shadow);transition:transform 160ms var(--ease-out)}
.ba .reveal:active span{transform:scale(.97)}
.ba li.shown .reveal{opacity:0;pointer-events:none}
.ba h3{font-size:19px;margin:16px 0 2px}
.ba p{color:var(--ink-2);font-size:15.5px}
.ba-foot{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:32px}
.ba-foot p{color:var(--ink-2);font-size:15.5px}
@media (max-width:640px){.ba{grid-template-columns:1fr}}

/* reviews: real WhatsApp screenshots, masonry */
.reviews{background:var(--surface)}
.shots{columns:2;column-gap:20px;margin-top:44px}
.featured{margin:44px 0 0;padding:40px 44px;border-radius:var(--r);background:var(--accent-soft);max-width:880px}
.featured i{font-size:40px;color:var(--accent)}
.featured blockquote{margin:14px 0 16px;font:500 clamp(24px,3vw,34px)/1.35 Rubik,sans-serif;letter-spacing:-.01em}
.featured figcaption{color:var(--ink-2);font-size:15.5px}
.shots{margin-top:28px}
.shot{break-inside:avoid;margin:0 0 20px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--bg)}
.shot img{width:100%;height:auto;cursor:zoom-in;background:#EFE7DE}
.shot figcaption{padding:16px 20px 18px;display:flex;flex-direction:column;gap:2px}
.shot figcaption b{font:600 18px/1.4 Rubik,sans-serif}
.shot figcaption span{color:var(--ink-2);font-size:15px}
@media (max-width:560px){.featured{padding:28px 24px}}
@media (max-width:720px){.shots{columns:1}}

/* about: centered statement */
.about{text-align:center}
.about .wrap{max-width:820px}
.about p{font:500 clamp(22px,2.6vw,30px)/1.5 Rubik,sans-serif;letter-spacing:-.01em}
.about p span{color:var(--ink-2)}

/* info: split with map */
.info .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:stretch}
.info dl{margin:30px 0 34px;display:grid;gap:22px}
.info dl>div{display:flex;gap:14px}
.info dl i{font-size:26px;color:var(--accent);flex:none;margin-top:2px}
.info dt{font-weight:700}
.info dd{margin:0;color:var(--ink-2)}
.hours{border-collapse:collapse;min-width:260px}
.hours td{padding:3px 0}
.hours td:last-child{padding-right:28px;direction:ltr;text-align:left}
.map{border-radius:var(--r);overflow:hidden;min-height:380px;background:var(--surface-2)}
.map iframe{width:100%;height:100%;min-height:380px;border:0;display:block}
@media (max-width:860px){.info .wrap{grid-template-columns:1fr}}

/* closing call: accent panel, same theme */
.close{padding:24px 0 96px}
.panel{border-radius:var(--r);background:var(--accent);color:var(--accent-ink);padding:56px 48px;display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;justify-content:space-between}
.panel h2{margin:0 0 6px}
.panel p{opacity:.9;font-size:19px}
@media (max-width:560px){.panel{padding:36px 24px}}

footer.site{padding:0 0 110px;color:var(--ink-2);font-size:15.5px}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:8px 28px;border-top:1px solid var(--line);padding-top:26px}
/* floating WhatsApp: only when the page's own WhatsApp buttons are off screen */
.fab{position:fixed;bottom:18px;left:18px;z-index:60;width:58px;height:58px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow);font-size:30px;text-decoration:none;
  opacity:0;transform:scale(.9);pointer-events:none;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
.fab.show{opacity:1;transform:none;pointer-events:auto}
.fab.show:active{transform:scale(.95);transition-duration:120ms}
@media (hover:hover) and (pointer:fine){.fab.show:hover{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.fab{transform:none}}

/* lightbox: the dialog only fades (no transform, so the fixed close button stays put); the image scales */
html:has(dialog[open]){overflow:hidden}
dialog#lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;
  opacity:0;transition:opacity 150ms ease-out,overlay 150ms allow-discrete,display 150ms allow-discrete}
dialog#lb[open]{display:grid;place-items:center;opacity:1;transition-duration:220ms}
@starting-style{dialog#lb[open]{opacity:0}}
dialog#lb::backdrop{background:rgba(16,12,14,calc(.9 * var(--bd,1)));opacity:0;transition:opacity 150ms ease-out,overlay 150ms allow-discrete,display 150ms allow-discrete}
dialog#lb[open]::backdrop{opacity:1;transition-duration:220ms}
@starting-style{dialog#lb[open]::backdrop{opacity:0}}
dialog#lb img{max-height:88dvh;max-width:94vw;width:auto;border-radius:12px;touch-action:none;user-select:none;-webkit-user-drag:none;cursor:grab;
  transition:transform 380ms var(--ease-sheet)}
dialog#lb img.dragging{transition:none;cursor:grabbing}
dialog#lb button{position:fixed;top:16px;left:16px;width:48px;height:48px;border-radius:50%;border:0;background:var(--surface);color:var(--ink);font-size:24px;cursor:pointer;display:grid;place-items:center;transition:transform 160ms var(--ease-out)}
dialog#lb button:active{transform:scale(.95)}
dialog#lb .hint{position:fixed;bottom:18px;inset-inline:0;text-align:center;color:rgba(255,255,255,.7);font-size:14px;pointer-events:none}
@media (hover:hover) and (pointer:fine){dialog#lb .hint{display:none}}
@media (prefers-reduced-motion:reduce){dialog#lb img,dialog#lb[open] img{transform:none}}

/* hero: one-time entrance (first visit moment, so a little delight is allowed) */
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
@keyframes fadein{from{opacity:0}}
@keyframes unveil{from{clip-path:inset(7% 7% 7% 7% round 28px)}to{clip-path:inset(0 round 20px)}}
.hero .eyebrow,.hero h1,.hero p,.hero .actions{animation:rise 700ms var(--ease-out) both}
.hero h1{animation-delay:60ms}.hero p{animation-delay:120ms}.hero .actions{animation-delay:180ms}
.hero figure img{animation:unveil 1100ms var(--ease-out) both}
@media (prefers-reduced-motion:reduce){
  .hero .eyebrow,.hero h1,.hero p,.hero .actions{animation-name:fadein}
  .hero figure img{animation:none}
}

/* identity: handwritten logo, echoing the lettering on the clinic window */
.logo{font:600 24px/1 "Playpen Sans Hebrew",Rubik,sans-serif;letter-spacing:0;display:inline-block;padding:10px 0;white-space:nowrap}
.logo span{color:var(--accent)}
.logo-sm{font-size:19px;color:var(--ink)}

/* targets: every tappable line is at least 44px tall */
.call,footer.site a,.info dd a{display:inline-flex;align-items:center;min-height:44px}
.inline-link{color:var(--accent);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;display:inline-flex;align-items:center;min-height:44px}
.nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:10px!important}
.btn-sm{padding:11px 18px;font-size:16px}
.btn-sm i{font-size:19px}

/* browser surfaces carry the palette too */
html{accent-color:var(--accent);caret-color:var(--accent);scrollbar-color:color-mix(in srgb,var(--ink-2) 55%,transparent) var(--bg)}
a{text-underline-offset:4px}

/* invisible details */
html{scroll-padding-top:84px}
h1,h2,h3,.featured blockquote,.about p{text-wrap:balance}
p,dd,blockquote,figcaption{text-wrap:pretty}
.hours td,.call,footer.site a{font-variant-numeric:tabular-nums}
a,button,[role="button"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
::selection{background:var(--accent);color:var(--accent-ink)}
.panel :focus-visible{outline-color:var(--accent-ink)}
.js img[loading="lazy"]{opacity:0;transition:opacity 400ms ease}
.js img[loading="lazy"].ld{opacity:1}
.js .ba img[loading="lazy"]{transition:filter 500ms var(--ease-out),transform 500ms var(--ease-out),opacity 400ms ease}
.map iframe{opacity:0;transition:opacity 400ms ease}
.map iframe.ld{opacity:1}
[data-zoom]{cursor:zoom-in}
.shot{transition:border-color 150ms ease}
@media (hover:hover) and (pointer:fine){.shot:hover{border-color:var(--ink-2)}}

/* ---------- shared header extras ---------- */
.top-end{display:flex;align-items:center;gap:10px}
.lang{font:600 14px/1 Rubik,sans-serif;color:var(--ink-2);text-decoration:none;border:1.5px solid var(--line);border-radius:999px;padding:0 14px;min-height:44px;display:inline-flex;align-items:center;transition:border-color 150ms ease,color 150ms ease}
@media (hover:hover) and (pointer:fine){.lang:hover{border-color:var(--ink);color:var(--ink)}}
.call{white-space:nowrap}
@media (max-width:520px){.call-num{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.call{justify-content:center;min-width:44px;border:1.5px solid var(--line);border-radius:999px}.call i{font-size:20px}.logo{font-size:21px}}

/* bento tiles link to their own page */
.tile .more{margin-top:12px;font-weight:600;color:var(--accent);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;display:inline-flex;align-items:center;gap:6px;min-height:44px;align-self:flex-start;position:relative}
.tile .more i{font-size:18px;padding:0;margin:0;color:inherit}
.t-dia .more{color:var(--accent-ink)}
.easy-row{margin-top:8px}

/* ---------- treatment pages ---------- */
.page-hero{padding:36px 0 64px}
.crumbs{font-size:15px;color:var(--ink-2);display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.crumbs a{color:var(--ink-2)}
.page-hero h1{font-size:clamp(34px,4.6vw,56px);line-height:1.08;letter-spacing:-.02em;margin:0 0 18px;max-width:18ch}
.page-hero .lead{font-size:clamp(18px,2vw,21px);color:var(--ink-2);max-width:56ch;margin-bottom:30px}
.page-hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center}
.page-hero figure{margin:0}
.page-hero figure img{width:100%;height:min(540px,calc(100dvh - 150px));min-height:380px;object-fit:cover;object-position:50% 25%;border-radius:var(--r);box-shadow:var(--shadow)}
.page-hero .wrap:not(:has(figure)){grid-template-columns:1fr}
@media (max-width:860px){.page-hero .wrap{grid-template-columns:1fr;gap:32px}.page-hero figure{max-width:360px}}
.alt-surface{background:var(--surface)}
.prose-sec{padding:72px 0}
.prose{max-width:68ch}
.prose h2{font-size:clamp(26px,3vw,36px);margin:0 0 14px}
.prose p{color:var(--ink-2);margin:0 0 14px}
.prose ul{color:var(--ink-2);margin:0 0 14px;padding-inline-start:22px}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--accent)}
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:32px}}
.note-box{margin-top:28px;border-radius:var(--r);background:var(--surface-2);padding:22px 24px;display:flex;gap:14px;max-width:68ch;color:var(--ink)}
.note-box i{font-size:26px;color:var(--accent);flex:none;margin-top:2px}
.note-box p{margin:0;color:var(--ink-2)}
.ba.single{grid-template-columns:1fr;max-width:520px;margin-top:0}
.shot-one{max-width:560px;margin:0}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.related a{display:flex;flex-direction:column;gap:4px;border-radius:var(--r);padding:24px;background:var(--surface);border:1px solid var(--line);text-decoration:none;transition:border-color 150ms ease,transform 160ms var(--ease-out)}
.related a:active{transform:scale(.98)}
.related b{font:600 19px/1.3 Rubik,sans-serif}
.related span{color:var(--ink-2);font-size:15.5px}
@media (hover:hover) and (pointer:fine){.related a:hover{border-color:var(--ink-2)}}
@media (max-width:760px){.related{grid-template-columns:1fr}}

/* ---------- Russian page ---------- */
html[lang="ru"] body{font-family:Rubik,system-ui,sans-serif;font-size:17px}
html[lang="ru"] h1,html[lang="ru"] h2,html[lang="ru"] h3{letter-spacing:-.01em}
.ru-list{columns:2;column-gap:40px;padding-inline-start:22px;color:var(--ink-2);margin:28px 0 0}
.ru-list li{break-inside:avoid;margin-bottom:10px}
.ru-list b{color:var(--ink)}
@media (max-width:640px){.ru-list{columns:1}}

/* ltr mirror */
html[dir="ltr"] .hours td:last-child{padding-right:0;padding-left:28px;text-align:right}
html[dir="ltr"] .also b{margin-left:0;margin-right:6px}

/* treatments: rehabilitative pedicure leads (Shoshi, 2026-10-25) */
.bento .t-med{grid-column:span 2;background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.bento .t-med i,.bento .t-med p{color:inherit}
.bento .t-med p{opacity:.92;font-size:18px}
.bento .t-med h3{font-size:clamp(26px,2.8vw,34px);margin-bottom:10px}
.bento .t-dia{grid-column:span 2;grid-row:auto;background:var(--accent-soft);color:var(--ink)}
.bento .t-dia i,.bento .t-dia .note i{color:var(--accent)}
.bento .t-dia p{color:var(--ink-2);opacity:1;font-size:16.5px}
.bento .t-dia h3{font-size:21px;margin-bottom:6px}
.bento .t-dia .note{color:var(--ink-2);opacity:1}
.bento .t-dia .more{color:var(--accent)}
.bento .t-heel{grid-column:span 4;min-height:220px}
@media (max-width:900px){.bento .t-heel{grid-column:span 2}}

/* trust strip: six items in two rows */
.trust ul{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.trust ul{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.trust ul{grid-template-columns:1fr}}

/* before/after: three per row on wide screens */
@media (min-width:900px){.ba:not(.single){grid-template-columns:repeat(3,1fr)}}

/* gel work: a quiet scrollable strip */
.gel-row{list-style:none;margin:20px 0 0;padding:0 0 6px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.gel-row li{flex:0 0 auto;scroll-snap-align:start}
.gel-row img{height:180px;width:auto;border-radius:var(--r);cursor:zoom-in}
@media (max-width:560px){.gel-row img{height:150px}}

/* award */
.award .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center}
.award figure{margin:0}
.award img{border-radius:var(--r);box-shadow:var(--shadow);max-height:520px;margin:0 auto;cursor:zoom-in}
@media (max-width:860px){.award .wrap{grid-template-columns:1fr;gap:32px}.award figure{max-width:320px}}

/* portrait photos keep their proportions when height is capped */
/* the photo fills a width-capped frame: it has a size before it loads (so lazy loading can fire) and keeps its proportions */
.award img,.cert img{width:100%;height:auto;max-height:none;max-width:100%}
.award figure{width:100%;max-width:300px;margin:0 auto}
.cert figure{width:100%;max-width:320px;margin:0 auto}

/* ---------- Apple-style refinements ---------- */
:root{--ease-sheet:cubic-bezier(.32,.72,0,1)}

/* lightbox: closing lands on the thumbnail, so the dialog itself must not fade on top of that */
dialog#lb.closing{transition-duration:0s}
dialog#lb.closing::backdrop{opacity:0;transition:opacity 300ms ease}

/* header as a material: stronger frost, and a soft scroll-edge shadow instead of a hard line */
header.top{backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%)}
header.top.stuck{border-bottom-color:transparent}
header.top::after{content:"";position:absolute;inset:100% 0 auto;height:16px;pointer-events:none;
  background:linear-gradient(color-mix(in srgb,var(--ink) 8%,transparent),transparent);opacity:0;transition:opacity 200ms ease}
header.top.stuck::after{opacity:1}

/* instant response on press for anything that opens */
.cert img,.award img,.gel-row img,.shot img{transition:transform 140ms var(--ease-out)}
[data-zoom]:active{transform:scale(.98)}

/* tracking by size: small text breathes a little */
.ba p,.shot figcaption span,.crumbs,footer.site,.trust li,.cert small,.note-box p,.featured figcaption,.related span{letter-spacing:.01em}
h3{letter-spacing:-.01em}

@media (prefers-reduced-transparency:reduce){
  header.top{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-contrast:more){
  :root{--ink-2:var(--ink);--line:color-mix(in srgb,var(--ink) 45%,transparent)}
  header.top{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--ink)}
  header.top::after{display:none}
}