/* ================================================================
   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;
  /* Deep rose — the accessible accent for text, icons, and filled buttons
     (cream text on it = 7.46:1 on cream, 5.67:1 on nude — passes WCAG AA).
     Restored to #7D3F37 on 2026-06-04: it had been aliased to brand mauve
     #C9A9A3 (mauve-deep) / used #B48E87 (mauve-dark) for a softer look on
     2026-05-15, but that failed AA on small text (2.03:1) and buttons
     (2.75:1). Brand mauve #C9A9A3 (var(--mauve)) still owns soft fills,
     the wordmark, borders, and large decorative accents. */
  --mauve-dark: #7D3F37;   /* filled-button fill carrying cream text */
  --mauve-deep: #7D3F37;   /* 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(--mauve-dark);
  color: var(--cream);
  border-color: var(--mauve-dark);
}
.btn--primary:hover {
  background: transparent;
  color: var(--mauve-dark);
  border-color: var(--mauve-dark);
}

.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(--mauve-dark); color: var(--cream);    border-color: var(--mauve-dark); }
.about       .btn--outline:hover {  background: transparent;        color: var(--mauve-dark); border-color: var(--mauve-dark); }
.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(--mauve-dark); color: var(--cream);    border-color: var(--mauve-dark); }
.services    .btn--outline:hover {  background: transparent;        color: var(--mauve-dark); border-color: var(--mauve-dark); }
.portfolio__foot .btn--outline {       background: var(--mauve-dark); color: var(--cream);    border-color: var(--mauve-dark); }
.portfolio__foot .btn--outline:hover { background: transparent;        color: var(--mauve-dark); border-color: var(--mauve-dark); }

/* ---------- 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(--mauve-dark); border-color: var(--mauve-dark); }
.section--mauve .btn--primary:hover { background: transparent; color: var(--mauve-dark); border-color: var(--mauve-dark); }
.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;
}
.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; }
/* On interior pages the logo is the only link back home — give it the same
   mauve hover as the nav links so it reads as clickable. Excluded on the home
   page itself (you're already there, even once the nav scrolls solid). */
body:not([data-page="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;
  min-height: 92vh;
  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;
  background-position: center;
  z-index: 1;
}
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(58,52,50,0.45) 0%, rgba(58,52,50,0.55) 60%, rgba(58,52,50,0.7) 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;
}

/* ---------- 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-dark); }

/* 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(3.5rem, 18vw, 11rem); 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.55), rgba(250, 247, 245, 0.55)),
    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: 90vh;
  }
}
/* 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: 60vh; }
  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;
}
/* 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__lead h1 {
  font-size: clamp(1.85rem, 3.6vw, 2.75rem);
  line-height: 1.15;
  margin: 0 0 2.5rem;
}
/* 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-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 {
  /* Top padding trimmed since the marquee above already provides breathing
     room. Bottom keeps the original generous spacing. */
  padding: var(--s-4) var(--s-4) var(--s-7);
  max-width: var(--w-wide);
  margin: 0 auto;
}
.service-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--line);
}
.service-block:last-child { border-bottom: 0; }
.service-block--reverse .service-block__img { order: 2; }
.service-block__img {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
}
.service-block__content h2 {
  margin: 0.5rem 0 1rem;
}
.service-block__content > p {
  font-size: 1rem;
  line-height: 1.7;
  opacity: 0.85;
  margin-bottom: 1.75rem;
}
.service-block__includes {
  background: var(--cream);
  padding: 1.5rem;
  border: 1px solid var(--line);
  margin-bottom: 1.5rem;
}
.service-block__includes h4 {
  font-size: 0.75rem;
  font-family: var(--f-body);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--mauve);
  margin: 0 0 0.75rem;
  font-weight: 500;
}
.service-block__includes ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  columns: 2;
  column-gap: 1.5rem;
  font-size: 0.92rem;
}
.service-block__includes li {
  padding: 0.25rem 0;
  position: relative;
  padding-left: 1.25rem;
}
.service-block__includes li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: var(--mauve);
  font-size: 0.7rem;
  top: 0.55rem;
}
.service-block__timing {
  margin: 0;
  font-size: 0.88rem;
  opacity: 0.7;
}
.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;
}
.service-extras__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
.service-extras__card {
  background: #fff;
  border: 1px solid var(--line);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
}
.service-extras__card h3 {
  margin: 0.5rem 0 1rem;
  font-size: 1.65rem;
}
.service-extras__lead {
  margin: 0 0 1.25rem;
  opacity: 0.8;
  line-height: 1.6;
}
.service-extras__card .service-block__pricing {
  margin: 0 0 1.5rem;
  flex: 1;
}
.service-extras__card .btn { align-self: center; }
.service-block__content > .btn {
  display: block;
  width: fit-content;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .service-extras__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(--mauve-dark); border-color: var(--mauve-dark); }

.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 { grid-template-columns: 1fr; gap: var(--s-4); }
  .service-block--reverse .service-block__img { order: 0; }
  .service-block__img { aspect-ratio: 3 / 4; max-height: 540px; }
  .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__includes ul { columns: 1; }
  .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: var(--s-8) var(--s-4) var(--s-5);
  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(125, 63, 55, 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(125, 63, 55, 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 { 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.6fr 1fr; gap: var(--s-6); }
  .about-page__photo { aspect-ratio: 4 / 5; max-height: none; width: auto; margin-inline: 0; }
}

/* "What's Included" goes single-column once the content column narrows
   (<=960px covers both the narrow 2-col range and the stacked range);
   the 2-col list is reserved for wide desktop where the column is roomy. */
@media (max-width: 960px) {
  .service-block__includes ul { columns: 1; }
}