/* ── HOME DASHBOARD — hero card, quick-action tiles, popular services, info strip ── */

.hero-section {
  padding: 6.5rem 1rem 1.5rem;
}
/* Side-by-side at every width, phones included — copy on the left, photo
   fading in from the right. The phone tuning lives in the max-width:599px
   block further down: at full desktop type sizes this shape squeezes the
   copy column to ~180px and wraps the headline and button, so the type and
   padding step down rather than the layout changing shape. */
.hero-card {
  max-width: 1080px;
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  background: var(--linen);
  box-shadow: 0 20px 60px rgba(44,36,32,0.12);
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.hero-card-text {
  padding: 2.2rem 1.8rem;
  flex: 1 1 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
}
.hero-card-eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--greige);
}
.hero-card-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.1rem, 7vw, 3rem);
  line-height: 1.08;
  color: var(--espresso);
}
.hero-card-title em {
  font-style: italic;
  color: var(--taupe);
}
.hero-card-sub {
  font-size: 0.85rem;
  color: var(--greige);
  line-height: 1.6;
  max-width: 340px;
}
.hero-card-cta {
  margin-top: 0.6rem;
  align-self: flex-start;
  background: var(--taupe);
  background-image: none;
}
.hero-card-photo {
  position: relative;
  flex: 1 1 45%;
  overflow: hidden;
}
.hero-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Dissolves the photo's left edge into the card background. Must be built
   from --linen-rgb, not a hardcoded near-white - a fixed rgb(255,247,247)
   lays a pink haze over the photo in light mode and fades to *white*
   against the near-black card in dark mode. */
.hero-card-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--linen) 0%,
    rgba(var(--linen-rgb),0.95) 12%,
    rgba(var(--linen-rgb),0.8) 24%,
    rgba(var(--linen-rgb),0.55) 38%,
    rgba(var(--linen-rgb),0.3) 52%,
    rgba(var(--linen-rgb),0.12) 68%,
    rgba(var(--linen-rgb),0) 85%);
}
/* Phone tuning for the side-by-side hero. The copy column is only ~55% of a
   390px screen, so the desktop type sizes have to come down or the headline,
   the sub and the CTA all wrap. Layout shape is unchanged - only scale. */
@media (max-width: 599px) {
  .hero-section { padding: 5.5rem 0.75rem 1rem; }
  .hero-card { border-radius: 20px; }
  .hero-card-text { padding: 1.5rem 0.9rem 1.5rem 1.1rem; gap: 0.4rem; }
  .hero-card-eyebrow { font-size: 0.55rem; letter-spacing: 0.22em; }
  .hero-card-title { font-size: clamp(1.5rem, 8.5vw, 2.1rem); }
  .hero-card-sub { font-size: 0.72rem; line-height: 1.5; }
  .hero-card-cta {
    padding: 0.6rem 0.9rem;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    gap: 0.4rem;
  }
  .hero-card-cta i { font-size: 0.7rem; }
  /* Give the copy a little more of the card than the photo — below ~400px an
     even split leaves too little room for the headline. */
  .hero-card-text { flex: 1 1 58%; }
  .hero-card-photo { flex: 1 1 42%; }
}
@media (min-width: 900px) {
  .hero-section { padding: 7.5rem 2rem 2rem; }
  .hero-card {
    max-width: none;
    min-height: 480px;
    display: block;
    position: relative;
  }
  .hero-card-text {
    position: absolute;
    inset: 0;
    z-index: 1;
    max-width: 480px;
    padding: 3.5rem 3rem;
    gap: 0.9rem;
    background: none;
  }
  .hero-card-sub { max-width: 380px; font-size: 0.92rem; }
  .hero-card-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .hero-card-photo::after {
    background: linear-gradient(90deg,
      var(--linen) 0%,
      rgba(var(--linen-rgb),0.95) 18%,
      rgba(var(--linen-rgb),0.75) 32%,
      rgba(var(--linen-rgb),0.4) 48%,
      rgba(var(--linen-rgb),0.15) 65%,
      rgba(var(--linen-rgb),0) 80%);
  }
}

/* ── QUICK-ACTION TILES ── */
.quick-tiles-section {
  padding: 1.75rem 1rem;
}
/* Two across at every width, phones included (see the max-width:599px block
   below, which shrinks the icon, type and gutters so the labels still fit on
   one line at 320px rather than breaking mid-phrase). */
.quick-tiles {
  max-width: 1400px;
  margin: 0 auto;
  background: var(--cream);
  border-radius: 24px;
  padding: 1.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  box-shadow: 0 10px 40px rgba(44,36,32,0.08);
}
.quick-tile {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 0.7rem;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease, transform 0.2s ease;
}
.quick-tile:hover {
  background: var(--linen);
  transform: translateY(-2px);
}
.quick-tile-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blush);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--espresso);
  font-size: 1.05rem;
}
.quick-tile-body { flex: 1; min-width: 0; }
.quick-tile-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--espresso);
}
.quick-tile-desc {
  display: block;
  font-size: 0.7rem;
  color: var(--greige);
  margin-top: 0.15rem;
  line-height: 1.4;
}
.quick-tile-arrow {
  color: var(--taupe);
  font-size: 0.8rem;
  flex-shrink: 0;
}
/* Phone tuning for the 2-up grid. At 390px each tile is ~153px wide, of which
   the icon and chevron eat ~70px at desktop sizing - leaving too little for
   "Book Appointment". Shrinking the icon, dropping the chevron and stepping
   the type down buys the label enough room to stay on one line. */
@media (max-width: 599px) {
  .quick-tiles-section { padding: 1.25rem 0.75rem; }
  .quick-tiles { padding: 0.9rem 0.75rem; gap: 0.3rem; border-radius: 20px; }
  .quick-tile { padding: 0.6rem 0.4rem; gap: 0.5rem; border-radius: 12px; }
  .quick-tile-icon { width: 34px; height: 34px; font-size: 0.8rem; }
  .quick-tile-label { font-size: 0.72rem; line-height: 1.25; }
  .quick-tile-desc { font-size: 0.6rem; line-height: 1.3; margin-top: 0.1rem; }
  /* The whole tile is the tap target, so the chevron is decoration we can
     afford to lose at this width. */
  .quick-tile-arrow { display: none; }
}
/* iPhone SE / older small Androids — one more step down, otherwise
   "Book Appointment" and "My Appointments" still break across two lines. */
@media (max-width: 359px) {
  .quick-tiles { padding: 0.7rem 0.55rem; }
  .quick-tile { padding: 0.5rem 0.28rem; gap: 0.38rem; }
  .quick-tile-icon { width: 28px; height: 28px; font-size: 0.68rem; }
  .quick-tile-label { font-size: 0.65rem; }
  .quick-tile-desc { font-size: 0.54rem; }
}
/* From here up each tile becomes its own raised card rather than a row in a
   shared panel - but still only two across: four columns at this width leaves
   ~65px of text per tile, which wrapped every label and description. */
@media (min-width: 900px) {
  .quick-tiles {
    gap: 1.25rem;
    padding: 0;
    background: none;
    box-shadow: none;
  }
  .quick-tile {
    padding: 1.25rem 1rem;
    gap: 1rem;
    background: var(--cream);
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(44,36,32,0.06);
  }
  .quick-tile:hover { box-shadow: 0 12px 34px rgba(44,36,32,0.1); }
  .quick-tile-icon { width: 52px; height: 52px; font-size: 1.2rem; }
  .quick-tile-label { font-size: 0.9rem; }
}
/* Four across only once each tile clears ~300px, which is where the longest
   label ("Book Appointment") and its description both hold one/two lines. */
@media (min-width: 1200px) {
  .quick-tiles { grid-template-columns: repeat(4, 1fr); }
}

/* ── MINI SECTION TITLE (dashed, compact — for app-style headers) ── */
.mini-section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--espresso);
  margin-bottom: 1.75rem;
}
.mini-section-title::before,
.mini-section-title::after {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--warmgrey);
}
.mini-section-heading {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 300;
  color: var(--espresso);
  margin-bottom: 1.75rem;
}
.mini-section-heading em { font-style: italic; color: var(--taupe); }

/* ── POPULAR SERVICES ── */
.popular-services-section {
  padding: 2rem 1rem;
}
/* A wrapping grid, not a sideways scroller.
   The strip used to run off the edge of the screen: the services past the
   third were invisible unless you thought to swipe, and nothing on the page
   said they were there. A grid shows every service at once - which is the
   whole point of a list of what the salon does. */
/* auto-FIT, not auto-fill, and a track that does not stretch.
   auto-fill lays down as many tracks as the width allows and keeps the empty
   ones, so four services on a wide phone sat in the first four columns of
   nine and the whole row hung to the left of a centred heading. auto-fit
   collapses the empties, and capping the track instead of letting it be 1fr
   stops four services spreading themselves thin across the full width -
   together they leave a group that is simply as wide as its contents, which
   justify-content then centres at any screen size and any number of
   services. */
.popular-services-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 120px));
  justify-content: center;
  gap: 1.1rem 0.75rem;
  padding: 0.25rem 0.25rem 1rem;
}
.service-thumb {
  width: auto;
  min-width: 0;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.service-thumb-img {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 0.6rem;
  border: 3px solid var(--cream);
  box-shadow: 0 6px 20px rgba(44,36,32,0.14);
  background: var(--warmgrey);
}
.service-thumb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.service-thumb:hover .service-thumb-img img { transform: scale(1.08); }
.service-thumb-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--espresso);
}
.service-thumb-price {
  display: block;
  font-size: 0.66rem;
  color: var(--greige);
  margin-top: 0.15rem;
}
.service-thumb-book {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  color: var(--taupe);
  margin-top: 0.6rem;
  letter-spacing: 0.02em;
}
.service-thumb-book i { font-size: 0.6rem; transition: transform 0.2s ease; }
.service-thumb:hover .service-thumb-book i { transform: translateX(3px); }
/* ── ON A PHONE, ALL OF THEM ON ONE ROW ──
   The circles are a fixed 96px, which is wider than a quarter of a 360px
   screen - so four services could never fit across and the fourth dropped to
   a line of its own, looking like an afterthought rather than part of the
   set. The track minimum comes down and the circles come with it, because
   the image is what actually sets the floor here, not the grid. */
@media (max-width: 600px) {
  .popular-services-row {
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 0.9rem 0.4rem;
    padding-left: 0;
    padding-right: 0;
  }
  .service-thumb-img { width: 72px; height: 72px; border-width: 2px; }
  .service-thumb-label { font-size: 0.72rem; line-height: 1.3; }
  .service-thumb-price { font-size: 0.6rem; }
}

/* The 700px block that used to sit here did nothing. flex-wrap and
   overflow-x are flex properties left over from when this row was a sideways
   scroller, and are ignored on a grid; its justify-content is now in the base
   rule above, where it applies at every width rather than only above 700px. */
@media (min-width: 900px) {
  .popular-services-row {
    display: grid;
    /* Capped rather than 1fr for the same reason as the base rule: with 1fr,
       four cards stretched to fill the full 1100px and two would have been
       550px wide each. A card has a natural size; the row centres instead. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
    justify-content: center;
    gap: 1.25rem;
    max-width: 1100px;
    margin: 0 auto;
  }
  .service-thumb {
    background: var(--cream);
    border-radius: 18px;
    padding: 1.5rem 1rem 1.75rem;
    box-shadow: 0 8px 28px rgba(44,36,32,0.06);
  }
  .service-thumb-img { width: 130px; height: 130px; }
  .service-thumb-label { font-size: 0.92rem; }
  .service-thumb-book { display: flex; }
}

.view-all-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  max-width: 1400px;
  margin: 0.5rem auto 0;
  padding: 0.9rem;
  border: 1px solid var(--warmgrey);
  border-radius: 50px;
  color: var(--espresso);
  text-decoration: none;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  transition: all 0.2s ease;
}
.view-all-link:hover {
  background: var(--linen);
  border-color: var(--taupe);
}

/* ── BRAND / PRODUCTS SLIDESHOW BANNER (decorative — no shop, no checkout) ── */
.brand-banner-section {
  padding: 1.5rem 1rem;
}
/* Mobile: a single wide rectangular banner (2:1) with the video full-bleed
   and the copy overlaid in a bottom scrim - deliberately not the "photo
   stacked on top of a plain panel" shape the founder card already uses.
   Desktop (≥600px) switches to a side-by-side card instead. */
.brand-banner {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  background: var(--linen);
  box-shadow: 0 10px 40px rgba(44,36,32,0.06);
}
.brand-banner-text {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1.5rem 1.25rem;
  background: linear-gradient(to top, rgba(28,20,16,0.9) 0%, rgba(28,20,16,0.5) 55%, transparent 100%);
}
.brand-banner-eyebrow {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 0.2rem;
}
.brand-banner-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: 0.4rem;
}
.brand-banner-desc {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  max-width: 400px;
}
.brand-slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1.15;
  background: var(--warmgrey);
  overflow: hidden;
}
.brand-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}
.brand-slideshow img.active { opacity: 1; }
.brand-slideshow-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Decorative only — no controls, no click-to-pause/fullscreen, no
     browser-injected picture-in-picture hover button. */
  pointer-events: none;
}
.brand-slideshow-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--greige);
  font-size: 0.78rem;
  text-align: center;
  padding: 1rem;
}
.brand-slideshow-empty i { font-size: 1.4rem; color: var(--taupe); }
.brand-slideshow-dots {
  position: absolute;
  bottom: 0.9rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.4rem;
}
.brand-slideshow-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  transition: background 0.3s ease, transform 0.3s ease;
}
.brand-slideshow-dots span.active {
  background: #fff;
  transform: scale(1.3);
}
@media (min-width: 600px) {
  .brand-banner { display: flex; flex-direction: row-reverse; align-items: stretch; }
  .brand-slideshow { width: 45%; aspect-ratio: auto; }
  .brand-banner-text {
    position: static;
    flex: 1;
    padding: 2.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: none;
  }
  .brand-banner-eyebrow { color: var(--taupe); }
  .brand-banner-title { color: var(--espresso); }
  .brand-banner-desc { color: var(--greige); max-width: 320px; }
}

/* ── TEAM + REVIEWS ROW (reviews sit beside the team grid, slideshow of 3) ── */
.team-reviews-row {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.team-reviews-row .team-page-grid,
.team-reviews-row .team-featured-wrap { padding: 0; max-width: none; }
.reviews-sidebar {
  background: var(--linen);
  border-radius: 20px;
  padding: 1.5rem;
}
.mini-reviews-track {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: opacity 0.3s ease;
}
.mini-reviews-track.fading { opacity: 0; }
.mini-review-card {
  background: var(--cream);
  border: 1px solid var(--warmgrey);
  border-radius: 14px;
  padding: 1rem 1.1rem;
}
.mini-review-card .stars { color: var(--gold); font-size: 0.7rem; margin-bottom: 0.4rem; }
.mini-review-card p { font-size: 0.78rem; color: var(--espresso); line-height: 1.5; margin-bottom: 0.4rem; }
.mini-review-card span { font-size: 0.7rem; color: var(--greige); }
.reviews-sidebar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 1rem;
}
.reviews-nav-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--warmgrey);
  background: var(--cream);
  color: var(--taupe);
  font-size: 0.7rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.reviews-nav-arrow:hover {
  background: var(--taupe);
  color: #fff;
  border-color: var(--taupe);
}
.reviews-sidebar-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
}
.reviews-sidebar-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--warmgrey);
  transition: background 0.3s ease, transform 0.3s ease;
}
.reviews-sidebar-dots span.active { background: var(--taupe); transform: scale(1.3); }

@media (min-width: 1024px) {
  .team-reviews-row { flex-direction: row; align-items: flex-start; }
  /* min-width:0 lets the nested grid actually shrink to fit — otherwise a
     grid item's default min-width:auto refuses to shrink below its content's
     natural size and the row overflows past the viewport instead of wrapping. */
  .team-reviews-row .team-col { flex: 1; min-width: 0; }
  .reviews-sidebar { flex: 0 0 300px; min-width: 0; }
}
@media (min-width: 1024px) and (max-width: 1349px) {
  /* Not enough room for 5 full-size columns next to the sidebar — drop to 3
     so cards stay a readable width instead of squeezing to nothing. */
  .team-reviews-row .team-page-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .brand-reviews-row { flex-direction: row; align-items: stretch; }
  .reviews-sidebar { flex: 0 0 320px; display: flex; flex-direction: column; }
  .mini-reviews-track { flex: 1; }
}

/* ── WHY CHOOSE US (desktop only) ── */
.why-choose-section { display: none; }
@media (min-width: 900px) {
  .why-choose-section {
    display: block;
    padding: 3rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
  }
  .why-choose-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
    text-align: center;
  }
  .why-choose-item i { font-size: 1.3rem; color: var(--taupe); margin-bottom: 0.6rem; display: block; }
  .why-choose-label { font-size: 0.8rem; font-weight: 500; color: var(--espresso); margin-bottom: 0.35rem; }
  .why-choose-desc { font-size: 0.68rem; color: var(--greige); line-height: 1.5; }

  /* Why Choose Us already carries its own bottom padding, so the generic
     section top-padding right after it (up to 8rem at desktop-large) reads
     as a huge dead gap before "Meet Our Stylists". Tighten just this seam. */
  #team { padding-top: 3rem; }
}
/* Team's own bottom padding (up to 8rem at desktop-large) plus Gallery's
   generic top padding stacked the same way going into the next section. */
#team { padding-bottom: 3rem; }
#gallery { padding-top: 3rem; }

/* ── HOURS + MAP CARDS (restyled to match the app's card language) ── */
.hours-card {
  background: var(--cream);
  border: 1px solid var(--warmgrey);
  border-radius: 18px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 8px 28px rgba(44,36,32,0.05);
  margin-top: 1.5rem;
}
.hours-card .hours-list { margin-top: 0; }
.hours-card .hours-row:last-child { border-bottom: none; }

/* Compact variant — Mon–Fri / Sat–Sun collapsed to 2 rounded "chip" rows
   instead of a flat 7-row bordered list, with a circular icon badge and a
   pill-shaped status indicator instead of the old sharp-cornered tag.
   Stretched to match the map card's height alongside it (see
   .location-inner below) instead of leaving a tall empty gap. */
.hours-card-compact {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.hours-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.hours-card-label {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--espresso);
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.hours-card-label i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blush);
  color: var(--taupe);
  font-size: 0.85rem;
}
.hours-card-compact .status-badge { margin: 0; }
.hours-card-compact .hours-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
}
.hours-card-compact .hours-row {
  border-bottom: none;
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  background: var(--linen);
  transition: background 0.2s ease, transform 0.2s ease;
}
.hours-card-compact .hours-row .hours-day { font-weight: 500; }
/* The gradient's second stop and this shadow are hardcoded, so they do not
   follow --blush - both were rose and would have stayed pink on today's
   open day while every other blush surface went beige. */
.hours-card-compact .hours-row[data-active="true"] {
  background: linear-gradient(135deg, var(--blush), #e3d9ca);
  box-shadow: 0 6px 18px rgba(150,130,100,0.16);
}
.hours-card-compact .hours-row[data-active="true"] .hours-day,
.hours-card-compact .hours-row[data-active="true"] .hours-time {
  color: var(--espresso);
  font-weight: 600;
}
/* The hours card and the map are a pair standing side by side, so they have
   to start on the same line. .hours-card carries margin-top:1.5rem from where
   it is used further up the page; inside this grid that margin both dropped
   the card 24px below the top of the map and added itself to the row height,
   so the card finished 35px taller as well as lower. Two cards meant to read
   as one row looked like neither was aligned to anything. */
#location .hours-card { margin-top: 0; }

.map-card {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(44,36,32,0.06);
  border: 1px solid var(--warmgrey);
}
.map-card .map-frame { border: none; display: block; }

/* ── FAQ (restyled from bordered-list to app-style cards) ── */
.faq-list {
  max-width: 720px;
  margin: 2rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 900px) {
  .faq-list {
    max-width: 1100px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 0.85rem 1.25rem;
  }
  /* A lone last item (odd total) left stranded in column 1 — center it
     across both columns instead. */
  .faq-list > .faq-item:last-child:nth-child(2n+1) {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.625rem);
    justify-self: center;
  }
}

/* #location's own bottom padding plus the generic section top-padding right
   after it (up to 8rem at desktop-large) stacked into a huge dead gap before
   the FAQ heading - tighten just this seam, same fix as the team section.
   Its own bottom padding (also up to 8rem) left the same dead space before
   the info strip below, even though the info strip's own top padding is
   already small. */
#faq { padding-top: 3rem; padding-bottom: 3rem; }
.faq-item {
  background: var(--cream);
  border: 1px solid var(--warmgrey);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.faq-item:has(.faq-q.open) { border-color: var(--taupe); }
.faq-q {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.1rem 1.3rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
}
.faq-q .faq-text { flex: 1; }
.faq-q .faq-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blush);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: transform 0.3s ease, background 0.2s ease, color 0.2s ease;
}
.faq-q.open .faq-icon { background: var(--taupe); color: #fff; }
.faq-a p {
  padding: 0 1.3rem 1.2rem 1.3rem;
  font-size: 0.82rem;
}

/* ── SECONDARY PILL BUTTON (e.g. "View price list") ── */
.btn-outline-taupe {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.6rem;
  border: 1px solid var(--taupe);
  border-radius: 50px;
  color: var(--taupe);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn-outline-taupe:hover { background: var(--taupe); color: #fff; }
.services-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
/* Two ways on to the same shelf - browse the services, or read the prices -
   so they should look like a pair. flex-grow:1 let the first one take every
   spare pixel: it stretched to 1240px beside a button sized to its own text,
   which read as one real button and one very long input field. Both size to
   their content now and sit centred together. */
.services-cta-row .view-all-link {
  flex: 0 0 auto;
  max-width: none;
  margin-top: 0;
  padding: 0.75rem 1.6rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
@media (max-width: 520px) {
  /* Side by side they would each be about 150px, which cuts the labels. */
  .services-cta-row { flex-direction: column; align-items: stretch; }
  .services-cta-row .view-all-link,
  .services-cta-row .btn-outline-taupe { justify-content: center; }
  /* .view-all-link is centred elsewhere with `margin: 0.5rem auto 0`. Auto
     side margins beat align-items:stretch, so it kept its content width -
     a 174px pill sitting above a full-width button. */
  .services-cta-row .view-all-link { margin-left: 0; margin-right: 0; }
}

/* ── INFO STRIP ── */
.info-strip-section {
  padding: 1.5rem 1rem 4rem;
}
.info-strip {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 1rem;
  border-top: 1px solid var(--warmgrey);
  padding: 1.75rem 0.25rem 0;
}
.info-strip-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}
.info-strip-icon {
  color: var(--taupe);
  font-size: 1.05rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  width: 1.2rem;
  text-align: center;
}
.info-strip-label {
  font-size: 0.85rem;
  color: var(--espresso);
  font-weight: 500;
  margin-bottom: 0.2rem;
}
.info-strip-value {
  font-size: 0.72rem;
  color: var(--greige);
  font-weight: 400;
  line-height: 1.4;
}
.info-strip-value a { color: inherit; text-decoration: none; }
.info-strip-value a:hover { color: var(--taupe); }
@media (min-width: 900px) {
  .info-strip { grid-template-columns: repeat(4, 1fr); padding: 2.25rem 0.5rem 0; }
}

/* ── LESS VEIL OVER THE PHONE HERO ──
   The fade exists to dissolve the photo's left edge into the card so the two
   read as one surface. On a phone the photo column is only about 40% of the
   width, so the same curve was washing nearly all of it out - the salon was
   barely visible behind it. It now starts softer and clears sooner, leaving
   the photo readable while its edge still melts into the copy beside it. */
@media (max-width: 599px) {
  .hero-card-photo::after {
    background: linear-gradient(90deg,
      rgba(var(--linen-rgb),0.98) 0%,
      rgba(var(--linen-rgb),0.72) 14%,
      rgba(var(--linen-rgb),0.38) 30%,
      rgba(var(--linen-rgb),0.14) 48%,
      rgba(var(--linen-rgb),0) 66%);
  }
}