:root {
  --cream: #fbf5f1;
  --cream-2: #f3e8e2;
  --cream-3: #efe4de;
  --ink: #3a2e2e;
  --ink-soft: #6e5d5c;
  --blush: #c98b95;
  --blush-dark: #a8636f;
  --blush-light: #e8c7cc;
  --gold: #c9a96e;
  --navy: #22394a;
  --white: #ffffff;
  --shadow: 0 22px 60px rgba(58, 46, 46, 0.14);
  --soft-shadow: 0 16px 38px rgba(58, 46, 46, 0.08);
  --hair: rgba(168, 99, 111, 0.14);
  --radius: 16px;
  --radius-sm: 10px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --page-max: 1280px;
  --page-gutter: 56px;
  --page-gutter-mobile: 22px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 108px;
}

::selection {
  background: var(--blush-light);
  color: var(--ink);
}

* {
  box-sizing: border-box;
}

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 1000;
  background: var(--ink);
  color: var(--cream);
  padding: 10px 14px;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

body.gnb-site {
  margin: 0;
  background: var(--cream-3);
  color: var(--ink);
  font-family: "Jost", "Montserrat", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

.desktop-nav a,
.mobile-nav a,
.brand,
.service-card,
.post-card {
  color: inherit;
  text-decoration: none;
}

.gnb-site a:focus-visible,
.gnb-site button:focus-visible,
.gnb-site input:focus-visible,
.gnb-site textarea:focus-visible,
.gnb-site select:focus-visible,
.gnb-site summary:focus-visible {
  outline: 3px solid rgba(168, 99, 111, 0.34);
  outline-offset: 4px;
}

.site-shell {
  /* Full-bleed backgrounds, content centered at --page-max.
     The element fills its container full width so section/header backgrounds
     run edge to edge; the side padding grows to center a --page-max column on
     wide screens and falls back to --page-gutter below that width.
     Uses 100% (not 100vw) so a visible scrollbar can't cause horizontal scroll. */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: max(var(--page-gutter), calc((100% - var(--page-max)) / 2));
  padding-right: max(var(--page-gutter), calc((100% - var(--page-max)) / 2));
}

.gnb-site .site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: rgba(251, 245, 241, 0.94);
  border-bottom: 1px solid var(--cream-2);
  backdrop-filter: blur(16px);
  transition: min-height 240ms var(--ease), box-shadow 240ms var(--ease), background 240ms var(--ease);
}

.gnb-site .site-header.is-scrolled {
  min-height: 74px;
  background: rgba(251, 245, 241, 0.98);
  box-shadow: 0 10px 30px rgba(58, 46, 46, 0.08);
}

.gnb-site .site-header.is-scrolled .brand-logo {
  width: 64px;
  height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.brand-logo {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
  transition: width 240ms var(--ease), height 240ms var(--ease);
}

/* Legacy dot icon: two overlapping circles (blush + gold) */
.brand-mark {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
}

.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.brand-mark::before {
  top: 0;
  left: 0;
  background: var(--blush);
}

.brand-mark::after {
  bottom: 0;
  right: 0;
  background: var(--gold);
  opacity: 0.75;
}

/* 2b wordmark: bold Montserrat caps, blush 'n */
.brand-word {
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--ink);
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-word .amp {
  text-transform: none;
  font-weight: 700;
  color: var(--blush-dark);
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.desktop-nav a {
  position: relative;
  padding: 34px 0;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 26px;
  width: 100%;
  height: 1px;
  transform: scaleX(0);
  transform-origin: center;
  background: var(--blush-dark);
  transition: transform 180ms ease;
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after {
  transform: scaleX(1);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

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

.button-primary {
  background: var(--blush-dark);
  color: var(--white);
  border-color: var(--blush-dark);
  box-shadow: 0 10px 24px rgba(168, 99, 111, 0.28);
}

.button-primary:hover {
  background: var(--blush);
  border-color: var(--blush);
  color: var(--white);
  box-shadow: 0 14px 30px rgba(168, 99, 111, 0.34);
}

.header-cta {
  border-radius: 30px;
}

.button-light:hover {
  background: var(--white);
  color: var(--blush-dark);
}

.button-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.button-secondary:hover {
  color: var(--blush-dark);
  border-color: var(--blush-dark);
}

.button-light {
  background: var(--cream);
  color: var(--blush-dark);
  border-color: var(--cream);
}

.mobile-nav {
  display: none;
  position: relative;
}

.mobile-nav summary {
  width: 44px;
  height: 44px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid rgba(58, 46, 46, 0.16);
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
}

.mobile-nav summary::-webkit-details-marker {
  display: none;
}

.mobile-nav summary span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
}

.mobile-nav nav {
  position: absolute;
  right: 0;
  top: 56px;
  width: 250px;
  display: grid;
  gap: 8px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--cream-2);
  border-radius: 8px;
  box-shadow: var(--soft-shadow);
}

.mobile-nav nav a {
  padding: 12px 14px;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
}

.hero {
  position: relative;
  overflow: hidden; /* clip the decorative ::before glow (right:-80px) so it can't cause page-level horizontal scroll — matches .page-hero */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 1fr);
  align-items: center;
  gap: 40px;
  min-height: 690px;
  padding-top: 88px;
  padding-bottom: 96px;
  background: var(--cream);
}

.hero-copy {
  max-width: 560px;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--blush-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.3;
  text-transform: uppercase;
}

.gnb-site h1,
.gnb-site h2,
.gnb-site h3 {
  margin-top: 0;
  color: var(--ink);
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  letter-spacing: 0;
}

.hero h1 {
  margin-bottom: 22px;
  font-size: 58px;
  line-height: 1.08;
}

.lede {
  max-width: 520px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.8;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}

.hero-media {
  min-height: 470px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--cream-2);
}

.hero-media img,
.about-media img,
.service-card img,
.location-card img,
.gallery-grid img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.section {
  padding-top: 96px;
  padding-bottom: 96px;
}

.subpage-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1fr);
  gap: 40px;
  align-items: center;
  padding-top: 74px;
  padding-bottom: 82px;
  background: var(--cream);
}

.subpage-hero h1 {
  margin-bottom: 20px;
  font-size: 52px;
  line-height: 1.08;
}

.subpage-media {
  min-height: 420px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--cream-2);
  box-shadow: var(--shadow);
}

.subpage-media img,
.location-detail-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.location-detail-list {
  display: grid;
  gap: 36px;
}

.location-detail {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1fr);
  gap: 36px;
  align-items: stretch;
  padding: 24px;
  background: var(--white);
  border: 1px solid rgba(168, 99, 111, 0.08);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(58, 46, 46, 0.03);
}

.location-detail:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
}

.location-detail:nth-child(even) .location-detail-media {
  order: 2;
}

.location-detail-media {
  min-height: 320px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--cream-2);
}

.location-detail-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 14px;
}

.location-detail-copy h2 {
  margin-bottom: 14px;
  font-size: 34px;
  line-height: 1.16;
}

.location-detail-copy address,
.location-detail-copy p {
  margin: 0 0 12px;
  color: var(--ink-soft);
  font-style: normal;
}

.location-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
}

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

.section-heading {
  width: min(100%, 680px);
  margin: 0 auto 52px;
  padding-left: 24px;
  padding-right: 24px;
  text-align: center;
}

.section-heading h2,
.about-copy h2,
.cta-section h2 {
  margin-bottom: 0;
  font-size: 40px;
  line-height: 1.2;
}

.card-grid {
  display: grid;
  gap: 24px;
}

.services-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.service-card,
.location-card,
.review-grid figure {
  background: var(--white);
  border: 1px solid rgba(168, 99, 111, 0.08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(58, 46, 46, 0.03);
}

.service-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--soft-shadow);
}

.service-card img {
  aspect-ratio: 1.35 / 1;
}

.service-card span {
  display: block;
  padding: 24px 24px 0;
  color: var(--ink);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 21px;
  line-height: 1.2;
}

.service-card p {
  margin: 10px 0 0;
  padding: 0 24px 26px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.65;
}

.about-section {
  display: grid;
  grid-template-columns: minmax(320px, 0.94fr) minmax(0, 1fr);
  gap: 58px;
  align-items: center;
  background: var(--cream);
}

.about-media {
  min-height: 430px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--soft-shadow);
}

.about-copy {
  max-width: 560px;
}

.about-copy p:not(.eyebrow):not(.script-line) {
  margin: 18px 0 0;
  color: var(--ink-soft);
  line-height: 1.8;
}

.script-line {
  margin: 20px 0 26px;
  color: var(--blush-dark);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
  font-style: italic;
  line-height: 1.3;
}

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

.location-card img {
  aspect-ratio: 1.62 / 1;
}

.location-card div {
  padding: 30px 32px 34px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.location-card h3 {
  margin-bottom: 0;
  font-size: 22px;
}

.location-kicker {
  margin: 0;
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.location-card address,
.location-card .location-note {
  margin-bottom: 10px;
  color: var(--ink-soft);
  font-style: normal;
  line-height: 1.65;
}

.location-card .location-actions {
  margin-top: 22px;
}

.location-card a:not(.button),
.footer a {
  color: inherit;
}

/* Locations — richer card content (intro, blurb, hours, phone) */
.section-heading .lede {
  color: var(--ink-soft);
}

/* Let aspect-ratio (not the shared height:100% rule) drive card image
   height, so every card image is the same size instead of stretching to
   fill whatever vertical space the card's text leaves. Applies to both
   the services grid (1.35/1) and the location cards (1.62/1). */
.service-card img,
.location-card img {
  height: auto;
  flex-shrink: 0;
}

.location-card {
  display: flex;
  flex-direction: column;
}

.location-card > div:not(.location-media) {
  flex: 1 1 auto;
}

/* Storefront image sits in its own clipped box so the zoom-panned (scaled)
   image is masked to the image area and can't paint over the card heading
   and text below it. */
.location-media {
  flex: none;
  aspect-ratio: 1.62 / 1;
  overflow: hidden;
}

.location-card .location-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  display: block;
}

/* Niagara Falls storefront shares a plaza with a restaurant on the left.
   Zoom and pan the crop to the right so the salon is framed and the
   neighbouring sign is pushed out of frame. Clipped by .location-media. */
.location-card.loc-niagara img {
  transform: scale(1.85);
  transform-origin: 95% 50%;
}

/* St. Catharines shot has a lot of sky above the sign; zoom in so the
   sign and storefront are framed as prominently as the Niagara card. */
.location-card.loc-stcath img {
  transform: scale(1.42);
  transform-origin: 50% 44%;
}

.location-blurb {
  margin: 2px 0 6px;
  color: var(--ink-soft);
  line-height: 1.7;
}

.location-hours {
  margin: 4px 0 2px;
  display: grid;
}

.location-hours > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 15px;
}

.location-hours > div:last-child {
  border-bottom: 0;
}

.location-hours dt {
  color: var(--ink);
  font-weight: 600;
}

.location-hours dd {
  margin: 0;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

a.location-phone {
  align-self: flex-start;
  margin-top: 6px;
  color: var(--blush-dark);
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
}

a.location-phone:hover {
  text-decoration: underline;
}

.gallery-section {
  background: var(--cream);
}

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

.gallery-grid img {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: var(--cream-2);
}

.center-row {
  display: flex;
  justify-content: center;
  margin-top: 38px;
}

.reviews-section {
  text-align: center;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.review-grid figure {
  margin: 0;
  padding: 30px;
  text-align: left;
}

.review-grid blockquote {
  margin: 0;
  color: var(--ink);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 21px;
  font-style: italic;
  line-height: 1.45;
}

.review-grid figcaption {
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
}

.why-section {
  background: var(--cream);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.why-card {
  padding: 30px;
  background: var(--white);
  border: 1px solid rgba(168, 99, 111, 0.08);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(58, 46, 46, 0.03);
}

.why-card h3 {
  margin-bottom: 14px;
  font-size: 19px;
  color: var(--blush-dark);
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
}

.why-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.7;
}

.cta-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 86px 24px 90px;
  background: var(--blush-dark);
  text-align: center;
}

.cta-section p {
  margin: 0;
  color: var(--blush-light);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 17px;
  font-style: italic;
}

.cta-section h2 {
  max-width: 620px;
  color: var(--cream);
}

.footer {
  background: #251c1b;
  color: #e7dad8;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.1fr 0.9fr;
  gap: 42px;
  padding-top: 72px;
  padding-bottom: 48px;
}

.footer-brand-lockup {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.footer-brand-lockup .fnb-logo {
  display: block;
  width: 76px;
  height: 76px;
  object-fit: contain;
  /* The G.B monogram is a light-grey line mark; lighten it to near-cream so it
     reads clearly against the dark footer instead of fading into it. */
  filter: brightness(0) invert(0.92);
}

.footer-brand-lockup .fnb-icon {
  position: relative;
  width: 34px;
  height: 34px;
  flex: none;
}

.footer-brand-lockup .fnb-icon::before,
.footer-brand-lockup .fnb-icon::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.footer-brand-lockup .fnb-icon::before {
  top: 0;
  left: 0;
  background: var(--blush);
}

.footer-brand-lockup .fnb-icon::after {
  bottom: 0;
  right: 0;
  background: var(--gold);
  opacity: 0.75;
}

.footer-brand-lockup .fnb-wordmark {
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: 0.05em;
  color: #fff;
  line-height: 1.1;
  text-transform: uppercase;
}

.footer-brand-lockup .fnb-wordmark span {
  text-transform: none;
  font-weight: 700;
  color: var(--blush-light);
}

.footer p {
  margin: 13px 0 0;
  color: #c9b8b6;
  font-size: 14px;
  line-height: 1.75;
}

.footer h2 {
  margin: 0 0 14px;
  color: var(--blush-light);
  font-family: "Jost", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.footer nav,
.footer-grid > div:not(.footer-brand) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

.footer nav a,
.footer-grid a {
  color: #c9b8b6;
  font-size: 14px;
}

.footer nav a:hover,
.footer-grid a:hover,
.footer-bottom a:hover {
  color: var(--gold);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 23px;
  padding-bottom: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #9c8a88;
  font-size: 13px;
}

.footer-bottom span:last-child {
  display: flex;
  gap: 22px;
}

@media (max-width: 1120px) {
  .desktop-nav {
    gap: 22px;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .subpage-hero,
  .location-detail,
  .location-detail:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .location-detail:nth-child(even) .location-detail-media {
    order: 0;
  }

  .hero-copy {
    max-width: 700px;
  }

  .services-grid,
  .gallery-grid,
  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 880px) {
  .site-shell {
    padding-left: var(--page-gutter-mobile);
    padding-right: var(--page-gutter-mobile);
  }

  .gnb-site .site-header {
    min-height: 76px;
  }

  .desktop-nav,
  .header-cta {
    display: none;
  }

  .mobile-nav {
    display: block;
  }

  .brand-logo {
    width: 68px;
    height: 68px;
  }

  .hero {
    gap: 34px;
    padding-top: 58px;
    padding-bottom: 70px;
  }

  .subpage-hero {
    gap: 30px;
    padding-top: 56px;
    padding-bottom: 66px;
  }

  .subpage-hero h1 {
    font-size: 42px;
  }

  .hero h1 {
    font-size: 44px;
  }

  .hero-media,
  .about-media,
  .subpage-media {
    min-height: 360px;
  }

  .section {
    padding-top: 72px;
    padding-bottom: 76px;
  }

  .about-section,
  .location-grid,
  .review-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  body.gnb-site {
    font-size: 16px;
  }

  .brand-logo {
    width: 60px;
    height: 60px;
  }

  .brand-mark::before,
  .brand-mark::after {
    width: 21px;
    height: 21px;
  }

  .brand-word {
    font-size: 18px;
  }

  .mobile-nav nav {
    right: -4px;
    width: calc(100vw - 44px);
  }

  .hero {
    gap: 24px;
    padding-top: 38px;
    padding-bottom: 36px;
  }

  .hero h1 {
    margin-bottom: 16px;
    font-size: 34px;
  }

  .lede {
    font-size: 16px;
    line-height: 1.65;
  }

  .button-row {
    margin-top: 24px;
  }

  .button-row {
    flex-direction: column;
    align-items: stretch;
  }

  .button,
  .location-actions .button {
    width: 100%;
  }

  .subpage-hero h1 {
    font-size: 34px;
  }

  .section-heading h2,
  .about-copy h2,
  .cta-section h2 {
    font-size: 32px;
  }

  .section {
    padding-top: 46px;
    padding-bottom: 62px;
  }

  .services-grid,
  .gallery-grid,
  .why-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .hero-media,
  .about-media,
  .subpage-media,
  .location-detail-media {
    min-height: 220px;
  }

  .location-card div,
  .review-grid figure,
  .location-detail {
    padding: 24px;
  }

  .location-detail-copy {
    padding: 0;
  }

  .footer-bottom {
    flex-direction: column;
  }
}

/* ============================================================
   Upgraded components — subpage heroes, pricing, gallery,
   contact, about, and shared scroll-reveal / micro-interactions.
   ============================================================ */

/* Scroll reveal — content is visible by default; the hidden pre-animation
   state is only applied once JS marks the document as enhanced (.gnb-js),
   so content is never trapped at opacity:0 if JS is disabled or fails. */
.gnb-js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  will-change: opacity, transform;
}

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

.reveal-delay-1 { transition-delay: 90ms; }
.reveal-delay-2 { transition-delay: 180ms; }
.reveal-delay-3 { transition-delay: 270ms; }

/* Hero glow accent */
.hero::before {
  content: "";
  position: absolute;
  top: -160px;
  right: -140px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: var(--blush-light);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.hero-copy,
.hero-media {
  position: relative;
  z-index: 1;
}

.hero-media {
  position: relative;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

/* Centered subpage hero (about / services / designs / contact) */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 78px var(--page-gutter);
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  text-align: center;
}

.page-hero::before,
.page-hero::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  pointer-events: none;
}

.page-hero::before {
  top: -140px;
  left: -100px;
  background: radial-gradient(circle, rgba(201, 139, 149, 0.20), transparent 70%);
}

.page-hero::after {
  right: -120px;
  bottom: -160px;
  background: radial-gradient(circle, rgba(201, 169, 110, 0.16), transparent 70%);
}

.page-hero .page-hero-inner {
  position: relative;
  z-index: 1;
  width: min(100%, 760px);
  margin: 0 auto;
}

.page-hero h1 {
  margin: 0 0 18px;
  font-size: 54px;
  line-height: 1.08;
}

.page-hero .lede {
  margin: 0 auto;
  max-width: 620px;
}

.page-hero .button-row {
  justify-content: center;
}

.divider-mark {
  display: block;
  width: 54px;
  height: 2px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Section intro alignment helper — center the intro paragraph within the
   centered heading column (the base .lede has max-width:520px, so without
   auto side margins the block hugs the left and reads off-centre under the
   centered h2). */
.section-heading .lede {
  margin: 14px auto 0;
}

/* About page — story + values */
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 58px;
  align-items: center;
}

.story-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: 460px;
}

.story-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.pull-quote {
  margin: 0;
  padding: 34px 36px;
  background: var(--white);
  border-left: 3px solid var(--blush-dark);
  border-radius: var(--radius-sm);
  box-shadow: var(--soft-shadow);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
}

.pull-quote cite {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--blush-dark);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: min(100%, var(--page-max));
  margin: 52px auto 0;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

.stat {
  padding: 30px 24px;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(58, 46, 46, 0.03);
}

.stat strong {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  color: var(--blush-dark);
}

.stat span {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* Services — pricing menu */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

.menu-card {
  padding: 34px 34px 30px;
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(58, 46, 46, 0.03);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}

.menu-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--soft-shadow);
}

.menu-card h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 6px;
  font-size: 24px;
}

.menu-card > p {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 15px;
}

.price-list {
  display: grid;
  gap: 2px;
  margin: 0;
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--cream-3);
}

.price-row:last-child {
  border-bottom: 0;
}

.price-row .name {
  color: var(--ink);
  font-weight: 500;
}

.price-row .leader {
  flex: 1;
  border-bottom: 1px dotted rgba(138, 120, 119, 0.4);
  transform: translateY(-4px);
}

.price-row .price {
  color: var(--blush-dark);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.price-note {
  margin: 16px 0 0;
  font-size: 13px;
  font-style: italic;
  color: var(--ink-soft);
}

.menu-card.menu-card-wide {
  grid-column: 1 / -1;
}

.menu-card-wide .price-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
}

/* Services — tabbed price menu. Tabs sit in a horizontal row above the
   price panels; only the selected panel shows once JS is active. */
.svc-menu {
  width: 100%;
}

.svc-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}

.svc-tab {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  min-height: 46px;
  padding: 12px 24px;
  border: 1px solid var(--hair);
  border-radius: 30px;
  background: var(--white);
  color: var(--ink);
  font-family: "Jost", "Montserrat", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  transition: background 180ms var(--ease), color 180ms var(--ease),
    border-color 180ms var(--ease), box-shadow 180ms var(--ease),
    transform 180ms var(--ease);
}

.svc-tab:hover {
  border-color: var(--blush-dark);
  color: var(--blush-dark);
  transform: translateY(-1px);
}

.svc-tab.is-active {
  background: var(--blush-dark);
  border-color: var(--blush-dark);
  color: #fff;
  box-shadow: 0 10px 24px rgba(168, 99, 111, 0.28);
}

.svc-panel {
  animation: svc-fade 320ms var(--ease);
}

/* When JS is active only the selected panel is shown; without JS every panel
   stays visible so the full price list is never hidden. */
.gnb-js .svc-panel:not(.is-active) {
  display: none;
}

@keyframes svc-fade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-panel { animation: none; }
}

/* Homepage — Google reviews treatment */
.greviews {
  width: 100%;
}

.greviews-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  width: min(100%, 620px);
  margin: 0 auto 36px;
  padding: 18px 26px;
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: var(--soft-shadow);
  text-align: left;
}

.greviews-glogo {
  width: 36px;
  height: 36px;
  flex: none;
}

.greviews-bar-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-right: auto;
}

.greviews-bar-label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.greviews-rating {
  display: flex;
  align-items: center;
  gap: 10px;
}

.greviews-rating strong {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}

.greviews-stars {
  color: #fbbc04;
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 1;
}

.greviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.greview {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 26px 28px;
  text-align: left;
  background: var(--white);
  border: 1px solid rgba(168, 99, 111, 0.08);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(58, 46, 46, 0.03);
}

.greview-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.greview-avatar {
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  color: #fff;
  font-family: "Jost", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.greview-avatar svg {
  width: 24px;
  height: 24px;
}

.greview-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.greview-name {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.2;
}

.greview-date {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.2;
}

.greview-glogo {
  width: 20px;
  height: 20px;
  margin-left: auto;
  flex: none;
}

.greview-stars {
  color: #fbbc04;
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 1;
}

.greview-text {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.7;
}

@media (max-width: 900px) {
  .greviews-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .greviews-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Services — quick category tiles */
.svc-intro-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.svc-tile {
  padding: 28px 24px;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(58, 46, 46, 0.03);
}

.svc-tile .svc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--blush-dark);
}

.svc-tile h3 {
  margin: 0 0 8px;
  font-size: 19px;
}

.svc-tile p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* Masonry gallery (our works) */
.masonry {
  columns: 4;
  column-gap: 18px;
}

.masonry .tile {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 18px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--cream-2);
  break-inside: avoid;
  cursor: zoom-in;
  box-shadow: 0 1px 0 rgba(58, 46, 46, 0.03);
}

.masonry .tile img {
  width: 100%;
  display: block;
  transition: transform 500ms var(--ease);
}

.masonry .tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(58, 46, 46, 0.28));
  opacity: 0;
  transition: opacity 300ms var(--ease);
}

.masonry .tile:hover img {
  transform: scale(1.05);
}

.masonry .tile:hover::after {
  opacity: 1;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(35, 28, 28, 0.86);
  backdrop-filter: blur(6px);
}

.lightbox.is-open {
  display: flex;
}

.lightbox img {
  max-width: min(92vw, 900px);
  max-height: 88vh;
  border-radius: var(--radius-sm);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.lightbox .lb-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 46px;
  height: 46px;
  display: grid;
  place-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background 200ms var(--ease);
}

.lightbox .lb-close:hover {
  background: rgba(255, 255, 255, 0.28);
}

.lightbox .lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: grid;
  place-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  transition: background 200ms var(--ease);
}

.lightbox .lb-nav:hover {
  background: rgba(255, 255, 255, 0.28);
}

.lightbox .lb-prev { left: 20px; }
.lightbox .lb-next { right: 20px; }

/* Contact page */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.contact-card {
  padding: 36px;
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(58, 46, 46, 0.03);
}

.contact-card h3 {
  margin: 0 0 4px;
  font-size: 24px;
}

.contact-card .location-kicker {
  margin-bottom: 18px;
}

.contact-line {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 16px;
  color: var(--ink-soft);
}

.contact-line svg {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--blush-dark);
}

.contact-line a {
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color 180ms var(--ease), color 180ms var(--ease);
}

.contact-line a:hover {
  color: var(--blush-dark);
  border-color: var(--blush-dark);
}

.social-row {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}

.social-row a {
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--blush-dark);
  transition: background 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}

.social-row a:hover {
  background: var(--blush-dark);
  color: var(--cream);
  transform: translateY(-2px);
}

.contact-banner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--soft-shadow);
}

.contact-banner .cb-copy {
  padding: 44px;
  background: var(--cream-2);
}

.contact-banner .cb-copy h2 {
  margin-bottom: 12px;
}

.contact-banner .cb-media {
  min-height: 320px;
  background: var(--cream-3);
}

.contact-banner .cb-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1120px) {
  .masonry { columns: 3; }
  .svc-intro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  .page-hero {
    padding-left: var(--page-gutter-mobile);
    padding-right: var(--page-gutter-mobile);
  }
  .page-hero h1 { font-size: 42px; }
  .story-grid,
  .contact-grid,
  .contact-banner,
  .menu-grid { grid-template-columns: 1fr; }
  .masonry { columns: 2; }
  .stat-row {
    padding-left: var(--page-gutter-mobile);
    padding-right: var(--page-gutter-mobile);
  }
  .menu-card-wide .price-list { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .page-hero h1 { font-size: 34px; }
  .stat-row,
  .svc-intro-grid { grid-template-columns: 1fr; }
  .masonry { columns: 1; }
  .story-media { min-height: 300px; }
  .price-row .name { font-weight: 500; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
  .masonry .tile:hover img { transform: none; }
}

/* Article + blog pages on the gnb-site shell */
.article-shell {
  width: min(100%, 820px);
  margin: 0 auto;
  padding-top: 64px;
  padding-bottom: 84px;
}

.article-body {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.8;
}

.article-body > *:first-child { margin-top: 0; }

.article-body p {
  margin: 0 0 22px;
}

.article-body h2,
.article-body h3,
.article-body h4 {
  color: var(--ink);
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  line-height: 1.25;
}

.article-body h2 { margin: 44px 0 16px; font-size: 30px; }
.article-body h3 { margin: 34px 0 14px; font-size: 23px; }
.article-body h4 { margin: 28px 0 12px; font-size: 19px; }

.article-body a {
  color: var(--blush-dark);
  border-bottom: 1px solid rgba(168, 99, 111, 0.35);
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}

.article-body a:hover {
  color: var(--blush);
  border-color: var(--blush);
}

.article-body ul,
.article-body ol {
  margin: 0 0 22px;
  padding-left: 22px;
}

.article-body li {
  margin: 0 0 10px;
}

.article-body li::marker {
  color: var(--blush-dark);
}

.article-body img {
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--soft-shadow);
  margin: 12px 0;
}

.article-body figure {
  margin: 26px 0;
}

.article-body figcaption {
  margin-top: 10px;
  font-size: 14px;
  font-style: italic;
  text-align: center;
  color: var(--ink-soft);
}

.article-body blockquote {
  margin: 26px 0;
  padding: 18px 26px;
  border-left: 3px solid var(--blush-dark);
  background: var(--cream);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 20px;
  color: var(--ink);
}

.article-body iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-sm);
  margin: 14px 0;
}

.article-body hr {
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--cream-3);
}

/* WordPress block buttons rendered inside gnb-site article bodies */
.article-body .wp-block-button__link,
.article-body .wp-element-button,
.article-body .gb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 26px;
  border-radius: 4px;
  background: var(--blush-dark);
  color: var(--cream);
  border-bottom: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(168, 99, 111, 0.28);
  transition: background 180ms var(--ease);
}

.article-body .wp-block-button__link:hover,
.article-body .wp-element-button:hover,
.article-body .gb-button:hover {
  background: var(--blush);
  color: var(--cream);
}

.article-body .wp-block-buttons,
.article-body .wp-block-image {
  margin: 24px 0;
}

.article-body .wp-block-image img {
  margin: 0;
}

/* Article gallery images collapse to a tidy responsive grid */
.article-body .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 26px 0;
}

.article-body .wp-block-gallery figure,
.article-body .wp-block-gallery .wp-block-image {
  margin: 0;
}

.article-meta {
  margin: 0 0 6px;
  color: var(--ink-soft);
  font-size: 14px;
  letter-spacing: 0.04em;
}

/* Blog listing */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(58, 46, 46, 0.03);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--soft-shadow);
}

.post-card .post-thumb {
  aspect-ratio: 1.5 / 1;
  overflow: hidden;
  background: var(--cream-2);
}

.post-card .post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms var(--ease);
}

.post-card:hover .post-thumb img {
  transform: scale(1.05);
}

.post-card .post-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 26px 28px;
}

.post-card h3 {
  margin: 0 0 10px;
  font-size: 21px;
  line-height: 1.28;
}

.post-card p {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.65;
}

.post-card .post-more {
  margin-top: auto;
  color: var(--blush-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pagination-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 48px;
}

.pagination-row a,
.pagination-row span {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  font-weight: 600;
  color: var(--ink);
}

.pagination-row a:hover {
  border-color: var(--blush-dark);
  color: var(--blush-dark);
}

.pagination-row .is-current {
  background: var(--blush-dark);
  border-color: var(--blush-dark);
  color: var(--cream);
}

@media (max-width: 880px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-body .wp-block-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .blog-grid { grid-template-columns: 1fr; }
  .article-body { font-size: 16px; }
  .article-body h2 { font-size: 26px; }
}

/* Legacy WordPress export cleanup. Existing route files still include this sheet. */
body:not(.gnb-site) {
  background: var(--cream-3) !important;
  color: var(--ink) !important;
  font-family: "Jost", "Montserrat", Arial, sans-serif !important;
}

body:not(.gnb-site) h1,
body:not(.gnb-site) h2,
body:not(.gnb-site) h3,
body:not(.gnb-site) .entry-title,
body:not(.gnb-site) .gb-headline-text {
  color: var(--ink) !important;
  font-family: "Playfair Display", Georgia, serif !important;
  letter-spacing: 0 !important;
}

body:not(.gnb-site) a {
  color: var(--blush-dark) !important;
}

body:not(.gnb-site) a:hover,
body:not(.gnb-site) a:focus {
  color: var(--blush) !important;
}

body:not(.gnb-site) .site-header,
body:not(.gnb-site) .inside-header,
body:not(.gnb-site) .main-navigation,
body:not(.gnb-site) #mobile-header {
  background: rgba(251, 245, 241, 0.96) !important;
  border-bottom: 1px solid var(--cream-2) !important;
}

body:not(.gnb-site) .site-header {
  display: block !important;
  opacity: 1 !important;
  position: static !important;
}

body:not(.gnb-site) .inside-header {
  min-height: 92px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body:not(.gnb-site) #mobile-menu-control-wrapper {
  display: none !important;
}

body:not(.gnb-site) .inside-header.grid-container,
body:not(.gnb-site) .inside-navigation.grid-container,
body:not(.gnb-site) .footer-widgets-container.grid-container,
body:not(.gnb-site) .inside-site-info.grid-container {
  max-width: var(--page-max) !important;
  padding-right: var(--page-gutter) !important;
  padding-left: var(--page-gutter) !important;
}

body:not(.gnb-site) #mobile-header,
body:not(.gnb-site) #sticky-navigation {
  display: none !important;
}

body:not(.gnb-site) #site-navigation {
  flex: 1 1 auto !important;
  background: transparent !important;
  border-bottom: 0 !important;
}

body:not(.gnb-site) #site-navigation .inside-navigation {
  max-width: none !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 28px !important;
  padding: 0 !important;
  border-bottom: 0 !important;
}

body:not(.gnb-site) #site-navigation .menu-toggle {
  display: none !important;
}

body:not(.gnb-site) #primary-menu,
body:not(.gnb-site) #primary-menu > ul {
  display: flex !important;
  align-items: center !important;
}

body:not(.gnb-site) #primary-menu > ul {
  gap: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:not(.gnb-site) #primary-menu > ul > li {
  margin: 0 !important;
}

body:not(.gnb-site) .site-logo img,
body:not(.gnb-site) .navigation-branding img,
body:not(.gnb-site) .site-logo.mobile-header-logo img {
  width: 220px !important;
  max-width: 220px !important;
  height: auto !important;
}

body:not(.gnb-site) .main-navigation .main-nav ul li a,
body:not(.gnb-site) .menu-toggle {
  color: var(--ink) !important;
  font-family: "Jost", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

body:not(.gnb-site) #primary-menu > ul > li > a {
  padding: 0 !important;
  line-height: 1.2 !important;
}

body:not(.gnb-site) .site-content,
body:not(.gnb-site) .inside-article,
body:not(.gnb-site) .one-container .site-content {
  background: var(--cream) !important;
}

body:not(.gnb-site) .inside-article {
  width: min(100%, var(--page-max));
  margin: 0 auto !important;
  padding: 72px var(--page-gutter) !important;
}

body:not(.gnb-site) .entry-content p,
body:not(.gnb-site) .entry-content li {
  color: var(--ink-soft) !important;
  line-height: 1.75 !important;
}

body:not(.gnb-site) .entry-content img,
body:not(.gnb-site) .gb-image {
  border-radius: 8px !important;
}

body:not(.gnb-site) .wpsm_nav-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body:not(.gnb-site) .wpsm_nav-tabs > li {
  flex: 1 1 180px !important;
  float: none !important;
}

body:not(.gnb-site) .wpsm_nav-tabs > li > a {
  width: 100% !important;
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body:not(.gnb-site) .tab-content {
  clear: both !important;
}

body:not(.gnb-site) .wp-block-button__link,
body:not(.gnb-site) .gb-button,
body:not(.gnb-site) button,
body:not(.gnb-site) input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 13px 26px !important;
  border-radius: 4px !important;
  background: var(--blush-dark) !important;
  color: var(--cream) !important;
  font-family: "Jost", Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: normal !important;
}

body:not(.gnb-site) .gb-button-text {
  line-height: 1.15 !important;
  text-align: center !important;
}

body:not(.gnb-site) .wp-block-button__link:hover,
body:not(.gnb-site) .gb-button:hover,
body:not(.gnb-site) button:hover,
body:not(.gnb-site) input[type="submit"]:hover {
  background: var(--blush) !important;
}

body:not(.gnb-site) iframe {
  max-width: 100% !important;
  border: 0 !important;
  border-radius: 8px !important;
}

body:not(.gnb-site) .site-footer,
body:not(.gnb-site) .site-info,
body:not(.gnb-site) .inside-site-info {
  background: var(--ink) !important;
  color: #e7dad8 !important;
}

body:not(.gnb-site) .footer-widgets {
  background: var(--cream-2) !important;
}

@media (max-width: 768px) {
  body:not(.gnb-site) .inside-header.grid-container,
  body:not(.gnb-site) .inside-navigation.grid-container,
  body:not(.gnb-site) .footer-widgets-container.grid-container,
  body:not(.gnb-site) .inside-site-info.grid-container {
    padding-right: var(--page-gutter-mobile) !important;
    padding-left: var(--page-gutter-mobile) !important;
  }

  body:not(.gnb-site) .inside-header {
    min-height: 76px !important;
    display: flex !important;
    gap: 18px !important;
  }

  body:not(.gnb-site) #mobile-menu-control-wrapper {
    flex: 0 0 auto !important;
    display: block !important;
    background: transparent !important;
    border-bottom: 0 !important;
  }

  body:not(.gnb-site) #mobile-menu-control-wrapper .menu-toggle {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 1px solid rgba(58, 46, 46, 0.16) !important;
    background: transparent !important;
    color: var(--ink) !important;
  }

  body:not(.gnb-site) #site-navigation {
    display: none !important;
  }

  body:not(.gnb-site) .wpsm_nav-tabs {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  body:not(.gnb-site) .inside-article {
    padding: 48px var(--page-gutter-mobile) !important;
  }

  body:not(.gnb-site) .site-logo img,
  body:not(.gnb-site) .navigation-branding img,
  body:not(.gnb-site) .site-logo.mobile-header-logo img {
    width: 190px !important;
    max-width: 190px !important;
  }
}

/* ============================================================
   Utility top bar — location addresses + phones above the nav.
   Scrolls away on scroll (the nav below stays sticky).
   ============================================================ */
.topbar {
  background: var(--ink);
  color: #efdedb;
  font-size: 13px;
  line-height: 1.45;
}

.topbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 28px;
  padding-top: 9px;
  padding-bottom: 9px;
}

.topbar a {
  color: inherit;
  text-decoration: none;
}

.topbar-loc {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.topbar-addr {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 160ms var(--ease);
}

.topbar-pin {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--blush-light);
}

.topbar-tel {
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  transition: color 160ms var(--ease);
}

.topbar-addr:hover,
.topbar-tel:hover {
  color: var(--gold);
}

.topbar-divider {
  width: 1px;
  height: 15px;
  background: rgba(255, 255, 255, 0.18);
}

@media (max-width: 760px) {
  .topbar {
    font-size: 12px;
  }

  .topbar-inner {
    flex-direction: column;
    gap: 5px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .topbar-divider {
    display: none;
  }

  .topbar-loc {
    gap: 10px;
  }
}

/* Mobile menu — Book Appointment styled as a pill button (not a plain link) */
.mobile-nav nav a.mobile-cta {
  justify-content: center;
  margin-top: 8px;
  background: var(--blush-dark);
  color: #fff;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(168, 99, 111, 0.28);
  transition: background 180ms var(--ease);
}

.mobile-nav nav a.mobile-cta:hover {
  background: var(--blush);
  color: #fff;
}

/* ============================================================
   Homepage location cards — embedded map under the actions.
   ============================================================ */
.location-map {
  margin-top: 14px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  overflow: hidden;
  background: var(--cream-2);
  box-shadow: 0 1px 0 rgba(58, 46, 46, 0.03);
}

.location-map iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
}

/* ============================================================
   Reviews — half-star aggregate + review count.
   ============================================================ */
.greviews-stars.is-half {
  position: relative;
  display: inline-block;
  color: #d9c9c9;
}

.greviews-stars.is-half::before {
  content: "★★★★★";
  position: absolute;
  left: 0;
  top: 0;
  width: 94%; /* ~4.7 / 5 */
  overflow: hidden;
  white-space: nowrap;
  color: #fbbc04;
}

.greviews-stars.is-46::before { width: 92%; } /* 4.6 / 5 */
.greviews-stars.is-48::before { width: 96%; } /* 4.8 / 5 */

/* Location detail pages — map embed + compact per-location Google rating */
.location-detail-media iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
}

.location-detail-copy .location-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 2px 0 12px;
  color: var(--ink-soft);
}

.location-rating strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}

.location-rating a {
  color: var(--ink-soft);
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}

.location-rating a:hover {
  color: var(--blush-dark);
  border-color: var(--blush-dark);
}

.greviews-count {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
}

.greview-source {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.2;
}

/* ============================================================
   Footer — clickable (GBP-linked) addresses + expanded hours.
   ============================================================ */
.footer-addr {
  display: block;
  line-height: 1.6;
  transition: color 160ms var(--ease);
}

.footer-addr:hover {
  color: var(--gold);
}

.footer-hours-list {
  width: 100%;
  margin: 4px 0 0;
  display: grid;
  gap: 2px;
}

.footer-hours-list > div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-hours-list > div:last-child {
  border-bottom: 0;
}

.footer-hours-list dt {
  color: #e7dad8;
  font-size: 15px;
  font-weight: 500;
}

.footer-hours-list dd {
  margin: 0;
  color: #c9b8b6;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Footer — the two locations shown as separate, city-labelled groups */
.footer-loc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.footer-loc + .footer-loc {
  margin-top: 10px;
}

.footer .footer-loc-city {
  margin: 0;
  color: var(--gold);
  font-family: "Jost", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}