/* ==========================================================================
   The Groom Room Vancouver
   Structure reverse-engineered from the PetSmart Services design system
   (5px grid, 10px radius, subtle raised shadow, 0.15/0.25/0.3s motion),
   rebranded to the salon's green + wood brown palette.
   ========================================================================== */

/* ---------- Fonts (local only) ---------- */
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* brand */
  --green:        #70c808;
  --green-dark:   #5da607;
  --green-deep:   #4a8506;
  --green-tint:   #f0fae2;
  --green-tint-2: #e3f5c8;

  --brown:        #793c16;
  --brown-dark:   #5d3013;
  --brown-tint:   #f7efe7;
  --brown-line:   #e7d8c8;

  --ink:          #2b2118;
  --muted:        #8a7a6d;
  --white:        #ffffff;
  --line:         #ece6e0;

  /* system */
  --radius:       10px;
  --radius-lg:    20px;
  --pill:         9999px;
  --container:    1040px;
  --shadow:       0 1px 2px 0 rgba(20,36,51,.2), 0 1px 4px 0 rgba(20,36,51,.08);
  --shadow-lift:  0 5px 10px 0 rgba(20,36,51,.10), 0 15px 30px -10px rgba(20,36,51,.16);
  --shadow-deep:  0 10px 20px 0 rgba(45,30,15,.10), 0 30px 60px -20px rgba(45,30,15,.22);

  --t-fast:  .15s;
  --t-base:  .25s;
  --t-slow:  .3s;
  --header-h: 70px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: balance;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--green-deep);
  outline-offset: 2px;
  border-radius: 5px;
}

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

.skip-link {
  position: absolute; left: 10px; top: -60px; z-index: 100;
  background: var(--green); color: var(--white);
  padding: 10px 15px; border-radius: var(--radius);
  font-family: "Montserrat", sans-serif; font-weight: 600;
  transition: top var(--t-fast) ease-out;
}
.skip-link:focus { top: 10px; }

/* ---------- Shared type ---------- */
.kicker {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: 10px;
}
.kicker--brown { color: var(--brown); }

.sec-head { max-width: 720px; margin-bottom: 45px; }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head h2, .faq__aside h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; }
.faq__aside h2 { font-size: clamp(26px, 2.8vw, 34px); }
.sec-head .lede, .faq__aside .lede { margin-top: 15px; color: #5f5348; font-size: 18px; }
.lede { color: #5f5348; }

.link-strong {
  font-family: "Montserrat", sans-serif; font-weight: 700;
  color: var(--green-deep); font-size: 22px;
  transition: color var(--t-fast) ease-out;
}
.link-strong:hover { color: var(--brown); text-decoration: underline; text-underline-offset: 4px; }

/* phone link with a leading icon. Both the glyph and the number ride the same
   colour transition, green to brown, because the icon strokes currentColor. */
.link-tel { display: inline-flex; align-items: center; gap: 10px; }
.link-tel__ic {
  width: 19px; height: 19px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.link-tel:hover { text-decoration: none; }
.link-tel:hover span { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Live open / closed status ---------- */
.openstatus {
  display: inline-flex; align-items: flex-start; gap: 9px;
  font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 13px;
  line-height: 1.4; color: var(--muted);
}
.openstatus[hidden] { display: none; }
.openstatus__dot {
  position: relative; flex: none;
  width: 9px; height: 9px; margin-top: 5px; border-radius: 50%;
  background: var(--muted);
}
.openstatus.is-open { color: var(--green-deep); }
.openstatus.is-open .openstatus__dot { background: var(--green); }
.openstatus.is-closed { color: var(--brown); }
.openstatus.is-closed .openstatus__dot { background: var(--brown); opacity: .55; }
/* final hour before close: still open (dot keeps its pulse) but warms to brown */
.openstatus.is-open.is-soon { color: var(--brown); }
.openstatus.is-open.is-soon .openstatus__dot { background: var(--brown); }
.openstatus.is-open .openstatus__dot::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; background: var(--green);
  animation: openpulse 2.4s cubic-bezier(.2, .6, .3, 1) infinite;
}
.openstatus.is-open.is-soon .openstatus__dot::after { background: var(--brown); }
@keyframes openpulse {
  0%   { transform: scale(1); opacity: .5; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .openstatus.is-open .openstatus__dot::after { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 16px;
  line-height: 1;
  padding: 15px 30px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background-color var(--t-base) ease-out, color var(--t-base) ease-out,
              border-color var(--t-base) ease-out, transform var(--t-fast) ease-out,
              box-shadow var(--t-base) ease-out;
}
.btn--sm { padding: 10px 20px; font-size: 15px; }
.btn--block { display: flex; width: 100%; }

.btn--primary { background: var(--green); color: #16290a; box-shadow: var(--shadow); }
.btn--primary:hover { background: var(--green-dark); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost { background: transparent; color: var(--brown); border-color: var(--brown); }
.btn--ghost:hover { background: var(--brown); color: var(--white); transform: translateY(-2px); }

.btn--soft { background: var(--green-tint); color: var(--green-deep); border-color: var(--green-tint-2); }
.btn--soft:hover { background: var(--green-tint-2); border-color: var(--green); }

.btn--brown { background: var(--brown-dark); color: var(--white); }
.btn--brown:hover { background: #4a250d; transform: translateY(-2px); box-shadow: var(--shadow-lift); }

/* ==========================================================================
   1. Header
   ========================================================================== */
.header {
  position: sticky; top: 0; z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t-base) ease-out;
}
.header.is-stuck { box-shadow: var(--shadow); }
.header__inner {
  display: flex; align-items: center; gap: 20px;
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand__mark { width: 40px; height: 40px; transition: transform var(--t-slow) ease-out; }
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.06); }
.brand__name {
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 20px;
  line-height: 1.1; letter-spacing: -.02em;
  color: var(--ink);
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 5px; }
.nav__link {
  display: block;
  white-space: nowrap;
  padding: 10px;
  border-radius: var(--radius);
  font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 15px;
  color: #3d3128;
  position: relative;
  transition: color var(--t-fast) ease-out, background-color var(--t-fast) ease-out;
}
.nav__link::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 5px;
  height: 2px; background: var(--green); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) ease-out;
}
.nav__link:hover { color: var(--green-deep); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--green-deep); }
.nav__link.is-active::after { transform: scaleX(1); }

/* phone number, sits between the nav and the Book Now button */
.header__phone {
  display: inline-flex; align-items: center; gap: 8px;
  flex: none;
  margin-left: 20px;
  padding: 8px 10px;
  border-radius: var(--radius);
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 15px;
  color: var(--brown);
  white-space: nowrap;
  transition: color var(--t-fast) ease-out, background-color var(--t-fast) ease-out;
}
.header__phone:hover { color: var(--green-deep); background: var(--green-tint); }
.header__phone-ic {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.header__actions { display: flex; align-items: center; gap: 15px; margin-left: 15px; flex: none; }

.burger {
  display: none;
  width: 44px; height: 44px;
  background: var(--green-tint); border: 1px solid var(--green-tint-2);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  transition: background-color var(--t-fast) ease-out;
}
.burger__bar {
  display: block; width: 20px; height: 2px; background: var(--green-deep); border-radius: 2px;
  transition: transform var(--t-base) ease-out, opacity var(--t-fast) ease-out;
}
.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu: grid-rows animation, true-hidden when closed */
.mobile {
  position: fixed;
  left: 0; right: 0;
  top: var(--header-h);
  z-index: 59;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow) ease-out;
  max-height: calc(100dvh - var(--header-h));
  overflow: hidden;
}
.mobile[hidden] { display: none; }
.mobile[data-open="true"] { grid-template-rows: 1fr; }
.mobile__inner { min-height: 0; overflow: hidden; overflow-y: auto; }
.mobile__list { padding: 10px 25px 5px; }
.mobile__list a {
  display: block; padding: 15px 5px;
  border-bottom: 1px solid var(--line);
  font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 18px;
}
.mobile__list li:last-child a { border-bottom: 0; }
.mobile__list a:hover { color: var(--green-deep); }
.mobile__foot { padding: 15px 25px 30px; display: grid; gap: 15px; justify-items: center; }
.mobile__phone { font-family: "Montserrat", sans-serif; font-weight: 600; color: var(--brown); }

.mobile__scrim {
  position: fixed; inset: 0; z-index: 58;
  background: rgba(43,33,24,.35);
  opacity: 0;
  transition: opacity var(--t-base) ease-out;
}
.mobile__scrim.is-on { opacity: 1; }

/* ==========================================================================
   2. Hero
   ========================================================================== */
.hero {
  position: relative;
  background: linear-gradient(180deg, #f7fded 0%, var(--green-tint) 55%, #eaf7d6 100%);
  /* bottom padding just needs to clear the rating chip's straddle-overhang
     below the photo AND the service-card bar that pulls up over the hero.
     See .chip--rating. */
  padding: 70px 0 115px;
  overflow: hidden;
}
.hero__wash {
  position: absolute; inset: 0;
  background:
    radial-gradient(520px 340px at 82% 22%, rgba(112,200,8,.16), transparent 70%),
    radial-gradient(420px 300px at 8% 88%, rgba(121,60,22,.07), transparent 70%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: 45px;
  align-items: center;
}

.hero__title {
  font-size: clamp(38px, 5.2vw, 60px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.025em;
}
.hero__title em {
  font-style: normal;
  color: var(--green-deep);
  white-space: nowrap;
  background-image: linear-gradient(rgba(112,200,8,.30), rgba(112,200,8,.30));
  background-repeat: no-repeat;
  background-size: 100% .14em;
  background-position: 0 .86em;
  padding: 0 .04em;
}
.hero__lede {
  margin-top: 25px;
  font-size: 19px;
  color: #55483d;
  max-width: 500px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 35px; }
.hero__points {
  display: flex; flex-wrap: wrap; gap: 10px 20px;
  margin-top: 35px;
}
.hero__points li {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: #4c4036;
  white-space: nowrap;
}
.hero__points svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: var(--green-deep); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}

/* hero art: landscape salon photo, paw badge anchored in the corner.
   The rating chip has two behaviours:
     desktop (>900px) - hovers in the gap between the photo and the service
                        card bar, centred under the photo, no overlap
     mobile  (<=900px) - straddles the photo's bottom-right corner
   The art column sits on the bottom of the hero row, so the distance from the
   photo to the service-card bar is the same at every viewport width. That gap
   is: .art padding-bottom + .hero padding-bottom - .servicebar margin-top. */
.hero__art { position: relative; align-self: end; }
.art { max-width: 460px; margin-left: auto; padding-bottom: 15px; }
.art__frame { position: relative; }
.art__panel {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-lg);
  background: var(--green-tint);
  border: 1px solid rgba(112,200,8,.35);
  box-shadow: var(--shadow-deep);
  overflow: hidden;
}
.art__photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 52% 55%;
}
/* flush into the frame's bottom-left corner; the panel's overflow clip
   rounds the outer corner for us */
.art__badge {
  position: absolute;
  left: 0; bottom: 0;
  width: 84px; height: 84px;
  border-radius: 0 var(--radius-lg) 0 0;
  background: var(--white);
  display: grid; place-items: center;
  box-shadow: 0 -6px 18px rgba(20,36,51,.14);
}
.art__badge img { width: 50px; height: 50px; }

.chip {
  position: absolute;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 10px 15px;
  display: grid; gap: 0;
}
.chip__label {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.chip__value {
  font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 14px;
  color: var(--ink); line-height: 1.4;
  white-space: nowrap;
}
/* straddles the photo panel's bottom-right corner: anchored flush to the
   corner, then nudged right/down by a fraction of its own box so ~70% of
   its width still sits on the photo and ~30% hangs off the right edge,
   split ~50/50 across the bottom edge. Percentages in transform resolve
   against the chip's own size, so the ratio holds at every breakpoint. */
.chip--rating {
  left: auto;
  right: 0;
  top: auto;
  bottom: 0;
  transform: translate(30%, 50%);
  animation: float-chip 6s ease-in-out .8s infinite;
}
.chip__stars { display: flex; gap: 2px; margin-bottom: 5px; }
.chip__stars svg, .quote__stars svg { width: 14px; height: 14px; fill: var(--green); }
@keyframes float-chip {
  0%, 100% { transform: translate(30%, 50%); }
  50%      { transform: translate(30%, 45%); }
}

/* Desktop only: the chip lets go of the photo and hovers free in the gap
   between the picture and the white service-card bar, its right edge flush
   with the photo's right edge, which is also the service-card bar's right
   edge. The gap is opened by .art's bottom padding (65px) which pushes the
   photo up inside its row rather than making the hero taller:
   65 + 115 (hero pad) - 80 (servicebar pull-up) = 100px of clear space for a
   ~61px chip, i.e. ~20px of air above and below it. */
@media (min-width: 901px) {
  .art { padding-bottom: 65px; }
  .chip--rating {
    left: auto;
    right: 0;
    top: 100%;
    bottom: auto;
    transform: translate(0, 20px);
    animation-name: float-chip-gap;
  }
  @keyframes float-chip-gap {
    0%, 100% { transform: translate(0, 20px); }
    50%      { transform: translate(0, 15px); }
  }
}

/* ==========================================================================
   3. Services (icon-card row overlapping the hero, PetSmart pattern)
   Section rhythm from here down (no two neighbours share a background):
   hero green tint / services white / why beige / gallery white /
   policies green tint / faq white / how it works beige / location white /
   CTA solid green / footer dark brown   (pricing hidden 2026-08-25, so the
   tints cascaded one slot up from the gallery down)
   ========================================================================== */
.services { background: var(--white); padding-bottom: 60px; }
.servicebar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-deep);
  padding: 15px;
  margin-top: -80px;
  position: relative;
  z-index: 2;
}
.servicecard {
  display: grid; justify-items: center; align-content: start; gap: 5px;
  padding: 20px 10px;
  border-radius: var(--radius);
  text-align: center;
  transition: background-color var(--t-base) ease-out, transform var(--t-base) ease-out;
}
.servicecard:hover { background: var(--green-tint); transform: translateY(-4px); }
.servicecard__icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--green-tint);
  display: grid; place-items: center;
  margin-bottom: 10px;
  transition: background-color var(--t-base) ease-out, transform var(--t-base) ease-out;
}
.servicecard:hover .servicecard__icon { background: var(--green); transform: scale(1.08) rotate(-6deg); }
.servicecard__icon svg {
  width: 28px; height: 28px;
  fill: none; stroke: var(--green-deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--t-base) ease-out;
}
.servicecard:hover .servicecard__icon svg { stroke: var(--white); }
.servicecard__name {
  font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 15px;
  line-height: 1.3; color: var(--ink);
}
.servicecard__meta { font-size: 13px; color: var(--muted); }

.services__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 45px;
  align-items: start;
  margin-top: 70px;
}
.services__intro-main h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; }
.services__intro-main .lede { margin-top: 15px; font-size: 18px; }
.services__intro-side {
  border-left: 3px solid var(--green);
  padding-left: 20px;
}
.services__intro-label {
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 5px;
}
.services__intro-side .openstatus { margin-top: 10px; }
.services__intro-note { font-size: 14px; color: var(--muted); margin-top: 5px; }

/* ==========================================================================
   5. Pricing (white)
   ========================================================================== */
.pricing { padding: 85px 0 90px; background: var(--white); }
.price-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}
.price {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 25px;
  position: relative;
  box-shadow: var(--shadow);
  transition: transform var(--t-base) ease-out, box-shadow var(--t-base) ease-out, border-color var(--t-base) ease-out;
}
.price:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--green-tint-2); }
.price--featured {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green), var(--shadow-lift);
  background: linear-gradient(180deg, #fbfff4 0%, var(--white) 40%);
}
.price__badge {
  position: absolute; top: -12px; left: 25px;
  background: var(--green); color: #16290a;
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 15px; border-radius: var(--pill);
  box-shadow: var(--shadow);
}
.price__head { margin-bottom: 20px; }
.price__head h3 { font-size: 22px; font-weight: 700; }
.price__weight { font-size: 14px; color: var(--muted); }
.price__dog {
  display: block; height: 10px; margin-bottom: 15px;
  background: var(--brown);
  border-radius: var(--pill);
  opacity: .85;
}
.price__dog--s  { width: 20px; }
.price__dog--m  { width: 30px; background: var(--green-deep); }
.price__dog--l  { width: 40px; }
.price__dog--xl { width: 50px; }

.price__amount {
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 40px;
  line-height: 1; color: var(--ink);
  display: flex; align-items: baseline; gap: 5px;
  padding-bottom: 20px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.price__from {
  font-size: 13px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
}
.price__list { display: grid; gap: 10px; font-size: 15px; color: #5f5348; }
.price__list li { position: relative; padding-left: 25px; line-height: 1.45; }
.price__list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
  border-radius: 1px;
}
.price__eg {
  margin: 20px 0 25px;
  font-size: 13px; color: var(--muted); font-style: italic;
}
.price .btn { margin-top: auto; }

.addons {
  margin-top: 40px;
  background: var(--green-tint);
  border-radius: var(--radius);
  padding: 30px 35px 35px;
}
.addons__title {
  font-size: 18px; font-weight: 700; margin-bottom: 20px;
  color: var(--green-deep);
}
.addons__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px 40px;
}
.addons__list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(74,133,6,.28);
  font-size: 15px;
}
.addons__list b { font-family: "Montserrat", sans-serif; font-weight: 700; color: var(--brown); white-space: nowrap; }

/* ==========================================================================
   4. Why us (warm beige tint) - salon photos first, feature cards below
   ========================================================================== */
.why {
  background: var(--brown-tint);
  padding: 85px 0 90px;
  border-top: 1px solid var(--brown-line);
  border-bottom: 1px solid var(--brown-line);
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}
.feature {
  background: var(--white);
  border: 1px solid var(--brown-line);
  border-radius: var(--radius);
  padding: 30px 25px 35px;
  transition: transform var(--t-base) ease-out, box-shadow var(--t-base) ease-out;
}
.feature:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.feature__icon {
  width: 55px; height: 55px; border-radius: var(--radius);
  background: var(--green-tint);
  display: grid; place-items: center;
  margin-bottom: 20px;
  transition: background-color var(--t-base) ease-out;
}
.feature:hover .feature__icon { background: var(--green); }
.feature__icon svg {
  width: 27px; height: 27px;
  fill: none; stroke: var(--green-deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--t-base) ease-out;
}
.feature:hover .feature__icon svg { stroke: var(--white); }
.feature h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.feature p { font-size: 15px; color: #5f5348; }

/* ==========================================================================
   7. How it works (white)
   ========================================================================== */
.steps { padding: 85px 0 90px; background: var(--brown-tint); }
.step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  position: relative;
}
.step-grid::before {
  content: "";
  position: absolute;
  top: 30px; left: 16%; right: 16%;
  height: 2px;
  background-image: linear-gradient(90deg, var(--green-tint-2) 60%, transparent 0);
  background-size: 12px 2px;
  background-repeat: repeat-x;
}
.step {
  position: relative;
  text-align: center;
  padding: 0 10px;
}
.step__num {
  position: relative;
  display: grid; place-items: center;
  width: 60px; height: 60px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--green);
  color: var(--green-deep);
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 22px;
  box-shadow: 0 0 0 6px var(--white), var(--shadow);
  transition: background-color var(--t-base) ease-out, color var(--t-base) ease-out, transform var(--t-base) ease-out;
}
.step:hover .step__num { background: var(--green); color: #16290a; transform: translateY(-3px); }
.step h3 { font-size: 21px; font-weight: 700; margin-bottom: 10px; }
.step p { font-size: 15px; color: #5f5348; max-width: 300px; margin: 0 auto; }

/* ==========================================================================
   6. Gallery & reviews (light green tint)
   ========================================================================== */
.quotes {
  padding: 85px 0 90px;
  background: var(--white);
  border-top: 1px solid var(--green-tint-2);
  border-bottom: 1px solid var(--green-tint-2);
}

/* photo mosaic: fixed row bands so mixed aspect ratios stay aligned */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 150px;
  gap: 15px;
  margin-bottom: 40px;
}
.tile {
  position: relative;
  margin: 0;
  grid-row: span 2;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--green-tint);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.tile--wide { grid-column: span 2; }
/* landscape sources that need the crop biased towards the top of the frame */
.tile--top img { object-position: center 22%; }
.tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--t-slow) ease-out;
}
.tile:hover img { transform: scale(1.05); }
.tile figcaption {
  position: absolute; right: 0; bottom: 0; left: 0;
  padding: 35px 15px 12px;
  background: linear-gradient(to top, rgba(26,18,10,.82) 0%, rgba(26,18,10,.55) 45%, rgba(26,18,10,0) 100%);
  color: var(--white);
  font-family: "Montserrat", sans-serif; font-weight: 600;
  font-size: 13px; line-height: 1.35;
  pointer-events: none;
}
/* the whole tile is one button that opens the lightbox */
.tile__open {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  padding: 0; margin: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: zoom-in;
  transition: background-color var(--t-base) ease-out;
}
.tile__open:hover { background: rgba(112,200,8,.14); }
.tile__open:focus-visible { outline: 3px solid var(--green-deep); outline-offset: -3px; border-radius: var(--radius); }
.tile__open::after {
  content: "";
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a8506' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l4.5 4.5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: scale(.85);
  transition: opacity var(--t-base) ease-out, transform var(--t-base) ease-out;
}
.tile:hover .tile__open::after,
.salon__shot:hover .tile__open::after,
.tile__open:focus-visible::after { opacity: 1; transform: scale(1); }

/* salon photos in the why-us section (they lead the section) */
.salon {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  margin-bottom: 30px;
}
/* these open in the same lightbox as the gallery tiles, so they carry the same
   full-card .tile__open button (see .tile__open above) */
.salon__shot {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--brown-line);
  background: var(--white);
  box-shadow: var(--shadow);
}
.salon__shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--t-slow) ease-out;
}
.salon__shot:hover img { transform: scale(1.03); }
.salon__shot figcaption {
  padding: 15px 20px;
  font-size: 14px; color: #5f5348;
  font-family: "Montserrat", sans-serif; font-weight: 600;
}

.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}
.quote {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  padding: 30px 30px 25px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: transform var(--t-base) ease-out, box-shadow var(--t-base) ease-out;
}
.quote:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.quote__stars { display: flex; gap: 3px; margin-bottom: 15px; }
.quote__source {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 15px;
  font-family: "Montserrat", sans-serif; font-weight: 700;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.quote__source svg {
  width: 16px; height: 16px; flex: none;
  fill: var(--green-deep); stroke: none;
}

/* third card: link through to the salon's Google reviews */
.quote--link {
  border-left-color: var(--brown);
  background: linear-gradient(180deg, var(--green-tint) 0%, var(--white) 60%);
  text-align: left;
}
/* green star lives next to the big rating number */
.rating-star { fill: var(--green); stroke: none; flex: none; }
.quote--link .quote__rating {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 10px;
}
.quote--link .quote__rating .rating-star { width: 30px; height: 30px; align-self: center; }
.quote--link .quote__rating b {
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 40px;
  line-height: 1; color: var(--green-deep);
}
.quote--link .quote__rating span { font-size: 14px; color: var(--muted); }
.quote__link-text {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 20px;
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 16px;
  color: var(--brown);
  line-height: 1.35;
}
.quote__arrow {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-base) ease-out;
}
.quote--link:hover .quote__link-text { text-decoration: underline; text-underline-offset: 4px; }
.quote--link:hover .quote__arrow { transform: translateX(4px); }
.quote blockquote { margin: 0; flex: 1; }
.quote blockquote p { font-size: 16px; color: #4c4036; line-height: 1.6; }
.quote figcaption {
  margin-top: 20px; padding-top: 15px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
/* reviewer disc, initials in place of a Google profile photo */
.quote__avatar {
  flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 15px;
  letter-spacing: .02em; color: var(--white);
  background: var(--green-deep);
}
.quote__avatar--b { background: var(--brown); }
.quote__id { display: grid; gap: 2px; min-width: 0; }
.quote figcaption .quote__source { margin-bottom: 0; font-size: 11px; }
.quote figcaption .quote__source svg { width: 14px; height: 14px; }
.quote__who { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 15px; }
.quote__pet { font-size: 13px; color: var(--muted); }

.stats {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  background: var(--white);
  border: 1px solid var(--green-tint-2);
  border-radius: var(--radius);
  padding: 30px 25px;
  box-shadow: var(--shadow);
}
.stat { text-align: center; }
.stat b {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 34px;
  color: var(--green-deep); line-height: 1.1;
}
.stat b .rating-star { width: 26px; height: 26px; }
.stat span { font-size: 14px; color: #5f5348; }

/* ==========================================================================
   8. FAQ (warm beige tint)
   ========================================================================== */
.faq {
  background: var(--white);
  padding: 85px 0 90px;
  border-top: 1px solid var(--brown-line);
  border-bottom: 1px solid var(--brown-line);
}
.faq__inner {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 50px;
  align-items: start;
}
.faq__aside { position: sticky; top: calc(var(--header-h) + 30px); }
.faq__aside .btn { margin-top: 25px; }

.faq__list { display: grid; gap: 10px; }
.acc {
  border: 1px solid var(--brown-line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  transition: border-color var(--t-base) ease-out, box-shadow var(--t-base) ease-out;
}
.acc.is-open { border-color: var(--green); box-shadow: var(--shadow); }
.acc__h { margin: 0; font-size: inherit; }
.acc__btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: transparent; border: 0; cursor: pointer;
  padding: 20px 25px;
  text-align: left;
  font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 17px;
  color: var(--ink);
  transition: background-color var(--t-fast) ease-out, color var(--t-fast) ease-out;
}
.acc__btn:hover { background: var(--green-tint); color: var(--green-deep); }
.acc.is-open .acc__btn { color: var(--green-deep); }
.acc__chev {
  flex: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--green-tint);
  position: relative;
  transition: transform var(--t-slow) ease-out, background-color var(--t-base) ease-out;
}
.acc__chev::before, .acc__chev::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 10px; height: 2px; background: var(--green-deep); border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--t-slow) ease-out;
}
.acc__chev::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc.is-open .acc__chev { background: var(--green); }
.acc.is-open .acc__chev::before, .acc.is-open .acc__chev::after { background: #16290a; }
.acc.is-open .acc__chev::after { transform: translate(-50%, -50%) rotate(0deg); }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow) ease-out;
}
.acc.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel-inner { min-height: 0; overflow: hidden; }
.acc__panel-inner p {
  padding: 0 25px 25px;
  font-size: 16px; color: #5f5348;
}
.acc__panel-inner a {
  color: var(--green-deep); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
.acc__panel-inner a:hover { color: var(--brown); }

/* ==========================================================================
   9. Salon policies (white)
   ========================================================================== */
.policies {
  background: var(--green-tint);
  padding: 85px 0 90px;
}
.policy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.policy {
  display: flex; align-items: flex-start; gap: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  padding: 25px 25px 25px 20px;
  box-shadow: var(--shadow);
  transition: transform var(--t-base) ease-out, box-shadow var(--t-base) ease-out;
}
.policy:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.policy--wide { grid-column: 1 / -1; border-left-color: var(--brown); }
.policy__icon {
  flex: none;
  width: 45px; height: 45px; border-radius: var(--radius);
  background: var(--green-tint);
  display: grid; place-items: center;
  transition: background-color var(--t-base) ease-out;
}
.policy:hover .policy__icon { background: var(--green); }
.policy__icon svg {
  width: 23px; height: 23px;
  fill: none; stroke: var(--green-deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--t-base) ease-out;
}
.policy:hover .policy__icon svg { stroke: var(--white); }
.policy--wide .policy__icon { background: var(--brown-tint); }
.policy--wide .policy__icon svg { stroke: var(--brown); }
.policy--wide:hover .policy__icon { background: var(--brown); }
.policy h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.policy p { font-size: 15px; color: #5f5348; }
.policies__note {
  margin-top: 30px;
  text-align: center;
  font-size: 15px; color: var(--muted);
}
.policies__note a {
  font-family: "Montserrat", sans-serif; font-weight: 700; color: var(--green-deep);
}
.policies__note a:hover { color: var(--brown); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   10. Location & hours (light green tint)
   ========================================================================== */
.location {
  background: var(--white);
  padding: 85px 0 90px;
  border-top: 1px solid var(--green-tint-2);
}
.location__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 25px;
  align-items: stretch;
}
.location__map {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--green-tint-2);
  background: var(--white);
  box-shadow: var(--shadow);
  min-height: 380px;
}
.location__map iframe {
  display: block;
  width: 100%; height: 100%;
  min-height: 380px;
  border: 0;
}
.location__panel {
  display: grid;
  align-content: start;
  gap: 25px;
  background: var(--white);
  border: 1px solid var(--green-tint-2);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow);
}
.location__panel h3 {
  font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 15px;
}
.location__address {
  font-style: normal;
  font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
}
.location__dir {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 15px;
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 15px;
  color: var(--green-deep);
}
.location__dir svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-base) ease-out;
}
.location__dir:hover { color: var(--brown); text-decoration: underline; text-underline-offset: 4px; }
.location__dir:hover svg { transform: translateX(4px); }
.location__tel { display: block; margin-top: 15px; font-size: 20px; }
.location__block--hours { border-top: 1px solid var(--line); padding-top: 25px; }
.location__hours-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 15px; flex-wrap: wrap;
  margin-bottom: 15px;
}
.location__hours-head h3 { margin-bottom: 0; }
.location__hours-head .openstatus { flex: none; }

.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td {
  text-align: left; padding: 9px 0;
  border-bottom: 1px dashed var(--brown-line);
  font-weight: 400; font-size: 15px;
}
.hours th { color: #5f5348; }
.hours td {
  text-align: right; color: var(--ink);
  font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 14px;
  white-space: nowrap;
}
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours__row--off th, .hours__row--off td { color: var(--brown); }
.hours__note {
  margin-top: 15px;
  font-size: 13px; color: var(--muted); line-height: 1.5;
}

/* ==========================================================================
   11. CTA band
   ========================================================================== */
.cta {
  position: relative;
  background: var(--green);
  padding: 60px 0;
  overflow: hidden;
}
.cta__paw {
  position: absolute;
  background: url("images/logo.png") center / contain no-repeat;
  opacity: .13;
  filter: brightness(0) invert(1);
  pointer-events: none;
}
.cta__paw--a { width: 180px; height: 180px; top: -40px; left: -35px; transform: rotate(-18deg); }
.cta__paw--b { width: 130px; height: 130px; bottom: -35px; right: 5%; transform: rotate(22deg); }
.cta__inner {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 30px;
}
.cta h2 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 700; color: #16290a; }
.cta p { margin-top: 10px; color: #234010; font-size: 17px; max-width: 460px; }
.cta__actions { display: grid; gap: 10px; justify-items: center; }
.cta__call { font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 14px; color: #234010; }
.cta__call:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   12. Footer
   ========================================================================== */
.footer {
  background: var(--brown-dark);
  color: #eadfd4;
  padding: 70px 0 30px;
  font-size: 15px;
}
.footer h3 {
  color: var(--white);
  font-size: 14px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 20px;
}
.footer a { transition: color var(--t-fast) ease-out; }
.footer a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.footer :focus-visible { outline-color: var(--green); }

.footer__top {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 50px;
  padding-bottom: 45px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.brand--footer .brand__name { color: var(--white); }
.footer__blurb { margin-top: 20px; color: #d3c3b4; font-size: 15px; }
.footer__social { display: flex; gap: 10px; margin-top: 20px; }
.footer__social a {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08);
  color: #eadfd4;
  transition: background-color var(--t-base) ease-out, color var(--t-base) ease-out, transform var(--t-base) ease-out;
}
.footer__social a:hover { background: var(--green); color: #16290a; transform: translateY(-3px); }
.footer__social svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

.footer__links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__col a { color: #d3c3b4; }

.footer__mid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 45px 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.footer__contact address { font-style: normal; color: #d3c3b4; }
.footer__contact p { margin-top: 10px; }
.footer__contact a { font-family: "Montserrat", sans-serif; font-weight: 600; color: var(--white); }
/* the full hours table lives in the Location section; the footer keeps the
   two confirmed facts and a link across to it */
.footer__hours-line {
  font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 15px;
  color: var(--white);
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,255,255,.14);
}
.footer__hours-note { margin-top: 15px; font-size: 13px; color: #b8a695; line-height: 1.5; }
.footer__hours-link {
  display: inline-block; margin-top: 15px;
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 14px;
  color: var(--green);
}
.footer__cta p { color: #d3c3b4; margin-bottom: 20px; }

.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 15px;
  align-items: center; justify-content: space-between;
  padding-top: 25px;
  font-size: 13px; color: #b8a695;
}
.footer__legal { display: flex; gap: 10px; align-items: center; }

/* ==========================================================================
   Gallery lightbox (no library, no backdrop blur)
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 25px;
}
.lightbox[hidden] { display: none; }
.lightbox__scrim {
  position: absolute; inset: 0;
  background: rgba(26,18,10,.88);
  opacity: 0;
  transition: opacity var(--t-base) ease-out;
}
.lightbox.is-open .lightbox__scrim { opacity: 1; }

.lightbox__dialog {
  position: relative;
  width: 100%;
  max-width: 1080px;
  display: grid;
  grid-template-columns: auto minmax(0, auto) auto;
  grid-template-areas: "prev fig next";
  align-items: center;
  justify-content: center;
  gap: 20px;
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transition: opacity var(--t-base) ease-out, transform var(--t-base) ease-out;
}
.lightbox.is-open .lightbox__dialog { opacity: 1; transform: none; }

.lightbox__figure {
  grid-area: fig;
  position: relative;
  justify-self: center;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-deep);
}
.lightbox__stage {
  display: grid; place-items: center;
  background: #1c130b;
  min-height: 180px;
  overflow: hidden;
}
.lightbox__img {
  display: block;
  width: auto; height: auto;
  max-width: 100%;
  max-height: min(70vh, 700px);
  object-fit: contain;
}

/* --- navigation transition (slide + fade in the direction of travel) ---
   app.js drives this: it pins the stage and the figure to the outgoing photo's
   measured box, swaps the image, then transitions the box to the incoming
   photo's box while the image slides in. That is what keeps a portrait ->
   landscape jump from snapping. Classes are added only for the ~300ms of the
   move, so nothing here affects the resting state. */
.lightbox__img.is-out { transition: transform 90ms ease-in, opacity 90ms ease-in; }
.lightbox__img.is-in  { transition: transform 200ms cubic-bezier(.22,.7,.3,1), opacity 200ms ease-out; }
.lightbox__stage.is-sizing {
  transition: width 240ms cubic-bezier(.22,.7,.3,1), height 240ms cubic-bezier(.22,.7,.3,1);
}
.lightbox__figure.is-sizing {
  transition: max-width 240ms cubic-bezier(.22,.7,.3,1);
}
/* while a finger is on the photo the image follows the drag with no easing */
.lightbox__img.is-dragging { transition: none; }
.lightbox__cap {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 10px 20px;
  padding: 20px 25px;
  background: var(--white);
  border-top: 4px solid var(--green);
}
.lightbox__caption {
  font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 16px;
  color: var(--ink); line-height: 1.4;
}
.lightbox__count {
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}

.lightbox__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 50px; height: 50px;
  padding: 0;
  border: 1px solid var(--brown-line);
  border-radius: 50%;
  background: var(--white);
  color: var(--brown);
  cursor: pointer;
  box-shadow: var(--shadow-lift);
  transition: background-color var(--t-base) ease-out, color var(--t-base) ease-out,
              border-color var(--t-base) ease-out, transform var(--t-fast) ease-out;
}
.lightbox__btn svg {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.lightbox__btn:hover { background: var(--green); color: #16290a; border-color: var(--green); }
.lightbox__btn:active { transform: scale(.94); }
.lightbox__btn:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.lightbox__nav-label { display: none; }

.lightbox__nav--prev { grid-area: prev; }
.lightbox__nav--next { grid-area: next; }

.lightbox__close {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 45px; height: 45px;
  background: rgba(255,255,255,.92);
}
.lightbox__close svg { width: 20px; height: 20px; }

@media (max-width: 860px) {
  /* arrows move under the photo so the image keeps the full width, and they
     grow into pill buttons that are easy to hit with a thumb */
  .lightbox { padding: 15px; }
  .lightbox__dialog {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "fig  fig"
      "prev next";
    gap: 15px;
  }
  .lightbox__btn { width: 100%; max-width: 200px; height: 50px; border-radius: var(--pill); }
  .lightbox__nav--prev { justify-self: start; }
  .lightbox__nav--next { justify-self: end; }
  .lightbox__nav-label {
    display: inline;
    font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 15px;
  }
  .lightbox__close { width: 45px; height: 45px; max-width: none; border-radius: 50%; }
  .lightbox__img { max-height: 58vh; }
  .lightbox__cap { padding: 15px 20px; }
  .lightbox__caption { font-size: 15px; }
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--t-slow) ease, transform var(--t-slow) ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1040px) {
  /* tighten the header so brand + nav + phone + button still fit in one row */
  .nav__list { gap: 2px; }
  .nav__link { padding: 10px 4px; font-size: 14px; }
  .header__phone { margin-left: 6px; padding: 8px 4px; font-size: 14px; gap: 6px; }
  .header__actions { margin-left: 10px; }
  .header__actions .btn--sm { padding: 10px 16px; }
  /* four price cards stop fitting once the container leaves its max width */
  .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services__intro { grid-template-columns: 1fr; gap: 30px; }
  .faq__inner { grid-template-columns: 1fr; gap: 35px; }
  .faq__aside { position: static; }
  .location__grid { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: flex; }
  .header__phone { display: none; }
  .header__actions { margin-left: auto; }

  /* same straddle logic as desktop: chip corner-anchors to the photo, hero
     just needs enough bottom padding to clear its overhang + the servicebar */
  .hero { padding: 50px 0 115px; }
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .hero__art { max-width: 460px; margin: 0 auto; width: 100%; }
  .art { margin: 0 auto; }

  .policy-grid { grid-template-columns: 1fr; }
  .location__grid { grid-template-columns: 1fr; }
  .location__map, .location__map iframe { min-height: 320px; }

  .servicebar { grid-template-columns: repeat(3, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .quote-grid { grid-template-columns: 1fr; }
  /* two columns: let the grid back-fill the slot a wide tile cannot use */
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; grid-auto-flow: dense; }
  .addons__list { grid-template-columns: repeat(2, 1fr); gap: 5px 30px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 25px 20px; }

  .footer__top { grid-template-columns: 1fr; gap: 40px; }
  .footer__mid { grid-template-columns: 1fr; gap: 35px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .container { padding: 0 20px; }

  .header__inner { gap: 10px; min-height: 62px; }
  .header__actions { gap: 10px; margin-left: auto; }
  .brand__mark { width: 34px; height: 34px; }
  .brand__name { font-size: 17px; }
  .btn--sm { padding: 10px 14px; font-size: 14px; }
  .burger { width: 40px; height: 40px; }

  .hero { padding: 40px 0 105px; }
  .hero__lede { font-size: 17px; }
  /* normal content-width pills, same shape and weight as the header's Book Now
     button, sitting side by side on one row and left aligned with the hero
     copy. They wrap to a second row on their own if a narrower phone needs it. */
  .hero__cta { gap: 12px; margin-top: 30px; }
  .hero__cta .btn { flex: 0 0 auto; padding: 13px 22px; font-size: 15px; }
  .hero__points { gap: 10px 20px; }
  .art { max-width: 340px; padding-bottom: 10px; }
  .art__badge { width: 58px; height: 58px; border-radius: 0 var(--radius) 0 0; }
  .art__badge img { width: 36px; height: 36px; }
  /* narrower chip, still straddling the photo's bottom-right corner; the
     value text wraps to two lines here so the chip's own footprint (and
     therefore its 30%-off overhang) stays small enough for narrow phones */
  .chip--rating { padding: 8px 12px; }
  .chip__value { font-size: 13px; white-space: normal; max-width: 118px; }

  .servicebar {
    grid-template-columns: repeat(2, 1fr);
    margin-top: -70px;
    padding: 10px;
    gap: 5px;
  }
  .servicebar .servicecard:last-child { grid-column: 1 / -1; }
  .servicecard { padding: 20px 5px; }
  .servicecard__icon { width: 50px; height: 50px; }
  .servicecard__icon svg { width: 24px; height: 24px; }
  .servicecard__name { font-size: 14px; }

  .services { padding-bottom: 60px; }
  .services__intro { margin-top: 50px; }
  .pricing, .why, .steps, .faq, .quotes, .policies, .location { padding: 55px 0 60px; }
  .location__panel { padding: 25px 20px; }
  .location__map, .location__map iframe { min-height: 280px; }
  .policy { padding: 20px 20px 20px 16px; gap: 15px; }
  .policy__icon { width: 40px; height: 40px; }

  .price-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .addons { padding: 25px 20px 30px; }
  .addons__list { grid-template-columns: 1fr; }

  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 105px; gap: 10px; }
  .tile figcaption { font-size: 12px; padding: 30px 10px 10px; }
  .salon { grid-template-columns: 1fr; gap: 20px; }
  .step-grid { grid-template-columns: 1fr; gap: 35px; }
  .step-grid::before { display: none; }

  .stats { grid-template-columns: repeat(2, 1fr); padding: 25px 20px; }
  .stat b { font-size: 28px; gap: 6px; }
  .stat b .rating-star { width: 22px; height: 22px; }

  .acc__btn { padding: 15px 20px; font-size: 16px; gap: 15px; }
  .acc__panel-inner p { padding: 0 20px 20px; font-size: 15px; }

  .cta { padding: 50px 0; }
  .cta__inner { flex-direction: column; align-items: flex-start; }
  .cta__actions { width: 100%; justify-items: stretch; }
  .cta__actions .btn { width: 100%; }
  .cta__call { text-align: center; }

  .footer { padding: 55px 0 25px; }
  .footer__links { grid-template-columns: 1fr; gap: 30px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* very narrow phones (below the 390px iPhone width): keep the header on one row */
@media (max-width: 389px) {
  .container { padding: 0 15px; }
  .header__inner { gap: 8px; }
  .header__actions { gap: 8px; }
  .header__actions .btn--sm { padding: 10px 12px; font-size: 13px; }
  .brand { gap: 8px; }
  .brand__name { font-size: 16px; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}