/* Kaolin Dental Atelier: tokens, type, shared components (header, menu, dropdown, call modal, preloader, footer) */
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/bodoni-moda-latin.woff2) format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(../fonts/bodoni-moda-italic-latin.woff2) format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/hanken-grotesk-latin.woff2) format("woff2"); }

:root {
  --viewport: 1440;
  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ink: #111816;
  --ink-grad: linear-gradient(180deg, #27302c, #020403);
  --porcelain: #ece9e3;
  --porcelain-40: rgba(236, 233, 227, .56);
  --porcelain-60: rgba(236, 233, 227, .62);
  --porcelain-15: rgba(236, 233, 227, .15);
  --bisque: #d9d2c7;
  --slate: #3c413f;
  --slate-40: rgba(60, 65, 63, .4);
  --slate-60: rgba(60, 65, 63, .8);
  --slate-10: rgba(60, 65, 63, .12);
  --clay: #6e6a63;
  --celadon: #9db4a7;
  --error: #d6453d;
  --ease: cubic-bezier(.24, 1, .36, 1);
  --ease-out-quint: cubic-bezier(.22, 1, .36, 1);
  --ease-menu: cubic-bezier(.6, .14, 0, 1);
  --fade-ink: linear-gradient(180deg, #11181600, #11181608 12%, #11181612 22%, #1118161f 30%, #1118162e 36%, #1118163d 41%, #1118164f 45%, #11181663 48%, #11181675 51%, #1118168a 55%, #1118169e 59%, #111816b3 64%, #111816c7 70%, #111816db 78%, #111816ed 88%, #111816);
}
@media (max-width: 1023px) { :root { --viewport: 375; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: calc(16 / var(--viewport) * 100vw); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--ink); color: var(--slate); font-family: var(--serif); overflow-x: clip; -webkit-tap-highlight-color: transparent; }
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body { min-height: 100vh; background: var(--porcelain); }
body.is-locked { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; }
input, textarea { background: none; border: 0; color: inherit; font: inherit; outline: none; }
ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
legend { padding: 0; }
i, em { font-style: italic; }
.inner-img { width: 100%; height: 100%; object-fit: cover; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 40; background: var(--porcelain); color: var(--ink); padding: .75rem 1.25rem; border-radius: 4rem; font: 700 .875rem var(--sans); transition: top .3s var(--ease); }
.skip:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--celadon); outline-offset: 3px; border-radius: 2px; }
.on-light :focus-visible, .call-modal :focus-visible { outline-color: #3f6b57; }

/* ---------- type scale (desktop; phone overrides below) ---------- */
.h1 { font: 500 13.9rem/.86 var(--serif); letter-spacing: -.055em; }
.h2 { font: 500 7.7rem/.84 var(--serif); letter-spacing: -.045em; }
.h3 { font: 500 4.2rem/.95 var(--serif); letter-spacing: -.035em; }
.h4 { font: 500 2.8rem/.92 var(--serif); letter-spacing: -.035em; }
.h5 { font: 400 1.8rem/.98 var(--serif); letter-spacing: -.03em; }
.h1 i, .h2 i, .h3 i, .h4 i, .h5 i, .h5_italic { font-style: italic; }
.h5_italic { font-style: italic; }
.p1 { font: 600 1.25rem/1.09 var(--sans); letter-spacing: -.02em; }
.p2 { font: 700 .9375rem/1.13 var(--sans); letter-spacing: -.01em; }
.p3 { font: 400 .9375rem/1.1 var(--sans); letter-spacing: .005em; }
.c0 { font: 700 .9375rem/1.1 var(--sans); letter-spacing: -.01em; }
.c1 { font: 700 .875rem/1.13 var(--sans); letter-spacing: -.02em; }
.c2 { font: 500 .875rem/1.13 var(--sans); letter-spacing: -.005em; }
.c3 { font: 500 .75rem/1.19 var(--sans); }
@media (max-width: 1023px) {
  .h1 { font-size: 5.5rem; line-height: .82; }
  .h2 { font-size: 3.5rem; line-height: .86; letter-spacing: -.04em; }
  .h3 { font-size: 2.45rem; line-height: .94; }
  .h4 { font-size: 2rem; line-height: .92; }
  .h5 { font-size: 1.3rem; line-height: .98; }
  .p1 { font-size: .9375rem; font-weight: 500; }
  .c1 { font-size: 1rem; line-height: 1.03; }
  .c2 { font-size: .75rem; line-height: 1.04; }
  .c3 { line-height: 1.04; }
}

/* ---------- icons ---------- */
.ico { width: 1rem; height: 1rem; position: relative; flex: none; }
.ico svg { width: 100%; height: 100%; }
.ico-plus path { stroke: var(--icon-color, var(--ink)); stroke-width: 1.5; stroke-linecap: round; transition: stroke .3s var(--ease); }

/* arrow that slides out to the top-right and a twin slides in from the bottom-left */
.arrow { width: 1rem; height: 1rem; overflow: hidden; position: relative; flex: none; }
.arrow i { position: absolute; inset: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12 12 4M5.5 4H12v6.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12 12 4M5.5 4H12v6.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat; transition: transform .3s var(--ease); }
.arrow i + i { transform: translate(-100%, 100%); }
@media (hover: hover) {
  .has-arrow:hover .arrow i:first-child { transform: translate(100%, -100%); }
  .has-arrow:hover .arrow i + i { transform: translate(0); }
}

/* ---------- pill button: label rolls up ---------- */
.btn { --btn-bg: var(--porcelain); --btn-color: var(--slate); align-items: center; background: var(--btn-bg); border-radius: 4rem; color: var(--btn-color); display: inline-flex; gap: 1.5rem; padding: 1rem 1.5rem; transition: background .3s var(--ease), color .3s var(--ease); width: max-content; }
.btn.book { justify-content: space-between; width: 12rem; }
.btn .roll { display: block; overflow: hidden; position: relative; }
.btn .roll span { display: inline-block; transition: transform .3s var(--ease); white-space: nowrap; }
.btn .roll span + span { left: 0; position: absolute; top: 105%; }
.btn .ico-plus { --icon-color: var(--btn-color); }
.btn.dark { --btn-bg: var(--ink); --btn-color: var(--porcelain); }
@media (hover: hover) { .btn:hover .roll span { transform: translateY(-105%); } }
@media (max-width: 1023px) { .btn { justify-content: space-between; min-width: 12rem; padding: 1.5rem; } }

/* ---------- text link: roll + underline that runs out and back in ---------- */
.tlink { --link-color: var(--porcelain); color: var(--link-color); display: inline-block; overflow: hidden; position: relative; width: max-content; }
.tlink > span { display: block; transition: transform .8s var(--ease-out-quint); white-space: nowrap; will-change: transform; }
.tlink > span + span { left: 0; position: absolute; top: 100%; }
.tlink.ul { padding-bottom: .125rem; }
.tlink.ul::after, .tlink.ul::before { background: var(--link-color); bottom: 0; content: ""; height: .0625rem; position: absolute; transition: transform .7s var(--ease-out-quint); }
.tlink.ul::after { left: 0; transition-delay: .35s; width: 110%; }
.tlink.ul::before { right: 100%; width: 100%; }
.tlink.dark { --link-color: var(--slate); }
@media (hover: hover) {
  .tlink:hover > span:first-child, [data-hover-link]:hover .tlink > span:first-child { transform: translateY(-110%); }
  .tlink:hover > span + span, [data-hover-link]:hover .tlink > span + span { transform: translateY(-100%); }
  .tlink.ul:hover > span, [data-hover-link]:hover .tlink.ul > span { transform: translateY(-115%); }
  .tlink.ul:hover::after, [data-hover-link]:hover .tlink.ul::after { transform: translate(110%); transition-delay: 0s; }
  .tlink.ul:hover::before, [data-hover-link]:hover .tlink.ul::before { transform: translate(100%); transition-delay: .35s; }
}
@media (max-width: 1023px) { .tlink > span + span, .tlink.ul::before { display: none; } .tlink { overflow: visible; } }

/* circle socials */
.socials { display: flex; gap: .75rem; }
.circle-link { --size: 5rem; align-items: center; background: rgba(60, 65, 63, .4); border-radius: 50%; color: var(--porcelain); display: flex; height: var(--size); justify-content: center; transition: background .3s var(--ease), color .3s var(--ease); width: var(--size); }
.circle-link svg { width: 1.5rem; height: 1.5rem; }
@media (hover: hover) { .circle-link:hover { background: var(--porcelain); color: var(--slate); } }
@media (max-width: 1023px) { .socials { gap: .5rem; } }

/* ---------- logo ---------- */
.logo { align-items: center; display: flex; gap: .75rem; --icon-color: var(--ink); color: var(--icon-color); }
.logo-mark { height: 2.3125rem; width: 4.625rem; }
.logo-mark path { fill: none; stroke: var(--icon-color); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; transition: stroke .3s var(--ease); }
.logo-word { display: flex; flex-direction: column; font: 600 .8125rem/1 var(--sans); letter-spacing: -.01em; transition: color .3s var(--ease); }
.logo-word span + span { font-weight: 500; opacity: .75; }
@media (max-width: 1023px) { .logo-mark { height: 1.5rem; width: 3rem; } .logo-word { font-size: .75rem; } }

/* ---------- header ---------- */
.header { align-items: center; display: flex; justify-content: space-between; left: 0; padding: .75rem 2rem; pointer-events: none; position: fixed; top: 0; transition: transform .3s var(--ease), background-color .3s var(--ease); width: 100%; z-index: 10; --hdr-ink: var(--ink); --hdr-light: var(--porcelain); }
.header > * { pointer-events: auto; }
.header.hide { transform: translateY(-105%); }
.header:focus-within { transform: none; }
.header .left-part { align-items: center; display: flex; gap: 7.75rem; }
.header .logo { --icon-color: var(--hdr-ink); }
.header-controls { display: flex; gap: 2rem; }
.header-btn { align-items: center; color: var(--hdr-ink); display: flex; gap: .5rem; transition: color .3s var(--ease); }
.header-btn.menu { gap: .375rem; }
.icon-menu { height: .75rem; overflow: hidden; width: .75rem; }
.icon-menu path { stroke: var(--hdr-ink); stroke-width: 1.4; stroke-linecap: round; transition: transform .9s cubic-bezier(.24, .43, .15, .97); }
.icon-menu .n2 { transition-delay: .15s; } .icon-menu .n3 { transition-delay: .3s; }
.icon-menu .line { transform: translate(-170%); }
@media (hover: hover) { .header-btn.menu:hover path:not(.line) { transform: translate(170%); } .header-btn.menu:hover .line { transform: translate(0); } }
.chev { height: .75rem; overflow: hidden; position: relative; width: .75rem; }
.chev svg { height: 100%; left: 0; position: absolute; top: 0; transition: transform .3s var(--ease); width: 100%; }
.chev svg path { stroke: var(--hdr-ink); stroke-width: 1.4; stroke-linecap: round; fill: none; }
.chev svg + svg { transform: translateY(-100%); }
@media (hover: hover) { .header-btn.service:hover .chev svg:first-child { transform: translateY(100%); } .header-btn.service:hover .chev svg + svg { transform: translateY(0); } }
.header .right-part { align-items: center; color: var(--hdr-light); display: flex; gap: 1.75rem; }
.patient-link { align-items: center; display: flex; gap: .125rem; color: var(--hdr-light); transition: color .3s var(--ease); }
.patient-link .arrow { height: .875rem; width: .875rem; }
.phone-list { align-items: center; color: var(--theme, var(--hdr-light)); display: flex; padding: 0 .75rem; position: relative; transition: color .4s var(--ease); }
.phone-list-btn { align-items: center; display: flex; gap: .375rem; position: relative; z-index: 2; }
.phone-list-btn::after, .phone-list-item::after { bottom: 0; content: attr(data-title); font: 500 .625rem/1 var(--sans); left: 0; opacity: .6; position: absolute; transform: translateY(calc(100% + .125rem)); }
.phone-list .chev svg path { stroke: currentColor; }
.phone-list-content { background: var(--porcelain); border: 1px solid var(--slate-10); border-radius: 0 0 1.875rem 1.875rem; clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); display: flex; flex-direction: column; gap: 1.75rem; left: 0; padding: 4.5rem .75rem 2.5rem; pointer-events: none; position: absolute; top: -2rem; transition: clip-path .8s var(--ease-menu); width: 100%; z-index: 1; }
.phone-list-item { position: relative; color: var(--slate); }
.phone-list:hover, .phone-list:focus-within { --theme: var(--slate); }
.phone-list:hover .phone-list-content, .phone-list:focus-within .phone-list-content { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); pointer-events: auto; }
.phone-list:hover .chev svg:first-child { transform: translateY(100%); } .phone-list:hover .chev svg + svg { transform: translateY(0); }
.header .btn.book { --btn-bg: var(--porcelain); --btn-color: var(--slate); }
.header.on-dark { --hdr-ink: var(--porcelain); }
.header.bg { background: var(--porcelain); --hdr-light: var(--slate); }
.header.bg .btn.book, .header.dark-btn .btn.book { --btn-bg: var(--ink); --btn-color: var(--porcelain); }
.header.bg.on-dark { --hdr-ink: var(--ink); }
.header.dark-right { --hdr-light: var(--slate); }
.header .flex-mob { display: none; }
.mob-circle { align-items: center; border-radius: 50%; display: flex; height: 2.5rem; justify-content: center; width: 2.5rem; }
.mob-circle.call { background: var(--bisque); color: var(--ink); }
.mob-circle.menu { background: var(--ink); color: var(--porcelain); }
.mob-circle svg { width: 1rem; height: 1rem; }
@media (max-width: 1023px) {
  .header { padding: .75rem 1rem; }
  .header-controls, .header .right-part { display: none; }
  .header .flex-mob { align-items: center; display: flex; gap: .5rem; }
}

/* ---------- full menu ---------- */
.site-menu { height: 100dvh; isolation: isolate; left: 0; overflow: hidden; pointer-events: none; position: fixed; top: 0; visibility: hidden; transition: visibility 0s .9s; width: 100%; z-index: 12; }
.site-menu.active { pointer-events: auto; visibility: visible; transition-delay: 0s; }
.site-menu .bg { background: var(--ink); height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; transform: scaleY(0); transform-origin: 50% 0; transition: transform .8s var(--ease-menu); width: 100%; z-index: -1; }
.site-menu .bg::before { background: radial-gradient(40% 45% at 30% 60%, #2f3b35 0%, #1b2420 45%, transparent 75%); content: ""; height: 120%; left: -10%; opacity: .9; position: absolute; top: -10%; width: 120%; animation: menuGlow 18s ease-in-out infinite alternate; }
@keyframes menuGlow { to { transform: translate(12%, -8%) rotate(8deg); } }
.site-menu.active .bg { transform: scaleY(1); transition-duration: 1s; }
.menu-content { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); display: flex; height: 100%; justify-content: space-between; left: 0; padding: 2rem; position: absolute; top: 0; transition: clip-path .8s var(--ease-menu); width: 100%; }
.site-menu.active .menu-content { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition-duration: 1s; }
.anim-part { transform: translateY(-55dvh); transition: transform .8s var(--ease-menu); }
.site-menu.active .anim-part { transform: translateY(0); transition-duration: 1s; }
.site-menu .left-top { align-items: center; display: flex; gap: 7.75rem; height: 4.5rem; left: 0; padding: .75rem 2rem; position: absolute; top: 0; width: 50%; }
.site-menu .logo { --icon-color: var(--porcelain); }
.btn-close-menu { align-items: center; color: var(--porcelain); display: flex; gap: .5rem; }
.icon-cross { height: 1rem; transition: transform .3s var(--ease); width: 1rem; }
.icon-cross path { stroke: var(--icon-color, var(--porcelain)); stroke-width: 1.5; stroke-linecap: round; }
@media (hover: hover) { .btn-close-menu:hover .icon-cross, .btn-x:hover .icon-cross, .btn-x:hover .x-circle { transform: rotate(180deg); } }
.site-menu .contacts { margin-top: auto; width: 16rem; }
.site-menu .socials .circle-link { --size: 5rem; }
.common-links { margin-top: 4rem; }
.common-link { align-items: center; border-bottom: 1px solid var(--porcelain-15); color: var(--porcelain); display: flex; justify-content: space-between; padding: 1.5rem 0; width: 100%; }
.common-links li:first-child .common-link { border-top: 1px solid var(--porcelain-15); }
.site-menu nav { color: var(--porcelain); display: flex; flex-direction: column; height: 100%; width: 44rem; }
.site-menu .svc-row { display: flex; gap: 2rem; margin: 2rem 0 4.5rem; }
.site-menu .svc { display: block; height: 8.75rem; position: relative; width: 8.75rem; }
.site-menu .svc-img { height: 100%; overflow: hidden; }
.site-menu .svc-img img { transition: transform .3s var(--ease); }
.site-menu .svc-name { color: var(--porcelain); left: 0; position: absolute; top: calc(100% + .5rem); width: 120%; }
@media (hover: hover) { .site-menu .svc:hover img { transform: scale(1.1); } }
.page-links { display: grid; gap: 1rem 2.5rem; grid-template-columns: 1.15fr 1fr; margin-top: auto; }
.page-links li:nth-child(2), .page-links li:nth-child(4) { transform: translate(-2rem); }
.page-links .tlink { padding: .5rem .25rem; }
.page-links .tlink > span + span { font-style: italic; }
@media (hover: hover) { .page-links .tlink:hover > span:first-child { transform: translateY(calc(-100% - 1rem)); } .page-links .tlink:hover > span + span { transform: translateY(calc(-100% - .5rem)); } }
.site-menu .mob-only { display: none; }
@media (max-width: 1023px) {
  .site-menu { overflow: auto; overscroll-behavior: none; }
  .menu-content { background: var(--ink); flex-direction: column-reverse; height: auto; min-height: 100%; justify-content: flex-end; overflow: auto; padding: 5.5rem 1rem 2rem; }
  .site-menu .left-top { justify-content: space-between; padding: .75rem 1rem; position: fixed; width: 100%; z-index: 1; gap: 0; }
  .btn-close-menu .c1 { display: none; }
  .btn-close-menu { background: var(--porcelain); border-radius: 50%; height: 2.5rem; justify-content: center; width: 2.5rem; --icon-color: var(--ink); }
  .site-menu nav { height: auto; margin-top: 3rem; width: 100%; }
  .site-menu nav > p, .site-menu .svc-row, .common-links { display: none; }
  .page-links { align-items: center; display: flex; flex-direction: column; gap: .25rem; margin: 0; }
  .page-links li:nth-child(2), .page-links li:nth-child(4) { transform: none; }
  .site-menu .contacts { display: flex; flex-direction: column-reverse; margin-top: 3rem; width: 100%; }
  .site-menu .socials { margin: 0 auto; } .site-menu .socials .circle-link { --size: 4rem; }
  .site-menu .mob-only { display: flex; }
  .mob-bottom-links { align-items: center; justify-content: space-between; margin-bottom: 2.5rem; }
  .site-menu .book-mob { margin: 2rem auto 0; }
  .btn-service { margin-left: 50%; position: relative; transform: translate(-50%); display: flex !important; }
  .btn-service .chevron { height: 1rem; left: calc(100% + .5rem); position: absolute; top: 50%; transform: translateY(-30%); transition: transform .4s var(--ease); width: 1rem; }
  .btn-service[aria-expanded="true"] .chevron { transform: translateY(-30%) rotate(180deg); }
  .wrap-links-mob { height: 0; overflow: hidden; width: 100%; transition: height .5s var(--ease), margin .5s var(--ease); }
  .wrap-links-mob a { border-top: 1px solid var(--porcelain-15); display: block; padding: 1rem 0; text-align: center; width: 100%; }
  .wrap-links-mob a:last-child { border-bottom: 1px solid var(--porcelain-15); }
}
@media (min-width: 1024px) { .btn-service, .wrap-links-mob { display: none !important; } }

/* ---------- services dropdown ---------- */
.services-menu { height: 100dvh; left: 0; opacity: 0; overflow: hidden; position: fixed; top: 0; transition: opacity 0s .45s, visibility 0s .45s; visibility: hidden; width: 100%; z-index: 15; }
.services-menu.active { opacity: 1; transition-delay: 0s; visibility: visible; }
.services-menu .overlay { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(17, 24, 22, .5); height: 100%; left: 0; opacity: 0; position: absolute; top: 0; transition: opacity .45s var(--ease-menu); width: 100%; }
.services-menu.active .overlay { opacity: 1; }
.services-menu .panel { background: var(--porcelain); border-radius: 0 0 1.875rem 1.875rem; clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); height: 16.5rem; left: 18.1875rem; position: absolute; top: 0; transition: clip-path .45s var(--ease-menu); width: 58.75rem; }
.services-menu.active .panel { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.services-menu .btn-close { align-items: center; color: var(--slate); display: flex; gap: .25rem; left: 1.5rem; position: absolute; top: 1.75rem; --icon-color: var(--slate); }
.services-menu .wrap-cross { transition: transform .3s var(--ease); }
@media (hover: hover) { .services-menu .btn-close:hover .wrap-cross { transform: rotate(180deg); } }
.services-menu .list { display: flex; margin-left: 11rem; margin-top: 1rem; }
.services-menu .card { border-radius: 1.5rem; color: var(--slate); display: flex; flex-direction: column; gap: 1rem; overflow: hidden; padding: 1rem; position: relative; transition: background .3s var(--ease), color .3s var(--ease); width: 11.5rem; }
.services-menu .card-img { aspect-ratio: 1; overflow: hidden; transition: border-radius .3s var(--ease); }
.services-menu .card-img img { transition: transform .3s var(--ease); }
.services-menu .card .arrow { bottom: 1rem; height: .75rem; position: absolute; right: 1rem; width: .75rem; }
@media (hover: hover) { .services-menu .card:hover { background: var(--ink); color: var(--porcelain); } .services-menu .card:hover .card-img { border-radius: .5rem; } .services-menu .card:hover img { transform: scale(1.05); } }
@media (max-width: 1023px) { .services-menu { display: none; } }

/* ---------- call modal ---------- */
.call-modal { background: var(--porcelain); display: flex; flex-direction: column; height: 100dvh; justify-content: space-between; left: 0; padding: 1rem 2rem 0; position: fixed; top: 0; transform: translateY(100vh); visibility: hidden; width: 100%; z-index: 16; overflow: hidden; }
.call-modal .top { align-items: center; display: flex; justify-content: flex-end; left: 0; padding: 0 2rem; position: absolute; top: 1rem; width: 100%; z-index: 3; }
.btn-x { align-items: center; color: var(--slate); display: flex; gap: 1rem; --icon-color: var(--ink); }
.x-circle { align-items: center; background: var(--bisque); border-radius: 50%; display: flex; height: 3rem; justify-content: center; transition: transform .3s var(--ease); width: 3rem; }
.call-modal .content { display: flex; flex-direction: column; margin-left: auto; position: relative; z-index: 1; padding-top: 4rem; }
.call-modal .form-title { margin: 0 0 2rem; width: 18.375rem; color: var(--slate); }
.call-modal .title { bottom: -1.25rem; color: #fff; left: 2rem; mix-blend-mode: difference; position: absolute; z-index: 1; white-space: nowrap; }
.call-modal .bg-blob { bottom: -30rem; filter: blur(4.5rem); height: 45rem; left: -10rem; pointer-events: none; position: absolute; width: 90rem; }
.call-modal .bg-blob span { background: radial-gradient(closest-side, #111816 0%, #1d2723 55%, transparent 100%); border-radius: 50%; position: absolute; }
.call-modal .bg-blob span:nth-child(1) { height: 70%; left: 0; top: 20%; width: 55%; animation: blob1 10s ease-in-out infinite alternate; }
.call-modal .bg-blob span:nth-child(2) { height: 60%; left: 35%; top: 30%; width: 50%; animation: blob2 12s ease-in-out infinite alternate; }
.call-modal .bg-blob span:nth-child(3) { height: 80%; left: 60%; top: 25%; width: 45%; animation: blob3 9s ease-in-out infinite alternate; }
@keyframes blob1 { to { transform: translate(15%, 10%) rotate(10deg); } }
@keyframes blob2 { to { transform: translate(-10%, -12%) rotate(-12deg); } }
@keyframes blob3 { to { transform: translate(-20%, 8%); } }
.locations-radio { margin-bottom: 2.5rem; }
.locations-radio > .c2 { color: var(--porcelain-40); }
.on-light .locations-radio > .c2, .call-modal .locations-radio > .c2 { color: var(--slate-60); }
.radios { align-items: center; display: flex; gap: 1.5rem; margin-top: 1rem; }
.loc-label { align-items: center; color: var(--porcelain); cursor: pointer; display: flex; gap: .5rem; position: relative; }
.loc-label input { cursor: pointer; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; z-index: 1; }
.loc-label .radio { border: 1px solid var(--porcelain-40); border-radius: 50%; height: 1.5rem; position: relative; width: 1.5rem; }
.loc-label .radio::after { background: var(--porcelain); border-radius: 50%; content: ""; height: .75rem; left: 50%; opacity: 0; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: opacity .3s var(--ease); width: .75rem; }
.loc-label input:checked + .radio::after { opacity: 1; }
.loc-label input:focus-visible + .radio { outline: 2px solid var(--celadon); outline-offset: 2px; }
.dark-form .loc-label { color: var(--slate); }
.dark-form .loc-label .radio { border-color: var(--slate-10); }
.dark-form .loc-label .radio::after { background: var(--slate); }
.form { display: grid; gap: .5rem; grid-template-columns: 21.375rem 21.375rem 5rem; position: relative; }
.form .f-area { grid-area: 2 / 1 / 3 / 3; }
.form .btn-submit { grid-area: 2 / 3 / 3 / 4; }
.field { border: 1px solid var(--porcelain-15); border-radius: 100rem; display: block; padding: 2rem; position: relative; transition: border-color .3s var(--ease); width: 100%; }
.field input, .field textarea { color: var(--porcelain); height: 100%; left: 0; padding: 0 2rem; position: absolute; top: 0; width: 100%; font: 400 .9375rem/1.1 var(--sans); }
.field textarea { height: calc(100% - 2rem); padding-top: .2rem; resize: none; top: 1rem; overflow-y: auto; }
.field .ph { color: var(--porcelain-60); left: 2rem; pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%); transform-origin: top left; transition: transform .3s var(--ease), opacity .3s var(--ease); font: 400 .9375rem/1.1 var(--sans); }
.field input:focus + .ph, .field input.has-value + .ph { transform: scale(.7) translateY(-200%); }
.field textarea:focus + .ph, .field textarea.has-value + .ph { opacity: 0; }
.field:focus-within { border-color: var(--porcelain); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; }
.dark-form .field { border-color: var(--slate-10); }
.dark-form .field input, .dark-form .field textarea { color: var(--slate); }
.dark-form .field .ph { color: var(--slate-60); }
.dark-form .field:focus-within { border-color: var(--slate); }
.field.error { border-color: var(--error) !important; }
.field.error .ph, .field.error input { color: var(--error) !important; }
.field .msg { position: absolute; left: 2rem; top: calc(100% + .25rem); color: var(--error); font: 500 .75rem/1 var(--sans); opacity: 0; transition: opacity .3s var(--ease); }
.field.error .msg { opacity: 1; }
.btn-submit { min-height: 5rem; min-width: 5rem; }
.btn-submit .circle { align-items: center; background: var(--porcelain); border-radius: 50%; color: var(--ink); display: flex; height: 5rem; justify-content: center; overflow: hidden; position: relative; width: 5rem; transition: transform .3s var(--ease); }
.btn-submit .circle .arrow-r { height: 1.5rem; position: relative; width: 1.5rem; overflow: hidden; }
.btn-submit .circle .arrow-r svg { position: absolute; inset: 0; transition: transform .45s var(--ease); }
.btn-submit .circle .arrow-r svg + svg { transform: translateX(-120%); }
@media (hover: hover) { .btn-submit:hover .arrow-r svg:first-child { transform: translateX(120%); } .btn-submit:hover .arrow-r svg + svg { transform: translateX(0); } }
.btn-submit .txt { display: none; }
.dark-form .btn-submit .circle { background: var(--ink); color: var(--porcelain); }
.btn-submit[disabled] { opacity: .5; pointer-events: none; }
.success { align-items: center; background: var(--ink); border-radius: 2.5rem 2.5rem 0 0; color: var(--porcelain); display: flex; flex-direction: column; gap: 2rem; height: 100%; justify-content: center; left: 0; padding: 1.5rem; position: absolute; top: 0; transform: translateY(100%); transition: transform .5s var(--ease-menu), border-radius .5s var(--ease-menu); width: 100%; z-index: 4; overflow: hidden; }
.success.show { border-radius: 0; transform: none; }
.success::before { background: radial-gradient(50% 40% at 50% 85%, #34443c, transparent 70%); content: ""; inset: 0; position: absolute; z-index: -1; }
.success .logo { --icon-color: var(--porcelain); }
.success .logo-mark { height: 2.3125rem; width: 4.625rem; }
.success .thanks { text-align: center; width: 33.875rem; }
.success .s-top { align-items: center; display: flex; justify-content: space-between; left: 0; padding: 0 1.5rem; position: absolute; top: 1.5rem; width: 100%; }
.success .x-circle { background: var(--porcelain); }
@media (max-width: 1023px) {
  .call-modal { align-items: center; padding: 1rem; }
  .call-modal .top { padding: 0 1rem; }
  .btn-x > span { display: none; }
  .x-circle { height: 2.5rem; width: 2.5rem; }
  .call-modal .content { align-items: center; height: 100%; margin: 0; width: 100%; padding-top: 6rem; }
  .call-modal .mob-sub { color: var(--slate-60); display: block !important; margin-bottom: 1rem; text-align: center; }
  .call-modal .form-title { margin: 0 0 3rem; text-align: center; width: 18rem; }
  .call-modal .title, .call-modal .bg-blob { display: none; }
  .locations-radio { align-items: flex-start; display: grid; grid-template-columns: 6.625rem 10.25rem; justify-content: space-between; margin: auto 0 2rem; width: 100%; }
  .radios { flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 0; }
  .form { gap: 2rem; grid-template-columns: 1fr; justify-items: center; width: 100%; }
  .form .f-area, .form .btn-submit { grid-area: auto; }
  .field { border: 0; border-bottom: 1px solid var(--porcelain-15); border-radius: 0; padding: 1.5rem; }
  .dark-form .field { border-bottom-color: var(--slate-10); }
  .field input, .field textarea { text-align: center; padding: 0 1.5rem; }
  .field .ph { left: 50%; transform: translate(-50%, -50%); }
  .field input:focus + .ph, .field input.has-value + .ph { transform: scale(.7) translate(-50%, -200%); }
  .btn-submit { margin: 1rem 0 2rem; }
  .btn-submit .circle { border-radius: 4rem; height: 4rem; justify-content: space-between; padding: 0 1.5rem; width: 12rem; }
  .btn-submit .txt { display: inline-block; }
  .btn-submit .circle .arrow-r { height: 1rem; width: 1rem; }
  .success { border-radius: 2.5rem 2.5rem 0 0; height: 80%; top: auto; bottom: 0; left: 1rem; width: calc(100% - 2rem); }
  .success.show { border-radius: 2.5rem 2.5rem 0 0; }
  .success .thanks { width: 16.5rem; }
}

/* ---------- locations sheet (phone header call button) ---------- */
.loc-sheet { height: 100dvh; left: 0; pointer-events: none; position: fixed; top: 0; width: 100%; z-index: 11; visibility: hidden; transition: visibility 0s .8s; }
.loc-sheet.active { pointer-events: auto; visibility: visible; transition-delay: 0s; }
.loc-sheet .content { backdrop-filter: blur(.66rem); -webkit-backdrop-filter: blur(.66rem); background: rgba(17, 24, 22, .7); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); display: flex; flex-direction: column; gap: .25rem; height: 100%; justify-content: center; padding: 1rem; transition: clip-path .8s var(--ease-menu); }
.loc-sheet.active .content { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition-duration: 1s; }
.loc-sheet .book { align-items: center; background: var(--slate); border-radius: 4rem; color: var(--porcelain); display: flex; justify-content: space-between; left: 1rem; padding: .75rem 1.25rem; position: absolute; top: .75rem; width: 10rem; white-space: nowrap; --icon-color: var(--porcelain); }
.loc-sheet .close { align-items: center; background: var(--porcelain); border-radius: 50%; display: flex; height: 2.5rem; justify-content: center; position: absolute; right: 1rem; top: .75rem; width: 2.5rem; --icon-color: var(--ink); }
.loc-card { align-items: center; background: var(--porcelain); border-radius: 1.875rem; color: var(--slate); display: flex; flex-direction: column; height: 10.375rem; justify-content: space-between; padding: 1.5rem; text-align: center; }
.loc-card .phone { display: block; margin-top: .5rem; }
.loc-hours { display: flex; width: 100%; }
.loc-hours div { align-items: center; display: flex; flex: 1; flex-direction: column; gap: .5rem; }
.loc-hours div:not(:last-child) { border-right: 1px solid var(--slate-10); }
.loc-hours .c3 { opacity: .6; }

/* ---------- preloader ---------- */
.preloader { background: var(--ink); height: 100dvh; left: 0; position: fixed; top: 0; width: 100%; z-index: 30; }
.preloader .mark { height: 12.5rem; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 12.5rem; }
.preloader .mark svg { overflow: visible; }
.preloader .ring { fill: none; stroke: var(--porcelain); stroke-width: 1.6; stroke-linecap: round; }
.preloader .k path { fill: none; stroke: var(--porcelain); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.preloader .texts { bottom: 2rem; color: var(--porcelain); display: grid; grid-template-columns: repeat(3, 1fr); left: 2rem; position: absolute; width: calc(100% - 4rem); }
.preloader .texts p { opacity: 0; }
.preloader .texts p:nth-child(2) { text-align: center; } .preloader .texts p:nth-child(3) { text-align: right; }
html.seen .preloader { display: none; }
@media (max-width: 1023px) {
  .preloader .mark { height: 10rem; width: 10rem; }
  .preloader .texts { align-items: center; display: flex; flex-direction: column; gap: .25rem; left: 50%; transform: translate(-50%); width: max-content; }
  .preloader .texts p { opacity: .3; }
}

/* ---------- page transition overlay ---------- */
.between-pages { background: rgba(0, 0, 0, .7); height: 100dvh; left: 0; opacity: 0; pointer-events: none; position: fixed; top: 0; visibility: hidden; width: 100%; z-index: 19; }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOld 1.2s cubic-bezier(.6, .14, 0, 1) both; }
::view-transition-new(root) { animation: vtNew 1.15s cubic-bezier(.6, .14, 0, 1) both; }
@keyframes vtOld { to { filter: brightness(.3); } }
@keyframes vtNew { from { transform: translateY(101vh); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* ---------- reveal by lines ---------- */
.line-mask { display: block; overflow: hidden; }
.anim-line { display: block; }
[data-fill] .fill-char { color: inherit; }

/* ---------- footer ---------- */
.footer { z-index: 3; color: var(--porcelain); display: flex; flex-direction: column; height: 81.125rem; isolation: isolate; margin-top: -13.625rem; overflow: hidden; padding: 8rem 2rem 1.5rem; position: relative; width: 100%; }
.footer .bg-circle { background: var(--ink-grad); border-radius: 50%; height: 158.375rem; left: 50%; pointer-events: none; position: absolute; top: 0; transform: translate(-50%) scale(1); transform-origin: center top; width: 158.375rem; z-index: -1; }
.footer .big-logo { margin: 0 auto 8rem; width: 11.875rem; --icon-color: var(--porcelain); }
.footer .big-logo svg { height: 6.1875rem; width: 11.875rem; }
.footer .big-logo path { fill: none; stroke: var(--porcelain); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.f-part { display: grid; grid-template-columns: 1fr 43rem; }
.f-part .left { align-items: flex-start; display: flex; gap: 3rem; }
.footer .form-title { margin-bottom: 5rem; width: 27rem; }
.footer .form { grid-template-columns: 1fr 1fr 5rem; }
.f-mid { margin-top: 4.5rem; }
.f-nav .name, .f-loc .name { color: var(--porcelain-40); display: block; margin-bottom: 2rem; }
.f-nav ul { display: flex; flex-direction: column; gap: .5rem; }
.f-locs { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); }
.f-loc-item { border-left: 1px solid var(--porcelain-15); display: flex; flex-direction: column; height: 10.75rem; justify-content: space-between; padding-left: 1rem; }
.f-loc-item .name-location { margin-bottom: 1rem; }
.f-loc-item .p2 { color: var(--porcelain-60); font-weight: 500; }
.work-hour { align-items: baseline; display: flex; }
.work-hour .days { color: var(--porcelain-40); width: 3.5rem; }
.f-bottom { margin-top: auto; }
.f-bottom .right { align-items: center; display: flex; justify-content: space-between; }
.f-bottom .links { align-items: center; display: flex; gap: .25rem; }
.copyright { color: var(--porcelain-40); }
.f-mob { display: none; }
@media (max-width: 1023px) {
  .footer { background: #020403; height: auto; margin-top: 0; padding: 4.5rem 1rem 1.5rem; }
  .footer .bg-circle { border-radius: 35rem; height: 100%; width: 30.5rem; }
  .footer .big-logo { margin-bottom: 4rem; width: 7.1875rem; }
  .footer .big-logo svg { height: 3.75rem; width: 7.1875rem; }
  .f-part { grid-template-columns: 1fr; }
  .f-top .left, .footer .form, .footer .locations-radio { display: none; }
  .footer .form-title { margin: 0 auto 3.5rem; text-align: center; width: 18rem; }
  .f-mob { display: flex; justify-content: center; }
  .f-mid { gap: 3rem; margin: 7rem 0 2rem; }
  .f-mid .left { display: flex; flex-direction: column; gap: 0; }
  .f-nav { border-top: 1px solid var(--porcelain-15); display: grid; grid-template-columns: 1fr 1fr; padding: 1rem 0; }
  .f-nav .name { color: var(--porcelain); }
  .f-locs { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--porcelain-15); padding-top: 1rem; margin-top: 2rem; }
  .f-loc-item { border-left: 0; border-bottom: 1px solid var(--porcelain-15); height: auto; gap: .75rem; padding: 0 0 1rem; margin-bottom: 1rem; }
  .f-bottom { display: flex; flex-direction: column; gap: 2rem; align-items: center; }
  .f-bottom .right { flex-direction: column; gap: 2rem; }
  .f-bottom .links { flex-direction: column; gap: .5rem; }
  .f-bottom .comma { display: none; }
  .copyright-wrap { text-align: center; }
}