/* ================================================================
   LM HAIR CO. — style.css
   Brand tokens at :root, then base, components, sections, responsive.
   ================================================================ */

/* ---------- Brand tokens ---------- */
:root {
  /* Palette (brand board locked 2026-04-23) */
  --blush:    #F4DCDC;
  --nude:     #E8D6CF;
  --mauve:    #C9A9A3;  /* primary brand — buttons, wordmark, accents */
  --cream:    #FAF7F5;  /* default page bg */
  --espresso: #3A3432;  /* body text, dark sections */

  /* Derived */
  --mauve-soft: #E4CFC9;
  /* Soft-nude buttons + mocha text accent (experiment 2026-06). Buttons use
     var(--nude) #E8D6CF as the fill with ESPRESSO text (about 8:1) and a mauve
     border so they still read on cream. --mauve-dark / --mauve-deep are a deep
     mocha #7C5A46 for accent text, links, and small labels — darkened from the
     old #8B6C5C (which measured 4.48:1, just under) to clear WCAG AA (≥4.5:1) on
     cream and blush. Note: nude buttons are quiet against the cream / blush
     backgrounds, so the CTAs read soft by design. Brand mauve #C9A9A3
     (var(--mauve)) owns borders. */
  --mauve-dark: #7C5A46;   /* mocha: accent text, links, button hovers + borders */
  --mauve-deep: #7C5A46;   /* mocha: small text (eyebrows, labels, numbers, hints) */
  --line:       rgba(58, 52, 50, 0.12);
  --line-cream: rgba(250, 247, 245, 0.18);

  /* Typography */
  --f-display: 'Cormorant Garamond', 'The Seasons', 'Playfair Display', Georgia, serif;
  --f-body:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Scale */
  --w-wide:   1280px;
  --w-body:    960px;
  --w-prose:   640px;

  /* Spacing */
  --s-1:  .5rem;
  --s-2:  1rem;
  --s-3:  1.5rem;
  --s-4:  2rem;
  --s-5:  3rem;
  --s-6:  4.5rem;
  --s-7:  6rem;
  --s-8:  8rem;
}

/* ---------- Reset + base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--espresso);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--mauve-dark); }

/* Consistent, brand-styled keyboard focus on every interactive element. Mouse
   clicks don't trigger :focus-visible, so this only shows for keyboard users. */
:focus-visible {
  outline: 2px solid var(--espresso);
  outline-offset: 2px;
}
.hero :focus-visible,
.nav--overlay:not(.nav--solid) :focus-visible {
  outline-color: var(--cream);
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.75rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h3 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
h4 { font-size: clamp(1.1rem, 1.8vw, 1.35rem); }

p { margin: 0 0 1em; }

/* Kickers (small uppercase labels above headings) hidden site-wide per
   client preference — markup retained for SR/a11y context but not painted.
   !important wins over context-specific overrides (.contact-extras .kicker, etc). */
.kicker,
.kicker--light { display: none !important; }

.italic { font-style: italic; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 1rem 2.25rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  text-align: center;
  line-height: 1;
}

/* Flipped pattern: buttons render as filled-dark at rest, then on hover
   they invert to a transparent fill so the section background shows
   through (the button "becomes" the bg color, keeping only the outline +
   text visible). Same direction across all three variants. */
.btn--primary {
  background: var(--nude);
  color: var(--espresso);
  border-color: var(--mauve);
}
.btn--primary:hover {
  background: var(--mauve);
  color: var(--espresso);
  border-color: var(--mauve);
}

.btn--outline {
  background: var(--espresso);
  color: var(--cream);
  border-color: var(--espresso);
}
.btn--outline:hover {
  background: transparent;
  color: var(--espresso);
  border-color: var(--espresso);
}

.btn--outline-cream {
  background: var(--cream);
  color: var(--espresso);
  border-color: var(--cream);
}
.btn--outline-cream:hover {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream);
}

/* Per-section rest-state color overrides for the home page outline button.
   Hover keeps the global flipped pattern (transparent + outline/text in
   the rest-state color). */
.about       .btn--outline {        background: var(--nude); color: var(--espresso);    border-color: var(--mauve-dark); }
.about       .btn--outline:hover {  background: transparent;        color: var(--espresso); border-color: var(--mauve); }
.value       .btn--outline {        background: var(--cream);      color: var(--espresso); border-color: var(--cream); }
.value       .btn--outline:hover {  background: transparent;        color: var(--cream);    border-color: var(--cream); }
.services    .btn--outline {        background: var(--nude); color: var(--espresso);    border-color: var(--mauve-dark); }
.services    .btn--outline:hover {  background: transparent;        color: var(--espresso); border-color: var(--mauve); }
.portfolio__foot .btn--outline {       background: var(--nude); color: var(--espresso);    border-color: var(--mauve-dark); }
.portfolio__foot .btn--outline:hover { background: transparent;        color: var(--espresso); border-color: var(--mauve); }

/* ---------- Layout utilities ---------- */
.section {
  padding: var(--s-7) var(--s-4);
}
.section--tight { padding: var(--s-6) var(--s-4); }
.section--mauve {
  background: var(--mauve);
  color: var(--espresso);
}
.section--mauve .kicker { color: var(--espresso); opacity: 0.7; }
/* On mauve bg, the default mauve primary button blends in. Use the
   darker mauve so it pops while staying on-brand. */
/* On mauve section bg, the default mauve fill blends in — use mauve-dark
   so the button pops at rest; hover still inverts to transparent. */
.section--mauve .btn--primary { background: var(--cream); color: var(--espresso); border-color: var(--cream); }
.section--mauve .btn--primary:hover { background: transparent; color: var(--cream); border-color: var(--cream); }
.section--blush { background: var(--blush); }
.section--nude  { background: var(--nude); }

.container {
  max-width: var(--w-body);
  margin: 0 auto;
}
.container--wide  { max-width: var(--w-wide); }
.container--prose { max-width: var(--w-prose); }

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

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s ease, transform .9s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 250; /* above .nav__drawer (z 200) so the hamburger-X stays clickable */
  padding: 1.25rem 2rem;
  background: transparent;
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.nav--solid {
  background: var(--cream);
  box-shadow: 0 1px 0 var(--line);
  padding: 0.75rem 2rem;
}
.nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: var(--w-wide);
  margin: 0 auto;
  gap: 2rem;
}
.nav__links {
  display: flex;
  gap: 2.25rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-weight: 500;
}
.nav__links--left  { justify-content: flex-end; }
.nav__links--right { justify-content: flex-start; }
.nav__links a {
  color: var(--cream);
  transition: color .2s;
}
.nav--solid .nav__links a { color: var(--espresso); }
.nav__links a:hover { color: var(--mauve); }

.nav__logo {
  font-family: var(--f-display);
  font-size: 1.7rem;
  letter-spacing: 0.05em;
  color: var(--cream);
  white-space: nowrap;
  transition: color .2s;
}
.nav--solid .nav__logo { color: var(--espresso); }
/* When the mobile drawer is open, force the logo dark so it stays visible over
   the cream drawer even on the home page's transparent (cream-colored) nav. */
body.drawer-open .nav__logo { color: var(--espresso) !important; }
/* Logo gets the same mauve hover as the nav links so it reads as clickable —
   on every page, including home. */
.nav__logo:hover { color: var(--mauve); }

.nav__logo img {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
  transition: filter .3s ease;
}
.nav--solid .nav__logo img { filter: none; }

.nav__hamburger {
  position: relative;
  display: none;
  background: none;
  border: 0;
  width: 28px;
  height: 22px;
  cursor: pointer;
  color: var(--cream);
  padding: 0;
}
.nav--solid .nav__hamburger { color: var(--espresso); }
/* When the drawer is open the X overlays the cream drawer panel — force it
   dark so it stays visible even over the home page's transparent nav. */
.nav__hamburger[aria-expanded="true"] { color: var(--espresso); }
.nav__hamburger span {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease, top .25s ease, left .25s ease, width .2s ease;
}
.nav__hamburger span:nth-of-type(1) { top: 0; transform-origin: center; }
.nav__hamburger span:nth-of-type(2) { top: 50%; transform: translateY(-50%); transform-origin: center; }
.nav__hamburger span:nth-of-type(3) { top: 100%; transform: translateY(-100%); transform-origin: center; }
/* Open: the two outer bars slide to the vertical center and cross into a
   clean, centered X (same as SmithTowing); the middle bar fades out. */
.nav__hamburger[aria-expanded="true"] span:nth-of-type(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.nav__hamburger[aria-expanded="true"] span:nth-of-type(2) {
  opacity: 0;
}
.nav__hamburger[aria-expanded="true"] span:nth-of-type(3) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  /* Fill the viewport with a STATIC unit. 100vh = the toolbar-collapsed (largest)
     height, so the hero never resizes as the mobile address bar hides/shows —
     avoiding the cover-image "zoom on scroll" that 100dvh caused. It's still
     always >= the visible viewport, so the next (blush) section never peeks. */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 2rem 5rem;
  color: var(--cream);
  background: var(--mauve-dark);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  /* Bias the crop left toward the subject. The hero photo has a bright window/
     curtain on its right edge; centered cover let it bleed in on wider phones,
     reading as a white strip at the bottom. 28% keeps the head/hair framed and
     pushes the window off-frame wherever the viewport crops left/right. */
  background-position: 28% center;
  z-index: 1;
}
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Two scrims: a vertical darken for text legibility, plus a right-side darken
     that mutes the bright window where the aspect ratio crops top/bottom (tablet/
     desktop) and 28% positioning can't push it out of frame. */
  background:
    linear-gradient(180deg, rgba(58,52,50,0.45) 0%, rgba(58,52,50,0.52) 45%, rgba(58,52,50,0.86) 100%),
    linear-gradient(90deg, rgba(58,52,50,0) 33%, rgba(58,52,50,0.72) 100%);
}
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 820px;
}
.hero__kicker {
  color: var(--mauve-soft);
  margin-bottom: 1.5rem;
}
.hero__title {
  font-size: clamp(2.75rem, 7vw, 6rem);
  line-height: 1.05;
  margin: 0 0 1.5rem;
  letter-spacing: 0.01em;
}
.hero__title em {
  font-style: italic;
  color: var(--mauve-soft);
}
.hero__sub {
  max-width: 560px;
  margin: 0 auto;
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(250, 247, 245, 0.85);
}
.hero__cta {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2.25rem;
}

/* ---------- Scroll cue (capsule) ----------
   A soft pill outline with a cream wheel-dot drifting down inside it — a quiet
   "there's more below" hint in the brand palette (cream/mauve, no neon). It's a
   real anchor (skip to the first section) with an enlarged transparent hit area;
   it scrolls away with the hero, so no JS is needed to dismiss it. */
.scroll-cue {
  /* Fixed to the viewport (not the hero): the static-100vh hero is taller than
     the screen while the mobile address bar shows, so anchoring to the hero's
     bottom pushed the cue below the fold on load. Fixed keeps it at the bottom
     of the visible screen. It fades out on first scroll via the inline script. */
  position: fixed;
  left: 50%;
  bottom: clamp(20px, 4vh, 34px);
  transform: translateX(-50%);
  z-index: 3;
  display: block;
  padding: 10px 22px;          /* enlarges the tap/click target around the capsule */
  line-height: 0;
  text-decoration: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
/* Toggled by a small inline script once the visitor begins scrolling. */
.scroll-cue.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
}
.scroll-cue__mouse {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 25px;
  height: 42px;
  border-radius: 14px;
  border: 1.5px solid rgba(228, 207, 201, 0.65);   /* --mauve-soft @ 65% */
  box-shadow: 0 0 10px rgba(250, 247, 245, 0.10);
  transition: border-color 0.4s ease;
}
.scroll-cue__wheel {
  width: 3px;
  height: 8px;
  margin-top: 7px;
  border-radius: 3px;
  background: var(--cream);
  box-shadow: 0 0 5px rgba(250, 247, 245, 0.6);
  animation: scroll-cue-wheel 2.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes scroll-cue-wheel {
  0%   { transform: translateY(0);    opacity: 0.35; }
  40%  { opacity: 1; }
  100% { transform: translateY(13px); opacity: 0; }
}
.scroll-cue:hover .scroll-cue__mouse,
.scroll-cue:focus-visible .scroll-cue__mouse {
  border-color: var(--mauve-soft);
}
.scroll-cue:focus-visible { outline: none; }
.scroll-cue:focus-visible .scroll-cue__mouse {
  box-shadow: 0 0 0 2px rgba(250, 247, 245, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  /* Park the wheel-dot static near the top of the capsule (its rest position).
     !important defends against the global reduced-motion reset
     (animation-duration:0.01ms !important) that would otherwise run it to its
     end keyframe (opacity:0) and hide it. */
  .scroll-cue__wheel {
    animation: none !important;
    transform: none !important;
    opacity: 0.85;
  }
}

/* ---------- Info strip ---------- */
.info-strip {
  background: var(--nude);
  padding: 1.25rem 2rem;
  border-bottom: 1px solid var(--line);
}
.info-strip__inner {
  max-width: var(--w-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--espresso);
}
.info-strip__right { text-align: right; }
.info-strip span + span { margin-left: 1.5rem; }

/* ---------- Value prop ---------- */
.value {
  text-align: center;
  padding: var(--s-8) 2rem;
}
.value--nude {
  background-color: var(--nude);
  /* Desktop: original uncropped IMG_5143 with the cream wash overlay,
     centered. Mobile gets a separately-cropped + top-padded source via the
     media query below so the hand stays in frame and the bg can be nudged
     down out of the fixed header's way. */
  background-image:
    linear-gradient(rgba(250, 247, 245, 0.55), rgba(250, 247, 245, 0.55)),
    var(--value-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 720px) {
  .value--nude {
    background-image:
      linear-gradient(rgba(250, 247, 245, 0.55), rgba(250, 247, 245, 0.55)),
      var(--value-bg-mobile, var(--value-bg));
    background-position: center top;
  }
}
.value h2 {
  max-width: 720px;
  margin: 0 auto 1.5rem;
  line-height: 1.2;
}
.value__body {
  max-width: 560px;
  margin: 0 auto 2.5rem;
  color: var(--espresso);
  opacity: 0.8;
}

/* ---------- Services (4-card grid, photo + caption) ---------- */
.services {
  /* Soft pink watercolor wash fills the whole section — no focal point so
     `cover` works without cropping concerns. The image is set inline on
     the section element via bgImage(). */
  background-color: var(--cream);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--espresso);
  padding: var(--s-7) 2rem;
}
.services__head {
  text-align: center;
  margin-bottom: var(--s-5);
}
.services__head h2 { color: var(--espresso); }
.services__head .kicker { color: var(--espresso); opacity: 0.65; }
.services__grid {
  max-width: var(--w-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.service-card {
  display: block;
  position: relative;
}
.service-card__img {
  aspect-ratio: 3 / 4;
  background: var(--mauve);
  background-size: cover;
  background-position: center;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: transform .5s ease;
  border: 3px solid var(--blush);
}
.service-card:hover .service-card__img { transform: scale(1.02); }
.service-card__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.05rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  /* Was var(--cream) (#FAF7F5) — failed 1.39:1 contrast on the mauve-soft
     section background. Espresso lands at ~9:1 — passes WCAG AA. */
  color: var(--espresso);
}
.service-card__arrow {
  font-size: 1.4rem;
  /* Was mauve-soft — invisible against the near-white bow background.
     Mauve-deep keeps the rose family + passes contrast on the new bg. */
  color: var(--mauve-deep);
  transition: transform .25s;
}
.service-card__hook {
  margin: 0.4rem 0 0;
  font-family: var(--f-body);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  line-height: 1.5;
  text-transform: none;
  color: rgba(58, 52, 50, 0.72);
}
.service-card:hover .service-card__arrow { transform: translateX(4px); }
.services__foot {
  text-align: center;
  margin-top: var(--s-5);
}
/* Services slider nav — hidden by default; mobile media query reveals + lays out. */
.services__nav { display: none; }
.services__arrow {
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--espresso);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.services__arrow:hover { opacity: 1; }
.services__arrow svg { width: 100%; height: 100%; display: block; }
.services__arrow--prev:hover { transform: translateX(-3px); }
.services__arrow--next:hover { transform: translateX(3px); }
.services__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.services__dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--espresso);
  opacity: 0.25;
  transition: opacity 0.25s ease;
}
.services__dots span.is-active { opacity: 0.85; }

/* ---------- Marquee ---------- */
.marquee {
  background: var(--mauve);
  /* Was var(--cream) — failed 2.03:1 on mauve. Espresso on mauve hits ~6:1. */
  color: var(--espresso);
  padding: 1rem 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.marquee__track {
  display: flex;
  /* Size to the content (not the parent) so translateX(-50%) travels exactly
     one of the two duplicated copies -> a true seamless loop. Without this the
     track was parent-width, so -50% moved only half the viewport and the strip
     visibly snapped back ("reset") every cycle. */
  width: max-content;
  align-items: center;
  white-space: nowrap;
  animation: marquee 18s linear infinite;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-weight: 500;
  font-family: var(--f-body);
}
.marquee__track span {
  display: inline-block;
  /* Spacing lives on each item (1rem each side = 2rem between), not flex gap,
     so the two duplicated copies tile to an exact 50% and the loop is seamless
     (flex gap left the loop half a gap short, causing a visible jump/reset). */
  margin: 0 1rem;
}
.marquee__dot {
  opacity: 0.5;
  /* The ✦ glyph sits low against the uppercase caps; nudge it up to optically
     center. Value dialed in visually against a ladder of candidates. */
  transform: translateY(-0.14em);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Pricing list ---------- */
.pricing {
  background: var(--cream);
  padding: var(--s-7) 2rem;
}
.pricing__head {
  text-align: center;
  margin-bottom: var(--s-5);
}
.pricing__grid {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.price-card {
  background: #fff;
  padding: 2rem 2rem 1.75rem;
  border: 1px solid var(--line);
  text-align: center;
}
.price-card__name {
  font-family: var(--f-display);
  font-size: 1.3rem;
  color: var(--espresso);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.price-card__desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--espresso);
  opacity: 0.72;
  margin-bottom: 1rem;
}
.price-card__price {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  color: var(--mauve-dark);
}
.pricing__note {
  text-align: center;
  margin-top: var(--s-4);
  font-size: 0.78rem;
  font-style: italic;
  color: var(--espresso);
  opacity: 0.6;
}

/* ---------- About ---------- */
.about {
  background: var(--nude);
  padding: var(--s-7) 2rem;
}
.about__grid {
  max-width: var(--w-body);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.about__photo {
  aspect-ratio: 3 / 4;
  background: var(--mauve-soft);
  background-image: var(--about-bg);
  background-size: cover;
  background-position: center 85%;
}
@media (max-width: 960px) {
  .about__photo {
    background-image: var(--about-bg-mobile, var(--about-bg));
    background-position: center;
  }
}
.about__text h2 { margin-bottom: 1.5rem; }
.about__text .btn { display: block; width: fit-content; margin-inline: auto; }
.about-page__lead .btn { display: block; width: fit-content; margin-inline: auto; }
.about__quote {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.4;
  /* Was var(--mauve-dark) (#B48E87) — failed 2.08:1 on nude background.
     mauve-deep keeps the rose feel and passes ~5.7:1. */
  color: var(--mauve-deep);
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 2px solid var(--mauve);
}

/* ---------- Process ---------- */
.process {
  padding: var(--s-7) 2rem;
  text-align: center;
}
.process__head { margin-bottom: var(--s-5); }
.process__seal { margin-bottom: 1.25rem; }
.process__grid {
  max-width: var(--w-body);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
.step__num {
  font-family: var(--f-display);
  font-size: 3rem;
  font-style: italic;
  /* Was var(--mauve) (#C9A9A3) — failed 2.03:1 on cream even as large text.
     mauve-deep keeps the rose feel and passes 6.6:1. */
  color: var(--mauve-deep);
  line-height: 1;
  margin-bottom: 0.75rem;
}
.step__title {
  font-family: var(--f-display);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.step__body {
  font-size: 0.88rem;
  opacity: 0.75;
  max-width: 240px;
  margin: 0 auto;
}

/* ---------- Final CTA ---------- */
.final-cta {
  background: var(--blush);
  padding: var(--s-7) 2rem;
  text-align: center;
}
.final-cta h2,
.about-page__cta h2 {
  max-width: none;
  margin: 0 auto 1rem;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .final-cta h2,
  .about-page__cta h2 {
    white-space: normal;
    font-size: clamp(1.4rem, 5vw, 2rem);
  }
}
.final-cta p {
  max-width: 480px;
  margin: 0 auto 2rem;
  color: var(--espresso);
  opacity: 0.75;
}

/* ---------- Divider (flourish) ---------- */
.flourish {
  display: block;
  text-align: center;
  margin: 0 auto;
  font-family: var(--f-display);
  color: var(--mauve);
  font-size: 1.25rem;
  letter-spacing: 1rem;
  padding: 1rem 0;
}
.flourish::before { content: '✦ ✦ ✦'; }

/* ---------- Footer ---------- */
.footer {
  background: var(--nude);
  color: var(--espresso);
  position: relative;
  overflow: hidden;
  padding: var(--s-5) 2rem var(--s-4);
}
.footer__watermark {
  position: absolute;
  left: -2rem;
  bottom: -4rem;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 24rem;
  line-height: 1;
  color: rgba(180, 142, 135, 0.14);
  pointer-events: none;
  user-select: none;
}
.footer__inner {
  position: relative;
  z-index: 2;
  max-width: var(--w-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
.footer__col h4 {
  font-family: var(--f-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.72rem;
  /* Was var(--mauve-dark) — failed 2.08:1 on nude. Deep mauve passes ~5.7:1. */
  color: var(--mauve-deep);
  margin-bottom: 1.25rem;
}
.footer__col p,
.footer__col a {
  font-size: 0.85rem;
  color: rgba(58, 52, 50, 0.78);
  line-height: 1.75;
  margin: 0 0 0.35rem;
  display: block;
}
.footer__col a:hover { color: var(--mauve-deep); }

/* Instagram handle with inline glyph (matches SmithTowing's social icon).
   inline-flex + em sizing keeps the icon aligned to and scaled with the
   text; currentColor lets it pick up the same mauve on hover. */
.footer__col a.footer__handle {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.footer__handle-icon {
  width: 0.95em;
  height: 0.95em;
  flex-shrink: 0;
}

/* Placeholder IG strip hidden until live feed (Behold/Curator) is wired in. */
.footer__ig {
  display: none;
  max-width: var(--w-wide);
  margin: var(--s-5) auto 0;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
}
.footer__ig-thumb {
  aspect-ratio: 1 / 1;
  background: var(--mauve);
  background-size: cover;
  background-position: center;
}
.footer__bottom {
  position: relative;
  z-index: 2;
  max-width: var(--w-wide);
  margin: var(--s-4) auto 0;
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Was 0.55 alpha — failed 2.84:1. 0.78 hits ~4.6:1 on nude background. */
  color: rgba(58, 52, 50, 0.78);
}

/* ---------- Generic page header (for /about, /services, etc.) ---------- */
.page-header {
  min-height: 13rem;
  padding: 5rem 2rem 1.5rem;
  text-align: center;
  background: var(--nude);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.page-header > * { max-width: 38rem; }
.page-header h1 { margin: 0; font-size: clamp(3rem, 10vw, 6rem); line-height: 1; }
.page-header__seal { margin-bottom: 1.25rem; }
.page-header .kicker { color: var(--mauve-dark); }
.page-header__sub {
  max-width: 38rem;
  margin: 0.9rem auto 0;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  line-height: 1.4;
  color: var(--mauve-deep);
}
/* Modifier: page header that uses a photo background under a cream wash.
   Inline style on the element sets --page-header-bg to the image-set(...). */
.page-header--image {
  background-image:
    linear-gradient(rgba(250, 247, 245, 0.62), rgba(250, 247, 245, 0.74) 50%, rgba(250, 247, 245, 0.62)),
    var(--page-header-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 720px) {
  /* Mobile: nudge crop so Lilly's hand stays in frame after shifting the
     visible window right + down within the source. Stretch the section
     vertically so the photo becomes the hero of the page. */
  .page-header--image {
    background-position: 70% 75%;
    min-height: 58vh;
  }
}
/* Desktop+: any page-header with a photo bg uses a taller hero so the
   image gets to breathe. Services + portfolio also shift the crop up. */
@media (min-width: 721px) {
  .page-header--image { min-height: 50vh; }
  body[data-page="services"] .page-header--image {
    background-position: center 70%;
  }
  body[data-page="portfolio"] .page-header--image {
    background-position: center 80%;
  }
}
/* When a content section directly follows .page-header, collapse the
   stacked top padding — the header already provides breathing room. */
.page-header + section { padding-top: var(--s-5); }

/* ---------- Stub page for placeholder sections ---------- */
.stub {
  max-width: var(--w-prose);
  margin: 0 auto;
  padding: var(--s-6) 2rem;
  text-align: center;
}
.stub__body { opacity: 0.75; font-size: 0.95rem; line-height: 1.8; }

/* ---------- 404 ---------- */
.notfound {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}
.notfound__big {
  font-family: var(--f-display);
  font-size: clamp(6rem, 18vw, 14rem);
  line-height: 1;
  color: var(--mauve);
}

/* ---------- Wax seal (decorative) ---------- */
/* PNG-backed seal with hover-straightens-from-tilt behavior. Size + tilt
   come in as --seal-size / --seal-tilt custom properties from the
   `seal()` component, so each placement can size + angle independently. */
.seal {
  /* Width is fixed by --seal-size; height flows from the image's natural
     aspect so the seal never gets squished into a forced square. */
  display: inline-block;
  width: var(--seal-size, 120px);
  transform: rotate(var(--seal-tilt, -7deg));
  transition: transform 0.45s var(--ease, ease);
  /* Subtle drop shadow grounds the seal on the cream background — the
     PNG already carries its own embossed shading, this just lifts it. */
  filter: drop-shadow(0 6px 10px rgba(58, 52, 50, 0.10));
}
.seal:hover { transform: rotate(0deg); }
.seal img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- LOVE NOTES (testimonials carousel) ---------- */
.love-notes {
  background: var(--cream);
  padding: var(--s-6) 2rem;
}
.love-notes__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--s-4);
}
.love-notes__seal {
  margin: 0 auto 0.85rem;
}
.love-notes__eyebrow {
  font-family: var(--f-body);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  font-weight: 500;
  margin: 0 0 1rem;
}
.love-notes__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.85rem, 4vw, 2.6rem);
  color: var(--espresso);
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin: 0;
}
.love-notes__title em {
  font-style: italic;
  color: var(--mauve-deep);
  display: block;
  margin-top: 0.1em;
}
/* Carousel — single review visible at a time. Stage holds all slides
   absolutely positioned; JS measures the active slide and sets stage
   min-height so the section can grow/shrink with quote length. */
.love-notes__carousel {
  max-width: 760px;
  margin: 0 auto;
}
.love-notes__stage {
  position: relative;
  min-height: 200px;
  transition: min-height 0.4s ease;
}
.love-note {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 1.75rem 1.75rem 1.5rem;
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(58, 52, 50, 0.06);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.love-note.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.4s ease, visibility 0s linear 0s;
}
@media (min-width: 720px) {
  .love-note { padding: 2rem 2.75rem 1.75rem; }
}
.love-note__head {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-bottom: 1rem;
}
.love-note__num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 2rem;
  color: var(--mauve-deep);
  line-height: 1;
  margin: 0;
  opacity: 0.55;
}
.love-note__cite {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--mauve-deep);
  margin: 0;
  line-height: 1;
}
.love-note__body {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--espresso);
  margin: 0;
}
@media (min-width: 720px) {
  .love-note__body { font-size: 1.1rem; line-height: 1.5; }
}
.love-notes__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  margin-top: 1.75rem;
}
.love-notes__arrow {
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--mauve-deep);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.love-notes__arrow:hover { opacity: 1; }
.love-notes__arrow svg { width: 100%; height: 100%; display: block; }
.love-notes__arrow--prev:hover { transform: translateX(-3px); }
.love-notes__arrow--next:hover { transform: translateX(3px); }
.love-notes__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.love-notes__dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mauve-deep);
  opacity: 0.25;
  transition: opacity 0.25s ease;
}
.love-notes__dots span.is-active { opacity: 0.85; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .pricing__grid { grid-template-columns: 1fr; }
  .about__grid { grid-template-columns: 1fr; gap: 2rem; }
  .process__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .love-notes__carousel { max-width: var(--w-prose); }
  .footer__inner { grid-template-columns: 1fr; gap: 2rem; }
  .footer__ig { grid-template-columns: repeat(5, 1fr); }
  .footer__watermark { font-size: 14rem; }
}

@media (max-width: 720px) {
  .nav__inner {
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
  }
  .nav__links { display: none; }
  .nav__hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column: 3;
    justify-self: end;
  }
  .nav__logo { grid-column: 2; justify-self: center; font-size: 1.5rem; }
  .info-strip__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .info-strip__right { text-align: center; }
  .info-strip span + span { margin-left: 1rem; }
  /* Mobile: convert services from a grid into a horizontal scroll-snap slider.
     Each card takes the full viewport width — no peek of adjacent cards.
     Negative margins counter the section's 1.25rem mobile padding so the
     scroll track runs edge-to-edge; each card has internal padding so the
     image + label keep their breathing room. */
  .services__grid {
    grid-template-columns: none;
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: 0;
    scrollbar-width: none;
  }
  .services__grid::-webkit-scrollbar { display: none; }
  .service-card {
    flex: 0 0 88%;                /* <100% leaves a peek of the next card so users see it scrolls */
    scroll-snap-align: start;
    padding: 0 1.25rem;
  }
  .services__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    margin-top: 1.5rem;
  }
  /* Mobile slider: center the card label under each image and drop the
     inline arrow (swiping/dots already signal navigation). */
  .service-card__label { justify-content: center; }
  .service-card__arrow { display: none; }
  .footer__ig { grid-template-columns: repeat(3, 1fr); }
  .footer__bottom { flex-direction: column; gap: 1rem; border-top: none; padding-top: 0; }
  /* Keep the 'LM' watermark on phones, just scaled to the same proportion it
     has on desktop (it was oversized before — 14rem ~= 57% of a phone vs 24rem
     ~= 30% of a desktop). Same bottom-left corner bleed, smaller. */
  .footer__watermark { font-size: 15rem; left: -1.1rem; bottom: -2.4rem; }
  .section, .services, .pricing, .about, .process, .final-cta, .value, .footer, .love-notes {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .hero { padding: 7rem 1.5rem 4rem; }
}

/* ---------- Nav drawer (mobile) ---------- */
/* Full-screen overlay menu — fades in, links centered, footer pinned bottom. */
.nav__drawer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: var(--cream);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 5.5rem 1.75rem 2.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.nav__drawer.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease;
}
.nav__drawer-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.4rem;
}
.nav__drawer-links a {
  font-family: var(--f-display);
  font-size: clamp(2.1rem, 9vw, 2.9rem);
  line-height: 1.1;
  color: var(--espresso);
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s ease, transform .4s ease, color .2s ease;
}
.nav__drawer.is-open .nav__drawer-links a { opacity: 1; transform: translateY(0); }
.nav__drawer.is-open .nav__drawer-links a:nth-child(1) { transition-delay: .08s; }
.nav__drawer.is-open .nav__drawer-links a:nth-child(2) { transition-delay: .14s; }
.nav__drawer.is-open .nav__drawer-links a:nth-child(3) { transition-delay: .20s; }
.nav__drawer.is-open .nav__drawer-links a:nth-child(4) { transition-delay: .26s; }
.nav__drawer-links a:hover,
.nav__drawer-links a[aria-current="page"] { color: var(--mauve-deep); }
.nav__drawer-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
.nav__drawer-ig {
  font-family: var(--f-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  font-weight: 500;
}
.nav__drawer-meta {
  font-family: var(--f-body);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: rgba(58, 52, 50, 0.6);
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .nav__drawer-links a { transition: color .2s ease; opacity: 1; transform: none; }
}
.nav__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(58, 52, 50, 0.5);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.nav__backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ================================================================
   PORTFOLIO PAGE
   ================================================================ */
.portfolio {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: var(--s-7) var(--s-4);
}
.portfolio__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: var(--s-5);
}
.filter-btn {
  font-family: var(--f-body);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 0.7rem 1.5rem;
  background: transparent;
  color: var(--espresso);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.filter-btn:hover { border-color: var(--mauve); color: var(--mauve-dark); }
.filter-btn.is-active {
  background: var(--mauve-dark);
  color: var(--cream);
  border-color: var(--mauve-dark);
}
.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.portfolio-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--nude);
  /* Skip rendering/decoding off-screen tiles — recovers the lazy-loading we
     lose by using CSS background-images for the 28-photo grid. */
  content-visibility: auto;
  contain-intrinsic-size: auto 360px;
}
.portfolio-tile picture { display: block; }
.portfolio-tile__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
  transition: transform .5s ease;
}
.portfolio-tile:hover .portfolio-tile__img { transform: scale(1.04); }
.portfolio-tile__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1rem 1.25rem 1.1rem;
  background: linear-gradient(180deg, transparent, rgba(58,52,50,0.7) 70%);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}
.portfolio-tile__cat {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  opacity: 0.85;
}
.portfolio-tile__label {
  font-family: var(--f-display);
  font-size: 1rem;
  letter-spacing: 0.01em;
}
.portfolio__foot {
  margin-top: var(--s-7);
  padding: var(--s-6) 2rem;
  background: var(--blush);
  text-align: center;
}
.portfolio__foot h2 { margin-bottom: 1rem; }
.portfolio__foot p { max-width: 30rem; margin: 0 auto 1.75rem; opacity: 0.8; }

/* ================================================================
   ABOUT PAGE
   ================================================================ */
.about-page {
  padding: var(--s-8) var(--s-4);
  max-width: var(--w-wide);
  margin: 0 auto;
}
.about-page__intro {
  display: grid;
  grid-template-columns: 0.6fr 1fr;
  gap: var(--s-6);
  align-items: center;
}

/* ---- Fun facts carousel — full-bleed photo + scroll-in text
   Ported from Madi's /about/ "A glimpse beyond" section. ---- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.glimpse {
  position: relative;
  width: 100%;
  min-height: 90vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16vh var(--s-4);
  isolation: isolate;
}
.glimpse__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: 60% center;
  background-repeat: no-repeat;
}
.glimpse__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(58, 52, 50, 0.50) 0%,
    rgba(58, 52, 50, 0.45) 50%,
    rgba(58, 52, 50, 0.55) 100%);
}
.glimpse__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 720px;
  min-height: clamp(280px, 38vh, 380px);
  text-align: center;
  color: var(--cream);
}
.glimpse__fact {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s var(--ease, ease), visibility 0s linear 0.45s;
}
.glimpse__fact.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.45s var(--ease, ease), visibility 0s linear 0s;
}
.glimpse__eyebrow {
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.92;
  margin: 0 0 28px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}
.glimpse__script {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.1;
  margin: 0 0 22px;
  color: var(--cream);
  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}
.glimpse__body {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--cream);
  opacity: 0.92;
  margin: 0 auto;
  max-width: 560px;
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}
.glimpse__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(32px, 4vw, 52px);
  height: clamp(32px, 4vw, 52px);
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--cream);
  cursor: pointer;
  z-index: 4;
  opacity: 0.78;
  transition: opacity 0.2s var(--ease, ease), transform 0.2s var(--ease, ease);
}
.glimpse__arrow:hover { opacity: 1; }
.glimpse__arrow svg { width: 100%; height: 100%; display: block; }
.glimpse__arrow--prev { left: clamp(8px, 3vw, 48px); }
.glimpse__arrow--next { right: clamp(8px, 3vw, 48px); }
.glimpse__arrow--prev:hover { transform: translateY(-50%) translateX(-3px); }
.glimpse__arrow--next:hover { transform: translateY(-50%) translateX(3px); }
/* Soft pink watercolor wash on the "What to Expect" section. The image is
   set inline via bgImage(); these rules size + position it. */
.about-page__expect {
  background-color: var(--cream);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.about-page__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center 22%;
}
/* Decorative blush seal pinned to the photo's top-left corner. Negative
   offsets make it overhang the photo edges slightly — gives it that
   "stamped on the corner" feel rather than sitting flat on the photo. */
.about-page__photo-seal {
  position: absolute;
  top: -22px;
  left: -22px;
  z-index: 1;
}
.about-page__lead h2 {
  margin-bottom: 1.5rem;
}
/* Promoted from h2 — keep the line readable in the lead block rather
   than letting the global h1 scale (clamp 2.5-4.75rem) dominate it.
   Larger bottom margin opens up breathing room before the body copy. */
.about-page__eyebrow {
  display: block;
  font-family: var(--f-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  font-weight: 500;
  margin-bottom: 0.75rem;
}
.about-page__lead h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.12;
  margin: 0 0 2rem;
}
/* Lead button: blush-pink fill at rest (lighter than the global mauve
   primary), espresso text for contrast. Extra top margin drops it below
   the body paragraphs for breathing room. Hover follows the flipped
   pattern — goes transparent with blush outline + espresso text. */
.about-page__lead .btn--primary {
  background: var(--blush);
  color: var(--espresso);
  border-color: var(--blush);
  margin-top: 1.5rem;
}
.about-page__lead .btn--primary:hover {
  background: transparent;
  color: var(--espresso);
  border-color: var(--blush);
}
.about-page__lead p {
  font-size: 1.05rem;
  line-height: 1.75;
  opacity: 0.85;
}
.about-page__philosophy { padding: var(--s-7) var(--s-4); }
.about-page__philosophy .container { max-width: 720px; text-align: center; }
/* Even vertical rhythm: title → body → quote each separated by var(--s-4). */
.about-page__philosophy h2 { margin-bottom: var(--s-4); }
.about-page__quote {
  margin: var(--s-4) 0 0;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  line-height: 1.4;
  color: var(--mauve-dark);
  border: 0;
  padding: 0;
}
/* ============================================================
   ABOUT — "Meet Lilly" editorial redesign (2026-06)
   ============================================================ */
.about-eyebrow {
  display: block;
  font-family: var(--f-body);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  font-weight: 500;
  margin-bottom: 0.85rem;
}
.about-eyebrow--light { color: var(--cream); opacity: 0.85; }

/* Hero */
.about-hero {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: var(--s-8) var(--s-4) var(--s-7);
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: var(--s-6);
  align-items: center;
}
.about-hero__media { position: relative; }
.about-hero__photo {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center 22%;
}
.about-hero__seal { position: absolute; top: -24px; left: -24px; z-index: 1; }
.about-hero__copy h1 {
  font-size: clamp(2.3rem, 5vw, 3.7rem);
  line-height: 1.1;
  margin: 0 0 1.5rem;
}
.about-hero__lead {
  font-size: 1.1rem;
  line-height: 1.7;
  opacity: 0.85;
  max-width: 34rem;
  margin: 0 0 1.6rem;
}
.about-hero__meta {
  margin: 0 0 1.85rem;
  font-family: var(--f-body);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--espresso);
  opacity: 0.7;
  line-height: 1.9;
}
.about-hero__meta span:not(:last-child)::after { content: '·'; margin: 0 0.6rem; color: var(--mauve-deep); }

/* Story */
.about-story { padding: var(--s-7) var(--s-4); }
.about-story__inner {
  max-width: var(--w-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: var(--s-6);
  align-items: center;
}
.about-story__photo {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
}
.about-story__copy h2 { margin: 0 0 1.25rem; }
.about-story__copy p { font-size: 1.02rem; line-height: 1.75; opacity: 0.88; margin: 0 0 1.25rem; }
.about-quote {
  margin: 1.75rem 0 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--mauve);
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.4;
  color: var(--mauve-deep);
}

/* Kind words — featured testimonial */
.about-love .container { max-width: 760px; }
.about-love__seal { display: block; margin: 0 auto 1.25rem; }
.about-love__quote {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.42;
  margin: 0.5rem 0 1.5rem;
  color: var(--espresso);
}
.about-love__name {
  font-family: var(--f-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  margin: 0;
}

/* CTA */
.about-cta h2 { margin: 0 0 1.75rem; }
.about-cta__alt { margin: 1.25rem 0 0; font-size: 0.9rem; opacity: 0.9; }
.about-cta__alt a { color: var(--cream); text-decoration: underline; }

@media (max-width: 820px) {
  .about-hero { grid-template-columns: 1fr; gap: var(--s-4); padding-top: 6rem; }
  .about-hero__media { width: 100%; max-width: 320px; margin: 0 auto; }
  .about-hero__copy { text-align: center; }
  .about-hero__lead { margin-left: auto; margin-right: auto; }
  .about-story__inner { grid-template-columns: 1fr; gap: var(--s-4); }
  .about-story__photo { order: -1; width: 100%; max-width: 320px; margin: 0 auto; }
}

.about-page__specialties {
  padding: var(--s-7) var(--s-4);
  background-color: var(--cream);
  background-size: cover;
  background-position: 40% center;
  background-repeat: no-repeat;
}
.about-page__specialty-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-5);
}
.about-page__specialty-grid h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.about-page__specialty-grid p { opacity: 0.8; }
.about-page__expect { padding: var(--s-7) var(--s-4); }
.about-page__steps {
  list-style: none;
  padding: 0;
  margin: var(--s-5) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.about-page__steps li {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1.5rem;
  padding: 1.75rem;
  background: var(--cream);
  border: 1px solid var(--line);
}
.about-page__step-num {
  font-family: var(--f-display);
  font-size: 2.25rem;
  color: var(--mauve);
  line-height: 1;
}
.about-page__steps h4 {
  font-size: 1.2rem;
  margin: 0 0 0.5rem;
}
.about-page__steps p { margin: 0; opacity: 0.8; }
.about-page__cta { padding: var(--s-7) var(--s-4); }
.about-page__cta-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* ================================================================
   SERVICES PAGE — alternating image / content blocks
   ================================================================ */
.services-page {
  /* Full-width wrapper: each .service-block is now an edge-to-edge band that
     alternates background, so the page reads as distinct sections instead of
     one continuous cream column. Inner content stays centered + capped by
     .service-block__inner. */
  padding: 0;
}
.service-block {
  padding: var(--s-6) var(--s-4);
  scroll-margin-top: 84px; /* clear the fixed nav when reached via a jump link */
}
.service-block:nth-child(even) { background: var(--blush); }
.service-block__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  align-items: center;
  max-width: var(--w-wide);
  margin: 0 auto;
}
.service-block--reverse .service-block__img { order: 2; }

/* Jump-to-service pill row under the marquee — lets visitors skip straight to
   the service they came for instead of scrolling the whole menu. */
/* Menu at a glance — 4 photo cards (the whole offering + entry prices in one
   screen) that double as jump nav: tap a card to land on its detail block. */
.service-menu {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: var(--s-5) var(--s-4) var(--s-4);
}
.service-menu__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
.menu-card {
  display: block;
  text-align: center;
  color: var(--espresso);
  transition: transform .3s ease;
}
.menu-card__media {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: 0.9rem;
  background: var(--nude);
}
.menu-card__media picture { display: block; width: 100%; height: 100%; }
.menu-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.menu-card__name {
  display: block;
  font-family: var(--f-display);
  font-size: 1.3rem;
  line-height: 1.2;
}
.menu-card__price {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--f-body);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mauve-deep);
}
@media (hover: hover) {
  .menu-card:hover { transform: translateY(-5px); }
  .menu-card:hover .menu-card__img { transform: scale(1.05); }
  .menu-card:hover .menu-card__name { color: var(--mauve-deep); }
}
.menu-card:focus-visible { outline: 2px solid var(--mauve-deep); outline-offset: 4px; }
.service-menu__more {
  display: block;
  text-align: center;
  margin-top: var(--s-4);
  font-family: var(--f-body);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mauve-deep);
}
@media (hover: hover) {
  .service-menu__more:hover { opacity: 0.7; }
}
.service-block__img {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
}
.service-block__content h2 {
  margin: 0 0 0.6rem;
}
/* Meta line under the heading: descriptor + duration, divided. */
.service-block__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}
.service-block__sub {
  font-family: var(--f-body);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  font-weight: 500;
}
.service-block__time {
  font-family: var(--f-body);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--espresso);
  opacity: 0.6;
  padding-left: 0.75rem;
  border-left: 1px solid var(--line);
}
.service-block__body {
  font-size: 1rem;
  line-height: 1.7;
  opacity: 0.85;
  margin: 0 0 1.5rem;
}
/* "What's included" as a slim inline line instead of a boxed card. */
.service-block__includes-line {
  font-size: 0.9rem;
  line-height: 1.7;
  opacity: 0.85;
  margin: 0 0 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.service-block__includes-label {
  font-family: var(--f-body);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  font-weight: 500;
  margin-right: 0.6rem;
}
.service-block__pricing {
  margin-bottom: 1.75rem;
}
.service-block__price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  gap: 1rem;
}
.service-block__price-row:last-child { border-bottom: 0; }
.service-block__price-tier {
  font-family: var(--f-display);
  font-size: 1.15rem;
}
.service-block__price-detail {
  font-size: 0.85rem;
  opacity: 0.65;
  margin-top: 0.15rem;
}
.service-block__price-amount {
  font-family: var(--f-display);
  font-size: 1.3rem;
  color: var(--mauve-dark);
  white-space: nowrap;
}
.services-page__note { padding: var(--s-7) var(--s-4); }
.services-page__note .container { max-width: 640px; }
.services-page__cta { padding: var(--s-7) var(--s-4); }

/* Color & Add-Ons — compact cards rendered after the 4 image-driven service blocks. */
.service-extras {
  background: var(--cream);
  padding: var(--s-4) var(--s-4) var(--s-7);
  border-top: 1px solid var(--line-cream);
}
.service-extras__inner {
  max-width: var(--w-wide);
  margin: 0 auto;
}
.service-extras__head {
  text-align: center;
  margin-bottom: var(--s-5);
}
.service-extras__head h2 { margin: 0.5rem 0 0.75rem; }
.service-extras__head p {
  max-width: 38rem;
  margin: 0 auto;
  opacity: 0.78;
  line-height: 1.6;
}
/* Color & Add-Ons — one cohesive panel: the Color price list, then a compact
   add-on strip (instead of a second card that stretched tall to match). */
.service-extras__panel {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  padding: var(--s-5);
}
.service-extras__color h3 {
  margin: 0 0 0.85rem;
  font-size: 1.65rem;
  text-align: center;
}
.service-extras__lead {
  margin: 0 auto 1.5rem;
  max-width: 40rem;
  text-align: center;
  opacity: 0.8;
  line-height: 1.6;
}
.service-extras__color .btn {
  display: block;
  width: fit-content;
  margin: 1.5rem auto 0;
}
.service-extras__addons {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.service-extras__addons h4 {
  font-family: var(--f-body);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  font-weight: 500;
  text-align: center;
  margin: 0 0 1.25rem;
}
.service-extras__addon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.service-extras__addon {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: var(--blush);
}
.service-extras__addon-name {
  font-family: var(--f-display);
  font-size: 1.15rem;
}
.service-extras__addon-detail {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 0.1rem;
}
.service-extras__addon-price {
  font-family: var(--f-display);
  font-size: 1.2rem;
  color: var(--mauve-dark);
  white-space: nowrap;
}
#color, #addons { scroll-margin-top: 84px; }
.service-block__content > .btn {
  display: block;
  width: fit-content;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .service-extras { padding: var(--s-5) 1.25rem var(--s-6); }
  .service-extras__panel { padding: var(--s-4) 1.25rem; }
  .service-extras__addon-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   CONTACT PAGE
   ================================================================ */
.contact-page {
  padding: var(--s-7) var(--s-4);
  max-width: var(--w-wide);
  margin: 0 auto;
}
.contact-page__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--s-6);
}
.contact-info { font-size: 0.95rem; }
.contact-info__block {
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.contact-info__block:last-child { border-bottom: 0; margin-bottom: 0; }
.contact-info__block h3 {
  font-size: 1.3rem;
  margin: 0 0 0.5rem;
}
.contact-info address {
  font-style: normal;
  line-height: 1.7;
}
.contact-info address a {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--mauve-dark);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.contact-info__hours {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.92rem;
}
.contact-info__hours li {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px dotted var(--line);
}
.contact-info__hours li:last-child { border-bottom: 0; }
.contact-info__note {
  margin-top: 1rem;
  font-size: 0.85rem;
  opacity: 0.7;
}
.contact-info__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}
.contact-info__list strong {
  font-family: var(--f-body);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--mauve);
}
.contact-info__list a {
  font-size: 1rem;
  color: var(--espresso);
}
.contact-info__list a:hover { color: var(--mauve-dark); }

.contact-form-wrap h2 { margin: 0.5rem 0 0.75rem; }
.contact-form-wrap > p { opacity: 0.8; margin-bottom: 2rem; }
.contact-form {
  display: grid;
  gap: 1.25rem;
}
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.contact-form__row--three {
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
}
.contact-form__row--top { align-items: start; }
@media (max-width: 720px) {
  .contact-form__row,
  .contact-form__row--three {
    grid-template-columns: 1fr;
  }
}
.contact-form__field {
  display: flex;
  flex-direction: column;
}
.contact-form__field span {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mauve-dark);
  margin-bottom: 0.5rem;
}
.contact-form__field em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.6;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: var(--f-body);
  font-size: 0.95rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--espresso);
  width: 100%;
  transition: border-color .2s, background .2s;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--mauve);
  background: #fff;
}
.contact-form textarea { resize: none; min-height: 9rem; }
.contact-form__counter {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  color: var(--espresso);
  opacity: 0.55;
  text-align: right;
  letter-spacing: 0.06em;
}

/* Custom drop-zone — replaces the native file picker UI. The native input is
   hidden via the [hidden] attribute and triggered through the label's `for`. */
.contact-form__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.5rem 1.25rem;
  background: var(--cream);
  border: 2px dashed var(--mauve);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: border-color .2s, background .2s, transform .2s;
  max-width: 22rem;
  margin: 0;
}
.contact-form__dropzone:hover {
  border-color: var(--mauve-dark);
  background: #fff;
}
.contact-form__dropzone--drag {
  border-color: var(--mauve-dark);
  background: var(--blush);
  transform: scale(1.01);
}
.contact-form__dropzone-icon {
  width: 38px;
  height: 38px;
  color: var(--mauve-dark);
  opacity: 0.75;
}
.contact-form__dropzone .contact-form__dropzone-text {
  font-family: var(--f-body);
  font-size: 0.9rem;
  color: var(--espresso);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  margin: 0;
  opacity: 1;
}
.contact-form__dropzone .contact-form__dropzone-text em {
  color: var(--mauve-dark);
  font-style: normal;
  font-weight: 500;
  text-decoration: underline;
  opacity: 1;
}
.contact-form__file-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--espresso);
  opacity: 0.55;
  margin-top: 0.5rem;
}
.contact-form__file-hint[data-error] {
  color: var(--mauve-dark);
  opacity: 1;
  font-weight: 500;
}
/* Photo previews — pill chips matching the service-chip aesthetic. Each pill
   has a small circular thumbnail, the filename, and a × remove button. */
.contact-form__previews {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.75rem;
}
.contact-form__previews:empty { display: none; }
.contact-form__preview {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.5rem 0.3rem 0.3rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 0.78rem;
  color: var(--espresso);
  max-width: 100%;
}
.contact-form__preview img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
}
.contact-form__preview-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blush);
  color: var(--espresso);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.contact-form__preview-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.contact-form__preview-remove {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: transparent;
  color: var(--espresso);
  border: 0;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity .15s, background .15s, color .15s;
}
.contact-form__preview-remove:hover {
  background: var(--mauve-dark);
  color: var(--cream);
  opacity: 1;
}

/* Phone — narrower than the other inputs since a US phone is fixed length. */
.contact-form__field--phone input { max-width: 14rem; }

/* Multi-select chips for service selection */
.contact-form__field--checks {
  display: block;
}
.contact-form__checks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  margin-top: 0.4rem;
}
.contact-form__check {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}
.contact-form__check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.contact-form__check span {
  display: block;
  padding: 0.75rem 0.9rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--espresso);
  text-align: center;
  margin: 0;
  opacity: 1;
  transition: background .2s, border-color .2s, color .2s;
}
.contact-form__check:hover span {
  border-color: var(--mauve);
}
.contact-form__check input:checked + span {
  background: var(--mauve-dark);
  border-color: var(--mauve-dark);
  color: var(--cream);
}
.contact-form__check input:focus-visible + span {
  outline: 2px solid var(--mauve-dark);
  outline-offset: 2px;
}
@media (max-width: 720px) {
  /* Switch services chips from grid to centered flex-wrap so an odd-count last
     row (e.g. "Other" on its own line) sits centered instead of left-aligned. */
  .contact-form__checks:not(.contact-form__checks--days):not(.contact-form__checks--times) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    grid-template-columns: none;
  }
  .contact-form__checks:not(.contact-form__checks--days):not(.contact-form__checks--times) .contact-form__check {
    flex: 0 1 calc(50% - 0.3rem);
  }
}
@media (max-width: 420px) {
  .contact-form__checks:not(.contact-form__checks--days):not(.contact-form__checks--times) .contact-form__check {
    flex: 0 1 100%;
  }
}

/* Day-of-week chips & time-of-day chips — content-sized pills, centered in the
   column so the row doesn't feel left-heavy. */
.contact-form__checks--days,
.contact-form__checks--times {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem !important;
  grid-template-columns: none !important;
}
.contact-form__checks--days .contact-form__check span,
.contact-form__checks--times .contact-form__check span {
  padding: 0.55rem 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  min-width: 64px;
  text-align: center;
}

/* Stack wrapper — lets days + time sit in a single grid cell, stacked vertically. */
.contact-form__field-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  align-items: center;
}
.contact-form__field-stack > .contact-form__field {
  width: 100%;
  align-items: center;
}
.contact-form__field-stack > .contact-form__field > span {
  align-self: center;
}

/* Center the dropzone within the photos column so both sides feel balanced. */
.contact-form__field--file {
  align-items: center;
}
.contact-form__field--file > span {
  align-self: center;
  text-align: center;
}
.contact-form__dropzone {
  margin-left: auto;
  margin-right: auto;
}
.contact-form__file-hint,
.contact-form__field--file .contact-form__previews {
  align-self: center;
  text-align: center;
  width: 100%;
  max-width: 22rem;
}

.contact-form__note {
  font-size: 0.85rem;
  opacity: 0.65;
  margin: 0;
}
.contact-form__submit {
  justify-self: center;
  display: block;
  margin: 0.5rem auto 0;
}
.contact-form__turnstile {
  display: flex;
  justify-content: center;
  margin: 0.5rem auto 0;
  min-height: 65px;
}
.contact-form__error {
  background: var(--blush);
  border: 1px solid var(--mauve);
  color: var(--espresso);
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  text-align: center;
  margin: 0.5rem 0 0;
}

.contact-page__map {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 0 var(--s-4);
}
.contact-page__map iframe {
  display: block;
  width: 100%;
  filter: grayscale(0.25) contrast(0.95);
}

/* ---------- Contact: pre-submit form, post-submit thanks panel ---------- */
.contact-thanks__intro {
  text-align: center;
  padding: var(--s-7) var(--s-4) var(--s-4);
  max-width: var(--w-prose);
  margin: 0 auto;
}
.contact-thanks__intro h2 { margin: 0.5rem 0 1rem; }
.contact-thanks__intro p { opacity: 0.8; }

.contact-chair {
  text-align: center;
  padding: var(--s-5) var(--s-4) var(--s-4);
  max-width: var(--w-body);
  margin: 0 auto;
}
.contact-chair h2,
.contact-chair h3 { margin: 0.5rem 0 1rem; }
.contact-chair h3 { font-size: 1.6rem; }
.contact-chair address {
  font-style: normal;
  line-height: 1.7;
  font-size: 1.05rem;
}
.contact-chair address a {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--mauve-dark);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

.contact-form-section {
  background: #fff;
  padding: var(--s-7) var(--s-4);
}
.contact-form-section__inner {
  max-width: var(--w-body);
  margin: 0 auto;
}
.contact-form-section__inner h2 { margin: 0.5rem 0 0.75rem; }
.contact-form-section__inner > p { opacity: 0.8; margin-bottom: 2rem; }
/* On the mauve-soft form bg, the default mauve primary button blends in. */
.contact-form-section .btn--primary { background: var(--mauve-dark); border-color: var(--mauve-dark); }
.contact-form-section .btn--primary:hover { background: transparent; color: var(--espresso); border-color: var(--mauve); }

.contact-extras {
  padding: var(--s-7) var(--s-4);
  max-width: var(--w-body);
  margin: 0 auto;
}
.contact-extras__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  align-items: start;
}
.contact-extras .kicker { display: block; margin-bottom: 0.75rem; }

/* ================================================================
   RESPONSIVE — new pages
   ================================================================ */
@media (max-width: 960px) {
  .portfolio__grid { grid-template-columns: repeat(3, 1fr); }
  .about-page__intro { grid-template-columns: 1fr; gap: var(--s-4); }
  .about-page__photo { aspect-ratio: 3 / 4; max-height: 380px; width: min(100%, 285px); margin-inline: auto; }
  .about-page__specialty-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .service-block__inner { grid-template-columns: 1fr; gap: var(--s-4); }
  .service-block--reverse .service-block__img { order: 0; }
  /* Stacked layout: photo fills the full column width (no right-side gap) at a
     fixed, trimmed height — background-size:cover crops it. Using an explicit
     width + height avoids the aspect-ratio + max-height combo that previously
     shrank the photo's width and left it floating left of a big empty gap. */
  .service-block__img { width: 100%; height: 360px; aspect-ratio: auto; }
  .contact-page__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .contact-extras__grid { grid-template-columns: 1fr; gap: var(--s-5); }
}

@media (max-width: 720px) {
  .portfolio__grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .filter-btn { padding: 0.55rem 1rem; font-size: 0.65rem; letter-spacing: 0.18em; }
  .about-page__steps li { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.25rem; }
  .service-block { padding: var(--s-5) var(--s-4); }
  .service-menu { padding: var(--s-4) var(--s-4) var(--s-3); }
  .service-menu__grid { grid-template-columns: 1fr 1fr; gap: 0.85rem; }
  .menu-card__name { font-size: 1.1rem; }
  .contact-form__row { grid-template-columns: 1fr; }
  .page-header { padding: 7.5rem 1.5rem 3rem; }
  .page-header__sub { font-size: 0.95rem; }
}

/* ================================================================
   CONTACT PAGE — Madi-style editorial form (ported + adapted)
   Hero (eyebrow + display headline + lede + seal accent + massive bg word),
   then a cream card form grouped into 01/02/03, then 3 contact cards.
   ================================================================ */

/* ---------- Hero ---------- */
.contact-hero {
  position: relative;
  background: var(--cream);
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 5.5rem var(--s-4) var(--s-4);
  overflow: hidden;
  isolation: isolate;
}
.contact-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.contact-hero__eyebrow {
  font-family: var(--f-body);
  font-size: 0.7rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  font-weight: 500;
  margin: 0 0 1.75rem;
}
.contact-hero__title { margin: 0 0 1.5rem; line-height: 0.95; }
.contact-hero__line1,
.contact-hero__line2 {
  display: block;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 6.2vw, 5.25rem);
  color: var(--espresso);
  letter-spacing: 0;
}
.contact-hero__line2 em {
  font-style: italic;
  color: var(--mauve-deep);   /* was --mauve (#C9A9A3) = 2.03:1 on cream; deep rose is 7.46:1 */
  font-weight: 400;
}
.contact-hero__lede {
  font-family: var(--f-display);
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--espresso);
  max-width: 540px;
  margin: 0 auto;
  opacity: 0.85;
}
.contact-hero__seal {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}
/* Decorative oversized script "Hello" behind the hero. Sits below z-1 so the
   real content stays primary. var(--blush) gives the watermark a rose hue
   instead of Madi's oat-tan. */
.contact-hero__massive {
  position: absolute;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(9rem, 20vw, 19rem);
  letter-spacing: -0.04em;
  line-height: 0.8;
  color: var(--blush);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  bottom: 1.25rem;
  right: 4rem;
  opacity: 0.6;
}
@media (max-width: 700px) {
  .contact-hero__massive { font-size: 28vw; right: -1rem; bottom: 0.5rem; opacity: 0.4; }
}

/* ---------- Form panel ---------- */
.form-section {
  padding: var(--s-5) var(--s-3) var(--s-7);
  background: var(--nude);
  position: relative;
}
.inquiry-form {
  --form-gap: 1.4rem;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  padding: 3.5rem 3.5rem 3rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 14px 42px rgba(58, 52, 50, 0.08);
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  position: relative;
}
@media (max-width: 700px) {
  .inquiry-form { padding: 2.25rem 1.4rem 2rem; gap: 1.4rem; }
}

/* Group — numbered eyebrow + fields */
.inquiry-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--form-gap);
  position: relative;
}
.inquiry-form__group + .inquiry-form__group {
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.inquiry-form__group-eyebrow {
  font-family: var(--f-body);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--espresso);
  margin: 0 0 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-weight: 500;
}
.inquiry-form__group-num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 2.15rem;
  line-height: 1;
  color: var(--mauve-deep);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

/* Row — stacks single column on mobile, 2-up on desktop. */
.inquiry-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--form-gap);
  width: 100%;
}
@media (min-width: 700px) {
  .inquiry-form__row { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}

.inquiry-form__field {
  position: relative;
  width: 100%;
  min-width: 0;
}
.inquiry-form__field--full { width: 100%; }

.req {
  color: var(--mauve-deep);
  font-style: italic;
  margin-left: 2px;
}

/* Floating label */
.inquiry-form__label {
  position: absolute;
  top: 50%;
  left: 1.125rem;
  transform: translateY(-50%);
  color: var(--mauve-deep);
  font-family: var(--f-body);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  pointer-events: none;
  background: transparent;
  /* Right padding keeps the trailing required asterisk off the overflow:hidden
     clip edge — the italic * ink overhangs its glyph box and was getting shaved. */
  padding: 0 0.55rem 0 0;
  transition: all 0.25s ease;
  max-width: calc(100% - 36px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
}

.inquiry-form__input {
  width: 100%;
  padding: 1.125rem;
  font-family: var(--f-body);
  font-size: 0.95rem;
  color: var(--espresso);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 2px;
  outline: none;
  letter-spacing: 0.01em;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  position: relative;
  z-index: 1;
}
.inquiry-form__input::placeholder { color: transparent; }
.inquiry-form__input:focus {
  border-color: var(--espresso);
  background: var(--cream);
  box-shadow: 0 0 0 1px var(--espresso), 0 0 0 5px rgba(160, 134, 121, 0.08);
}

/* Float label up when input is focused or has content */
.inquiry-form__input:focus + .inquiry-form__label,
.inquiry-form__input:not(:placeholder-shown) + .inquiry-form__label {
  top: 0;
  left: 0.75rem;
  transform: translateY(-50%) scale(0.78);
  background: var(--cream);
  padding: 2px 0.85rem 2px 0.5rem;
  color: var(--espresso);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Textarea — label pinned to top */
.inquiry-form__textarea {
  min-height: 9rem;
  padding: 1.4rem 1.125rem 1rem;
  resize: none;
  line-height: 1.6;
}
.inquiry-form__field--textarea .inquiry-form__label {
  top: 1.4rem;
  transform: translateY(0);
}
.inquiry-form__field--textarea .inquiry-form__textarea:focus + .inquiry-form__label,
.inquiry-form__field--textarea .inquiry-form__textarea:not(:placeholder-shown) + .inquiry-form__label {
  top: 0;
  transform: translateY(-50%) scale(0.82);
}
.inquiry-form__counter {
  position: absolute;
  bottom: 0.5rem;
  right: 0.85rem;
  font-family: var(--f-body);
  font-size: 0.7rem;
  color: var(--mauve-deep);
  opacity: 0.7;
  pointer-events: none;
}

/* Fieldset for pill groups (radio + checkbox) */
.inquiry-form__radio {
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.inquiry-form__radio legend {
  position: static;
  transform: none;
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--f-body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  font-weight: 500;
  text-align: left;
}
.inquiry-form__radio legend em {
  font-style: italic;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.85;
  margin-left: 0.35em;
}

/* Pills — works for both radio and checkbox inputs via :has(input:checked). */
.radio-pills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* services: two even columns */
  gap: 0.5rem;
}
/* Short-label groups (days, time of day): 3 across, but any leftover row is
   centered (so "Fri / Sat" balances instead of stranding left — same idea as
   the centered "Other" on the services group). */
.radio-pills--compact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.radio-pills--compact .radio-pill {
  flex: 0 1 calc((100% - 1rem) / 3);
}
/* The lone "Other" option spans the full row and centers, instead of sitting
   half-width on the left. */
.radio-pill--full {
  grid-column: 1 / -1;
}
.radio-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 0.6rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
/* Only apply hover on real pointers — on touch, :hover sticks after a tap and
   leaves the last-tapped pill outlined even once it's deselected. */
@media (hover: hover) {
  .radio-pill:hover {
    border-color: var(--mauve-deep);
    background: var(--cream);
  }
}
.radio-pill input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.radio-pill__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cream);
  border: 1.5px solid var(--line);
  flex-shrink: 0;
  display: none;       /* dots removed — full labels need the width, selection shows via blush fill */
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}
.radio-pill__dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cream);
  transform: scale(0);
  transition: transform 0.2s ease;
}
.radio-pill:has(input:checked) {
  border-color: var(--mauve-deep);
  background: var(--blush);
  box-shadow: 0 0 0 3px rgba(160, 134, 121, 0.08);
}
.radio-pill:has(input:checked) .radio-pill__dot {
  background: var(--mauve-deep);
  border-color: var(--mauve-deep);
}
.radio-pill:has(input:checked) .radio-pill__dot::before { transform: scale(1); }
.radio-pill__text {
  font-family: var(--f-body);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--espresso);
  font-weight: 500;
}

/* File upload — preserved from Lilly's existing dropzone, restyled to match. */
.inquiry-form__field--file {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.inquiry-form__file-legend {
  font-family: var(--f-body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  font-weight: 500;
}
.inquiry-form__file-legend em {
  font-style: italic;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.85;
  margin-left: 0.35em;
}
.inquiry-form__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 2rem 1rem;
  background: var(--cream);
  border: 1px dashed var(--mauve-deep);
  border-radius: 2px;
  color: var(--mauve-deep);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
  text-align: center;
}
.inquiry-form__dropzone:hover,
.inquiry-form__dropzone--drag {
  background: var(--blush);
  border-color: var(--espresso);
}
.inquiry-form__dropzone-icon {
  width: 1.75rem;
  height: 1.75rem;
}
.inquiry-form__dropzone-text {
  font-family: var(--f-body);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--espresso);
}
.inquiry-form__dropzone-text em {
  font-style: italic;
  color: var(--mauve-deep);
}
.inquiry-form__file-hint {
  font-family: var(--f-body);
  font-size: 0.78rem;
  color: var(--mauve-deep);
  opacity: 0.85;
}
.inquiry-form__file-hint[data-error="true"] {
  color: #B83A3A;
  opacity: 1;
}
.inquiry-form__previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.6rem;
}
.inquiry-form__preview {
  position: relative;
  aspect-ratio: 1;
  background: var(--blush);
  border-radius: 2px;
  overflow: hidden;
}
.inquiry-form__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.inquiry-form__preview-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: var(--f-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--mauve-deep);
}
.inquiry-form__preview-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.3rem 0.45rem;
  background: rgba(58, 52, 50, 0.7);
  color: var(--cream);
  font-size: 0.65rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inquiry-form__preview-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  background: var(--cream);
  color: var(--espresso);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease;
}
.inquiry-form__preview-remove:hover {
  background: var(--mauve-deep);
  color: var(--cream);
  border-color: var(--mauve-deep);
}

/* Turnstile + submit */
.inquiry-form__turnstile {
  display: flex;
  justify-content: center;
  margin: 0.5rem 0 0.25rem;
}
.inquiry-form__submit {
  align-self: center;
  margin-top: 0.5rem;
  padding: 1.1rem 3.5rem;
  font-family: var(--f-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--mauve-dark);
  border: 1px solid var(--mauve-dark);
  border-radius: 2px;
  cursor: pointer;
  min-width: 16rem;
  transition: background 0.25s ease, color 0.25s ease, letter-spacing 0.3s ease;
}
.inquiry-form__submit:hover {
  background: transparent;
  color: var(--mauve-dark);
  letter-spacing: 0.38em;
}
.inquiry-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  letter-spacing: 0.32em;
}
.inquiry-form__hint {
  text-align: center;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--mauve-deep);
  margin-top: 0.75rem;
}
.inquiry-form__hint a {
  color: var(--espresso);
  border-bottom: 1px solid var(--line);
}
.inquiry-form__hint a:hover { color: var(--mauve-deep); }
.inquiry-form__error {
  max-width: 100%;
  margin: 0 0 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(184, 58, 58, 0.08);
  border: 1px solid rgba(184, 58, 58, 0.4);
  border-radius: 2px;
  color: #A33B3B;
  font-family: var(--f-body);
  font-size: 0.85rem;
  text-align: center;
}

/* ---------- Contact cards (3-up alternate-channels) ---------- */
.contact-cards {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: var(--s-7) var(--s-3);
  background: var(--cream);
}
.contact-cards__inner { max-width: 980px; margin: 0 auto; }
.contact-cards__eyebrow {
  font-family: var(--f-body);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  font-weight: 500;
  text-align: center;
  margin: 0 0 1.5rem;
}
.contact-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}
@media (min-width: 800px) {
  .contact-cards__grid { grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }
}
.contact-card {
  display: block;
  padding: 2.25rem 2rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  text-align: center;
}
.contact-card:hover {
  background: var(--blush);
  border-color: var(--mauve-deep);
  transform: translateY(-3px);
  color: var(--espresso);
}
.contact-card__tag {
  font-family: var(--f-body);
  font-size: 0.65rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  margin: 0 0 0.85rem;
  font-weight: 500;
}
.contact-card__handle {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--espresso);
  margin: 0 0 0.4rem;
  letter-spacing: 0;
}
.contact-card__note {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--mauve-deep);
  margin: 0;
}

/* ============================================================
   Audit pass 2026-06-04 — IA cross-links + a11y (skip link,
   reduced motion). Appended so these win the cascade.
   ============================================================ */

/* Skip-to-content link (WCAG 2.4.1) — hidden until focused. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -56px;
  z-index: 2000;
  padding: 0.65rem 1.1rem;
  background: var(--espresso);
  color: var(--cream);
  font-family: var(--f-body);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 0 0 6px 6px;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 0; }

/* Home services foot — now holds two peer buttons (Services + Portfolio). */
.services__foot {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

/* Portfolio foot — booking CTA + services link (was an Instagram dead-end). */
.portfolio__foot-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}
.portfolio__foot p a {
  color: var(--espresso);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Secondary button in the foot reads as outline (espresso) so Book stays primary. */
.portfolio__foot-cta .btn--outline {
  background: transparent;
  color: var(--espresso);
  border-color: var(--espresso);
}
.portfolio__foot-cta .btn--outline:hover {
  background: var(--espresso);
  color: var(--cream);
}

/* Services blocks — secondary "see work" link beside the Book button. */
.service-block__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.service-block__examples {
  color: var(--espresso);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  white-space: nowrap;
}
.service-block__examples:hover { opacity: 0.7; }

/* About — specialty headings link to their service section. */
.about-page__specialty-grid h3 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--mauve);
  transition: border-color 0.15s ease;
}
.about-page__specialty-grid h3 a:hover { border-color: var(--espresso); }

/* Respect reduced-motion (WCAG 2.2.2 / 2.3.3): freeze the marquee,
   show reveals immediately, and disable smooth scroll. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Responsive rework 2026-06-04 — keep photo + text SIDE-BY-SIDE down
   to tablet width. The shared 960px breakpoint stacked these sections
   too early (photo standalone, text underneath). 2-column was verified
   to fit cleanly down to 720px, so these restore it for 721px and up;
   the sections stack only at <=720px (phone width, where the nav also
   becomes a hamburger). Wins over the 960px stacking by source order. */
@media (min-width: 721px) {
  /* Services page — service blocks */
  .service-block__inner { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .service-block__img {
    /* Centered, bounded sticky photo: a viewport-height portrait that sits
       centered on screen as the reader scrolls the taller pricing column,
       and releases at the end of the pricing -- the margin-bottom trims the
       sticky travel so the photo stops there instead of riding down next to
       the booking button. At <=720px it stacks and this whole block is off. */
    aspect-ratio: auto;
    height: 68vh;
    max-height: 600px;
    align-self: start;
    position: sticky;
    top: 16vh;            /* (100 - 68) / 2 -> vertically centered */
    margin-bottom: 7rem;  /* ends the ride at the pricing, before the CTA */
  }
  .service-block--reverse .service-block__img { order: 2; }

  /* Home — "Meet your stylist" */
  .about__grid { grid-template-columns: 1fr 1fr; gap: 4rem; }

  /* About page — intro (portrait + lead) */
  .about-page__intro { grid-template-columns: 0.8fr 1fr; gap: var(--s-6); }
  .about-page__photo { aspect-ratio: 4 / 5; max-height: none; width: auto; margin-inline: 0; }
}