/* ==========================================================================
   Hua Yi Fang Pte Ltd — Hair Studio
   Bootstrap 5.3 theme layer. Load AFTER bootstrap.min.css.
   Palette: Tiffany blue #81D8D0 as the brand fill (dark ink text on it), darker #1D7C73 for buttons, deep teal #0A6F6B for text accents on white, cool near-black #1F2D2C.
   ========================================================================== */

:root {
  /* brand tokens — cool near-black, never pure #000 */
  --ink: #1f2d2c;
  --body: #3f4b4a;
  --body-soft: #5f6f6c;

  /* accent: Tiffany blue #81d8d0 is the brand fill (badges, tabs, banners).
     White text on it is only 1.7:1, so anything sitting on it uses --ink (8.6:1)
     or --tiffany-ink (6.3:1). --tiffany-deep is the text-safe teal on white (6.0:1). */
  --tiffany: #81d8d0;
  --tiffany-ink: #054845;
  /* buttons: a darker #81d8d0 (same hue) so white labels read at 5.0:1 */
  --tiffany-btn: #1d7c73;
  --tiffany-btn-hover: #13534d;
  /* buttons: soft pink fill with dark ink labels (#FFB3B8 is too light for white text) */
  --btn: #ffb3b8;
  --btn-hover: #ff9aa2;
  --btn-ink: #1f2d2c;
  --tiffany-deep: #0a6f6b;
  --tiffany-tint: rgba(10, 111, 107, 0.08);
  /* strong surfaces (price card, photo badges): deep teal, Tiffany reads 6.5:1 on it */
  --teal-dark: #0f4541;
  --teal-dark-2: #145a55;

  /* surfaces, lightest last */
  --mist: #e6f7f5;
  --shell: #f2fbfa;
  --cream: #f8fdfd;
  --paper: #ffffff;
  --line: rgba(10, 111, 107, 0.12);
  --line-strong: rgba(10, 111, 107, 0.28);
  --shadow-soft: rgba(10, 111, 107, 0.08);
  --shadow-mid: rgba(10, 111, 107, 0.14);

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  --header-h: 82px;
  --sp: clamp(2rem, 5vw, 4.5rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Bootstrap 5.3 variable overrides */
  --bs-primary: #81d8d0;
  --bs-primary-rgb: 129, 216, 208;
  --bs-body-color: #3f4b4a;
  --bs-body-color-rgb: 63, 75, 74;
  --bs-secondary-color: #5f6f6c;
  --bs-body-bg: #ffffff;
  --bs-body-font-family: var(--sans);
  --bs-body-font-weight: 300;
  --bs-body-line-height: 1.75;
  --bs-heading-color: #1f2d2c;
  --bs-link-color: #0a6f6b;
  --bs-link-color-rgb: 10, 111, 107;
  --bs-link-hover-color: #1d7c73;
  --bs-link-hover-color-rgb: 29, 124, 115;
  --bs-border-color: rgba(10, 111, 107, 0.12);
  --bs-emphasis-color: #1f2d2c;
  --bs-focus-ring-color: rgba(10, 111, 107, 0.25);
}

/* ---------------------------------------------------------------- base -- */

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  font-size: clamp(1.05rem, 1.01rem + 0.18vw, 1.125rem);
  overflow-x: hidden;
  padding-top: var(--header-h);
}

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  color: var(--ink);
}

h1, .h1 { font-size: clamp(2.5rem, 1.6rem + 3.9vw, 4.5rem); }
h2, .h2 { font-size: clamp(1.9rem, 1.3rem + 2.7vw, 3.15rem); }
h3, .h3 { font-size: clamp(1.25rem, 1.08rem + 0.85vw, 1.6rem); }
h4, .h4 { font-size: 1.1rem; }

a { text-decoration: none; }

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

::selection { background: rgba(129, 216, 208, 0.25); color: var(--ink); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------ helpers --- */

.section { padding-block: var(--sp); }
.section--tight { padding-block: clamp(1.75rem, 3.5vw, 3rem); }

.bg-shell { background: var(--shell); }
.bg-cream { background: var(--cream); }
.bg-blush { background: var(--mist); }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.79rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tiffany-deep);
  margin-bottom: 1rem;
}

.lede { font-size: 1.14rem; color: var(--body-soft); }
.measure { max-width: 20ch; }
.measure-wide { max-width: 60ch; }

.rule {
  width: 64px;
  height: 2px;
  border: 0;
  opacity: 1;
  background: linear-gradient(90deg, var(--tiffany) 0%, var(--tiffany-btn) 100%);
  margin: 1.5rem 0;
}
.rule-center { margin-inline: auto; }

.serif-em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--tiffany-deep);
}

.textlink {
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tiffany-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.textlink::after {
  content: "\2192";
  transition: transform 0.3s var(--ease);
}
a:hover .textlink::after,
.textlink:hover::after { transform: translateX(5px); }

/* ------------------------------------------------------------ buttons --- */

.btn {
  --bs-btn-border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.95rem 2rem;
  border-width: 1px;
  border-radius: 999px;
  transition: all 0.35s var(--ease);
}

.btn-brand {
  background: var(--btn);
  border-color: var(--btn);
  color: var(--btn-ink);
}
.btn-brand:hover,
.btn-brand:focus-visible,
.btn-brand:active {
  background: var(--btn-hover);
  border-color: var(--btn-hover);
  color: var(--btn-ink);
}

.btn-brand-outline {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--tiffany-deep);
}
.btn-brand-outline:hover,
.btn-brand-outline:focus-visible,
.btn-brand-outline:active {
  background: var(--btn);
  border-color: var(--btn);
  color: var(--btn-ink);
}

.btn-gold {
  background: var(--btn);
  border-color: var(--btn);
  color: var(--btn-ink);
}
.btn-gold:hover,
.btn-gold:focus-visible,
.btn-gold:active {
  background: var(--btn-hover);
  border-color: var(--btn-hover);
  color: var(--btn-ink);
}

.btn-light-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}
.btn-light-outline:hover,
.btn-light-outline:focus-visible,
.btn-light-outline:active {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

.btn-sm-brand {
  padding: 0.65rem 1.4rem;
  font-size: 0.79rem;
}

/* ------------------------------------------------------------- header --- */

.site-header {
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  padding: 0;
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 30px var(--shadow-soft);
}

.site-header .navbar-brand { padding: 0; }
.site-header .navbar-brand img { height: 66px; width: auto; }

.site-header .btn-brand { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }

.site-header .btn-brand:hover { background: var(--btn-hover); border-color: var(--btn-hover); }



.navbar-toggler {
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler .toggler-bars { display: block; width: 18px; }
.navbar-toggler .toggler-bars span {
  display: block;
  height: 1px;
  background: var(--ink);
  margin: 4px 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.navbar-toggler[aria-expanded="true"] .toggler-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .toggler-bars span:nth-child(2) { opacity: 0; }
.navbar-toggler[aria-expanded="true"] .toggler-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.site-header .nav-link {
  font-size: 0.83rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--body);
  position: relative;
  padding: 0.6rem 0;
}
.site-header .nav-item + .nav-item { margin-left: clamp(1.25rem, 2.4vw, 2.25rem); }
.site-header .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.35rem;
  width: 0;
  height: 1px;
  background: var(--tiffany);
  transition: width 0.35s var(--ease);
}
.site-header .nav-link:hover,
.site-header .nav-link.active { color: var(--tiffany-deep); }
.site-header .nav-link:hover::after,
.site-header .nav-link.active::after { width: 100%; }

@media (max-width: 991.98px) {
  .site-header .navbar-collapse {
    background: var(--paper);
    border-top: 1px solid var(--line);
    box-shadow: 0 20px 40px var(--shadow-soft);
    padding: 1.25rem 1.5rem 2rem;
    margin-inline: -0.75rem;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .site-header .nav-item + .nav-item { margin-left: 0; }
  .site-header .nav-link { font-size: 1.01rem; padding: 0.7rem 0; }
  .site-header .nav-cta { margin-top: 1rem; }
}

/* --------------------------------------------------------- hero slider -- */
/* Inset full-bleed slider, after the reference layout: photo fills the frame,
   copy sits left over a light scrim, rails live in the outer gutters.        */

.hero {
  position: relative;
  background: var(--paper);
  padding-inline: var(--hero-gutter);
}

:root { --hero-gutter: 74px; }

.hero .carousel,
.hero .carousel-inner { height: 100%; }

.hero .carousel-item {
  position: relative;
  height: min(84vh, 780px);
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}
/* light scrim keeps the copy legible whatever the photo does */
.hero .carousel-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 88% 12%, rgba(129, 216, 208, 0.10) 0%, rgba(129, 216, 208, 0) 60%),
    linear-gradient(90deg,
      rgba(248, 253, 253, 0.95) 0%,
      rgba(248, 253, 253, 0.90) 30%,
      rgba(248, 253, 253, 0.58) 46%,
      rgba(248, 253, 253, 0.20) 64%,
      rgba(248, 253, 253, 0) 82%);
}

.hero__copy {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: var(--wrap, 1220px);
}

.hero__script {
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: clamp(1.8rem, 1.3rem + 1.7vw, 2.6rem);
  font-weight: 500;
  line-height: 1;
  color: var(--tiffany-deep);
  margin: 0 0 0.35rem;
}

.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(2.4rem, 1.1rem + 5.2vw, 5.5rem);
  line-height: 1.02;
  color: var(--ink);
  margin: 0 0 1.1rem;
  max-width: 12ch;
}

.hero__sub {
  font-size: clamp(0.98rem, 0.93rem + 0.3vw, 1.12rem);
  color: var(--body-soft);
  max-width: 38ch;
  margin: 0 0 1.9rem;
}

/* ---- rails in the gutters ---- */

.hero__rail,
.hero__appt {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  width: var(--hero-gutter);
}
.hero__rail--left { left: 0; }
.hero__appt { right: 0; text-decoration: none; }

.hero__rule {
  display: block;
  width: 1px;
  height: 54px;
  background: var(--line);
}

.hero__rail a {
  color: var(--body);
  font-size: 1rem;
  line-height: 1;
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.hero__rail a:hover { color: var(--tiffany-deep); transform: translateY(-2px); }

.hero__appt-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 0.89rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--body);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.hero__appt:hover .hero__appt-text { color: var(--tiffany-deep); }

/* ---- carousel chrome: square arrows at the frame edges ---- */

.hero .carousel-control-prev,
.hero .carousel-control-next {
  width: 62px;
  height: 88px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(2px);
  opacity: 1;
  z-index: 5;
  transition: background 0.3s var(--ease);
}
.hero .carousel-control-prev { left: 0; }
.hero .carousel-control-next { right: 0; left: auto; }
.hero .carousel-control-prev:hover,
.hero .carousel-control-next:hover { background: rgba(255, 255, 255, 0.9); }

.hero .carousel-control-prev-icon,
.hero .carousel-control-next-icon {
  width: 1.4rem;
  height: 1.4rem;
  filter: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23453f3a'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}
.hero .carousel-control-next-icon { transform: rotate(180deg); }

/* ---- square dots, bottom centre ---- */

.hero .carousel-indicators {
  left: 0;
  right: 0;
  /* clears the price card that overlaps the hero's lower edge */
  bottom: clamp(4.5rem, 6vw, 5.5rem);
  margin: 0;
  justify-content: center;
  gap: 0.55rem;
  z-index: 5;
}
.hero .carousel-indicators [data-bs-target] {
  width: 11px;
  height: 11px;
  border: 1px solid rgba(10, 111, 107, 0.45);
  background: rgba(255, 255, 255, 0.65);
  border-radius: 0;
  opacity: 1;
  margin: 0;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.hero .carousel-indicators .active {
  background: var(--tiffany);
  border-color: var(--tiffany-deep);
}

@media (max-width: 1199.98px) {
  :root { --hero-gutter: 52px; }
  .hero__title { max-width: 14ch; }
}

@media (max-width: 991.98px) {
  :root { --hero-gutter: 0px; }
  .hero { padding-inline: 0; }
  .hero__rail, .hero__appt { display: none; }
  .hero .carousel-item { height: auto; min-height: 74vh; }
  .hero .carousel-item::after {
    background: linear-gradient(180deg,
      rgba(248, 253, 253, 0.95) 0%,
      rgba(248, 253, 253, 0.90) 62%,
      rgba(248, 253, 253, 0.45) 100%);
  }
  .hero__bg { object-position: 65% center; }
  .hero__copy {
    padding-block: clamp(2.25rem, 6vw, 3.5rem);
    max-width: none;
  }
  .hero__title { max-width: 16ch; }
  .hero .carousel-control-prev,
  .hero .carousel-control-next { width: 44px; height: 68px; }
}

@media (max-width: 767.98px) {
  .hero .carousel-indicators { bottom: 2.5rem; }
}

@media (max-width: 575.98px) {
  .hero .carousel-control-prev,
  .hero .carousel-control-next { display: none; }
  .hero .carousel-item { min-height: 68vh; }
}

/* --------------------------------------------------------------- facts -- */

.facts {
  position: relative;
  z-index: 4;
  background: transparent;
  border: 0;
  /* lift the card so it straddles the hero's lower edge */
  margin-top: clamp(-3.5rem, -4vw, -2rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.facts__card {
  background: linear-gradient(135deg, #ffffff 0%, var(--shell) 45%, var(--mist) 100%);
  border: 1px solid var(--line);
  border-top: 3px solid var(--tiffany);
  border-radius: 4px;
  box-shadow: 0 30px 70px var(--shadow-mid);
  overflow: hidden;
}

.fact-link {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  height: 100%;
  padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.1rem, 1.8vw, 1.6rem);
  transition: background 0.4s var(--ease);
}
.fact-link:hover { background: rgba(129, 216, 208, 0.16); }

.fact-icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--tiffany);
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  color: var(--tiffany-deep);
  transition: all 0.4s var(--ease);
}
.fact-link:hover .fact-icon {
  background: var(--btn);
  border-color: var(--btn);
  color: var(--btn-ink);
  transform: translateY(-4px);
}

.fact-body { display: block; }

.fact-price {
  font-family: var(--serif);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  display: block;
}
.fact-price small {
  font-family: var(--sans);
  font-size: 0.73rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tiffany-deep);
  display: block;
  margin-bottom: 0.3rem;
}
.fact-name {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.81rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
}
.fact-note {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.88rem;
  color: var(--body-soft);
}
.fact-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.75rem;
  font-size: 0.89rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tiffany-deep);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.fact-cta i { transition: transform 0.3s var(--ease); }
.fact-link:hover .fact-cta { opacity: 1; transform: none; }
.fact-link:hover .fact-cta i { transform: translateX(4px); }

@media (max-width: 767.98px) {
  .facts { margin-top: -1.5rem; }
  .fact-cta { opacity: 1; transform: none; }
  .fact + .fact .fact-link { border-top: 1px solid var(--line); }
}
@media (min-width: 768px) {
  .fact + .fact { border-left: 1px solid var(--line); }
}

/* --------------------------------------------------------------- media -- */
.inside-studio {}
.media-frame { overflow: hidden; border-radius: 4px; }
.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.media-frame:hover img { transform: scale(1.04); }
.media-tall { aspect-ratio: 4 / 5; }
.media-wide { aspect-ratio: 5 / 4; }

/* --------------------------------------------------------------- stack -- */

.stack-item { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.stack-item:last-child { border-bottom: 1px solid var(--line); }
.stack-item h3 { margin-bottom: 0.35rem; }
.stack-item p { color: var(--body-soft); margin: 0; }

/* --------------------------------------------------------------- cards -- */

.service-card {
  display: block;
  height: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px rgba(10, 111, 107, 0.12);
}
.service-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.service-card:hover .service-card__media img { transform: scale(1.05); }
.service-card__tag {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-size: 0.89rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
}
.service-card__body { padding: 1.75rem 1.5rem 2rem; }
.service-card__body p { color: var(--body-soft); font-size: 1.03rem; }

/* -------------------------------------------------------------- quote --- */
/* The house promise: a light Tiffany wash with a glow behind the quote, the
   key phrase in teal italics, and the stats on a white card beside it. */

.feature {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  background: linear-gradient(120deg, var(--shell) 0%, var(--mist) 55%, #d3f1ed 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* soft Tiffany bloom behind the quote, a white one lifting the card side */
.feature::before,
.feature::after {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}
.feature::before {
  top: -45%;
  left: -8%;
  width: min(640px, 75%);
  background: radial-gradient(circle, rgba(129, 216, 208, 0.42) 0%, rgba(129, 216, 208, 0) 65%);
}
.feature::after {
  bottom: -55%;
  right: -6%;
  width: min(560px, 70%);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 65%);
}
.feature__inner { position: relative; z-index: 2; }

/* the quote glyph sits behind the text, so it adds no height */
.feature__quote-col { position: relative; }
.feature__quote {
  position: absolute;
  top: -5.25rem;
  left: -1.5rem;
  z-index: 0;
  font-family: var(--serif);
  font-size: 10rem;
  line-height: 1;
  color: var(--tiffany);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

.feature__eyebrow {
  position: relative;
  z-index: 1;
  margin-bottom: 0.9rem;
}

.feature__text {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.75rem, 1.15rem + 2.3vw, 3rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
  max-width: 19ch;
}
.feature__text em {
  font-style: italic;
  color: var(--tiffany-deep);
}

.feature__attrib {
  position: relative;
  z-index: 1;
  margin: 1.6rem 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
}
.feature__name {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--ink);
}
.feature__name::after {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--tiffany);
  vertical-align: middle;
  margin-left: 0.9rem;
}
.feature__role {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--tiffany);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--tiffany-deep);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.feature__role i { font-size: 0.95rem; }

/* stats on a white card beside the quote */
.feature__facts {
  list-style: none;
  margin: 0;
  padding: clamp(0.5rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--tiffany);
  border-radius: 6px;
  box-shadow: 0 26px 55px var(--shadow-soft);
}
.feature__facts li {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 0;
}
.feature__facts li + li { border-top: 1px solid var(--line); }
.feature__facts strong {
  flex: 0 0 auto;
  min-width: 3.2ch;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem);
  color: var(--tiffany-deep);
  line-height: 1;
}
.feature__facts span {
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--body-soft);
}
.feature__star {
  color: var(--tiffany);
  font-size: 0.85rem;
  margin-left: 0.3rem;
  vertical-align: 0.05em;
}

@media (max-width: 991.98px) {
  .feature__quote { font-size: 7rem; top: -3.75rem; left: -0.5rem; }
  .feature__text { max-width: none; }
}

/* ------------------------------------------------------------ gallery --- */

.instagram__handle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tiffany-deep);
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  transition: all 0.35s var(--ease);
}
.instagram__handle:hover {
  background: var(--tiffany);
  border-color: var(--tiffany);
  color: var(--ink);
}

.gallery-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
}
.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), filter 0.5s var(--ease);
}
.gallery-tile:hover img { transform: scale(1.08); filter: saturate(1.1); }

.gallery-tile__veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-size: 1.7rem;
  background: rgba(129, 216, 208, 0.72);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.gallery-tile__veil i {
  transform: scale(0.8) translateY(8px);
  transition: transform 0.4s var(--ease);
}
.gallery-tile:hover .gallery-tile__veil,
.gallery-tile:focus-visible .gallery-tile__veil { opacity: 1; }
.gallery-tile:hover .gallery-tile__veil i,
.gallery-tile:focus-visible .gallery-tile__veil i { transform: none; }

/* ------------------------------------------------------------ reviews --- */
/* Split testimonial: portrait of the speaker on the left, quote on the right,
   thumbnails below double as the slider control.                            */

.testimonials {
  background: #fff;
  overflow: hidden;
}

/* The column has no definite height of its own, so a percentage height on
   the image resolves to auto and it renders at full intrinsic size. Pin the
   wrapper instead and let the image fill it absolutely. */
.tm__photos {
  position: relative;
  height: 100%;
  /* These portraits are tight head-and-shoulders crops: the hair reaches the
     top edge and the chin sits at ~66%. A 5/12 column at 37.5vw holds a steady
     1.11:1 frame, which shows 72% of the image height -- enough for the whole
     face with the top pinned. */
  min-height: clamp(340px, 37.5vw, 860px);
}
.tm__photos .carousel-inner,
.tm__photos .carousel-item { height: 100%; }
.tm__photos .carousel-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* pinned to the top: the master's top edge is the source's top edge, so
     cover can never trim hair that the photograph itself still has. */
  object-position: center top;
}

.tm__panel {
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2.4rem) clamp(1.25rem, 3.5vw, 3.25rem);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* soft Tiffany bloom behind the copy */
.tm__panel::before {
  content: "";
  position: absolute;
  top: 10%;
  right: -6%;
  width: min(420px, 60%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 111, 107, 0.14) 0%, rgba(10, 111, 107, 0) 68%);
  pointer-events: none;
}
.tm__panel > * { position: relative; z-index: 1; }

.tm__heading { margin-bottom: clamp(0.9rem, 1.6vw, 1.15rem); }

.tm__quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.05rem, 0.92rem + 0.6vw, 1.35rem);
  line-height: 1.4;
  color: var(--body);
  margin: 0 0 1rem;
  max-width: 52ch;
}
.tm__name {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  color: var(--ink);
  margin: 0;
}
.tm__role {
  margin: 0.2rem 0 0;
  font-size: 0.77rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tiffany-deep);
}

/* ---- thumbnails act as the indicators ---- */

.tm__thumbs {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(1.1rem, 2vw, 1.5rem);
  flex-wrap: wrap;
}
.tm__thumb {
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  border-radius: 2px;
  overflow: hidden;
  opacity: 0.65;
  transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.tm__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm__thumb:hover { opacity: 1; transform: translateY(-2px); }
.tm__thumb.active {
  opacity: 1;
  border-color: var(--tiffany-deep);
  outline: 3px solid rgba(10, 111, 107, 0.22);
  outline-offset: 0;
}

.tm__next {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 2px;
  background: var(--btn);
  color: var(--btn-ink);
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.tm__next:hover { background: var(--btn-hover); transform: translateY(-2px); }

@media (max-width: 991.98px) {
  /* one column now, so the photo band spans the full width. Keep it tall
     enough that cover does not slice the top of anyone's head off. */
  /* full-width band, so 90vw keeps the same 1.11:1 frame as the desktop column */
  .tm__photos { min-height: clamp(360px, 90vw, 880px); }
  .tm__panel { padding-block: clamp(1.75rem, 6vw, 2.75rem); }
}

/* -------------------------------------------------------- price menus --- */

.menu-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.menu-nav a {
  font-size: 0.79rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--body);
  transition: all 0.3s var(--ease);
}
.menu-nav a:hover,
.menu-nav a.active {
  background: var(--btn);
  border-color: var(--btn);
  color: var(--btn-ink);
}

.menu + .menu { margin-top: clamp(3rem, 6vw, 4.5rem); }
.menu__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-strong);
  flex-wrap: wrap;
}
.menu__range {
  font-size: 0.81rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tiffany-deep);
}
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}
.menu__name {
  display: block;
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--ink);
}
.menu__desc { display: block; font-size: 0.97rem; color: var(--body-soft); }
.menu__dots {
  border-bottom: 1px dotted rgba(31, 45, 44, 0.22);
  align-self: center;
  min-width: 1.5rem;
}
.menu__price {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--tiffany-deep);
  white-space: nowrap;
}

.note {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  background: rgba(10, 111, 107, 0.08);
  border-left: 2px solid var(--tiffany);
  font-size: 1.01rem;
  color: var(--body-soft);
}

/* ---------------------------------------------------------------- form -- */

.form-label {
  font-size: 0.79rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.form-control,
.form-select {
  border-radius: 2px;
  border: 1px solid var(--line);
  background-color: var(--paper);
  padding: 0.85rem 1rem;
  font-weight: 300;
  font-size: 1rem;
  color: var(--body);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--tiffany-deep);
  box-shadow: 0 0 0 3px rgba(10, 111, 107, 0.14);
}
.form-control::placeholder { color: #758380; }
.invalid-feedback { font-size: 0.92rem; }
.was-validated .form-control:valid,
.was-validated .form-select:valid,
.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--line);
  background-image: none;
}
.was-validated .form-control:valid:focus,
.was-validated .form-select:valid:focus {
  border-color: var(--tiffany-deep);
  box-shadow: 0 0 0 3px rgba(10, 111, 107, 0.14);
}

.info-block { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.info-block:first-child { border-top: 0; padding-top: 0; }
.info-block h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.info-block p { color: var(--body-soft); margin: 0; }
.info-block a {
  color: var(--tiffany-deep);
  border-bottom: 1px solid var(--line-strong);
}
.info-block a:hover { color: var(--tiffany-deep); border-color: var(--tiffany-deep); }

.map { border: 1px solid var(--line); overflow: hidden; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------------------------------------------------------------- band -- */

/* Photo shown clean, no overlay: a stylist cutting a client's hair. On desktop
   it sits on the right at the band's full height (never cropped top or bottom),
   fading into the light Tiffany wash where the booking card sits. On phones the
   photo stacks above the card. */
.band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--shell) 0%, var(--mist) 100%);
  color: var(--body);
  padding-block: clamp(2rem, 3.5vw, 3rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.band__bg {
  display: block;
  width: 100%;
  height: auto;
  margin: calc(clamp(2rem, 3.5vw, 3rem) * -1) 0 1.5rem;
}
.band__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3.5vw, 2.75rem);
  background: rgba(255, 255, 255, 0.96);
  border-top: 4px solid var(--tiffany);
  border-radius: 6px;
  box-shadow: 0 24px 55px rgba(8, 56, 54, 0.16);
}
@media (min-width: 992px) {
  .band__bg {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: 100%;
    max-width: 62%;
    margin: 0;
    object-fit: cover;
    object-position: 50% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  }
  .band__inner {
    max-width: 500px;
    margin-left: clamp(2rem, 5vw, 6rem);
    margin-right: auto;
  }
}
.band__inner h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.8rem); }
.band__eyebrow { color: var(--tiffany-deep); }
.band h2 { color: var(--ink); }
.band .lede { color: var(--body); }
.band__lede { max-width: 48ch; }
.band__note {
  font-size: 1.06rem;
  letter-spacing: 0.1em;
  color: var(--body);
}
.band__note i { color: var(--tiffany-deep); }
.band__note a { color: var(--tiffany-deep); white-space: nowrap; }
.band__note a:hover { color: var(--ink); }

/* -------------------------------------------------------------- footer -- */

.footer {
  position: relative;
  overflow: hidden;
  /*background: linear-gradient(180deg, var(--shell) 0%, var(--mist) 100%);*/
  color: var(--body);
  border-top: 1px solid var(--line);
  padding-top: clamp(2.5rem, 4.5vw, 3.75rem);
}
/* soft Tiffany bloom so the footer is not a flat slab */
.footer::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -6%;
  width: min(560px, 70%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(129, 216, 208, 0.16) 0%, rgba(129, 216, 208, 0) 68%);
  pointer-events: none;
}
.footer .container { position: relative; z-index: 2; }
.footer h4 {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.81rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.footer a { color: var(--body); }
.footer a:hover { color: var(--tiffany-deep); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer ul li { padding: 0.3rem 0; font-size: 1.01rem; }
.footer__mark {
  height: 78px;
  width: auto;
  margin-bottom: 1.25rem;
}
.footer__about { font-size: 1.01rem; max-width: 34ch; }
.footer__base {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
  padding-block: 1.75rem;
  color: var(--body-soft);
  font-size: 0.89rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
}

.social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--tiffany-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--ease);
}
.footer .social-link { color: var(--tiffany-deep); }
.social-link:hover {
  background: var(--tiffany);
  border-color: var(--tiffany);
  color: var(--ink);
}

/* ------------------------------------------------------------- banner --- */

.page-banner {
  background: linear-gradient(180deg, var(--mist) 0%, var(--paper) 100%);
  padding-block: clamp(2rem, 4vw, 3.25rem);
  position: relative;
  overflow: hidden;
}
.page-banner::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -8%;
  width: 40vw;
  height: 40vw;
  max-width: 520px;
  max-height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(10, 111, 107, 0.18), rgba(10, 111, 107, 0) 68%);
  pointer-events: none;
}
.page-banner .container { position: relative; z-index: 2; }
.page-banner p { color: var(--body-soft); }

.breadcrumb-brand {
  font-size: 0.79rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  --bs-breadcrumb-divider-color: var(--tiffany);
}
.breadcrumb-brand a { color: var(--body-soft); }
.breadcrumb-brand .active { color: var(--tiffany-deep); }

/* ------------------------------------------------------------- to top --- */

.to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 50;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--btn);
  color: var(--btn-ink);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.35s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--btn-hover); }

/* ------------------------------------------------------------- reveal --- */

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  }
  [data-reveal].is-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carousel-item { transition: none !important; }
}

/* ----------------------------------------------------------- showcase --- */
/* Three feature cards; the middle one carries its copy over the image.     */

.script {
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.3rem);
  font-weight: 500;
  line-height: 1;
  color: var(--tiffany-deep);
  margin: 0 0 0.15rem;
}

.showcase-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.showcase-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(10, 111, 107, 0.14);
  border-color: rgba(129, 216, 208, 0.45);
}

.showcase-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.showcase-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.showcase-card:hover .showcase-card__media img { transform: scale(1.06); }

.showcase-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 2rem 1.6rem 2.25rem;
}
.showcase-card__body h3 { margin-bottom: 0.9rem; }
.showcase-card__body p { color: var(--body-soft); font-size: 1.03rem; }
.showcase-card__body .btn { margin-top: auto; align-self: center; }

/* middle card: copy sits over the photo */
.showcase-card--feature { border: 0; min-height: 480px; }
.showcase-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.showcase-card--feature:hover .showcase-card__bg { transform: scale(1.05); }
.showcase-card__overlay {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  flex: 1;
  padding: clamp(5rem, 9vw, 7rem) 1.75rem 2.25rem;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.20) 42%,
    rgba(0, 0,0, 0.50) 58%,
    rgba(0, 0, 0, 0.70) 68%,
    rgba(0, 0, 0, 0.80) 100%);
}
.showcase-card__overlay .script { color: #fff; }
.showcase-card__overlay h3 { color: #fff; margin-bottom: 0.9rem; }
.showcase-card__overlay p { color: rgba(255, 255, 255, 0.92); font-size: 1.03rem; }
.showcase-card__overlay .btn { margin-top: 0.5rem; }

@media (max-width: 991.98px) {
  .showcase-card--feature { min-height: 420px; }
}

/* ------------------------------------------------------- link hovers --- */
/* One consistent hover treatment for every link on the site.              */

a, .btn, .social-link, .service-card, .showcase-card, .review, .gallery-tile {
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease),
              border-color 0.3s var(--ease), opacity 0.3s var(--ease),
              transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

/* underline that grows from the left, used in the footer and info blocks */
.footer ul a,
.footer__base a {
  position: relative;
  display: inline-block;
}
.footer ul a::after,
.footer__base a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--tiffany);
  transition: width 0.35s var(--ease);
}
.footer ul a:hover,
.footer__base a:hover { color: var(--tiffany-deep); }
.footer ul a:hover::after,
.footer__base a:hover::after { width: 100%; }

.social-link:hover { transform: translateY(-3px); }

.info-block a { transition: color 0.3s var(--ease), border-color 0.3s var(--ease); }

.breadcrumb-brand a:hover { color: var(--tiffany-deep); }

.menu-nav a:hover { transform: translateY(-2px); }

/* price rows highlight on hover so the eye tracks name -> price */
.menu__row { transition: background 0.3s var(--ease); }
.menu__row:hover { background: rgba(10, 111, 107, 0.05); }

/* buttons lift very slightly */
.btn-brand:hover,
.btn-gold:hover,
.btn-brand-outline:hover,
.btn-light-outline:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  a, .btn, .social-link, .service-card, .showcase-card, .review, .gallery-tile,
  .btn-brand:hover, .btn-gold:hover, .btn-brand-outline:hover, .btn-light-outline:hover,
  .social-link:hover, .menu-nav a:hover {
    transition: none;
    transform: none;
  }
}

/* ----------------------------------------------------- inside the studio -- */

.studio-media { position: relative; padding: 0 0 1.75rem 1.75rem; }
.studio-media__frame {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 5 / 4;
}
.studio-media__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.studio-media:hover .studio-media__frame img { transform: scale(1.04); }
/* offset Tiffany outline behind the photo */
.studio-media::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% - 1.75rem);
  height: calc(100% - 1.75rem);
  border: 1px solid var(--tiffany);
  border-radius: 4px;
  z-index: 1;
}

.studio-media__badge {
  position: absolute;
  right: clamp(-0.5rem, 1vw, 1rem);
  bottom: 2.5rem;
  z-index: 3;
  background: var(--teal-dark);
  color: rgba(255, 255, 255, 0.92);
  padding: 1rem 1.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 18px 36px rgba(10, 111, 107, 0.16);
}
.studio-media__badge,
.work-media__badge { border-left: 3px solid var(--tiffany); }
.studio-media__badge strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--tiffany);
}
.studio-media__badge span {
  font-size: 0.79rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

.studio-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}
.studio-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.4rem 0;
  color: var(--body);
  font-size: 1.04rem;
}
.studio-list i {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: rgba(10, 111, 107, 0.12);
  color: var(--tiffany-deep);
  display: grid;
  place-items: center;
  font-size: 0.89rem;
}

.studio-hours {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 4vw, 3rem);
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.studio-hours__label {
  display: block;
  font-size: 0.79rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tiffany-deep);
}
.studio-hours__value {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--ink);
}

@media (max-width: 575.98px) {
  .studio-media { padding: 0 0 1rem 1rem; }
  .studio-media::before { width: calc(100% - 1rem); height: calc(100% - 1rem); }
  .studio-media__badge { right: 0; bottom: 1.75rem; padding: 0.8rem 1rem; }
  .studio-media__badge strong { font-size: 1.8rem; }
}

/* --------------------------------------------------- inner page banners -- */

.page-banner__meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2.25rem);
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.page-banner__meta div { display: flex; align-items: center; gap: 0.6rem; }
.page-banner__meta i { color: var(--tiffany); font-size: 1.05rem; }
.page-banner__meta span {
  font-size: 0.79rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--body-soft);
}
.page-banner .media-frame {
  border-radius: 0;
  box-shadow: 0 26px 55px rgba(10, 111, 107, 0.16);
}

/* ------------------------------------------------ services / contact ----- */

/* price lists as raised cards */
.menu--card {
  --menu-pad: clamp(1.35rem, 2.5vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: var(--menu-pad);
  box-shadow: 0 12px 34px rgba(10, 111, 107, 0.05);
  transition: box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}

/* price card with a photo band across the top; the band bleeds past the
   card padding, and the card fills its grid cell so pairs line up */
.menu--photo {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.menu__media {
  margin: calc(var(--menu-pad) * -1) calc(var(--menu-pad) * -1) var(--menu-pad);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--mist);
}
.menu__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease);
}
/* portrait photos in the 16:9 frame: keep the face in view */
.menu__media img.menu__img--top { object-position: 50% 18%; }
.menu--photo:hover .menu__media img { transform: scale(1.05); }
.menu--photo .menu__list { margin-top: 0.25rem; }
.menu--card:hover {
  box-shadow: 0 22px 48px rgba(10, 111, 107, 0.1);
  border-color: rgba(129, 216, 208, 0.45);
}
.bg-shell .menu--card { background: var(--paper); }
.menu--card .menu__head { border-bottom-color: var(--tiffany); }
.menu--card .menu__row:last-child { border-bottom: 0; padding-bottom: 0; }

/* form and info panels */
.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.panel--form { border-top: 3px solid var(--tiffany); }
.panel--info {
  background: var(--mist);
  height: 100%;
}

/* quick-contact tiles at the top of the contact page */
.contact-tile {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  height: 100%;
  padding: 1.25rem 1.35rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.contact-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(10, 111, 107, 0.1);
  border-color: rgba(129, 216, 208, 0.45);
}
.contact-tile__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(10, 111, 107, 0.12);
  color: var(--tiffany-deep);
  font-size: 1.05rem;
}
.contact-tile h4 { margin-bottom: 0.25rem; }
.contact-tile p { font-size: 0.92rem; }

/* --------------------------------------------------------- faq accordion -- */
/* Bootstrap's default open state is blue (#cfe2ff / #0c63e4); this maps it
   onto the studio's Tiffany palette.                                          */

.accordion {
  --bs-accordion-color: var(--body);
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--line);
  --bs-accordion-border-radius: 4px;
  --bs-accordion-btn-color: var(--ink);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(10, 111, 107, 0.14);
  --bs-accordion-active-color: var(--tiffany-deep);
  --bs-accordion-active-bg: rgba(10, 111, 107, 0.07);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230a6f6b'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231d7c73'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  --bs-accordion-btn-icon-width: 0.95rem;
}

.accordion-button {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem);
  font-weight: 400;
  padding: 1.15rem 0.25rem;
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.accordion-button:hover { color: var(--tiffany-deep); }
.accordion-button:focus { border-color: var(--line); }
.accordion-button:not(.collapsed) {
  box-shadow: none;
  /* the tinted bar needs a little breathing room once it is filled */
  padding-inline: 1rem;
  border-radius: 4px 4px 0 0;
}
.accordion-button::after { transition: transform 0.3s var(--ease); }

.accordion-item { border-color: var(--line); }
.accordion-flush .accordion-item { border-left: 0; border-right: 0; }

.accordion-body {
  color: var(--body-soft);
  padding: 0.25rem 1rem 1.5rem;
}
.accordion-button:not(.collapsed) + .accordion-collapse .accordion-body,
.accordion-collapse.show .accordion-body {
  border-left: 2px solid var(--tiffany);
  margin-left: 1rem;
  padding-left: 1rem;
}

/* ------------------------------------------------- numbered services --- */
/* Hair / Eyelash / Nails as three numbered blocks: big photo on one side,
   headline price and four highlights on the other, full menu a click away. */

.svc + .svc { padding-top: 0; }
.svc.bg-shell + .svc { padding-top: var(--sp); }

.svc__num {
  font-family: var(--serif);
  font-size: clamp(3.5rem, 2.2rem + 5vw, 6rem);
  line-height: 0.85;
  letter-spacing: 0.02em;
  margin: 0 0 1.15rem;
  color: rgba(129, 216, 208, 0.45);
}
.svc__num span {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--tiffany-deep);
  vertical-align: 0.9em;
  margin-right: 0.5rem;
}

.svc__title { margin: 0 0 0.35rem; }

.svc__price {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1;
  color: var(--body-soft);
  margin: 0;
}
.svc__price strong { font-weight: 700; color: var(--tiffany-deep); }

.svc__lede { max-width: 46ch; }

.svc__list { margin: 1.5rem 0 0; }
.svc__list .menu__row { padding: 0.8rem 0; }
.svc__list .menu__row:last-child { border-bottom: 0; }
.svc__list .menu__name { font-size: 1.05rem; }
.svc__list .menu__price { font-size: 1.1rem; }

.svc__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.75rem; }

/* offset mist plate behind the photo, the same motif as .studio-media */
.svc__frame { position: relative; padding: 0 1.5rem 1.5rem 0; }
.svc__frame::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(100% - 1.5rem);
  height: calc(100% - 1.5rem);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 4px;
  z-index: 1;
}
.svc__media {
  position: relative;
  z-index: 2;
  box-shadow: 0 22px 48px var(--shadow-mid);
}

/* portrait photos in the 5:4 frame: bias the crop toward the lash line */
.svc__media img.svc__img--low { object-position: 50% 70%; }

@media (max-width: 575.98px) {
  .svc__frame { padding: 0 0.9rem 0.9rem 0; }
  .svc__frame::before { width: calc(100% - 0.9rem); height: calc(100% - 0.9rem); }
}

/* Chinese service name beside the English one in the price cards */
.menu__zh {
  font-family: var(--sans);
  font-size: 0.97rem;
  font-weight: 300;
  color: var(--body-soft);
  margin-left: 0.5rem;
  white-space: nowrap;
}
.menu__head h3 {
  margin: 0;
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
}

/* -------------------------------------------- home: service card refresh -- */
/* Numbered like the service blocks on the price page, so the two pages
   speak the same language. */

.service-card__media::after {
  content: attr(data-num);
  position: absolute;
  top: 0.7rem;
  left: 1.1rem;
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 16px rgba(12, 89, 86, 0.55);
  pointer-events: none;
}
.service-card__body { border-top: 3px solid rgba(129, 216, 208, 0.35); }
.service-card__body .service-card__price {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  color: var(--tiffany-deep);
  margin: 0 0 0.85rem;
}
.service-card__body .service-card__price small {
  font-family: var(--sans);
  font-size: 0.77rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--body-soft);
  margin-right: 0.4rem;
}

/* the showcase row is now three equal editorial cards rather than
   two white ones flanking a dark one */
.showcase .showcase-card--feature { min-height: 520px; }
.showcase .col-lg-4:nth-child(2) .showcase-card--feature { min-height: 560px; }

@media (min-width: 992px) {
  .showcase .row { align-items: center; }
}

/* -------------------------------------------------- home: gallery slider -- */
/* Four tiles visible on desktop, sliding on scroll-snap. The track is the
   scroller, so touch swipe and keyboard arrows work with no library. */

.gallery-slider__wrap {
  position: relative;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-inline: clamp(4.5rem, 7vw, 7rem);
}

.gallery-slider__track {
  display: flex;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  list-style: none;
  margin: 0;
  padding: 0.5rem 0 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.gallery-slider__track::-webkit-scrollbar { display: none; }
.gallery-slider__track:focus-visible { outline: 2px solid var(--tiffany-deep); outline-offset: 4px; }

.gallery-slider__item {
  flex: 0 0 calc((100% - 3 * clamp(0.75rem, 1.5vw, 1.25rem)) / 4);
  scroll-snap-align: start;
}

.gallery-slide {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 18px 40px var(--shadow-soft);
  transition: box-shadow 0.45s var(--ease), transform 0.45s var(--ease);
}
.gallery-slide:hover,
.gallery-slide:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px var(--shadow-mid);
}
.gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s var(--ease);
}
.gallery-slide figcaption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 2.75rem 1.1rem 1.05rem;
  font-size: 0.77rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.58) 55%, rgba(0, 0, 0, 0.8) 100%);
}
.gallery-slide:hover img,
.gallery-slide:focus-within img { transform: scale(1.07); }

/* click target that opens the lightbox; the icon fades in on hover */
.gallery-slide__zoom {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.15rem;
  background: rgba(12, 89, 86, 0);
  transition: background 0.4s var(--ease);
  cursor: zoom-in;
}
.gallery-slide__zoom i {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.gallery-slide__zoom:hover,
.gallery-slide__zoom:focus-visible { background: rgba(12, 89, 86, 0.32); }
.gallery-slide__zoom:hover i,
.gallery-slide__zoom:focus-visible i { opacity: 1; transform: scale(1); }

/* gentle editorial stagger so the row is not a flat strip */
@media (min-width: 992px) {
  .gallery-slider__item:nth-child(even) { margin-top: 2.25rem; }
  .gallery-slider__item:nth-child(even) .gallery-slide { aspect-ratio: 4 / 4.6; }
}

.gallery-slider__nav {
  position: absolute;
  top: calc(50% - 1.25rem);
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--btn);
  color: var(--btn-ink);
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(10, 111, 107, 0.32);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.gallery-slider__nav:hover { background: var(--btn-hover); transform: translateY(-50%) scale(1.06); }
.gallery-slider__nav[disabled] { opacity: 0.3; pointer-events: none; }
.gallery-slider__nav--prev { left: clamp(1rem, 2vw, 1.75rem); }
.gallery-slider__nav--next { right: clamp(1rem, 2vw, 1.75rem); }

@media (max-width: 991.98px) {
  .gallery-slider__item { flex-basis: calc((100% - clamp(0.75rem, 1.5vw, 1.25rem)) / 2); }
}
@media (max-width: 575.98px) {
  .gallery-slider__wrap { padding-inline: 1.25rem; }
  .gallery-slider__item { flex-basis: 78%; }
  .gallery-slider__nav { display: none; }
}

/* --------------------------------------------- home: our main work ------- */
/* Two overlapping frames plus a years badge on the image side, and the three
   service lines as icon rows with the entry price called out. */

.main-work { position: relative; overflow: hidden; }
.main-work::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -10%;
  width: min(620px, 70%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(129, 216, 208, 0.14) 0%, rgba(129, 216, 208, 0) 68%);
  pointer-events: none;
}
.main-work .container { position: relative; z-index: 2; }

.work-media {
  position: relative;
  padding: 0 0 4.5rem 3rem;
}
.work-media__main {
  aspect-ratio: 4 / 5;
  box-shadow: 0 30px 60px var(--shadow-mid);
}
.work-media__main img,
.work-media__inset img { width: 100%; height: 100%; object-fit: cover; display: block; }

.work-media__inset {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45%;
  aspect-ratio: 1;
  border: 6px solid var(--paper);
  box-shadow: 0 22px 44px var(--shadow-mid);
}

.work-media__badge {
  position: absolute;
  right: -0.75rem;
  bottom: 6rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.15rem;
  border-radius: 4px;
  background: var(--teal-dark);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 36px rgba(10, 111, 107, 0.28);
}
.work-media__badge strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--tiffany);
}
.work-media__badge span {
  font-size: 0.73rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.5;
}

.work-list { list-style: none; margin: 2rem 0 0; padding: 0; }
.work-list li {
  display: flex;
  gap: 1rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--line);
}
.work-list li:last-child { border-bottom: 1px solid var(--line); }

.work-list__icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  background: rgba(129, 216, 208, 0.12);
  color: var(--tiffany-deep);
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.work-list li:hover .work-list__icon { background: var(--tiffany); color: var(--ink); }

.work-list__body { display: block; }
.work-list__name {
  display: block;
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
.work-list__name em {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.73rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tiffany-deep);
  margin-left: 0.6rem;
  vertical-align: middle;
}
.work-list__note { display: block; font-size: 1.01rem; color: var(--body-soft); }

@media (max-width: 575.98px) {
  .work-media { padding: 0 0 3rem 1.5rem; }
  .work-media__inset { width: 52%; border-width: 4px; }
  .work-media__badge { right: 0; bottom: 4.5rem; }
}

/* ------------------------------------------- inner page banner: Tiffany -- */
/* Services and Contact open on a soft light-Tiffany wash that deepens toward
   the photo, with a Tiffany glow behind it. Dark text throughout. */

.page-banner {
  background: linear-gradient(120deg, var(--shell) 0%, var(--mist) 45%, #c6ede9 100%);
  border-bottom: 1px solid var(--line);
  color: var(--body);
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
}
.page-banner::before {
  background: radial-gradient(circle at 40% 40%, rgba(129, 216, 208, 0.55), rgba(129, 216, 208, 0) 68%);
}
.page-banner h1 { color: var(--ink); }
.page-banner p,
.page-banner .lede { color: var(--body); }
.page-banner .eyebrow { color: var(--tiffany-deep); }

.page-banner .breadcrumb-brand { --bs-breadcrumb-divider-color: rgba(5, 72, 69, 0.5); }
.page-banner .breadcrumb-brand a { color: var(--body); }
.page-banner .breadcrumb-brand a:hover { color: var(--ink); }
.page-banner .breadcrumb-brand .active { color: var(--tiffany-deep); }

.page-banner__meta { border-top-color: var(--line-strong); }
.page-banner__meta i { color: var(--tiffany-deep); }
.page-banner__meta span { color: var(--ink); }

.page-banner .media-frame {
  box-shadow: 0 26px 55px rgba(15, 69, 65, 0.18);
  border: 6px solid #fff;
}

/* -------------------------------------------------------------- lightbox -- */
/* Click a gallery tile to open it full-screen. No library: the overlay is a
   dialog, arrows and Escape work, and focus returns to the tile on close. */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 2rem);
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(31, 45, 44, 0.92);
  backdrop-filter: blur(6px);
  animation: lightbox-in 0.3s var(--ease);
}
.lightbox[hidden] { display: none; }

@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }

.lightbox__figure {
  margin: 0;
  max-width: min(1000px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.lightbox__figure img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
}
.lightbox__figure figcaption {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  text-align: center;
}

.lightbox__close,
.lightbox__nav {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover {
  background: var(--btn);
  border-color: var(--btn);
  color: var(--btn-ink);
  transform: scale(1.06);
}
.lightbox__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
}
.lightbox__count {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.7);
}

body.lightbox-open { overflow: hidden; }

@media (max-width: 575.98px) {
  .lightbox__nav { position: absolute; bottom: 3.5rem; }
  .lightbox__nav--prev { left: 1rem; }
  .lightbox__nav--next { right: 1rem; }
  .lightbox__figure img { max-height: 66vh; }
}

/* ------------------------------------------------------------ menu tabs -- */
/* The hair and nail price lists are tabbed: one card on show at a time.
   The strip wraps on wide screens and scrolls sideways on phones. */

.menu-tabs__strip {
  margin-bottom: clamp(1.75rem, 3.2vw, 2.75rem);
}
.menu-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.menu-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.62rem 1.15rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--body);
  font-family: var(--sans);
  font-size: 0.79rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
              color 0.3s var(--ease), transform 0.3s var(--ease);
}
.menu-tab__zh {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--body-soft);
  transition: color 0.3s var(--ease);
}
.menu-tab:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  color: var(--ink);
}
.menu-tab.active,
.menu-tab.active:hover {
  background: var(--btn);
  border-color: var(--btn);
  color: var(--btn-ink);
}
.menu-tab.active .menu-tab__zh { color: rgba(31, 45, 44, 0.75); }
.menu-tab:focus-visible {
  outline: 2px solid var(--tiffany-deep);
  outline-offset: 3px;
}

/* the card inside a pane runs photo-beside-list once there is room */
@media (min-width: 992px) {
  .menu--split {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: clamp(1.5rem, 3vw, 2.75rem);
  }
  .menu--split .menu__media {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: stretch;
    aspect-ratio: auto;
    margin: calc(var(--menu-pad) * -1) 0 calc(var(--menu-pad) * -1) calc(var(--menu-pad) * -1);
  }
  /* the tall column crops the sides of this photo; keep the flower in frame */
  #nail-extras .menu__media img { object-position: 15% 50%; }
  .menu--split .menu__head {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }
  .menu--split .menu__list {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
}

/* phones: the strip becomes a swipeable rail, the card stacks as before */
@media (max-width: 767.98px) {
  .menu-tabs__nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 0.4rem;
    margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
    padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  }
  .menu-tabs__nav::-webkit-scrollbar { display: none; }
  .menu-tab {
    scroll-snap-align: start;
    letter-spacing: 0.12em;
    padding: 0.55rem 1rem;
  }
  .menu-tab:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-tab { transition: none; }
  .menu-tab:hover { transform: none; }
}