/* ============================================================
   Zuki's Hair & Beauty
   Palette sampled from the brand logo and rebrand artwork.
   Gold carries text only at #7A6538 on light / #C5B06C on dark —
   the bright gold is decorative and never sits under body copy.
   ============================================================ */

:root {
  --ink: #171314;
  --ink-2: #2A2223;
  --body: #4A4140;
  --muted: #5A4F4C;

  --cream: #F7F4EE;
  --cream-2: #F1ECE3;
  --white: #FFFFFF;

  --gold: #C5B06C;
  /* decorative + text on dark  */
  --gold-text: #7A6538;
  /* text on light — 5.1:1      */
  --gold-deep: #A18D58;
  --hair: rgba(122, 101, 56, .22);
  --hair-soft: rgba(122, 101, 56, .12);

  --serif: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Jost", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  --shell: 1240px;
  --gut: clamp(1.25rem, 5vw, 3.5rem);
  --sec: clamp(5rem, 11vw, 9.5rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ── reset-ish ─────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, .96rem + .18vw, 1.075rem);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: .005em;
}

p {
  margin: 0;
}

dl,
dd,
dt,
ol,
ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--cream);
  padding: .85rem 1.4rem;
}

.skip:focus {
  left: 0;
}

:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 3px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section {
  padding-block: var(--sec);
}

.band {
  background: var(--cream-2);
}

/* ── shared type ───────────────────────────────────────── */
.eyebrow {
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 1.4rem;
}

.eyebrow.light {
  color: var(--gold);
}

.sec-head {
  max-width: 46rem;
  margin-bottom: clamp(3rem, 6vw, 4.75rem);
}

.sec-head.center {
  margin-inline: auto;
  text-align: center;
}

.sec-head h2,
.statement,
.salon-copy h2 {
  font-size: clamp(2.1rem, 1.35rem + 3.1vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -.012em;
}

.sec-sub {
  margin-top: 1.35rem;
  color: var(--muted);
  max-width: 38rem;
  font-size: 1.05em;
}

.sec-head.center .sec-sub {
  margin-inline: auto;
}

.measure-wide {
  max-width: 62rem;
}

/* ── buttons ───────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05em 2.1em;
  border: 1px solid transparent;
  /* Bootstrap (gallery page only) also defines .btn; it loads first, but it
     sets a border-radius and line-height we never do. State them here so a
     square button stays square wherever Bootstrap is present. */
  border-radius: 0;
  line-height: 1.2;
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}

.btn-gold {
  background: var(--gold-deep);
  color: #fff;
}

.btn-gold:hover {
  background: var(--ink);
}

.btn-line {
  border-color: var(--hair);
  color: var(--ink);
}

.btn-line:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--cream);
}

.btn-ghost {
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
  padding: .75em 1.4em;
  letter-spacing: .13em;
}

.btn-ghost:hover {
  background: #fff;
  color: var(--ink);
}

.link-gold {
  display: inline-block;
  margin-top: 1.1rem;
  color: var(--gold-text);
  text-decoration: none;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--hair);
  padding-bottom: .35em;
  transition: border-color .4s var(--ease), color .4s var(--ease);
}

.link-gold:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* ── header ────────────────────────────────────────────── */
.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background .5s var(--ease), box-shadow .5s var(--ease);
}

.head-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-block: .9rem;
}

.brand img {
  width: clamp(58px, 7vw, 74px);
  height: auto;
  transition: filter .5s var(--ease);
}

.site-head:not(.stuck):not(.solid) .brand img {
  filter: brightness(0) invert(1);
}

.nav {
  margin-left: auto;
  display: flex;
  gap: clamp(1.1rem, 2.2vw, 2.2rem);
}

.nav a {
  font-size: .74rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  padding-block: .4em;
  position: relative;
  transition: color .4s var(--ease);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right .45s var(--ease);
}

.nav a:hover::after {
  right: 0;
}

.site-head.stuck,
.site-head.solid {
  background: var(--cream);
  box-shadow: 0 1px 0 var(--hair-soft);
}

.site-head.stuck .nav a,
.site-head.solid .nav a {
  color: var(--ink);
}

.site-head.stuck .btn-ghost,
.site-head.solid .btn-ghost {
  border-color: var(--hair);
  color: var(--ink);
}

.site-head.stuck .btn-ghost:hover,
.site-head.solid .btn-ghost:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.head-cta {
  flex: none;
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.burger span {
  display: block;
  height: 1px;
  width: 24px;
  margin: 6px auto;
  background: #fff;
  transition: transform .4s var(--ease), opacity .3s;
}

.site-head.stuck .burger span,
.site-head.solid .burger span {
  background: var(--ink);
}

.burger[aria-expanded="true"] span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.burger[aria-expanded="true"] span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

.mobile-nav {
  display: none;
}

/* ── hero ──────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}

.hero-img {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(15, 12, 12, .84) 0%, rgba(15, 12, 12, .54) 40%, rgba(15, 12, 12, .26) 66%, rgba(15, 12, 12, .58) 100%);
}

.hero-inner {
  padding-block: clamp(4.5rem, 11vh, 8rem);
  max-width: var(--shell);
}

.hero h1 {
  color: #fff;
  font-weight: 300;
  font-size: clamp(2.5rem, 1.15rem + 5.4vw, 5.15rem);
  line-height: 1.06;
  letter-spacing: -.018em;
  max-width: 16ch;
}

.hero h1 em {
  font-style: italic;
  color: var(--gold);
  font-weight: 300;
}

.hero-sub {
  margin-top: 1.75rem;
  max-width: 40ch;
  color: rgba(255, 255, 255, .86);
  font-size: 1.06em;
}

.hero-actions {
  margin-top: 2.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
}

.hero .btn-line {
  border-color: rgba(255, 255, 255, .42);
  color: #fff;
}

.hero .btn-line:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

/* ── welcome ───────────────────────────────────────────── */
.welcome .statement {
  max-width: 24ch;
}

.two-col {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  padding-top: clamp(2rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--hair-soft);
}

/* ── services ──────────────────────────────────────────── */
.svc {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.svc li {
  padding: clamp(2rem, 3.4vw, 2.9rem) clamp(0rem, 2.4vw, 2.4rem) clamp(2rem, 3.4vw, 2.9rem) 0;
  border-top: 1px solid var(--hair-soft);
}

.svc h3 {
  font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem);
  line-height: 1.25;
  margin-bottom: .7rem;
}

.svc p {
  color: var(--muted);
  max-width: 32ch;
}

/* ── packages ──────────────────────────────────────────── */
.pkg-layout {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width:62rem) {
  .pkg-layout {
    grid-template-columns: 1.35fr .85fr;
  }
}

.pkg li {
  padding-block: clamp(1.5rem, 2.6vw, 2rem);
  border-top: 1px solid var(--hair-soft);
}

.pkg li:last-child {
  border-bottom: 1px solid var(--hair-soft);
}

.pkg-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}

.pkg-top h2 {
  font-size: clamp(1.35rem, 1.15rem + .6vw, 1.7rem);
}

.pkg-price {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem);
  color: var(--gold-text);
  white-space: nowrap;
}

.pkg li p {
  margin-top: .6rem;
  color: var(--muted);
  font-size: .94em;
  max-width: 52ch;
}

.pkg-fig {
  margin: 0;
  position: sticky;
  top: 6.5rem;
}

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

/* ── gallery ───────────────────────────────────────────── */
.gallery {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.9rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.gallery figure {
  margin: 0;
}

.gallery picture {
  display: block;
  overflow: hidden;
}

.gallery img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}

.gallery figure:hover img {
  transform: scale(1.045);
}

.gallery figcaption {
  margin-top: .95rem;
  font-size: .73rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── prices ────────────────────────────────────────────── */
.price-grid {
  display: grid;
  gap: clamp(2.25rem, 4.5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.price-block h2 {
  font-size: 1.3rem;
  line-height: 1.2;
  padding-bottom: 1rem;
  margin-bottom: .35rem;
  border-bottom: 1px solid var(--hair);
  min-height: 4.15rem;
  /* keeps rules level across columns whether or not
                                      the heading carries a subtitle */
}

.price-block h2 span {
  display: block;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 300;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .5rem;
}

.price-block dl div {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding-block: .82rem;
  border-bottom: 1px solid var(--hair-soft);
}

.price-block dt {
  flex: 1 1 auto;
  color: var(--ink);
  font-weight: 300;
}

.price-block dt span {
  display: block;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.price-block dd {
  flex: none;
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--gold-text);
  font-weight: 600;
}

.notes {
  margin-top: clamp(2.75rem, 5vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid var(--hair);
  display: grid;
  gap: .7rem;
}

.notes li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--muted);
  font-size: .92em;
}

.notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 1px;
  background: var(--gold-deep);
}

/* ── offers ────────────────────────────────────────────── */
.dark {
  background: var(--ink);
  color: rgba(255, 255, 255, .78);
}

.dark h2,
.dark h3 {
  color: #fff;
}

.offers {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.offers article {
  text-align: center;
}

.offer-figure {
  font-family: var(--serif);
  font-size: clamp(3.6rem, 2rem + 5.5vw, 5.6rem);
  line-height: 1;
  color: var(--gold);
  font-weight: 300;
}

.offer-figure span {
  font-size: .42em;
  vertical-align: .75em;
  margin-left: .06em;
}

.offers h3 {
  font-size: 1.45rem;
  margin: 1.1rem 0 .9rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(197, 176, 108, .3);
  display: inline-block;
  padding-inline: 2rem;
}

.offers article>p:not(.offer-figure) {
  max-width: 34ch;
  margin-inline: auto;
}

.fine {
  margin-top: 1rem;
  font-size: .82em;
  color: rgba(255, 255, 255, .6);
}

/* ── salon ─────────────────────────────────────────────── */
.salon-layout {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width:62rem) {
  .salon-layout {
    grid-template-columns: .9fr 1.1fr;
  }
}

.salon-copy h2 {
  margin-bottom: 1.6rem;
  max-width: 18ch;
}

.salon-copy p {
  color: var(--muted);
  margin-bottom: 1.1rem;
  max-width: 44ch;
}

.salon-copy .btn {
  margin-top: 1.1rem;
}

.salon-grid {
  display: grid;
  gap: clamp(.75rem, 1.6vw, 1.25rem);
  grid-template-columns: 1fr 1fr;
}

.salon-grid figure {
  margin: 0;
}

.salon-grid .wide {
  grid-column: 1 / -1;
}

.salon-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.salon-grid .wide img {
  aspect-ratio: 16/10;
}

.salon-grid figure:not(.wide) img {
  aspect-ratio: 3/4;
}

/* ── visit ─────────────────────────────────────────────── */
.visit {
  display: grid;
  gap: clamp(2.25rem, 4.5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.visit-col h2 {
  font-size: .74rem;
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-text);
  padding-bottom: 1.1rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--hair);
}

address {
  font-style: normal;
  font-size: 1.15em;
  color: var(--ink);
  line-height: 1.85;
}

.tel {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  color: var(--ink);
  text-decoration: none;
  transition: color .4s var(--ease);
}

.tel:hover {
  color: var(--gold-text);
}

.muted {
  color: var(--muted);
  margin-top: .85rem;
  max-width: 30ch;
  font-size: .94em;
}

.hours div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .5rem;
}

.hours dt {
  color: var(--ink);
}

.hours dd {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.hours .closed {
  color: var(--gold-text);
  font-size: .82em;
  letter-spacing: .14em;
  text-transform: uppercase;
  align-self: center;
}

/* ── footer ────────────────────────────────────────────── */
.site-foot {
  background: var(--ink);
  color: rgba(255, 255, 255, .62);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  text-align: center;
}

.foot-logo {
  width: 96px;
  margin: 0 auto 2rem;
}

.foot-meta p {
  margin-bottom: .4rem;
}

.foot-meta a {
  color: var(--gold);
  text-decoration: none;
  transition: color .4s var(--ease);
}

.foot-meta a:hover {
  color: #fff;
}

.foot-fine {
  margin-top: 2.25rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .76rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .52);
}

/* ── reveal ────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .95s var(--ease), transform .95s var(--ease);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion:reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .gallery img {
    transition: none;
  }
}

/* ── mobile ────────────────────────────────────────────── */
@media (max-width:56rem) {

  .nav,
  .head-cta {
    display: none;
  }

  .burger {
    display: block;
  }

  .site-head.open {
    background: var(--cream);
  }

  .site-head.open .burger span {
    background: var(--ink);
  }

  .site-head.open .brand img {
    filter: none;
  }

  .mobile-nav {
    display: grid;
    background: var(--cream);
    padding: .5rem var(--gut) 2.25rem;
    gap: .35rem;
    border-bottom: 1px solid var(--hair-soft);
  }

  .mobile-nav[hidden] {
    display: none;
  }

  .mobile-nav a {
    padding-block: .85rem;
    text-decoration: none;
    color: var(--ink);
    font-size: .82rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--hair-soft);
  }

  .mobile-call {
    color: var(--gold-text) !important;
    border-bottom: 0 !important;
  }

  .hero {
    min-height: 92svh;
  }

  .pkg-fig {
    position: static;
  }

  .offers h3 {
    padding-inline: 1.25rem;
  }
}

/* ============================================================
   Multi-page additions
   ============================================================ */

/* current page in the nav */
.nav a[aria-current="page"] {
  color: var(--gold-text);
}

.site-head:not(.stuck):not(.solid) .nav a[aria-current="page"] {
  color: var(--gold);
}

.nav a[aria-current="page"]::after {
  right: 0;
  background: currentColor;
}

.mobile-nav a[aria-current="page"] {
  color: var(--gold-text);
}

/* interior page opener — sits below the now-opaque fixed header */
.page-head {
  padding-top: calc(clamp(7rem, 13vh, 9.5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--hair-soft);
}

.page-head h1 {
  font-size: clamp(2.4rem, 1.4rem + 3.8vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: -.016em;
  text-wrap: balance;
}

.page-sub {
  margin-top: 1.5rem;
  max-width: 52ch;
  color: var(--muted);
  font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem);
}

/* button row closing a section */
.sec-foot {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
}

.sec-foot.center {
  justify-content: center;
}

.btn-line.on-dark {
  border-color: rgba(197, 176, 108, .45);
  color: #fff;
}

.btn-line.on-dark:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

/* services, told at length */
.svc-detail {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  column-gap: clamp(2rem, 5vw, 4.5rem);
}

.svc-detail article {
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  border-top: 1px solid var(--hair-soft);
}

.svc-detail h2 {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.15rem);
  margin-bottom: 1rem;
}

.svc-detail p {
  color: var(--muted);
  max-width: 46ch;
}

.svc-inc {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--hair-soft);
  font-size: .85em;
  color: var(--gold-text) !important;
  letter-spacing: .02em;
}

/* a block of qualifying notes */
.notes-block {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--hair);
}

.notes-block h2 {
  font-size: 1.45rem;
  margin-bottom: 1.5rem;
}

.notes-block .notes {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* gallery at page scale */
.gallery-lg {
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.gallery-lg img {
  aspect-ratio: 3/4;
}

.gallery-more {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--hair);
  text-align: center;
}

.gallery-more p {
  color: var(--muted);
  margin-bottom: 1.6rem;
}

/* copy beside an image, used on home and visit */
.visit-strip {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width:62rem) {
  .visit-strip {
    grid-template-columns: 1fr 1fr;
  }
}

.visit-strip h2 {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
  line-height: 1.14;
  margin-bottom: 1.35rem;
}

.visit-strip .muted {
  max-width: 44ch;
  font-size: 1em;
}

.visit-strip figure {
  margin: 0;
}

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

/* footer navigation */
.foot-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem clamp(1.1rem, 2.5vw, 2rem);
  margin-bottom: 2rem;
}

.foot-nav a {
  font-size: .74rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, .72);
  transition: color .4s var(--ease);
}

.foot-nav a:hover,
.foot-nav a[aria-current="page"] {
  color: var(--gold);
}

@media (max-width:56rem) {
  .visit-strip img {
    aspect-ratio: 16/10;
  }

  .svc-detail {
    grid-template-columns: 1fr;
  }
}

/* The page opener already establishes its own breathing room, so the section
   that follows it does not need a second full measure of top padding. */
.page-head+.section {
  padding-top: clamp(3rem, 6vw, 4.5rem);
}

.salon-copy h2,
.visit-strip h2,
.statement {
  text-wrap: balance;
}

/* ============================================================
   Social links + vector logo
   ============================================================ */

/* the <symbol> sprite is markup only, never painted */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.social {
  display: flex;
  align-items: center;
  gap: .85rem;
}

.social a {
  display: inline-flex;
  color: inherit;
  transition: color .4s var(--ease), transform .4s var(--ease);
}

.social svg {
  width: 21px;
  height: 21px;
  display: block;
}

.social a:hover {
  transform: translateY(-1px);
}

/* header — sits left of the phone number, top right of the banner */
.head-social {
  margin-left: 1.35rem;
  color: #fff;
}

.head-social a:hover {
  color: var(--gold);
}

.site-head.stuck .head-social,
.site-head.solid .head-social {
  color: var(--ink);
}

.site-head.stuck .head-social a:hover,
.site-head.solid .head-social a:hover {
  color: var(--gold-text);
}

/* footer */
.foot-social {
  justify-content: center;
  color: var(--gold);
  margin: .35rem 0 1.15rem;
}

.foot-social a:hover {
  color: #fff;
}

.foot-handle {
  margin-top: 0;
}

/* mobile menu */
.mobile-social {
  padding-top: 1.15rem;
  color: var(--gold-text);
}

/* the logo is now a vector, so it stays crisp at any size */
.brand img {
  width: clamp(58px, 7vw, 74px);
}

.foot-logo {
  width: 96px;
}

@media (max-width:56rem) {
  .head-social {
    display: none;
  }

  /* moves into the mobile menu */
}

/* ============================================================
   Gallery lightbox (Bootstrap grid + modal, gallery page only)
   Bootstrap supplies the behaviour; everything visual is restated
   here so the component reads as part of this site, not as Bootstrap.
   ============================================================ */

.shot {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
}

.shot picture {
  display: block;
  overflow: hidden;
}

.shot img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}

.shot:hover img,
.shot:focus-visible img {
  transform: scale(1.045);
}

.shot-cap {
  display: block;
  margin-top: .95rem;
}

.shot-title {
  display: block;
  font-size: .73rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--ink);
}

.shot-sub {
  display: block;
  margin-top: .3rem;
  font-size: .9em;
  color: var(--muted);
}

/* --- modal --- */
.lightbox .modal-content {
  background: var(--ink);
  color: rgba(255, 255, 255, .8);
  border: 0;
  border-radius: 0;
}

.lightbox .modal-header {
  border: 0;
  border-bottom: 1px solid rgba(197, 176, 108, .25);
  padding: 1.15rem clamp(1.1rem, 3vw, 1.9rem);
}

.lightbox .modal-title {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: #fff;
}

.lightbox .btn-close {
  filter: invert(1) grayscale(1) brightness(1.6);
  opacity: .7;
  box-shadow: none;
}

.lightbox .btn-close:hover {
  opacity: 1;
}

.lightbox .modal-body {
  padding: clamp(1.1rem, 3vw, 1.9rem);
}

.lightbox .carousel-item img {
  width: 100%;
  max-height: min(68vh, 760px);
  object-fit: contain;
  margin-inline: auto;
}

.lb-cap {
  margin-top: 1.15rem;
  text-align: center;
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.lb-cap strong {
  color: var(--gold);
  font-weight: 400;
}

.lightbox .carousel-control-prev,
.lightbox .carousel-control-next {
  width: 12%;
  opacity: .55;
}

.lightbox .carousel-control-prev:hover,
.lightbox .carousel-control-next:hover {
  opacity: 1;
}

.lightbox .carousel-control-prev-icon,
.lightbox .carousel-control-next-icon {
  width: 1.6rem;
  height: 1.6rem;
}

@media (max-width:56rem) {

  .lightbox .carousel-control-prev,
  .lightbox .carousel-control-next {
    width: 18%;
  }
}

/* --- gallery: tiles are sets, not single photos --- */
.shot-media {
  display: block;
  position: relative;
  overflow: hidden;
}

.shot-count {
  position: absolute;
  right: 0;
  bottom: 0;
  background: rgba(23, 19, 20, .78);
  color: var(--gold);
  font-size: .64rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  padding: .5em .9em;
}

.shot-media picture {
  overflow: visible;
}

.lb-group[hidden] {
  display: none;
}

.lb-of {
  display: block;
  margin-top: .5rem;
  font-size: .94em;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .42);
}

/* ── a photo placed straight into a page pane ──────────────────────────
   A figure with no section around it spans the whole window, which is how
   the salon photo on the home page came out oversized. This gives it the
   same measure and gutters as every other band. */
.figure-band {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
  margin-block: clamp(2.5rem, 5vw, 4.5rem);
}

.figure-band img {
  width: 100%;
}

/* A price heading or row note is optional. Both spans are display:block with their own margin, so
   an empty one would add space where the original markup simply had no span at all. */
.price-block h2 span:empty,
.price-block dt span:empty {
  display: none;
}

/* ── visit map ─────────────────────────────────────────────
   The map sits in its own section under the visit strip, so the strip's
   bottom padding and the map's top padding stack into roughly twice the
   usual gap. Drop the top half — the two read as one block. The embed
   also ships with width="600" height="450" from the Maps snippet, which
   leaves it parked against the left edge of the shell, so size it here.
   Keyed off .visit-map, not the .text-content wrapper: that wrapper is
   emitted by every text module, so it also matches the reviews embed on
   the home page. */
.visit-map {
  padding-top: 0;
}

/* Match the heading to "When we are here" above it. Inside the strip that
   h2 is knocked down by .visit-strip h2; a .sec-head h2 out here would
   come back at the full section size and out-shout it. */
.visit-map .sec-head h2 {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
  line-height: 1.14;
  letter-spacing: .005em;
}

.visit-map iframe {
  display: block;
  width: 100%;
  height: clamp(20rem, 40vw, 28rem);
  border: 1px solid var(--hair);
}

@media (max-width:61.99rem) {
  .visit-map iframe {
    height: clamp(17rem, 58vw, 22rem);
  }
}

/* The Prose module ships wrapped in its own .shell, so inside the strip it
   picks up a second gutter and sits further in than the page heading above
   it. .visit-strip is only used on this page, so unwind it here. */
.visit-strip>.shell {
  padding-inline: 0;
  max-width: none;
}

/* ── hero clearance ────────────────────────────────────────
   .site-head is fixed, so it reserves no space in the flow. The hero is
   bottom-aligned, and on a short laptop viewport its content outgrows the
   top padding — the eyebrow then slides up under the logo. The old floor
   of 4.5rem (72px) was below the header's own 101px. Raise the floor past
   it and keep the same ceiling. Taller screens are unaffected: the block
   is bottom-aligned, so extra top padding there changes nothing. */
.hero-inner {
  padding-top: clamp(7.5rem, 11vh, 8rem);
}


.ctwDAt {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background-color: transparent !important;
  padding: 24px;
}

/* ── team ──────────────────────────────────────────────────
   Repeater item: portrait left, name and bio right, stacking to one
   column below 62rem — the same breakpoint .visit-strip uses. The three
   fields are siblings, so they are placed explicitly; left to flow, the
   bio would drop under the photo instead of under the name. Row spacing
   comes from margins, not gap, so the photo can sit further from the
   name than the name sits from the bio. */
.team-member {
  display: grid;
}

/* Cap the photo but never blow it up: max-width scales a large file down
   to 19rem and leaves anything smaller at its natural size. No forced
   aspect-ratio, so nothing is cropped or stretched either. */
.team-member__photo {
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
  max-width: 19rem;
}

.team-member__photo img {
  max-width: 100%;
  height: auto;
  display: block;
}

.team-member__name {
  font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem);
  line-height: 1.15;
  margin: 0 0 .9rem;
}

.team-member__bio {
  color: var(--body);
}

.team-member__bio p+p {
  margin-top: 1rem;
}

@media (min-width:62rem) {
  .team-member {
    /* auto: the column hugs the photo rather than stretching it. */
    grid-template-columns: auto 1fr;
    /* Row 1 hugs the name; the photo spans both rows, so without 1fr on
       row 2 its height is shared out and row 1 inflates, dropping the bio
       far below the name. */
    grid-template-rows: auto 1fr;
    column-gap: clamp(2.5rem, 5vw, 4rem);
  }

  .team-member__photo {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    margin-bottom: 0;
  }

  .team-member__name {
    grid-column: 2;
    grid-row: 1;
  }

  .team-member__bio {
    grid-column: 2;
    grid-row: 2;
  }
}

/* The repeater emits a rule after every item, including the last. */
.team-member+hr {
  border: 0;
  border-top: 1px solid var(--hair-soft);
  margin-block: clamp(2.5rem, 5vw, 4rem);
}

.team-member+hr:last-child {
  display: none;
}
/* ── prices: groups stacked down the page ─────────────────────────────────── */
/* The groups are placed one after another rather than in .price-grid, so the gap that grid would
   have given them is set here, from the same value. */
.price-block + .price-block { margin-top: clamp(2.25rem, 4.5vw, 4rem); }

/* The group name and the column header share a line, with the rule under both. The rule and its
   spacing move here from the h2 for that reason. */
.price-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .9rem;
  padding-bottom: 1rem;
  margin-bottom: .35rem;
  border-bottom: 1px solid var(--hair);
}

/* min-height kept rules level across columns. Stacked, it is only dead space. */
.price-head h2 {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
  min-height: 0;
}

.price-head .price-col {
  flex: none;
  margin: 0;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 300;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--muted);
}

/* A group that names no column should not reserve room for one. */
.price-head .price-col:empty { display: none; }