/*
Theme Name: Csorba Zsanett — Atelier
Author: Darkside Media
Description: Egyedi, világos editorial one-page kozmetikai WordPress téma. Blog sablonokkal.
Version: 3.2.0
Text Domain: zsanett
*/
:root{
    --paper:#f9f7f3;
    --cream:#f2ebe2;
    --white:#fffdfb;
    --ink:#292620;
    --muted:#706b62;
    --accent:#aa8e70;
    --line:#dfd6ca;
    --serif:'Cormorant Garamond',Georgia,serif;
    --sans:'DM Sans',Arial,sans-serif;
    --script:'Cormorant Garamond',Georgia,serif
}

*{
    box-sizing:border-box
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:115px
}

body{
    margin:0;
    background:var(--paper);
    font-family:var(--sans);
    color:var(--ink);
    font-size:16px;
    line-height:1.7
}

a{
    color:inherit;
    text-decoration:none
}

button,input,textarea,select{
    font:inherit
}

button{
    cursor:pointer
}

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

.wrap{
    width:min(1200px,calc(100% - 64px));
    margin:auto
}

.eyebrow{
    text-transform:uppercase;
    letter-spacing:.22em;
    font-size:11px;
    font-weight:700;
    color:var(--accent)
}

h1,h2,h3,p{
    margin-top:0
}

h1,h2,h3{
    font-family:var(--serif);
    font-weight:500;
    line-height:1.03
}

h1{
    font-size:clamp(66px,6vw,128px);
    letter-spacing:-.048em
}

h2{
    font-size:clamp(48px,5.8vw,82px);
    letter-spacing:-.04em
}

h3{
    font-size:36px
}

.script{
    font-family:var(--script);
    font-weight:400;
    color:var(--accent);
    font-size:1.14em;
    line-height:.75;
    white-space:nowrap;
    letter-spacing:0
}

.site-header{
    position:fixed;
    z-index:50;
    inset:0 0 auto;
    transition:background .25s,box-shadow .25s
}

.site-header.scrolled{
    background:rgba(249,247,243,.43);
    backdrop-filter:blur(16px);
    box-shadow:0 5px 30px rgba(44,38,30,.06)
}

.header-inner{
    max-width:1500px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    padding:22px 42px;
    gap:30px
}

.brand{
    display:flex;
    flex-direction:column;
    font-family:var(--serif);
    font-size:26px;
    line-height:1;
    letter-spacing:.025em;
    white-space:nowrap
}

.brand small{
    font:500 9px var(--sans);
    letter-spacing:.23em;
    margin-top:7px;
    text-transform:uppercase;
    color:var(--accent)
}

.pill-nav{
    display:flex;
    align-items:center;
    gap:4px;
    border:1px solid rgba(164,144,123,.3);
    background:rgba(255,253,251,.48);
    backdrop-filter:blur(18px);
    border-radius:60px;
    padding:6px;
    box-shadow:0 10px 35px rgba(50,39,27,.06)
}

.pill-nav a{
    font-size:13px;
    padding:10px 14px;
    border-radius:40px;
    white-space:nowrap;
    transition:background .2s
}

.pill-nav a:hover,.pill-nav a.active{
    background:#e7ddd1
}

.header-cta{
    justify-self:end
}

.btn{
    border-radius:60px;
    padding:14px 25px;
    font-weight:600;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.1em;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    transition:transform .2s,background .2s;
    border:1px solid var(--ink);
    background:var(--ink);
    color:var(--white)
}

.btn:hover{
    transform:translateY(-2px);
    background:#615244
}

.btn-outline{
    background:transparent;
    color:var(--ink);
    border-color:#bdb1a3
}

.btn-outline:hover{
    color:white
}

.mobile-toggle{
    display:none;
    border:0;
    background:transparent;
    font-size:26px
}

.hero{
    height:100svh;
    display:grid;
    grid-template-columns:60% 40%;
    background:#f6f0e7
}

.hero-copy{
    align-self:center;
    padding:160px 5vw 90px max(6vw,35px);
    position:relative;
    z-index:1
}

.hero-copy h1{
    margin:25px 0 28px
}

.hero-copy p{
    max-width:470px;
    color:#676158;
    font-size:15px
}

.hero-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:38px
}

.hero-picture{
    position:relative;
    overflow:hidden;
    min-height:710px
}

.hero-picture img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 29%;
    filter:saturate(.78)
}

.hero-picture:after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#f6f0e7 0%,transparent 20%)
}

.hero-number{
    position:absolute;
    bottom:35px;
    right:40px;
    color:white;
    font-size:11px;
    letter-spacing:.2em;
    text-transform:uppercase;
    z-index:1
}

.hero-stamp{
    position:absolute;
    bottom:37px;
    left:6vw;
    font-size:12px;
    color:#83715c;
    text-transform:uppercase;
    letter-spacing:.14em
}

.section{
    padding:125px 0
}

.section-head{
    max-width:680px;
    margin-bottom:55px
}

.section-head p{
    max-width:600px;
    color:var(--muted)
}

.intro{
    background:var(--white)
}

.intro-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:12%;
    align-items:center
}

.intro-quote{
    padding:45px 30px 45px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
}

.intro-quote h2{
    margin:15px 0 20px
}

.intro-side{
    color:var(--muted);
    font-size:15px
}

.stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:30px
}

.stat{
    border-top:1px solid var(--line);
    padding-top:15px
}

.stat strong{
    display:block;
    font:500 40px var(--serif);
    color:var(--ink)
}

.stat small{
    font-size:11px;
    line-height:1.5;
    display:block
}

.treatments{
    background:var(--cream)
}

.section-heading-center{
    text-align:center;
    max-width:810px;
    margin:0 auto 65px
}

.section-heading-center h2{
    margin:13px 0
}

.service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:17px
}

.service-card{
    background:var(--white);
    border:1px solid #e7dfd4;
    padding:35px 30px 30px;
    min-height:370px;
    display:flex;
    flex-direction:column;
    transition:box-shadow .2s,transform .2s
}

.service-card:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 40px rgba(78,60,43,.07)
}

.service-index{
    font:500 12px var(--serif);
    color:var(--accent);
    letter-spacing:.1em
}

.service-card h3{
    font-size:37px;
    margin:30px 0 13px
}

.service-card p{
    font-size:13px;
    color:var(--muted);
    line-height:1.8;
    flex:1
}

.service-meta{
    border-top:1px solid var(--line);
    padding-top:17px;
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
    font-size:12px
}

.service-meta span{
    color:var(--muted)
}

.service-meta a{
    text-decoration:underline;
    text-underline-offset:4px;
    color:#8b6d4f
}

.split{
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:680px
}

.split-visual{
    background:#d1c2b4;
    position:relative;
    overflow:hidden
}

.split-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 22%;
    filter:saturate(.9)
}

.split-text{
    background:#292923;
    color:#f8f5ef;
    padding:110px clamp(35px,8vw,130px);
    display:flex;
    flex-direction:column;
    justify-content:center
}

.split-text .eyebrow{
    color:#cbb295
}

.split-text p{
    color:#d1cdc4;
    font-size:15px
}

.split-text h2{
    margin:20px 0 28px;
    line-height: 0.9;
}

.features{
    display:grid;
    gap:16px;
    margin-top:30px
}

.feature{
    border-top:1px solid #625f55;
    padding-top:13px;
    display:flex;
    gap:20px;
    align-items:baseline
}

.feature b{
    font:500 27px var(--serif);
    color:#d8c3a9
}

.feature span{
    font-size:13px
}

.booking{
    background:var(--paper)
}

.booking-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:12%;
    align-items:start
}

.booking h2{
    margin:15px 0 25px
}

.booking-copy{
    color:var(--muted);
    font-size:15px
}

.location{
    margin-top:42px;
    border-top:1px solid var(--line);
    padding-top:26px
}

.location strong{
    font-family:var(--serif);
    font-size:27px;
    font-weight:500
}

.booking-form{
    background:var(--white);
    padding:40px;
    border:1px solid var(--line);
    box-shadow:0 15px 50px #5a48300a
}

.booking-form h3{
    font-size:35px;
    margin-top: 10px;
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:17px
}

.form-field{
    display:flex;
    flex-direction:column;
    gap:5px;
    margin-bottom:18px
}

.form-field.full{
    grid-column:1/-1
}

.form-field label{
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-weight:700
}

.form-field input,.form-field select,.form-field textarea{
    width:100%;
    border:1px solid #e0d8ce;
    padding:14px;
    background:#fdfbf8;
    border-radius:0;
    color:var(--ink);
    outline-color:#ab8e6b;
    font-size:14px
}

.form-field textarea{
    min-height:96px;
    resize:vertical
}

.consent{
    display:flex;
    gap:10px;
    font-size:12px;
    color:var(--muted);
    margin-bottom:22px;
    align-items:flex-start
}

.consent input{
    margin-top:5px
}

.consent a{
    text-decoration:underline
}

.form-note{
    font-size:12px;
    color:var(--muted);
    margin-top:15px
}

.form-alert{
    padding:13px 17px;
    background:#e9f2e4;
    font-size:13px;
    margin-bottom:25px
}

.form-alert.error{
    background:#f7e8e1
}

.footer{
    background:#282822;
    color:#e8e4dc;
    padding:65px 0 30px
}

.footer-top{
    display:flex;
    justify-content:space-between;
    gap:25px;
    align-items:center
}

.footer .brand{
    font-size:32px
}

.footer p,.footer a{
    color:#c9c5ba;
    font-size:13px
}

.footer-bottom{
    border-top:1px solid #555248;
    padding-top:22px;
    margin-top:45px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    font-size:11px;
    color:#beb9ad
}

.blog-header{
    padding:190px 0 70px;
    background:var(--cream)
}

.blog-header h1{
    font-size:75px
}

.posts-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px
}

.post-card{
    background:#fff;
    padding:25px;
    border:1px solid var(--line)
}

.post-card h3{
    font-size:33px
}

.post-card p{
    font-size:14px;
    color:var(--muted)
}

.article{
    max-width:780px;
    margin:0 auto;
    padding:170px 24px 100px
}

.article h1{
    font-size:clamp(52px,7vw,90px)
}

.article-content h2{
    font-size:48px;
    margin-top:40px
}

.article-content img{
    height:auto
}

.screen-reader-text{
    position:absolute;
    left:-9999px
}

.honeypot{
    position:absolute!important;
    left:-9999px!important
}

@media(max-width:1080px){
    .header-inner{
        padding:20px 25px
    }

    .pill-nav a{
        padding:9px 9px
    }

    .hero-copy{
        padding-left:5vw
    }

    h1{
        font-size:90px
    }

    .section{
        padding:85px 0
    }

    .service-card{
        padding:26px 22px
    }

    .service-card h3{
        font-size:32px
    }

}

@media(max-width:800px){
    .wrap{
        width:min(100% - 36px,600px)
    }

    .header-inner{
        grid-template-columns:1fr auto auto;
        padding:17px 19px;
        gap:12px
    }

    .brand{
        font-size:23px
    }

    .pill-nav{
        display:none;
        position:absolute;
        top:75px;
        left:18px;
        right:18px;
        border-radius:18px;
        flex-direction:column;
        align-items:stretch;
        padding:12px;
        background:#fffefa
    }

    .pill-nav.open{
        display:flex
    }

    .pill-nav a{
        padding:13px 16px
    }

    .header-cta{
        padding:11px 13px;
        font-size:10px
    }

    .mobile-toggle{
        display:block
    }

    .hero{
        grid-template-columns:1fr;
        display:flex;
        flex-direction:column-reverse;
        min-height:auto
    }

    .hero-picture{
        height:62vh;
        min-height:410px
    }

    .hero-picture:after{
        background:linear-gradient(0deg,#f6f0e7 0%,transparent 25%)
    }

    .hero-copy{
        padding:15px 24px 90px
    }

    .hero-copy h1{
        font-size:clamp(65px,13vw,90px);
        margin:14px 0
    }

    .hero-stamp,.hero-number{
        display:none
    }

    .intro-grid,.booking-grid,.split{
        grid-template-columns:1fr;
        gap:42px
    }

    .intro-quote{
        padding:45px 0
    }

    .service-grid,.posts-grid{
        grid-template-columns:1fr 1fr
    }

    .split-visual{
        height:440px
    }

    .split-text{
        padding:70px 25px
    }

    .section{
        padding:80px 0
    }

    .booking-form{
        padding:25px
    }

    .footer-top{
        align-items:flex-start;
        flex-direction:column
    }

}

@media(max-width:560px){
    .service-grid,.posts-grid,.form-grid{
        grid-template-columns:1fr
    }

    .service-card{
        min-height:315px
    }

    .section-heading-center{
        margin-bottom:40px
    }

    .stats{
        gap:10px
    }

    .stat strong{
        font-size:32px
    }

    .booking-form{
        padding:20px
    }

    .footer-bottom{
        flex-direction:column
    }

    .hero-copy h1{
        font-size:68px
    }

    .header-cta{
        padding:10px;
        font-size:9px
    }

    .brand{
        font-size:19px
    }

}

/* v1.1 — floating, transforming header. No full-width sticky background. */
.site-header{
    pointer-events:none;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    transition:none
}

.header-inner{
    pointer-events:auto;
    position:relative;
    max-width:1500px;
    width:100%;
    margin:0 auto;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    padding:22px 42px;
    gap:26px;
    transition:width .45s cubic-bezier(.22,1,.36,1),max-width .45s cubic-bezier(.22,1,.36,1),padding .45s cubic-bezier(.22,1,.36,1),gap .45s cubic-bezier(.22,1,.36,1),background .45s,box-shadow .45s,border-radius .45s
}

.header-inner>.brand{
    min-width:0;
    transition:font-size .35s,transform .35s
}

.pill-nav{
    transition:background .3s,border-color .3s,box-shadow .3s;
    flex-shrink:0
}

.pill-nav a{
    transition:background .22s,color .22s
}

.pill-nav a.active{
    background:#ded0c0;
    color:#34271f
}

.site-header.scrolled .header-inner{
    max-width:1120px;
    width:calc(100% - 52px);
    margin-top:14px;
    padding:9px 18px;
    gap:19px;
    border:1px solid rgba(164,144,123,.36);
    border-radius:100px;
    background:rgba(251,248,244,.42);
    box-shadow:0 14px 45px rgba(41,34,25,.12);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px)
}

.site-header.scrolled .brand{
    font-size:20px
}

.site-header.scrolled .brand small{
    font-size:7px;
    margin-top:5px
}

.site-header.scrolled .pill-nav{
    background:transparent;
    border-color:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    padding:0;
    gap:0
}

.site-header.scrolled .pill-nav a{
    padding:9px 11px
}

.site-header.scrolled .header-cta{
    padding:11px 16px;
    font-size:10px
}

@media (max-width:1150px) and (min-width:801px){
    .header-inner{
        gap:14px;
        padding-inline:20px
    }

    .brand{
        font-size:20px
    }

    .brand small{
        font-size:9px
    }

    .pill-nav a{
        padding:9px 8px;
        font-size:11px
    }

    .header-cta{
        padding:12px 14px;
        font-size:10px
    }

    .site-header.scrolled .header-inner{
        width:calc(100% - 28px);
        gap:8px;
        padding:9px 12px
    }

    .site-header.scrolled .pill-nav a{
        padding:8px 7px
    }

    .site-header.scrolled .brand{
        font-size:18px
    }

}

@media (max-width:800px){
    .header-inner{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto auto;
        gap:11px;
        padding:15px 18px
    }

    .site-header.scrolled .header-inner{
        width:calc(100% - 24px);
        margin-top:10px;
        max-width:none;
        padding:11px 14px;
        gap:10px;
        border-radius:25px
    }

    .site-header.scrolled .brand{
        font-size:19px
    }

    .site-header.scrolled .brand small{
        font-size:7px
    }

    .site-header.scrolled .header-cta{
        padding:10px 12px
    }

    .pill-nav,.site-header.scrolled .pill-nav{
        display:none;
        position:absolute;
        left:0;
        right:0;
        top:calc(100% + 8px);
        z-index:5;
        border:1px solid var(--line);
        border-radius:19px;
        padding:12px;
        background:rgba(255,253,251,.48);
        box-shadow:0 15px 35px #2926201c;
        flex-direction:column;
        align-items:stretch;
        gap:4px;
        backdrop-filter:blur(18px)
    }

    .pill-nav.open,.site-header.scrolled .pill-nav.open{
        display:flex
    }

    .pill-nav a,.site-header.scrolled .pill-nav a{
        padding:12px 16px;
        font-size:13px
    }

    .mobile-toggle{
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:5px;
        width:36px;
        height:36px;
        align-items:center;
        padding:5px;
        flex-shrink:0
    }

    .mobile-toggle span{
        width:19px;
        height:1.5px;
        background:var(--ink);
        border-radius:3px
    }

}

@media(max-width:460px){
    .header-inner>.brand{
        font-size:16px
    }

    .brand small{
        font-size:9px;
        letter-spacing:.12em
    }

    .header-cta{
        padding:10px 10px;
        font-size:9px;
        letter-spacing:0
    }

    .site-header.scrolled .brand{
        font-size:15px
    }

    .site-header.scrolled .header-cta{
        padding:9px 9px
    }

}

@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }

    .header-inner,.pill-nav,.pill-nav a,.brand{
        transition:none!important
    }

}

/* v1.2 — Services, real reviews, reference gallery and unobtrusive cookie notice */
:root{
    --serif:Georgia,'Times New Roman',serif;
    --sans:Arial,Helvetica,sans-serif;
    --script:'Brush Script MT','Segoe Script',cursive
}

.service-image{
    margin:-35px -30px 25px;
    aspect-ratio:1.65;
    overflow:hidden;
    background:#e9e0d4
}

.service-image img{
    width:100%;
    height:100%;
    object-fit:cover
}

.social-proof{
    background:#fffdfb
}

.review-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px
}

.review-card{
    padding:31px;
    border:1px solid var(--line);
    background:#f9f6f0;
    display:flex;
    flex-direction:column;
    min-height:225px
}

.review-stars{
    color:#ae8c5c;
    letter-spacing:3px;
    margin-bottom:16px
}

.review-card blockquote{
    font-family:var(--serif);
    font-size:21px;
    line-height:1.5;
    margin:0 0 26px;
    flex:1
}

.review-credit{
    display:flex;
    flex-direction:column;
    font-size:12px
}

.review-credit small{
    color:var(--muted)
}

.gallery-section{
    background:var(--cream)
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px
}

.gallery-item{
    margin:0;
    background:white
}

.gallery-item img{
    width:100%;
    aspect-ratio:4/4.5;
    object-fit:cover;
    transition:transform .3s
}

.gallery-item a{
    overflow:hidden;
    display:block
}

.gallery-item a:hover img{
    transform:scale(1.035)
}

.gallery-item figcaption{
    padding:13px 16px;
    font-size:13px
}

.empty-note{
    color:var(--muted);
    grid-column:1/-1;
    text-align:center
}

.cookie-settings{
    border:none;
    background:none;
    text-decoration:underline;
    text-underline-offset:3px;
    color:#ddd1c1;
    font-size:11px
}

.cookie-banner{
    position:fixed;
    z-index:100;
    left:22px;
    bottom:22px;
    max-width:570px;
    width:calc(100% - 44px);
    display:flex;
    align-items:center;
    gap:20px;
    background:#fffdfb;
    border:1px solid var(--line);
    box-shadow:0 15px 50px #29262030;
    padding:23px;
    border-radius:15px
}

.cookie-banner[hidden]{
    display:none!important
}

.cookie-banner strong{
    font-family:var(--serif);
    font-size:20px;
    font-weight:500
}

.cookie-banner p{
    font-size:12px;
    line-height:1.6;
    margin:5px 0 0;
    color:var(--muted)
}

.cookie-banner p a{
    text-decoration:underline
}

.cookie-confirm{
    flex-shrink:0;
    padding:12px 19px
}

.site-header.scrolled .header-inner{
    max-width:1240px
}

@media(max-width:1080px){
    .service-image{
        margin:-26px -22px 22px
    }

    .review-grid{
        grid-template-columns:repeat(2,1fr)
    }

}

@media(max-width:800px){
    .gallery-grid{
        grid-template-columns:repeat(2,1fr)
    }

    .review-grid{
        grid-template-columns:1fr
    }

    .cookie-banner{
        left:12px;
        bottom:12px;
        width:calc(100% - 24px);
        padding:18px
    }

    .site-header.scrolled .header-inner{
        max-width:none
    }

}

@media(max-width:520px){
    .gallery-grid{
        grid-template-columns:1fr
    }

    .cookie-banner{
        display:block
    }

    .cookie-confirm{
        margin-top:14px
    }

}

/* v1.3 — Consent-aware click-to-load map and scroll-to-top */
.map-card{
    margin-top:28px;
    background:#fffdfb;
    border:1px solid var(--line);
    padding:9px;
    box-shadow:0 12px 45px rgba(55,40,28,.055)
}

.map-preview{
    height:265px;
    position:relative;
    overflow:hidden;
    background:radial-gradient(ellipse at 82% 12%,#e6d5c0 0,transparent 48%),linear-gradient(145deg,#f2e9dc,#e5ddcf);
}

.map-placeholder{
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:23px;
    text-align:center
}

.map-pin{
    font-size:31px;
    color:var(--accent);
    line-height:1;
    margin-bottom:8px
}

.map-placeholder strong{
    font:500 30px/1.1 var(--serif);
    margin:9px 0
}

.map-placeholder p{
    font-size:12px;
    color:var(--muted);
    line-height:1.5;
    margin:0 0 15px
}

.map-placeholder small{
    font-size:10px;
    color:#777068;
    margin-top:10px
}

.map-load-btn{
    border:1px solid #382f28;
    border-radius:100px;
    padding:11px 20px;
    background:#382f28;
    color:#fffdfb;
    font-size:11px;
    letter-spacing:.055em;
    transition:transform .2s,background .2s
}

.map-load-btn:hover{
    background:#806951;
    transform:translateY(-2px)
}

.map-preview iframe{
    display:block;
    width:100%;
    height:100%;
    border:0
}

.map-directions{
    padding:14px 11px 7px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    font-size:12px;
    font-weight:600;
    color:#554534
}

.map-directions:hover{
    text-decoration:underline;
    text-underline-offset:3px
}

.back-to-top{
    position:fixed;
    z-index:80;
    right:25px;
    bottom:27px;
    display:grid;
    place-items:center;
    width:49px;
    height:49px;
    border:1px solid rgba(170,142,112,.45);
    border-radius:50%;
    background:rgba(255,253,251,.94);
    color:#392f28;
    box-shadow:0 8px 28px rgba(41,38,32,.14);
    backdrop-filter:blur(12px);
    opacity:0;
    visibility:hidden;
    transform:translateY(12px);
    pointer-events:none;
    transition:opacity .28s,transform .28s,visibility .28s,background .2s
}

.back-to-top.is-visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto
}

.back-to-top:hover{
    background:#eee5d9
}

@media(max-width:800px){
    .back-to-top{
        right:16px;
        bottom:18px;
        width:44px;
        height:44px
    }

    .cookie-banner:not([hidden])~.back-to-top{
        bottom:150px
    }

    .map-preview{
        height:235px
    }

}

@media(prefers-reduced-motion:reduce){
    .back-to-top{
        transition:none
    }

}

/* v1.4 — editorial typography and precise section navigation */
body{
    font-family:var(--sans);
    font-weight:400;
    letter-spacing:-.012em;
    line-height:1.72
}

h1,h2,h3,.brand,.location strong{
    font-family:var(--serif);
    font-weight:500;
    letter-spacing:-.028em
}

h1,h2{
    line-height:1.08
}

h3{
    line-height:1.15
}

.script{
    font-family:var(--script);
    font-weight:400;
    letter-spacing:0;
    line-height:1.06;
    display:inline-block;
    white-space:normal
}

.pill-nav a,.header-cta{
    font-family:var(--sans);
    letter-spacing:0;
    font-weight:500
}

.pill-nav a.active{
    font-weight:600;
    background:#e8dace
}

#idopontkeres{
    scroll-margin-top:108px
}

@media(max-width:800px){
    #idopontkeres{
        scroll-margin-top:88px
    }

    .script{
        line-height:1.1
    }

}

/* v1.5 — discreet hero trust rail and editorial full-width contact map */
.hero{
    position:relative;
    isolation:isolate
}

.hero-copy{
    padding-bottom:155px
}

.hero-bottom-bar{
    position:absolute;
    z-index:3;
    bottom:0;
    left:0;
    right:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    min-height:86px;
    padding:16px clamp(28px,5vw,90px);
    background:rgba(255,253,251,.37);
    border-top:1px solid rgba(170,142,112,.27);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px)
}

.hero-bar-facts{
    display:flex;
    align-items:center;
    gap:clamp(14px,2.2vw,36px);
    color:#6a5e52;
    font-size:11px;
    font-weight:500;
    letter-spacing:.065em;
    text-transform:uppercase;
    line-height:1.45
}

.hero-bar-facts b{
    font-family:var(--serif);
    font-size:25px;
    font-weight:600;
    color:var(--ink);
    letter-spacing:-.04em;
    margin-right:4px
}

.hero-bar-separator{
    width:1px;
    height:25px;
    background:#d8cbbb;
    flex-shrink:0
}

.hero-scroll-cue{
    display:inline-flex;
    align-items:center;
    gap:13px;
    white-space:nowrap;
    color:#473b30;
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.12em;
    transition:color .2s
}

.hero-scroll-cue:hover{
    color:var(--accent)
}

.hero-scroll-cue svg{
    transition:transform .25s
}

.hero-scroll-cue:hover svg{
    transform:translateY(5px)
}

.booking{
    padding-bottom:110px
}

.booking-grid{
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:clamp(36px,5vw,90px)
}

.booking-info{
    padding-top:14px
}

.booking-copy{
    max-width:540px;
    line-height:1.85
}

.location{
    margin-top:37px
}

.location strong{
    display:inline-block;
    margin:7px 0;
    font-size:clamp(29px,3vw,39px);
    line-height:1.12
}

.location p{
    margin:0 0 8px
}

.location a{
    text-decoration:underline;
    text-underline-offset:4px;
    font-size:13px
}

.booking-form-column{
    min-width:0
}

.booking-form{
    box-shadow:0 18px 60px rgba(71,54,38,.055);
    border-radius:4px
}

.contact-map-area{
    margin-top:70px;
    border-top:1px solid var(--line);
    padding-top:40px
}

.contact-map-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:28px;
    margin-bottom:24px
}

.contact-map-heading h3{
    font-size:clamp(38px,4.5vw,58px);
    margin:8px 0 0
}

.contact-map-heading p{
    color:var(--muted);
    font-size:13px;
    margin:0 0 5px;
    text-align:right
}

.map-card-wide{
    margin:0;
    padding:10px;
    border-radius:4px
}

.map-card-wide .map-preview{
    height:360px
}

.map-card-wide .map-placeholder{
    background:radial-gradient(circle at 25% 10%,#f6f0e7,transparent 52%),linear-gradient(125deg,#f2ebe2,#e8dacc)
}

.map-card-wide .map-placeholder strong{
    font-size:clamp(31px,4vw,48px)
}

.map-card-wide .map-placeholder p{
    font-size:13px;
    margin:2px 0 22px
}

.map-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:10px 12px 2px
}

.map-footer>span{
    font-size:12px;
    color:var(--muted)
}

.map-footer .map-directions{
    padding:7px 0
}

@media(max-width:1050px){
    .hero-bar-facts{
        font-size:10px;
        gap:14px
    }

    .hero-bottom-bar{
        padding-inline:28px
    }

    .booking-grid{
        gap:38px
    }

}

@media(max-width:800px){
    .hero{
        display:flex;
        flex-direction:column-reverse;
        min-height:0;
        padding-bottom:0
    }

    .hero-copy{
        padding-bottom:34px
    }

    .hero-bottom-bar{
        position:relative;
        order:-1;
        min-height:0;
        gap:15px;
        padding:17px 24px
    }

    .hero-bar-facts{
        flex-wrap:wrap;
        gap:9px 16px
    }

    .hero-bar-facts span:nth-of-type(3),.hero-bar-facts span:nth-of-type(4){
        display:none
    }

    .hero-bar-facts b{
        font-size:22px
    }

    .booking-grid{
        grid-template-columns:1fr;
        gap:38px
    }

    .booking-info{
        padding-top:0
    }

    .booking{
        padding-bottom:78px
    }

    .contact-map-area{
        margin-top:48px
    }

    .map-card-wide .map-preview{
        height:300px
    }

    .contact-map-heading{
        align-items:start;
        flex-direction:column;
        gap:6px
    }

    .contact-map-heading p{
        text-align:left
    }

    .map-footer{
        align-items:flex-start;
        flex-direction:column;
        gap:0
    }

}

@media(max-width:480px){
    .hero-bottom-bar{
        padding:14px 20px
    }

    .hero-scroll-cue span{
        display:none
    }

    .hero-bar-facts{
        font-size:9.5px;
        letter-spacing:.02em
    }

    .hero-bar-facts .hero-bar-separator{
        height:20px
    }

    .contact-map-area{
        margin-top:34px
    }

    .map-card-wide .map-preview{
        height:275px
    }

    .map-footer .map-directions{
        font-size:11px
    }

}

@media(prefers-reduced-motion:reduce){
    .hero-scroll-cue svg{
        transition:none
    }

}

/* v1.6 – soft editorial label pills and natural italic accents */
.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    max-width:100%;
    background:#ece1d2;
    color:#7b6048;
    border:1px solid rgba(157,128,99,.20);
    border-radius:999px;
    padding:8px 14px;
    font-family:var(--sans);
    font-size:10px;
    font-weight:700;
    letter-spacing:.13em;
    line-height:1.45;
    text-transform:uppercase;
}

.eyebrow::before{
    content:"";
    display:block;
    width:6px;
    height:6px;
    flex:none;
    border-radius:50%;
    background:#a88b6e;
    box-shadow:0 0 0 3px rgba(168,139,110,.12)
}

/* Maintain contrast on the dark editorial section */
.split-text .eyebrow{
    color:#e6cba8;
    background:rgba(220,195,163,.12);
    border-color:rgba(231,202,166,.25)
}

.split-text .eyebrow::before{
    background:#dfbd91
}

.script{
    font-family:var(--serif);
    font-weight:500;
    font-style:italic;
    font-size:1.035em;
    line-height:1.06;
    letter-spacing:-.035em;
    color:#a18468;
}

@media(max-width:600px){
    .eyebrow{
        font-size:9px;
        letter-spacing:.095em;
        padding:7px 11px;
        gap:8px
    }

    .eyebrow::before{
        width:5px;
        height:5px
    }

}

/* v1.7 — restrained italic typography, reliable mobile layout, integrated dropdown */
:root{
    --sans:'Manrope',Arial,sans-serif;
    --italic:'Newsreader',Georgia,serif
}

body{
    font-family:var(--sans);
    font-weight:400;
    letter-spacing:-.012em;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility
}

button,input,select,textarea{
    font-family:var(--sans)
}

.hero-copy p,.intro-quote p,.intro-side,.booking-copy{
    line-height:1.85
}

.script{
    font-family:var(--italic);
    font-style:italic;
    font-weight:400;
    font-size:1.1em;
    letter-spacing:-.052em;
    line-height:0.9;
    white-space:normal;
    overflow-wrap:normal
}

.budapest{
    padding-bottom: 8px;
}

.hero-copy h1,.intro-quote h2,.section-heading-center h2,.split-text h2,.booking h2{
    overflow-wrap:break-word
}

/* Fixed header should never paint a full-width bar on scroll */
.site-header.scrolled{
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none
}

@media(max-width:800px){
    html,body{
        max-width:100%;
        overflow-x:clip
    }

    .hero,.hero-copy,.hero-picture,.hero-bottom-bar,.wrap,.section,.intro-grid,.booking-grid{
        min-width:0;
        max-width:100%
    }

    .site-header{
        inset:10px 10px auto;
        z-index:100
    }

    .header-inner{
        width:100%;
        max-width:560px;
        margin:0 auto;
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        gap:0 10px;
        padding:11px 14px;
        background:rgba(255,253,251,.96);
        border:1px solid rgba(171,150,127,.40);
        border-radius:29px;
        box-shadow:0 14px 35px rgba(40,31,24,.08);
        backdrop-filter:blur(16px);
        -webkit-backdrop-filter:blur(16px);
        transition:border-radius .3s ease,box-shadow .3s ease
    }

    .site-header.menu-open .header-inner{
        border-radius:26px;
        box-shadow:0 20px 55px rgba(40,31,24,.14)
    }

    .brand{
        font-size:clamp(17px,4.15vw,23px);
        flex:1;
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
        letter-spacing:-.025em
    }

    .brand small{
        font-size:9px;
        letter-spacing:.1em;
        white-space:nowrap
    }

    .header-cta{
        flex:none;
        font-size:9px;
        padding:10px 11px;
        letter-spacing:0;
        white-space:nowrap
    }

    .mobile-toggle{
        display:flex;
        flex:none;
        position:relative;
        align-items:center;
        justify-content:center;
        width:37px;
        height:37px;
        padding:0;
        border:0;
        background:transparent;
        color:var(--ink)
    }

    .mobile-toggle span{
        position:absolute;
        display:block;
        width:21px;
        height:1.7px;
        background:currentColor;
        border-radius:2px;
        transition:transform .27s ease,opacity .2s ease;
        transform-origin:center
    }

    .mobile-toggle span:nth-child(1){
        transform:translateY(-6px)
    }

    .mobile-toggle span:nth-child(2){
        transform:translateY(0)
    }

    .mobile-toggle span:nth-child(3){
        transform:translateY(6px)
    }

    .mobile-toggle[aria-expanded=true] span:nth-child(1){
        transform:rotate(45deg)
    }

    .mobile-toggle[aria-expanded=true] span:nth-child(2){
        opacity:0;
        transform:scaleX(.3)
    }

    .mobile-toggle[aria-expanded=true] span:nth-child(3){
        transform:rotate(-45deg)
    }

    .pill-nav{
        display:flex;
        position:static;
        order:5;
        flex:0 0 100%;
        width:100%;
        max-height:0;
        overflow:hidden;
        visibility:hidden;
        opacity:0;
        pointer-events:none;
        transform:translateY(-6px);
        margin:0;
        padding:0;
        border:0;
        box-shadow:none;
        border-radius:0;
        background:transparent;
        backdrop-filter:none;
        flex-direction:column;
        align-items:stretch;
        gap:3px;
        transition:max-height .36s ease,opacity .25s ease,transform .3s ease,padding .3s ease,margin .3s ease,visibility .3s
    }

    .pill-nav.open{
        max-height:540px;
        visibility:visible;
        opacity:1;
        pointer-events:auto;
        transform:translateY(0);
        margin-top:10px;
        padding:12px 0 3px;
        border-top:1px solid var(--line)
    }

    .pill-nav a{
        display:block;
        padding:11px 18px;
        font-size:13px;
        border-radius:28px
    }

    .hero{
        width:100%;
        overflow:clip;
        display:flex;
        flex-direction:column-reverse
    }

    .hero-copy{
        width:100%;
        padding:27px max(22px,6vw) 42px;
        min-width:0
    }

    .hero-copy h1{
        font-size:clamp(46px,10.5vw,72px);
        letter-spacing:-.058em;
        line-height:1.02;
        max-width:100%;
        margin:20px 0 25px;
        text-wrap:balance
    }

    .hero-copy h1 .script{
        display:block;
        font-size:1em;
        letter-spacing:-.05em;
        line-height:1.07;
        overflow-wrap:anywhere;
        word-break:normal
    }

    .hero-copy p{
        max-width:100%;
        font-size:14px
    }

    .hero-picture{
        min-height:0;
        height:clamp(320px,62svh,520px);
        width:100%
    }

    .hero-actions{
        gap:10px
    }

    .hero-actions .btn{
        max-width:100%
    }

    .hero-bottom-bar{
        width:100%;
        padding-inline:max(20px,5vw)
    }

    .intro-quote h2{
        font-size:clamp(45px,10vw,68px)
    }

    .intro-quote h2 .script{
        display:inline;
        overflow-wrap:anywhere
    }

    .split-text h2 .script{
        overflow-wrap:anywhere;
        line-height: 0.9em;
        margin-top: 15px;
    }

}

@media(max-width:420px){
    .header-inner{
        padding:10px 11px;
        gap:0 6px
    }

    .brand{
        font-size:16px
    }

    .brand small{
        font-size:9px;
        letter-spacing:.05em
    }

    .header-cta{
        padding:10px 9px;
        font-size:8px
    }

    .mobile-toggle{
        width:31px;
        height:34px
    }

    .hero-copy{
        padding:25px 22px 35px
    }

    .hero-copy h1{
        font-size:clamp(44px,10.4vw,52px)
    }

    .hero-copy h1 .script{
        font-size:1.2em
    }

    .hero-actions .btn{
        font-size:10px;
        padding:13px 17px
    }

    .hero-bar-facts{
        min-width:0
    }

}

@media(prefers-reduced-motion:reduce){
    .pill-nav,.mobile-toggle span,.header-inner{
        transition:none!important
    }

}

/* v1.8 — sticky mobile header uses the SAME expanding capsule as the initial state.
   Override old .site-header.scrolled selector specificity instead of placing a second menu below it. */
@media (max-width:800px){
    .site-header.scrolled{
        inset:10px 10px auto;
        background:transparent;
        box-shadow:none;
        backdrop-filter:none;
        -webkit-backdrop-filter:none
    }

    .site-header.scrolled .header-inner{
        box-sizing:border-box;
        width:100%;
        max-width:560px;
        margin:0 auto;
        padding:11px 14px;
        gap:0 10px;
        border-radius:29px;
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        background:rgba(255,253,251,.96);
        border:1px solid rgba(171,150,127,.40);
        box-shadow:0 14px 35px rgba(40,31,24,.08);
        backdrop-filter:blur(16px);
        -webkit-backdrop-filter:blur(16px)
    }

    .site-header.scrolled.menu-open .header-inner,.site-header.menu-open .header-inner{
        border-radius:26px;
        box-shadow:0 20px 55px rgba(40,31,24,.14)
    }

    .site-header.scrolled .brand{
        font-size:clamp(17px,4.15vw,23px);
        flex:1;
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
        letter-spacing:-.025em
    }

    .site-header.scrolled .brand small{
        font-size:clamp(6px,1.55vw,9px);
        letter-spacing:.1em;
        margin-top:7px
    }

    .site-header.scrolled .header-cta{
        flex:none;
        font-size:10px;
        padding:10px 11px;
        letter-spacing:0;
        white-space:nowrap
    }

    .site-header.scrolled .pill-nav,.site-header.scrolled .pill-nav.open{
        position:static;
        order:5;
        flex:0 0 100%;
        width:100%;
        min-width:0;
        left:auto;
        right:auto;
        top:auto;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:3px;
        background:transparent;
        border:0;
        box-shadow:none;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
        border-radius:0;
        transition:max-height .36s ease,opacity .25s ease,transform .3s ease,padding .3s ease,margin .3s ease,visibility .3s
    }

    .site-header.scrolled .pill-nav:not(.open){
        max-height:0;
        overflow:hidden;
        visibility:hidden;
        opacity:0;
        pointer-events:none;
        transform:translateY(-6px);
        margin:0;
        padding:0
    }

    .site-header.scrolled .pill-nav.open{
        max-height:min(540px,calc(100dvh - 110px));
        overflow-y:auto;
        visibility:visible;
        opacity:1;
        pointer-events:auto;
        transform:translateY(0);
        margin:10px 0 0;
        padding:12px 0 3px;
        border-top:1px solid var(--line)
    }

    .site-header.scrolled .pill-nav a{
        display:block;
        padding:11px 18px;
        font-size:13px;
        border-radius:28px
    }

}

@media(max-width:420px){
    .site-header.scrolled .header-inner{
        padding:10px 11px;
        gap:0 6px
    }

    .site-header.scrolled .brand{
        font-size:16px
    }

    .site-header.scrolled .brand small{
        font-size:6.1px;
        letter-spacing:.05em
    }

    .site-header.scrolled .header-cta{
        padding:10px 9px;
        font-size:10px
    }

}

/* v1.9 — mobile section rhythm */
@media (max-width: 800px) {
    /* No blank white strip between the portrait and dark philosophy section. */
    #miert-en.split {
        gap: 0;
        row-gap: 0;
        column-gap: 0;
    }

    /* The introduction divider comes first; spacing follows BELOW it. */
    #rolam.section {
        padding-top: 0;
        padding-bottom: 20px;
    }

    #rolam > .wrap.intro-grid {
        border-top: 1px solid var(--line);
        padding-top: 40px;
    }

    #rolam .intro-quote {
        border-top: 0;
        padding-top: 0;
    }

}

/* v2.0 — intentional mobile compact sticky header, unified expanding capsule */
@media(max-width:800px){
    .site-header,.site-header.scrolled {
        inset:10px 10px auto;
        background:transparent;
        box-shadow:none;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
    }

    .site-header .header-inner,.site-header.scrolled .header-inner {
        width:100%;
        max-width:560px;
        margin:0 auto;
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        gap:0 10px;
        padding:12px 14px;
        border-radius:29px;
        background:rgba(255,253,251,.46);
        border:1px solid rgba(171,150,127,.40);
        box-shadow:0 14px 35px rgba(40,31,24,.08);
        transition:padding .34s cubic-bezier(.22,1,.36,1),border-radius .34s,background .34s,box-shadow .34s;
    }

    .site-header .brand,.site-header.scrolled .brand {
        flex:1;
        min-width:0;
        font-size:clamp(17px,4.15vw,23px);
        line-height:1.06;
        transition:font-size .34s,letter-spacing .34s;
    }

    .site-header .brand small,.site-header.scrolled .brand small {
        display:block;
        max-height:22px;
        opacity:1;
        overflow:hidden;
        margin-top:7px;
        font-size:clamp(8px);
        line-height:1.35;
        letter-spacing:.1em;
        transform:translateY(0);
        transition:max-height .3s,opacity .23s,margin .3s,transform .3s;
    }

    .site-header .header-cta,.site-header.scrolled .header-cta {
        padding:10px 11px;
        font-size:9px;
        letter-spacing:0;
        transition:padding .34s,background .2s;
    }

    .site-header.scrolled:not(.menu-open) .header-inner {
        padding-top:7px;
        padding-bottom:7px;
        box-shadow:0 12px 42px rgba(40,31,24,.13);
    }

    .site-header.scrolled:not(.menu-open) .brand {
        font-size:clamp(16px,3.9vw,21px);
    }

    .site-header.scrolled:not(.menu-open) .brand small {
        max-height:0;
        opacity:0;
        margin-top:0;
        transform:translateY(-4px);
    }

    .site-header.scrolled:not(.menu-open) .header-cta {
        padding-top:9px;
        padding-bottom:9px;
    }

    .site-header.menu-open .header-inner,.site-header.scrolled.menu-open .header-inner {
        padding:12px 14px;
        border-radius:26px;
        box-shadow:0 20px 55px rgba(40,31,24,.14);
    }

    .site-header.menu-open .brand small,.site-header.scrolled.menu-open .brand small {
        max-height:22px;
        opacity:1;
        margin-top:7px;
        transform:none;
    }

    .site-header .pill-nav,.site-header.scrolled .pill-nav {
        position:static;
        order:5;
        flex:0 0 100%;
        width:100%;
        min-width:0;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:3px;
        border:0;
        border-radius:0;
        background:transparent;
        box-shadow:none;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
        transition:max-height .36s ease,opacity .25s ease,transform .3s ease,padding .3s ease,margin .3s ease,visibility .3s;
    }

    .site-header .pill-nav:not(.open),.site-header.scrolled .pill-nav:not(.open) {
        max-height:0;
        overflow:hidden;
        visibility:hidden;
        opacity:0;
        pointer-events:none;
        transform:translateY(-6px);
        margin:0;
        padding:0;
    }

    .site-header .pill-nav.open,.site-header.scrolled .pill-nav.open {
        max-height:min(540px,calc(100dvh - 110px));
        overflow-y:auto;
        visibility:visible;
        opacity:1;
        pointer-events:auto;
        transform:translateY(0);
        margin:10px 0 0;
        padding:12px 0 3px;
        border-top:1px solid var(--line);
    }

}

@media(max-width:460px){
    .site-header .header-inner,.site-header.scrolled .header-inner {
        padding:11px 11px;
        gap:0 6px;
    }

    .site-header .brand,.site-header.scrolled .brand {
        font-size:16px;
    }

    .site-header .brand small,.site-header.scrolled .brand small {
        font-size:9px;
        letter-spacing:.05em;
    }

    .site-header .header-cta,.site-header.scrolled .header-cta {
        padding:10px 9px;
        font-size:8px;
    }

    .site-header.scrolled:not(.menu-open) .brand {
        font-size:15px;
    }

    .site-header.menu-open .header-inner,.site-header.scrolled.menu-open .header-inner {
        padding:11px 11px;
    }

}

@media(prefers-reduced-motion:reduce){
    .site-header .brand small,.site-header .header-cta,.site-header .header-inner{
        transition:none!important
    }

}


/* v2.1 — Lightweight motion enhancement; appended after the user's custom CSS. */
@media (prefers-reduced-motion: no-preference) {
  /* Elements stay visible until JavaScript explicitly marks them for reveal. */
  .cz-motion-reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
  }
  .cz-motion-reveal.cz-motion-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}
html.cz-lenis-active { scroll-behavior: auto; }
/* Desktop GSAP takes over selected transforms without changing the layout. */
@media (max-width: 800px), (prefers-reduced-motion: reduce) {
  .cz-motion-reveal { opacity: 1; transform: none; transition: none; will-change: auto; }
}


/* v2.2 — First-visit entrance for header and hero. Transform and opacity only. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes cz-first-enter {
    from { opacity: 0; transform: translate3d(0, 19px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  .home .site-header .header-inner {
    animation: cz-first-enter .72s cubic-bezier(.22,1,.36,1) .05s both;
  }
  .home .hero-copy > .eyebrow {
    animation: cz-first-enter .8s cubic-bezier(.22,1,.36,1) .18s both;
  }
  .home .hero-copy > h1 {
    animation: cz-first-enter .9s cubic-bezier(.22,1,.36,1) .28s both;
  }
  .home .hero-copy > p {
    animation: cz-first-enter .85s cubic-bezier(.22,1,.36,1) .42s both;
  }
  .home .hero-actions {
    animation: cz-first-enter .85s cubic-bezier(.22,1,.36,1) .55s both;
  }
  .home .hero-bottom-bar {
    animation: cz-first-enter .75s cubic-bezier(.22,1,.36,1) .68s both;
  }
}
/* The native mobile menu is never hidden by an intro once it is opened. */
@media (max-width: 800px) and (prefers-reduced-motion: no-preference) {
  .home .site-header.menu-open .header-inner { animation: none; }
}


/* v2.3 — layered ivory hero and transparent editorial portrait. */
.hero {
  background: radial-gradient(ellipse 57% 82% at 88% 34%, rgba(209,183,156,.29), transparent 72%),
              radial-gradient(ellipse 48% 58% at 30% 82%, rgba(255,255,255,.86), transparent 75%),
              linear-gradient(119deg,#faf7f1 0%,#f3e9dd 52%,#eae0d3 100%);
  overflow: clip;
}
.hero-picture {
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  background: transparent;
}
.hero-picture::after {
  background: none;
}
.hero-picture .hero-cutout {
  position: absolute;
  inset: auto 0 0 auto;
  display: block;
  width: min(100%,780px);
  height: 78%;
  object-fit: contain;
  object-position: center bottom;
  filter: none;
  z-index: 2;
  transform-origin: center bottom;
}
.hero-orbit {
  position: absolute;
  display: block;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.hero-orbit--main {
  width: clamp(390px,43vw,790px);
  aspect-ratio: 1;
  top: 8%;
  left: 1%;
  background: radial-gradient(circle at 33% 28%,rgba(255,255,255,.82),rgba(224,202,179,.57) 53%,rgba(193,160,126,.18) 74%,transparent 76%);
  box-shadow: inset 0 0 80px rgba(255,255,255,.32);
}
.hero-orbit--outline {
  width: clamp(460px,48vw,900px);
  aspect-ratio: 1;
  top: 1%;
  left: 7%;
  border: 1px solid rgba(153,124,94,.24);
}
.hero-orbit--small {
  width: clamp(100px,13vw,240px);
  aspect-ratio: 1;
  top: 9%;
  right: -5%;
  background: radial-gradient(circle at 30% 30%,rgba(255,255,255,.66),rgba(202,174,147,.18) 70%,transparent 78%);
}
.hero-copy { z-index: 4; }
.hero-bottom-bar { z-index: 5; }
.hero-picture .hero-number { z-index: 3; color: #82705b; }
@media (max-width: 800px) {
  .hero-picture {
    width: 100%;
    min-height: 0;
    height: clamp(340px,59svh,530px);
  }
  .hero-picture .hero-cutout {
    width: 100%;
    height: 98%;
    object-position: center bottom;
  }
  .hero-orbit--main {
    width: min(110vw,580px);
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
  }
  .hero-orbit--outline {
    width: min(114vw,600px);
    top: 4%;
    left: 50%;
    transform: translateX(-50%);
  }
  .hero-orbit--small { width: 125px; top: 3%; right: -4%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-orbit, .hero-picture .hero-cutout { transition: none !important; animation: none !important; }
}


/* v2.4 — mobile editorial hero, contact details and reliable integrated menu closing */
.contact-quick { display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px; }
.contact-quick a { font-size:13px;color:#786653;text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere; }
.location-photo {display:block;width:100%;height:clamp(170px,21vw,250px);object-fit:cover;object-position:center;border-radius:8px;margin:20px 0 18px;filter:saturate(.87);}
.mobile-menu-contact {display:none;}
.footer-contact-details {display:flex;flex-direction:column;gap:5px;margin-top:14px;}
.footer-contact-details a {overflow-wrap:anywhere;}
@media (max-width:800px) {
  /* Place the headline first: the transparent portrait is now a visual continuation, not a giant introductory image. */
  .hero {display:flex;flex-direction:column;min-height:0;height:auto;}
  .hero-copy {order:1;padding-top:clamp(116px,16svh,146px);padding-bottom:16px;}
  .hero-picture {order:2;width:100%;height:clamp(310px,76vw,470px);min-height:0;}
  .hero-bottom-bar {order:3;}
  .hero-picture .hero-cutout {height:108%;width:100%;object-position:center bottom;}
  .hero-orbit--main {top:0;}
  .hero-orbit--outline {top:0;}
  /* Keep the capsule open throughout closing; animate the nav height rather than display/visibility jumps. */
  .site-header .pill-nav,.site-header.scrolled .pill-nav {
    display:flex;position:static;order:5;flex:0 0 100%;width:100%;
    max-height:0;overflow:hidden;opacity:0;visibility:visible;pointer-events:none;
    margin:0;padding:0;border:0;transform:translateY(-5px);
    transition:max-height .36s cubic-bezier(.22,1,.36,1),opacity .26s ease,transform .32s ease,margin .32s ease,padding .32s ease !important;
  }
  .site-header .pill-nav.open,.site-header.scrolled .pill-nav.open {
    max-height:min(690px,calc(100dvh - 112px));opacity:1;pointer-events:auto;
    overflow-y:auto;transform:translateY(0);margin:10px 0 0;padding:12px 0 6px;
    border-top:1px solid var(--line);
  }
  .mobile-menu-contact {display:flex;flex-direction:column;gap:9px;margin:12px 14px 5px;padding-top:17px;border-top:1px solid var(--line);}
  .mobile-menu-contact-label {font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700;}
  .mobile-menu-contact a {font-size:13px;color:var(--ink);padding:2px 0;overflow-wrap:anywhere;}
  .mobile-menu-contact-address {font-size:11px;color:var(--muted);line-height:1.55;}
  .location-photo {height:190px;}
}
@media (max-width:420px){.hero-copy {padding-top:110px;}.hero-picture {height:clamp(285px,77vw,345px);}}
@media (prefers-reduced-motion:reduce){.site-header .pill-nav,.site-header.scrolled .pill-nav{transition:none!important;}}

/* v2.4 location photo pairing and closing-state visibility override. */
.location-photos {display:grid;grid-template-columns:1.2fr .8fr;gap:10px;margin:20px 0 18px;}
.location-photos .location-photo {height:170px;margin:0;min-width:0;}
@media(max-width:800px){
 .location-photos .location-photo{height:150px;}
 .site-header .pill-nav:not(.open),.site-header.scrolled .pill-nav:not(.open){visibility:visible;max-height:0;overflow:hidden;opacity:0;pointer-events:none;margin:0;padding:0;}
}
@media(max-width:420px){.location-photos .location-photo{height:115px;}}

/* v2.5 — Mobile hero as one continuous layered composition.
   The content, portrait and circles remain inside the SAME .hero section.
   Visual overlap does not affect layout widths or desktop behavior. */
@media (max-width: 800px) {
  .hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background:
      radial-gradient(ellipse 83% 53% at 92% 64%, rgba(213,189,163,.32), transparent 72%),
      radial-gradient(ellipse 67% 47% at 12% 76%, rgba(255,255,255,.87), transparent 77%),
      linear-gradient(150deg, #faf7f1 0%, #f4eade 64%, #eae0d3 100%);
  }

  .hero-copy {
    position: relative;
    z-index: 4;
    padding-bottom: 58px;
  }

  .hero-picture {
    position: relative;
    isolation: auto;
    z-index: 2;
    overflow: visible;
    width: 100%;
    height: clamp(355px, 91vw, 500px);
    margin-top: -200px !important;
    pointer-events: none;
  }

  .hero-picture .hero-cutout {
    height: 108%;
    width: 100%;
    object-position: center bottom;
    z-index: 2;
  }

  .hero-orbit--main {
    top: -22%;
    left: 68%;
    width: min(125vw, 640px);
  }

  .hero-orbit--outline {
    top: -30%;
    left: 68%;
    width: min(135vw, 680px);
  }

  .hero-orbit--small {
    top: -39%;
    right: -8%;
    width: clamp(110px, 28vw, 160px);
  }

  .hero-bottom-bar {
    position: relative;
    z-index: 5;
    margin-top: 0;
  }
}

@media (max-width: 420px) {
  .hero-copy { padding-bottom: 47px; }
  .hero-picture {
    height: clamp(315px, 94vw, 385px);
    margin-top: -250px !important;
  }
  .hero-orbit--main { top: -27%; }
  .hero-orbit--outline { top: -14%; }
}


/* v2.6 — Mobile controls, one-time header entrance, native mobile reveals and subtle depth. */
@media (max-width: 800px) {
  .hero { --cz-portrait-x: 80px; --cz-portrait-y: 50px; --cz-portrait-scale: 0.9; }
  .hero-picture .hero-cutout {
    /* Position freely by editing the three variables on .hero above. */
    translate: var(--cz-portrait-x) calc(var(--cz-portrait-y) + var(--cz-mobile-parallax, 0px));
    scale: var(--cz-portrait-scale);
  }
  .hero-actions { display:flex; flex-direction:column; align-items:flex-start; }
  .hero-actions .btn { width: fit-content; max-width:100%; }
  .site-header .header-cta, .site-header.scrolled .header-cta { font-size:10px; }
  /* Allow native observer transitions below the fold on mobile. */
  .cz-motion-reveal { opacity:0; transform:translate3d(0,18px,0); transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1); }
  .cz-motion-reveal.cz-motion-visible { opacity:1; transform:none; transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1); }
  /* Avoid the accidental replay when .menu-open is removed. */
  .home .site-header.cz-header-entered .header-inner,
  .home .site-header.cz-header-entered.menu-open .header-inner { animation:none !important; }
}
@media (max-width: 420px) {
  .site-header .header-cta, .site-header.scrolled .header-cta { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .cz-motion-reveal, .cz-motion-reveal.cz-motion-visible { opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-picture .hero-cutout { --cz-mobile-parallax:0px; }
}


/* v2.7 — Stable desktop hero cutout before deferred GSAP initialization.
   Independent translate/scale keep the portrait in its starting pose even if
   animation libraries load late or fail. Mobile positioning is unchanged. */
@media (min-width: 801px) {
  .hero-picture .hero-cutout {
    scale: 1.09;
    translate: 0 -3%;
  }
}

/* v2.8 – Service detail popups. Added after the owner's original styles. */
.service-meta {flex-wrap:wrap}
.service-meta .service-more {appearance:none;border:0;background:transparent;color:#8b6d4f;text-decoration:underline;text-underline-offset:4px;font-size:12px;padding:3px;cursor:pointer}
.cz-service-overlay[hidden],.cz-service-dialog[hidden] {display:none!important}
.cz-service-overlay {position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px}
.cz-service-backdrop {position:absolute;inset:0;background:rgba(32,27,23,.69);backdrop-filter:blur(8px)}
body.cz-modal-open {overflow:hidden}
.cz-service-dialog {position:relative;z-index:1;width:min(900px,100%);max-height:min(92dvh,980px);overflow-y:auto;overscroll-behavior:contain;background:var(--white,#fffdfb);border-radius:12px;box-shadow:0 24px 100px #211a1650;outline:none}
.cz-service-close {position:sticky;top:16px;float:right;margin:16px 16px -62px 0;z-index:3;border:1px solid #e2d6c7;border-radius:50%;width:42px;height:42px;background:#fffdfbf0;color:#292620;font-size:29px;line-height:1;display:grid;place-items:center;cursor:pointer}
.cz-service-dialog-visual {background:var(--cream,#f2ebe2)}
.cz-service-dialog-visual img {width:100%;max-height:370px;object-fit:cover;display:block}
.cz-service-dialog-body {padding:clamp(22px,4vw,52px)}
.cz-service-dialog-body h2 {font-size:clamp(39px,5vw,68px);margin:15px 0 18px}
.cz-service-dialog-details {display:flex;gap:12px;flex-wrap:wrap;color:#665649;font-size:13px;margin-bottom:25px}
.cz-service-dialog-details span {border:1px solid var(--line,#dfd6ca);border-radius:40px;padding:7px 12px}
.cz-service-description {font-size:15px;line-height:1.85;color:#504b45}
.cz-service-description h2,.cz-service-description h3 {font-size:30px;margin:24px 0 12px}
.cz-service-description p {margin:0 0 16px}
.cz-service-gallery {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:26px 0}
.cz-service-gallery img {width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.cz-service-cta {margin-top:18px}
@media(max-width:600px) {.cz-service-overlay{padding:10px}.cz-service-dialog{max-height:95dvh;border-radius:10px}.cz-service-dialog-visual img{max-height:260px}.cz-service-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.cz-service-dialog-body{padding:23px}}
@media(prefers-reduced-motion:reduce){.cz-service-overlay,.cz-service-dialog{scroll-behavior:auto}}

/* v2.9 — service detail triggers and upcoming plasma treatment notice */
.service-image-link,.service-title-link{display:block;width:100%;margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:inherit;cursor:pointer}
.service-image-link{height:100%;overflow:hidden}
.service-image-link img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.service-image-link:hover img{transform:scale(1.045)}
.service-title-link:hover{color:var(--accent)}
.service-image-link:focus-visible,.service-title-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.cz-coming-soon{margin:60px auto 0;padding:34px 40px;display:flex;gap:27px;align-items:flex-start;border:1px solid #fff;border-radius:17px;background:#ece1d2;box-shadow:0 12px 38px rgba(55,40,28,.045)}
.cz-coming-soon-icon{width:50px;height:50px;flex:0 0 50px;display:grid;place-items:center;border-radius:50%;background:#ece1d3;color:#9c7c5d;font-size:29px;line-height:1}
.cz-coming-soon-content{max-width:810px}
.cz-coming-soon .eyebrow{
    display: inline-grid;
    margin-bottom: 11px;
    justify-self: start;
    grid-auto-flow: column;
    color: #e6cba8;
    background: #292923;
    border-color: #e6cba8;
}
.cz-coming-soon h3{font-size:clamp(31px,3.4vw,49px);line-height:1.15;margin:0 0 19px;max-width: 500px;}
.cz-coming-soon h3 .script{white-space:normal;font-size: 1.4em;line-height: 1.2em;}
.cz-coming-soon p{max-width:770px;color:var(--muted);font-size:14px;line-height:1.85;margin-bottom:18px}
.cz-coming-soon-note{font-size:12px;color:#907454;letter-spacing:.02em}
@media(max-width:800px){.cz-coming-soon{margin-top:40px;padding:25px 23px;gap:15px}.cz-coming-soon-icon{width:38px;height:38px;flex-basis:38px;font-size:24px}.cz-coming-soon h3{font-size:clamp(30px,7vw,42px)}}
@media(max-width:430px){.cz-coming-soon{display:block}.cz-coming-soon-icon{margin-bottom:19px}}

/* v3.0 — lock page scrolling, preserve native wheel/touch scrolling inside treatment dialogs */
html.cz-modal-open,body.cz-modal-open{overflow:hidden!important;overscroll-behavior:none}
.cz-service-overlay{overscroll-behavior:contain}
.cz-service-dialog{overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;min-height:0}

/* v3.1 – professional introduction, editorial quote, expandable information */
.split-visual{isolation:isolate}
.cz-photo-quote{position:absolute;left:clamp(20px,5vw,68px);right:clamp(20px,5vw,68px);bottom:clamp(22px,5vw,62px);z-index:2;margin:0;padding:20px 24px;text-align:center;font-family:'Newsreader',var(--serif);font-size:clamp(24px,2.5vw,39px);font-weight:300;font-style:italic;line-height:1.3;color:#fffaf2;text-shadow:0 2px 18px rgba(24,21,17,.7);background:linear-gradient(90deg,rgba(40,35,31,.48),rgba(40,35,31,.24));border-radius:6px;backdrop-filter:blur(3px)}
.cz-knowledge{background:#fffdfb;padding-bottom: 0;}
.cz-knowledge-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,7vw,110px);align-items:start}
.cz-knowledge-heading h2{margin:17px 0 24px}
.cz-knowledge-heading p{color:var(--muted);font-size:15px;max-width:490px}
.cz-knowledge-accordion{border-top:1px solid var(--line)}
.cz-knowledge-accordion details{border-bottom:1px solid var(--line)}
.cz-knowledge-accordion summary{list-style:none;cursor:pointer;position:relative;padding:25px 42px 25px 0;font-family:var(--serif);font-size:clamp(23px,2.4vw,31px);line-height:1.2}
.cz-knowledge-accordion summary::-webkit-details-marker{display:none}
.cz-knowledge-accordion summary:after{content:'+';position:absolute;right:4px;top:50%;transform:translateY(-50%);font:300 28px var(--sans);color:var(--accent)}
.cz-knowledge-accordion details[open] summary:after{content:'−'}
.cz-knowledge-accordion summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cz-knowledge-answer{padding:0 40px 22px 0;color:var(--muted);font-size:14px;line-height:1.85}
.cz-knowledge-answer p{margin:0 0 12px}
.cz-knowledge-answer a{text-decoration:underline;text-underline-offset:4px;color:var(--accent)}
@media(max-width:800px){.cz-knowledge-layout{grid-template-columns:1fr;gap:22px}.cz-photo-quote{font-size:clamp(22px,5.7vw,31px);padding:14px 16px;left:16px;right:16px;bottom:19px}.cz-knowledge-accordion summary{padding-block:20px}}
@media(prefers-reduced-motion:reduce){.cz-knowledge-accordion *{scroll-behavior:auto}}