/* service.css — White Sand Salon service / directory pages.
 * Shares the homepage aesthetic ("coastal editorial luxury"): black/white
 * elegance, warm sand bands, gold (#b4914c) hairlines, Montserrat display * / Montserrat body / Sacramento script flourishes, generous negative space.
 *
 * Everything is scoped under .svc / .svc-hero so this file is inert on every other
 * page (loaded globally from base.js, mirroring home.css / hero.css). Consumes
 * tokens.css. Mobile-first; scroll reveals degrade gracefully under reduced motion.
 */

.svc {
  --edge: clamp(1.25rem, 5vw, 3.5rem);
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
}

/* Shared primitives (scoped) ------------------------------------------------ */
.svc .rule {
  display: block;
  width: 64px;
  height: 1px;
  margin: 0 auto var(--space-6);
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Reveal system: lowered + transparent, settle on .is-visible. Reduced motion +
   no-JS both leave content fully visible (overrides at the foot of this file). */
.svc [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.svc [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Page hero — full-viewport cinematic chapter (graded image, or typographic when
   there is no strong photograph). Mirrors the homepage chapters: an oversized
   Montserrat display title over parallax full-bleed imagery, an italic whisper,
   gold eyebrow, and a heavy editorial grade that absorbs medium-res photography.
   ───────────────────────────────────────────────────────────────────────────── */
.svc-hero {
  position: relative;
  min-height: 88vh;
  min-height: 88svh;
  display: flex;
  align-items: flex-end;
  overflow: clip;
  isolation: isolate;
  background: var(--ocean-deep);
}
.svc-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
/* Oversized so the parallax translate (choreo.js) stays within the bleed — no
   edge gap, zero CLS (only transform is written). */
.svc-hero__img {
  position: absolute;
  left: 0;
  top: -12%;
  width: 100%;
  height: 124%;
  object-fit: cover;
  filter: grayscale(0.2) saturate(0.9) contrast(1.06) brightness(0.98) sepia(0.06);
  transform: translate3d(0, 0, 0);
  transition: filter var(--dur-slow) var(--ease);
}
/* Filmic grain — turns any softness in a medium-res photo into intentional grade. */
.svc-hero__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.06;
  mix-blend-mode: overlay;
}
/* Directional scrim: anchors the type in the lower-left, lifts contrast. */
.svc-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
      to top,
      rgba(6, 23, 28, 0.74) 0%,
      rgba(6, 23, 28, 0.3) 42%,
      rgba(6, 23, 28, 0.08) 72%,
      rgba(6, 23, 28, 0) 100%
    ),
    linear-gradient(to right, rgba(6, 23, 28, 0.5) 0%, rgba(6, 23, 28, 0) 58%);
}
.svc-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6.5rem) var(--edge) clamp(2.75rem, 7vw, 5.5rem);
  text-align: left;
  color: var(--paper);
}
.svc-hero__eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin: 0 0 var(--space-5);
}
.svc-hero__h1 {
  margin: 0 0 0 -0.03em;
  font-family: var(--serif);
  font-weight: var(--fw-medium);
  font-size: clamp(2.2rem, 6.46vw, 5.04rem);
  line-height: 0.98;
  letter-spacing: -0.024em;
  color: var(--paper);
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(6, 23, 28, 0.45);
  font-feature-settings: "liga", "dlig";
}
.svc-hero__whisper {
  margin: clamp(0.9rem, 2vw, 1.5rem) 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: clamp(0.96rem, 1.98vw, 1.44rem);
  line-height: 1.3;
  color: rgba(250, 246, 238, 0.9);
  max-width: 30ch;
}

/* Typographic hero — a cream palette-cleanser for pages with no strong photo
   (Bridal, Specials): an oversized ghost-script watermark, an italic display
   title, centred. Deliberate art-direction, not a fallback for a weak image. */
.svc-hero--type {
  background: var(--sand);
  border-bottom: 1px solid var(--line);
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.svc-hero--type .svc-hero__inner {
  z-index: 1;
  text-align: center;
  color: var(--ink);
}
.svc-hero--type .svc-hero__eyebrow {
  color: var(--gold-deep);
}
.svc-hero--type .svc-hero__h1 {
  color: var(--ink);
  font-style: italic;
  text-shadow: none;
  margin-left: 0;
}
.svc-hero--type .svc-hero__whisper {
  color: var(--ink-soft);
  font-style: normal;
  margin-left: auto;
  margin-right: auto;
}
.svc-hero__watermark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--script);
  font-size: clamp(9rem, 40vw, 26rem);
  line-height: 1;
  color: var(--gold);
  opacity: 0.06;
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
}

/* Typographic hero WITH an editorial inset (e.g. Head Spa): the type is the hero,
   a small framed plate sits beneath it. Small by design — a medium-res source stays
   crisp at plate size, and the photo reads as a deliberate editorial detail rather
   than a soft full-bleed backdrop. Centred stack; the plate carries the sand-panel
   frame language (gold hairline top) so it belongs to the same system. */
.svc-hero--type-inset .svc-hero__typewrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6.5rem) var(--edge) clamp(2.75rem, 7vw, 5.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.svc-hero--type-inset .svc-hero__inner {
  padding: 0; /* the typewrap owns the hero padding now */
}
.svc-hero__inset {
  margin: clamp(2.25rem, 5vw, 3.75rem) 0 0;
  width: min(300px, 62vw);
  padding: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
}
.svc-hero__inset-img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  border-radius: calc(var(--radius-lg) - 6px);
  filter: var(--img-grade);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Body + section rhythm
   ───────────────────────────────────────────────────────────────────────────── */
.svc-body {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(4.5rem, 10vw, 9rem) var(--edge) clamp(5rem, 12vw, 10rem);
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 8vw, 7rem);
}

.svc-heading {
  font-family: var(--serif);
  font-weight: var(--fw-medium);
  font-size: clamp(1.4rem, 3.04vw, 1.87rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
  color: var(--ink);
}
.svc-heading--center {
  text-align: center;
}

/* Prose — centered editorial column */
.svc-section--prose {
  max-width: var(--container-narrow);
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
/* The Specials "Mobile App" note is a lone titled prose block that otherwise
   floats; give it the signature gold hairline above its heading — a quiet,
   on-system frame. Scoped to the Specials page so the round-1 service pages keep
   their approved rhythm. */
[data-page="specials-and-promotions"] .svc-section--prose:has(.svc-heading)::before {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin: 0 auto var(--space-5);
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.svc-prose {
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
/* Lead standfirst — the opening prose reads a touch larger + darker, an editorial
   "into the page" moment before the body settles to its measure. */
.svc-section--lead .svc-prose {
  font-size: clamp(1.2rem, 2.3vw, 1.55rem);
  line-height: 1.58;
  color: var(--ink);
  max-width: 48ch;
  margin: 0 auto;
}
.svc-section--lead .svc-heading {
  margin-bottom: var(--space-5);
}
.svc-prose p {
  margin: 0 0 var(--space-4);
}
.svc-prose p:last-child {
  margin-bottom: 0;
}
.svc-prose ul {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  text-align: left;
  display: grid;
  gap: var(--space-3);
}
.svc-prose li {
  position: relative;
  padding-left: 1.6em;
}
.svc-prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--gold);
}
.svc-prose strong {
  color: var(--ink);
  font-weight: var(--fw-semibold);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Price "menu" — sand panel framed by a gold hairline, dotted-leader rows
   ───────────────────────────────────────────────────────────────────────────── */
.svc-section--menu {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
.svc-menu {
  background: var(--sand);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  /* Flat panel — the sand fill + gold hairline define it; no drop shadow, so the
     whole panel family (menus, promo cards, NAP, fallback) reads as one system. */
}
.svc-menu__eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  text-align: center;
  margin: 0 0 var(--space-3);
}
.svc-menu__heading {
  font-family: var(--serif);
  font-weight: var(--fw-medium);
  font-size: clamp(1.2rem, 2.58vw, 1.51rem);
  letter-spacing: -0.01em;
  text-align: center;
  margin: 0 0 var(--space-2);
  color: var(--ink);
}
.svc-menu__sub {
  text-align: center;
  font-family: var(--sans);
  font-size: var(--fs-200);
  color: var(--ink-soft);
  margin: 0 0 var(--space-5);
}
.svc-menu__heading + .svc-menu__list {
  margin-top: var(--space-4);
}
.svc-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.svc-menu__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}
.svc-menu__row:last-child {
  border-bottom: 0;
}
.svc-menu__name {
  font-family: var(--serif);
  font-size: var(--fs-500);
  line-height: 1.2;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.svc-menu__note {
  font-family: var(--sans);
  font-size: var(--fs-100);
  font-style: normal;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  max-width: 42ch;
}
.svc-menu__dots {
  flex: 1;
  height: 0;
  min-width: 1.5rem;
  border-bottom: 1px dotted var(--line-strong);
  transform: translateY(-4px);
}
.svc-menu__price {
  font-family: var(--sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-300);
  color: var(--gold-deep);
  white-space: nowrap;
  font-variant-numeric: tabular-nums; /* Move 7: prices align down the column */
}
.svc-menu__foot {
  margin: var(--space-5) 0 0;
  font-family: var(--sans);
  font-size: var(--fs-200);
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Pull-quote — large Montserrat-italic editorial line (Move 4)
   ───────────────────────────────────────────────────────────────────────────── */
.svc-section--quote {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}
.svc-quote {
  text-align: center;
}
.svc-quote__rule {
  display: block;
  width: 40px;
  height: 1px;
  margin: 0 auto var(--space-6);
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.svc-quote__q {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: clamp(1.2rem, 2.58vw, 1.69rem);
  line-height: 1.34;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  text-wrap: balance;
  hanging-punctuation: first;
}
.svc-quote__q::before {
  content: "\201C";
}
.svc-quote__q::after {
  content: "\201D";
}
.svc-quote__cite {
  display: block;
  margin-top: var(--space-5);
  font-family: var(--sans);
  font-style: normal;
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* ─────────────────────────────────────────────────────────────────────────────
   FAQ — native <details> accordions
   ───────────────────────────────────────────────────────────────────────────── */
.svc-section--faq {
  max-width: var(--container-narrow);
  margin: 0 auto;
  width: 100%;
}
.svc-faq {
  border-top: 1px solid var(--line);
}
.svc-faq__item {
  border-bottom: 1px solid var(--line);
}
.svc-faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-1);
  font-family: var(--serif);
  font-size: var(--fs-500);
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease);
}
.svc-faq__q::-webkit-details-marker {
  display: none;
}
.svc-faq__q:hover {
  color: var(--gold-deep);
}
.svc-faq__mark {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}
.svc-faq__mark::before,
.svc-faq__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--gold-deep);
}
.svc-faq__mark::before {
  width: 16px;
  height: 1.5px;
}
.svc-faq__mark::after {
  width: 1.5px;
  height: 16px;
  transition: transform var(--dur) var(--ease);
}
.svc-faq__item[open] .svc-faq__mark::after {
  transform: scaleY(0);
}
.svc-faq__a {
  padding: 0 var(--space-1) var(--space-5);
  font-family: var(--sans);
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
.svc-faq__a p {
  margin: 0 0 var(--space-3);
}
.svc-faq__a p:last-child {
  margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Service index grid (the /hair-services/ directory)
   ───────────────────────────────────────────────────────────────────────────── */
.svc-index__head {
  max-width: 640px;
  margin: 0 auto clamp(1.75rem, 4vw, 3rem);
  text-align: center;
}
.svc-index__intro {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-400);
  color: var(--ink-soft);
}
.svc-index__grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: 1fr;
}
.svc-index__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur-slow) var(--ease);
}
.svc-index__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--gold-light);
}
.svc-index__card:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}
.svc-index__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--sand);
}
.svc-index__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(15, 15, 15, 0.1);
  pointer-events: none;
  transition: box-shadow var(--dur-slow) var(--ease);
}
.svc-index__card:hover .svc-index__media::before {
  box-shadow: inset 0 0 0 1px var(--gold-light);
}
.svc-index__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  filter: var(--img-grade); /* Move 1: unified editorial grade */
  transition: transform var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease);
}
.svc-index__card:hover .svc-index__img {
  transform: scale(1.08);
}
@media (hover: hover) {
  .svc-index__card:hover .svc-index__img {
    filter: var(--img-grade-hover);
  }
}
.svc-index__body {
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.svc-index__name {
  font-family: var(--serif);
  font-weight: var(--fw-medium);
  font-size: var(--fs-500);
  line-height: 1.15;
}
.svc-index__tag {
  font-family: var(--sans);
  font-size: var(--fs-200);
  color: var(--ink-soft);
}
.svc-index__cta {
  margin-top: var(--space-3);
  font-family: var(--sans);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.svc-index__arrow {
  transition: transform var(--dur) var(--ease);
}
.svc-index__card:hover .svc-index__arrow {
  transform: translateX(5px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Specials promo mount + static fallback
   ───────────────────────────────────────────────────────────────────────────── */
.svc-section--promos {
  max-width: var(--container-narrow);
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
/* Must occupy zero space while hidden (Task 15 hydrates it). */
.svc .svc-promos[hidden] {
  display: none !important;
}
.svc-promos__fallback {
  margin: 0;
  padding: clamp(1.75rem, 5vw, 2.75rem);
  background: var(--sand);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  font-family: var(--serif);
  font-size: var(--fs-500);
  color: var(--ink);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Brand-partner logo strip (products page)
   ───────────────────────────────────────────────────────────────────────────── */
.svc-logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 6vw, 4rem);
}
.svc-logos li {
  display: flex;
  align-items: center;
  justify-content: center;
}
.svc-logos img {
  max-height: 68px;
  width: auto;
  object-fit: contain;
  filter: saturate(0.9);
  opacity: 0.92;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.svc-logos li:hover img {
  opacity: 1;
  transform: translateY(-3px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   NAP / contact detail block (contact page)
   ───────────────────────────────────────────────────────────────────────────── */
.svc-nap {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: 1fr;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--sand);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  text-align: center;
}
.svc-nap__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* Desktop: break the centered symmetry into an asymmetric editorial composition —
   Visit / Call / Email stacked on the left, the Hours offset into its own column
   on the right, divided by a gold hairline. */
@media (min-width: 780px) {
  .svc-nap {
    grid-template-columns: 1fr 1fr;
    max-width: 780px;
    column-gap: clamp(2rem, 5vw, 4rem);
    row-gap: clamp(1.5rem, 3vw, 2.25rem);
    align-items: start;
    text-align: left;
    padding: clamp(2.25rem, 4.5vw, 3.25rem);
  }
  .svc-nap__item {
    align-items: flex-start;
  }
  .svc-nap__item:nth-child(1) { grid-column: 1; grid-row: 1; }
  .svc-nap__item:nth-child(2) { grid-column: 1; grid-row: 2; }
  .svc-nap__item:nth-child(3) { grid-column: 1; grid-row: 3; }
  .svc-nap__item:nth-child(4) {
    grid-column: 2;
    grid-row: 1 / span 3;
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
    border-left: 1px solid var(--line);
    height: 100%;
  }
  .svc-nap__item:nth-child(4) .svc-hours {
    margin: var(--space-2) 0 0;
    max-width: none;
  }
}
.svc-nap__label {
  font-family: var(--sans);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.svc-nap__value {
  font-family: var(--serif);
  font-size: var(--fs-500);
  line-height: 1.25;
  color: var(--ink);
}
.svc-nap__value a {
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease);
}
.svc-nap__value a:hover {
  color: var(--gold-deep);
}
.svc-hours {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 340px;
  width: 100%;
  display: grid;
  gap: var(--space-2);
  text-align: left;
}
.svc-hours li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: var(--sans);
  font-size: var(--fs-300);
  color: var(--ink-soft);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}
.svc-hours li:last-child {
  border-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Closing chapter — full-viewport "Visit / Book" close (mirrors the homepage's
   visit close): eyebrow, oversized serif invitation, italic lead, one loud gold
   Book Now, a quiet NAP line. Rendered outside the constrained body → full-bleed.
   ───────────────────────────────────────────────────────────────────────────── */
.svc-visit {
  min-height: 82vh;
  min-height: 82svh;
  display: grid;
  place-items: center;
  padding: clamp(4.5rem, 11vw, 9rem) var(--edge);
  background: var(--paper);
  border-top: 1px solid var(--line);
  text-align: center;
}
.svc-visit__inner {
  max-width: 860px;
  margin: 0 auto;
}
.svc-visit__eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 var(--space-5);
}
.svc-visit__h {
  margin: 0;
  font-family: var(--serif);
  font-weight: var(--fw-medium);
  font-size: clamp(2.0rem, 4.94vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.svc-visit__lead {
  margin: clamp(1.25rem, 3vw, 2rem) auto 0;
  max-width: 46ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink-soft);
}
.svc-visit__btn {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: var(--space-4) var(--space-8);
  font-size: var(--fs-300);
}
.svc-visit__nap {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  font-family: var(--sans);
  font-size: var(--fs-200);
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
.svc-visit__tel {
  color: var(--gold-deep);
  transition: color var(--dur-fast) var(--ease);
}
.svc-visit__tel:hover {
  color: var(--gold);
}
.svc-visit__addr + .svc-visit__tel::before {
  content: "·";
  margin-right: var(--space-4);
  color: var(--line-strong);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 620px) {
  .svc-index__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  .svc-index__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Reduced motion + no-JS safety nets — content always visible
   ───────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .svc [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .svc-index__img,
  .svc-index__card:hover .svc-index__img {
    transform: none;
  }
  /* choreo.js never runs under reduced motion; keep the oversized hero image
     centred in its frame regardless. */
  .svc-hero__img {
    transform: none !important;
  }
}
.no-js .svc [data-reveal] {
  opacity: 1;
  transform: none;
}