* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:#f6f0e8;
  color:#292321;
  font:16px/1.6 system-ui,sans-serif
}

a {
  color:inherit
}

header,main section,footer {
  padding:clamp(24px,5vw,76px) max(5vw,calc((100vw - 1200px)/2))
}

header {
  padding-block:12px;
  background:white;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap
}

header img {
  width:150px;
  display:block
}

nav {
  display:flex;
  gap:clamp(8px,2vw,28px);
  flex-wrap:wrap
}

nav a {
  text-decoration:none;
  font-size:.9rem
}

a:hover {
  text-decoration:underline
}

select {
  font:inherit;
  background:white;
  padding:.25em;
  border:1px solid #ad9b91
}

h1,h2,h3 {
  font-family:Georgia,serif;
  font-weight:400;
  line-height:1.04;
  margin:0 0 .35em
}

h1 {
  font-size:clamp(3rem,7vw,6.7rem);
  letter-spacing:-.065em
}

h2 {
  font-size:clamp(2.4rem,5vw,4rem);
  letter-spacing:-.045em
}

h3 {
  font-size:1.55rem
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.73rem;
  font-weight:700;
  color:#73394a
}

.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(24px,6vw,90px)
}

img {
  max-width:100%
}

.photo {
  width:100%;
  height:clamp(310px,46vw,610px);
  object-fit:cover
}

.button {
  display:inline-block;
  background:#642d3e;
  color:white;
  border-radius:2px;
  padding:12px 21px;
  text-decoration:none;
  margin:.35em .35em .35em 0
}

.light {
  background:white;
  color:#642d3e
}

.cream {
  background:#f9f8f6
}

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

.gallery img {
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover
}

.prices article {
  padding:22px;
  background:#f8f7f4;
  border-top:2px solid #b49a73
}

.row {
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid #e2d7cb;
  font-size:.91rem
}

.row span:last-child {
  white-space:nowrap
}

.dark {
  background:#492630;
  color:white
}

.dark .eyebrow {
  color:#f1cfa8
}

footer {
  padding-block:20px;
  font-size:.84rem
}

p {
  max-width:58ch
}

a:focus-visible,select:focus-visible {
  outline:3px solid #bf904e;
  outline-offset:4px
}

@media(max-width:720px) {
  .split,.prices {
  grid-template-columns:1fr
}

.gallery {
  gap:6px
}

header nav {
  order:3;
  width:100%
}


}

#reviews {
  text-align: center;
  background: #ebe7e2;
}

.review-card {
  max-width: 650px;
  margin: 24px auto 12px;
  padding: clamp(12px, 3vw, 26px);
  background: #f9f8f6;
  border: 1px solid #dfcdbd;
  border-radius: 16px;
  box-shadow: 0 12px 32px #49263018;
}

.review-card {
  display: grid;
  overflow: hidden;
}

.review-slide {
  grid-area: 1 / 1;
  display: grid;
  align-content: center;
  gap: 16px;
  margin: 0;
  min-height: 170px;
}

.review-slide[aria-hidden="true"] {
  visibility: hidden;
}

.review-slide blockquote,
.review-slide p {
  margin: 0 auto;
  max-width: 44ch;
  font: clamp(1.1rem, 3vw, 1.45rem)/1.5 Georgia, serif;
}

.review-slide figcaption {
  color: #73394a;
  font-size: .9rem;
  font-weight: 600;
}

nav [aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.review-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.review-controls button {
  font: inherit;
  color: #642d3e;
  background: #f9f8f6;
  border: 1px solid #ad8790;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
}

.review-controls button:focus-visible {
  outline: 3px solid #bf904e;
  outline-offset: 3px;
}


body {
  background: #efede8;
  color: #382722;
}

header, footer {
  background: #f8f7f4;
}

header {
  border-bottom: 1px solid #ddc6af;
}

#home {
  background: radial-gradient(ellipse at 80% 20%, #eed6c2, transparent 65%), #f7ede1;
}

.photo {
  border: 6px solid #f8f7f4;
  border-radius: 44% 44% 18px 18px / 23% 23% 18px 18px;
  box-shadow: 0 15px 34px #542e2429;
}

.gallery img {
  border-radius: 14px;
}

.cream {
  background: #f8f7f4;
}

.prices article {
  background: #f8eee4;
  border-radius: 14px;
  border-top-color: #ae885b;
}

.button {
  border-radius: 999px;
}

#reviews {
  background: radial-gradient(ellipse at center, #fff3e7, #eeded2);
}

#book {
  background: #542c39;
}

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


@media (prefers-reduced-motion: no-preference) {
  #home > div {
    animation: welcome-in 550ms ease-out both;
  }

  #home > .photo {
    animation: welcome-in 650ms 100ms ease-out both;
  }

  .button, .review-controls button {
    transition: transform 180ms ease, box-shadow 180ms ease;
  }

  .button:hover, .review-controls button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px #38272226;
  }

  .gallery img {
    transition: transform 220ms ease, box-shadow 220ms ease;
  }

  .gallery img:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 18px #38272226;
  }

  .reveal-in {
    animation: welcome-in 550ms ease-out both;
  }
}

@keyframes welcome-in {
  from { opacity: .35; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}


#reviews {
  padding-inline: 0;
  overflow: hidden;
}

#reviews > :not(.review-card) {
  margin-inline: 5vw;
}

#reviews .review-card {
  max-width: none;
  margin: 24px 0 12px;
  padding: 4px 5vw;
  background: none;
  border: 0;
  box-shadow: none;
}

.review-slide {
  width: min(100%, 650px);
  justify-self: center;
  padding: clamp(18px, 4vw, 36px);
  background: #f9f8f6;
  border: 1px solid #dfcdbd;
  border-radius: 16px;
  box-shadow: 0 4px 10px #49263014;
}

#reviews .review-rating {
  max-width: none;
  margin-block: 12px 0;
  color: #642d3e;
}

.review-rating span:first-child {
  margin-right: 8px;
  color: #896327;
  letter-spacing: .12em;
}


/* Shared layout and typography */
header {
  gap: 12px 24px;
}

header > a {
  flex: 0 0 auto;
}

header nav {
  align-items: center;
  justify-content: center;
}

nav a {
  color: #51352f;
  font-weight: 550;
  padding-block: 8px;
}

nav a:hover, nav [aria-current="page"] {
  color: #73394a;
  text-decoration: underline;
  text-underline-offset: 5px;
}

header select {
  border: 1px solid #d8c4b2;
  border-radius: 8px;
  background: #f8f7f4;
  color: #492630;
  padding: 6px 8px;
}

#home h1, #about h1 {
  font-size: clamp(2.8rem, 5.5vw, 5.3rem);
  line-height: 1.06;
  letter-spacing: -.045em;
}

#home p:not(.eyebrow), #about p:not(.eyebrow) {
  color: #61483e;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 22px;
}

.hero-actions .button {
  margin: 0;
}

.button-secondary {
  background: transparent;
  color: #642d3e;
  border: 1px solid #ad8790;
}

#prices .prices {
  margin-top: 28px;
}

#prices article {
  border: 1px solid #e3d0bd;
  border-top: 2px solid #ae885b;
  padding: clamp(16px, 2vw, 24px);
}

#prices h3 {
  color: #642d3e;
  margin-bottom: 12px;
}

#prices .row span:last-child {
  color: #542c39;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

#prices .row:last-child, #book .row:last-child {
  border-bottom: 0;
}

#book > div:last-child {
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid #ffffff38;
  border-radius: 16px;
  background: #ffffff0c;
}

#book .row {
  border-color: #ffffff38;
}

footer {
  border-top: 1px solid #ddc6af;
  color: #61483e;
}

@media (max-width: 850px) {
  header nav {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    gap: 4px 16px;
  }
}

@media (max-width: 720px) {
  #about > div {
    grid-row: 1;
  }

  #home .photo, #about .photo {
    height: clamp(280px, 88vw, 440px);
  }
}


#prices h1, #book h1 {
  font-size: clamp(2.8rem, 5.5vw, 5.3rem);
  line-height: 1.06;
  letter-spacing: -.045em;
}

#book .eyebrow {
  color: #f1cfa8;
}

@media (max-width: 720px) {
  header img {
    width: 108px;
  }

  .split, .prices {
    grid-template-columns: minmax(0, 1fr);
  }
}

.brand-icon {
  width: 1.1em;
  height: 1.1em;
  margin-right: .45em;
  vertical-align: -.16em;
}

.whatsapp-icon { color: #117643; }
.instagram-icon { color: #a72e65; }
.footer-social { white-space: nowrap; }

#book.appointment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 84px);
  align-items: start;
  background: radial-gradient(ellipse at top left, #fff7ec, #f1e1d5);
}

#book.appointment-layout .eyebrow {
  color: #73394a;
}

.appointment-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 24px 0 14px;
}

.appointment-actions .button {
  margin: 0;
  font-weight: 600;
}

.appointment-whatsapp .whatsapp-icon {
  color: inherit;
}

.appointment-social a, .appointment-address a {
  color: #642d3e;
  text-underline-offset: 4px;
}

.appointment-address {
  border-top: 1px solid #d8c4b2;
  margin-top: 26px;
  padding-top: 16px;
}

#book .appointment-hours {
  padding: clamp(20px, 4vw, 36px);
  border-color: #ddc6af;
  border-top: 3px solid #ae885b;
  background: #f8f7f4;
  box-shadow: 0 12px 32px #49263012;
}

.appointment-hours h2 {
  color: #642d3e;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  margin-bottom: 16px;
}

#book .appointment-hours .row {
  border-color: #e2d7cb;
}

.appointment-hours .row span:last-child {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  #book.appointment-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Crop the white margins in the source logo while keeping the artwork intact. */
.site-brand {
  position: relative;
  width: 152px;
  height: 62px;
  overflow: hidden;
  mix-blend-mode: multiply;
}

.site-brand img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
}

.gallery figure {
  min-width: 0;
  margin: 0;
}

.gallery img {
  display: block;
}

.gallery figcaption {
  margin-top: 10px;
  color: #642d3e;
  font-weight: 550;
  font-size: .9rem;
}

@media (max-width: 720px) {
  .site-brand {
    width: 132px;
    height: 54px;
  }

  header nav a {
    padding-block: 6px;
  }

  .gallery {
    gap: 10px;
  }

  .gallery figcaption {
    font-size: .77rem;
    line-height: 1.35;
  }
}

#about {
  grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
  gap: clamp(28px, 6vw, 76px);
}

.about-portrait {
  width: min(100%, 440px);
  margin: 0;
  justify-self: center;
  padding: 7px;
  border: 1px solid #dbc2a8;
  border-radius: 22px;
  background: #f8f7f4;
  box-shadow: 0 16px 36px #542e2420;
}

.about-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: 15px;
}

@media (max-width: 720px) {
  #about {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-portrait {
    width: min(100%, 360px);
  }
}

#reviews {
  background: #eeeae4;
}

#reviews h2 {
  margin-bottom: 12px;
}

#reviews .review-rating {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 10px;
  font-size: .9rem;
}

.review-rating span:first-child {
  margin-right: 0;
}

#reviews .review-card {
  margin-top: 18px;
  margin-bottom: 8px;
}

.review-slide {
  border-radius: 14px;
  box-shadow: 0 2px 6px #49263010;
}

.review-controls {
  gap: 6px;
  margin-bottom: 10px;
}

.review-controls button[data-review-step] {
  width: 42px;
  height: 42px;
  padding: 0;
  font-size: 1.15rem;
}

#review-count {
  min-width: 4ch;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}

.review-controls #review-toggle {
  min-width: 100px;
  min-height: 42px;
  margin-left: 6px;
  background: transparent;
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.review-google {
  display: inline-block;
  color: #642d3e;
  font-size: .9rem;
  text-underline-offset: 4px;
}

/* Hairboutique at Sea — second concept */
:root {
  --wine: #482631;
  --cream: #efede8;
  --ink: #352825;
  --gold: #ae8556;
}

body {
  background: var(--cream);
  color: var(--ink);
}

header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-block: 12px;
  background: #f8f7f4;
}

header nav {
  gap: clamp(12px, 2vw, 26px);
}

header select {
  justify-self: end;
}

header nav a[href="appointment.html"] {
  color: var(--wine);
  border: 1px solid #cfaa9f;
  border-radius: 999px;
  padding: 8px 14px;
}

#home {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  grid-template-areas: "lead photo" "intro photo";
  gap: 0;
  padding: 0;
  background: var(--wine);
  color: #fff7ed;
}

#home .hero-copy, #home .hero-intro {
  padding-inline: clamp(28px, 6.5vw, 100px);
}

#home .hero-copy {
  grid-area: lead;
  padding-top: clamp(42px, 7vw, 110px);
}

#home .hero-intro {
  grid-area: intro;
  padding-bottom: clamp(42px, 7vw, 110px);
}

#home .hero-intro p:first-child {
  margin-top: 0;
}

#home .eyebrow, #home p:not(.eyebrow) {
  color: #e9ddd5;
}

#home h1 {
  font-size: clamp(3.1rem, 6.1vw, 6.8rem);
  letter-spacing: -.055em;
  text-wrap: balance;
}

#home .hero-actions {
  margin: 20px 0 26px;
}

#home .hero-media {
  grid-area: photo;
  position: relative;
  margin: 0;
  min-height: clamp(440px, 51vw, 690px);
  align-self: stretch;
  background: #bc9c88;
}

.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

.hero-media figcaption {
  position: absolute;
  right: 24px;
  bottom: 24px;
  color: var(--wine);
  background: #f8f7f4;
  padding: 8px 14px;
  border-radius: 999px;
  font: italic 1rem Georgia, serif;
}

#home .button {
  background: #eee9e2;
  color: var(--wine);
}

#home .button-secondary {
  background: transparent;
  color: #fff7ed;
  border-color: #d3ac9d;
}

#services {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  column-gap: clamp(22px, 6vw, 85px);
  align-items: start;
  background: #f8f7f4;
}

.services-lead h2 {
  max-width: 13ch;
  text-wrap: balance;
}

#services .gallery {
  gap: clamp(10px, 2vw, 22px);
  grid-column: 1 / -1;
  margin-top: 32px;
  align-items: start;
}

#services .gallery figure:nth-child(3n + 2) {
  margin-top: clamp(12px, 4vw, 56px);
}

#services .gallery img {
  border-radius: 100vw 100vw 10px 10px / 24% 24% 10px 10px;
  box-shadow: 0 3px 9px rgba(55, 35, 31, 0.10);
}

#services .hero-actions {
  grid-column: 1 / -1;
}

#reviews {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
  column-gap: clamp(20px, 5vw, 70px);
  text-align: left;
  background: #e5e0d9;
  padding-inline: max(5vw,calc((100vw - 1200px)/2));
}

#reviews > * {
  margin-inline: 0;
}

#reviews .review-heading {
  grid-area: 1 / 1 / span 3;
  align-self: center;
}

#reviews .review-rating {
  grid-area: 1 / 2;
  justify-content: flex-start;
  margin: 0 0 12px;
}

#reviews .review-card {
  grid-area: 2 / 2;
  margin: 0;
  padding: 0;
}

#reviews .review-slide {
  justify-self: stretch;
  width: 100%;
  text-align: left;
  background: #f8f7f4;
  border: 1px solid #d4b79e;
  border-radius: 3px 28px 3px 28px;
  box-shadow: none;
}

.review-slide blockquote, .review-slide p {
  margin: 0;
}

#reviews .review-controls {
  grid-area: 3 / 2;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  margin-top: 12px;
}

#reviews .review-google {
  grid-column: 2;
  justify-self: start;
}

#about {
  background: #ebe8e2;
  grid-template-areas: "portrait heading" "portrait story";
  row-gap: 0;
}

#about .about-portrait {
  grid-area: portrait;
  border-radius: 36% 36% 6px 6px / 21% 21% 6px 6px;
  overflow: hidden;
  padding: 0;
}

#about .about-portrait img {
  border-radius: 0;
}

#about .about-heading {
  grid-area: heading;
}

#about .about-story {
  grid-area: story;
  align-self: start;
}

#prices .prices {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#prices article {
  border-radius: 0 22px 0 0;
  background: #f8f7f4;
}

#book.appointment-layout {
  background: #e8e4de;
}

#book .appointment-hours {
  border-radius: 3px 26px 3px 26px;
}

@media (max-width: 850px) {
  header {
    grid-template-columns: 1fr 1fr;
  }

  header nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  #home, #services, #reviews, #prices .prices {
    grid-template-columns: minmax(0, 1fr);
  }

  #home {
    grid-template-areas: "lead" "photo" "intro";
  }

  #home .hero-media {
    min-height: clamp(280px, 74vw, 450px);
  }

  #home .hero-intro {
    padding-top: 28px;
  }

  #reviews .review-heading, #reviews .review-rating, #reviews .review-card,
  #reviews .review-controls, #reviews .review-google {
    grid-area: auto;
  }

  #about {
    grid-template-areas: "heading" "portrait" "story";
    row-gap: 20px;
  }
}


@media (max-width: 600px) {
  #services .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #services .gallery figure:nth-child(3n + 2) { margin-top: 0; }
}