*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --bg:#f3f3f3;
    --surface:#fbfafa;
    --surface-soft:#efefef;
    --text:#111;
    --text-soft:#333;
    --line:#6b6b6b;
    --ease-salon:cubic-bezier(0.22, 1, 0.36, 1);
    --header-indicator-size:7px;
    --container:1200px;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Montserrat',sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
    padding-top:170px;
}

img{
    max-width:100%;
    display:block;
}

a{
    -webkit-tap-highlight-color:transparent;
}

section[id]{
    scroll-margin-top:190px;
}

/* ===== HEADER ===== */
.header{
    position:fixed;
    inset:0 0 auto 0;
    width:100%;
    background:rgba(251,250,250,.94);
    text-align:center;
    padding:22px 30px 18px;
    border-bottom:1px solid transparent;
    z-index:1000;
    backdrop-filter:blur(8px);
    transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
    box-shadow:0 8px 24px rgba(0,0,0,.04);
}

.header.scrolled{
    background:rgba(251,250,250,.88);
    box-shadow:0 14px 34px rgba(0,0,0,.07);
}

.logo{
    display:flex;
    justify-content:center;
    align-items:center;
}

.logo-img{
    width:min(430px,90%);
    height:auto;
}

.nav{
    margin-top:18px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:28px;
}

.nav a{
    position:relative;
    padding:6px 0 10px;
    text-decoration:none;
    color:#222;
    font-size:14px;
    letter-spacing:.3px;
    transition:opacity .2s ease;
}

.nav a:hover{opacity:.65;}

.nav a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:1px;
    width:var(--header-indicator-size);
    height:var(--header-indicator-size);
    border:1px solid #111;
    transform:translateX(-50%) rotate(45deg) scale(0);
    transition:transform .28s var(--ease-salon), opacity .28s ease;
    opacity:0;
}

.nav a.active::after,
.nav a:hover::after,
.nav a:focus-visible::after{
    transform:translateX(-50%) rotate(45deg) scale(1);
    opacity:1;
}

.header-right{
    position:absolute;
    right:40px;
    top:80%;
    display:flex;
    align-items:center;
    gap:18px;
}

.header-right a{
    color:#111;
    text-decoration:none;
    font-size:15px;
}

.header-right i{font-size:16px;}

.termin{
    text-decoration:underline;
    text-underline-offset:3px;
}

/* ===== HERO ===== */
.hero{
    width:100%;
    background:#efefef;
    margin-top:-10px;
}

.hero img{
    width:100%;
    height:min(600px,65vw);
    min-height:320px;
    object-fit:cover;
}

.main{background:var(--surface);}

/* ===== GENERIC SECTION WRAPPER ===== */
.about-team,
.philosophy-section,
.gallery-section,
.hairstyling-section,
.specialists-section,
.price-section,
.contact-section,
.jobs-section,
.products-showcase{
    width:100%;
}

/* ===== ABOUT ===== */
.about-team{
    max-width:1200px;
    margin:0 auto;
    padding:50px 20px 20px;
    position:relative;
}

.section-title,
.philosophy-title,
.gallery-title{
    text-align:center;
    margin-bottom:42px;
    position:relative;
}

.section-title h2,
.philosophy-title h2,
.gallery-title h2{
    margin:0;
    display:inline-block;
    position:relative;
    line-height:1.2;
    font-weight:400;
}

.section-title h2{
    font-size:28px;
    padding:18px 38px;
}

.section-title h2::before,
.section-title h2::after,
.section-title::before,
.section-title::after,
.philosophy-title h2::before,
.philosophy-title h2::after,
.philosophy-title::before,
.philosophy-title::after,
.gallery-title h2::before,
.gallery-title h2::after,
.specialist-text-frame::before,
.specialist-text-frame::after,
.specialist-text::before,
.specialist-text::after{
    transition:transform .95s var(--ease-salon), opacity .95s var(--ease-salon);
    transform-origin:left center;
}

.section-title h2::before{
    content:"";
    position:absolute;
    top:0;
    left:-90px;
    width:450px;
    height:1px;
    background:var(--line);
}

.section-title h2::after{
    content:"";
    position:absolute;
    top:0;
    left:-90px;
    width:1px;
    height:22px;
    background:var(--line);
}

.section-title::before{
    content:"";
    position:absolute;
    right:130px;
    bottom:0;
    width:450px;
    height:1px;
    background:var(--line);
}

.section-title::after{
    content:"";
    position:absolute;
    right:130px;
    bottom:0;
    width:1px;
    height:22px;
    background:var(--line);
}

.about-text{
    width:min(830px,100%);
    margin:0 auto;
    font-size:17px;
    line-height:1.6;
    color:#1a1a1a;
}

.about-text h3{
    margin-bottom:24px;
    font-size:18px;
    font-weight:500;
    letter-spacing:.5px;
}

.about-text p{margin-bottom:18px;}

/* ===== PRODUCTS INTRO IMAGE SECTION ===== */
.photo_block{
    background:#efefef;
    position:relative;
    padding:25px 0 70px;
    overflow:hidden;
}

.team-image-wrap{
    width:min(940px,92vw);
    margin:0 auto;
    position:relative;
}

.photo_team_top{padding-top:20px;}

.top-line,
.bottom-line{
    position:absolute;
    height:1px;
    background:#222;
    width:100vw;
}

.top-line{top:0; right:100%;}
.bottom-line{bottom:0; left:100%;}

.specialists-title,
.specialists-header{
    margin-top:18px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    font-size:22px;
    letter-spacing:1px;
    font-weight:300;
}

.black-box{
    background:#050505;
    color:#fff;
    padding:9px 8px 8px;
    display:inline-block;
}

.underlined{
    display:inline-block;
    border-bottom:1px solid #111;
    line-height:1;
    padding-bottom:3px;
}

/* ===== PRODUCTS SHOWCASE ===== */
.products-showcase{
    background:#eceaea;
    padding:28px 0 72px;
}

.products-shell{
    width:min(1080px,calc(100% - 28px));
    margin:0 auto;
    background:#efeded;
}

.product-feature{
    position:relative;
    overflow:hidden;
}

.tcc-card{
    min-height:620px;
    border-bottom:1px solid rgba(0,0,0,.04);
}

.product-feature-bg{
    position:absolute;
    inset:0;
}

.product-feature-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.56);
}

.product-feature-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(100%);
}

.product-feature-inner{
    position:relative;
    z-index:1;
    padding:32px 34px 46px;
}

.product-kicker{
    font-size:clamp(1.15rem,2.1vw,1.95rem);
    letter-spacing:.02em;
    text-transform:uppercase;
    color:#242424;
    margin-bottom:110px;
}

.product-feature-grid{
    display:grid;
    grid-template-columns:180px minmax(0,1fr);
    gap:40px;
    align-items:center;
    max-width:880px;
}

.product-feature-logo{
    width:180px;
    aspect-ratio:1;
    border-radius:50%;
    border:1px solid rgba(0,0,0,.28);
    display:flex;
    justify-content:center;
    box-shadow:0 18px 34px rgba(0,0,0,.08);
}

.product-feature-logo img{
    width:100%;
    height:auto;
    border-radius:50%;
}

.product-feature-copy{max-width:560px;}

.product-feature-copy p,
.mayday-copy p{
    font-size:clamp(1rem,2vw,1.9rem);
    line-height:1.62;
    color:#2d2d2d;
    margin:0;
}

.product-link{
    display: inline-flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 102px;
    margin-left: 4px;
    color: #202020;
    text-decoration: none;
    font-size: clamp(.97rem,1.5vw,1.55rem);
    transition: transform .28s ease, opacity .28s ease;

    position: relative; /* ← ОБЯЗАТЕЛЬНО */
}

.product-link::after{
    content: "";
    position: absolute; /* ← ДОБАВИТЬ */
    left: 0;
    bottom: -6px; /* ← регулируешь расстояние */
    width: 100%;
    height: 2px;
    background: #2c2c2c;
    transition: width .28s ease;
}

.product-link:hover{transform:translateX(6px); opacity:.82;}
.product-link:hover::after{width:96px;}

.products-wave{
    position:relative;
    margin:-6px 0 18px;
    min-height:70px;
}

.products-wave img{
    width:100%;
    height:auto;
}

.mayday-card{padding:4px 0 10px;}

.mayday-visual{
    display:flex;
    justify-content:center;
    margin-top:-6px;
}

.mayday-visual img{
    width:min(470px,78vw);
    height:auto;
    filter:drop-shadow(0 16px 18px rgba(0,0,0,.06));
}

.mayday-copy{
    max-width:980px;
    margin:8px auto 0;
    padding:0 34px 30px;
}

.mayday-copy h3{
    text-align:center;
    color:#a72622;
    font-size:clamp(1.2rem,2.2vw,2rem);
    font-weight:500;
    letter-spacing:.02em;
    margin:8px 0 18px;
}

.mayday-copy p{max-width:820px;}
.mayday-copy .product-link{
    display: inline-flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 102px;
    margin-left: 4px;
    color: #202020;
    text-decoration: none;
    font-size: clamp(.97rem,1.5vw,1.55rem);
    transition: transform .28s ease, opacity .28s ease;


    position: relative; /* ← ОБЯЗАТЕЛЬНО */
}

/* ===== PHILOSOPHY ===== */
.philosophy-section{
    background:#fff;
    padding:70px 20px 80px;
}

.philosophy-title h2{
    padding:18px 34px;
    font-size:30px;
    letter-spacing:1px;
    color:#111;
}

.philosophy-title h2::before{
    content:"";
    position:absolute;
    top:0;
    left:-130px;
    width:450px;
    height:1px;
    background:#666;
}

.philosophy-title h2::after{
    content:"";
    position:absolute;
    top:0;
    left:-130px;
    width:1px;
    height:22px;
    background:#666;
}

.philosophy-title::before{
    content:"";
    position:absolute;
    right:30%;
    bottom:0;
    width:350px;
    height:1px;
    background:#666;
}

.philosophy-title::after{
    content:"";
    position:absolute;
    right:30%;
    bottom:0;
    width:1px;
    height:22px;
    background:#666;
}

.philosophy-text{
    max-width:820px;
    margin:0 auto;
    font-size:18px;
    line-height:1.65;
    color:#1a1a1a;
}

.philosophy-text p{margin:0 0 20px;}
.philosophy-text p:last-child{margin-bottom:0;}

/* ===== GALLERY ===== */
.gallery-section{
    background:#efefef;
    padding:70px 0;
    text-align:center;
}

.gallery-title h2{
    font-size:32px;
    border-bottom:1px solid #333;
    padding:5px 15px;
}

.gallery-title h2::before{
    content:"";
    position:absolute;
    top:-10px;
    left:10px;
    width:120px;
    height:1px;
    background:#333;
}

.gallery-title h2::after{
    content:"";
    position:absolute;
    top:-10px;
    left:10px;
    width:1px;
    height:18px;
    background:#333;
}

.gallery-slider{
    width:100%;
    min-height:450px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.gallery-track{
    width:1100px;
    height:420px;
    position:relative;
}

.gallery-main{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:720px;
    height:420px;
    z-index:3;
}

.gallery-main img,
.gallery-side img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.gallery-side{
    position:absolute;
    top:40px;
    width:500px;
    height:340px;
    overflow:hidden;
}

.gallery-side img{filter:brightness(.7);}
.left-img{left:-200px;}
.right-img{right:-200px;}

.arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:60px;
    height:60px;
    border-radius:50%;
    border:none;
    font-size:35px;
    background:rgba(255,255,255,.4);
    cursor:pointer;
}

.arrow.left{left:40px;}
.arrow.right{right:40px;}

.gallery-button{
    margin-top:25px;
    font-size:20px;
    background:none;
    border:none;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    font-family:'Montserrat',sans-serif;
}

.btn-black{background:#000; color:#fff; padding:10px 12px;}
.btn-text{border-bottom:1px solid #333; padding-left:5px;}

/* modal gallery */
.gallery-modal,
.lightbox-modal,
.booking-modal,
.legal-modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
}

.gallery-modal{z-index:6000;}
.lightbox-modal{z-index:7000;}
.booking-modal{z-index:5000;}
.legal-modal{z-index:6500;}

.gallery-modal.active,
.lightbox-modal.active,
.booking-modal.active,
.legal-modal.active{display:flex;}

.gallery-modal-overlay,
.booking-modal-overlay,
.legal-modal-overlay,
.lightbox-overlay{
    position:absolute;
    inset:0;
}

.gallery-modal-overlay,
.booking-modal-overlay{background:rgba(0,0,0,.45); backdrop-filter:blur(2px);}
.legal-modal-overlay{background:rgba(0,0,0,.54); backdrop-filter:blur(4px);}
.lightbox-overlay{background:rgba(0,0,0,.78);}

.gallery-modal-dialog{
    position:relative;
    width:1080px;
    max-width:94vw;
    height:720px;
    max-height:90vh;
    background:#f8f8f8;
    border:1px solid #d8d8d8;
    padding:22px 22px 18px;
    z-index:2;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.gallery-modal-close,
.booking-modal-close,
.legal-modal-close,
.lightbox-close{
    border:none;
    background:transparent;
    cursor:pointer;
}

.gallery-modal-close{
    position:absolute;
    top:8px;
    right:12px;
    width:34px;
    height:34px;
    font-size:30px;
    line-height:1;
    color:#111;
    z-index:3;
}

.gallery-modal-header{
    text-align:center;
    margin-bottom:18px;
    flex-shrink:0;
}

.gallery-modal-header h2{font-size:28px; font-weight:500; margin:0;}

.gallery-modal-grid{
    flex:1;
    min-height:0;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:10px;
    align-content:start;
    scrollbar-width:auto;
    scrollbar-color:#bcbcbc #ececec;
}

.gallery-modal-grid::-webkit-scrollbar{width:12px;}
.gallery-modal-grid::-webkit-scrollbar-track{background:#ececec; border-radius:20px;}
.gallery-modal-grid::-webkit-scrollbar-thumb{background:#bcbcbc; border-radius:20px;}

.gallery-thumb{
    width:100%;
    height:220px;
    object-fit:cover;
    cursor:pointer;
    background:#ddd;
    transition:transform .2s ease, opacity .2s ease;
    user-select:none;
}

.gallery-thumb:hover{transform:scale(1.02); opacity:.92;}

.lightbox-dialog{
    position:relative;
    width:min(1400px,95vw);
    height:min(90vh,950px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
}

.lightbox-image-wrap{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 90px;
}

.lightbox-image-wrap img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    box-shadow:0 10px 35px rgba(0,0,0,.25);
}

.lightbox-close{
    position:absolute;
    top:10px;
    right:16px;
    width:48px;
    height:48px;
    color:#fff;
    font-size:38px;
    z-index:3;
}

.lightbox-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:64px;
    height:64px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    color:#fff;
    font-size:34px;
    cursor:pointer;
    z-index:3;
}

.lightbox-arrow.left{left:10px;}
.lightbox-arrow.right{right:10px;}

/* ===== HAIRSTYLING ===== */
.hairstyling-section{padding:80px 0 120px;}
.hairstyling-container{max-width:1000px; margin:0 auto; padding:0 20px;}
.hairstyling-intro h2{font-size:34px; margin-bottom:20px;}
.hairstyling-intro p{font-size:18px; line-height:1.7; max-width:700px;}

.hairstyling-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    margin-top:40px;
}

.hair-card img{width:100%; height:360px; object-fit:cover;}
.hair-card.vertical img{height:520px;}
.hair-text-card{padding-top:30px;}
.hair-text-card h3{font-size:30px; margin-bottom:20px;}
.hair-text-card p{font-size:16px; line-height:1.7;}

/* ===== SPECIALISTS ===== */
.specialists-section{
    background:#f2f2f2;
    padding:40px 20px 60px;
    overflow:hidden;
}

.specialists-header{font-size:24px; margin-bottom:36px;}
.specialists-header .black-box{padding:10px 12px 9px;}
.specialists-header .underlined{padding-bottom:4px;}

.specialists-slider{
    position:relative;
    max-width:1050px;
    margin:0 auto 24px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:300px;
    overflow:visible;
}

.specialists-track{
    position:relative;
    width:1000px;
    height:300px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.specialist-card{
    overflow:hidden;
    background:#cfcfcf;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    transition:all .35s ease;
}

.specialist-card img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
}

.specialist-card.side{width:340px; height:220px; border-radius:100px; opacity:.95;}
.specialist-card.center{width:400px; height:260px; border-radius:130px; margin:0 -25px; z-index:2;}
.left-card,.right-card{z-index:1;}

.specialists-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:70px;
    height:70px;
    border-radius:50%;
    border:none;
    background:#000;
    color:#fff;
    font-size:28px;
    cursor:pointer;
}

.specialists-arrow.left{left:-90px;}
.specialists-arrow.right{right:-90px;}

.specialist-info{
    max-width:980px;
    margin:0 auto;
    color:#222;
}

.specialist-info h3{
    text-align:center;
    font-size:28px;
    font-weight:600;
    margin:8px 0 34px;
}

.specialist-text-frame{position:relative; padding:34px 36px;}
.specialist-text-frame::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:54%;
    height:1px;
    background:#555;
}

.specialist-text-frame::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:1px;
    height:24px;
    background:#555;
}

.specialist-text{
    position:relative;
    max-width:900px;
    margin:0 auto;
    font-size:16px;
    line-height:1.45;
}

.specialist-text::before{
    content:"";
    position:absolute;
    right:-12px;
    bottom:-20px;
    width:54%;
    height:1px;
    background:#555;
}

.specialist-text::after{
    content:"";
    position:absolute;
    right:-12px;
    bottom:-20px;
    width:1px;
    height:24px;
    background:#555;
}

.specialist-text p{margin:0 0 16px;}
.specialist-text p:last-child{margin-bottom:0;}
.fade-text{opacity:0; transform:translateY(8px);}
.show-text{opacity:1; transform:translateY(0); transition:opacity .25s ease, transform .25s ease;}

/* ===== PRICES ===== */
.price-section{
    background:#efefef;
    padding:40px 20px 60px;
    color:#222;
}

.price-container{max-width:960px; margin:0 auto;}
.price-title{
    text-align:center;
    font-size:30px;
    font-weight:600;
    margin:0 0 34px;
    padding-bottom:10px;
    border-bottom:1px solid #666;
}

.price-category{margin-bottom:46px;}
.price-category h3{font-size:24px; font-weight:600; margin:0 0 18px; text-decoration:underline; text-underline-offset:4px;}

.price-row{
    display:grid;
    grid-template-columns:minmax(140px,1.5fr) repeat(3,minmax(80px,1fr));
    row-gap:10px;
    column-gap:18px;
    padding:12px 4px 10px;
    border-bottom:1px solid #777;
    margin-bottom:12px;
}

.service{font-size:20px; font-weight:400; line-height:1.35;}
.option,.price{font-size:18px; text-align:center; color:#333;}
.empty,.empty-cell{visibility:hidden;}

/* ===== CONTACT ===== */
.contact-section{
    background:#fff;
    padding:110px 20px;
}

.contact-container{
    max-width:1200px;
    min-height:420px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:56px;
    border:1px solid #dcdcdc;
    padding:90px 80px;
    background:#faf8f8;
}

.contact-left{text-align:center; flex:1;}
.contact-logo{font-size:44px; letter-spacing:3px; font-weight:500;}
.contact-sub{font-size:18px; letter-spacing:4px; margin-top:10px;}
.contact-divider{width:1px; height:440px; background:#cfcfcf;}
.contact-right{text-align:center;}
.contact-right h3{font-size:30px; letter-spacing:3px; margin-bottom:18px;}
.address{font-size:20px; line-height:1.6; margin-bottom:28px;}
.contact-button{
    display:inline-block;
    background:#000;
    color:#fff;
    padding:16px 30px;
    text-decoration:none;
    font-size:18px;
    margin-bottom:44px;
}

.contact-right h4{font-size:20px; letter-spacing:3px; margin-bottom:16px;}
.time{font-size:18px; line-height:1.6; margin-bottom:10px;}

/* ===== FOOTER ===== */
.site-footer{
    width:100%;
    background:#f3f3f3;
    padding:25px 20px;
}

.footer-container{
    max-width:1000px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:30px;
}

.footer-left h3{font-size:16px; letter-spacing:1px;}
.footer-sub{font-size:12px; margin-top:3px;}
.footer-copy{font-size:11px; margin-top:6px;}
.footer-center a{margin:0 10px; text-decoration:none; color:#333; font-size:13px; position:relative;}
.footer-center a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    width:100%;
    height:1px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .35s ease;
}
.footer-center a:hover::after{transform:scaleX(1);}
.footer-social{text-align:center;}
.footer-social p{font-size:12px; margin-bottom:5px;}
.social-icons a{font-size:18px; margin:0 6px; color:#000;}
.footer-contact{text-align:right; font-size:13px;}

/* ===== JOBS ===== */
.jobs-section{background:#fff;}
.jobs-hero{width:100%; height:420px; position:relative; overflow:hidden;}
.jobs-hero img{width:100%; height:100%; object-fit:cover;}
.jobs-hero h2{
    position:absolute;
    top:40%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#000;
    font-size:42px;
    letter-spacing:4px;
}

.jobs-content{max-width:900px; margin:60px auto; padding:0 20px;}
.jobs-content h3{font-size:22px; margin-bottom:20px;}
.jobs-content p{font-size:16px; line-height:1.7; margin-bottom:20px;}
.jobs-list{margin-left:20px; margin-bottom:30px;}
.jobs-list li{margin-bottom:8px;}
.jobs-highlight{font-weight:600;}

/* ===== BOOKING MODAL ===== */
.booking-modal-dialog{
    position:relative;
    width:min(1100px,92vw);
    height:min(85vh,900px);
    background:#f8f8f8;
    border:1px solid #d8d8d8;
    box-shadow:0 20px 50px rgba(0,0,0,.18);
    z-index:2;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.booking-modal-close{
    position:absolute;
    top:14px;
    right:16px;
    width:42px;
    height:42px;
    font-size:34px;
    line-height:1;
    color:#111;
    z-index:3;
}

.booking-modal-header{
    padding:28px 28px 18px;
    text-align:center;
    border-bottom:1px solid #e1e1e1;
}

.booking-modal-header h2{margin:0 0 8px; font-size:28px; font-weight:500; letter-spacing:.8px;}
.booking-modal-header p{margin:0; font-size:14px; color:#444;}
.booking-modal-body{flex:1; min-height:0; background:#fff;}
.booking-modal-body iframe{width:100%; height:100%; border:0; display:block;}
.booking-modal-footer{padding:14px 20px; text-align:center; border-top:1px solid #e1e1e1; background:#fafafa;}
.booking-modal-link{
    display:inline-block;
    text-decoration:none;
    background:#000;
    color:#fff;
    padding:11px 16px;
    font-size:14px;
    transition:opacity .2s ease;
}
.booking-modal-link:hover{opacity:.85;}

/* ===== MAP ===== */
.Blondschimmer_map,
.Blonschimmer_map{
    text-align:center;
    padding:20px 20px 50px;
}

.Blondschimmer_map iframe,
.Blonschimmer_map iframe{
    width:100%;
    height:600px;
    border:0;
    display:block;
}

/* ===== FOCUS / HOVER ===== */
body.modal-open{overflow:hidden;}

.nav a.active,
.nav a:focus-visible,
.booking-trigger:focus-visible,
.gallery-button:focus-visible,
.arrow:focus-visible,
.specialists-arrow:focus-visible,
.contact-button:focus-visible,
.gallery-modal-close:focus-visible,
.lightbox-close:focus-visible,
.lightbox-arrow:focus-visible,
.booking-modal-close:focus-visible{
    outline:2px solid #111;
    outline-offset:4px;
}

.contact-button,
.termin,
.gallery-button,
.booking-modal-link,
.arrow,
.specialists-arrow,
.gallery-track img,
.gallery-thumb,
.hair-card img,
.specialist-card img{
    transition:opacity .2s ease, transform .25s ease, filter .35s ease, box-shadow .35s ease;
}

.contact-button:hover,
.termin:hover,
.gallery-button:hover,
.booking-modal-link:hover{opacity:.9;}

.gallery-track img{cursor:zoom-in;}
.gallery-track img:hover,
.gallery-thumb:hover,
.hair-card img:hover{transform:scale(1.025);}
.gallery-side img{filter:brightness(.68);}
.gallery-side img:hover{filter:brightness(.82);}
.gallery-main img{box-shadow:0 16px 40px rgba(0,0,0,.14);}
.arrow:hover,
.specialists-arrow:hover{transform:translateY(-50%) scale(1.06);}

/* ===== ANIMATION ===== */
.reveal-on-scroll{
    opacity:0;
    transform:translateY(34px) scale(.985);
    filter:blur(6px);
    transition:opacity .9s var(--ease-salon), transform .9s var(--ease-salon), filter .9s var(--ease-salon);
    transition-delay:var(--reveal-delay,0ms);
    will-change:opacity,transform,filter;
}

.reveal-on-scroll.is-visible{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
}

.title-animate h2,
.title-animate .underlined,
.title-animate .black-box{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .7s var(--ease-salon), transform .7s var(--ease-salon);
}

.title-animate.is-visible h2,
.title-animate.is-visible .underlined,
.title-animate.is-visible .black-box{
    opacity:1;
    transform:translateY(0);
}

.title-animate.is-visible h2::before,
.title-animate.is-visible::before{
    transform: scaleX(1);
    opacity: 1;
}

.title-animate.is-visible h2::after,
.title-animate.is-visible::after{
    transform: scaleY(1);
    opacity: 1;
}

.specialist-text-frame.line-animate::before,
.specialist-text.line-animate::before{
    transform: scaleX(1);
    opacity: 1;
}

.specialist-text-frame.line-animate::after,
.specialist-text.line-animate::after{
    transform: scaleY(1);
    opacity: 1;
}

.gallery-image-in{
    animation:galleryImageReveal .8s var(--ease-salon) both;
    animation-delay:var(--gallery-image-delay,0ms);
}

@keyframes galleryImageReveal{
    0%{opacity:0; transform:translateY(18px) scale(.98); filter:blur(8px);} 
    100%{opacity:1; transform:translateY(0) scale(1); filter:blur(0);} 
}

@keyframes legalModalIn{
    from{opacity:0; transform:translateY(28px) scale(.98);} 
    to{opacity:1; transform:translateY(0) scale(1);} 
}

.legal-modal-dialog{
    position:relative;
    width:min(860px,92vw);
    max-height:86vh;
    background:#f8f7f5;
    border:1px solid rgba(17,17,17,.12);
    box-shadow:0 30px 80px rgba(0,0,0,.22);
    overflow:auto;
    z-index:2;
    animation:legalModalIn .45s var(--ease-salon) both;
}

.legal-modal-close{
    position:sticky;
    top:0;
    margin-left:auto;
    display:block;
    width:48px;
    height:48px;
    font-size:34px;
    color:#111;
}

.legal-modal-body{padding:8px 40px 34px; color:#222;}
.legal-modal-body h2{font-size:34px; font-weight:500; margin-bottom:20px;}
.legal-modal-body h3{font-size:18px; margin:24px 0 10px;}
.legal-modal-body p{font-size:15px; line-height:1.75; margin-bottom:14px;}
.legal-note{color:#666; font-size:13px;}

/* ===== LARGE TABLETS ===== */
@media (max-width:1200px){
    .header-right{right:24px;}
    .gallery-track{width:min(920px,90vw); height:360px;}
    .gallery-main{width:min(560px,60vw); height:360px;}
    .gallery-side{width:min(360px,38vw); height:270px; top:45px;}
    .left-img{left:-110px;}
    .right-img{right:-110px;}
    .contact-container{padding:60px 40px; gap:40px;}
    .jobs-hero h2{font-size:34px;}
    .arrow.left{z-index: 4;}
    .arrow.right{z-index: 4;}
}

/* ===== TABLETS ===== */
@media (max-width:1024px){
    body{padding-top:210px;}
    section[id]{scroll-margin-top:220px;}

    .header{padding-bottom:24px;}
    .header-right{position:static; justify-content:center; margin-top:18px; flex-wrap:wrap;}

    .hero img{height:480px;}
    .section-title h2{font-size:24px;}
    .section-title h2::before,
    .section-title::before{width:260px;}
    .arrow.left{z-index: 4;}
    .arrow.right{z-index: 4;}

    .tcc-card{min-height:540px;}
    .product-kicker{margin-bottom:78px;}
    .product-link{margin-top:70px;}

    .specialists-track{width:620px; height:220px;}
    .specialist-card.side{width:220px; height:150px;}
    .specialist-card.center{width:260px; height:180px;}
    .specialist-info h3{font-size:24px;}
    .specialist-text{font-size:15px;}
}

/* ===== MOBILE / TABLET ===== */
@media (max-width:768px){
    body{padding-top:185px;}
    section[id]{scroll-margin-top:195px;}

    .header{padding:18px;}
    .header-right a {font-size: 12px;}
    .header-right i {font-size: 12px;}
    .header-right {margin-top: 12px;}
    .logo-img{width:260px;}
    .nav{gap:12px 16px; margin-top:16px;}
    .nav a{font-size:11px; letter-spacing:.5px; padding: 6px 0 6px;}
    .header-right{gap:14px;}
    .termin{font-size:13px;}

    .hero img{height:340px; min-height:260px;}

    .about-team{padding:40px 16px 10px;}
    .section-title{margin-bottom:30px;}
    .section-title h2{font-size:20px; padding:16px 18px; max-width: 300px; line-height: 1.25; text-align: center;}
    .section-title h2::before{left:-12px; width:92px;}
    .section-title h2::after{left: -12px; height:14px;}
    .section-title::before{right:34px; width:88px; bottom: 2px;}
    .section-title::after{right:34px; height:14px; bottom: 2px;}

    .about-text{font-size:15px; line-height:1.55;}
    .about-text h3{font-size:16px; margin-bottom:18px;}
    .specialists-title,
    .specialists-header{font-size:18px;}

    .products-showcase{padding:14px 0 48px;}
    .products-shell{width:min(100%,calc(100% - 14px));}
    .tcc-card{min-height:auto;}
    .product-feature-inner,
    .mayday-copy{padding-left:18px; padding-right:18px;}
    .product-kicker{font-size:1.05rem; text-align:center; margin-bottom:26px;}
    .product-feature-grid{grid-template-columns:1fr; gap:18px; justify-items:center; text-align:center;}
    .product-feature-logo{width:132px;}
    .product-feature-copy p,
    .mayday-copy p{font-size:1rem; line-height:1.7; text-align:center;}
    .product-link,
    .mayday-copy .product-link{margin-top:24px; justify-content:center; font-size:.91rem; flex-wrap:wrap; text-align:center;}
    .product-link::after{width:42px; margin-left:6px;}
    .products-wave{min-height:70px; margin:0;}
    .mayday-visual img{width:min(320px,82vw);}
    .mayday-copy h3{font-size:1.2rem; margin-bottom:12px;}

    .philosophy-section{padding:50px 16px 60px;}
    .philosophy-title{margin-bottom:28px;}
    .philosophy-title h2{font-size:20px; padding:14px; letter-spacing:.5px;}
    .philosophy-title h2::before{left:-20px; width:110px;}
    .philosophy-title h2::after{left:-20px; height:14px;}
    .philosophy-title::before{right:8%; width:110px;}
    .philosophy-title::after{right:8%; height:14px;}
    .philosophy-text{font-size:15px; line-height:1.55;}

    .gallery-section{padding:56px 0;}
    .gallery-slider{min-height:auto; padding:0 16px;}
    .gallery-track{width:100%; height:auto; display:grid; grid-template-columns:1fr; gap:12px; position:static;}
    .gallery-main,
    .gallery-side{position:relative; left:auto; right:auto; top:auto; width:100%; height:220px; transform:none;}
    .gallery-main{order:-1;}
    .gallery-side img{filter:brightness(.88);}
    .arrow.left{left:8px; z-index: 1;}
    .arrow.right{right:8px;z-index: 1;}

    .gallery-modal-dialog{width:95vw; padding:24px 16px 18px;}
    .gallery-modal-grid{grid-template-columns:repeat(2,1fr); gap:12px;}
    .gallery-thumb{height:150px;}
    .lightbox-image-wrap{padding:0 56px;}
    .lightbox-close{font-size:32px;}

    .hairstyling-section{padding:20px 0 30px;}
    .hairstyling-container{max-width:100%; padding:0 16px;}
    .hairstyling-intro h2{font-size:22px;}
    .hairstyling-intro p{font-size:15px;}
    .hairstyling-grid{grid-template-columns:1fr; gap:18px;}
    .hair-card img{height:280px;}
    .hair-text-card{padding-top:6px;}
    .hair-text-card h3{font-size:20px;}

    .specialists-section{padding-left:14px; padding-right:14px;}
    .specialists-slider{min-height:auto; gap:10px;}
    .specialists-track{width:100%; height:auto; gap:10px;}
    .specialist-card.side{display:none;}
    .specialist-card.center{width:min(360px,82vw); height:220px; margin:0;}
    .specialists-arrow{width:54px; height:54px; font-size:24px;}
    .specialists-arrow.left{left:4px; z-index: 4;}
    .specialists-arrow.right{right:4px; z-index: 4;}
    .specialist-info h3{font-size:22px; margin-bottom:24px;}
    .specialist-text-frame{padding:26px 16px;}
    .specialist-text{font-size:14px;}

    .price-section{padding:30px 14px 40px;}
    .price-title{font-size:24px;}
    .price-category h3{font-size:20px;}
    .price-row{grid-template-columns:minmax(110px,1.2fr) repeat(3,minmax(64px,1fr)); column-gap:10px;}
    .service{font-size:16px;}
    .option,.price{font-size:14px;}

    .contact-section{padding:70px 16px;}
    .contact-container{flex-direction:column; padding:36px 22px; gap:24px; min-height:auto;}
    .contact-divider{width:90%; height:1px;}
    .contact-logo{font-size:34px;}
    .contact-sub{font-size:14px; letter-spacing:2px;}
    .contact-right h3{font-size:24px; letter-spacing:2px;}
    .address,.time{font-size:16px;}

    .jobs-hero{height:300px;}
    .jobs-hero h2{width:calc(100% - 32px); text-align:center; font-size:28px; line-height:1.15;}

    .booking-modal-dialog{width:96vw; height:88vh;}
    .booking-modal-header{padding:22px 18px 16px;}
    .booking-modal-header h2{font-size:22px;}
    .booking-modal-header p{font-size:13px;}
    .booking-modal-close{top:10px; right:10px;}

    .Blondschimmer_map,
    .Blonschimmer_map{padding:12px 12px 32px;}
    .Blondschimmer_map iframe,
    .Blonschimmer_map iframe{height:320px;}

    .footer-container{flex-direction:column; text-align:center;}
    .footer-contact{text-align:center;}
    .legal-modal-body{padding:8px 22px 26px;}
    .legal-modal-body h2{font-size:28px;}
}

/* ===== SMALL PHONES ===== */
@media (max-width:480px){
    body{padding-top:170px;}
    section[id]{scroll-margin-top:180px;}

    .header{padding:18px 14px;}
    .logo-img{width:220px;}
    .nav{justify-content:center; gap:10px 12px;}
    .nav a{font-size:10px;}

    .hero img{height:250px; min-height:220px;}

    .section-title h2{font-size:18px; padding:14px 16px;}
    .section-title h2::before,
    .section-title::before{width:90px;}

    .about-text{font-size:14px;}
    .specialists-title{font-size:16px; gap:6px;}
    .black-box{padding:8px 6px 7px;}

    .gallery-main,
    .gallery-side{height:180px;}
    .arrow{width:48px; height:48px; font-size:28px;}
    .gallery-modal-grid{grid-template-columns:1fr;}
    .gallery-thumb{height:180px;}

    .hair-card img{height:220px;}
    .specialists-arrow{width:46px; height:46px; font-size:20px;}

    .price-title{font-size:20px;}
    .price-category h3{font-size:18px;}
    .price-row{grid-template-columns:minmax(92px,1.1fr) repeat(3,minmax(52px,1fr)); column-gap:8px; row-gap:8px;}
    .service{font-size:13px;}
    .option,.price{font-size:11px;}

    .contact-button{padding:14px 22px; font-size:16px;}
    .legal-modal-dialog{width:94vw;}
    .legal-modal-body p{font-size:14px;}
    .jobs-content h3{font-size:20px;}
    .jobs-content p{font-size:15px;}
}

/* ===== VERY SMALL PHONES ===== */
@media (max-width:360px){
    body{padding-top:184px;}
    section[id]{scroll-margin-top:194px;}

    .nav{gap:8px 10px;}
    .nav a{font-size:9px;}
    .header-right{gap:10px;}
    .header-right a{font-size:13px;}
    .logo-img{width:190px;}

    .price-row{grid-template-columns:minmax(82px,1fr) repeat(3,minmax(46px,1fr));}
    .service{font-size:12px;}
    .option,.price{font-size:10px;}

    .gallery-main,
    .gallery-side{height:155px;}
    .hair-card img{height:190px;}
    .contact-logo{font-size:28px;}
}

@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{animation:none !important; transition:none !important;}
    .reveal-on-scroll{opacity:1 !important; transform:none !important; filter:none !important;}
}