/* Source: assets/fonts.css */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/type-0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/type-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(assets/type-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Source: style.css */
:root{color-scheme:dark;--bg:#0d0e0c;--surface:#171812;--text:#f1eee7;--muted:#b6b2a7;--gold:#caa34f;--line:#39392d;--serif:"Cormorant Garamond",Georgia,serif;--sans:"Manrope",sans-serif;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px;scrollbar-color:var(--gold) var(--bg)}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.75 var(--sans);-webkit-font-smoothing:antialiased}body.menu-open{overflow:hidden}a{color:inherit;text-decoration:none;text-underline-offset:5px}button,input,select,textarea{font:inherit}button,a,select,summary{-webkit-tap-highlight-color:transparent}button{color:inherit}button,summary{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}img{display:block;max-width:100%;height:auto}figure{margin:0}svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}::selection{background:var(--gold);color:var(--bg)}:focus-visible{outline:2px solid var(--gold);outline-offset:5px}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.03;text-wrap:wrap}h1{font-size:clamp(64px,6.1vw,92px);letter-spacing:-.035em}h2{font-size:clamp(48px,4.5vw,68px);letter-spacing:-.025em}h3{font-size:34px;letter-spacing:-.015em}h1 em,h2 em{color:var(--gold);font-weight:400}p{color:var(--muted)}.wrap{width:min(1280px,calc(100% - 112px));margin-inline:auto}.section{padding-block:108px}.skip-link{position:fixed;top:10px;left:12px;transform:translateY(-150%);z-index:100;background:var(--gold);color:var(--bg);padding:12px 20px}.skip-link:focus{transform:none}.preview-note{min-height:33px;display:flex;justify-content:space-between;align-items:center;padding:7px 30px;background:#25251f;font-size:10px;line-height:1.5;letter-spacing:.015em;color:#c9c4b8}.preview-note a{color:#eee9dd}.preview-note svg{width:12px;height:12px;vertical-align:middle;margin-left:3px}.site-header{height:126px;display:flex;align-items:center;gap:23px}.brand{flex:none}.brand img{width:85px;height:85px;object-fit:contain}.header-location{font-size:11px;line-height:1.7;color:#e1daca}.header-location>span{color:var(--muted)}.site-header nav{margin-left:auto;display:flex;align-items:center;gap:31px;font-size:12px}.site-header nav>a{padding-block:12px;transition:color .2s}.site-header nav>a:hover{color:var(--gold)}.nav-contact{display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--gold);color:var(--gold)}.nav-contact svg{width:17px;height:17px}.menu-toggle{display:none}.hero{display:grid;grid-template-columns:1fr 1fr;position:relative}.hero-copy{padding:58px 44px 0 0;align-self:center}.hero-description{margin-top:29px;line-height:1.9;font-size:14px}.button{display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:54px;padding:15px 22px;background:var(--gold);color:#181711;font-size:12px;font-weight:700;line-height:1.5;transition:background .2s,transform .3s var(--ease)}.button:hover{background:#dfbf81;transform:translateY(-2px)}.button-arrow{width:17px;height:17px;margin-left:14px}.hero-copy>.button{margin-top:29px}.text-link{display:inline-flex;align-items:center;gap:12px;font-size:12px;line-height:1.7;font-weight:600;color:var(--gold);padding-block:7px}.text-link:hover{text-decoration:underline}.text-link svg{width:18px;height:18px;transition:transform .3s var(--ease)}.text-link:hover svg:last-child{transform:translate(2px,-2px)}.hero-secondary{display:flex;width:fit-content;margin-top:15px;color:#e6e0d2;font-size:11px}.hero-secondary svg{width:15px;height:15px}.hero-person{display:flex;align-items:center;gap:14px;margin-top:46px;padding-top:22px;border-top:1px solid var(--line);width:fit-content;font-size:11px;line-height:1.5}.hero-person img{width:47px;height:47px;border-radius:50%;object-fit:cover;object-position:50% 24%}.hero-person small{display:block;font-size:10px;color:var(--muted);margin-top:4px}.hero-person>svg{margin-left:8px;width:18px;height:18px;color:var(--gold)}.hero-image{position:relative;height:675px;overflow:hidden;background:#30291f}.hero-image>img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;animation:arrive 1.25s var(--ease) both}.hero-image:after{content:"";position:absolute;inset:65% 0 0;background:linear-gradient(transparent,rgba(17,15,11,.75));pointer-events:none}.hero-image figcaption{position:absolute;bottom:29px;left:31px;right:29px;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;font-family:var(--serif);font-size:25px;line-height:1.12;color:#fff7ea}.hero-image figcaption a{border:1px solid #b9ac96;width:43px;height:43px;display:grid;place-items:center}.hero-image figcaption a:hover{background:#2a251e}.hero-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:25px 0;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.04em;color:var(--muted)}.hero-foot span,.hero-foot a{display:flex;align-items:center;gap:9px}.hero-foot svg{width:15px;height:15px}.hero-foot a svg{transform:rotate(90deg);margin-left:14px;color:var(--gold)}.section-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:60px;margin-bottom:53px}.section-intro>div{width:38%;max-width:410px;padding-bottom:5px}.section-intro p{font-size:13px;line-height:1.9}.price-date{display:block;color:var(--gold);font-size:10px;margin-top:15px}.treatment-layout{display:grid;grid-template-columns:26% 1fr 24%;gap:40px}.treatment-tabs{display:flex;flex-direction:column;align-items:stretch}.treatment-tabs button{display:flex;align-items:center;justify-content:space-between;text-align:left;border:0;border-bottom:1px solid var(--line);padding:19px 0;background:none;font-size:14px;color:var(--muted);gap:15px}.treatment-tabs button:first-child{border-top:1px solid var(--line)}.treatment-tabs button svg{width:19px;opacity:0}.treatment-tabs button[aria-selected="true"]{color:var(--gold)}.treatment-tabs button[aria-selected="true"] svg{opacity:1}.treatment-tabs button:hover{color:var(--text)}.price-source{font-size:10px;margin-top:22px;gap:7px}.price-source svg{width:14px;height:14px}.treatment-content{min-width:0}.treatment-panel>p{font-size:12px;line-height:1.9;margin-top:16px;max-width:46ch}.price-list{margin:22px 0 15px;font-size:12px}.price-list>div{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line);padding:12px 0}.price-list dd{margin:0;white-space:nowrap;color:var(--gold);font-variant-numeric:tabular-nums;font-weight:600}.price-list small{display:block;color:var(--muted);font-size:10px}.treatment-request{font-size:11px}.treatment-image{align-self:start}.treatment-image img{width:100%;height:315px;object-fit:cover}.treatment-image figcaption{font-size:10px;color:var(--muted);margin-top:12px}.other-services{padding:0;margin:25px 0;list-style:none;font-size:12px}.other-services li{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:14px 0}.other-services span{color:var(--gold);white-space:nowrap}.work-section{background:var(--surface)}.work-section .section-intro{margin-bottom:44px}.work-section .text-link{margin-top:15px;font-size:11px}.work-grid{display:grid;grid-template-columns:1.16fr .92fr .92fr;gap:25px;align-items:start}.work-item{position:relative;display:block;overflow:hidden;height:340px;background:#27231d}.work-item>img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}.work-item:hover>img{transform:scale(1.045)}.work-tall{height:445px}.work-low{margin-top:70px;height:375px}.work-item>span{position:absolute;bottom:0;left:0;right:0;padding:38px 20px 19px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(transparent,rgba(9,9,8,.85));font-family:var(--serif);font-size:24px;color:#fff7ed}.work-item svg{width:19px;height:19px}.work-caption{display:flex;justify-content:space-between;font-size:10px;padding-top:25px}.work-caption>span{color:var(--gold)}.about{display:grid;grid-template-columns:44% 1fr;gap:12%;align-items:center}.about-photo{position:relative;padding-left:30px;padding-bottom:28px}.about-photo:before{content:"";position:absolute;inset:32px 30px 0 0;border:1px solid #766342;z-index:-1}.about-photo img{height:565px;width:100%;object-fit:cover;object-position:center 25%;filter:saturate(.85)}.about-photo figcaption{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-family:var(--serif);font-size:24px}.about-photo figcaption span{font-family:var(--sans);font-size:9px;color:var(--muted)}.about-copy h2{font-size:clamp(46px,4.15vw,63px)}.about-copy .about-lead{color:var(--text);font-size:16px;line-height:1.7;margin-top:27px}.about-copy>p{font-size:12px;margin-top:20px;line-height:1.95}.signature{font-size:11px;color:var(--muted);margin-top:26px}.signature>span{display:block;font:italic 38px/1.4 var(--serif);color:var(--gold)}.about-copy>.text-link{margin-top:16px;font-size:11px}.education{border-block:1px solid var(--line);display:flex;align-items:center;gap:44px;padding-block:29px}.education h3{font-size:28px}.education p{font-size:11px;margin-top:7px}.education .text-link{margin-left:auto;white-space:nowrap;font-size:11px}.faq{display:grid;grid-template-columns:38% 1fr;gap:9%}.faq h2{font-size:52px}.faq-list details{border-bottom:1px solid var(--line)}.faq-list details:first-child{border-top:1px solid var(--line)}summary{display:flex;align-items:center;justify-content:space-between;gap:20px;list-style:none;padding:24px 0;font-size:13px;line-height:1.6}summary::-webkit-details-marker{display:none}summary svg{color:var(--gold);width:18px;height:18px;transition:transform .25s}details[open] summary svg{transform:rotate(45deg)}details p{padding:0 35px 23px 0;font-size:12px;line-height:1.9}details p a{color:var(--gold);text-decoration:underline}.contact-section{background:#25251e;border-top:1px solid #464437}.contact{display:grid;grid-template-columns:1fr 1fr;gap:12%;align-items:start}.contact h2{font-size:clamp(55px,5vw,76px)}.contact-copy>p{font-size:13px;margin-top:27px;line-height:1.9}address{font-style:normal;margin-top:36px;font-size:12px}address a{display:flex;gap:15px;width:fit-content;align-items:flex-start;margin-top:18px}address a:hover{color:var(--gold)}address svg{width:19px;height:19px;color:var(--gold);margin-top:3px}address a svg:last-child:not(:first-child){margin-left:20px;width:16px}.email-link{font-size:10px;margin-top:16px}.request-panel{padding:34px 38px 30px;border:1px solid #66604e}.request-panel h3{font-size:34px}.request-panel label{display:flex;justify-content:space-between;font-size:11px;line-height:1.5;color:var(--text);margin:21px 0 9px}.request-panel label span{color:var(--muted);font-size:10px}select,textarea{display:block;resize:vertical;width:100%;border:1px solid #777261;background:#1d1e19;color:var(--text);padding:14px;font-size:12px;border-radius:0;caret-color:var(--gold);line-height:1.5}select{min-height:49px;cursor:pointer;padding-right:26px}textarea{min-height:105px;max-height:280px}textarea::placeholder{color:#aaa79b;opacity:1}.request-panel>.button{margin-top:23px;width:100%;font-size:11px;padding-inline:14px}.request-panel>.button .button-arrow{margin-left:auto}.request-panel .request-note{margin-top:15px;font-size:10px;line-height:1.8}.mobile-contact{display:none}[hidden]{display:none!important}.legal-page{max-width:850px;padding-block:70px}.legal-page h1{font-size:56px}.legal-page h2{font-size:34px;margin-top:40px}.legal-page p{margin-top:18px;font-size:14px}.legal-page a:not(.button){color:var(--gold);text-decoration:underline}.legal-page .button{margin-top:30px}.legal-page ul{color:var(--muted);padding-left:20px}.legal-page li{margin-top:12px}
.hero-image:before{content:"";position:absolute;inset:15px;border:1px solid #caa34f80;z-index:1;pointer-events:none}.hero-foot{position:relative}.hero-foot:after{content:"";position:absolute;width:7px;height:7px;bottom:-4px;left:50%;transform:rotate(45deg);border:1px solid var(--gold);background:var(--bg)}.contact-section{background:#1c1e16}.preview-note{background:#22231b}
@keyframes arrive{from{clip-path:inset(0 0 3% 0);transform:scale(1.035)}to{clip-path:inset(0);transform:scale(1)}}
@media(min-width:1600px){.hero-copy{padding-top:35px}.hero-image{height:710px}}
@media(max-width:1150px){.wrap{width:calc(100% - 64px)}.site-header nav{gap:20px;font-size:11px}.header-location{display:none}.hero-copy{padding:25px 32px 0 0}.hero-image{height:650px}.hero-description{font-size:12px}.hero-person small{font-size:9px}.hero-person{gap:10px;font-size:10px}.hero-person>svg{display:none}.treatment-layout{grid-template-columns:27% 1fr;gap:45px}.treatment-image{display:none}.section-intro>div{width:43%}.section{padding-block:85px}.about{gap:8%;grid-template-columns:44% 1fr}.about-photo{padding-left:20px}.about-photo img{height:530px}.about-photo figcaption{display:block}.about-photo figcaption span{display:block}.request-panel{padding:27px}.contact{gap:8%}.request-panel>.button{font-size:10px}.work-item{height:285px}.work-tall{height:375px}.work-low{height:320px;margin-top:55px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.preview-note{padding:7px 20px;min-height:30px;font-size:9px;justify-content:center}.preview-note>span:first-child{display:none}.site-header{height:100px;gap:13px}.brand img{width:70px;height:70px}.header-location{display:block;font-size:9px}.menu-toggle{margin-left:auto;display:flex;align-items:center;gap:10px;background:transparent;border:1px solid var(--line);padding:12px;font-size:10px;min-height:44px;z-index:31}.menu-lines{width:17px;height:9px;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}.site-header nav{display:none}.site-header nav.is-open{display:flex;position:fixed;inset:130px 0 0;background:var(--bg);z-index:30;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:30px 28px 120px;overflow:auto;font-size:20px}.site-header nav.is-open a{padding:20px 0;border-bottom:1px solid var(--line)}.site-header nav.is-open a:focus-visible{outline-offset:0}.hero{grid-template-columns:1fr}.hero-copy{padding:28px 0 33px;display:flex;flex-direction:column;align-items:flex-start}.hero h1{font-size:clamp(57px,10.6vw,78px);line-height:1.01;letter-spacing:-.03em}.hero h1 em br{display:none}.hero-description{font-size:12px;margin-top:24px;line-height:1.9;max-width:36ch}.desktop-break{display:none}.hero-copy>.button{margin-top:24px;font-size:11px;min-height:52px}.hero-secondary{margin-top:13px;font-size:10px}.hero-person{margin-top:26px;padding-top:19px;width:100%;font-size:10px;gap:12px}.hero-person small{font-size:9px}.hero-person img{width:42px;height:42px}.hero-person>svg{display:block;margin-left:auto}.hero-image{height:440px;margin-inline:0}.hero-image>img{object-position:50% 48%}.hero-image figcaption{bottom:23px;left:22px;right:21px;font-size:24px}.hero-foot{padding-block:20px;font-size:9px;letter-spacing:0;gap:10px}.hero-foot a{font-size:9px;gap:0}.hero-foot a svg{margin-left:6px;width:13px}.hero-foot span{gap:6px}.hero-foot span svg{width:13px}.section{padding-block:66px}h2{font-size:47px}h3{font-size:31px}.section-intro{display:block;margin-bottom:33px}.section-intro>div{width:100%;max-width:40ch;margin-top:25px;padding:0}.section-intro p{font-size:12px;line-height:1.85}.price-date{font-size:9px;margin-top:12px}.treatment-layout{display:block}.treatment-tabs{display:grid;grid-template-columns:1fr 1fr;column-gap:21px;margin-bottom:29px}.treatment-tabs button{font-size:11px;line-height:1.4;min-height:55px;padding:16px 0;gap:7px}.treatment-tabs button:first-child{border-top:0}.treatment-tabs button svg{width:15px}.price-source{grid-column:1/-1;order:5;margin:12px 0 0;font-size:9px}.treatment-panel h3{font-size:34px}.treatment-panel>p{font-size:12px;max-width:48ch}.price-list{margin-top:19px;font-size:11px}.price-list>div{padding:13px 0}.price-list small{font-size:9px}.treatment-request{margin-top:7px}.work-section .section-intro{margin-bottom:29px}.work-section .text-link{font-size:10px}.work-grid{grid-template-columns:1fr 1fr;gap:15px}.work-tall{grid-column:1/-1;height:390px}.work-item:not(.work-tall){height:240px}.work-low{margin:0}.work-item>span{font-size:21px;padding:35px 13px 14px;gap:8px;line-height:1.15}.work-item svg{width:15px;height:15px}.work-caption{font-size:9px;padding-top:19px}.work-caption>span{display:none}.about{display:flex;flex-direction:column;gap:40px}.about-photo{width:100%;max-width:425px;padding:0 0 21px 19px}.about-photo:before{inset:22px 19px 0 0}.about-photo img{height:450px;object-position:center 20%}.about-photo figcaption{display:flex}.about-photo figcaption span{font-size:8px}.about-copy{width:100%}.about-copy h2{font-size:47px}.about-copy .about-lead{font-size:15px;margin-top:24px}.about-copy>p{font-size:12px}.education{flex-wrap:wrap;gap:17px;padding-block:25px}.education h3{font-size:26px}.education p{font-size:11px;max-width:43ch}.education .text-link{margin-left:0;font-size:10px;padding-bottom:0}.faq{display:block}.faq h2{font-size:47px;margin-bottom:31px}.faq summary{font-size:12px;padding-block:21px}.faq details p{font-size:11px;padding-right:10px}.contact{display:block}.contact h2{font-size:57px}.contact-copy>p{font-size:12px;margin-top:24px}address{font-size:12px;margin-top:25px}.request-panel{margin-top:39px;padding:27px 22px}.request-panel h3{font-size:31px}.request-panel label{font-size:11px}select,textarea{font-size:16px;padding:13px 11px}.request-panel>.button{font-size:10px;gap:7px;min-height:53px}.request-panel>.button svg{width:19px;height:19px}.request-panel .request-note{font-size:9px}.mobile-contact{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:25;padding:10px 20px max(10px,env(safe-area-inset-bottom));gap:9px;background:var(--bg);border-top:1px solid var(--line)}.mobile-contact a:first-child{height:46px;width:52px;display:grid;place-items:center;border:1px solid var(--line);color:var(--gold)}.mobile-contact a:last-child{display:flex;justify-content:center;align-items:center;gap:20px;flex:1;background:var(--gold);color:var(--bg);font-size:12px;font-weight:700;min-height:46px}.mobile-contact svg{width:20px;height:20px}.legal-page{padding-top:35px}.legal-page h1{font-size:43px}}
@media(max-width:360px){.wrap{width:calc(100% - 32px)}.hero h1{font-size:54px}.hero-foot{font-size:8px}.hero-foot a{font-size:8px}.header-location{font-size:8px}.menu-toggle{padding-inline:9px}.hero-image{height:390px}.work-item:not(.work-tall){height:210px}.work-item>span{font-size:19px}.about-copy h2{font-size:43px}.request-panel{padding:23px 16px}.request-panel>.button{font-size:9px}.request-panel>.button .button-arrow{display:none}}
.hero-description{font-size:15px}.section-intro p,.treatment-panel>p,.about-copy>p,.contact-copy>p{font-size:14px}.price-list{font-size:13px}.treatment-request,.price-source,.about-copy>.text-link,.education .text-link{font-size:12px}.education p,details p{font-size:13px}.request-panel label{font-size:12px}.request-panel .request-note{font-size:11px}.site-header nav{font-size:13px}.hero-person{font-size:12px}.hero-person small{font-size:10px}
@media(max-width:760px){.hero-description{font-size:14px}.hero h1 em{font-size:.9em}.hero-person{font-size:11px}.hero-person small{font-size:9px}.treatment-tabs button{font-size:12px}.treatment-panel>p,.section-intro p,.about-copy>p,.contact-copy>p{font-size:14px}.price-list{font-size:13px}.treatment-request,.price-source{font-size:11px}.faq summary{font-size:14px}.faq details p{font-size:13px}.request-panel .request-note{font-size:11px}.education p{font-size:12px}.request-panel>.button{font-size:11px}.hero-foot a{flex:none}.site-header nav.is-open{font-size:20px}.hero-person>span{min-width:0}.hero-person>svg{flex:none}}
@media(max-width:360px){.request-panel>.button{font-size:10px}.hero-person small{font-size:8px}.hero-foot>span{max-width:210px;line-height:1.6}}
/* Brand-preserving refinement: Luxury pp. 12–13, 17–19; design-taste; web-prinzipien.
   DESIGN_VARIANCE 7 / MOTION_INTENSITY 4 / VISUAL_DENSITY 3.
   The personal care brief takes precedence over distant luxury-retail behavior. */
body { font-size: 16px; }
h1, h2, h3 { line-height: 1.1; letter-spacing: -.015em; }
.accent { color: var(--gold); font-style: normal; font-weight: 500; }
.site-header { height: 80px; }
.brand img { width: 65px; height: 65px; }
.hero-copy { padding: 24px 42px 24px 0; }
.hero h1 { font-size: clamp(48px, 5.7vw, 82px); line-height: 1.1; letter-spacing: -.02em; }
.hero-description { max-width: 40ch; font-size: 16px; line-height: 1.8; margin-top: 28px; }
.button { font-size: 14px; min-height: 56px; transition: background .35s ease; }
.button:hover { transform: none; }
.button:active { background: #b89442; }
.text-link { min-height: 44px; }
.text-link svg { transition: color .3s ease; }
.text-link:hover svg:last-child { transform: none; }
.hero-secondary { font-size: 13px; margin-top: 8px; }
.hero-image { height: auto; overflow: visible; background: transparent; }
.hero-image > img { height: clamp(480px, calc(100svh - 230px), 660px); animation: arrive 1.6s ease-out both; }
.hero-image:before { inset: 15px 15px 72px; }
.hero-image:after { display: none; }
.hero-image figcaption { position: static; padding: 14px 0 0; font: 13px/1.6 var(--sans); color: var(--muted); align-items: center; gap: 18px; }
.hero-image figcaption a { width: 43px; height: 43px; border-color: var(--line); color: var(--gold); }
.studio-intro { display: flex; justify-content: space-between; align-items: center; gap: 30px; border-bottom: 1px solid var(--line); padding-block: 28px; }
.studio-intro .hero-person { margin: 0; padding: 0; border: 0; font-size: 14px; }
.hero-person small { font-size: 11px; margin-top: 5px; }
.hero-person img { width: 52px; height: 52px; }
.studio-address { display: flex; align-items: center; gap: 14px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.studio-address svg { color: var(--gold); width: 19px; }
.studio-address:hover { color: var(--text); }
.section-intro { display: block; margin-bottom: 42px; }
.section-intro > div { width: 100%; max-width: 70ch; margin-top: 24px; padding: 0; }
.section-intro p, .treatment-panel > p, .about-copy > p, .contact-copy > p { font-size: 16px; line-height: 1.8; }
.price-date { font-size: 12px; }
.treatment-layout { grid-template-columns: 23% 1fr 23%; gap: 44px; }
.treatment-tabs button { font-size: 15px; }
.price-list { font-size: 14px; }
.price-list small, .treatment-image figcaption { font-size: 12px; line-height: 1.6; }
.price-source, .treatment-request { font-size: 13px; }
.treatment-panel h3 { font-size: 32px; }
.other-services { font-size: 14px; }
.work-section .section-intro > div { max-width: 70ch; }
.work-section .text-link { font-size: 13px; }
.work-grid { gap: 32px; }
.work-item { height: auto; overflow: visible; background: none; }
.work-low { margin-top: 80px; }
.work-photo { overflow: hidden; }
.work-photo img { width: 100%; height: 340px; object-fit: cover; transition: transform 1.2s ease; }
.work-tall .work-photo img { height: 445px; }
.work-low .work-photo img { height: 375px; }
.work-item:hover .work-photo img { transform: scale(1.025); }
.work-item > span { position: static; background: none; padding: 18px 0 0; font: 16px/1.5 var(--sans); color: var(--text); gap: 10px; }
.work-item > span svg { color: var(--gold); }
.work-caption { font-size: 12px; padding-top: 32px; }
.about-photo figcaption span { font-size: 11px; }
.about-copy h2 { font-size: clamp(48px, 4.5vw, 68px); }
.about-copy .about-lead { font-size: 18px; line-height: 1.7; }
.about-copy > .text-link { font-size: 13px; }
/* Foto und Textspalte enden auf derselben Linie: Das Bild wird absolut gestellt und bringt damit keine
   Eigenhoehe mehr mit, also gibt der Text die Zeilenhoehe vor. Unter 761 px stapelt der Abschnitt ohnehin. */
@media (min-width: 1001px) {
  .about { align-items: stretch; }
  .about-photo { min-height: 430px; }
  /* Breite und Hoehe ausdruecklich, weil ein Bild als ersetztes Element bei height:auto die untere Kante ignoriert. */
  .about-photo img { position: absolute; top: 0; left: 30px; width: calc(100% - 30px); height: calc(100% - 28px); }
}
/* 761 bis 1000 px: Die Spalte waere nur noch rund 340 px breit, das Portraet wuerde zum Schlitz.
   Deshalb hier gestapelt, Foto in voller Breite ueber dem Text. */
@media (min-width: 761px) and (max-width: 1000px) {
  .about { display: flex; flex-direction: column; gap: 40px; align-items: flex-start; }
  .about-photo { width: 100%; max-width: 480px; padding: 0 0 21px 19px; }
  .about-photo:before { inset: 22px 19px 0 0; }
  .about-photo img { height: 500px; object-position: center 20%; }
  .about-copy { width: 100%; }
}
.signature { font-size: 13px; }
.education p { font-size: 14px; max-width: 70ch; }
.education .text-link { font-size: 13px; }
.faq summary { font-size: 16px; }
.faq details p { font-size: 15px; line-height: 1.8; }
address { font-size: 15px; }
.email-link { font-size: 13px; }
.request-panel { padding: 32px; }
.request-panel label { font-size: 14px; }
.request-panel label span { font-size: 12px; }
select, textarea { font-size: 16px; }
.request-panel > .button { font-size: 13px; }
.request-panel .request-note { font-size: 12px; line-height: 1.7; }
@keyframes arrive { from { opacity: .65; transform: scale(1.015); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 1150px) {
  .hero-copy { padding-right: 28px; }
  .treatment-layout { grid-template-columns: 27% 1fr; }
  .work-photo img { height: 285px; }
  .work-tall .work-photo img { height: 375px; }
  .work-low .work-photo img { height: 320px; }
  .work-low { margin-top: 55px; }
  .request-panel { padding: 25px; }
  .request-panel > .button { font-size: 12px; }
}
@media (max-width: 760px) {
  .header-location { font-size: 10px; }
  .menu-toggle { padding: 11px; }
  .menu-toggle svg { width: 18px; height: 18px; color: var(--gold); }
  .site-header nav.is-open { inset-block-start: 110px; }
  .hero-copy { padding: 32px 0; }
  .hero h1 { font-size: clamp(46px, 13.4vw, 68px); line-height: 1.1; letter-spacing: -.025em; }
  .hero-description { font-size: 16px; margin-top: 24px; max-width: 40ch; }
  .hero-copy > .button { font-size: 14px; margin-top: 26px; }
  .hero-secondary { font-size: 13px; }
  .hero-image > img { height: 420px; object-position: 50% 50%; }
  .hero-image figcaption { font-size: 12px; padding-top: 12px; }
  .hero-image:before { inset: 12px 12px 69px; }
  .studio-intro { display: block; padding-block: 24px; }
  .studio-intro .hero-person { font-size: 13px; }
  .hero-person small { font-size: 11px; }
  .hero-person > svg { margin-left: auto; }
  .studio-address { margin-top: 21px; font-size: 12px; }
  .studio-address br { display: none; }
  .studio-address span { word-spacing: .08em; }
  .studio-address svg:last-child { margin-left: auto; }
  h2, .about-copy h2, .faq h2 { font-size: clamp(39px, 10.8vw, 52px); }
  .section-intro { margin-bottom: 33px; }
  .section-intro > div { margin-top: 22px; }
  .section-intro p, .treatment-panel > p, .about-copy > p, .contact-copy > p { font-size: 16px; }
  .treatment-layout { display: block; }
  .treatment-tabs button { font-size: 13px; }
  .treatment-request, .price-source { font-size: 12px; }
  .price-date { font-size: 11px; }
  .price-list { font-size: 14px; }
  .price-list small { font-size: 11px; }
  .work-grid { grid-template-columns: 1fr; gap: 32px; }
  .work-item, .work-item:not(.work-tall), .work-tall, .work-low { height: auto; margin: 0; grid-column: auto; }
  .work-photo img, .work-tall .work-photo img, .work-low .work-photo img { height: 365px; }
  .work-item > span { font-size: 15px; padding-top: 14px; }
  .work-caption { font-size: 11px; padding-top: 23px; }
  .about-copy .about-lead { font-size: 18px; }
  .about-photo figcaption span { font-size: 10px; }
  .education h3 { font-size: 28px; }
  .education p { font-size: 14px; }
  .faq summary { font-size: 15px; }
  .faq details p { font-size: 15px; }
  .contact h2 { font-size: clamp(46px, 12vw, 60px); }
  .request-panel { padding: 26px 22px; }
  .request-panel > .button { font-size: 12px; }
  .request-panel .request-note { font-size: 12px; }
  .request-panel label { font-size: 14px; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 46px; }
  .header-location { font-size: 9px; }
  .hero-image > img { height: 370px; }
  .studio-intro .hero-person { font-size: 12px; }
  .hero-person small { font-size: 11px; }
  .work-photo img, .work-tall .work-photo img, .work-low .work-photo img { height: 315px; }
  .request-panel { padding: 24px 16px; }
  .request-panel > .button { font-size: 11px; }
}

/* User feedback: persistent navigation, a clear appointment button and the hero caption on its photo. */
html { scroll-padding-top: 104px; }
.header-shell { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); }
.site-header { height: 80px; }
.brand { display: flex; align-items: center; gap: 20px; min-width: 0; }
.header-location { display: block; font-size: 11px; }
.brand:hover .header-location { color: var(--gold); }
.site-header nav { gap: 22px; }
.site-header nav > a { white-space: nowrap; }
.site-header nav > a[aria-current="location"]:not(.nav-contact) { color: var(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
.request-panel .request-phone { display: flex; justify-content: center; min-height: 44px; margin-top: 14px; font-size: 13px; font-weight: 500; }
@media (min-width: 1001px) and (max-width: 1200px) { .site-header nav { gap: 16px; } .brand { gap: 12px; } .site-header { gap: 16px; } }
.site-header nav > .nav-contact { padding: 12px 20px; min-height: 48px; border: 1px solid var(--gold); background: var(--gold); color: var(--bg); font-size: 13px; font-weight: 700; gap: 18px; white-space: nowrap; }
.site-header nav > .nav-contact:hover { color: var(--bg); background: #d8b466; border-color: #d8b466; }
.site-header nav > .nav-contact:active { background: #b89442; }
.hero-image { overflow: hidden; }
.hero-image:before { inset: 15px; }
.hero-image:after { display: block; inset: 65% 0 0; background: linear-gradient(transparent, rgb(8 8 6 / 92%)); }
.hero-image figcaption { position: absolute; bottom: 28px; left: 30px; right: 30px; padding: 0; color: var(--text); font: 14px/1.6 var(--sans); }
.hero-image figcaption a { width: 44px; height: 44px; flex: none; border-color: #b5a476; background: rgb(13 14 12 / 70%); color: #e1be70; }
.hero-image figcaption a:hover { background: var(--bg); border-color: var(--gold); }
address a, .studio-address { min-height: 44px; align-items: center; }
@media (max-width: 1000px) {
  .site-header { gap: 16px; }
  .brand { gap: 16px; }
  .menu-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; background: transparent; border: 1px solid var(--line); padding: 11px 13px; min-height: 44px; font-size: 12px; z-index: 41; }
  .menu-toggle svg { width: 18px; height: 18px; color: var(--gold); }
  .site-header nav { display: none; }
  .site-header nav.is-open { display: flex; position: fixed; inset: var(--menu-top,80px) 0 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 20px max(24px,calc((100vw - 700px)/2)) max(32px,env(safe-area-inset-bottom)); background: var(--bg); overflow-y: auto; overscroll-behavior: contain; z-index: 40; font-size: 20px; }
  .site-header nav.is-open > a { padding: 20px 0; border-bottom: 1px solid var(--line); }
  .site-header nav.is-open > .nav-contact { margin-top: 24px; padding: 14px 20px; min-height: 52px; font-size: 15px; justify-content: space-between; color: var(--bg); }
  .site-header nav.is-open > .nav-contact:hover, .site-header nav.is-open > .nav-contact:focus-visible { color: var(--bg); }
  .site-header nav.is-open a:focus-visible { outline-offset: 0; }
  .contact { display: block; }
  .request-panel { margin-top: 36px; max-width: 640px; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  /* Mindestens so gross wie die Abschnittsueberschriften (48 px in diesem Band), sonst kippt die Rangordnung. */
  .hero h1 { font-size: clamp(52px, 7vw, 64px); }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 96px; }
  .site-header { height: 72px; }
  .brand { gap: 12px; }
  .brand img { width: 54px; height: 54px; }
  .header-location { font-size: 11px; }
  .hero-copy > .button { width: 100%; justify-content: center; }
  .hero-image:before { inset: 12px; }
  .hero-image figcaption { left: 24px; right: 24px; bottom: 24px; gap: 14px; font-size: 13px; }
  .hero-image figcaption > span { max-width: 25ch; }
  .request-panel { max-width: none; }
}
@media (max-width: 360px) {
  .brand { gap: 8px; }
  .brand img { width: 48px; height: 48px; }
  .header-location { font-size: 11px; }
  .menu-toggle { gap: 7px; padding: 10px; font-size: 11px; }
}
@media (max-height: 500px) and (max-width: 1000px) {
  .site-header { height: 64px; }
  .brand img { width: 48px; height: 48px; }
  .site-header nav.is-open { padding-top: 8px; }
  .site-header nav.is-open > a { padding: 13px 0; }
  .site-header nav.is-open > .nav-contact { margin-top: 12px; }
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Keep the appointment path together; contact details follow it on small screens. */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 10%; row-gap: 28px; }
.contact-copy { grid-column: 1; grid-row: 1; min-width: 0; }
.contact .request-panel { grid-column: 2; grid-row: 1 / 3; margin: 0; max-width: none; min-width: 0; }
.contact-details { grid-column: 1; grid-row: 2; min-width: 0; }
.contact-details address { margin: 0; font-size: 15px; border-top: 1px solid var(--line); }
.contact-details address a { width: 100%; margin: 0; padding: 16px 0; align-items: center; }
.contact-details address a > span { flex: 1; min-width: 0; }
.contact-details address a > span > span { display: block; color: var(--muted); font-size: 13px; }
.contact-details address a svg:last-child { margin-left: auto; }
.contact-details .email-link { display: flex; justify-content: space-between; width: 100%; min-height: 48px; margin: 0; padding-block: 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (max-width: 1000px) {
  .contact { display: flex; flex-direction: column; gap: 28px; }
  .contact-copy, .contact .request-panel, .contact-details { width: 100%; }
  .contact-copy > p { margin-top: 20px; }
}
@media (max-width: 760px) { .contact { gap: 24px; } }

/* Agency preview wrapper: deliberately separate from the black-and-gold studio. */
.preview-note {
  --preview-ink: #0f172a;
  --preview-muted: #526176;
  --preview-accent: #0052ff;
  display: block;
  min-height: 0;
  padding: 12px 0;
  background: #f8fafc;
  border-bottom: 1px solid rgba(15,23,42,.08);
  color: var(--preview-ink);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
}
.preview-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.preview-context, .preview-note .preview-expiry { display: flex; align-items: center; gap: 20px; min-width: 0; }
.preview-context > strong { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.preview-context .preview-symbol { width: 16px; height: 16px; margin: 0; color: var(--preview-accent); flex: none; }
.preview-context > span { display: flex; align-items: center; flex-wrap: wrap; gap: 0 .3em; color: var(--preview-muted); font-size: 13px; }
.preview-note a { display: inline-flex; align-items: center; min-height: 24px; color: var(--preview-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.preview-note a:hover { text-decoration-thickness: 2px; }
.preview-note a:focus-visible { outline: 2px solid var(--preview-accent); outline-offset: 4px; }
.preview-note a svg { width: 14px; height: 14px; margin-left: 4px; }
.preview-note .preview-expiry { gap: 16px; font-size: 12px; color: var(--preview-muted); }
.preview-expiry strong { color: var(--preview-ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.preview-expiry time { color: var(--preview-ink); white-space: nowrap; }
.preview-short { display: none; }
.preview-note ::selection { background: #dbe7ff; color: #0f172a; }
@media (max-width: 900px) {
  .preview-note { padding: 8px 0; }
  .preview-inner { display: block; }
  .preview-context { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .preview-context > strong { font-size: 13px; white-space: nowrap; }
  .preview-context > span { font-size: 12px; flex: none; }
  .preview-long { display: none; }
  .preview-short { display: inline; }
  .preview-note .preview-expiry { align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 4px; }
  .preview-expiry strong { font-size: 12px; }
}
/* Grundsätze im Über-mich-Bereich: Hairline-Liste mit dem Rauten-Motiv des Hero-Fußes. */
.principles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;margin:26px 0 0;padding:0;list-style:none}
.principles li{position:relative;padding:11px 0 11px 20px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--text)}
.principles li:nth-child(-n+2){border-top:1px solid var(--line)}
.principles li::before{content:"";position:absolute;left:2px;top:19px;width:6px;height:6px;border:1px solid var(--gold);transform:rotate(45deg)}
.about-copy .principles+.signature{margin-top:28px}
@media(max-width:760px){.principles{grid-template-columns:1fr;gap:0}.principles li{font-size:13px;padding-block:10px}.principles li:nth-child(2){border-top:0}.principles li::before{top:17px}}
/* Name liegt im Foto: Verlauf unten für die Lesbarkeit, der versetzte Rahmen bleibt links und unten sichtbar. */
.about-photo figcaption{position:absolute;left:30px;right:0;bottom:28px;display:block;margin:0;padding:84px 28px 22px;background:linear-gradient(to top,rgb(13 14 12/.78),rgb(13 14 12/0));color:var(--text);pointer-events:none}
@media(max-width:1150px){.about-photo figcaption{left:20px}}
@media(max-width:760px){.about-photo figcaption{left:19px;bottom:21px;padding:64px 20px 16px}}
/* Ohne FAQ folgt die Anfahrt direkt auf den Schulungs-Hinweis: eine Linie statt zwei. */
.education+.studio-location{border-top:0}
/* Einheitlicher Hintergrund (Kundenwunsch 17.09.): Galerie und Kontakt ohne eigenen Farbton, Abschnitte trennen sich über Abstand und feine Linien. */
.work-section,.contact-section{background:var(--bg)}
/* Bindestrich in NS-Studio: Cormorant setzt ihn auf Kleinbuchstaben-Höhe. Zwischen zwei Großbuchstaben sitzt er 0,1 em höher auf deren Mitte. */
.brand-hyphen{position:relative;top:-.1em}
/* Der Markenname bricht nie am Bindestrich („NS-“ / „Studio.“ bei 375 px); „Gutes Gefühl.“ bleibt als Paar zusammen, sonst bricht die H1 bei 768 px mitten im Satz. */
.brand-name{white-space:nowrap}
.hero h1 .accent{display:inline-block}
/* Abschnitte trennen sich ohne Farbwechsel: je eine feine Linie in Inhaltsbreite an jeder Grenze (Schulung und Anfahrt hatten sie schon). Die alte Linie über dem Kontakt lief über die volle Breite und in anderer Farbe. */
.treatments,.studio-location{border-bottom:1px solid var(--line)}
.reviews-section{border-top:1px solid var(--line)}
.contact-section{border-top:0}
.site-footer{border-top:1px solid var(--line)}
.no-break{white-space:nowrap}
/* Tablet-Band 761 bis 1000 px: Navigation und Termin-Knopf liegen im Menü, deshalb bleibt die Leiste bis 1000 px sichtbar (script.js blendet sie aus, sobald ein Hauptknopf im Bild ist). Schmaler als die Seite, damit sie nicht wie ein Balken über 1000 px wirkt. */
@media (min-width:761px) and (max-width:1000px){
  .mobile-contact{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:25;justify-content:center;gap:12px;padding:12px 32px max(12px,env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}
  .mobile-contact a:first-child{height:48px;width:56px;display:grid;place-items:center;border:1px solid var(--line);color:var(--gold)}
  .mobile-contact a:last-child{display:flex;justify-content:center;align-items:center;gap:20px;flex:0 1 420px;background:var(--gold);color:var(--bg);font-size:13px;font-weight:700;min-height:48px}
  .mobile-contact svg{width:20px;height:20px}
}


/* Source: prices.css */
/* Behandlungen & Preise: drei Kategorien als Tabs, jede Leistung eine Zeile wie auf einer Preiskarte,
   die direkt per WhatsApp mit vorausgefülltem Text anfragt. Alle Listen liegen in derselben Rasterzelle
   (die längste bestimmt die Höhe) und das Bild hat ein festes Format: Beim Umschalten springt nichts. */
.treatments .section-intro { display:grid; grid-template-columns:1.1fr 1fr; align-items:end; gap:64px; margin-bottom:36px; }
.treatments .section-intro > div { margin:0; width:auto; max-width:70ch; }

.treatment-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:0 0 44px; border:1px solid var(--line); }
.treatment-tabs button, .treatment-tabs button:first-child { position:relative; align-items:center; gap:12px; min-width:0; min-height:92px; padding:18px 24px; border:0; background:transparent; color:var(--muted); font-size:15px; line-height:1.5; }
.treatment-tabs button + button { border-left:1px solid var(--line); }
.treatment-tabs button small { display:block; margin-top:5px; color:var(--muted); font-size:12px; font-weight:400; }
.treatment-tabs button svg { width:18px; height:18px; }
.treatment-tabs button[aria-selected="true"] { color:var(--gold); background:var(--surface); box-shadow:inset 0 -2px var(--gold); }
/* Nur nicht gewaehlte Tabs reagieren auf Hover; der gewaehlte behaelt sein Gold. */
.treatment-tabs button:not([aria-selected="true"]):hover { background:var(--surface); color:var(--text); }
.treatment-tabs button:focus-visible { z-index:1; outline-offset:-3px; }

.treatment-layout { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:72px; align-items:start; }
.treatment-content { display:grid; min-width:0; }
.treatment-panel { grid-area:1 / 1; min-width:0; }
/* style.css blendet [hidden] mit !important aus; die Liste bleibt hier unsichtbar im Raster und hält so die Höhe. */
.treatment-panel[hidden] { display:block !important; visibility:hidden; }
.treatment-panel h3 { font-size:clamp(30px,2.8vw,38px); line-height:1.15; }
.treatment-panel > p { max-width:70ch; margin-top:14px; font-size:16px; line-height:1.8; text-wrap:pretty; }

.price-menu { margin:30px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); }
.price-menu li { border-bottom:1px solid var(--line); }
.price-row { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:28px; min-height:92px; padding:18px 0; color:var(--text); }
.price-row::before { content:""; position:absolute; z-index:-1; inset:0 -14px; background:var(--surface); opacity:0; transition:opacity .2s var(--ease); pointer-events:none; }
.price-name { font:500 24px/1.25 var(--serif); letter-spacing:-.005em; transition:color .2s; }
.price-name small { display:block; margin-top:4px; font:400 13px/1.5 var(--sans); letter-spacing:0; color:var(--muted); }
.price-details { display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.price-value { font:500 26px/1.1 var(--serif); font-variant-numeric:lining-nums tabular-nums; color:var(--text); white-space:nowrap; }
.price-value.is-request { font-size:21px; font-style:italic; }
.price-action { display:flex; align-items:center; gap:6px; color:var(--gold); font:500 12px/1.5 var(--sans); white-space:nowrap; }
.price-action svg { width:15px; height:15px; }
.price-row:is(:hover,:focus-visible) .price-name { color:var(--gold); }
.price-row:is(:hover,:focus-visible)::before { opacity:1; }
.price-row:is(:hover,:focus-visible) .price-action > span { text-decoration:underline; text-underline-offset:4px; }
.price-row:active::before { opacity:1; }
.price-row:focus-visible { outline-offset:4px; }

.treatment-image { display:block; min-width:0; margin:0; }
.treatment-image img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; background:var(--surface); }

/* Bild und Preisliste enden auf derselben Linie. Das Bild wird absolut gestellt und bringt damit keine
   Eigenhoehe mehr mit: Die laengste Liste gibt die Zeilenhoehe vor, die kuerzeren strecken ihre Zeilen
   auf dieselbe Hoehe. So ist das Bild in jedem Tab gleich gross und unter keiner Liste bleibt Leerraum. */
@media(min-width:761px) {
  .treatment-layout { align-items:stretch; }
  .treatment-image { position:relative; min-height:100%; }
  .treatment-image img { position:absolute; inset:0; height:100%; aspect-ratio:auto; }
  .treatment-panel { display:flex; flex-direction:column; }
  .treatment-panel[hidden] { display:flex !important; }
  .price-menu { flex:1; display:flex; flex-direction:column; }
  .price-menu li { flex:1; display:flex; }
  .price-menu li > .price-row { flex:1; width:100%; }
}

.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media(max-width:1000px) {
  .treatments .section-intro { display:block; }
  .treatments .section-intro > div { margin-top:20px; max-width:58ch; }
  .treatment-tabs button, .treatment-tabs button:first-child { padding:16px 18px; font-size:14px; }
  .treatment-layout { grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:40px; }
  .treatment-panel h3 { font-size:32px; }
  .price-row { column-gap:20px; }
  .price-name { font-size:22px; }
  .price-value { font-size:24px; }
}
@media(max-width:760px) {
  .treatments .section-intro { margin-bottom:28px; }
  .treatment-tabs { margin-bottom:30px; }
  .treatment-tabs button, .treatment-tabs button:first-child { align-items:flex-start; min-height:80px; padding:13px 12px; font-size:14px; line-height:1.35; }
  /* Label und Preiszusatz als Spalte über die volle Knopfhöhe: Bricht „SPA & Massage“ zweizeilig, sitzt sein Zusatz trotzdem auf der Grundlinie der Nachbarn. */
  .treatment-tabs button > span { display:flex; flex-direction:column; align-self:stretch; min-width:0; }
  .treatment-tabs button small { margin-top:auto; padding-top:5px; }
  .treatment-tabs button svg { display:none; }
  .treatment-layout { display:block; }
  .treatment-content { display:block; }
  .treatment-panel[hidden] { display:none !important; }
  .treatment-panel h3 { font-size:32px; }
  .price-menu { margin-top:24px; }
  .price-row { column-gap:18px; min-height:88px; padding-block:17px; }
  .price-row::before { inset-inline:-10px; }
  .price-name { font-size:21px; }
  .price-name small { font-size:12px; }
  .price-value { font-size:23px; }
  .price-value.is-request { font-size:19px; }
  .treatment-image { margin-top:30px; }
  .treatment-image img { aspect-ratio:4/3; }
}
@media(max-width:360px) {
  .treatment-tabs button, .treatment-tabs button:first-child { padding:11px 9px; font-size:13px; }
  .treatment-tabs button small { font-size:11px; }
  .price-name { font-size:19px; }
  .price-value { font-size:21px; }
}
@media(prefers-reduced-motion:reduce) { .price-name, .price-row::before { transition:none; } }


/* Source: gallery.css */
/* Photo gallery: the existing NS Studio palette, type and square geometry. */
.gallery-toolbar { display:flex; justify-content:space-between; align-items:center; gap:24px; margin:0 0 30px; border-bottom:1px solid var(--line); }
.gallery-filters { display:flex; flex-wrap:wrap; gap:28px; }
.gallery-filters button { min-width:44px; min-height:52px; padding:12px 0; border:0; border-bottom:2px solid transparent; background:none; color:var(--muted); font-size:14px; }
.gallery-filters button:hover { color:var(--text); }
.gallery-filters button[aria-pressed="true"] { color:var(--gold); border-bottom-color:var(--gold); }
/* Unter dem Raster untereinander: zuerst weitere Bilder, darunter leiser der Instagram-Link, der auch bleibt, wenn alle Fotos offen sind. */
.gallery-more-row { display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:36px; }
.gallery-more-row .gallery-instagram { margin-top:0; font-size:13px; min-height:44px; }
.gallery-more { display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:50px; padding:13px 24px; border:1px solid var(--gold); color:var(--gold); background:transparent; font-size:14px; }
/* Hover fuellt Gold wie beim Umriss-Knopf „Route planen“; vorher wurde die Schrift nur heller und wirkte wie Ausblenden. */
.gallery-more:hover { color:var(--bg); background:var(--gold); }
.gallery-more:active { color:var(--bg); background:#b89442; border-color:#b89442; }
.gallery-more svg { width:18px; height:18px; }
.gallery-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:36px 24px; }
.gallery-item { min-width:0; display:block; }
.gallery-photo { aspect-ratio:4/5; overflow:hidden; background:var(--bg); }
.gallery-photo img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease; }
.gallery-item:is(:hover,:focus-visible) .gallery-photo img { transform:scale(1.025); }
.gallery-item > span { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:14px; font-size:14px; line-height:1.55; }
.gallery-item > span svg { width:19px; height:19px; color:var(--gold); }
/* Full-height photograph, a calm information column and a single filmstrip. */
body.gallery-open { overflow:hidden; }
.gallery-dialog { width:100%; height:100vh; height:100dvh; max-width:none; max-height:none; margin:0; padding:20px; border:0; background:var(--bg); color:var(--text); overflow:hidden; overscroll-behavior:contain; }
.gallery-dialog[open] { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; gap:16px; }
.gallery-dialog::backdrop { background:rgb(5 6 4 / 96%); }
.gallery-dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; min-width:0; }
.gallery-caption { min-width:0; }
.gallery-dialog-header h2 { font-size:2rem; line-height:1.15; letter-spacing:-.015em; text-wrap:balance; }
.gallery-position { margin-top:8px; font-size:.875rem; line-height:1.5; font-variant-numeric:tabular-nums; color:var(--muted); }
.gallery-dialog button { color:var(--text); font-family:var(--sans); cursor:pointer; }
.gallery-close { display:inline-flex; justify-content:center; align-items:center; flex:none; gap:10px; min-width:44px; min-height:44px; padding:8px 10px; border:0; background:transparent; font-size:.875rem; line-height:1.4; }
.gallery-close svg { width:20px; height:20px; }
.gallery-close:hover { background:var(--surface); }
.gallery-stage { position:relative; min-width:0; min-height:0; touch-action:pan-y pinch-zoom; }
.gallery-large { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.gallery-stage[aria-busy="true"] .gallery-large { opacity:0; }
.gallery-loading { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); max-width:44ch; margin:0 auto; padding:20px; text-align:center; font-size:.875rem; line-height:1.6; }
.gallery-dialog-footer { display:grid; min-width:0; min-height:0; gap:16px; }
.gallery-related { min-width:0; min-height:0; }
.gallery-related-title { margin-bottom:12px; font:400 .875rem/1.5 var(--sans); color:var(--muted); }
.gallery-thumbs { display:flex; align-items:flex-start; gap:10px; min-width:0; padding:4px; overflow-x:auto; overflow-y:hidden; overscroll-behavior:contain; scrollbar-width:none; scroll-snap-type:x proximity; }
.gallery-thumbs::-webkit-scrollbar { display:none; }
.gallery-dialog .gallery-thumb { display:block; flex:0 0 56px; width:56px; height:70px; min-width:0; min-height:0; padding:0; border:0; background:var(--surface); opacity:.65; scroll-snap-align:start; }
.gallery-dialog .gallery-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.gallery-dialog .gallery-thumb:hover, .gallery-dialog .gallery-thumb[aria-current="true"] { opacity:1; }
.gallery-dialog .gallery-thumb[aria-current="true"] { outline:2px solid var(--gold); outline-offset:2px; }
.gallery-dialog .gallery-thumb:focus-visible { opacity:1; outline:2px solid var(--gold); outline-offset:2px; }
.gallery-dialog-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; min-width:0; }
.gallery-actions { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.gallery-look { display:inline-flex; align-items:center; justify-content:center; flex:1; gap:8px; min-width:0; min-height:48px; padding:12px 16px; background:var(--light-button,var(--gold)); color:#181711; font-size:.9375rem; font-weight:600; line-height:1.5; }
.gallery-look:hover { background:var(--light-button-hover,#dfbf81); }
.gallery-look:active { background:var(--light-button-active,#b89442); }
.gallery-look .brand-mark { width:19px; height:19px; }
.gallery-source { display:inline-flex; align-items:center; justify-content:center; flex:none; gap:10px; width:44px; min-height:44px; color:var(--muted); font-size:.875rem; line-height:1.5; }
.gallery-source .brand-mark { width:18px; height:18px; }
.gallery-source .brand-source-label, .gallery-source-arrow { display:none; }
.gallery-source:hover { color:var(--text); background:var(--surface); }
.gallery-navigation { display:flex; flex:none; border:1px solid var(--line); background:var(--surface); }
.gallery-navigation button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-width:46px; min-height:46px; padding:10px; border:0; background:transparent; font-size:.875rem; line-height:1.5; }
.gallery-navigation button + button { border-left:1px solid var(--line); }
.gallery-navigation button:hover { background:var(--bg); }
.gallery-navigation button:active { background:var(--light-selected,#25251e); }
.gallery-navigation button:disabled { opacity:.35; cursor:default; }
.gallery-navigation button:disabled:hover { background:transparent; }
.gallery-navigation svg { width:20px; height:20px; color:var(--brand-action,var(--gold)); }
.gallery-navigation span { display:none; }
.gallery-prev svg { transform:rotate(180deg); }
.gallery-dialog :is(a,button):focus-visible { outline:2px solid var(--gold); outline-offset:3px; }

@media(min-width:1001px) and (min-height:601px) {
  .gallery-dialog { padding:24px; }
  .gallery-dialog[open] { grid-template-columns:minmax(0,1fr) 280px; grid-template-rows:auto minmax(0,1fr); column-gap:40px; row-gap:28px; }
  .gallery-stage { grid-column:1; grid-row:1 / -1; }
  .gallery-dialog-header { grid-column:2; grid-row:1; padding-top:clamp(72px,12vh,136px); }
  .gallery-dialog-header h2 { font-size:2.25rem; line-height:1.15; text-wrap:pretty; }
  .gallery-close { position:absolute; top:24px; right:24px; }
  .gallery-dialog-footer { grid-column:2; grid-row:2; display:flex; flex-direction:column; gap:24px; }
  .gallery-dialog-controls { display:contents; }
  .gallery-actions { order:0; flex:none; flex-direction:column; align-items:stretch; gap:4px; }
  .gallery-source { align-self:flex-start; justify-content:flex-start; width:auto; }
  .gallery-source .brand-source-label, .gallery-source-arrow { display:block; }
  .gallery-source-arrow { width:15px; height:15px; }
  .gallery-source:hover { background:transparent; text-decoration:underline; text-underline-offset:4px; }
  .gallery-related { order:1; margin-top:auto; }
  .gallery-navigation { order:2; width:100%; }
  .gallery-navigation button { flex:1; }
  .gallery-navigation span { display:inline; }
}
@media(max-width:760px) {
  .gallery-dialog { padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
  .gallery-dialog[open] { gap:12px; }
  .gallery-dialog-header { gap:12px; }
  .gallery-dialog-header h2 { font-size:1.625rem; line-height:1.15; }
  .gallery-position { margin-top:5px; }
  .gallery-close { padding:10px; }
  .gallery-close span { display:none; }
  .gallery-dialog-footer { gap:12px; }
  .gallery-related-title { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .gallery-thumbs { gap:8px; }
  .gallery-dialog .gallery-thumb { flex-basis:44px; width:44px; height:55px; }
  .gallery-dialog-controls { gap:10px; }
  .gallery-actions { gap:4px; }
  .gallery-look { min-height:44px; padding:10px 8px; gap:6px; font-size:.875rem; white-space:nowrap; }
  .gallery-look .brand-mark { width:18px; height:18px; }
  .gallery-navigation button { min-width:44px; min-height:44px; padding:10px; }
}
@media(max-height:600px) {
  .gallery-related:not([hidden]) { display:none; }
}
@media(min-width:600px) and (max-height:600px) {
  .gallery-dialog { padding:16px; }
  .gallery-dialog[open] { grid-template-columns:minmax(0,1fr) 250px; grid-template-rows:auto minmax(0,1fr); gap:24px; }
  .gallery-stage { grid-column:1; grid-row:1 / -1; }
  .gallery-dialog-header { grid-column:2; padding-top:48px; }
  .gallery-dialog-header h2 { font-size:1.75rem; }
  .gallery-close { position:absolute; top:8px; right:8px; }
  .gallery-close span { display:none; }
  .gallery-dialog-footer { grid-column:2; align-self:end; }
  .gallery-dialog-controls { flex-direction:column; align-items:stretch; gap:12px; }
  .gallery-actions { flex:none; }
  .gallery-look { padding-inline:10px; font-size:.875rem; }
  .gallery-navigation button { flex:1; }
  .gallery-navigation span { display:inline; }
}

/* The page grid keeps its established responsive layout. */
@media(max-width:1100px) { .gallery-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:760px) {
  .gallery-more { width:100%; }
  .gallery-more-row { margin-top:28px; }
  .gallery-toolbar { flex-wrap:wrap; gap:0 20px; margin-bottom:24px; }
  .gallery-filters { width:100%; justify-content:space-between; gap:12px; }
  .gallery-filters button { font-size:13px; min-height:48px; }
  .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 14px; }
  .gallery-item > span { align-items:flex-start; gap:6px; font-size:12px; padding-top:11px; }
  .gallery-item > span svg { width:16px; height:16px; margin-top:2px; }
}
@media(prefers-reduced-motion:reduce) { .gallery-photo img { transition:none; } }


/* Source: reviews.css */
/* Public customer voices, within the existing NS Studio type and color system. */
.review-stars { display:inline-flex; align-items:center; gap:3px; color:var(--gold); flex:none; }
.review-stars svg { width:18px; height:18px; fill:currentColor; stroke:none; }
.hero-rating { display:flex; align-items:center; flex-wrap:wrap; gap:4px 14px; width:fit-content; max-width:100%; min-height:48px; margin-top:14px; padding-block:5px; font-size:14px; line-height:1.5; color:var(--muted); }
.hero-rating-score { display:inline-flex; align-items:center; gap:12px; }
.hero-rating-source { white-space:nowrap; }
.hero-rating .review-stars { gap:3px; }
.hero-rating .review-stars svg { width:18px; height:18px; }
.hero-rating strong { color:var(--text); font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.hero-rating:hover, .hero-rating:hover strong { color:var(--gold); }
.hero-copy > .hero-rating + .button { margin-top:20px; }
.reviews-section { border-bottom:1px solid var(--line); }
.reviews-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,420px); align-items:center; gap:64px; }
.reviews-intro h2 { font-size:clamp(48px,4.5vw,68px); }
.reviews-summary { border:1px solid var(--line); }
.reviews-rating { display:flex; align-items:center; gap:24px; padding:22px 26px; }
.reviews-rating > strong { display:flex; align-items:baseline; gap:8px; color:var(--text); font-size:52px; font-weight:500; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums; white-space:nowrap; }
.reviews-rating > strong > span { font-size:15px; font-weight:400; letter-spacing:0; color:var(--muted); }
.reviews-rating-detail { min-width:0; }
.reviews-rating-detail .review-stars { display:flex; gap:4px; }
.reviews-rating-detail p { margin-top:8px; font-size:13px; line-height:1.6; }
.reviews-all { display:flex; justify-content:space-between; gap:12px; min-height:48px; margin:0; padding:11px 26px; border-top:1px solid var(--line); font-size:13px; }
.reviews-all:hover { background:#22231a; text-decoration:none; }
.review-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:48px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.customer-review { display:flex; flex-direction:column; min-width:0; padding:30px 28px; }
.customer-review:first-child { padding-left:0; }
.customer-review:last-child { padding-right:0; }
.customer-review + .customer-review { border-left:1px solid var(--line); }
.customer-review blockquote { margin:0; }
.customer-review blockquote p { font:500 clamp(28px,2.5vw,34px)/1.25 var(--serif); color:var(--text); letter-spacing:-.01em; text-wrap:wrap; }
.customer-review figcaption { display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-top:auto; padding-top:24px; font-size:14px; color:var(--muted); }
.customer-review .text-link { font-size:12px; gap:8px; }
.customer-review .text-link svg { width:16px; height:16px; }
.reviews-footnote { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 24px; margin-top:16px; font-size:11px; line-height:1.7; }
@media(max-width:1000px) { .reviews-intro { gap:32px; } .reviews-intro h2 { font-size:48px; } }
@media(max-width:900px) {
  .reviews-intro { display:block; }
  .reviews-summary { max-width:480px; margin-top:26px; }
  .review-list { display:block; margin-top:32px; }
  .customer-review, .customer-review:first-child, .customer-review:last-child { padding:26px 0; }
  .customer-review + .customer-review { border-left:0; border-top:1px solid var(--line); }
  .customer-review figcaption { flex-direction:row; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px 16px; padding-top:14px; }
}
@media(max-width:760px) {
  .hero-rating { gap:4px 12px; margin-top:12px; }
  .reviews-intro h2 { font-size:clamp(39px,10.8vw,52px); }
  .reviews-summary { max-width:none; }
  .reviews-rating { padding:20px; gap:22px; }
  .reviews-all { padding:11px 20px; }
  .customer-review blockquote p { font-size:30px; }
  .customer-review figcaption { font-size:13px; }
}
@media(max-width:360px) { .reviews-rating { padding:18px 16px; gap:16px; } .reviews-rating > strong { font-size:46px; gap:6px; } .reviews-rating-detail .review-stars { gap:3px; } .reviews-rating-detail p { font-size:12px; } .reviews-all { padding-inline:16px; font-size:12px; } }
/* Einladung unter den Zitaten: selbst bewerten. Gleiche Fläche und Linie wie der Bewertungskasten. */
.review-invite { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px 24px; margin-top:24px; padding:18px 26px; border:1px solid var(--line); }
.review-invite p { margin:0; font-size:15px; line-height:1.5; color:var(--text); }
.review-invite p span { display:block; margin-top:2px; font-size:12px; color:var(--muted); }
.review-invite .text-link { font-size:13px; white-space:nowrap; }
@media(max-width:760px) { .review-invite { padding:16px 20px; } }


/* Source: location.css */
/* Locally rendered OSM map, with the studio's real address marked. */
.studio-location { margin-top: 0; padding-block: 72px; border-top: 1px solid var(--line); }
.location-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 24px; }
.location-heading h2 { font-size: clamp(30px, 3vw, 38px); line-height: 1.2; }
.location-heading p { font-size: 14px; margin-top: 8px; }
.location-heading .location-landmark { color: var(--text); margin-top: 5px; }
.location-route { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; flex: none; padding: 12px 20px; border: 1px solid var(--gold); color: var(--gold); font-size: 14px; font-weight: 600; }
.location-route:hover { background: var(--gold); color: var(--bg); }
.location-route:active { background: #b89442; border-color: #b89442; color: #181711; }
.location-route svg { width: 18px; height: 18px; }
.location-map { display: block; background: #171b17; border: 1px solid #66604e; }
.location-map picture { display: block; }
.location-map img { width: 100%; height: auto; aspect-ratio: 1280 / 600; object-fit: cover; }
.location-map:hover { border-color: var(--gold); }
/* The new map has larger landmark labels. Keep the complete frame at intermediate
   widths so names, north arrow and scale are never cropped away. */
.location-figure { position: relative; margin: 0; }
.map-credit { position: absolute; right: 1px; bottom: 1px; max-width: calc(100% - 2px); margin: 0; }
.map-attribution { display: inline-flex; align-items: flex-end; min-height: 44px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.map-attribution > span { padding: 4px 10px; background: var(--bg); }
.map-attribution:hover { color: var(--text); text-decoration: underline; }
.map-attribution:focus-visible { outline-offset: -3px; }
/* Preserve the scale at the lower left on the narrowest phones. */
@media (max-width: 360px) { .map-credit-suffix { display: none; } }
@media (max-width: 760px) {
  .studio-location { margin-top: 0; padding-block: 56px; }
  .location-heading { display: block; margin-bottom: 20px; }
  .location-heading h2 { font-size: clamp(29px, 7.6vw, 36px); }
  .location-heading p { font-size: 14px; }
  .location-route { width: 100%; margin-top: 20px; }
  .location-map img { aspect-ratio: 600 / 680; }
}

.location-intro { display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: 28px; row-gap: 6px; align-items: start; min-width: 0; }
.location-intro > h2 { grid-column: 2; margin: 0; }
.location-photo { display: block; grid-column: 1; grid-row: 1 / 4; align-self: center; }
.location-photo img { width: 180px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.location-details { grid-column: 2; min-width: 0; }
.location-details > p:first-child { margin-top: 0; }
.location-details .location-recognition { font-size: 14px; margin-top: 4px; }
.location-details .location-part { white-space: nowrap; }
.location-details .location-credit { font-size: 11px; margin-top: 6px; }
.location-heading .location-landmark { grid-column: 2; margin: 0; }
@media (max-width: 760px) {
  .location-intro { grid-template-columns: 136px minmax(0, 1fr); gap: 18px 20px; }
  .location-intro > h2 { grid-column: 1 / -1; grid-row: 1; }
  .location-photo { grid-column: 1; grid-row: 2; align-self: start; }
  .location-photo img { width: 136px; }
  .location-details { grid-column: 2; grid-row: 2; align-self: center; }
  /* Schmal: Strasse und Ort als zwei Zeilen, statt die PLZ vom Ort zu trennen. */
  .location-details .location-sep { display: none; }
  .location-details .location-part { display: block; }
  .location-heading .location-landmark { grid-column: 1 / -1; grid-row: 3; }
}
@media (max-width: 360px) { .location-intro { grid-template-columns: 120px minmax(0, 1fr); column-gap: 16px; } .location-photo img { width: 120px; } }


/* Source: contact.css */
/* Personal appointment request; the treatment choice is visible before WhatsApp opens. */
.contact { column-gap:8%; row-gap:32px; }
.contact h2 { font-size:clamp(48px,4.5vw,68px); line-height:1.08; max-width:12ch; }
/* Gleiche Bauart wie die Portraetzeile im Hero: Haarlinie darueber, runder Ausschnitt, zwei Zeilen,
   nur so breit wie der Inhalt. Damit ist das Portraet rund zwei Zeilenhoehen hoch und steht nicht allein. */
.contact-person { display:flex; align-items:center; gap:14px; width:fit-content; max-width:100%;
  margin-top:30px; padding-top:22px; border-top:1px solid var(--line); }
.contact-person img { width:48px; height:48px; flex:none; object-fit:cover; object-position:50% 20%; border-radius:50%; }
.contact-person p { color:var(--text); font-size:15px; line-height:1.5; }
.contact-person small { display:block; margin-top:4px; color:var(--muted); font-size:12px; line-height:1.5; }
.hero-person img { object-position:50% 20%; }
.contact .request-panel { padding:32px; background:var(--bg); border-color:var(--line); }
.request-services { min-width:0; margin:0; padding:0; border:0; }
.request-services legend { padding:0; margin-bottom:22px; font:34px/1.15 var(--serif); letter-spacing:-.015em; }
.request-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.request-panel .request-option { display:flex; align-items:center; justify-content:flex-start; gap:10px; min-height:54px; margin:0; padding:12px; border:1px solid #666454; color:var(--text); font-size:14px; cursor:pointer; }
.request-option input { width:17px; height:17px; margin:0; flex:none; accent-color:var(--gold); cursor:pointer; }
.request-panel .request-option:has(input:checked) { border-color:var(--gold); background:#222219; color:var(--gold); }
.request-panel .request-option:hover { border-color:var(--gold); }
.request-option:has(input:focus-visible) { outline:2px solid var(--gold); outline-offset:3px; }
.request-panel .wishes-label { display:block; margin:24px 0 10px; font-size:14px; }
.request-panel .wishes-label span { margin-left:6px; font-size:12px; }
.request-panel textarea { min-height:105px; font-size:16px; padding:13px 14px; background:var(--bg); }
.request-panel > .request-whatsapp { justify-content:center; gap:12px; min-height:56px; margin-top:22px; padding:14px 16px; font-size:14px; }
.request-panel > .request-whatsapp .button-arrow { margin-left:auto; }
.request-panel .request-note { margin-top:14px; font-size:13px; line-height:1.7; }
.request-panel .request-phone { display:flex; flex-wrap:wrap; justify-content:center; column-gap:10px; row-gap:2px; min-height:48px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); color:var(--text); font-size:14px; }
.request-phone .phone-label { color:var(--muted); font-size:12px; }
.request-phone svg { width:17px; height:17px; color:var(--gold); }
.request-phone:hover { color:var(--gold); }
@media(max-width:1000px) {
  /* Unter 1000 px stapelt style.css den Kontakt (Flex-Spalte). Die Oeffnungszeiten stehen vor dem
     Anfragefeld, damit die Zeitfenster-Wahl die Öffnungszeiten kennt und der Abschnitt auf dem Knopf endet. */
  .contact .request-panel { order:1; }
  .contact h2 { font-size:48px; }
  .contact .request-panel { padding:24px; }
  .request-panel .request-option { font-size:13px; padding:10px; gap:8px; }
}
@media(max-width:760px) {
  .contact { display:flex; gap:28px; }
  .contact h2 { max-width:none; font-size:clamp(39px,10.8vw,52px); }
  .contact-person { margin-top:24px; padding-top:18px; gap:12px; }
  .contact-person img { width:44px; height:44px; }

  .contact .request-panel { padding:24px 20px; }
  .request-services legend { font-size:32px; margin-bottom:20px; }
  .request-panel > .request-whatsapp { font-size:14px; }
}
@media(max-width:360px) {
  .contact .request-panel { padding:22px 16px; }
  .request-panel .request-option { font-size:12px; gap:7px; padding:10px 8px; min-height:50px; }
  .request-panel .wishes-label { font-size:13px; }
  .request-panel > .request-whatsapp { font-size:13px; }
}
/* One continuous week keeps days and appointment times on the same reading axis. */
.opening-hours { margin-top:56px; }
.opening-hours h3 { font:500 28px/1.15 var(--serif); letter-spacing:-.015em; }
.opening-hours .hours-appointment { margin:12px 0 0; max-width:48ch; font-size:var(--type-body); line-height:1.7; color:var(--muted); text-wrap:pretty; }
.opening-hours .hours-note { margin:20px 0 10px; font-size:14px; color:var(--gold); }
.hours-list { display:grid; grid-template-columns:minmax(0,1fr); margin:0; }
.hours-list > div { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:6px 0; border-bottom:1px solid var(--line); font-size:var(--type-body); line-height:1.5; }
.hours-list > div:first-child { border-top:1px solid var(--line); }
.hours-list dt { color:var(--muted); }
.hours-list dd { margin:0; color:var(--text); font-weight:500; font-variant-numeric:tabular-nums lining-nums; white-space:nowrap; }
.hours-list .hours-closed dd { color:var(--muted); }
.opening-hours .cancel-note { margin:18px 0 0; font-size:13px; line-height:1.7; color:var(--muted); }
.cancel-note strong { color:var(--text); font-weight:600; }
@media(max-width:760px) {
  .opening-hours { margin-top:44px; }
  .opening-hours h3 { font-size:26px; }
}
/* Zeitfenster in der Terminanfrage, ohne Uhrzeiten; die Wahl landet als Satz in der WhatsApp-Nachricht. */
.request-times { min-width:0; margin:22px 0 0; padding:0; border:0; }
.request-times legend { padding:0; margin-bottom:10px; font-size:14px; }
.request-times legend span { margin-left:6px; font-size:12px; color:var(--muted); }
/* Vormittags und nachmittags nebeneinander; flexibel nimmt die ganze zweite Zeile ein. */
.request-options-times { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
/* Kleiner als die Behandlungswahl darueber: Die Behandlung ist die eigentliche Frage, das Zeitfenster eine Zugabe. */
.request-panel .request-options-times .request-option { min-height:44px; padding:9px 10px; font-size:13px; gap:8px; }
.request-options-times .request-option input { width:15px; height:15px; }
.request-options > .request-option:last-child:nth-child(odd) { grid-column:1 / -1; }
@media(max-width:360px) { .request-options-times { grid-template-columns:1fr; gap:8px; } .request-options-times .request-option { min-height:46px; } }

/* Vergleichsvariante (Aufruf mit ?hell=1, script.js setzt die Klasse): nur der Anfragekasten wird elfenbeinfarben,
   der Rest der Seite bleibt Schwarz/Gold. Idee aus dem Call: Walter will beide Optiken kombiniert sehen; die helle Fläche
   liegt genau auf der einen Handlung, die zählt (Color-Prinzip 9: hell für Aktion, dunkel für Verweildauer).
   Kontraste auf #f1eee7: Text #181711 15,5:1, Nebentext #5f5a4f 5,9:1, Goldrand #a3812f 3,2:1, Icon #8a6a1f 4,4:1. */
.variante-hell .contact .request-panel { background:var(--text); border-color:var(--text); color:#181711; color-scheme:light; }
.variante-hell .request-panel legend, .variante-hell .request-panel .wishes-label { color:#181711; }
.variante-hell .request-panel .request-times legend span, .variante-hell .request-panel .wishes-label span { color:#5f5a4f; }
.variante-hell .request-panel .request-option { border-color:#a8a08e; color:#181711; }
.variante-hell .request-panel .request-option:hover { border-color:#a3812f; }
.variante-hell .request-panel .request-option:has(input:checked) { border-color:#a3812f; background:#f6ead0; color:#181711; }
.variante-hell .request-panel .request-option input { accent-color:#a3812f; }
.variante-hell .request-panel textarea { background:#fbfaf6; border-color:#a8a08e; color:#181711; caret-color:#8a6a1f; }
.variante-hell .request-panel textarea::placeholder { color:#6f6a60; }
.variante-hell .request-panel .request-phone { border-top-color:#d9d3c5; color:#181711; }
.variante-hell .request-panel .request-phone:hover { color:#8a6a1f; }
.variante-hell .request-panel .request-phone .phone-label { color:#5f5a4f; }
.variante-hell .request-panel .request-phone svg { color:#8a6a1f; }
.variante-hell .request-panel :focus-visible, .variante-hell .request-panel .request-option:has(input:focus-visible) { outline-color:#181711; }
.variante-hell .request-panel ::selection { background:#181711; color:var(--text); }

/* Keep the framed request alongside the studio information; group both appointment notes. */
.contact-section { --type-section: clamp(2.5rem, 4.4vw, 3.5rem); --type-subheading: 1.75rem; --type-note: 1rem; }
.contact { row-gap: 28px; }
.contact .opening-hours { margin-top: 0; }
.contact .request-services legend { font: 500 1.75rem/1.25 var(--serif); letter-spacing: -.015em; }
.contact .opening-hours h3, .contact .opening-hours .hours-note { font: 600 var(--type-lead)/1.5 var(--sans); letter-spacing: 0; color: var(--text); text-wrap: balance; }
.contact .hours-appointment { max-width: 52ch; margin-top: 8px; line-height: 1.65; }
.contact .opening-hours .cancel-note { max-width: 52ch; margin: 16px 0 0; font-size: var(--type-body); line-height: 1.65; text-wrap: pretty; }
.contact .opening-hours .cancel-note strong { font-weight: 600; }
.contact .opening-hours .hours-note { margin: 28px 0 12px; }
.contact .request-panel { order: initial; }
/* Optional labels wrap flush with the field label; service choices share one rhythm. */
.request-panel .wishes-label { display: flex; flex-wrap: wrap; justify-content: flex-start; column-gap: 8px; }
.request-panel .wishes-label span { margin-left: 0; }
.request-services .request-options { grid-auto-rows: 1fr; }
@media (max-width: 760px) {
  .contact-section { --type-section: clamp(2.375rem, 7.5vw + .75rem, 3rem); }
  .contact { gap: 28px; }
  /* The flex gap already separates the form from the opening hours. */
  .contact .request-panel { margin-top: 0; }
}


/* Source: footer.css */
/* Footer der Studio-Website als ruhige Visitenkarte: eine Serif-Zeile (Satz mit lokalen Suchbegriffen), darunter nur
   Angaben mit leisem Label darüber. Zwei Schriftgrößen: 15 px Inhalt, 13 px Labels, Aktionen und Rechtszeile.
   Die alten Entwurfsregeln für den Footer sind aus style.css entfernt; hier reicht deshalb einfache Spezifität. */
.site-footer { --footer-logo:72px; padding:80px 0 0; }
.footer-main { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); gap:48px 56px; }

/* Logo und Satz stehen nebeneinander als eine Einheit; Kontakt und Adresse beginnen auf derselben Höhe. */
.footer-brand { display:grid; grid-template-columns:var(--footer-logo) minmax(0,1fr); align-items:center; column-gap:24px; }
.footer-logo { display:block; width:fit-content; }
.footer-logo img { width:var(--footer-logo); height:var(--footer-logo); }
.footer-claim { max-width:30ch; font:500 27px/1.3 var(--serif); letter-spacing:-.01em; color:var(--text); text-wrap:balance; }
.footer-social { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:0 28px; margin:14px 0 0; padding:0; list-style:none; }
.footer-social a { display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:15px; color:var(--text); transition:color .2s; }
.footer-social a:hover { color:var(--gold); }
.footer-social a:hover, .footer-legal a:hover { text-decoration:underline; text-underline-offset:4px; }
.footer-social svg { width:18px; height:18px; color:var(--gold); }

.footer-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.footer-col h2, .footer-contact span { display:block; font:400 13px/1.5 var(--sans); letter-spacing:0; color:var(--muted); }
.footer-contact { display:grid; gap:16px; margin:0; padding:0; list-style:none; }
/* Label und Angabe bilden zusammen den Link: 44 px Tippfläche, und der Fokusrahmen umschließt beides.
   Ohne Innenabstand beginnt das Label auf derselben Höhe wie „Adresse“ nebenan. */
.footer-contact a { display:block; width:fit-content; max-width:100%; min-height:44px; font-size:15px; line-height:1.6; color:var(--text); overflow-wrap:anywhere; transition:color .2s; }
.footer-contact a:hover { color:var(--gold); }
.footer-contact a:focus-visible { outline-offset:4px; }
.footer-col address { margin:0; font-style:normal; font-size:15px; line-height:1.75; color:var(--text); }
.footer-col .text-link { min-height:44px; margin-top:6px; font-size:13px; }

.footer-legal { display:flex; flex-wrap:wrap; align-items:center; gap:4px 32px; margin-top:72px; padding:14px 0 30px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
.footer-legal a { display:inline-flex; align-items:center; min-height:44px; color:var(--muted); transition:color .2s; }
.footer-legal a:hover { color:var(--gold); }
/* Die Zeile links gehört dem Studio; die Nennung der Website steht rechts, kleiner und leiser (5,3:1 auf --bg). */
.footer-legal a:last-child { margin-left:auto; font-size:12px; color:#8a867c; }
.footer-legal a:last-child:hover { color:var(--gold); }

@media(max-width:1000px) {
  .footer-main { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; }
  .footer-brand { grid-column:1 / -1; }
  /* Der feste Kopf zeigt das Logo bis hierhin ohnehin; im Footer stünde es doppelt. */
  .footer-logo { display:none; }
  .footer-brand { grid-template-columns:minmax(0,1fr); }
  /* Platz für die feste Leiste, die bis 1000 px mitläuft (style.css, Tablet-Band). */
  .footer-legal { padding-bottom:96px; }
  /* Beim Tabben scrollt der Browser fokussierte Links sonst genau hinter die Leiste (WCAG 2.4.11). */
  html:has(.mobile-contact) { scroll-padding-bottom:88px; }
}
@media(max-width:760px) {
  .site-footer { padding-top:48px; }
  .footer-main { gap:32px 24px; }
  .footer-claim { font-size:25px; }
  .footer-social { margin-top:10px; }
  .footer-legal { margin-top:44px; padding-top:6px; gap:4px 24px; }
  .footer-legal a:last-child { margin-left:0; }
}
/* Unter 480 px passt die E-Mail-Adresse (158 px) nicht mehr sicher in eine halbe Spalte. */
@media(max-width:480px) {
  .footer-main { grid-template-columns:1fr; gap:32px; }
}


/* Source: theme.css */
/* A small segmented control beside the brand; the appointment action keeps priority. */
.theme-toggle { --theme-segment:32px; --theme-height:34px; --theme-border:#797668; --theme-selected:#3e3829; --theme-active:#e3c478; display:inline-flex; align-items:center; justify-content:center; flex:none; min-width:80px; min-height:44px; padding:4px; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; }
.theme-track { position:relative; display:grid; grid-template-columns:1fr 1fr; place-items:center; width:calc(var(--theme-segment) * 2 + 8px); height:var(--theme-height); padding:3px; border:1px solid var(--theme-border); border-radius:6px; background:var(--surface); transition:border-color .18s ease-out; }
.theme-track::before { content:""; position:absolute; left:3px; top:3px; width:var(--theme-segment); height:calc(var(--theme-height) - 8px); border-radius:3px; background:var(--theme-selected); transform:translateX(var(--theme-segment)); transition:transform .22s cubic-bezier(.16,1,.3,1); }
.theme-toggle:hover .theme-track { border-color:var(--gold); }
.theme-toggle:active .theme-track { border-color:var(--theme-active); }
.theme-toggle:focus-visible { outline-offset:2px; }
.theme-toggle svg { position:relative; width:17px; height:17px; stroke:currentColor; stroke-width:1.65; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.theme-toggle .theme-moon { color:var(--theme-active); }
html[data-theme="light"] .theme-toggle { --theme-border:#95866b; --theme-selected:#e6d7b8; --theme-active:#795b1b; }
html[data-theme="light"] .theme-track::before { transform:translateX(0); }
html[data-theme="light"] .theme-toggle .theme-sun { color:var(--theme-active); }
html[data-theme="light"] .theme-toggle .theme-moon { color:var(--muted); }
.site-header { gap:24px; }
.site-header .theme-toggle { order:1; }
.site-header .menu-toggle { order:4; }
.site-header nav, .site-header .legal-actions { order:2; }
html[data-theme] { scroll-padding-top:104px; }
@media (min-width:1001px) and (max-width:1200px) {
  .site-header .header-location { display:none; }
  .site-header #navigation { gap:14px; }
  .site-header { gap:16px; }
}
@media (max-width:1000px) {
  .site-header { gap:12px; }
  .site-header .theme-toggle { --theme-segment:28px; --theme-height:32px; margin-left:auto; min-width:64px; padding:0; }
  .theme-toggle svg { width:16px; height:16px; }
  .site-header .menu-toggle { margin-left:0; }
  .legal-body .theme-toggle { margin-left:0; }
}
@media (max-width:760px) { html[data-theme] { scroll-padding-top:96px; } }
@media (max-width:440px) {
  .site-header .header-location { display:none; }
  .site-header { gap:10px; }
  .legal-actions .button { padding-inline:12px; }
}
@media (max-width:360px) { .legal-body .site-header { gap:6px; } }
@media (prefers-reduced-motion:reduce) { .theme-track, .theme-track::before { transition:none; } }

/* Ivory and real gold. Luminous gold fills carry dark type; large gold lettering
   has its own contrast-safe shade. Small text uses ink rather than muddy dark gold. */
:root[data-theme="light"] {
  color-scheme:light;
  --bg:#faf7f0;
  --surface:#f0e9dc;
  --text:#29261f;
  --muted:#696256;
  --gold:#af882d;
  --line:#d8cebb;
  --light-paper:#fffcf6;
  --light-selected:#eee3cb;
  --light-control:#9a8c72;
  --light-button:#caa34f;
  --light-button-hover:#dab666;
  --light-button-active:#bd963f;
  --light-on-button:#29261f;
}
html[data-theme="light"] ::selection { background:#dec99e; color:#29261f; }
html[data-theme="light"] .header-location,
html[data-theme="light"] .hero-secondary { color:var(--text); }
html[data-theme="light"] .header-location > span { color:var(--muted); }

html[data-theme="light"] .button,
html[data-theme="light"] .site-header nav > .nav-contact,
html[data-theme="light"] .mobile-contact a:last-child { background:var(--light-button); border-color:var(--light-button); color:var(--light-on-button); }
html[data-theme="light"] .button:hover,
html[data-theme="light"] .site-header nav > .nav-contact:hover,
html[data-theme="light"] .site-header nav.is-open > .nav-contact:focus-visible,
html[data-theme="light"] .mobile-contact a:last-child:hover { background:var(--light-button-hover); border-color:var(--light-button-hover); color:var(--light-on-button); }
html[data-theme="light"] .button:active,
html[data-theme="light"] .site-header nav > .nav-contact:active,
html[data-theme="light"] .mobile-contact a:last-child:active { background:var(--light-button-active); border-color:var(--light-button-active); }
html[data-theme="light"] .menu-toggle { border-color:var(--light-control); }

/* Soft photographic depth, tuned to the surrounding paper in each theme. */
.hero-image {
  --hero-shadow:0 0 0 / 48%;
  box-shadow:0 14px 38px -12px rgb(var(--hero-shadow));
}
html[data-theme="light"] .hero-image { --hero-shadow:57 40 20 / 26%; }
@media (max-width:760px) {
  .hero-image { box-shadow:0 8px 24px -9px rgb(var(--hero-shadow)); }
}

/* White lettering stays white wherever it is placed on a photograph. */
html[data-theme="light"] .hero-image figcaption,
html[data-theme="light"] .about-photo figcaption { color:#fff7ea; }
html[data-theme="light"] .hero-image figcaption a { background:rgb(13 14 12 / 70%); border-color:#b5a476; color:#e1be70; }
html[data-theme="light"] .hero-image figcaption a:hover { background:#0d0e0c; border-color:#caa34f; }
html[data-theme="light"] .about-photo::before { border-color:var(--line); }

html[data-theme="light"] .treatment-tabs button[aria-selected="true"] { background:var(--light-selected); }
html[data-theme="light"] .reviews-summary,
html[data-theme="light"] .review-invite { background:var(--light-paper); }
html[data-theme="light"] .reviews-all:hover { background:var(--surface); }
html[data-theme="light"] .gallery-more:active { background:var(--light-button-active); border-color:var(--light-button-active); color:var(--light-on-button); }

/* The whole request form is themed, including native controls and selected states. */
html[data-theme="light"] .contact .request-panel { background:var(--light-paper); border-color:var(--line); color:var(--text); }
html[data-theme="light"] .request-panel legend,
html[data-theme="light"] .request-panel .wishes-label { color:var(--text); }
html[data-theme="light"] .request-panel .request-times legend span,
html[data-theme="light"] .request-panel .wishes-label span { color:var(--muted); }
html[data-theme="light"] .request-panel .request-option { border-color:var(--light-control); color:var(--text); }
html[data-theme="light"] .request-panel .request-option:hover { border-color:var(--gold); background:var(--surface); }
html[data-theme="light"] .request-panel .request-option:has(input:checked) { border-color:var(--gold); background:var(--light-selected); color:var(--text); }
html[data-theme="light"] .request-option input { accent-color:var(--gold); }
html[data-theme="light"] select,
html[data-theme="light"] .request-panel textarea { background:var(--light-paper); border-color:var(--light-control); color:var(--text); caret-color:var(--gold); }
html[data-theme="light"] textarea::placeholder { color:var(--muted); }
html[data-theme="light"] .request-panel .request-phone { color:var(--text); border-color:var(--line); }
html[data-theme="light"] .request-panel .request-phone .phone-label { color:var(--muted); }
html[data-theme="light"] .request-panel .request-phone svg,
html[data-theme="light"] .request-panel .request-phone:hover { color:var(--gold); }

html[data-theme="light"] .map-attribution { color:var(--muted); }
html[data-theme="light"] .map-attribution:hover { color:var(--text); }
html[data-theme="light"] .location-map { background:#f1eee5; border-color:var(--light-control); }
html[data-theme="light"] .footer-legal a:last-child { color:var(--muted); }
html[data-theme="light"] .footer-legal a:last-child:hover { color:var(--text); }

/* The viewer is a light photographic mount, with the same original images. */
html[data-theme="light"] .gallery-dialog { background:var(--light-paper); }
html[data-theme="light"] .gallery-dialog::backdrop { background:rgb(239 232 218 / 95%); }
html[data-theme="light"] .gallery-dialog button { border-color:var(--light-control); }
html[data-theme="light"] .gallery-dialog button:hover { background:var(--surface); border-color:var(--gold); }
html[data-theme="light"] .gallery-dialog button:active { background:var(--light-selected); }
html[data-theme="light"] .gallery-dialog .gallery-thumb:hover { background:var(--surface); }

/* Gold remains visible in broad accents and rules. Functional small labels keep
   the same strong ink contrast in normal, hover and selected states. */
html[data-theme="light"] .review-stars { color:var(--light-button); }
html[data-theme="light"] :is(.text-link, .price-action, .gallery-more, .location-route,
  .opening-hours .hours-note, .signature > span, .gallery-dialog button,
  .gallery-filters button[aria-pressed="true"], .treatment-tabs button[aria-selected="true"],
  .site-header nav > a:hover, .site-header nav > a[aria-current="location"],
  .brand:hover .header-location, .hero-rating:hover, .hero-rating:hover strong,
  .footer-social a:hover, .footer-contact a:hover, .footer-legal a:hover,
  .request-panel .request-phone:hover, .legal-page a:not(.button), .legal-actions .text-link:hover) { color:var(--text); }
html[data-theme="light"] .site-header nav > .nav-contact { color:var(--light-on-button); }
html[data-theme="light"] .price-row:is(:hover,:focus-visible) .price-name { color:var(--text); }
html[data-theme="light"] .gallery-more:hover,
html[data-theme="light"] .location-route:hover { background:var(--light-button); color:var(--light-on-button); }
html[data-theme="light"] .gallery-more:active,
html[data-theme="light"] .location-route:active { background:var(--light-button-active); border-color:var(--light-button-active); color:var(--light-on-button); }
html[data-theme="light"] .request-option input { accent-color:#8b6a22; }
html[data-theme="light"] .request-panel .request-option:has(input:checked) { border-color:#8b6a22; }
html[data-theme="light"] .treatment-tabs button[aria-selected="true"] { box-shadow:inset 0 -2px #8b6a22; }
html[data-theme="light"] .gallery-filters button[aria-pressed="true"] { border-bottom-color:#8b6a22; }
html[data-theme="light"] :focus-visible,
html[data-theme="light"] .request-option:has(input:focus-visible) { outline-color:#8b6a22; }




/* Source: readability.css */
/* Shared type roles: Cormorant for the studio voice, Manrope for reading and
   interaction. Relative units respect the visitor's default font size. */
:root {
  --type-credit:.75rem; --type-note:.875rem; --type-label:.9375rem;
  --type-body:1rem; --type-lead:1.125rem;
  --type-display:clamp(3.25rem,1.8rem + 3.7vw,5.125rem);
  --type-section:clamp(2.5rem,1.7rem + 2.7vw,4.25rem);
  --type-subheading:clamp(1.875rem,1.6rem + .7vw,2.25rem);
}
body { font-size:var(--type-body); }
.hero h1 { font-size:var(--type-display); line-height:1.08; letter-spacing:-.02em; text-wrap:balance; }
.section-intro h2, .reviews-intro h2, .about-copy h2, .contact h2, .location-heading h2 { font-size:var(--type-section); line-height:1.12; letter-spacing:-.015em; text-wrap:balance; }
.treatment-panel h3, .request-services legend { font-size:var(--type-subheading); font-weight:500; line-height:1.2; text-wrap:balance; }
.education h3, .opening-hours h3 { font-size:1.75rem; line-height:1.25; text-wrap:balance; }
.hero-description, .about-copy .about-lead { font-size:var(--type-lead); line-height:1.7; }
.hero-description { max-width:42ch; }
.section-intro p, .treatment-panel > p, .about-copy > p, .contact-copy > p, .education p, .legal-page p, .legal-page li { font-size:var(--type-body); line-height:1.75; max-inline-size:64ch; text-wrap:pretty; }
.about-copy > p + p { margin-top:1.25em; }
.legal-page h1 { font-size:var(--type-section); line-height:1.12; }
.legal-page h2 { font-size:1.875rem; line-height:1.25; text-wrap:balance; }
.legal-page .legal-lead { font-size:var(--type-lead); line-height:1.75; }
.legal-page a { overflow-wrap:anywhere; }

/* Readable content and controls. Weight distinguishes primary choices from
   optional fields, rather than making the latter small again. */
.button, .hero-copy > .button, .site-header nav > .nav-contact,
.treatment-tabs button, .treatment-tabs button:first-child,
.request-panel .request-option, .request-panel .request-options-times .request-option,
.request-panel > .request-whatsapp, .request-panel textarea,
.request-panel .wishes-label, .request-times legend, .opening-hours .hours-note,
.hours-list > div, .principles li, .footer-contact a, .footer-col address,
.footer-social a, .contact-person p, .location-heading p,
.location-details .location-recognition, .legal-actions .button,
.mobile-contact a:last-child { font-size:var(--type-body); }
.button, .site-header nav > .nav-contact { font-weight:600; line-height:1.5; }
.treatment-tabs button, .treatment-tabs button:first-child, .request-services .request-option { font-weight:600; }
.request-panel .request-option { line-height:1.5; }
.request-panel .request-options-times .request-option { font-weight:400; }
.request-panel .wishes-label, .request-times legend { font-weight:600; line-height:1.5; }
.request-times legend span, .request-panel .wishes-label span { font-weight:400; }
.hours-list { font-variant-numeric:lining-nums tabular-nums; }
.site-header nav, .hero-secondary, .studio-intro .hero-person,
.gallery-filters button, .gallery-item > span, .gallery-more,
.work-section .text-link, .gallery-more-row .gallery-instagram,
.reviews-all, .customer-review figcaption, .review-invite .text-link,
.education .text-link, .about-copy > .text-link, .request-panel .request-phone,
.location-route, .legal-actions .text-link { font-size:var(--type-label); line-height:1.6; }
.text-link, .gallery-filters button { font-weight:500; }
.gallery-filters button[aria-pressed="true"] { font-weight:600; }

/* Supporting information: a single readable step below ordinary copy. */
.header-location, .hero-person small, .studio-address, .hero-image figcaption,
.contact-person small, .request-panel .request-note, .request-phone .phone-label,
.opening-hours .cancel-note, .request-times legend span,
.request-panel .wishes-label span, .footer-col h2, .footer-contact span,
.footer-col .text-link, .footer-legal, .legal-page .legal-date,
.price-name small,
.price-action, .treatment-tabs button small, .customer-review .text-link,
.reviews-rating-detail p, .review-invite p span, .signature,
.map-attribution, .location-details .location-credit { font-size:var(--type-note); line-height:1.6; }
.header-location { letter-spacing:0; }
.hero-rating { font-size:var(--type-label); }
.hero-rating strong { font-size:1.25rem; }
.review-invite p { font-size:var(--type-body); }
.request-panel .request-note { max-width:44ch; }
.customer-review blockquote p { font-size:clamp(1.75rem,1.4rem + .75vw,2.125rem); line-height:1.3; }
.reviews-rating > strong { font-size:3.25rem; }
.reviews-rating > strong > span { font-size:var(--type-label); }
.signature > span { font-size:2.375rem; }
.price-name { font-size:1.5rem; line-height:1.3; }
.price-value { font-size:1.625rem; line-height:1.2; }
.price-value.is-request { font-size:1.3125rem; }
.price-action { font-weight:500; }
.footer-claim { font-size:1.6875rem; line-height:1.35; }
/* The agency signature is the only deliberately small text on the studio site. */
.footer-legal .footer-credit { font-size:var(--type-credit); line-height:1.6; }

@media (min-width:1001px) { .site-header nav { gap:22px; } }
@media (max-width:1000px) {
  .menu-toggle { font-size:var(--type-note); }
  .site-header nav.is-open { font-size:1.25rem; }
  .price-name { font-size:1.375rem; }
  .price-value { font-size:1.5rem; }
}
@media (max-width:760px) {
  :root { --type-display:clamp(2.875rem,1rem + 9.3vw,4.25rem); --type-section:clamp(2.375rem,1.5rem + 4.2vw,3.25rem); }
  .hero-description { font-size:1.0625rem; }
  .gallery-filters { gap:16px; }
  .treatment-tabs button, .treatment-tabs button:first-child { font-size:var(--type-label); }
  .price-name { font-size:1.3125rem; }
  .price-value { font-size:1.5rem; }
  .price-value.is-request { font-size:1.1875rem; }
  .location-details .location-part { white-space:normal; }
  .footer-claim { font-size:1.5625rem; }
}
@media (max-width:360px) {
  .brand { gap:10px; }
  .menu-toggle { gap:6px; padding-inline:9px; }
  .gallery-filters { gap:12px; }
  .gallery-filters button { font-size:var(--type-note); }
  .request-options { grid-template-columns:1fr; }
  .request-panel .request-option { min-height:48px; }
  .request-panel > .request-whatsapp { gap:8px; padding-inline:12px; font-size:var(--type-label); }
  .reviews-rating { flex-wrap:wrap; row-gap:12px; }
  .price-row { column-gap:12px; }
}


/* Source: brands.css */
/* Original logo shapes. Color follows the role and surface, not the brand name. */
svg.brand-mark { width:20px; height:20px; flex:none; fill:currentColor; stroke:none; }
/* Small gold accents remain distinguishable on both paper and hover surfaces. */
.price-action .brand-mark { width:18px; height:18px; fill:var(--brand-action,var(--gold)); }
html[data-theme="light"] { --brand-action:#9b7828; }
/* Filled actions inherit their dark label; the photo badge needs light ink. */
.request-whatsapp .brand-mark { width:22px; height:22px; }
.hero-image .brand-instagram { fill:#fff7ea; }
.hero-rating-source, .brand-source { display:inline-flex; align-items:center; gap:8px; }
.hero-rating-source .brand-mark, .brand-source .brand-mark { width:18px; height:18px; }
.hero-rating-source .brand-google, .brand-source .brand-google { fill:var(--muted); }
/* Social sources are peers: neither receives a permanent accent in the footer. */
.footer-social .brand-mark { width:18px; height:18px; color:inherit; fill:var(--muted); }
.footer-social a:is(:hover,:focus-visible) .brand-mark { fill:currentColor; }


/* Source: hero.css */
/* The portrait, personal introduction and next actions form one group. */
.hero { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; gap: 0 56px; padding-block: 40px 36px; border-bottom: 1px solid var(--line); }
.hero + .treatments { padding-top: 64px; }
.hero-copy { display: block; grid-column: 1; grid-row: 2; min-width: 0; align-self: end; padding: 0; }
.hero #hero-title { font-size: var(--type-display); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.hero #hero-title .accent { display: block; }
.hero-description { max-width: 43ch; margin-top: 24px; }
.hero-visual { grid-column: 2; grid-row: 1 / 5; min-width: 0; }
.hero-image { width: 100%; height: auto; max-height: 640px; aspect-ratio: 4 / 5; box-shadow: 0 18px 54px -14px rgb(var(--hero-shadow)); }
.hero-image > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.hero-image:before { display: block; z-index: 2; pointer-events: none; }
.hero-image:after { display: block; inset: 40% 0 0; background: linear-gradient(to top, rgb(13 14 12 / 96%) 0%, rgb(13 14 12 / 88%) 35%, rgb(13 14 12 / 65%) 60%, transparent 100%); }
.hero-image .hero-caption { display: block; z-index: 3; inset: auto 32px 32px; margin: 0; color: #fff7ea; font-family: var(--sans); text-align: left; }
.hero-caption-name { display: block; font: 500 2rem/1.15 var(--serif); letter-spacing: -.01em; }
.hero-caption > p { max-width: 44ch; margin: 8px 0 0; color: #fff7ea; font-size: var(--type-body); line-height: 1.6; text-wrap: pretty; }
.hero-actions { grid-column: 1; grid-row: 3; display: flex; align-self: start; align-items: center; flex-wrap: wrap; gap: 8px 24px; margin-top: 28px; }
.hero-actions > .button { flex: 0 0 auto; min-height: 56px; }
.hero-actions > .hero-secondary { flex: 0 1 auto; justify-content: flex-start; width: auto; min-height: 56px; margin: 0; font-size: var(--type-label); }
.hero-actions > .hero-secondary svg { flex: none; }

@media (min-width: 761px) and (max-width: 1100px) {
  .hero { column-gap: 32px; }
  .hero #hero-title { font-size: clamp(2.875rem, 5.8vw, 4rem); }
  .hero-description { margin-top: 20px; }
  .hero-image .hero-caption { inset: auto 24px 24px; }
  .hero-caption-name { font-size: 1.75rem; }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 0; padding-block: 28px 28px; }
  .hero + .treatments { padding-top: 48px; }
  .hero-copy { grid-column: 1; grid-row: 1; padding: 0; }
  .hero-visual { grid-column: 1; grid-row: 2; margin-top: 28px; }
  .hero #hero-title { font-size: clamp(2.5rem, .75rem + 9vw, 3.75rem); }
  .hero-description { margin-top: 20px; }
  .hero-image { max-height: 560px; aspect-ratio: 3 / 4; box-shadow: 0 10px 32px -10px rgb(var(--hero-shadow)); }
  .hero-image > img { height: 100%; }
  .hero-image .hero-caption { inset: auto 24px 24px; }
  .hero-caption-name { font-size: 1.75rem; }
  .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 16px; }
  .hero-actions > .button { width: 100%; }
  .hero-actions > .hero-secondary { min-height: 44px; justify-content: center; }
}