:root{
  --paper:#F7EEEA;
  --porcelain:#FFFAF7;
  --ink:#0F3A3B;
  --ink-soft:#4B6263;
  --teal:#127573;
  --teal-bright:#1C9C9A;
  --dot:#D9312B;
  --dot-deep:#B3241E;
  --line:color-mix(in srgb, var(--ink) 14%, transparent);
  --deep:#0F3A3B;
  --on-deep:var(--paper);
  --on-deep-accent:#8FD3CF;
  --sand:#E9D9D2;
  --display:"Bona Nova", Georgia, "Times New Roman", serif;
  --text:"Arsenal", "Segoe UI", system-ui, sans-serif;
  --wrap:1180px;
  --gutter:clamp(16px, 4vw, 40px);
  --radius:28px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--text);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;margin:0;letter-spacing:-.01em}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--teal-bright);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px;z-index:100}
.skip:focus{left:8px}

/* дрібна «точка» — фірмовий знак, як у її Instagram */
.pt{display:inline-block;width:.62em;height:.62em;border-radius:50%;background:var(--dot);flex:none}
.eyebrow{display:flex;align-items:center;gap:.6em;font:700 13px/1.2 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:0 0 18px}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:52px;padding:0 26px;border-radius:999px;font:700 17px/1 var(--text);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .2s var(--ease),background-color .2s,color .2s,border-color .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:20px;height:20px;flex:none}
.btn-dot{background:var(--dot);color:#fff;box-shadow:0 10px 24px -12px color-mix(in srgb, var(--dot) 70%, transparent)}
.btn-dot:hover{background:var(--dot-deep)}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-light{background:var(--paper);color:var(--ink)}
.btn-light:hover{background:#fff}

/* шапка */
.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb, var(--paper) 86%, transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;height:72px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 22px/1 var(--display);white-space:nowrap}
.logo .pt{width:14px;height:14px}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{text-decoration:none;font-size:16px;color:var(--ink-soft);padding:6px 0;border-bottom:1.5px solid transparent;transition:color .2s,border-color .2s}
.nav a:hover{color:var(--ink);border-bottom-color:var(--dot)}
.tools{display:flex;align-items:center;gap:10px}
.nav + .tools{margin-left:10px}
.lang{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.lang a{min-width:44px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font:700 14px/1 var(--text);text-decoration:none;color:var(--ink-soft);padding:0 10px;transition:background-color .2s,color .2s}
.lang a:hover{color:var(--ink)}
.lang a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.fab{position:fixed;right:16px;bottom:16px;z-index:45;display:none;box-shadow:0 14px 30px -12px color-mix(in srgb, var(--ink) 55%, transparent)}
.fab.show{display:inline-flex}
.music,.mode{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 12px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--ink);font:700 15px/1 var(--text);cursor:pointer;transition:border-color .2s,background-color .2s}
.music:hover,.mode:hover{border-color:var(--ink)}
.music[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.note-ic{width:18px;height:18px}
.music[aria-pressed="true"] .note-ic{display:none}
.music[aria-pressed="false"] .bars{display:none}
.bars{display:inline-flex;align-items:flex-end;gap:2px;height:16px;width:18px}
.bars i{display:block;width:3px;height:30%;background:currentColor;border-radius:2px;transition:height .3s}
.music[aria-pressed="true"] .bars i{animation:bar 1.4s ease-in-out infinite}
.music[aria-pressed="true"] .bars i:nth-child(2){animation-delay:-.45s}
.music[aria-pressed="true"] .bars i:nth-child(3){animation-delay:-.9s}
@keyframes bar{0%,100%{height:25%}50%{height:100%}}
.top .btn{min-height:44px;padding:0 20px;font-size:15px}

/* перший екран */
.hero{padding:clamp(28px,6vw,72px) 0 clamp(56px,8vw,110px)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;grid-template-areas:"text photo";gap:clamp(24px,5vw,72px);align-items:center}
.hero-text{grid-area:text}
.name{font-size:clamp(60px,10.5vw,138px);line-height:.9;margin:0 0 28px}
.lead{font-size:clamp(19px,1.9vw,22px);line-height:1.55;max-width:34em;color:var(--ink)}
.lead b{font-weight:700}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 26px}
.where{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0;list-style:none;font-size:16px;color:var(--ink-soft)}
.where li{display:flex;align-items:center;gap:9px}
.where svg{width:18px;height:18px;color:var(--teal)}

.hero-photo{grid-area:photo;position:relative;justify-self:center;width:min(100%,440px)}
.arch{position:relative;border-radius:999px 999px var(--radius) var(--radius);overflow:hidden;aspect-ratio:4/5;background:var(--sand);box-shadow:0 40px 80px -40px color-mix(in srgb, var(--ink) 45%, transparent)}
.arch img{width:100%;height:100%;object-fit:cover}
.ripple{position:absolute;left:-150px;top:58%;width:300px;height:300px;transform:translateY(-50%);pointer-events:none;overflow:visible}
.ripple circle{fill:none;stroke-width:1.4;transform-box:fill-box;transform-origin:center}
.ripple .r{stroke:var(--dot);animation:ripple 8s cubic-bezier(.15,.6,.35,1) infinite;opacity:0}
.ripple .r:nth-of-type(2){animation-delay:2.66s;stroke:var(--teal-bright)}
.ripple .r:nth-of-type(3){animation-delay:5.33s}
.ripple .core{fill:var(--dot);stroke:none;animation:breathe 6s ease-in-out infinite}
@keyframes ripple{0%{transform:scale(.3);opacity:.85}100%{transform:scale(1);opacity:0}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.playing .ripple .r{animation-duration:5s}
.playing .ripple .r:nth-of-type(2){animation-delay:1.66s}
.playing .ripple .r:nth-of-type(3){animation-delay:3.33s}
.photo-note{position:absolute;right:-6px;bottom:22px;background:var(--porcelain);border-radius:16px;padding:12px 16px;font-size:14px;line-height:1.35;box-shadow:0 18px 40px -22px color-mix(in srgb, var(--ink) 45%, transparent);max-width:220px}
.photo-note b{display:block;font:400 19px/1.1 var(--display);margin-bottom:2px}

/* цитата */
.quote{padding:clamp(56px,9vw,120px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.quote blockquote{margin:0 auto;max-width:880px;font:italic 400 clamp(30px,4.4vw,56px)/1.18 var(--display)}
.quote blockquote::before{content:"";display:block;width:14px;height:14px;border-radius:50%;background:var(--dot);margin:0 auto 28px}
.quote figcaption{margin-top:22px;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

/* секції */
section{scroll-margin-top:84px}
.sec{padding:clamp(64px,9vw,128px) 0}
.sec-head{display:flex;flex-direction:column;max-width:720px;margin-bottom:clamp(32px,5vw,56px)}
.sec-head h2{font-size:clamp(40px,5.6vw,72px)}
.sec-head p{margin:18px 0 0;font-size:19px;color:var(--ink-soft)}

/* про мене */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,6vw,88px);align-items:start}
.about-photo{position:sticky;top:104px}
.about-photo img{border-radius:var(--radius);aspect-ratio:4/5;object-fit:cover;width:100%}
.about-photo figcaption{margin-top:12px;font-size:14px;color:var(--ink-soft)}
.about-photo .role,.about-photo .who{display:block}
.about-photo .who{font:400 20px/1.2 var(--display);color:var(--ink)}
.about-text .big{font:400 clamp(24px,2.6vw,32px)/1.3 var(--display);margin-bottom:.9em}
.about-text p{max-width:36em}
.edu{margin-top:40px;padding-top:30px;border-top:1px solid var(--line)}
.edu h3{font-size:28px;margin-bottom:18px}
.edu ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.edu li{display:grid;grid-template-columns:14px 1fr;gap:14px;align-items:baseline;font-size:17px;line-height:1.45}
.edu li .pt{width:9px;height:9px;transform:translateY(-1px)}
.edu li small{display:block;color:var(--ink-soft);font-size:15px}

/* душа і тіло */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,28px)}
.card{background:var(--porcelain);border-radius:var(--radius);padding:clamp(26px,3.6vw,44px);border:1px solid color-mix(in srgb, var(--ink) 6%, transparent)}
.card-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.card h3{font-size:clamp(40px,4.4vw,56px)}
.card h3 em{font-style:italic}
.tag{font:700 12px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;padding:9px 12px;border-radius:999px;background:color-mix(in srgb, var(--teal) 10%, transparent);color:var(--teal)}
.card.body .tag,.group.body .tag{background:color-mix(in srgb, var(--dot) 9%, transparent);color:var(--dot-deep)}
.list{list-style:none;margin:0;padding:0}
.list li{padding:18px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:14px 1fr;gap:14px}
.list li:first-child{border-top:0;padding-top:0}
.list .pt{width:10px;height:10px;margin-top:9px}
.list h4{margin:0 0 4px;font:700 19px/1.3 var(--text)}
.list p{margin:0;color:var(--ink-soft);font-size:17px;line-height:1.5}
.card.soul .pt{background:var(--teal-bright)}
.note{margin:22px 0 0;padding:16px 18px;border-radius:16px;background:color-mix(in srgb, var(--dot) 6%, transparent);font-size:15.5px;line-height:1.5;color:var(--ink)}

/* програма */
.program{background:var(--deep);color:var(--on-deep);border-radius:clamp(0px,3vw,40px);position:relative;overflow:hidden;margin:0 clamp(0px,2.4vw,32px)}
.program .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,90px);position:relative;z-index:1}
.program .eyebrow{color:var(--on-deep-accent)}
.program h2{font-size:clamp(44px,6vw,80px)}
.program h2 em{display:block;font-style:italic;color:var(--on-deep-accent)}
.program .for{font:400 clamp(21px,2.2vw,26px)/1.35 var(--display);margin:24px 0 18px}
.program p{color:color-mix(in srgb, var(--on-deep) 82%, transparent)}
.incl{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:12px}
.incl li{display:grid;grid-template-columns:14px 1fr;gap:14px;align-items:baseline}
.incl .pt{width:10px;height:10px}
.incl b{font-weight:700;color:var(--on-deep)}
.gives{margin:0 0 30px;padding:22px 24px;border-radius:20px;background:color-mix(in srgb, var(--on-deep) 7%, transparent);border:1px solid color-mix(in srgb, var(--on-deep) 14%, transparent)}
.gives h3{font:700 13px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--on-deep-accent);margin-bottom:14px}
.gives ul{margin:0;padding-left:1.1em;display:grid;gap:6px;color:color-mix(in srgb, var(--on-deep) 90%, transparent)}
.meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.time{font:400 30px/1 var(--display)}
.time small{display:block;font:700 12px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--on-deep-accent);margin-bottom:6px}
.program .big-dot{position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle at 50% 50%,color-mix(in srgb, var(--dot) 95%, transparent) 0 22%,color-mix(in srgb, var(--dot) 18%, transparent) 23% 40%,color-mix(in srgb, var(--dot) 7%, transparent) 41% 62%,transparent 63%);pointer-events:none}

/* як проходить */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px);counter-reset:s}
.steps li{counter-increment:s;padding:30px 0 0;border-top:1.5px solid var(--ink)}
.steps li::before{content:counter(s);display:block;font:italic 400 64px/1 var(--display);color:var(--dot);margin-bottom:14px}
.steps h3{font:700 21px/1.3 var(--text);margin-bottom:8px}
.steps p{color:var(--ink-soft);margin:0}

/* запис */
.book{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.book-card{background:var(--porcelain);border-radius:var(--radius);padding:clamp(26px,3.6vw,44px);border:1px solid color-mix(in srgb, var(--ink) 6%, transparent)}
.me{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.me img{width:76px;height:76px;border-radius:50%;object-fit:cover;object-position:60% 30%}
.me b{display:block;font:400 24px/1.1 var(--display)}
.me span{font-size:15px;color:var(--ink-soft)}
.contacts{display:grid;gap:10px}
.contacts .btn{justify-content:flex-start;width:100%}
.phone{display:block;white-space:nowrap;margin-top:18px;font:400 clamp(28px,3vw,36px)/1 var(--display);text-decoration:none}
.phone:hover{color:var(--dot-deep)}
.contacts .tel{white-space:nowrap}
.calendar{margin-top:8px}
.calendar iframe{width:100%;height:640px;border:0;border-radius:20px;background:#fff}
.book-text h2{font-size:clamp(44px,6vw,76px);margin-bottom:22px}
.book-text p{font-size:19px;color:var(--ink-soft);max-width:30em}

/* підвал */
.foot{padding:48px 0 60px;border-top:1px solid var(--line);font-size:15px;color:var(--ink-soft)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between}
.foot p{margin:0;max-width:40em}
.foot a{color:var(--ink)}


/* палітри (перемикач для вибору: ?themes=1) */
[data-theme="lavanda"]{--paper:#F3F0F6;--porcelain:#FCFBFE;--ink:#2A2138;--ink-soft:#5E5670;--teal:#6E5AA8;--teal-bright:#9C8AD0;--dot:#C8374D;--dot-deep:#A5283D;--deep:#2A2138;--on-deep-accent:#CBBEF0;--sand:#E3DDEB}
[data-theme="bordo"]{--paper:#EFEDEA;--porcelain:#FAF9F7;--ink:#1F1D1C;--ink-soft:#5A5654;--teal:#7A2E3A;--teal-bright:#B0616B;--dot:#8E1F2F;--dot-deep:#6E1623;--deep:#1F1D1C;--on-deep-accent:#E3B5AE;--sand:#E2DDD8}
[data-theme="olyvka"]{--paper:#F2F0E6;--porcelain:#FBFAF4;--ink:#26301F;--ink-soft:#5B6352;--teal:#5E7039;--teal-bright:#8A9A5B;--dot:#A95F1D;--dot-deep:#874B16;--deep:#2F3A26;--on-deep-accent:#D9C27A;--sand:#E4E0CF}
[data-theme="dnipro"]{--paper:#EEF0F1;--porcelain:#FAFBFB;--ink:#13233A;--ink-soft:#4F5B6B;--teal:#2C5E8A;--teal-bright:#5B8DB8;--dot:#C93C2B;--dot-deep:#A83022;--deep:#13233A;--on-deep-accent:#E9C38A;--sand:#DDE2E6}
.themes{position:fixed;left:16px;bottom:16px;z-index:60;background:var(--porcelain);border-radius:18px;padding:12px 14px;box-shadow:0 20px 50px -20px rgba(0,0,0,.45);font-size:14px;max-width:calc(100vw - 32px)}
.themes b{display:block;font:700 12px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px}
.themes div{display:flex;flex-wrap:wrap;gap:8px}
.themes button{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:transparent;border-radius:999px;padding:6px 12px 6px 6px;font:700 13px/1 var(--text);color:var(--ink);cursor:pointer}
.themes button[aria-pressed="true"]{border-color:var(--ink)}
.themes i{display:inline-flex;width:34px;height:20px;border-radius:999px;overflow:hidden}
.themes i span{flex:1}

/* послуги з фото */
.group{margin-top:clamp(28px,4vw,52px)}
.group-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.group-head h3{font-size:clamp(40px,4.4vw,56px)}
.group-head h3 em{font-style:italic}
.cards{display:grid;gap:clamp(14px,2vw,24px)}
.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.svc{display:flex;flex-direction:column;background:var(--porcelain);border-radius:22px;overflow:hidden;border:1px solid color-mix(in srgb, var(--ink) 7%, transparent)}
.svc figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.svc img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.svc:hover img{transform:scale(1.04)}
.svc .txt{padding:18px 20px 22px}
.svc h4{display:flex;align-items:center;gap:10px;margin:0 0 8px;font:700 19px/1.3 var(--text)}
.svc h4 .pt{width:9px;height:9px}
.soul .svc h4 .pt{background:var(--teal-bright)}
.svc p{margin:0;color:var(--ink-soft);font-size:16.5px;line-height:1.5}
@media (max-width:1020px){.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){
  .c3,.c4{grid-template-columns:1fr}
  .svc{flex-direction:row}
  .svc figure{width:38%;flex:none;aspect-ratio:auto;min-height:150px}
  .svc .txt{padding:14px 16px}
  .svc h4{font-size:17px}
  .svc p{font-size:15px}
}




/* компактна кнопка музики: лише іконка динаміка */
.music,.mode{width:44px;padding:0;justify-content:center}
.music svg,.mode svg{width:20px;height:20px}
.music .ic-on{display:none}
.music[aria-pressed="true"] .ic-on{display:block}
.music[aria-pressed="true"] .ic-off{display:none}
.music[aria-pressed="true"] .wv{animation:wave 1.6s ease-in-out infinite}
.music[aria-pressed="true"] .wv2{animation:wave 1.6s ease-in-out .3s infinite}
@keyframes wave{0%,100%{opacity:1}50%{opacity:.25}}





.visual-slot{display:none}


/* поява під час прокрутки */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (max-width:1020px){
  .nav{display:none}
  .tools,.nav + .tools{margin-left:auto}
}
@media (max-width:860px){
  body{font-size:17px}
  .hero .wrap{grid-template-columns:1fr;grid-template-areas:"text" "photo"}
  .hero-photo{width:min(86%,400px);margin-top:10px}
  .ripple{left:-110px;width:220px;height:220px}
  .photo-note{right:-10px;bottom:16px}
  .about{grid-template-columns:1fr}
  .about-photo{position:static;max-width:420px}
  .two,.program .wrap,.book{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .program{border-radius:0}
}
@media (min-width:521px){.fab.show{display:none}}
@media (max-width:520px){
  .top .wrap{gap:10px;height:64px}
  .logo{font-size:19px}
  .music{padding:0 12px}
  .music .lbl{display:none}
  .top .btn{display:none}
  .lang a{min-width:40px;padding:0 8px}
  .cta .btn{width:100%}
  .card h3{font-size:40px}
  .photo-note{font-size:13px;padding:10px 12px;max-width:170px;right:-4px;bottom:12px}
  .photo-note b{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ripple .r{opacity:.35}
  .ripple .r:nth-of-type(1){transform:scale(.45)}
  .ripple .r:nth-of-type(2){transform:scale(.7)}
  .ripple .r:nth-of-type(3){transform:scale(.95)}
  .reveal{opacity:1;transform:none}
}

/* анімації тексту (motion.js): слова й літери — окремі блоки, щоб рухатись; маска для «шторки»; каретка друкарської машинки */
.tm-w,.tm-u,.tm-m{display:inline-block}
.tm-w{white-space:nowrap}
.tm-m{overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.tm-u{position:relative}
.tm-caret::after{content:"";position:absolute;right:-.08em;top:.12em;bottom:.04em;width:2px;background:var(--color-saffron-spark,currentColor)}
.tm-caret-done::after{animation:tm-blink .9s steps(1) 2 forwards}
@keyframes tm-blink{50%{opacity:0}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* до запуску motion.js заголовок першого екрана прихований, щоб не блимнув цілим текстом (запасний показ — через 2.5 с) */
:root[data-mode] .hero .hero-quote:not(.tm-ready),:root[data-mode] .hero .name:not(.tm-ready),:root[data-mode] .d-hero h1:not(.tm-ready){opacity:0;animation:tm-show 0s 2.5s forwards}
:root.tm-off .hero .hero-quote,:root.tm-off .hero .name,:root.tm-off .d-hero h1{opacity:1;animation:none}
@keyframes tm-show{to{opacity:1}}

/* переходи між сторінками: плавна зміна; фото практики «перелітає» з розкритої картки у фото сторінки (View Transitions) */
@view-transition{navigation:auto}
::view-transition-group(svc-photo){animation-duration:.7s;animation-timing-function:cubic-bezier(.2,.75,.15,1)}
::view-transition-old(svc-photo),::view-transition-new(svc-photo){height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}