/* ==========================================================================
   SISTERS Beauty Lounge – Campaign Landing (SOLE & UNVEILED)
   Scoped to .sbl-lp so it never leaks into the Elementor header/footer.
   Tokens taken from https://www.sistersbeautylounge.com/:
   Vinter display face, Founders Grotesk body faces, charcoal #343F4E for
   text and buttons only, soft peony #F8E1D9, warm sand #FAF7F5, rose blush
   #E3A18D / #E4A492. No dark section backgrounds.

   Spacing scale (all sections use the same rhythm):
     section padding   clamp(72px, 9vw, 128px)
     intro -> content  clamp(40px, 5vw, 72px)
     grid gaps         20 / 24 / 32px
     card padding      28px (phone) up to 40px
   Interactive pieces are progressive enhancements: every rule that hides or
   transforms content is gated behind .is-js / .is-enhanced, which the script
   adds, so the page is complete without JavaScript.
   ========================================================================== */

.sbl-lp {
  --sbl-charcoal: #343f4e;
  --sbl-charcoal-dark: #252e39;
  --sbl-ink: #404040;
  --sbl-muted: #666b74;
  --sbl-blush: #e3a18d;
  --sbl-rose: #e4a492;
  --sbl-blush-dark: #b4634f;
  --sbl-blush-soft: #f8e1d9;
  --sbl-blush-light: #faf0ec;
  --sbl-sand: #faf7f5;
  --sbl-line: #ebe5de;
  --sbl-white: #ffffff;
  --sbl-gold: #b79a5b;
  --sbl-gold-text: #84692f;
  --sbl-display: "Vinter", "Times New Roman", Georgia, serif;
  --sbl-body: "FoundersGrotesk-Regular", "Helvetica Neue", Arial, sans-serif;
  --sbl-body-light: "FoundersGrotesk-Light", "Helvetica Neue", Arial, sans-serif;
  --sbl-body-medium: "FoundersGrotesk-Medium", "Helvetica Neue", Arial, sans-serif;
  --sbl-body-semibold: "FoundersGrotesk-Semibold", "Helvetica Neue", Arial, sans-serif;
  --sbl-radius: 10px;
  --sbl-radius-lg: 20px;
  --sbl-gutter: clamp(20px, 3.4vw, 36px);
  --sbl-section: clamp(72px, 9vw, 128px);
  --sbl-intro-gap: clamp(40px, 5vw, 72px);
  --sbl-shadow: 0 10px 30px rgba(52, 63, 78, 0.07);
  --sbl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  font-family: var(--sbl-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--sbl-ink);
  background: var(--sbl-white);
  -webkit-font-smoothing: antialiased;
}

.sbl-lp *,
.sbl-lp *::before,
.sbl-lp *::after { box-sizing: border-box; }

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

/* Zero-specificity resets so component rules always win. */
.sbl-lp :where(a) { color: inherit; }
.sbl-lp :where(p) { margin: 0 0 1em; }
.sbl-lp :where(ul) { margin: 0; padding: 0; list-style: none; }

.sbl-lp [id] { scroll-margin-top: 96px; }

/* Wrapping: balance short blocks, and avoid one-word last lines in longer
   copy. The template also ties the last two words of each block together
   (sbl_lp_tie_last_words), which covers browsers without text-wrap support. */
.sbl-lp :is(h1, h2, h3, h4, summary, .sbl-eyebrow, .sbl-proof__label, .sbl-salon__address, .sbl-award-ribbon__list li, .sbl-btn, .sbl-link) { text-wrap: balance; }
.sbl-lp :is(p, li, dd) { text-wrap: pretty; }

.sbl-lp h1,
.sbl-lp h2,
.sbl-lp h3,
.sbl-lp h4 {
  font-family: var(--sbl-display);
  font-weight: 400;
  color: var(--sbl-charcoal);
  letter-spacing: -0.8px;
  line-height: 1.12;
  margin: 0 0 0.6em;
  text-transform: uppercase;
}

.sbl-lp h1 { font-size: clamp(36px, 5.2vw, 64px); line-height: 1.02; }
.sbl-lp h2 { font-size: clamp(28px, 3.4vw, 42px); }
.sbl-lp h3 { font-size: clamp(20px, 2vw, 24px); }
.sbl-lp h4 { font-size: 18px; letter-spacing: 0; }

.sbl-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--sbl-gutter);
}

/* Section backgrounds: white, warm sand, soft peony and the live site's rose
   blush band. No dark navy / slate blocks anywhere on the page. */
.sbl-section { padding: var(--sbl-section) 0; position: relative; }
.sbl-section--sand { background: var(--sbl-sand); }
.sbl-section--peony { background: var(--sbl-blush-soft); overflow: hidden; }
.sbl-section--rose { background: var(--sbl-rose); color: var(--sbl-charcoal); overflow: hidden; }
.sbl-section--rose .sbl-eyebrow { color: var(--sbl-charcoal); opacity: 0.8; }

.sbl-eyebrow {
  display: block;
  font-family: var(--sbl-body-semibold);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sbl-blush-dark);
  margin-bottom: 18px;
}

.sbl-lead {
  font-family: var(--sbl-body-light);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.6;
  max-width: 62ch;
}

/* Single-sentence leads that should sit on one line when there is room. */
@media (min-width: 1024px) {
  .sbl-lead--oneline { max-width: none; white-space: nowrap; }
}

.sbl-intro { max-width: 780px; margin-bottom: var(--sbl-intro-gap); }
@media (min-width: 1024px) {
  .sbl-intro:has(.sbl-lead--oneline) { max-width: none; }
}
.sbl-intro--center { margin-left: auto; margin-right: auto; text-align: center; }
.sbl-intro--center .sbl-lead { margin-left: auto; margin-right: auto; }

.sbl-screen-reader {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --- Buttons (Founders Grotesk Semibold, uppercase, 10px radius) -------- */
.sbl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 15px 34px 11px;
  border-radius: var(--sbl-radius);
  border: 2px solid var(--sbl-charcoal);
  background: var(--sbl-charcoal);
  color: var(--sbl-white);
  font-family: var(--sbl-body-semibold);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--sbl-ease), box-shadow 0.25s ease;
}

.sbl-btn:hover,
.sbl-btn:focus-visible {
  background: var(--sbl-charcoal-dark);
  border-color: var(--sbl-charcoal-dark);
  color: var(--sbl-white);
  transform: translateY(-2px);
}

.sbl-btn:focus-visible { outline: 3px solid var(--sbl-blush); outline-offset: 3px; }

/* Book Now: the live site's rose blush. Charcoal label keeps it AA-legible. */
.sbl-btn--book {
  background: var(--sbl-blush);
  border-color: var(--sbl-blush);
  color: var(--sbl-charcoal);
  box-shadow: 0 8px 20px rgba(227, 161, 141, 0.35);
}

.sbl-btn--book:hover,
.sbl-btn--book:focus-visible {
  background: var(--sbl-charcoal);
  border-color: var(--sbl-charcoal);
  color: var(--sbl-white);
  box-shadow: 0 10px 24px rgba(52, 63, 78, 0.25);
}

/* On the rose closing band the blush button would disappear, so it flips to charcoal. */
.sbl-section--rose .sbl-btn--book {
  background: var(--sbl-charcoal);
  border-color: var(--sbl-charcoal);
  color: var(--sbl-white);
  box-shadow: none;
}

.sbl-section--rose .sbl-btn--book:hover,
.sbl-section--rose .sbl-btn--book:focus-visible {
  background: var(--sbl-white);
  border-color: var(--sbl-white);
  color: var(--sbl-charcoal);
}

.sbl-btn--ghost {
  background: transparent;
  border-color: var(--sbl-charcoal);
  color: var(--sbl-charcoal);
}

.sbl-btn--ghost:hover,
.sbl-btn--ghost:focus-visible {
  background: var(--sbl-charcoal);
  border-color: var(--sbl-charcoal);
  color: var(--sbl-white);
}

.sbl-btn--sm { min-height: 46px; padding: 12px 22px 8px; font-size: 14px; }

.sbl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
}

.sbl-link {
  font-family: var(--sbl-body-semibold);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  color: var(--sbl-charcoal);
  transition: color 0.2s ease;
}

.sbl-link:hover,
.sbl-link:focus-visible { color: var(--sbl-blush-dark); }

/* --- Hero: arch-framed portrait with a soft blush glow ------------------ */
.sbl-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--sbl-white) 0%, var(--sbl-blush-light) 55%, var(--sbl-blush-soft) 100%);
  padding: clamp(28px, 5vw, 72px) 0 clamp(64px, 8vw, 112px);
}

.sbl-hero::before {
  content: "";
  position: absolute;
  width: min(760px, 90vw);
  aspect-ratio: 1;
  right: -12%;
  top: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 161, 141, 0.30) 0%, rgba(227, 161, 141, 0) 68%);
  pointer-events: none;
}

.sbl-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 56px);
  align-items: center;
}

.sbl-hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: 999px 999px var(--sbl-radius-lg) var(--sbl-radius-lg);
  overflow: hidden;
  background: var(--sbl-blush-soft);
  outline: 1px solid rgba(227, 161, 141, 0.75);
  outline-offset: 12px;
  box-shadow: var(--sbl-shadow);
}

.sbl-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  animation: sbl-settle 1.4s var(--sbl-ease) both;
}

.sbl-hero__content h1 { margin-bottom: 22px; }
.sbl-hero__content .sbl-lead { color: var(--sbl-ink); margin-bottom: 34px; }

.sbl-hero__meta {
  margin: 30px 0 0;
  font-family: var(--sbl-body-light);
  font-size: 15px;
  line-height: 1.7;
  color: var(--sbl-muted);
}

.sbl-hero__meta a { color: var(--sbl-charcoal); text-decoration: underline; text-underline-offset: 4px; }
.sbl-hero__meta a:hover,
.sbl-hero__meta a:focus-visible { color: var(--sbl-blush-dark); }

/* Official 2026 winner badge + exact titles, in the hero trust strip */
.sbl-award-ribbon {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 36px;
  padding-top: 30px;
  border-top: 1px solid rgba(52, 63, 78, 0.14);
}

.sbl-award-ribbon__badge { flex: 0 0 auto; width: 96px; height: auto; }

.sbl-award-ribbon__label {
  display: block;
  font-family: var(--sbl-body-semibold);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sbl-blush-dark);
  margin-bottom: 10px;
}

.sbl-award-ribbon__list {
  display: grid;
  gap: 6px;
  font-family: var(--sbl-body-medium);
  font-size: 15px;
  line-height: 1.4;
  color: var(--sbl-charcoal);
}

.sbl-award-ribbon__list li { position: relative; padding-left: 18px; }

.sbl-award-ribbon__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sbl-gold);
}

/* Phones: a shallower arch keeps the Book Now button near the top of the screen. */
@media (max-width: 559px) {
  .sbl-hero { padding-top: 20px; }
  .sbl-hero__media { aspect-ratio: 2 / 1; outline-offset: 8px; }
  .sbl-hero__grid { gap: 32px; }
}

@media (min-width: 900px) {
  .sbl-hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(48px, 6vw, 96px); }
  .sbl-hero__media { order: 2; aspect-ratio: 4 / 5; max-height: 680px; max-width: 500px; justify-self: center; }
  .sbl-award-ribbon__badge { width: 112px; }
}

/* --- Why SISTERS: proof tiles + service pillars ------------------------ */
.sbl-proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 clamp(48px, 6vw, 72px);
}

.sbl-proof li {
  position: relative;
  background: var(--sbl-white);
  border: 1px solid var(--sbl-line);
  border-radius: var(--sbl-radius-lg);
  padding: 32px 26px 28px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: transform 0.35s var(--sbl-ease), box-shadow 0.35s ease, border-color 0.35s ease;
}

.sbl-proof li::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 0;
  width: 36px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--sbl-blush);
}

.sbl-proof li:hover { transform: translateY(-4px); box-shadow: var(--sbl-shadow); border-color: var(--sbl-blush); }

.sbl-proof__value {
  display: block;
  font-family: var(--sbl-display);
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
  color: var(--sbl-charcoal);
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}

.sbl-proof__label { display: block; font-size: 15px; line-height: 1.5; color: var(--sbl-muted); }

.sbl-pillars-wrap { padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--sbl-line); }
.sbl-pillars__eyebrow { margin-bottom: 20px; }

.sbl-pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.sbl-pillars li { display: flex; }

.sbl-pillars a {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 18px 22px 15px;
  background: var(--sbl-white);
  border: 1px solid var(--sbl-line);
  border-radius: var(--sbl-radius);
  text-decoration: none;
  font-family: var(--sbl-body-semibold);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sbl-charcoal);
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s var(--sbl-ease);
}

.sbl-pillars a::after { content: "\2192"; font-family: Arial, sans-serif; color: var(--sbl-blush-dark); font-size: 16px; transition: transform 0.25s var(--sbl-ease); }
.sbl-pillars a:hover,
.sbl-pillars a:focus-visible { border-color: var(--sbl-blush); background: var(--sbl-blush-soft); transform: translateY(-2px); }
.sbl-pillars a:hover::after { transform: translateX(4px); }

/* Phones: stat tiles become full-width rows (number beside its label) so the
   labels have room to wrap into balanced lines instead of one word per line. */
@media (max-width: 559px) {
  .sbl-proof { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sbl-proof li { display: flex; align-items: center; gap: 22px; padding: 24px 24px 22px; }
  .sbl-proof__value { flex: 0 0 96px; margin: 0; }
  .sbl-proof__label { flex: 1 1 auto; }
}

/* Phones: tiles are too narrow for a two-line label, so keep each on one line. */
@media (max-width: 559px) {
  .sbl-pillars a { padding: 16px 14px 13px; font-size: 13px; letter-spacing: 0.06em; white-space: nowrap; justify-content: center; }
  .sbl-pillars a::after { display: none; }
  .sbl-pillars li:last-child { grid-column: 1 / -1; }
}

@media (min-width: 760px) {
  .sbl-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .sbl-pillars { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
}

/* --- Campaign banner image (SOLE) ------------------------------------- */
.sbl-banner {
  margin: 0 0 clamp(48px, 6vw, 80px);
  border-radius: var(--sbl-radius-lg);
  overflow: hidden;
  background: var(--sbl-sand);
  box-shadow: var(--sbl-shadow);
}

.sbl-banner img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; object-position: 50% 40%; }

/* --- SOLE lookbook: stacked cards without JS, tabbed stage with JS ------ */
.sbl-lookbook__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

@media (min-width: 720px) { .sbl-lookbook__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }

.sbl-look {
  display: flex;
  flex-direction: column;
  background: var(--sbl-white);
  border: 1px solid var(--sbl-line);
  border-radius: var(--sbl-radius-lg);
  overflow: hidden;
}

.sbl-look__media { position: relative; margin: 0; background: var(--sbl-sand); }
.sbl-look__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; }

.sbl-look__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 32px 30px 34px; }
.sbl-look__body h3 { margin-bottom: 8px; }

.sbl-look__num {
  display: block;
  font-family: var(--sbl-display);
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--sbl-blush-dark);
  margin-bottom: 14px;
}

.sbl-look__kicker { font-family: var(--sbl-body-medium); font-size: 16px; color: var(--sbl-blush-dark); margin-bottom: 16px; }
.sbl-look__text { font-size: 16.5px; }
.sbl-look__actions { margin-top: auto; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }

/* Enhanced: tab row + one look at a time */
.sbl-lookbook__bar {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: clamp(36px, 5vw, 64px);
  border-bottom: 1px solid var(--sbl-line);
}

.sbl-lookbook__tabs {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 8px clamp(20px, 4vw, 44px);
  overflow-x: auto;
  scrollbar-width: none;
}

.sbl-lookbook__tabs::-webkit-scrollbar { display: none; }

.sbl-lookbook__tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-height: 52px;
  padding: 14px 2px 12px;
  margin-bottom: -1px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--sbl-body-semibold);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sbl-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.sbl-lookbook__tab span:first-child { font-family: var(--sbl-display); font-size: 13px; letter-spacing: 0.1em; color: var(--sbl-blush-dark); }
.sbl-lookbook__tab:hover { color: var(--sbl-charcoal); }
.sbl-lookbook__tab[aria-selected="true"] { color: var(--sbl-charcoal); border-bottom-color: var(--sbl-blush); }
.sbl-lookbook__tab:focus-visible { outline: 3px solid var(--sbl-blush); outline-offset: 2px; border-radius: 4px; }

.is-enhanced .sbl-lookbook__list { display: block; }

.is-enhanced .sbl-look {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.is-enhanced .sbl-look[hidden] { display: none; }
.is-enhanced .sbl-look:not([hidden]) { animation: sbl-fade 0.6s var(--sbl-ease) both; }

.is-enhanced .sbl-look__media {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  border-radius: 999px 999px var(--sbl-radius-lg) var(--sbl-radius-lg);
  overflow: hidden;
  box-shadow: var(--sbl-shadow);
  outline: 1px solid rgba(227, 161, 141, 0.75);
  outline-offset: 12px;
}

.is-enhanced .sbl-look__body { padding: 0; }
.is-enhanced .sbl-look__body h3 { font-size: clamp(32px, 4.4vw, 54px); margin-bottom: 12px; }

.is-enhanced .sbl-look__num {
  font-size: clamp(64px, 9vw, 112px);
  letter-spacing: -2px;
  line-height: 0.9;
  color: var(--sbl-blush);
  opacity: 0.55;
  margin-bottom: 8px;
}

.is-enhanced .sbl-look__kicker { font-size: 18px; }
.is-enhanced .sbl-look__text { font-size: 17.5px; max-width: 56ch; }
.is-enhanced .sbl-look__actions { padding-top: 28px; }

.sbl-lookbook__step { display: none; }
.is-enhanced .sbl-lookbook__step { display: inline-flex; flex: 0 0 auto; gap: 10px; padding-bottom: 10px; }

.sbl-lookbook__arrow {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--sbl-charcoal);
  background: transparent;
  color: var(--sbl-charcoal);
  font-family: Arial, sans-serif;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s var(--sbl-ease);
}

.sbl-lookbook__arrow:hover,
.sbl-lookbook__arrow:focus-visible { background: var(--sbl-charcoal); color: var(--sbl-white); transform: scale(1.06); }
.sbl-lookbook__arrow:focus-visible { outline: 3px solid var(--sbl-blush); outline-offset: 3px; }

@media (min-width: 860px) {
  .is-enhanced .sbl-look { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(48px, 7vw, 112px); }
  .is-enhanced .sbl-look__media { margin: 0; }
}

.sbl-section__cta {
  margin-top: clamp(48px, 6vw, 72px);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* --- UNVEILED bridal feature (romantic luxury) ------------------------- */
.sbl-section--peony::before {
  content: "";
  position: absolute;
  width: min(640px, 80vw);
  aspect-ratio: 1;
  left: -10%;
  bottom: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.sbl-section--peony > .sbl-container { position: relative; }

.sbl-unveiled__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.sbl-unveiled__media {
  position: relative;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  border-radius: 999px 999px var(--sbl-radius-lg) var(--sbl-radius-lg);
  overflow: hidden;
  background: var(--sbl-blush-light);
  box-shadow: var(--sbl-shadow);
  outline: 1px solid rgba(180, 99, 79, 0.45);
  outline-offset: 12px;
}

.sbl-unveiled__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%; }

/* Bridal styles: one-open-at-a-time accordion (native <details name>) */
.sbl-styles { display: grid; gap: 14px; margin: 36px 0 40px; }

.sbl-style {
  background: var(--sbl-white);
  border: 1px solid transparent;
  border-radius: var(--sbl-radius);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.sbl-style[open] { border-color: var(--sbl-blush); box-shadow: var(--sbl-shadow); }

.sbl-style summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 20px 26px 16px;
}

.sbl-style summary::-webkit-details-marker { display: none; }
.sbl-style summary h3 { margin: 0; font-size: 21px; }
.sbl-style summary::after { content: "+"; font-family: var(--sbl-display); font-size: 28px; line-height: 1; color: var(--sbl-blush-dark); transition: transform 0.3s var(--sbl-ease); }
.sbl-style[open] summary::after { transform: rotate(45deg); }
.sbl-style summary:focus-visible { outline: 3px solid var(--sbl-blush); outline-offset: -3px; }
.sbl-style p { margin: 0; padding: 0 26px 26px; font-size: 16.5px; }
.sbl-style[open] p { animation: sbl-fade 0.45s var(--sbl-ease) both; }

.sbl-unveiled__actions { margin: 0 0 24px; }

.sbl-unveiled__note {
  font-family: var(--sbl-body-light);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--sbl-muted);
  margin: 0;
}

/* Gallery: swipeable rail on phones, three-up grid from tablet, lightbox with JS */
.sbl-gallery {
  display: flex;
  gap: 16px;
  margin-top: clamp(56px, 7vw, 96px);
  padding-bottom: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.sbl-gallery::-webkit-scrollbar { display: none; }
.sbl-gallery li { flex: 0 0 74%; scroll-snap-align: center; }

.sbl-gallery__item {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: var(--sbl-blush-light);
  cursor: zoom-in;
}

.sbl-gallery__item img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 20%; transition: transform 0.8s var(--sbl-ease); }
.sbl-gallery__item:hover img,
.sbl-gallery__item:focus-visible img { transform: scale(1.05); }
.sbl-gallery__item:focus-visible { outline: 3px solid var(--sbl-blush-dark); outline-offset: 3px; }

.sbl-gallery__item::after {
  content: "+";
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--sbl-charcoal);
  font-family: var(--sbl-display);
  font-size: 22px;
  line-height: 1;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s var(--sbl-ease);
}

.sbl-gallery__item:hover::after,
.sbl-gallery__item:focus-visible::after { opacity: 1; transform: none; }

@media (hover: none) { .sbl-gallery__item::after { opacity: 1; transform: none; } }

@media (min-width: 720px) {
  .sbl-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; overflow: visible; }
  .sbl-gallery li { flex: none; }
}

@media (min-width: 900px) {
  .sbl-unveiled__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
  .sbl-unveiled__media { position: sticky; top: 32px; margin: 0; }
}

/* Lightbox */
.sbl-lightbox {
  width: min(92vw, 640px);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.sbl-lightbox::backdrop { background: rgba(38, 33, 33, 0.82); }
.sbl-lightbox[open] { animation: sbl-fade 0.35s var(--sbl-ease) both; }
.sbl-lightbox img { width: 100%; max-height: 86vh; object-fit: contain; border-radius: 14px; background: var(--sbl-white); }

.sbl-lightbox__btn {
  position: absolute;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--sbl-white);
  color: var(--sbl-charcoal);
  font-family: Arial, sans-serif;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.sbl-lightbox__btn:focus-visible { outline: 3px solid var(--sbl-blush); outline-offset: 3px; }
.sbl-lightbox__close { top: -16px; right: -8px; }
.sbl-lightbox__prev { left: -8px; top: 50%; transform: translateY(-50%); }
.sbl-lightbox__next { right: -8px; top: 50%; transform: translateY(-50%); }

/* --- 2026 awards: official combined badge + the three exact titles ------ */
.sbl-awards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.sbl-awards__badge {
  display: flex;
  justify-content: center;
  padding: clamp(24px, 4vw, 44px);
  background: var(--sbl-white);
  border: 1px solid var(--sbl-line);
  border-radius: var(--sbl-radius-lg);
  box-shadow: var(--sbl-shadow);
  perspective: 900px;
}

.sbl-awards__badge img {
  width: 100%;
  max-width: 400px;
  height: auto;
  transform: rotateX(var(--sbl-tilt-x, 0deg)) rotateY(var(--sbl-tilt-y, 0deg));
  transition: transform 0.25s ease-out;
  will-change: transform;
}

.sbl-awards__intro h2 { margin-bottom: 18px; }
.sbl-awards__list { margin: 34px 0 0; border-top: 1px solid var(--sbl-line); }

.sbl-award { padding: 22px 0 20px; border-bottom: 1px solid var(--sbl-line); }

.sbl-award__scope {
  display: block;
  font-family: var(--sbl-body-semibold);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sbl-gold-text);
  margin-bottom: 6px;
}

.sbl-award h3 { font-size: clamp(19px, 2vw, 23px); margin: 0; }

.sbl-awards__note { margin: 30px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--sbl-muted); }
.sbl-awards__note .sbl-link { white-space: nowrap; }

@media (min-width: 860px) { .sbl-awards { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }

/* --- Locations -------------------------------------------------------- */
.sbl-feature-salon {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--sbl-white);
  border: 1px solid var(--sbl-line);
  border-radius: var(--sbl-radius-lg);
  overflow: hidden;
  margin-bottom: clamp(56px, 7vw, 88px);
  box-shadow: var(--sbl-shadow);
}

.sbl-feature-salon__media { position: relative; min-height: 260px; background: var(--sbl-sand); }
.sbl-feature-salon__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.sbl-feature-salon__body { padding: clamp(32px, 5vw, 56px); }
.sbl-feature-salon__body h3 { font-size: clamp(26px, 2.8vw, 34px); margin-bottom: 16px; }

.sbl-salon-facts { display: grid; gap: 22px; margin: 30px 0 34px; }
.sbl-salon-facts > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; font-size: 16px; }
.sbl-salon-facts dt { font-family: var(--sbl-body-semibold); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sbl-muted); padding-top: 3px; }
.sbl-salon-facts dd { margin: 0; }
.sbl-salon-facts dd a { color: var(--sbl-charcoal); }

.sbl-copy {
  margin: 10px 0 0;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--sbl-body-semibold);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sbl-charcoal);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.sbl-copy:hover,
.sbl-copy:focus-visible { color: var(--sbl-blush-dark); }
.sbl-copy:focus-visible { outline: 3px solid var(--sbl-blush); outline-offset: 3px; }

.sbl-hours { display: grid; gap: 6px; max-width: 360px; }
.sbl-hours div { display: flex; justify-content: space-between; gap: 18px; padding: 6px 10px 4px; margin: 0 -10px; border-radius: 6px; border-bottom: 1px dotted var(--sbl-line); }
.sbl-hours span:first-child { white-space: nowrap; }
.sbl-hours span:last-child { font-family: var(--sbl-body-medium); color: var(--sbl-charcoal); white-space: nowrap; }
.sbl-hours .is-today { background: var(--sbl-blush-light); border-bottom-color: transparent; }
.sbl-hours .is-today span:first-child::after { content: " · today"; font-family: var(--sbl-body-semibold); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sbl-blush-dark); }

@media (min-width: 560px) {
  .sbl-salon-facts > div { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; }
}

.sbl-chip-list { display: flex; flex-wrap: wrap; gap: 10px; }
.sbl-chip-list li {
  padding: 8px 14px 5px;
  border-radius: 999px;
  background: var(--sbl-sand);
  border: 1px solid var(--sbl-line);
  font-family: var(--sbl-body-semibold);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sbl-charcoal);
}

@media (min-width: 900px) {
  .sbl-feature-salon { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .sbl-feature-salon__media { min-height: 100%; }
}

.sbl-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }

.sbl-tab {
  min-height: 48px;
  padding: 13px 24px 9px;
  border-radius: 999px;
  border: 1px solid var(--sbl-line);
  background: var(--sbl-white);
  font-family: var(--sbl-body-semibold);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sbl-charcoal);
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.sbl-tab:hover { border-color: var(--sbl-blush); background: var(--sbl-blush-soft); }
.sbl-tab[aria-selected="true"] { background: var(--sbl-charcoal); border-color: var(--sbl-charcoal); color: var(--sbl-white); }
.sbl-tab:focus-visible { outline: 3px solid var(--sbl-blush); outline-offset: 2px; }

.sbl-salons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }

.sbl-salon {
  display: flex;
  flex-direction: column;
  padding: 30px 28px 26px;
  background: var(--sbl-white);
  border: 1px solid var(--sbl-line);
  border-radius: var(--sbl-radius-lg);
  transition: transform 0.35s var(--sbl-ease), box-shadow 0.35s ease, border-color 0.35s ease;
}

.sbl-salon:hover { transform: translateY(-4px); box-shadow: var(--sbl-shadow); border-color: var(--sbl-blush); }
.sbl-salon.is-highlight { border-color: var(--sbl-blush); box-shadow: 0 0 0 4px var(--sbl-blush-soft); }

.sbl-salon__city {
  font-family: var(--sbl-body-semibold);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sbl-blush-dark);
  margin-bottom: 10px;
}

.sbl-salon h3 { font-size: 22px; margin-bottom: 12px; }
.sbl-salon__address { font-size: 15.5px; color: var(--sbl-ink); margin-bottom: 16px; }
.sbl-salon__hours { font-size: 14.5px; line-height: 1.7; color: var(--sbl-muted); margin-bottom: 22px; }
.sbl-salon__hours span { display: block; }
.sbl-salon__actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }

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

.sbl-salons-group-title {
  font-family: var(--sbl-body-semibold);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sbl-muted);
  margin: 0 0 18px;
}

.sbl-salon-group + .sbl-salon-group { margin-top: 48px; }

@media (min-width: 640px) { .sbl-salons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1024px) { .sbl-salons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }

.sbl-locations__phone { margin: 48px 0 0; text-align: center; font-size: 15.5px; color: var(--sbl-muted); }
.sbl-locations__phone a { color: var(--sbl-charcoal); font-family: var(--sbl-body-semibold); text-decoration: none; }

/* --- FAQ -------------------------------------------------------------- */
.sbl-faq__list { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--sbl-line); }
.sbl-faq__list details { border-bottom: 1px solid var(--sbl-line); }

.sbl-faq__list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 72px;
  padding: 24px 0 20px;
  font-family: var(--sbl-body-semibold);
  font-size: 17.5px;
  color: var(--sbl-charcoal);
}

.sbl-faq__list summary::-webkit-details-marker { display: none; }
.sbl-faq__list summary::after { content: "+"; font-family: var(--sbl-display); font-size: 28px; line-height: 1; color: var(--sbl-blush-dark); flex: 0 0 auto; transition: transform 0.3s var(--sbl-ease); }
.sbl-faq__list details[open] summary::after { transform: rotate(45deg); }
.sbl-faq__list summary:focus-visible { outline: 3px solid var(--sbl-blush); outline-offset: 2px; }
.sbl-faq__list details p { padding: 0 48px 28px 0; font-size: 16.5px; margin: 0; }
.sbl-faq__list details[open] p { animation: sbl-fade 0.45s var(--sbl-ease) both; }

/* --- Closing booking band (live site's rose blush) ---------------------- */
.sbl-section--rose::before {
  content: "";
  position: absolute;
  width: min(720px, 90vw);
  aspect-ratio: 1;
  left: 50%;
  top: -60%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 68%);
  pointer-events: none;
}

.sbl-section--rose > .sbl-container { position: relative; }

.sbl-final { text-align: center; padding: clamp(80px, 10vw, 144px) 0; }
.sbl-final h2 { color: var(--sbl-charcoal); margin-bottom: 20px; font-size: clamp(30px, 4vw, 52px); }
.sbl-final .sbl-lead { margin: 0 auto 38px; color: var(--sbl-charcoal); }
.sbl-final .sbl-actions { justify-content: center; margin: 0 0 28px; }
.sbl-final .sbl-btn--ghost { border-color: var(--sbl-charcoal); color: var(--sbl-charcoal); }
.sbl-final .sbl-btn--ghost:hover,
.sbl-final .sbl-btn--ghost:focus-visible { background: var(--sbl-charcoal); color: var(--sbl-white); }
.sbl-final__phone { margin: 0; font-size: 15.5px; color: var(--sbl-charcoal); }
.sbl-final__phone a { color: var(--sbl-charcoal); font-family: var(--sbl-body-semibold); text-decoration: underline; text-underline-offset: 4px; }

/* --- Theme overrides ---------------------------------------------------
   The theme's style.css sets  a, a:hover, a:focus, a:active { color: white }
   and gives every <button> padding, a 3px radius and a grey hover/focus
   border. That would turn links white on white and push icon buttons off
   centre. Every link and button state below is pinned explicitly, with
   enough specificity to win no matter which stylesheet loads first. */

/* Buttons that are links: label colour in every state. */
.sbl-lp a.sbl-btn { color: var(--sbl-white); }
.sbl-lp a.sbl-btn--book,
.sbl-lp a.sbl-btn--ghost { color: var(--sbl-charcoal); }
.sbl-lp a.sbl-btn:is(:hover, :focus-visible) { color: var(--sbl-white); }
.sbl-lp .sbl-section--rose a.sbl-btn--book { color: var(--sbl-white); }
.sbl-lp .sbl-section--rose a.sbl-btn--book:is(:hover, :focus-visible) { color: var(--sbl-charcoal); }

/* Plain text links: normal, hover, keyboard focus, mouse focus and press. */
.sbl-lp a.sbl-link,
.sbl-lp .sbl-hero__meta a,
.sbl-lp .sbl-salon-facts dd a,
.sbl-lp .sbl-locations__phone a,
.sbl-lp .sbl-awards__note a { color: var(--sbl-charcoal); }

.sbl-lp a.sbl-link:is(:hover, :focus, :active),
.sbl-lp .sbl-hero__meta a:is(:hover, :focus, :active),
.sbl-lp .sbl-salon-facts dd a:is(:hover, :focus, :active),
.sbl-lp .sbl-locations__phone a:is(:hover, :focus, :active),
.sbl-lp .sbl-awards__note a:is(:hover, :focus, :active) {
  color: var(--sbl-blush-dark);
  background: transparent;
}

.sbl-lp .sbl-locations__phone a { text-decoration: none; }
.sbl-lp .sbl-locations__phone a:is(:hover, :focus, :active) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

/* Closing band: darker hover, the blush tone is too faint on the rose. */
.sbl-lp .sbl-final__phone a { color: var(--sbl-charcoal); }
.sbl-lp .sbl-final__phone a:is(:hover, :focus, :active) {
  color: var(--sbl-charcoal-dark);
  background: transparent;
  text-decoration-thickness: 2px;
}

.sbl-lp .sbl-pillars a,
.sbl-lp .sbl-pillars a:is(:hover, :focus, :active) { color: var(--sbl-charcoal); }

/* Icon buttons: no theme padding, exact centring, border stays put. */
.sbl-lp button.sbl-lookbook__arrow,
.sbl-lp button.sbl-lightbox__btn {
  padding: 0;
  line-height: 1;
  font-size: 0;
}

.sbl-lookbook__arrow svg,
.sbl-lightbox__btn svg { display: block; width: 20px; height: 20px; flex: none; pointer-events: none; }

.sbl-lp button.sbl-lookbook__arrow { border: 1px solid var(--sbl-charcoal); }
.sbl-lp button.sbl-lookbook__arrow:is(:hover, :focus, :active) { border-color: var(--sbl-charcoal); }
.sbl-lp button.sbl-lookbook__arrow:is(:hover, :focus-visible) { background: var(--sbl-charcoal); color: var(--sbl-white); }
.sbl-lp button.sbl-lookbook__arrow:active { background: var(--sbl-charcoal-dark); color: var(--sbl-white); }

.sbl-lp button.sbl-lightbox__btn { border: 0; }

/* Tab buttons: no theme radius, and the underline never turns grey. */
.sbl-lp button.sbl-lookbook__tab { border-radius: 0; border-bottom-color: transparent; }
.sbl-lp button.sbl-lookbook__tab:is(:hover, :focus, :active):not([aria-selected="true"]) { border-bottom-color: var(--sbl-line); }
.sbl-lp button.sbl-lookbook__tab[aria-selected="true"] { border-bottom-color: var(--sbl-blush); }

.sbl-lp button.sbl-tab:not([aria-selected="true"]):is(:focus, :active) { border-color: var(--sbl-blush); }
.sbl-lp button.sbl-tab[aria-selected="true"]:is(:hover, :focus, :active) { border-color: var(--sbl-charcoal); }

.sbl-lp button.sbl-copy { border: 0; border-radius: 0; background: none; padding: 0; }
.sbl-lp button.sbl-copy:is(:hover, :focus, :active) { border: 0; background: none; }

/* --- Motion ----------------------------------------------------------- */
@keyframes sbl-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sbl-settle { from { transform: scale(1.08); } to { transform: scale(1); } }

/* Scroll reveals only exist once the script has run (.is-js). */
.is-js .sbl-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--sbl-ease) var(--sbl-delay, 0s), transform 0.8s var(--sbl-ease) var(--sbl-delay, 0s);
}

.is-js .sbl-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sbl-lp *,
  .sbl-lp *::before,
  .sbl-lp *::after { animation: none !important; transition: none !important; }
  .is-js .sbl-reveal { opacity: 1; transform: none; }
}

@media print {
  .sbl-btn--ghost, .sbl-lookbook__tabs { display: none !important; }
  .is-js .sbl-reveal { opacity: 1 !important; transform: none !important; }
  .is-enhanced .sbl-look[hidden] { display: grid !important; }
}