/* Willow & Bloom Studio — bespoke landing styles (builds on theme.css tokens) */

/* ---------- Page rhythm ----------
   The page below the hero is a stack of bento blocks separated by exactly one
   value, --bento-gap. Blocks never set their own outer spacing; the stack owns
   it, so the rhythm cannot drift out of sync block by block. */

.page-landing {
  /* one padding value for every bento card, so the blocks read as one system */
  --bento-pad: 2.75rem 3rem;

  /* Height the floating header occupies, so the hero can reserve exactly that
     much space at its top. The values track theme.css's header: one nav row
     above 900px, a stacked lockup + nav below it. */
  --landing-header-h: 5rem;

  /* the absolutely positioned header anchors to the page box, not the viewport */
  position: relative;
}

.page-landing main {
  display: flex;
  flex-direction: column;
  gap: var(--bento-gap);
}

.page-landing main > * { padding-block: 0; margin-block: 0; }

/* the services band is the one open (uncarded) block: it needs a little air
   inside itself so its title does not sit on the hero edge */
.page-landing main > .services { padding-block: 1.25rem 0.75rem; }

/* the footer joins the stack at the same rhythm as the cards */
.page-landing .site-footer { margin-top: var(--bento-gap); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* lucide arrow-right, sized off the label it sits beside */
.btn-arrow {
  display: inline-flex;
  align-items: center;
  flex: none;
  width: 1.45em;
  height: 1.45em;
}

.btn-arrow svg { width: 100%; height: 100%; }

/* ---------- Header over the hero ----------
   Landing-page only: the chrome floats on the photograph instead of sitting in
   a solid bar above it. A cream wash plus a backdrop blur keeps the dark nav
   type readable while the hero shows faintly through. The shared dashboard and
   blog pages have no hero, so theme.css keeps its solid bar there. */

.page-landing .site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  border-bottom: 0;
  /* opaque cream behind the lockup, easing to the translucent wash so the
     hero shows through on the right */
  background: linear-gradient(
    to right,
    rgba(251, 248, 242, 1) 0%,
    rgba(251, 248, 242, 1) 18%,
    rgba(251, 248, 242, 0.58) 52%,
    rgba(251, 248, 242, 0.58) 100%
  );
  backdrop-filter: blur(14px) saturate(1.2) brightness(1.22);
  -webkit-backdrop-filter: blur(14px) saturate(1.2) brightness(1.22);
}

/* the wash is thinner than the solid cream bar, so the lockup's second line
   drops its muted grey for a tone that still clears AA over the photograph */
.page-landing .site-header .brand-name::after { color: #3f3931; }

/* The hamburger only exists below the drawer breakpoint; above it the inline
   nav is the whole story and this button never renders. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.4rem;
  padding: 0;
  color: var(--color-ink);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-toggle svg { width: 1.4rem; height: 1.4rem; }

.nav-toggle:hover,
.nav-toggle.is-open {
  color: var(--color-brand);
  border-color: var(--color-accent);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  color: #f7f2e9;
  background-image:
    url("../../assets/img/willow-and-bloom/hero.webp"),
    radial-gradient(55% 95% at 72% 42%, rgba(250, 240, 222, 0.55), transparent 62%),
    radial-gradient(45% 80% at 92% 75%, rgba(228, 208, 178, 0.55), transparent 65%),
    radial-gradient(50% 90% at 8% 90%, rgba(120, 100, 76, 0.5), transparent 60%),
    linear-gradient(102deg, #574a3a 0%, #776550 30%, #9d8869 56%, #bda98a 78%, #d3c1a2 100%);
  background-size: cover;
  background-position: 58% 42%;
  overflow: hidden;
}

.hero::before {
  /* deep left-edge scrim + vignette: the copy column reads as a printed page
     over the photograph rather than text floating on a bright wall */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(30, 25, 19, 0.72), rgba(30, 25, 19, 0.5) 34%, rgba(30, 25, 19, 0.12) 62%, rgba(30, 25, 19, 0) 78%),
    linear-gradient(to bottom, rgba(30, 25, 19, 0.34), rgba(30, 25, 19, 0) 34%, rgba(30, 25, 19, 0.3));
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width: var(--container-max);
  min-height: min(38rem, 62vh);
  /* top padding carries the floating header's height so the copy never rides
     up under the nav */
  padding-block: calc(var(--landing-header-h) + 6rem) 6rem;
}

.hero-script {
  position: relative;
  font-family: var(--font-accent);
  font-size: clamp(1.7rem, 3vw, 2.45rem);
  line-height: 1.1;
  color: #f0e4cd;
  margin: 0 0 1.15rem;
}

.hero-title {
  font-size: clamp(2.1rem, 3.7vw, 2.95rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: #fdfaf4;
  max-width: none;
  text-shadow: 0 2px 26px rgba(24, 19, 13, 0.4);
  margin-bottom: 1.5rem;
}

.hero-sub {
  font-size: 1.02rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: rgba(253, 250, 244, 0.9);
  text-shadow: 0 1px 16px rgba(24, 19, 13, 0.45);
  margin-bottom: 2.4rem;
}

.hero-btn {
  padding: 1rem 2.4rem;
  box-shadow: 0 14px 36px rgba(24, 20, 15, 0.4);
}

/* ---------- Services ---------- */

.services-head {
  max-width: none;
  text-align: center;
  margin-bottom: 3.25rem;
}

.services-head .section-title { margin-bottom: 0; }

.service-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.service {
  position: relative;
  text-align: center;
  padding: 0.5rem 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Dividers hang on the left edge of an item, so they only read as a rule
   *between* columns when the first item of every row goes without one. Which
   items those are depends on the track count, so every breakpoint that changes
   the tracks restates the pair below: turn the divider on for all items, then
   off for the first of each row. Keeping both selectors at the same specificity
   is what lets a later breakpoint override an earlier one. */
.service:nth-child(n)::before { content: ""; }
.service:nth-child(6n + 1)::before { content: none; }

/* dividers fade in at the top and out at the bottom */
.service::before {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--color-border) 30%,
    var(--color-border) 70%,
    transparent
  );
}

.service-icon {
  display: inline-flex;
  width: 3.4rem;
  height: 3.4rem;
  margin-bottom: 1.2rem;
}

.service-icon img {
  /* traced line marks keep their own aspect ratio inside a common 3.4rem box */
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.service-name {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.service-text {
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  margin-bottom: 1.1rem;
  flex: 1;
}

/* --service-link-pad is the invisible tap padding wrapped around the label.
   The rule under the text is drawn by ::after rather than by a border so the
   padding can grow for touch without dragging the underline away from the
   words. */
.service-link {
  --service-link-pad: 0rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-brand);
  padding-block: var(--service-link-pad) calc(var(--service-link-pad) + 0.2rem);
  transition: color 0.2s ease;
}

.service-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--service-link-pad);
  border-bottom: 1px solid var(--color-accent);
}

.service-link:hover { color: var(--color-accent); }

/* Inside the bento cards the arrow alone is the affordance — no underline. */
.stylists-wrap .service-link,
.gallery .service-link,
.pricing .service-link {
  padding-bottom: var(--service-link-pad);
}

.stylists-wrap .service-link::after,
.gallery .service-link::after,
.pricing .service-link::after { content: none; }

/* ---------- Booking CTA band ---------- */

.cta-band {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--bento-pad);
}

.cta-band-title {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none;
  margin: 0;
  flex: none;
}

.cta-band-rule {
  width: 1px;
  align-self: stretch;
  background: var(--color-accent);
  opacity: 0.5;
}

/* the blurb is the band's only elastic column: it soaks up every bit of free
   width so the button lands on the band's right padding edge, mirroring the
   heading's inset on the left */
.cta-band-text {
  font-size: 0.92rem;
  color: var(--color-ink-muted);
  margin: 0;
  flex: 1;
}

/* ---------- Stylists ---------- */

.stylists {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 3rem;
  align-items: center;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--bento-pad);
}

.stylists-title {
  font-size: clamp(1.55rem, 2.6vw, 2rem);
  letter-spacing: 0.02em;
  margin-bottom: 0.8rem;
}

.stylists-text {
  font-size: 0.9rem;
  color: var(--color-ink-muted);
  margin-bottom: 1.5rem;
}

.stylist-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}

.stylist { margin: 0; text-align: center; }

/* Portraits are cropped straight out of the mockup, so they arrive already
   graded to the palette: no filter, and the slot takes the crops' own
   162x152 ratio rather than a generic tall placeholder. */
.stylist-photo {
  aspect-ratio: 162 / 152;
  border-radius: var(--radius-sm);
  background-image:
    url("../../assets/img/willow-and-bloom/stylist-sydney.webp"),
    var(--media-ph-fallback);
  background-size: cover;
  background-position: center;
  margin-bottom: 1rem;
}

.stylist-photo--b {
  background-image:
    url("../../assets/img/willow-and-bloom/stylist-jenna.webp"),
    var(--media-ph-fallback);
}

.stylist-photo--c {
  background-image:
    url("../../assets/img/willow-and-bloom/stylist-maya.webp"),
    var(--media-ph-fallback);
}

.stylist-photo--d {
  background-image:
    url("../../assets/img/willow-and-bloom/stylist-avery.webp"),
    var(--media-ph-fallback);
}

.stylist-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.stylist-role {
  display: block;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-top: 0.3rem;
}

/* ---------- Testimonials ---------- */

/* the heading owns a row of its own, so all three quotes share the card's full
   width below it */
.quotes {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--bento-pad);
}

.quotes-intro {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.quotes-glyph {
  display: block;
  flex: none;
  width: 3.3rem;
  line-height: 0;
}

.quotes-glyph img { display: block; width: 100%; height: auto; }

/* same serif scale as the stylists card's heading, so the bento blocks title
   themselves the same way */
.quotes-title {
  font-size: clamp(1.55rem, 2.6vw, 2rem);
  letter-spacing: 0.02em;
  margin: 0;
}

.quotes-title::after {
  content: "";
  display: block;
  width: 2.4rem;
  border-top: 1px solid var(--color-accent);
  margin-top: 0.7rem;
}

.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.quote {
  margin: 0;
  padding: 0.25rem 1.3rem;
  border-left: 1px solid rgba(176, 141, 87, 0.35);
}

.quote:first-child { border-left: 0; padding-left: 0; }

.quote p {
  font-size: 0.92rem;
  line-height: 1.75;
  margin-bottom: 1.1rem;
}

/* name and stars stay on one line in every column, so the three bylines line up */
.quote footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: nowrap;
}

.quote-name {
  white-space: nowrap;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.quote-stars {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.16rem;
  color: var(--color-accent);
}

.quote-stars svg { width: 0.85rem; height: 0.85rem; }

/* ---------- Gallery + pricing ---------- */

.studio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bento-gap);
  align-items: stretch;
}

.gallery {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--bento-pad);
}

.gallery .eyebrow { color: var(--color-ink); }

/* two rows of two: in a half-width card the thumbnails read as photographs
   rather than a strip of stamps, and they fill the card's height */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  width: 100%;
  margin-bottom: 1.6rem;
}

.gallery-ph {
  border-radius: var(--radius-sm);
  background-image:
    url("../../assets/img/willow-and-bloom/gal-salon.webp"),
    var(--media-ph-fallback);
  background-size: cover;
  background-position: center;
  /* light warm grade so the studio shots share one palette */
  filter: sepia(0.1) saturate(0.92) contrast(1.02);
}

.gallery-ph--b {
  background-image:
    url("../../assets/img/willow-and-bloom/gal-hair.webp"),
    radial-gradient(90% 70% at 50% 25%, rgba(252, 246, 234, 0.7), transparent 60%),
    linear-gradient(160deg, #cbb694 0%, #a8895f 60%, #7d6342 100%);
}

.gallery-ph--c {
  background-image:
    url("../../assets/img/willow-and-bloom/gal-products.webp"),
    radial-gradient(80% 60% at 35% 30%, rgba(255, 253, 247, 0.9), transparent 60%),
    linear-gradient(145deg, #f0e8da 0%, #dccdb4 55%, #bda88a 100%);
}

.gallery-ph--d {
  background-image:
    url("../../assets/img/willow-and-bloom/gal-room.webp"),
    radial-gradient(90% 80% at 70% 20%, rgba(250, 244, 232, 0.65), transparent 55%),
    linear-gradient(150deg, #d8cab2 0%, #b3997a 60%, #8a7256 100%);
}

/* Three tracks, but only two things to place: the menu column, a fade band, and
   the solid photo. The list covers tracks 1-2 and the photo covers tracks 2-3,
   so the photo runs *under* the panel through the band and is masked away to
   nothing there — the still life emerges from the cream instead of butting
   against a hard vertical edge. */
.pricing {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(2.5rem, 0.45fr) minmax(7rem, 1fr);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.pricing-list {
  grid-area: 1 / 1 / 2 / 3;
  position: relative;
  z-index: 1;
  padding: var(--bento-pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* menu anchors to the top; the still life fills the space beneath it */
  justify-content: flex-start;
}

.pricing-list .eyebrow { color: var(--color-ink); }

.price-rows {
  margin: 1.5rem 0 2.15rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

/* fixed price track: every price right-aligns to one edge and every leader rule
   stops at one edge, whatever the service name's length */
/* Flex, not a fixed price column: the leader inside the dt stretches to just
   short of each price's first character, so every rule meets its price. The
   prices still share a right edge because every row ends at the same x. */
.price-row {
  display: flex;
  column-gap: 0.9rem;
  align-items: baseline;
}

.price-row dt { flex: 1 1 auto; }

.price-row dt {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* the leader rule the mockup runs between name and price */
.price-row dt::after {
  content: "";
  flex: 1 1 auto;
  min-width: 0;
  height: 1px;
  background: rgba(176, 141, 87, 0.38);
}

.price-row dd {
  margin: 0;
  text-align: right;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.pricing-photo {
  grid-area: 1 / 1 / 2 / -1;
  border: 0;
  border-radius: 0;
  aspect-ratio: auto;
  min-height: 100%;
  background-image:
    url("../../assets/img/willow-and-bloom/pricing-still.webp"),
    radial-gradient(70% 50% at 55% 32%, rgba(255, 251, 242, 0.85), transparent 60%),
    radial-gradient(45% 35% at 40% 72%, rgba(233, 216, 188, 0.8), transparent 65%),
    radial-gradient(30% 22% at 68% 78%, rgba(214, 188, 150, 0.7), transparent 70%),
    linear-gradient(160deg, #efe5d3 0%, #dcc9a9 55%, #bfa47d 100%);
  background-size: cover;
  background-position: 0% center;
  filter: sepia(0.08) saturate(0.95);
  /* full-card backdrop: faint at the left so the image reads behind the text,
     ramping left-to-right to fully solid on the photo side */
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.16) 0, rgba(0, 0, 0, 0.35) 32%, rgba(0, 0, 0, 0.7) 52%, #000 68%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.16) 0, rgba(0, 0, 0, 0.35) 32%, rgba(0, 0, 0, 0.7) 52%, #000 68%);
}

/* ---------- Footer extras ---------- */

.footer-social {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 1.3rem;
}

.footer-social .footer-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
}

.footer-social .footer-link svg { width: 100%; height: 100%; }

.footer-social .footer-link:hover { color: #ffffff; }

.footer-hours {
  color: rgba(244, 239, 230, 0.6);
  font-size: 0.85rem;
  margin-top: 0.5rem;
  line-height: 1.6;
}

.newsletter {
  display: flex;
  width: 100%;
  max-width: 17rem;
  margin-top: 0.4rem;
  border: 1px solid rgba(244, 239, 230, 0.4);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.newsletter-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-on-brand);
  background: rgba(244, 239, 230, 0.08);
  border: 0;
  padding: 0.7rem 0.9rem;
}

.newsletter-input::placeholder { color: rgba(244, 239, 230, 0.55); }

.newsletter-input:focus { outline: none; background: rgba(244, 239, 230, 0.14); }

.newsletter-btn {
  flex: none;
  font-size: 1rem;
  color: var(--color-brand);
  background: var(--color-on-brand);
  border: 0;
  padding: 0 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.newsletter-btn:hover { background: #ffffff; }

/* ---------- Responsive ----------
   Two width breakpoints only: 1024px (tablet) and 640px (phone). */

@media (max-width: 1024px) {
  .page-landing { --bento-pad: 2.4rem 1.8rem; }

  .service-grid { grid-template-columns: repeat(3, 1fr); gap: 2.2rem 0; }
  .service:nth-child(n)::before { content: ""; }
  .service:nth-child(3n + 1)::before { content: none; }
  .studio-grid { grid-template-columns: 1fr; }

  /* the gallery card is full width here, so four across keeps the thumbnails
     from ballooning */
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }

  /* ---------- Mobile nav drawer ----------
     At tablet width the eight inline links no longer fit on one row, so they
     move into a drawer that hangs off the bottom edge of the header and floats
     over the hero. The header itself stays a single lockup + hamburger row, so
     the chrome keeps its 5rem height at every width and the hero reserves no
     more space on a phone than it does on a desktop. */

  .page-landing { --landing-header-h: 5rem; }

  /* theme.css stacks the header into a column here; with the links in a drawer
     the row layout holds all the way down */
  .page-landing .site-header-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 1rem;
  }

  .page-landing .nav-toggle { display: inline-flex; }

  .page-landing .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0.35rem 1.5rem 1.35rem;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.75rem);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  }

  .page-landing .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s;
  }

  .page-landing .nav-link {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding-block: 0.55rem;
    font-size: 0.74rem;
    border-bottom: 1px solid var(--color-border);
  }

  .page-landing .nav-link:last-of-type { border-bottom: 0; }

  .page-landing .nav-link.is-active {
    color: var(--color-brand);
    border-bottom-color: var(--color-border);
  }

  .page-landing .nav-cta {
    width: 100%;
    min-height: 2.9rem;
    margin: 1rem 0 0;
  }

  /* On touch widths the small-caps links get tap padding above and below the
     label. The underline stays put because ::after tracks the same value. */
  .page-landing .service-link { --service-link-pad: 0.75rem; }

  /* the legal pair in the footer bar is the last run of inline links, so it
     gets the same tap height as the stacked footer columns */
  .page-landing .footer-bottom .footer-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  .hero-inner {
    padding-block: calc(var(--landing-header-h) + 3rem) 3.5rem;
    min-height: 0;
    /* the copy sits over the full width of the photo here, so it centers to
       match the CTA band lower on the page */
    align-items: center;
    text-align: center;
  }

  .hero-btn { align-self: center; }

  /* narrow viewports put the copy over the bright half of the photo, so the
     scrim becomes an even wash instead of a left-edge gradient */
  .hero::before {
    background: linear-gradient(to bottom, rgba(30, 25, 19, 0.52), rgba(30, 25, 19, 0.38) 55%, rgba(30, 25, 19, 0.55));
  }

  .cta-band { flex-direction: column; text-align: center; gap: 1.4rem; }
  .cta-band-rule { width: 2.4rem; height: 1px; align-self: center; }
  .cta-band-text { max-width: 26rem; }

  .stylists { grid-template-columns: 1fr; gap: 2.2rem; }
  .stylist-grid { grid-template-columns: repeat(2, 1fr); }

  .quote-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .quote { border-left: 0; padding: 0; }

  /* Stacked, but still one layered card rather than a menu with a photo glued
     under it: the menu takes the first row, an empty second row reserves the
     band of open still life, and the photo spans both so it bleeds up behind
     the lower price rows. The same blend the desktop runs left-to-right runs
     top-to-bottom here, masked away to nothing over the top of the menu. */
  .pricing {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(7rem, auto);
  }

  .pricing-list { grid-area: 1 / 1 / 2 / 2; }

  .pricing-photo {
    grid-area: 1 / 1 / 3 / 2;
    background-position: center 70%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.12) 34%, rgba(0, 0, 0, 0.38) 52%, rgba(0, 0, 0, 0.72) 70%, #000 84%);
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.12) 34%, rgba(0, 0, 0, 0.38) 52%, rgba(0, 0, 0, 0.72) 70%, #000 84%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-landing .site-nav,
  .page-landing .site-nav.is-open { transition: none; }
}

@media (max-width: 640px) {
  .page-landing { --bento-pad: 2rem 1.4rem; }

  .service-grid { grid-template-columns: 1fr 1fr; }
  .service { padding-inline: 0.5rem; }
  .service:nth-child(n)::before { content: ""; }
  .service:nth-child(2n + 1)::before { content: none; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .stylist-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }

  /* the display face keeps its letterspacing at a size that still breaks in
     two clean lines on a phone */
  .hero-title { font-size: clamp(1.4rem, 6.2vw, 2.1rem); letter-spacing: 0.05em; }
  .hero-btn { width: 100%; max-width: 20rem; padding-inline: 1.5rem; }

  /* a phone gives the open band beneath the menu less room, so the still life
     leans harder on the part of itself that shows through behind the menu */
  .pricing { grid-template-rows: auto minmax(5.5rem, auto); }

  /* stacked footer columns: tap targets grow, the column gap shrinks to keep
     the same visual rhythm */
  .footer-col { gap: 0.1rem; }
  .footer-col > .footer-link { padding-block: 0.5rem; }
  .footer-col > .footer-heading { margin-bottom: 0.5rem; }

  .footer-social { gap: 0.25rem; margin-left: -0.7rem; }

  .footer-social .footer-link {
    width: 2.75rem;
    height: 2.75rem;
  }

  .footer-social .footer-link svg { width: 1.15rem; height: 1.15rem; }

  .newsletter { max-width: none; }
  .newsletter-btn { min-width: 3rem; }
}