*, *::before, *::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
img, video{max-width:100%;height:auto;display:block;}
a{text-decoration:none;color:inherit;}
ul, ol{list-style:none;}
button{cursor:pointer;border:none;background:none;font:inherit;}
:root{
--bg-primary:#FEF5F3;
--bg-secondary:#F5F3F0;
--surface:#FFFFFF;
--text-primary:#1A1A1A;
--text-secondary:#6F6F73;
--bg-dark:#181818;
--accent-gold:#C8A84C;
--accent-plum:#413238;
--border:#E8E0DC;
--font-display:'Cormorant Garamond', Georgia, serif;
--font-ui:'Inter', system-ui, -apple-system, sans-serif;
--space-xs:4px;
--space-sm:8px;
--space-md:16px;
--space-lg:32px;
--space-xl:64px;
--space-2xl:96px;
--radius-sm:4px;
--radius-md:8px;
--radius-lg:16px;
--max-w:1200px;
--side-pad:clamp(24px, 5vw, 80px);
--section-pad:clamp(64px, 8vw, 112px);
--shadow-card:0 2px 16px rgba(26, 26, 26, 0.06);
--shadow-card-hover:0 8px 40px rgba(26, 26, 26, 0.12);
--transition:0.22s ease;
}
body{
font-family:var(--font-ui);
font-size:16px;
line-height:1.7;
color:var(--text-primary);
background-color:var(--bg-primary);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.container{
max-width:var(--max-w);
margin:0 auto;
padding:0 var(--side-pad);
}
h1, h2, h3{
font-family:var(--font-display);
font-weight:600;
line-height:1.15;
color:var(--text-primary);
}
h1{font-size:clamp(38px, 5.5vw, 64px);}
h2{font-size:clamp(30px, 4vw, 46px);}
h3{font-family:var(--font-ui);font-size:clamp(18px, 2vw, 22px);font-weight:600;}
h4{font-family:var(--font-ui);font-size:17px;font-weight:600;line-height:1.4;}
p{color:var(--text-secondary);line-height:1.75;}
.section-label{
display:inline-block;
font-family:var(--font-ui);
font-size:12px;
font-weight:600;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--accent-gold);
margin-bottom:12px;
}
.section-label--light{color:rgba(254,245,243,0.6);}
.section-header{
text-align:center;
max-width:680px;
margin:0 auto var(--space-xl);
}
.section-header .section-title{margin-bottom:16px;}
.section-header .section-sub{font-size:17px;color:var(--text-secondary);}
.btn{
display:inline-flex;
align-items:center;
gap:8px;
padding:14px 28px;
border-radius:var(--radius-sm);
font-family:var(--font-ui);
font-size:14px;
font-weight:600;
letter-spacing:0.05em;
text-transform:uppercase;
transition:all var(--transition);
white-space:nowrap;
min-height:48px;
}
.btn:focus-visible{outline:2px solid var(--accent-gold);outline-offset:2px;}
.btn-primary{
background:var(--text-primary);
color:var(--bg-primary);
}
.btn-primary:hover{background:var(--accent-plum);}
.btn-ghost{
background:transparent;
color:var(--text-primary);
border:1.5px solid var(--border);
}
.btn-ghost:hover{border-color:var(--accent-plum);color:var(--accent-plum);}
.btn-light{
background:var(--bg-primary);
color:var(--text-primary);
}
.btn-light:hover{background:var(--surface);}
.btn-outline-light{
background:transparent;
color:var(--bg-primary);
border:1.5px solid rgba(254,245,243,0.35);
}
.btn-outline-light:hover{
background:rgba(254,245,243,0.1);
border-color:rgba(254,245,243,0.6);
}
section[id]{scroll-margin-top:90px;}
.site-header{
position:fixed;
top:0;left:0;right:0;
z-index:100;
background:var(--bg-primary);
transition:box-shadow var(--transition), background var(--transition);
}
.site-header.scrolled{
box-shadow:0 1px 0 var(--border);
backdrop-filter:blur(8px);
background:rgba(254, 245, 243, 0.95);
}
.header-inner{
max-width:var(--max-w);
margin:0 auto;
padding:0 var(--side-pad);
height:72px;
display:flex;
align-items:center;
gap:40px;
}
.header-logo img{
height:56px;
width:auto;
object-fit:contain;
}
.header-nav{
display:flex;
align-items:center;
gap:32px;
margin-left:auto;
}
.header-nav a{
font-size:15px;
font-weight:500;
color:var(--text-secondary);
transition:color var(--transition);
}
.header-nav a:hover{color:var(--text-primary);}
.header-cta{margin-left:16px;}
.burger{
display:none;
flex-direction:column;
gap:5px;
width:28px;
padding:4px;
margin-left:auto;
}
.burger span{
display:block;
height:2px;
background:var(--text-primary);
border-radius:2px;
transition:all var(--transition);
}
.burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.active span:nth-child(2){opacity:0;}
.burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-menu{
display:none;
position:fixed;
top:72px;left:0;right:0;bottom:0;
background:var(--bg-primary);
padding:40px var(--side-pad);
flex-direction:column;
gap:32px;
z-index:99;
border-top:1px solid var(--border);
}
.mobile-menu.open{display:flex;}
.mobile-nav{
display:flex;
flex-direction:column;
gap:20px;
}
.mobile-nav a{
font-size:22px;
font-family:var(--font-display);
font-weight:600;
color:var(--text-primary);
}
.mobile-cta{align-self:flex-start;margin-top:8px;}
.mobile-phone{
font-size:16px;
font-weight:500;
color:var(--text-secondary);
}
.hero{
padding-top:calc(72px + clamp(48px, 6vw, 80px));
padding-bottom:var(--section-pad);
background:var(--bg-primary);
}
.hero-inner{
max-width:var(--max-w);
margin:0 auto;
padding:0 var(--side-pad);
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}
.hero-content{max-width:520px;}
.hero-content .section-label{margin-bottom:16px;}
.hero-title{
font-size:clamp(42px, 5.5vw, 68px);
line-height:1.05;
margin-bottom:24px;
color:var(--text-primary);
}
.hero-title em{
font-style:italic;
color:var(--accent-plum);
}
.hero-sub{
font-size:18px;
line-height:1.7;
color:var(--text-secondary);
margin-bottom:36px;
max-width:440px;
}
.hero-actions{
display:flex;
align-items:center;
gap:16px;
margin-bottom:36px;
flex-wrap:wrap;
}
.hero-trust{
display:flex;
flex-direction:column;
gap:10px;
}
.hero-trust-item{
display:flex;
align-items:center;
gap:10px;
font-size:14px;
color:var(--text-secondary);
}
.hero-trust-item svg{color:var(--accent-gold);flex-shrink:0;}
.hero-media{position:relative;}
.hero-image-wrap{
position:relative;
border-radius:var(--radius-md);
overflow:hidden;
aspect-ratio:4/5;
background:var(--bg-secondary);
}
.hero-img{
width:100%;
height:100%;
object-fit:cover;
object-position:center 30%;
}
.trust-strip{
padding:48px 0;
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
background:var(--bg-secondary);
}
.trust-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:32px;
text-align:center;
}
.trust-item{
display:flex;
flex-direction:column;
gap:6px;
padding:8px 0;
}
.trust-item + .trust-item{
border-left:1px solid var(--border);
}
.trust-number{
font-family:var(--font-display);
font-size:clamp(36px, 4vw, 52px);
font-weight:600;
color:var(--text-primary);
line-height:1;
}
.trust-number sup{
font-size:0.45em;
vertical-align:super;
font-weight:400;
}
.trust-label{
font-size:13px;
color:var(--text-secondary);
font-weight:500;
}
.services{
padding:var(--section-pad) 0;
background:var(--bg-primary);
}
.services-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:24px;
}
.service-card{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-md);
padding:36px 32px;
box-shadow:var(--shadow-card);
transition:box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.service-card:hover{
box-shadow:var(--shadow-card-hover);
border-color:var(--accent-gold);
transform:translateY(-2px);
}
.service-icon{
width:56px;
height:56px;
background:var(--bg-secondary);
border-radius:var(--radius-md);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:20px;
color:var(--accent-plum);
}
.service-card h3{
font-size:20px;
font-weight:600;
margin-bottom:12px;
color:var(--text-primary);
}
.service-card p{font-size:15px;line-height:1.7;margin-bottom:20px;}
.service-link{
font-size:14px;
font-weight:600;
color:var(--accent-plum);
letter-spacing:0.03em;
transition:color var(--transition);
}
.service-link:hover{color:var(--accent-gold);}
.about{
padding:var(--section-pad) 0;
background:var(--surface);
}
.about-inner{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
}
.about-media{
position:relative;
}
.about-img{
width:100%;
aspect-ratio:4/5;
object-fit:cover;
border-radius:var(--radius-md);
display:block;
}
.about-content .section-label{margin-bottom:12px;}
.about-content h2{margin-bottom:28px;}
.about-text{margin-bottom:36px;}
.about-text p{
font-size:16px;
line-height:1.8;
margin-bottom:16px;
color:var(--text-secondary);
}
.about-text p:first-child{
font-size:18px;
font-weight:500;
color:var(--text-primary);
font-family:var(--font-display);
}
.doctor{
padding:var(--section-pad) 0;
background:var(--bg-secondary);
}
.doctor-inner{
display:grid;
grid-template-columns:380px 1fr;
gap:72px;
align-items:start;
}
.doctor-photo{
position:relative;
border-radius:var(--radius-md);
overflow:hidden;
aspect-ratio:3/4;
background:var(--bg-primary);
}
.doctor-img{
width:100%;
height:100%;
object-fit:cover;
object-position:top center;
}
.doctor-meta{margin-bottom:24px;}
.doctor-name{
font-family:var(--font-display);
font-size:32px;
font-weight:600;
color:var(--text-primary);
margin-bottom:6px;
}
.doctor-title{
font-size:14px;
font-weight:500;
color:var(--accent-gold);
text-transform:uppercase;
letter-spacing:0.07em;
}
.doctor-specs{
display:flex;
flex-direction:column;
gap:12px;
padding:24px 0;
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
margin-bottom:28px;
}
.spec-item{
display:grid;
grid-template-columns:120px 1fr;
gap:16px;
align-items:baseline;
}
.spec-label{
font-size:12px;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.08em;
color:var(--text-secondary);
}
.spec-value{
font-size:15px;
color:var(--text-primary);
font-weight:500;
}
.doctor-bio p{
font-size:15px;
line-height:1.8;
color:var(--text-secondary);
margin-bottom:14px;
}
.equipment{
padding:var(--section-pad) 0;
background:var(--bg-primary);
}
.equipment-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:16px;
}
.equip-item{
display:flex;
align-items:center;
gap:14px;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-md);
padding:18px 20px;
transition:border-color var(--transition), box-shadow var(--transition);
}
.equip-item:hover{
border-color:var(--accent-gold);
box-shadow:var(--shadow-card);
}
.equip-icon{
flex-shrink:0;
width:40px;
height:40px;
background:var(--bg-secondary);
border-radius:var(--radius-sm);
display:flex;
align-items:center;
justify-content:center;
color:var(--accent-plum);
}
.equip-item span{
font-size:14px;
font-weight:500;
color:var(--text-primary);
line-height:1.4;
}
.why-us{
padding:var(--section-pad) 0;
background:var(--surface);
}
.benefits-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:40px 48px;
}
.benefit-item{
padding-left:20px;
border-left:2px solid var(--accent-gold);
}
.benefit-item h4{
color:var(--text-primary);
margin-bottom:10px;
font-size:16px;
}
.benefit-item p{font-size:15px;line-height:1.7;}
.seo-block{
padding:var(--section-pad) 0;
background:var(--bg-primary);
border-top:1px solid var(--border);
}
.seo-inner{
display:grid;
grid-template-columns:1fr 1.4fr;
gap:64px;
align-items:center;
}
.seo-media picture,
.seo-media img{
width:100%;
aspect-ratio:3/4;
object-fit:cover;
object-position:center 40%;
border-radius:var(--radius-md);
display:block;
}
.seo-content h2{
font-size:clamp(26px, 3vw, 38px);
margin-bottom:24px;
line-height:1.25;
}
.seo-content p{
font-size:16px;
line-height:1.8;
color:var(--text-secondary);
margin-bottom:16px;
}
.seo-content p strong{
color:var(--text-primary);
font-weight:500;
}
.seo-cta{
margin-top:32px;
display:flex;
align-items:center;
gap:20px;
flex-wrap:wrap;
}
.seo-hint{
font-size:14px;
color:var(--text-secondary);
}
.process{
padding:var(--section-pad) 0;
background:var(--bg-dark);
}
.process .section-label{color:rgba(254,245,243,0.5);}
.process .section-title{color:var(--bg-primary);}
.process .section-sub{color:rgba(254,245,243,0.5);}
.process-steps{
display:flex;
align-items:flex-start;
gap:0;
margin-bottom:56px;
}
.process-step{
flex:1;
padding:0 24px;
}
.process-step:first-child{padding-left:0;}
.process-step:last-child{padding-right:0;}
.step-num{
display:block;
font-family:var(--font-display);
font-size:56px;
font-weight:600;
color:var(--accent-gold);
opacity:0.35;
line-height:1;
margin-bottom:16px;
}
.process-step h4{
color:var(--bg-primary);
font-size:18px;
margin-bottom:10px;
}
.process-step p{
font-size:14px;
color:rgba(254,245,243,0.55);
line-height:1.7;
}
.process-divider{
width:1px;
background:rgba(254,245,243,0.1);
align-self:stretch;
margin-top:16px;
flex-shrink:0;
}
.process-cta{text-align:center;}
.gallery{
padding:var(--section-pad) 0;
background:var(--bg-secondary);
overflow:hidden;
}
.carousel{
position:relative;
max-width:100%;
overflow:hidden;
}
.carousel-track{
display:flex;
transition:transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change:transform;
cursor:grab;
}
.carousel-track.is-dragging{
transition:none;
cursor:grabbing;
}
.carousel-slide{
flex:0 0 32%;
max-width:32%;
padding:0 8px;
box-sizing:border-box;
}
.carousel-slide picture{display:block;width:100%;height:100%;}
.carousel-slide picture img,
.carousel-slide img{
width:100%;
aspect-ratio:3/4;
object-fit:cover;
object-position:top center;
border-radius:var(--radius-md);
display:block;
user-select:none;
-webkit-user-drag:none;
}
.carousel-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
width:48px;
height:48px;
border-radius:50%;
border:1px solid var(--border);
background:var(--bg-primary);
color:var(--text-primary);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:2;
transition:background 0.2s, box-shadow 0.2s;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.carousel-btn:hover{
background:var(--bg-secondary);
box-shadow:0 4px 16px rgba(0,0,0,0.12);
}
.carousel-btn--prev{left:24px;}
.carousel-btn--next{right:24px;}
.carousel-dots{
display:flex;
justify-content:center;
gap:8px;
margin-top:24px;
padding-bottom:8px;
}
.carousel-dot{
width:10px;
height:10px;
border-radius:50%;
border:1.5px solid var(--accent-plum);
background:transparent;
cursor:pointer;
padding:0;
transition:background 0.2s;
}
.carousel-dot.is-active{
background:var(--accent-plum);
}
.home-blog{
padding:80px 0;
background:var(--color-bg);
}
.home-blog-header{
text-align:center;
margin-bottom:48px;
}
.home-blog-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:28px;
}
.home-blog-card{
background:var(--color-surface);
border-radius:var(--radius-md);
overflow:hidden;
transition:box-shadow 0.25s, transform 0.25s;
}
.home-blog-card:hover{
box-shadow:0 8px 32px rgba(0,0,0,0.10);
transform:translateY(-3px);
}
.home-blog-card-link{
display:flex;
flex-direction:column;
height:100%;
text-decoration:none;
color:inherit;
}
.home-blog-card-thumb{
aspect-ratio:1/1;
overflow:hidden;
background:var(--color-muted);
}
.home-blog-card-thumb img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.4s ease;
}
.home-blog-card:hover .home-blog-card-thumb img{
transform:scale(1.04);
}
.home-blog-card-thumb--empty{
display:flex;
align-items:center;
justify-content:center;
color:var(--color-text-muted);
}
.home-blog-card-body{
padding:24px;
display:flex;
flex-direction:column;
gap:8px;
flex:1;
}
.home-blog-card-date{
font-size:13px;
color:var(--color-text-muted);
font-family:var(--font-sans);
}
.home-blog-card-title{
font-family:var(--font-serif);
font-size:19px;
font-weight:600;
line-height:1.35;
color:var(--color-text);
margin:0;
}
.home-blog-card-excerpt{
font-size:14px;
color:var(--color-text-muted);
line-height:1.6;
flex:1;
}
.home-blog-card-more{
font-size:14px;
font-weight:500;
color:var(--color-accent);
font-family:var(--font-sans);
margin-top:4px;
}
.home-blog-footer{
text-align:center;
margin-top:44px;
}
@media (max-width:1024px){
.home-blog-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:640px){
.home-blog{padding:56px 0;}
.home-blog-grid{grid-template-columns:1fr;gap:20px;}
.home-blog-header{margin-bottom:32px;}
}
.booking{
padding:var(--section-pad) 0;
background:var(--accent-plum);
}
.booking-inner{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
}
.booking-text h2{
color:var(--bg-primary);
margin-bottom:16px;
font-size:clamp(28px, 3.5vw, 44px);
}
.booking-text p{color:rgba(254,245,243,0.65);font-size:17px;}
.booking-actions{
display:flex;
flex-direction:column;
gap:16px;
}
.booking-actions .btn{justify-content:center;}
.booking-phone{
display:flex;
flex-direction:column;
gap:4px;
padding-top:8px;
}
.booking-phone a{
font-size:22px;
font-weight:600;
color:var(--bg-primary);
font-family:var(--font-display);
}
.booking-phone span{
font-size:13px;
color:rgba(254,245,243,0.5);
}
.contacts{
padding:var(--section-pad) 0;
background:var(--bg-primary);
}
.contacts-inner{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:start;
}
.contacts-info .section-label{margin-bottom:12px;}
.contacts-info h2{margin-bottom:36px;}
.contact-list{display:flex;flex-direction:column;gap:24px;}
.contact-row{
display:flex;
align-items:flex-start;
gap:16px;
}
.contact-row svg{
color:var(--accent-gold);
flex-shrink:0;
margin-top:3px;
}
.contact-row > div{
display:flex;
flex-direction:column;
gap:4px;
}
.contact-row strong{
font-size:13px;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.07em;
color:var(--text-secondary);
}
.contact-row span,
.contact-row a{
font-size:16px;
color:var(--text-primary);
font-weight:500;
line-height:1.5;
}
.contact-row a:hover{color:var(--accent-gold);}
.contact-row em{font-size:14px;color:var(--text-secondary);}
.contacts-map{
aspect-ratio:1;
border-radius:var(--radius-md);
overflow:hidden;
background:var(--bg-secondary);
border:1px solid var(--border);
min-height:360px;
}
.contacts-map iframe{
display:block;
width:100%;
height:100%;
}
.site-footer{
background:var(--bg-dark);
color:var(--text-secondary);
}
.footer-inner{
max-width:var(--max-w);
margin:0 auto;
padding:72px var(--side-pad) 48px;
display:grid;
grid-template-columns:260px 1fr;
gap:80px;
}
.footer-logo-img{
filter:brightness(0) invert(1);
opacity:0.85;
height:36px;
width:auto;
margin-bottom:14px;
}
.footer-tagline{
font-size:14px;
color:rgba(111,111,115,0.7);
}
.footer-links{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:40px;
}
.footer-col{
display:flex;
flex-direction:column;
gap:10px;
}
.footer-col h4{
font-size:12px;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.1em;
color:rgba(254,245,243,0.4);
margin-bottom:4px;
}
.footer-col a,
.footer-col span{
font-size:14px;
color:rgba(111,111,115,0.8);
transition:color var(--transition);
line-height:1.5;
}
.footer-col a:hover{color:var(--bg-primary);}
.footer-bottom{
border-top:1px solid rgba(255,255,255,0.06);
}
.footer-bottom-inner{
max-width:var(--max-w);
margin:0 auto;
padding:20px var(--side-pad);
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
}
.footer-bottom-inner span{font-size:13px;color:rgba(111,111,115,0.5);}
.mobile-sticky-bar{
display:none;
position:fixed;
bottom:0;left:0;right:0;
z-index:90;
background:var(--surface);
border-top:1px solid var(--border);
padding:14px 20px;
padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));
gap:12px;
}
.sticky-phone{
display:flex;
align-items:center;
gap:8px;
font-size:14px;
font-weight:600;
color:var(--text-primary);
flex:1;
justify-content:center;
padding:10px;
border:1.5px solid var(--border);
border-radius:var(--radius-sm);
}
.sticky-book{flex:1;justify-content:center;}
.blog-hero{
padding-top:calc(72px + clamp(48px, 6vw, 72px));
padding-bottom:clamp(40px, 5vw, 64px);
background:var(--bg-primary);
text-align:center;
}
.blog-hero-title{
font-size:clamp(34px, 4.5vw, 56px);
line-height:1.1;
margin-bottom:16px;
}
.blog-hero-sub{
font-size:18px;
color:var(--text-secondary);
max-width:520px;
margin:0 auto;
}
.blog-listing{
padding:clamp(40px, 5vw, 64px) 0 var(--section-pad);
background:var(--bg-secondary);
}
.blog-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:28px;
}
.blog-card{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-md);
overflow:hidden;
box-shadow:var(--shadow-card);
transition:box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.blog-card:hover{
box-shadow:var(--shadow-card-hover);
transform:translateY(-3px);
border-color:var(--accent-gold);
}
.blog-card-link{
display:flex;
flex-direction:column;
height:100%;
}
.blog-card-thumb{
aspect-ratio:1/1;
overflow:hidden;
background:var(--bg-secondary);
}
.blog-card-thumb img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.4s ease;
}
.blog-card:hover .blog-card-thumb img{
transform:scale(1.04);
}
.blog-card-thumb--placeholder{
display:flex;
align-items:center;
justify-content:center;
color:var(--border);
}
.blog-card-body{
padding:24px;
display:flex;
flex-direction:column;
flex:1;
}
.blog-card-date{
font-size:12px;
font-weight:500;
text-transform:uppercase;
letter-spacing:0.08em;
color:var(--accent-gold);
margin-bottom:10px;
}
.blog-card-title{
font-family:var(--font-display);
font-size:clamp(20px, 2vw, 24px);
font-weight:600;
line-height:1.25;
color:var(--text-primary);
margin-bottom:10px;
}
.blog-card-excerpt{
font-size:15px;
line-height:1.65;
color:var(--text-secondary);
margin-bottom:16px;
flex:1;
}
.blog-card-more{
font-size:14px;
font-weight:600;
color:var(--accent-plum);
letter-spacing:0.03em;
transition:color var(--transition);
}
.blog-card:hover .blog-card-more{color:var(--accent-gold);}
.blog-pagination{
display:flex;
justify-content:center;
align-items:center;
gap:8px;
margin-top:clamp(40px, 5vw, 64px);
}
.blog-pagination a,
.blog-pagination span{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:40px;
height:40px;
padding:0 12px;
border-radius:var(--radius-sm);
font-size:14px;
font-weight:500;
transition:all var(--transition);
}
.blog-pagination a{
color:var(--text-secondary);
border:1px solid var(--border);
background:var(--surface);
}
.blog-pagination a:hover{
border-color:var(--accent-plum);
color:var(--accent-plum);
}
.blog-pagination .current{
background:var(--text-primary);
color:var(--bg-primary);
border:1px solid var(--text-primary);
}
.blog-empty{
text-align:center;
padding:var(--space-xl) 0;
}
.blog-empty h2{
margin-bottom:12px;
}
.single-post{background:var(--bg-primary);}
.single-hero{
padding-top:calc(72px + clamp(40px, 5vw, 72px));
padding-bottom:clamp(32px, 4vw, 48px);
}
.single-back{
display:inline-block;
font-size:14px;
font-weight:500;
color:var(--text-secondary);
margin-bottom:24px;
transition:color var(--transition);
}
.single-back:hover{color:var(--accent-plum);}
.single-title{
font-size:clamp(32px, 4.5vw, 52px);
line-height:1.1;
margin-bottom:16px;
max-width:800px;
}
.single-excerpt{
font-size:18px;
color:var(--text-secondary);
max-width:640px;
line-height:1.65;
}
.single-featured{margin-bottom:clamp(32px, 4vw, 56px);}
.single-featured-wrap{
border-radius:var(--radius-md);
overflow:hidden;
aspect-ratio:1/1;
}
.single-featured-img{
width:100%;
height:100%;
object-fit:cover;
}
.single-content{
padding-bottom:clamp(40px, 5vw, 64px);
}
.single-body{
max-width:720px;
font-size:17px;
line-height:1.8;
color:var(--text-primary);
}
.single-body h2{
font-size:clamp(24px, 3vw, 32px);
margin:48px 0 16px;
}
.single-body h3{
font-size:clamp(20px, 2.5vw, 24px);
margin:36px 0 12px;
}
.single-body p{
margin-bottom:20px;
color:var(--text-primary);
}
.single-body ul, .single-body ol{
margin:0 0 20px 24px;
list-style:revert;
}
.single-body li{
margin-bottom:8px;
line-height:1.7;
}
.single-body img{
border-radius:var(--radius-md);
margin:32px 0;
}
.single-body blockquote{
border-left:3px solid var(--accent-gold);
padding:16px 0 16px 24px;
margin:32px 0;
font-family:var(--font-display);
font-size:20px;
font-style:italic;
color:var(--accent-plum);
line-height:1.5;
}
.single-body a{
color:var(--accent-plum);
text-decoration:underline;
text-underline-offset:2px;
}
.single-body a:hover{color:var(--accent-gold);}
.single-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:40px;
padding-top:24px;
border-top:1px solid var(--border);
max-width:720px;
}
.single-tag{
font-size:13px;
font-weight:500;
color:var(--text-secondary);
background:var(--bg-secondary);
padding:6px 14px;
border-radius:20px;
transition:all var(--transition);
}
.single-tag:hover{
background:var(--accent-plum);
color:var(--bg-primary);
}
.single-nav{
border-top:1px solid var(--border);
padding:clamp(32px, 4vw, 48px) 0;
background:var(--bg-secondary);
}
.single-nav-inner{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
}
.single-nav-link{
display:flex;
flex-direction:column;
gap:6px;
padding:20px 24px;
border:1px solid var(--border);
border-radius:var(--radius-md);
background:var(--surface);
transition:all var(--transition);
}
.single-nav-link:hover{
border-color:var(--accent-gold);
box-shadow:var(--shadow-card);
}
.single-nav-next{text-align:right;}
.single-nav-label{
font-size:12px;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.08em;
color:var(--accent-gold);
}
.single-nav-title{
font-family:var(--font-display);
font-size:18px;
font-weight:600;
color:var(--text-primary);
line-height:1.3;
}
@media (min-width:1440px){
:root{--side-pad:100px;}
.hero-inner{gap:80px;}
.doctor-inner{grid-template-columns:420px 1fr;gap:96px;}
}
@media (max-width:1199px){
.doctor-inner{grid-template-columns:320px 1fr;gap:48px;}
.footer-inner{grid-template-columns:220px 1fr;gap:48px;}
.footer-links{gap:24px;}
.trust-grid{gap:16px;}
.benefits-grid{gap:28px 36px;}
}
@media (max-width:1024px){
:root{--section-pad:clamp(56px, 7vw, 96px);}
.blog-grid{grid-template-columns:repeat(2, 1fr);}
.hero-inner{gap:40px;}
.hero-image-wrap{aspect-ratio:3/4;}
.about-inner{grid-template-columns:1fr;gap:40px;}
.about-media{order:-1;}
.about-img{aspect-ratio:16/9;}
.about-img-block{min-height:0;}
.equipment-grid{grid-template-columns:repeat(3, 1fr);}
.benefits-grid{grid-template-columns:repeat(2, 1fr);gap:28px 40px;}
.booking-inner{grid-template-columns:1fr;gap:40px;}
.booking-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.booking-phone{
grid-column:span 2;
flex-direction:row;
align-items:center;
gap:16px;
padding-top:0;
}
.contacts-inner{grid-template-columns:1fr;gap:40px;}
.contacts-map{aspect-ratio:16/9;min-height:280px;}
.footer-inner{grid-template-columns:1fr;gap:40px;}
.footer-links{grid-template-columns:repeat(3, 1fr);gap:32px;}
}
@media (max-width:900px){
.hero-inner{grid-template-columns:1fr;gap:36px;}
.hero-content{max-width:100%;}
.hero-media{order:-1;}
.hero-image-wrap{
aspect-ratio:3/4;
max-height:420px;
border-radius:var(--radius-md);
}
.hero-title{font-size:clamp(36px, 6vw, 52px);}
.seo-inner{grid-template-columns:1fr;gap:40px;}
.seo-media picture,
.seo-media img{aspect-ratio:4/3;max-height:400px;}
.doctor-inner{grid-template-columns:1fr;gap:40px;}
.doctor-photo{
aspect-ratio:3/2;
max-height:360px;
border-radius:var(--radius-md);
}
.doctor-img{object-position:top center;}
}
@media (max-width:768px){
:root{
--side-pad:20px;
--section-pad:56px;
}
.header-inner{height:64px;gap:0;}
.header-nav, .header-cta{display:none;}
.burger{display:flex;}
.mobile-menu{top:64px;}
.trust-strip{padding:36px 0;}
.trust-grid{
grid-template-columns:repeat(2, 1fr);
gap:0;
}
.trust-item{
padding:20px 16px;
border:none;
border-right:none !important;
}
.trust-item:nth-child(1){border-right:1px solid var(--border) !important;border-bottom:1px solid var(--border);}
.trust-item:nth-child(2){border-bottom:1px solid var(--border);}
.trust-item:nth-child(3){border-right:1px solid var(--border) !important;}
.trust-item + .trust-item{border-left:none;}
.section-header{max-width:100%;margin-bottom:40px;}
.blog-hero{padding-top:calc(64px + 36px);padding-bottom:32px;}
.blog-hero-title{font-size:clamp(26px, 7vw, 38px);}
.blog-grid{grid-template-columns:1fr;gap:20px;}
.blog-card-thumb{aspect-ratio:16/10;}
.blog-card-title{font-size:20px;}
.blog-card-body{padding:20px 16px;}
.single-nav-inner{grid-template-columns:1fr;}
.single-nav-next{text-align:left;}
.single-hero{padding-top:calc(64px + 28px);padding-bottom:24px;}
.single-title{font-size:clamp(24px, 7vw, 36px);}
.single-featured-wrap{aspect-ratio:4/3;}
.single-body{font-size:16px;}
.single-body h2{font-size:clamp(20px, 5vw, 26px);margin:32px 0 12px;}
.services-grid{grid-template-columns:1fr;gap:16px;}
.service-card{padding:28px 24px;}
.about-text p{font-size:15px;}
.about-img{aspect-ratio:4/3;}
.seo-inner{grid-template-columns:1fr;gap:36px;}
.seo-media picture,
.seo-media img{aspect-ratio:3/4;max-height:400px;}
.seo-content h2{font-size:clamp(24px, 6vw, 32px);}
.doctor-inner{gap:32px;}
.doctor-photo{
aspect-ratio:1/1;
max-height:320px;
border-radius:var(--radius-md);
}
.doctor-name{font-size:26px;}
.spec-item{
grid-template-columns:1fr;
gap:3px;
}
.doctor-bio p{font-size:15px;}
.equipment-grid{grid-template-columns:repeat(2, 1fr);gap:10px;}
.equip-item{padding:14px 16px;gap:10px;}
.equip-item span{font-size:13px;}
.benefits-grid{grid-template-columns:1fr;gap:24px;}
.process-steps{
flex-direction:column;
gap:0;
}
.process-divider{display:none;}
.process-step{
padding:0 0 28px 24px;
border-left:2px solid rgba(200, 168, 76, 0.2);
position:relative;
}
.process-step:last-child{
padding-bottom:0;
border-left-color:transparent;
}
.process-step::before{
content:'';
position:absolute;
left:-5px;
top:10px;
width:8px;
height:8px;
border-radius:50%;
background:var(--accent-gold);
opacity:0.5;
}
.step-num{font-size:36px;margin-bottom:8px;}
.carousel-slide{flex:0 0 42%;max-width:42%;}
.booking-inner{gap:32px;}
.booking-actions{
grid-template-columns:1fr;
gap:12px;
}
.booking-actions .btn{justify-content:center;}
.booking-phone{
grid-column:span 1;
flex-direction:column;
gap:4px;
}
.booking-phone a{font-size:20px;}
.contact-list{gap:20px;}
.contacts-map{aspect-ratio:4/3;min-height:260px;}
.footer-inner{padding:48px var(--side-pad) 36px;}
.footer-links{grid-template-columns:1fr 1fr;gap:28px;}
.footer-bottom-inner{flex-direction:column;text-align:center;gap:6px;}
.mobile-sticky-bar{display:flex;}
body{padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px));}
}
@media (max-width:480px){
:root{--side-pad:16px;}
.hero-title{font-size:clamp(32px, 9vw, 42px);}
.hero-sub{font-size:16px;}
.hero-actions{flex-direction:column;align-items:stretch;gap:12px;}
.hero-actions .btn{justify-content:center;}
.hero-image-wrap{aspect-ratio:3/4;max-height:380px;}
h2{font-size:clamp(26px, 7vw, 34px);}
.trust-number{font-size:clamp(32px, 8vw, 44px);}
.equipment-grid{grid-template-columns:1fr;gap:8px;}
.equip-item{padding:14px;}
.doctor-photo{aspect-ratio:3/4;max-height:380px;}
.booking-text h2{font-size:clamp(24px, 7vw, 32px);}
.carousel-slide{flex:0 0 60%;max-width:60%;}
.carousel-btn{width:40px;height:40px;}
.carousel-btn--prev{left:8px;}
.carousel-btn--next{right:8px;}
.footer-links{grid-template-columns:1fr;gap:24px;}
.process-step{padding-left:18px;}
.step-num{font-size:28px;}
}
.svc-hero{
padding-top:calc(72px + clamp(40px, 5vw, 64px));
padding-bottom:0;
background:var(--bg-primary);
overflow:hidden;
}
.svc-hero-inner{
display:grid;
grid-template-columns:1fr 420px;
gap:clamp(40px, 5vw, 80px);
align-items:end;
}
.svc-hero-content{
padding-bottom:clamp(48px, 6vw, 80px);
}
.svc-hero-title{
font-size:clamp(34px, 4.5vw, 54px);
line-height:1.1;
margin:12px 0 20px;
}
.svc-hero-sub{
font-size:17px;
color:var(--text-secondary);
line-height:1.75;
margin-bottom:32px;
}
.svc-hero-media{
align-self:end;
}
.svc-hero-img{
width:100%;
height:100%;
object-fit:cover;
border-radius:var(--radius-lg) var(--radius-lg) 0 0;
display:block;
max-height:540px;
}
.svc-intro{
padding:clamp(40px, 5vw, 64px) 0;
background:var(--bg-secondary);
}
.svc-intro-body{
max-width:720px;
}
.svc-intro-body p{
font-size:16px;
line-height:1.8;
color:var(--text-secondary);
}
.svc-intro-body p + p{
margin-top:16px;
}
.svc-hub{
padding:var(--section-pad) 0;
background:var(--surface);
}
.svc-hub-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:20px;
}
.svc-card{
display:flex;
flex-direction:column;
background:var(--bg-primary);
border:1px solid var(--border);
border-radius:var(--radius-md);
padding:28px 24px;
box-shadow:var(--shadow-card);
transition:box-shadow var(--transition), border-color var(--transition), transform var(--transition);
color:inherit;
text-decoration:none;
}
.svc-card:hover{
box-shadow:var(--shadow-card-hover);
border-color:var(--accent-gold);
transform:translateY(-2px);
}
.svc-card-icon{
width:52px;
height:52px;
background:var(--surface);
border-radius:var(--radius-md);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:18px;
color:var(--accent-plum);
flex-shrink:0;
}
.svc-card-body{
display:flex;
flex-direction:column;
flex:1;
}
.svc-card h3{
font-family:var(--font-ui);
font-size:17px;
font-weight:600;
color:var(--text-primary);
margin-bottom:10px;
line-height:1.3;
}
.svc-card p{
font-size:14px;
line-height:1.65;
color:var(--text-secondary);
margin-bottom:16px;
flex:1;
}
.svc-card .service-link{
margin-top:auto;
font-size:13px;
}
.why-kizuna{
padding:var(--section-pad) 0;
background:var(--bg-secondary);
}
.why-kizuna-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:28px;
}
.why-kizuna-item{
display:flex;
flex-direction:column;
gap:14px;
}
.why-kizuna-icon{
width:48px;
height:48px;
background:var(--surface);
border-radius:var(--radius-md);
display:flex;
align-items:center;
justify-content:center;
color:var(--accent-plum);
}
.why-kizuna-item h3{
font-family:var(--font-ui);
font-size:16px;
font-weight:600;
color:var(--text-primary);
margin:0;
}
.why-kizuna-item p{
font-size:14px;
line-height:1.7;
color:var(--text-secondary);
margin:0;
}
.svc-seo-bottom{
padding:clamp(48px, 6vw, 72px) 0;
background:var(--surface);
}
.svc-seo-bottom-inner{
max-width:720px;
}
.svc-seo-bottom h2{
font-size:clamp(22px, 3vw, 30px);
margin-bottom:20px;
}
.svc-seo-bottom p{
font-size:16px;
line-height:1.8;
color:var(--text-secondary);
}
.svc-seo-bottom p + p{
margin-top:14px;
}
@media (max-width:1100px){
.svc-hub-grid{grid-template-columns:repeat(3, 1fr);}
}
@media (max-width:860px){
.svc-hub-grid{grid-template-columns:repeat(2, 1fr);}
.why-kizuna-grid{grid-template-columns:repeat(2, 1fr);}
.svc-hero-inner{grid-template-columns:1fr 340px;gap:32px;}
.svc-hero-img{max-height:460px;}
}
@media (max-width:640px){
.svc-hero{padding-top:calc(64px + 28px);padding-bottom:0;}
.svc-hero-inner{grid-template-columns:1fr;gap:28px;}
.svc-hero-content{padding-bottom:0;}
.svc-hero-title{font-size:clamp(26px, 7vw, 36px);}
.svc-hero-sub{font-size:15px;margin-bottom:24px;}
.svc-hero-img{max-height:280px;border-radius:var(--radius-md) var(--radius-md) 0 0;}
.svc-hub-grid{grid-template-columns:1fr 1fr;gap:14px;}
.svc-card{padding:20px 16px;}
.svc-card-icon{width:44px;height:44px;margin-bottom:14px;}
.svc-card h3{font-size:15px;}
.why-kizuna-grid{grid-template-columns:1fr;gap:24px;}
.svc-seo-bottom-inner{max-width:100%;}
}
@media (max-width:380px){
.svc-hub-grid{grid-template-columns:1fr;}
}
.vacc-hero-trust{
display:flex;
flex-direction:column;
gap:8px;
margin-top:28px;
}
.svc-hero-actions{margin-bottom:0;}
.vacc-when{
padding:var(--section-pad) 0;
background:var(--surface);
}
.vacc-when-intro{
max-width:720px;
margin-bottom:44px;
}
.vacc-when-intro h2{
margin-bottom:16px;
}
.vacc-when-intro p{
font-size:16px;
line-height:1.8;
color:var(--text-secondary);
}
.vacc-when-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:24px;
}
.vacc-when-grid--surgery{
grid-template-columns:repeat(4, 1fr);
}
.vacc-when-note{
margin-top:1.5rem;
color:var(--text-secondary);
font-size:.9rem;
line-height:1.6;
}
.vacc-when-card{
background:var(--bg-secondary);
border:1px solid var(--border);
border-radius:var(--radius-md);
padding:32px 28px;
}
.vacc-when-icon{
width:52px;
height:52px;
background:var(--surface);
border-radius:var(--radius-md);
display:flex;
align-items:center;
justify-content:center;
color:var(--accent-plum);
margin-bottom:18px;
}
.vacc-when-card h3{
font-family:var(--font-ui);
font-size:17px;
font-weight:600;
margin-bottom:10px;
color:var(--text-primary);
}
.vacc-when-card p{
font-size:15px;
line-height:1.7;
color:var(--text-secondary);
}
.vacc-steps-section{
padding:var(--section-pad) 0;
background:var(--bg-primary);
}
.vacc-steps{
max-width:720px;
display:flex;
flex-direction:column;
gap:0;
}
.vacc-step{
display:grid;
grid-template-columns:64px 1fr;
gap:20px;
padding:28px 0;
border-bottom:1px solid var(--border);
}
.vacc-step:last-child{border-bottom:none;}
.vacc-step-num{
font-family:var(--font-display);
font-size:36px;
font-weight:600;
color:var(--accent-gold);
opacity:0.45;
line-height:1;
padding-top:4px;
}
.vacc-step-body h3{
font-family:var(--font-ui);
font-size:17px;
font-weight:600;
color:var(--text-primary);
margin-bottom:8px;
}
.vacc-step-body p{
font-size:15px;
line-height:1.75;
color:var(--text-secondary);
}
.vacc-step-link{
display:inline-flex;
align-items:center;
gap:6px;
margin-top:12px;
font-size:13px;
font-weight:600;
color:var(--accent-plum);
transition:color var(--transition);
}
.vacc-step-link:hover{color:var(--accent-gold);}
.vacc-importance{
padding:var(--section-pad) 0;
background:var(--bg-secondary);
}
.vacc-importance-inner{
max-width:720px;
}
.vacc-importance h2{margin-bottom:16px;}
.vacc-importance p{
font-size:16px;
line-height:1.8;
color:var(--text-secondary);
margin-bottom:28px;
}
.vacc-checklist{
display:flex;
flex-direction:column;
gap:12px;
}
.vacc-checklist li{
display:flex;
align-items:center;
gap:10px;
font-size:15px;
color:var(--text-primary);
font-family:var(--font-ui);
font-weight:500;
}
.vacc-checklist li svg{color:var(--accent-gold);flex-shrink:0;}
.vacc-faq{
padding:var(--section-pad) 0;
background:var(--surface);
}
.vacc-faq-list{
max-width:720px;
margin:0 auto;
}
.vacc-faq-item{
border-bottom:1px solid var(--border);
}
.vacc-faq-item:first-child{border-top:1px solid var(--border);}
.vacc-faq-q{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:20px 0;
text-align:left;
font-family:var(--font-ui);
font-size:16px;
font-weight:600;
color:var(--text-primary);
background:none;
border:none;
cursor:pointer;
transition:color var(--transition);
}
.vacc-faq-q:hover{color:var(--accent-plum);}
.vacc-faq-arrow{
flex-shrink:0;
transition:transform 0.25s ease;
color:var(--text-secondary);
}
.vacc-faq-q[aria-expanded="true"] .vacc-faq-arrow{
transform:rotate(180deg);
}
.vacc-faq-a{
padding-bottom:20px;
}
.vacc-faq-a p{
font-size:15px;
line-height:1.75;
color:var(--text-secondary);
}
.vacc-related{
padding:var(--section-pad) 0;
background:var(--bg-secondary);
}
.vacc-related-title{
margin-bottom:36px;
}
.vacc-related-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:20px;
}
@media (max-width:1100px){
.vacc-when-grid--surgery{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:860px){
.vacc-when-grid{grid-template-columns:1fr;gap:16px;}
.vacc-when-grid--surgery{grid-template-columns:1fr;}
.vacc-related-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:640px){
.vacc-step{grid-template-columns:48px 1fr;gap:14px;padding:22px 0;}
.vacc-step-num{font-size:28px;}
.vacc-step-body h3{font-size:15px;}
.vacc-faq-q{font-size:15px;padding:16px 0;}
.vacc-related-grid{grid-template-columns:1fr;}
.vacc-related-title{margin-bottom:24px;}
}
.error404-page{
min-height:calc(100vh - 72px);
padding-top:calc(72px + clamp(64px, 8vw, 100px));
padding-bottom:clamp(64px, 8vw, 100px);
background:var(--bg-primary);
display:flex;
align-items:center;
}
.error404-inner{
max-width:560px;
}
.error404-code{
font-family:var(--font-display);
font-size:clamp(96px, 18vw, 180px);
font-weight:600;
line-height:1;
color:var(--border);
margin-bottom:8px;
letter-spacing:-4px;
}
.error404-title{
font-size:clamp(28px, 4vw, 42px);
margin:8px 0 16px;
}
.error404-sub{
font-size:17px;
color:var(--text-secondary);
line-height:1.7;
margin-bottom:36px;
}
.error404-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-bottom:40px;
}
.error404-links{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:8px 16px;
font-size:14px;
}
.error404-links span{
color:var(--text-secondary);
}
.error404-links a{
color:var(--accent-plum);
font-weight:500;
transition:color var(--transition);
}
.error404-links a:hover{
color:var(--accent-gold);
}
@media (max-width:640px){
.error404-page{padding-top:calc(64px + 40px);}
.error404-code{font-size:clamp(80px, 22vw, 120px);letter-spacing:-2px;}
.error404-actions{flex-direction:column;}
.error404-actions .btn{justify-content:center;}
}
@media (max-width:375px){
:root{--side-pad:14px;}
.trust-grid{grid-template-columns:1fr 1fr;}
.trust-number{font-size:28px;}
.trust-label{font-size:12px;}
.service-card{padding:22px 18px;}
.btn{padding:13px 20px;font-size:13px;}
.mobile-sticky-bar{padding:10px 14px;}
.sticky-phone{font-size:13px;}
}

/* ═══════════════════════════════════════════
   BOOKING FORM SECTION
════════════════════════════════════════════ */
.booking-form-section{
background:var(--bg-secondary);
padding:80px 0;
}
.bfs-inner{
display:grid;
grid-template-columns:1fr 1.2fr;
gap:64px;
align-items:start;
}
.bfs-text{
position:sticky;
top:calc(var(--header-h, 72px) + 24px);
}
.bfs-text .section-title{
font-size:clamp(28px, 3vw, 40px);
margin:8px 0 16px;
}
.bfs-text .section-sub{
font-size:16px;
color:var(--text-secondary);
line-height:1.7;
margin-bottom:32px;
}
.bfs-contacts{
display:flex;
flex-direction:column;
gap:12px;
}
.bfs-contact-row{
display:flex;
align-items:center;
gap:10px;
font-size:15px;
color:var(--text-primary);
text-decoration:none;
transition:color var(--transition);
}
a.bfs-contact-row:hover{
color:var(--accent-plum);
}
.bfs-hours{
color:var(--text-secondary);
font-size:14px;
}
.bfs-contact-icon{
display:flex;
align-items:center;
justify-content:center;
width:32px;
height:32px;
background:#fff;
border-radius:8px;
flex-shrink:0;
color:var(--accent-plum);
box-shadow:0 1px 4px rgba(0,0,0,.06);
}

/* Форма */
.bfs-form-wrap{
background:#fff;
border-radius:var(--radius-lg, 16px);
padding:36px;
box-shadow:0 4px 24px rgba(0,0,0,.07);
}
.bform-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}
.bform-group{
display:flex;
flex-direction:column;
gap:6px;
margin-bottom:18px;
}
.bform-label{
font-size:13px;
font-weight:500;
color:var(--text-primary);
letter-spacing:.01em;
}
.bform-req{
color:#c0392b;
}
.bform-input{
width:100%;
padding:11px 14px;
border:1.5px solid #e8e3df;
border-radius:10px;
font-size:14px;
font-family:var(--font-ui, Inter, sans-serif);
color:var(--text-primary);
background:#fafaf9;
transition:border-color .2s, box-shadow .2s;
appearance:none;
-webkit-appearance:none;
box-sizing:border-box;
}
.bform-input:focus{
outline:none;
border-color:var(--accent-plum);
box-shadow:0 0 0 3px rgba(65,50,56,.1);
background:#fff;
}
.bform-select{
cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236F6F73' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 12px center;
padding-right:36px;
}
input[type="date"].bform-input{
cursor:pointer;
}

/* Слоти */
.bform-slots{
display:flex;
flex-wrap:wrap;
gap:8px;
min-height:40px;
}
.bform-slot{
padding:8px 14px;
border:1.5px solid #e8e3df;
border-radius:8px;
background:#fff;
font-size:13px;
font-weight:500;
color:var(--text-primary);
cursor:pointer;
transition:border-color .15s, background .15s, color .15s;
font-family:var(--font-ui, Inter, sans-serif);
}
.bform-slot:hover{
border-color:var(--accent-plum);
color:var(--accent-plum);
}
.bform-slot.active{
background:var(--accent-plum);
border-color:var(--accent-plum);
color:#fff;
}
.bform-slots-hint,
.bform-slots-loading,
.bform-slots-empty{
font-size:13px;
color:var(--text-secondary);
padding:4px 0;
}
.bform-slots-loading::after{
content:'';
display:inline-block;
width:10px;
height:10px;
border:2px solid var(--accent-plum);
border-top-color:transparent;
border-radius:50%;
margin-left:8px;
animation:bform-spin .7s linear infinite;
vertical-align:middle;
}
@keyframes bform-spin{to{transform:rotate(360deg);}}

.bform-submit{
width:100%;
padding:14px;
font-size:15px;
margin-top:4px;
}
.bform-submit:disabled{
opacity:.65;
cursor:not-allowed;
}
.bform-note{
text-align:center;
font-size:12px;
color:var(--text-secondary);
margin-top:12px;
margin-bottom:0;
}

/* Успіх */
.bform-success{
text-align:center;
padding:48px 24px;
}
.bform-success-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:72px;
height:72px;
background:#f0fdf4;
border-radius:50%;
margin-bottom:20px;
color:#22c55e;
}
.bform-success h3{
font-size:22px;
font-family:var(--font-display, 'Cormorant Garamond', serif);
margin:0 0 10px;
}
.bform-success p{
font-size:15px;
color:var(--text-secondary);
line-height:1.6;
}

/* ── Responsive ─────────────────────────── */
@media(max-width:900px){
.bfs-inner{
grid-template-columns:1fr;
gap:40px;
}
.bfs-text{
position:static;
}
}
@media(max-width:640px){
.booking-form-section{
padding:56px 0;
}
.bfs-form-wrap{
padding:24px 18px;
}
.bform-row{
grid-template-columns:1fr;
gap:0;
}
}
@media(max-width:480px){
.bform-slot{
padding:7px 11px;
font-size:12px;
}
}