@font-face {
  font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/cormorant-garamond.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url("/assets/cormorant-garamond-italic.woff2") format("woff2");
}
@font-face {
  font-family: Montserrat; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/montserrat.woff2") format("woff2");
}
:root {
  color-scheme: dark;
  --bg: #100f0e;
  --raised: #1b1916;
  --well: #25221e;
  --ink: #f5eee3;
  --muted: #d2c8b8;
  --dim: #c0b29c;
  --gold: #e0bb65;
  --gold-bright: #f0cf80;
  --gold-line: #746045;
  --rule: #4a4031;
  --copper: #bc854f;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: Montserrat, Arial, sans-serif;
  --measure: 73ch;
  --gutter: clamp(1rem, 4.9vw, 5rem);
  --pad: clamp(2.4rem, 5.4vw, 5.5rem);
}
*, *::before, *::after {box-sizing: border-box}
html {scroll-padding-block-start: 1.2rem; font-size: 100%}
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 1rem; line-height: 1.6;
  font-synthesis: none; text-rendering: optimizeLegibility;
}
main {display: block}
::selection {background: #efd296; color: #201911}
img, svg {display: block; max-width: 100%; height: auto}
figure, p, dl, dd, h1, h2, h3, h4 {margin: 0}
ul, ol {margin-block: 0; padding-inline-start: 1.35em}
button, input, select, textarea {font: inherit}
button, summary {cursor: pointer}
a {color: var(--gold-bright); text-decoration: underline; text-underline-offset: .24em; text-decoration-thickness: .08em}
a:hover {color: #fff3cd}
:focus-visible {outline: 3px solid #f4d48a; outline-offset: 4px}
dialog :focus-visible {outline-color: #8d5c09}
:target {scroll-margin-block-start: 1rem}
[hidden] {display: none !important}
.sr-only, .visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap;
  clip-path: inset(50%); clip: rect(0, 0, 0, 0); margin: -1px; padding: 0; border: 0;
}
.skip-link, .skip {
  position: absolute; inset: .5rem auto auto var(--gutter); z-index: 50; transform: translateY(-160%);
  background: #f7ecd2; color: #16120e; padding: .7rem 1rem; font-size: .95rem; font-weight: 600;
}
.skip-link:focus, .skip:focus {transform: none}
.shell {width: min(100% - (2 * var(--gutter)), 77rem); margin-inline: auto}
.site-header {background: #11100f; border-bottom: 1px solid var(--rule)}
.header-inner {display: flex; align-items: center; justify-content: space-between; gap: clamp(.7rem, 2.2vw, 2.2rem); padding-block: .95rem}
.wordmark, .site-footer .wordmark {
  color: var(--gold); font: 600 clamp(1.6rem, 2.5vw, 2.15rem)/1 var(--serif); letter-spacing: .09em;
  white-space: nowrap; text-decoration: none;
}
.primary-nav {display: flex; align-items: center; justify-content: center; gap: clamp(.4rem, 1.4vw, 1.5rem); flex-wrap: wrap}
.primary-nav a, .primary-nav li a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .18rem .07rem .15rem;
  border-bottom: 2px solid transparent; color: var(--ink); text-decoration: none; font-size: .89rem; font-weight: 500;
}
.primary-nav ul, .site-footer ul, .jump-nav ul {list-style: none; padding: 0; margin: 0}
.primary-nav ul {display: flex; align-items: center; gap: inherit; flex-wrap: wrap}
.primary-nav a:hover, .primary-nav a[aria-current="page"] {color: var(--gold); border-bottom-color: var(--gold)}
.header-cta, .btn, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 46px; max-width: 100%;
  padding: .65rem 1.14rem; border: 1px solid var(--gold); border-radius: 2px;
  background: var(--gold); color: #19150e; text-decoration: none; text-align: center;
  font-family: var(--sans); font-size: .92rem; font-weight: 600; line-height: 1.35;
}
.header-cta:hover, .btn:hover, .button:hover {background: var(--gold-bright); border-color: var(--gold-bright); color: #17130b}
.header-cta[aria-current="page"] {outline: 1px solid var(--gold); outline-offset: 3px}
.btn-secondary, .button.secondary, .btn.secondary {background: transparent; border-color: #978365; color: var(--ink)}
.btn-secondary:hover, .button.secondary:hover, .btn.secondary:hover {background: #2c261e; border-color: var(--gold); color: #fff3d7}
.linebtn {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: .6em; min-height: 44px; width: fit-content; max-width: 100%;
  padding: .27rem 0; color: var(--gold-bright); background: transparent; border: 0; font-size: .9rem; font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .27em; text-align: start; line-height: 1.45;
}
.actions {display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; margin-top: 1.25rem}
h1, h2, h3, h4 {font-family: var(--serif); font-weight: 550; line-height: 1.04; letter-spacing: -.024em; text-wrap: balance}
h1 {font-size: clamp(3rem, 6.6vw, 6rem)}
h2 {font-size: clamp(2.36rem, 4.5vw, 4.1rem)}
h3 {font-size: clamp(1.72rem, 2.8vw, 2.45rem)}
h4 {font-size: 1.5rem}
p {text-wrap: pretty}
.keep {display: inline-block; max-width: 100%}
.eyebrow, .kicker {
  display: flex; align-items: center; gap: .75rem; color: var(--gold); margin: 0 0 .7rem;
  font: 600 clamp(.72rem, .82vw, .82rem)/1.55 var(--sans); text-transform: uppercase; letter-spacing: .13em;
}
.eyebrow::before, .kicker::before {content: ""; display: inline-block; width: 2.1rem; height: 1px; flex: 0 0 2.1rem; background: var(--copper)}
.lede, .lead {font-size: clamp(1.06rem, 1.4vw, 1.24rem); line-height: 1.6; color: #e6dccb; max-width: 59ch}
.note, .small, small {color: var(--dim); font-size: .875rem; line-height: 1.56}
.hero {position: relative; isolation: isolate; background: var(--bg); border-bottom: 1px solid var(--rule)}
.hero-inner {position: relative; display: grid; align-items: center; min-height: clamp(26rem, 39vw, 36rem); padding-block: clamp(3rem, 5vw, 5rem)}
.hero-copy {max-width: 36rem}
.hero-photo {position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none}
.hero-photo img {
  position: absolute; inset-block: 0; right: max(0px, calc((100% - 102rem) / 2));
  width: min(83%, 80rem); height: 100%; object-fit: cover; object-position: 50% 57%;
  mask-image: linear-gradient(to right, transparent, #0002 19%, #000b 42%, black 57%, black 74%, transparent);
}
.hero-photo figcaption {
  position: absolute; right: max(var(--gutter), calc((100% - 77rem) / 2)); bottom: 1rem;
  color: var(--muted); font: 550 .74rem/1.4 var(--sans); letter-spacing: .07em;
}
.hero h1.hero-word {
  width: fit-content; margin: .2rem 0 .14rem; color: #d4a45c; font: 600 clamp(3.65rem, 7.6vw, 7rem)/1 var(--serif);
  letter-spacing: .053em; text-wrap: nowrap;
}
@supports (background-clip: text) {
  .hero-word {background-image: linear-gradient(105deg,#e6bc64 0%,#d6aa5a 46%,#bd8552 100%); background-clip: text}
  .hero h1.hero-word {color: transparent}
}
.motto {font: italic 500 clamp(1.84rem, 3vw, 2.85rem)/1.14 var(--serif); color: #f1e4cb}
.hero-intro {margin-top: clamp(1.05rem, 2.3vw, 2.05rem); color: var(--muted); font-size: clamp(1rem, 1.22vw, 1.11rem)}
.hero-intro a {color: #eed6a2; text-decoration-thickness: 1px; text-decoration-color: #a58856}
.photo-frame {position: relative; margin: 0; overflow: hidden; border: 1px solid #62503a; background: #211b16}
.photo-frame img {display: block; width: 100%; height: 100%; object-fit: cover}
.photo-frame figcaption {position: absolute; bottom: 0; right: 0; padding: .39rem .72rem; background: #17130ef2; color: #efe1c6; font: 550 .74rem/1.4 var(--sans); letter-spacing: .07em}
.section {padding-block: var(--pad)}
.compact-section {padding-block: clamp(1.8rem, 4vw, 3.25rem)}
.section-tonal {background: var(--raised); border-block: 1px solid var(--rule)}
.section-intro {margin-bottom: clamp(1.4rem, 2.6vw, 2.35rem); max-width: var(--measure)}
.section-intro > p:not(.eyebrow) {max-width: 58ch; margin-top: .75rem; color: var(--muted)}
.master-grid {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(1.6rem, 4vw, 4rem)}
.master-card {display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto 1fr; align-content: start; gap: .8rem; min-width: 0; padding-top: 1rem; border-top: 1px solid var(--gold-line); scroll-margin-block-start: 1rem}
.master-card:target {border-color: var(--gold-bright)}
.master-id {display: grid; grid-template-columns: minmax(0,.65fr) minmax(0,1fr); align-items: center; gap: clamp(.9rem, 1.8vw, 1.6rem)}
.master-id img {width: 100%; aspect-ratio: 4/5; object-fit: cover; border: 1px solid #4c3b2d}
.master-id h2, .master-id h3 {font-size: clamp(2rem, 3.15vw, 3rem); letter-spacing: -.023em; line-height: 1.05}
.signature {margin-top: .32rem; color: var(--gold); font: italic 500 clamp(1.45rem, 2.3vw, 2rem)/1.13 var(--serif)}
.credential {color: var(--dim); margin-top: .6rem; font-size: .825rem; line-height: 1.45}
.master-card > p {color: var(--muted); max-width: 55ch}
.master-card > .linebtn {align-self: start}
.master-action {align-self: start; margin-top: .1rem}
.master-action .actions {margin-top: 0}
.master-action .note {margin-top: .6rem}
.master-action .profile-social {margin-top: .14rem; font-size: .83rem; font-weight: 500}
@supports (grid-template-rows: subgrid) {
  .master-grid {row-gap: .9rem}
  .master-card {grid-row: span 3; grid-template-rows: subgrid; row-gap: .9rem}
}
.sub-hero {padding-block: clamp(2.25rem, 4.8vw, 4.6rem)}
.sub-hero h1 {margin-bottom: 1rem}
.hair-hero {padding-block: clamp(1.75rem, 3vw, 3rem) clamp(1.25rem, 2vw, 2rem)}
.hair-hero h1 {font-size: clamp(2.75rem, 5.6vw, 5.2rem)}
.hair-hero .lede {max-width: 64ch}
.rate-glance {margin-top: 1.05rem; color: var(--muted); font-size: .95rem}
.rate-glance strong {color: #efdab1; font-weight: 600; white-space: nowrap}
.jump-nav {display: flex; flex-wrap: wrap; gap: .15rem 1.45rem; margin-top: .45rem}
.jump-nav a {min-height: 44px; display: inline-flex; align-items: center; font-size: .9rem; font-weight: 550}
.profile-section {padding: 0 0 var(--pad)}
.feature-grid {display: grid; align-items: center; gap: clamp(1.6rem, 5vw, 5rem); grid-template-columns: minmax(0,1fr) minmax(0,1fr)}
.feature-photo {aspect-ratio: 4/3}
.editorial-grid {display: grid; grid-template-columns: minmax(0,.83fr) minmax(0,1.17fr); align-items: start; gap: clamp(1.7rem, 6vw, 6.2rem)}
.editorial-lead > p:not(.eyebrow) {margin-top: 1rem; max-width: 52ch; color: var(--muted)}
.editorial-lead > p.note {color: var(--dim)}
.price-list {display: grid; gap: 1.8rem}
.price-group {border-top: 1px solid var(--gold-line); padding-top: .95rem}
.price-group h3 {display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; column-gap: 1rem; row-gap: .26rem; margin-bottom: .7rem}
.price-group h3 span {font: 600 .96rem/1.4 var(--sans); color: var(--gold-bright); letter-spacing: 0; white-space: nowrap}
.price-group > p {color: var(--muted); max-width: 62ch}
.price-group p + p {margin-top: .7rem}
.tariffs {margin: .7rem 0 0}
.tariffs > div {display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--rule); padding: .75rem 0}
.tariffs dt {font-weight: 600; line-height: 1.45}
.tariffs small {display: block; margin-top: .2rem; font-weight: 400}
.tariffs dd {font-variant-numeric: tabular-nums; color: #efcf92; font-weight: 600; white-space: nowrap}
.number-list {padding: 0; list-style: none; counter-reset: atelier-steps}
.number-list li {display: grid; grid-template-columns: 2.6rem minmax(0,1fr); gap: .75rem .9rem; border-top: 1px solid var(--gold-line); padding: 1rem 0; counter-increment: atelier-steps}
.number-list li::before {content: counter(atelier-steps,decimal-leading-zero); color: var(--gold); font: italic 500 1.65rem/1.1 var(--serif)}
.number-list h3 {margin-bottom: .38rem}
.number-list p {color: var(--muted); max-width: 61ch}
.number-list + .actions + .note {margin-top: .72rem}
.atelier-plaetze {display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); gap: clamp(1.4rem, 3vw, 3rem)}
.atelier-platz {min-width: 0}
.atelier-ansicht {margin-bottom: 1rem}
.atelier-ansicht-stuhl {aspect-ratio: 1}
.atelier-ansicht-stuhl img {object-position: 50% 56%}
.atelier-ansicht-tattoo {aspect-ratio: 4/3}
.reading h3 {margin-bottom: .6rem}
.reading > p + h3, .reading > a + h3 {margin-top: 1.85rem; border-top: 1px solid var(--rule); padding-top: 1.2rem}
.reading p {color: var(--muted); max-width: 62ch}
.reading > p + p {margin-top: .65rem}
.invitation {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2.5rem}
.invitation p:not(.eyebrow) {color: var(--muted); margin-top: .5rem}
.invitation .actions {margin: 0}
.contact-grid {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(1.8rem, 5vw, 5rem)}
.contact-pane {border-top: 1px solid var(--gold-line); padding-top: 1.15rem; min-width: 0}
.contact-pane h2 {font-size: clamp(2.08rem, 3.8vw, 3.4rem); margin-bottom: 1rem}
.contact-pane p:not(.eyebrow), .contact-pane address {color: var(--muted); margin-top: .8rem}
address {font-style: normal}
.contact-links, .link-list {padding: 0; list-style: none}
.contact-links li {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem 1.5rem; border-bottom: 1px solid var(--rule)}
.contact-links li > span {color: var(--dim); font-size: .825rem; letter-spacing: .04em}
.contact-links a, .link-list a {display: inline-flex; align-items: center; gap: .4em; min-height: 44px; overflow-wrap: anywhere}
.site-footer {border-top: 1px solid var(--rule); color: var(--dim); padding-block: 1.75rem 2.25rem; font-size: .88rem; background: #11100f}
.footer-inner {display: flex; align-items: start; flex-wrap: wrap; justify-content: space-between; gap: 1.15rem 2.5rem}
.site-footer .wordmark {display: inline-block; margin-bottom: .35rem}
.site-footer nav, .site-footer ul {display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.2rem}
.site-footer nav a, .site-footer li a {min-height: 44px; display: inline-flex; align-items: center; color: #e4cfa5}
.text-page {padding-block: var(--pad); min-height: 60vh}
.text-page h1 {margin-bottom: 1rem}
.text-page h2 {font-size: clamp(2rem, 3.5vw, 2.9rem); margin-block: 1.9rem .6rem}
.text-page h3 {font-size: clamp(1.65rem, 2.3vw, 2.05rem); margin-block: 1.3rem .4rem}
.text-page h1, .text-page h2, .text-page h3 {hyphens: auto; overflow-wrap: anywhere}
.text-page > p, .text-page > ul, .text-page > ol, .text-page > address, .text-page section p, .text-page section ul, .text-page section ol {max-width: var(--measure); color: var(--muted)}
.text-page p + p, .text-page p + ul, .text-page p + ol, .text-page ul + p, .text-page address + p {margin-top: .72rem}
.text-page li + li {margin-top: .27rem}
.text-page a {overflow-wrap: anywhere}
.text-page .eyebrow {color: var(--gold)}
.flow-grid, .card-grid {display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,19rem),1fr)); gap: 1.15rem}
.card, .panel {min-width: 0; padding: clamp(1rem, 2.3vw, 1.7rem); background: var(--raised); border: 1px solid var(--rule)}
.card > h2:first-child, .card > h3:first-child, .panel > h2:first-child, .panel > h3:first-child {margin-top: 0}
.panel h2 + p, .card h2 + p, .panel h3 + p, .card h3 + p {margin-top: .5rem}
.panel p + p, .card p + p {margin-top: .7rem}
.notice, .callout {background: var(--well); border-inline-start: 3px solid var(--gold); padding: .8rem 1rem; max-width: var(--measure)}
.form-row, .form-field {display: grid; gap: .35rem; min-width: 0}
.form-row > label, .form-field > label {font-weight: 600}
button {touch-action: manipulation}
@media (max-width: 62rem) {
  .header-inner {flex-wrap: wrap; gap: .2rem 1rem}
  .primary-nav {order: 3; flex-basis: 100%; justify-content: flex-start; gap: .05rem clamp(.7rem, 2.5vw, 1.8rem)}
  .header-cta {margin-inline-start: auto}
  .master-id {grid-template-columns: minmax(5rem,.58fr) minmax(0,1fr); gap: .8rem}
  .master-id h2,.master-id h3 {font-size: clamp(1.75rem, 3.3vw, 2.3rem)}
  .master-id .signature {font-size: clamp(1.35rem, 2.4vw, 1.7rem)}
}
@media (max-width: 46rem) {
  :root {--gutter: clamp(1rem, 4.2vw, 2rem)}
  .header-inner {padding-block: .62rem .25rem}
  .wordmark {font-size: 1.62rem}
  .text-page h1 {font-size: clamp(2.42rem, 8.6vw, 4rem)}
  .header-cta {padding: .48rem .75rem; font-size: .83rem; min-height: 44px}
  .primary-nav {column-gap: clamp(.7rem,3.45vw,1.15rem)}
  .primary-nav a,.primary-nav li a {font-size: .83rem}
  .feature-grid,.editorial-grid,.contact-grid {grid-template-columns: minmax(0,1fr)}
  .hero-inner {min-height: 29rem; align-items: end; padding-block: 7.5rem 3.6rem}
  .hero h1.hero-word {font-size: clamp(3.5rem, 12.6vw, 5.4rem)}
  .hero-photo img {
    width: 100%; object-position: left center;
    mask-image: linear-gradient(to right, transparent, #000d 28%, black 72%, transparent);
  }
  .hero-photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to right, rgb(16 15 14 / 58%), transparent 85%),
                linear-gradient(to bottom, transparent 8%, rgb(16 15 14 / 64%) 47%, rgb(16 15 14 / 96%) 90%);
  }
  .hero-photo figcaption {z-index: 1}
  .feature-photo {max-width: 38rem}
  .atelier-plaetze {grid-template-columns: minmax(0, 1fr); gap: 2.3rem}
  .hero-intro {margin-top: .9rem}
  .master-grid {grid-template-columns: minmax(0,1fr); gap: 1.65rem}
  .master-card {grid-row: auto; grid-template-rows: auto auto auto; row-gap: .65rem}
  .master-id {grid-template-columns: clamp(5.4rem, 25vw, 9rem) minmax(0, 1fr); gap: clamp(.8rem, 3.5vw, 1.4rem)}
  .master-id h2,.master-id h3 {font-size: clamp(1.85rem, 7.2vw, 2.65rem)}
  .master-id .signature {font-size: clamp(1.4rem, 5.2vw, 1.85rem)}
  .tariffs > div {gap: .7rem}
  .feature-grid {gap: 1.3rem}
  .invitation {display: grid; justify-content: start}
  .invitation > .btn {justify-self: start}
}
@media (max-width: 22.5rem) {
  .master-id {grid-template-columns: 5.3rem minmax(0,1fr)}
  .master-id h2,.master-id h3 {font-size: 1.68rem}
  .eyebrow,.kicker {letter-spacing: .095em}
  .primary-nav {column-gap: .66rem}
  .tariffs {font-size: .94rem}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior: auto !important}
  *,*::before,*::after {animation-duration: .01ms !important; transition-duration: .01ms !important}
}
@media (forced-colors:active) {
  .hero-photo img,.hero-photo::after {display: none}
  .hero h1.hero-word {background: none; color: CanvasText}
  .eyebrow::before,.kicker::before {background: CanvasText}
  .btn,.button,.header-cta,.card,.panel {border: 1px solid ButtonText}
  .primary-nav a[aria-current="page"] {border-bottom: 3px solid LinkText}
}
@media print {
  :root {color-scheme: light; --bg:white; --ink:black; --muted:#282828; --dim:#444; --raised:white; --gold:#42321c; --gold-bright:#42321c; --rule:#aaa}
  .site-header,.site-footer,.skip-link,.actions,.jump-nav {display:none}
  .shell {width:100%}
  .section,.sub-hero,.text-page {padding-block:1rem}
  .hero {background:white}
  .hero-photo {display:none}
  .hero-inner {min-height:0; padding-block:1rem}
  .hero h1.hero-word {background:none;color:black}
  .tariffs>div,.price-group,figure,.master-card,.contact-pane {break-inside:avoid}
}

.panel .note{margin-top:1rem}.panel h3+p{margin-top:.5rem}.sr-only{overflow:hidden}.font-licenses{margin-top:2rem;max-width:70ch}.font-licenses summary{color:#ead5ac;cursor:pointer;min-height:44px}.font-licenses pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:.86rem;margin:1rem 0;color:var(--muted)}

.review-note {
  padding: .65rem var(--gutter);
  background: var(--raised);
  color: var(--gold-bright);
  font-size: .85rem;
}