:root {
  --bone: #F7F3ED;
  --blush: #D8A7A7;
  --charcoal: #292725;
  --taupe: #A89F96;
  --champagne: #B99A67;
  --white: #FFFFFF;
  --content: 72rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--bone); color: var(--charcoal); font: 1rem/1.7 Arial, Helvetica, sans-serif; }
a { color: inherit; text-underline-offset: .25em; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--champagne); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 20; top: 1rem; left: 1rem; padding: .7rem 1rem; background: var(--charcoal); color: var(--white); transform: translateY(-200%); }
.skip-link:focus { transform: none; }

h1, h2, h3, .brand { font-family: Georgia, "Times New Roman", serif; font-weight: 400; line-height: 1.08; }
h1 { margin: .6rem 0 1.5rem; font-size: clamp(3.2rem, 7vw, 6.8rem); letter-spacing: -.055em; }
h1 em { color: var(--blush); font-weight: 400; }
h2 { margin: .5rem 0 1.5rem; max-width: 16ch; font-size: clamp(2.4rem, 5vw, 4.5rem); letter-spacing: -.035em; }
h3 { font-size: 1.5rem; }
p { max-width: 42rem; }
.eyebrow { margin: 0; color: #746b64; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.intro { max-width: 34rem; margin-bottom: 2rem; font-size: clamp(1.05rem, 2vw, 1.3rem); }

.site-header { position: sticky; z-index: 10; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 5rem; padding: 0 max(1.25rem, calc((100% - var(--content)) / 2)); border-bottom: 1px solid rgba(41,39,37,.14); background: rgba(247,243,237,.96); }
.brand { font-size: 1.45rem; text-decoration: none; }
.site-header nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.site-header nav > a:not(.button) { font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-decoration: none; text-transform: uppercase; }
.site-header nav > a:not(.button):hover { text-decoration: underline; }
.nav-offers { position: relative; }
.nav-offers::before { position: absolute; top: -1.45rem; left: -1.5rem; width: 2.25rem; height: 2.1rem; background: url("images/menu-ribbon.png") center / contain no-repeat; content: ""; pointer-events: none; }
.nav-offers::after { position: absolute; top: -1.05rem; left: 2.5rem; color: var(--charcoal); content: "actie tot 40%"; font: 700 .5rem/1.4 Arial, sans-serif; letter-spacing: .07em; white-space: nowrap; text-transform: uppercase; transform: rotate(3deg); }
.menu-toggle { display: none; min-height: 44px; border: 0; background: transparent; color: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .75rem 1.5rem; border: 1px solid var(--blush); background: var(--blush); color: var(--charcoal); font-size: .75rem; font-weight: 700; letter-spacing: .13em; line-height: 1.2; text-decoration: none; text-transform: uppercase; transition: background .2s, color .2s; }
.button:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--white); }
.button-small { min-height: 44px; padding: .65rem 1rem; }

.hero, .section, footer { width: min(100% - 2.5rem, var(--content)); margin-inline: auto; }
.hero { display: grid; grid-template-columns: 1.05fr .8fr; align-items: center; min-height: calc(100vh - 5rem); padding: 5rem 0; gap: clamp(3rem, 8vw, 8rem); }
.hero-copy { position: relative; z-index: 1; }
.editorial-portrait { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 38rem; padding: 2.25rem; overflow: hidden; background: var(--blush); }
.editorial-portrait::before { content: ""; position: absolute; top: 8%; right: -20%; width: 90%; aspect-ratio: 1; border: 1px solid rgba(41,39,37,.25); border-radius: 50%; }
.editorial-portrait > span { position: absolute; top: 48%; left: 50%; color: rgba(247,243,237,.7); font: 8rem/.8 Georgia, serif; letter-spacing: -.12em; transform: translate(-50%, -50%) rotate(-90deg); }
.editorial-portrait p { position: relative; margin: 0; padding-top: 1rem; border-top: 1px solid rgba(41,39,37,.35); font: italic 1.2rem/1.4 Georgia, serif; }

.section { padding: clamp(5rem, 10vw, 9rem) 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; border-bottom: 1px solid var(--taupe); }
.treatment-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.treatment-grid article { min-height: 20rem; padding: 2.5rem clamp(1rem, 3vw, 2.5rem); border-right: 1px solid var(--taupe); }
.treatment-grid article:first-child { padding-left: 0; }
.treatment-grid article:last-child { border: 0; }
.treatment-grid article > span { color: var(--blush); font: 4rem Georgia, serif; }
.treatment-grid h3 { margin: 2.5rem 0 .75rem; }

.offers { padding-top: 3rem; }
.offers .section-heading h1 { margin: .5rem 0 1.5rem; max-width: 16ch; font-size: clamp(2.4rem, 5vw, 4.5rem); }
.offers-teaser { display: flex; align-items: center; justify-content: space-between; gap: 3rem; padding: clamp(3rem, 7vw, 5rem); background: var(--charcoal); color: var(--bone); }
.offers-teaser .eyebrow { color: var(--blush); }
.offers-teaser h2 { margin-bottom: .75rem; font-size: clamp(2rem, 4vw, 3.4rem); }
.offers-teaser p:last-child { margin-bottom: 0; }
.offers-teaser .button { flex: 0 0 auto; }
.offer-stack { display: grid; gap: 1.25rem; padding-top: 2.5rem; }
.promotion-card, .student-offer { position: relative; padding: clamp(2rem, 5vw, 4rem); overflow: hidden; }
.promotion-card { background: var(--charcoal); color: var(--bone); }
.promotion-card .eyebrow { color: var(--blush); }
.promotion-card h2 { max-width: 15ch; margin: .6rem 0 1rem; font-size: clamp(2.2rem, 5vw, 4.25rem); }
.promotion-card p:not(.eyebrow) { max-width: 39rem; font-size: 1.1rem; }
.promotion-ribbon { position: absolute; top: 2rem; right: -2.8rem; width: 13rem; padding: .75rem 2rem; background: var(--blush); color: var(--charcoal); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-align: center; text-transform: uppercase; transform: rotate(8deg); }
.promotion-countdown { display: inline-block; margin-top: 1.5rem; padding: .65rem .85rem; border: 1px solid rgba(216,167,167,.65); color: var(--blush); font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.student-offer { margin-left: clamp(0rem, 8vw, 7rem); border: 1px solid var(--taupe); background: var(--white); }
.student-offer h2 { margin: .5rem 0; color: var(--blush); font-size: clamp(2rem, 4vw, 3.25rem); }
.student-offer p:last-child { margin-bottom: 0; }

.salon-gallery { display: grid; grid-template-columns: .75fr 1.25fr; align-items: center; gap: clamp(3rem, 8vw, 7rem); }
.gallery-copy p:last-child { color: #645b54; font-size: 1.08rem; }
.gallery-rotator { position: relative; min-height: 34rem; overflow: hidden; border: 1px solid rgba(168,159,150,.55); background: #ded6ce; }
.gallery-rotator::after { position: absolute; z-index: 2; inset: 1.25rem; border: 1px solid rgba(247,243,237,.65); content: ""; pointer-events: none; }
.gallery-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: saturate(.78) contrast(.96); animation: gallery-fade 15s infinite; }
.gallery-image:nth-child(2) { animation-delay: 5s; }
.gallery-image:nth-child(3) { animation-delay: 10s; }
@keyframes gallery-fade {
  0%, 28% { opacity: .94; transform: scale(1); }
  34%, 94% { opacity: 0; transform: scale(1.025); }
  100% { opacity: .94; transform: scale(1); }
}

.prices { padding-top: 3rem; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem); padding-top: 2.5rem; }
.price-grid article { min-width: 0; }
.price-grid h3 { margin: 0 0 1.25rem; color: var(--blush); font-size: 2rem; }
.price-grid dl { margin: 0; }
.price-grid dl div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: .85rem 0; border-top: 1px solid rgba(168,159,150,.55); }
.price-grid dt { line-height: 1.45; }
.price-grid dd { margin: 0; white-space: nowrap; font-weight: 700; }

.about { display: grid; grid-template-columns: .75fr 1.25fr; align-items: center; gap: clamp(3rem, 10vw, 9rem); }
.about-mark { display: grid; min-height: 31rem; place-items: center; border: 1px solid var(--blush); background: var(--white); }
.about-mark span { color: var(--blush); font: 12rem/1 Georgia, serif; }
.about-copy > p:not(.eyebrow) { font-size: 1.08rem; }

.booking { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(3rem, 10vw, 8rem); width: 100%; max-width: none; padding-inline: max(1.25rem, calc((100% - var(--content)) / 2)); background: var(--charcoal); color: var(--bone); }
.booking .eyebrow { color: var(--blush); }
.booking .button { margin-top: 1rem; }
.policy { align-self: end; padding: 2rem 0 0 2rem; border-top: 1px solid var(--blush); border-left: 1px solid var(--blush); }
.policy h3 { margin-top: 0; }

.contact { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(3rem, 10vw, 8rem); }
address { margin: 2rem 0; font-style: normal; }
.contact-links { max-width: 38rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.contact-links li { display: grid; grid-template-columns: 7rem 1fr; padding: 1rem 0; border-top: 1px solid var(--taupe); }
.contact-links li > span { color: #746b64; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hours { align-self: end; padding: 2rem; border: 1px solid var(--blush); }
.hours h3 { margin-top: 0; }
.hours dl { margin: 0; }
.hours dl div { display: flex; justify-content: space-between; gap: 2rem; padding: .75rem 0; border-bottom: 1px solid rgba(168,159,150,.5); }
.hours dd { margin: 0; }

footer { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem 3rem; padding: 3rem 0 7rem; border-top: 1px solid var(--taupe); }
footer p { margin: 0; }
.socials { grid-column: 2; display: flex; flex-wrap: wrap; gap: 1.5rem; color: #746b64; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.socials span { text-decoration: line-through; }
.copyright { grid-column: 2; color: #746b64; font-size: .8rem; }
.mobile-booking { display: none; }

@media (max-width: 48rem) {
  body { padding-bottom: 5rem; }
  .site-header { min-height: 4.25rem; }
  .menu-toggle { display: inline-flex; align-items: center; gap: .7rem; }
  .menu-icon, .menu-icon::before { display: block; width: 1.4rem; height: 1px; background: currentColor; content: ""; }
  .menu-icon::before { transform: translateY(5px); }
  .site-header nav { position: absolute; top: 100%; right: 0; left: 0; display: none; align-items: stretch; padding: 1.25rem; border-bottom: 1px solid var(--taupe); background: var(--bone); }
  .site-header nav.is-open { display: grid; }
  .site-header nav a { display: flex; align-items: center; min-height: 44px; }
  .site-header nav .nav-offers { padding-left: 3.25rem; }
  .nav-offers::before { top: .1rem; left: 0; }
  .nav-offers::after { top: .7rem; right: .5rem; }
  .site-header nav .button { margin-top: .5rem; justify-content: center; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 4rem; }
  .editorial-portrait { min-height: 26rem; }
  .section-heading { display: block; }
  .treatment-grid { grid-template-columns: 1fr; }
  .treatment-grid article, .treatment-grid article:first-child { min-height: 0; padding: 2rem 0; border-right: 0; border-bottom: 1px solid var(--taupe); }
  .treatment-grid article:last-child { border-bottom: 0; }
  .treatment-grid h3 { margin: .5rem 0; }
  .offers-teaser { display: grid; padding-inline: 1.5rem; }
  .offers-teaser .button { justify-self: start; }
  .student-offer { margin-left: 0; }
  .promotion-card { padding-top: 5rem; }
  .promotion-ribbon { top: 1.25rem; right: -3.4rem; }
  .price-grid { grid-template-columns: 1fr; }
  .salon-gallery, .about, .booking, .contact { grid-template-columns: 1fr; }
  .gallery-rotator { min-height: 27rem; }
  .about-mark { min-height: 20rem; }
  .about-mark span { font-size: 8rem; }
  .policy { padding-left: 1.25rem; }
  .contact-links li { grid-template-columns: 1fr; gap: .25rem; }
  footer { grid-template-columns: 1fr; }
  .socials, .copyright { grid-column: 1; }
  .mobile-booking { position: fixed; z-index: 15; right: 1rem; bottom: 1rem; left: 1rem; display: flex; box-shadow: 0 2px 12px rgba(41,39,37,.18); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .gallery-image { animation: none; }
  .gallery-image:first-child { opacity: .94; }
  .gallery-image:not(:first-child) { display: none; }
}