@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');
:root{--ink:#201d1c;--green:#234538;--pink:#edddd7;--cream:#fbf7f4;--serif:'Playfair Display',Georgia,serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--cream);font:16px/1.55 'DM Sans',Arial,sans-serif}a{color:inherit}button,input,select,textarea{font:inherit}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #a16a57;outline-offset:3px}img{display:block;width:100%;object-fit:cover}.top,footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px max(5vw,20px);background:var(--ink);color:#fff}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--serif);white-space:nowrap}.brand img{width:42px;height:42px;border-radius:4px}.top nav{display:flex;align-items:center;gap:clamp(12px,3vw,36px)}.top nav a{text-decoration:none}.button{background:var(--green);border:1px solid transparent;border-radius:4px;color:white;text-decoration:none;display:inline-block;padding:10px 18px;font-weight:700;cursor:pointer}.button:hover{background:#315c4b}.top .button{background:var(--pink);color:var(--ink)}.hero{display:grid;grid-template-columns:1fr 1fr;background:var(--pink);min-height:min(670px,70vw)}.hero-copy{align-self:center;padding:clamp(30px,7vw,115px)}h1,h2{margin:0;font:500 clamp(2.4rem,5.3vw,5rem)/1.08 var(--serif)}h1{font-size:clamp(4rem,9vw,9rem);letter-spacing:-.065em}.hero-copy>p:not(.eyebrow){max-width:30ch;margin:24px 0}.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:.76rem;font-weight:700;margin:0 0 12px}.actions,.section-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.section-head{justify-content:space-between;margin-bottom:28px}.plain{text-underline-offset:5px;font-weight:600}.wrap{width:min(1220px,90%);margin:auto;padding:clamp(45px,8vw,105px) 0}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.grid button{padding:0;border:0;border-radius:5px;overflow:hidden;cursor:zoom-in;background:var(--pink)}.grid img{aspect-ratio:4/5;transition:transform .25s}.grid button:hover img{transform:scale(1.045)}.interiors img{aspect-ratio:5/4}.price-section{background:var(--pink)}.prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}.prices details{background:#fffaf8;border:1px solid #ded0c9;border-radius:5px;padding:14px 18px}.prices summary{cursor:pointer;font:600 1.3rem var(--serif)}.price-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid #e8ddd7}.price-row strong{white-space:nowrap}.prices h3{font-size:1rem;margin:16px 0 3px}.note{font-size:.88rem;margin:10px 0;color:#564944}.booking{background:var(--green);color:white}.booking-grid,.contact{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(24px,6vw,80px);align-items:center}.booking-grid>div p:not(.eyebrow){max-width:33ch}.booking form{color:var(--ink);background:var(--cream);padding:clamp(16px,3vw,32px);border-radius:6px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.wide{grid-column:1/-1}.form-grid label{display:grid;gap:4px;font-weight:600}.form-grid :is(input,select,textarea){width:100%;min-width:0;padding:9px;border:1px solid #a89d96;border-radius:4px;background:white;color:var(--ink)}.form-info{font-size:.9rem}.contact img{border-radius:5px}dialog{max-width:95vw;max-height:94vh;padding:0;border:0;background:#191817;color:white}dialog::backdrop{background:#000c}dialog img{max-height:88vh;width:auto;max-width:94vw;object-fit:contain}dialog button{position:absolute;right:8px;top:8px;border:0;border-radius:50%;width:40px;height:40px;color:white;background:#201d1c;cursor:pointer}
@media(max-width:760px){.top{flex-wrap:wrap}.top nav{width:100%;justify-content:space-between;font-size:.9rem}.top .button{padding:7px 9px}.hero,.booking-grid,.contact{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.prices{grid-template-columns:1fr}}@media(max-width:380px){.form-grid{grid-template-columns:1fr}.top nav{gap:5px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.grid img{transition:none}}

/* Salon identity and section layouts */
:root {
  --ink: #211e1c;
  --green: #21473a;
  --pink: #efd9d2;
  --cream: #fcf7f2;
}
.top {
  border-bottom: 1px solid #fff2;
}
.button {
  border-radius: 100px;
  padding: 12px 22px;
  transition: background-color .2s, box-shadow .2s;
}
.button:hover {
  box-shadow: 0 4px 14px #201d1c25;
}
.hero {
  grid-template-columns: 1.05fr .95fr;
  min-height: clamp(470px, 46vw, 650px);
  background: radial-gradient(ellipse at 10% 0%, #f9ede6, transparent 72%), var(--pink);
}
.hero-copy {
  padding: clamp(38px, 7vw, 110px);
}
.hero h1 {
  font-size: clamp(3.4rem, 6.8vw, 7.25rem);
  letter-spacing: -.055em;
  line-height: .99;
}
.hero h1 em {
  color: var(--green);
  font-weight: 500;
}
.hero .eyebrow {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 24px;
  color: var(--green);
}
.hero .eyebrow::before {
  content: '';
  width: 36px;
  height: 1px;
  background: currentColor;
}
.hero-logo {
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  padding: clamp(24px, 4vw, 60px);
  background: #292826;
  position: relative;
  isolation: isolate;
}
.hero-logo::before {
  content: '';
  position: absolute;
  inset: clamp(13px, 2.2vw, 34px);
  border: 1px solid #efd9d258;
  border-radius: 49% 49% 4px 4px;
  z-index: -1;
}
.hero-logo img {
  width: min(100%, 445px);
  height: auto;
  mix-blend-mode: lighten;
}
.section-head {
  padding-bottom: 18px;
  border-bottom: 1px solid #93847555;
}
#galeria .grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 16px);
}
#galeria .grid button:nth-child(4n + 1),
#galeria .grid button:nth-child(4n + 4) {
  grid-column: span 2;
}
#galeria .grid img {
  aspect-ratio: auto;
  height: clamp(170px, 29vw, 360px);
}
.grid button {
  border-radius: 9px;
}
.grid button:focus-visible {
  outline-offset: 4px;
}
.price-section {
  background: linear-gradient(140deg, #f7e9e3, var(--pink));
}
.prices details {
  border-radius: 12px;
  border-color: #c8a79b80;
  padding: 18px clamp(14px, 2vw, 24px);
}
.prices details[open] {
  box-shadow: 0 8px 24px #5f35220c;
}
.prices summary {
  color: var(--green);
}
.price-row strong {
  color: var(--green);
}
.interiors {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.interiors button:first-child {
  grid-column: span 2;
}
.interiors img {
  aspect-ratio: auto;
  height: clamp(146px, 24vw, 300px);
}
.booking {
  background: radial-gradient(ellipse at 0% 10%, #376552, transparent 72%), var(--green);
}
.booking form {
  border-radius: 16px;
  box-shadow: 0 18px 45px #132b2259;
}
.contact {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr);
}
.contact address {
  margin: 22px 0;
  font-style: normal;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
.contact h3 {
  margin-bottom: 6px;
}
.hours {
  max-width: 380px;
  margin: 0;
}
.hours div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 8px 0;
  border-bottom: 1px solid #c8a79b80;
}
.hours dd {
  margin: 0;
  font-weight: 600;
  color: var(--green);
}
.contact img {
  border-radius: 12px;
  box-shadow: 10px 10px var(--pink);
}
footer {
  flex-wrap: wrap;
  padding-block: 20px;
}
.billing {
  display: grid;
  gap: 4px;
  font-size: .88rem;
}
@media (min-width: 761px) {
  .hero-copy, .hero-logo {
    animation: enter .55s ease-out both;
  }
  .hero-logo {
    animation-delay: .1s;
  }
}
@keyframes enter {
  from { opacity: .55; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 760px) {
  .hero, .contact {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-logo {
    grid-row: 1;
    padding: 16px 30px;
  }
  .hero-logo img {
    width: min(66vw, 260px);
  }
  .hero-copy {
    padding: 32px 5vw 40px;
  }
  .hero .eyebrow {
    margin-bottom: 16px;
  }
  #galeria .grid, .interiors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #galeria .grid img {
    height: clamp(145px, 55vw, 290px);
  }
  #galeria .grid button:nth-child(4n + 1),
  #galeria .grid button:nth-child(4n + 4) {
    grid-column: auto;
  }
  #galeria .grid button:nth-child(3n + 1) {
    grid-column: span 2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy, .hero-logo { animation: none; }
  .button { transition: none; }
}

/* Display the original logo image and use the same ratio for every hairstyle. */
.hero-logo {
  background: #292826;
  animation: none;
}
.hero-logo::before {
  content: none;
}
.hero-logo img {
  width: min(100%, 445px);
  height: auto;
  mix-blend-mode: normal;
}
#galeria .grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
#galeria .grid button:nth-child(n) {
  grid-column: auto;
}
#galeria .grid img {
  aspect-ratio: 4 / 5;
  height: auto;
}
@media (max-width: 760px) {
  .hero-logo img { width: min(66vw, 260px); }
  #galeria .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}