body.kosmetik { --ink: #493a43; --paper: #fffdfd; --accent: #704353; --line: #decdd3; --surface: #f7ecef; --display-font: Georgia, serif; --display-weight: 400; --button-radius: 4px; }
.wordmark strong { font: 1.85rem Georgia, serif; }
.wordmark span { font-size: .65rem; }
.masthead { min-height: 110px; }
.site-menu .nav-cta { background: transparent; color: var(--accent); border-bottom: 1px solid currentColor; border-radius: 0; padding-inline: 0; }
.beauty-cover { position: relative; isolation: isolate; min-height: 580px; display: flex; align-items: center; background: #eadfde; }
.beauty-cover > img { position: absolute; inset: 0; height: 100%; z-index: -2; object-position: 65% 45%; }
.beauty-cover::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#f8f0f0fa 0%,#f8f0f0e0 36%,#f8f0f000 78%); }
.beauty-cover-copy { max-width: 660px; padding-block: 75px; }
.beauty-cover h1 { font-size: 5rem; line-height: 1.1; }
.beauty-cover h1 em { font-weight: 400; color: #704353; }
.beauty-cover p:not(.eyebrow) { font-size: 1.15rem; margin-block: 28px 32px; }
.beauty-intro { text-align: center; max-width: 820px; padding-block: 88px; }
.beauty-intro h2 { font-size: 3.1rem; }
.beauty-intro p:last-child { max-width: 58ch; margin: 26px auto 0; }
.treatments { background: #f6f0f2; }
.treatment-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 84px; align-items: start; }
.treatment-layout figure { padding-top: 40px; }
.treatment-layout img { aspect-ratio: 3/4; border-radius: 45% 45% 0 0; }
.treatment-layout figcaption { text-align: center; font: italic 1.4rem Georgia, serif; margin-top: 24px; }
.treatment { display: flex; align-items: center; gap: 24px; padding-block: 24px; border-bottom: 1px solid var(--line); }
.treatment h3 { font: 1.6rem Georgia, serif; }
.treatment p { font-size: .9rem; margin-block: 10px; }
.treatment span { font-size: .8rem; color: #704353; }
.treatment a { flex-shrink: 0; font-size: .8rem; padding-block: 12px; }
.beauty-studio { display: grid; grid-template-columns: 1fr 1fr; gap: 84px; }
.beauty-studio .text-link { margin-top: 16px; }
.beauty-booking { background: #e8eeea; --surface: #d7e1d9; }
.booking-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; }
.booking-layout h2 { font-size: 4rem; margin-bottom: 24px; }
.booking-layout > div > p { max-width: 36ch; }
.booking-selection { font: 1.3rem/1.7 Georgia,serif; border-top: 1px solid #b7c5b9; padding-top: 24px; margin-top: 32px; }
.booking-progress { margin-bottom: 24px; font-size: .8rem; text-transform: uppercase; }
[data-booking-step] { margin-bottom: 28px; }
[data-booking-step] h3 { font: 1.8rem Georgia,serif; margin-bottom: 24px; }
.booking-controls { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.booking-submit { margin-top: 24px; }
.time-options { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.time-options legend { font-size: .875rem; font-weight: 600; margin-bottom: 12px; }
.time-options label { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #fff; border: 1px solid #8d9b8e; border-radius: 4px; cursor: pointer; }
.time-options input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--accent); }
.time-options label:has(input:checked) { border-color: var(--accent); background: #f5e7ed; }
.beauty-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; }
.page-footer { background: #f7f0f2; }
.footer-brand { font: 1.7rem Georgia,serif; }
@media (max-width: 1024px) { .beauty-cover h1 { font-size: 4rem; } .treatment-layout, .beauty-studio, .booking-layout, .beauty-faq { gap: 40px; } .treatment { flex-direction: column; align-items: start; gap: 4px; } }
@media (max-width: 760px) { .beauty-cover { min-height: 520px; } .beauty-cover h1 { font-size: 3.3rem; } .beauty-cover::after { background: linear-gradient(90deg,#f8f0f0f5,#f8f0f0c9 55%,#f8f0f050); } .beauty-cover-copy { max-width: 540px; } .beauty-intro { padding-block: 60px; } .beauty-intro h2 { font-size: 2.5rem; } .treatment-layout, .beauty-studio, .booking-layout, .beauty-faq { grid-template-columns: 1fr; } .treatment-layout figure { max-width: 360px; width: 100%; margin: auto; padding-top: 0; } .treatment-layout img { aspect-ratio: 1; } .treatment { flex-direction: row; gap: 20px; } .booking-layout h2 { font-size: 3.2rem; } }
@media (max-width: 400px) { .beauty-cover h1 { font-size: 2.7rem; } .beauty-cover-copy { padding-block: 48px; } .treatment { flex-direction: column; gap: 4px; } .beauty-intro h2 { font-size: 2.1rem; } }