/* Maison Élise Hair Atelier: fictional salon demo by DigiThat.
   All styling lives here. Scroll effects read one custom property (--p, 0→1)
   per [data-scroll] section. The script updates it through CSSOM rules in this
   stylesheet, never through style attributes. Everything below .motion-on is
   enhancement: without it (no JS, reduced motion, motion off) the page is a
   calm, complete static layout. */

@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-variable.woff") format("woff");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-italic-variable.woff") format("woff");
  font-weight: 400 700; font-style: italic; font-display: swap;
}

:root {
  --ivory: #f7f2eb;
  --ivory-deep: #efe7dc;
  --stone: #e6dccf;
  --line: #d8cab8;
  --espresso: #33241d;
  --espresso-2: #4a372d;
  --ink-soft: #5c483d;
  --champagne: #c2a676;
  --champagne-ink: #7a5f36;
  --white: #fffdf9;

  --serif: "Lora", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1rem, 4vw, 3.5rem);
  --maxw: 76rem;
  --radius: 2px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --page: 0;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ivory); color: var(--espresso);
  font: 400 1.0625rem/1.65 var(--sans); -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--serif); font-weight: 450; line-height: 1.12; margin: 0; letter-spacing: -0.005em; }
h1 em, h2 em { font-style: italic; font-weight: 400; }
p, figure, blockquote { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--espresso); outline-offset: 3px; }
[id] { scroll-margin-top: 6.5rem; }

/* ---------- Utility ---------- */
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--espresso); color: var(--white); padding: .6rem 1rem; text-decoration: none; border-radius: var(--radius);
}
.skip-link:focus { top: 1rem; }
.js-only { display: none; }
.has-js .js-only { display: inline-flex; }
.show-sm { display: none; }

.demo-bar {
  position: relative; z-index: 2;
  background: var(--espresso); color: var(--ivory);
  font-size: .8125rem; letter-spacing: .02em; text-align: center; padding: .45rem var(--gutter);
}

/* ---------- Masthead ---------- */
.masthead { position: fixed; z-index: 30; top: 0; left: 0; right: 0; }
.site-header {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1rem var(--gutter);
  background: rgba(247, 242, 235, .94); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease), transform .45s var(--ease-out);
}
.has-js:not(.is-scrolled) .masthead .site-header { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; padding-top: 1.35rem; }
.site-header--solid { background: var(--ivory); }

.page-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; pointer-events: none; }
.page-progress__bar { display: block; height: 100%; background: var(--champagne); transform-origin: 0 50%; transform: scaleX(var(--page)); }
.has-js:not(.is-scrolled) .page-progress { opacity: 0; }

.wordmark { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; line-height: 1; white-space: nowrap; }
.wordmark__name { font-family: var(--serif); font-size: 1.45rem; letter-spacing: .28em; text-transform: uppercase; padding-left: .28em; }
.wordmark__sub { font-size: .625rem; letter-spacing: .42em; text-transform: uppercase; margin-top: .45rem; color: var(--ink-soft); padding-left: .42em; }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); font-size: .9rem; }
.site-nav a:not(.button) { text-decoration: none; padding: .35rem 0; border-bottom: 1px solid transparent; transition: border-color .2s var(--ease); }
.site-nav a:not(.button):hover { border-color: currentColor; }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem; padding: .8rem 1.6rem;
  background: var(--espresso); color: var(--ivory);
  border: 1px solid var(--espresso); border-radius: var(--radius);
  font: 500 .9375rem/1 var(--sans); letter-spacing: .04em; text-decoration: none; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .35s var(--ease), transform .25s var(--ease), border-color .35s var(--ease);
}
.button::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--espresso-2);
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .45s var(--ease-out);
}
.button:hover::before { transform: scaleX(1); transform-origin: 0 50%; }
.button:active { transform: translateY(1px); }
.button--small { min-height: 2.5rem; padding: .6rem 1.1rem; font-size: .85rem; }
.button--ghost { background: transparent; color: var(--espresso); }
.button--ghost::before { background: var(--espresso); }
.button--ghost:hover { color: var(--ivory); }
.button--light { background: var(--ivory); color: var(--espresso); border-color: var(--ivory); }
.button--light::before { background: var(--white); }

.eyebrow {
  font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; color: var(--champagne-ink); font-weight: 600;
  display: inline-flex; align-items: center; gap: .8rem;
}
.eyebrow::before { content: ""; width: 2rem; height: 1px; background: var(--champagne); }

/* =========================================================
   HERO SCENE: static baseline
   ========================================================= */
.scene { position: relative; background: var(--ivory); }
.scene__stage { position: relative; height: 100vh; height: 100svh; min-height: 36rem; overflow: hidden; background: var(--stone); }
.scene__media { position: absolute; inset: 0; }
.scene__frame { position: absolute; inset: 0; overflow: hidden; }
.scene__poster, .scene__canvas { position: absolute; inset: 0; }
.scene__poster img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; }
.scene__canvas { width: 100%; height: 100%; opacity: 0; transition: opacity .6s var(--ease); }
.scene[data-canvas="ready"] .scene__canvas { opacity: 1; }
.scene__ring { display: none; }

.hero-copy {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 8.5rem var(--gutter) 6.5rem; max-width: min(40rem, 46vw); box-sizing: content-box;
}
.hero-title { font-size: clamp(2.6rem, 5.4vw, 5.2rem); margin: 1.25rem 0; }
.hero-title em { display: block; }
.hero-lede { font-size: clamp(1.02rem, 1.35vw, 1.2rem); color: var(--espresso-2); max-width: 30rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero-note { margin-top: .9rem; font-size: .8125rem; color: var(--ink-soft); }

/* Acts II and III as ordinary content when motion is off. */
.act--two { padding: clamp(4rem, 9vw, 7rem) var(--gutter) 0; max-width: var(--maxw); margin: 0 auto; }
.statement { font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 1.08; display: grid; gap: .1em; }
.statement__line { display: block; overflow: hidden; padding-bottom: .08em; }
.statement__inner { display: inline-block; }
.statement em { font-style: italic; color: var(--champagne-ink); }

.act--three { position: relative; padding: clamp(3rem, 7vw, 5rem) var(--gutter) clamp(4rem, 8vw, 6rem); max-width: var(--maxw); margin: 0 auto; }
.method-title { font-size: clamp(2rem, 3.6vw, 3.2rem); margin: 1rem 0 2rem; }
.method { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; max-width: 34rem; }
.method__item { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; }
.method__num { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--champagne-ink); line-height: 1.2; }
.method__item h3 { font-size: 1.35rem; margin-bottom: .35rem; }
.method__item p { color: var(--ink-soft); font-size: .975rem; }
.method__rule { display: none; }

.scene__controls {
  position: absolute; z-index: 5; left: var(--gutter); right: var(--gutter); top: calc(100svh - 3.75rem);
  display: flex; align-items: center; gap: 1.5rem; font-size: .8125rem;
}
.motion-toggle {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(247, 242, 235, .82); color: var(--espresso);
  border: 1px solid var(--line); border-radius: 999px; padding: .45rem .9rem; font: inherit; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.motion-toggle__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--champagne-ink); }
.motion-toggle[aria-pressed="false"] .motion-toggle__dot { background: transparent; box-shadow: inset 0 0 0 1px var(--espresso); }
.scroll-cue { color: var(--espresso-2); text-decoration: none; letter-spacing: .18em; text-transform: uppercase; font-size: .6875rem; display: inline-flex; align-items: center; gap: .6rem; }
.scroll-cue::after { content: ""; width: 2rem; height: 1px; background: currentColor; }
.scene__meter { display: none; }

/* =========================================================
   HERO SCENE: scroll-driven (motion on)
   Timeline, as a share of the scene's scroll (--p):
   I   0.00–0.26  arrival → copy lifts away, camera leans in
   II  0.18–0.58  statement lines rise one by one
   III 0.54–0.80  image draws into an arch; method builds beside it
       0.80–1.00  hold, then release into the gallery
   ========================================================= */
.motion-on .scene { height: 430vh; height: 430svh; }
.motion-on .scene__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ivory); }
.motion-on .scene__stage { position: absolute; inset: 0; min-height: 0; background: transparent; }
.motion-on .scene__controls { top: auto; bottom: 1.5rem; }

.motion-on .scene {
  --t-copy: clamp(0, calc((var(--p, 0) - .06) / .18), 1);
  --t-lean: clamp(0, calc(var(--p, 0) / .5), 1);
  --t-s1: clamp(0, calc((var(--p, 0) - .2) / .1), 1);
  --t-s2: clamp(0, calc((var(--p, 0) - .28) / .1), 1);
  --t-s3: clamp(0, calc((var(--p, 0) - .36) / .1), 1);
  --t-sout: clamp(0, calc((var(--p, 0) - .5) / .08), 1);
  --t-arch: clamp(0, calc((var(--p, 0) - .54) / .2), 1);
  --t-m0: clamp(0, calc((var(--p, 0) - .6) / .08), 1);
  --t-m1: clamp(0, calc((var(--p, 0) - .66) / .08), 1);
  --t-m2: clamp(0, calc((var(--p, 0) - .72) / .08), 1);
  --t-m3: clamp(0, calc((var(--p, 0) - .78) / .08), 1);
  --t-rule: clamp(0, calc((var(--p, 0) - .64) / .24), 1);
}

/* Camera: a slow lean into the hair, easing back as the arch forms. */
.motion-on .scene__frame {
  transform-origin: 74% 42%;
  transform: scale(calc(1 + .12 * var(--t-lean) - .08 * var(--t-arch))) translateX(calc(-1.5% * var(--t-lean)));
  will-change: transform;
}
/* Arch: the full-bleed frame closes into a tall arched window on the right. */
.motion-on .scene__media {
  clip-path: inset(
    calc(var(--t-arch) * 13vh) calc(var(--t-arch) * 7vw) calc(var(--t-arch) * 8vh) calc(var(--t-arch) * 53vw)
    round calc(var(--t-arch) * 20vw) calc(var(--t-arch) * 20vw) calc(var(--t-arch) * 3px) calc(var(--t-arch) * 3px)
  );
  will-change: clip-path;
}
.motion-on .scene__ring {
  display: block; position: absolute; pointer-events: none;
  top: calc(13vh - 1.1rem); right: calc(7vw - 1.1rem); bottom: calc(8vh - 1.1rem); left: calc(53vw - 1.1rem);
  border: 1px solid var(--champagne); border-bottom: 0; border-radius: 21.1vw 21.1vw 0 0;
  opacity: calc(var(--t-arch) * var(--t-arch));
  transform: scale(calc(1.04 - .04 * var(--t-arch)));
}

/* Act I copy lifts away. */
.motion-on .act--one { opacity: calc(1 - var(--t-copy)); transform: translateY(calc(var(--t-copy) * -3rem)); }
.motion-on .act--one:focus-within { opacity: 1; transform: none; }
.motion-on.scene-past-copy .act--one { visibility: hidden; }
.motion-on.scene-past-copy .act--one:focus-within { visibility: visible; }

/* Act II statement: each line rises out of a mask. */
.motion-on .act--two {
  position: absolute; inset: 0; z-index: 3; margin: 0; max-width: none;
  display: flex; align-items: center; padding: 6rem var(--gutter) 5rem;
  pointer-events: none;
  opacity: calc(1 - var(--t-sout));
  transform: translateY(calc(var(--t-sout) * -2rem));
}
.motion-on .statement { max-width: 44vw; }
.motion-on .statement__line:nth-child(1) .statement__inner { transform: translateY(calc((1 - var(--t-s1)) * 110%)); }
.motion-on .statement__line:nth-child(2) .statement__inner { transform: translateY(calc((1 - var(--t-s2)) * 110%)); }
.motion-on .statement__line:nth-child(3) .statement__inner { transform: translateY(calc((1 - var(--t-s3)) * 110%)); }

/* Act III: method builds on the ivory side of the arch. */
.motion-on .act--three {
  position: absolute; z-index: 3; inset: 0; margin: 0; max-width: none;
  display: flex; flex-direction: column; justify-content: center;
  padding: 7rem calc(50vw + var(--gutter)) 5rem var(--gutter);
  pointer-events: none;
}
.motion-on .act--three > .eyebrow,
.motion-on .act--three > .method-title { opacity: var(--t-m0); transform: translateY(calc((1 - var(--t-m0)) * 1.5rem)); }
.motion-on .method { position: relative; padding-left: .25rem; }
.motion-on .method__item:nth-child(1) { opacity: var(--t-m1); transform: translateX(calc((1 - var(--t-m1)) * -1.5rem)); }
.motion-on .method__item:nth-child(2) { opacity: var(--t-m2); transform: translateX(calc((1 - var(--t-m2)) * -1.5rem)); }
.motion-on .method__item:nth-child(3) { opacity: var(--t-m3); transform: translateX(calc((1 - var(--t-m3)) * -1.5rem)); }
.motion-on .method__rule {
  display: block; position: absolute; left: var(--gutter); bottom: 5.25rem; height: 1px; width: min(22rem, 30vw);
  background: var(--champagne); transform-origin: 0 50%; transform: scaleX(var(--t-rule));
}

.motion-on .scroll-cue { opacity: calc(1 - var(--t-copy)); }
.motion-on .scene__meter {
  display: block; width: 5rem; height: 1px; background: var(--line); overflow: hidden; margin-left: auto;
}
.motion-on .scene__meter-bar { display: block; height: 100%; background: var(--espresso); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* =========================================================
   ATELIER GALLERY
   ========================================================= */
.atelier { background: var(--ivory-deep); border-top: 1px solid var(--line); }
.atelier__sticky { padding: clamp(4rem, 8vw, 6rem) var(--gutter); }
.atelier__track { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2.5rem; max-width: var(--maxw); margin: 0 auto; align-items: end; }
.panel--intro h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); margin: 1rem 0 1.25rem; }
.panel--intro p:last-child { color: var(--ink-soft); max-width: 26rem; }
.panel__img { overflow: hidden; border-radius: var(--radius); background: var(--stone); }
.panel__img img { width: 100%; height: 100%; object-fit: cover; }
.panel--tall .panel__img { border-radius: 40% 40% var(--radius) var(--radius) / 22% 22% var(--radius) var(--radius); }
.panel figcaption { margin-top: .9rem; font-size: .875rem; color: var(--ink-soft); display: flex; gap: .75rem; }
.panel figcaption span { font-family: var(--serif); font-style: italic; color: var(--champagne-ink); }
.panel--quote { font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.2; font-style: italic; }
.panel--quote footer { margin-top: 1.25rem; font-family: var(--sans); font-style: normal; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--champagne-ink); }
.panel__big { font-size: clamp(2.2rem, 4vw, 3.6rem); margin-bottom: 1.75rem; }

/* Motion on: vertical scroll drives the track sideways. */
.motion-on .atelier { height: 300vh; height: 300svh; --track: 240vw; }
.motion-on .atelier__sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; align-items: center; padding: 6rem 0 3rem;
}
.motion-on .atelier__track {
  display: flex; align-items: center; gap: 5vw; max-width: none; margin: 0;
  width: var(--track); padding: 0 6vw;
  transform: translateX(calc(var(--p, 0) * (100vw - var(--track))));
  will-change: transform;
}
.motion-on .panel { flex: 0 0 auto; }
.motion-on .panel--intro { width: 34vw; }
.motion-on .panel--image { width: 34vw; }
.motion-on .panel--wide { width: 44vw; }
.motion-on .panel--tall { width: 26vw; }
.motion-on .panel--quote { width: 30vw; }
.motion-on .panel--end { width: 27vw; }
.motion-on .panel__img { height: 62vh; height: 62svh; }
.motion-on .panel--tall .panel__img { height: 70vh; height: 70svh; }
.motion-on .panel__img img { transform: scale(1.14) translateX(calc((var(--p, 0) - .5) * -9%)); }
.motion-on .panel--quote { transform: translateY(calc((var(--p, 0) - .4) * 8rem)); }

/* =========================================================
   SERVICES, VISIT, CTA
   ========================================================= */
.services, .visit { padding: clamp(4.5rem, 9vw, 8rem) var(--gutter); max-width: var(--maxw); margin: 0 auto; }
.section-head { max-width: 42rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); margin-top: 1rem; }
.section-lede { margin-top: 1.25rem; color: var(--ink-soft); font-size: 1.075rem; }

.service-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.service {
  position: relative; display: flex; flex-direction: column; gap: .9rem;
  padding: 2rem 1.75rem 2.25rem 0; border-right: 1px solid var(--line);
}
.service + .service { padding-left: 1.75rem; }
.service:last-child { border-right: 0; }
.service::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--espresso);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out);
}
.service + .service::before { left: 1.75rem; }
.service:hover::before, .service:focus-within::before { transform: scaleX(1); }
.service__num { font-family: var(--serif); font-style: italic; color: var(--champagne-ink); font-size: 1rem; }
.service__name { font-size: 1.6rem; transition: transform .45s var(--ease-out); }
.service:hover .service__name { transform: translateX(.35rem); }
.service__desc { color: var(--ink-soft); font-size: .975rem; flex: 1; }
.service__meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .875rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.service__price { font-weight: 600; }
.service__time { color: var(--ink-soft); }
.service__link { align-self: flex-start; margin-top: .25rem; font-size: .9rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--champagne); padding-bottom: .15rem; transition: border-color .2s var(--ease); }
.service__link::after { content:"";width:1.1em;height:1.1em;vertical-align:-.17em;background:currentColor;mask:url("/assets/icons/digithat/right.svg") center/contain no-repeat; display: inline-block; transition: transform .35s var(--ease-out); }
.service__link:hover { border-color: var(--espresso); }
.service__link:hover::after { transform: translateX(.3rem); }
.fine-print { margin-top: 2rem; font-size: .8125rem; color: var(--ink-soft); }

.visit { border-top: 1px solid var(--line); }
.steps-wrap { position: relative; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); counter-reset: step; }
.step { counter-increment: step; position: relative; padding-top: 2.25rem; }
.step::before { content: "0" counter(step); position: absolute; top: 0; left: 0; font-family: var(--serif); font-style: italic; color: var(--champagne-ink); }
.step h3 { font-size: 1.45rem; margin-bottom: .75rem; }
.step p { color: var(--ink-soft); }
.steps__rule { display: none; }
.motion-on .steps__rule {
  display: block; position: absolute; top: 1.6rem; left: 0; right: 0; height: 1px; background: var(--champagne);
  transform-origin: 0 50%; transform: scaleX(clamp(0, calc((var(--p, 0) - .2) / .4), 1));
}

.cta-band { background: var(--espresso); color: var(--ivory); overflow: hidden; }
.cta-band__inner {
  text-align: center; padding: clamp(5rem, 11vw, 9rem) var(--gutter);
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
}
.cta-band h2 { font-size: clamp(2.4rem, 6vw, 5rem); }
.cta-band p { max-width: 34rem; color: #e9dfd2; }
.cta-band .button { margin-top: .75rem; }
.cta-band :focus-visible { outline-color: var(--ivory); }
.motion-on .cta-band h2 {
  transform: scale(calc(.9 + .1 * clamp(0, calc(var(--p, 0) / .5), 1)));
  letter-spacing: calc((1 - clamp(0, calc(var(--p, 0) / .5), 1)) * .06em);
}

.site-footer { padding: 3rem var(--gutter) 3.5rem; max-width: var(--maxw); margin: 0 auto; font-size: .8125rem; color: var(--ink-soft); display: grid; gap: .75rem; }
.site-footer__brand { font-family: var(--serif); font-size: 1.1rem; letter-spacing: .2em; text-transform: uppercase; color: var(--espresso); }
.site-footer__brand span { font-family: var(--sans); font-size: .625rem; letter-spacing: .35em; margin-left: .5rem; color: var(--ink-soft); }
.site-footer p:not(.site-footer__brand) { max-width: 48rem; }

/* Reveal on entry (only armed when the script confirms IntersectionObserver + motion). */
.can-reveal [data-reveal] { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.can-reveal [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(1.75rem); }
.can-reveal .service-list [data-reveal]:nth-child(2), .can-reveal .steps [data-reveal]:nth-child(2) { transition-delay: .1s; }
.can-reveal .service-list [data-reveal]:nth-child(3), .can-reveal .steps [data-reveal]:nth-child(3) { transition-delay: .2s; }
.can-reveal .service-list [data-reveal]:nth-child(4) { transition-delay: .3s; }


/* ---------- Conversion helpers ---------- */
.text-link { font-size: .9rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--champagne); padding-bottom: .1rem; }
.text-link:hover { border-color: var(--espresso); }
.method__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
.motion-on .method__cta { pointer-events: auto; opacity: var(--t-m3); transform: translateY(calc((1 - var(--t-m3)) * 1rem)); }
.motion-on .method__cta:focus-within { opacity: 1; transform: none; }
.panel__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.service__badge {
  display: inline-block; margin-left: .6rem; padding: .15rem .55rem; border: 1px solid var(--champagne);
  border-radius: 999px; font-family: var(--sans); font-style: normal; font-size: .6875rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--champagne-ink); vertical-align: middle;
}
.assurances { list-style: none; margin: 3rem 0 0; padding: 1.5rem 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .9375rem; color: var(--ink-soft); }
.assurances strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.15rem; color: var(--espresso); margin-bottom: .25rem; }
.services__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2.5rem; }
.services__cta p { font-size: .875rem; color: var(--ink-soft); }

.book-bar { display: none; }
@media (max-width: 700px) {
  .assurances { grid-template-columns: 1fr; }
  .book-bar {
    display: flex; position: fixed; z-index: 25; left: 0; right: 0; bottom: 0;
    align-items: center; justify-content: space-between; gap: .75rem;
    padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
    background: rgba(247, 242, 235, .96); border-top: 1px solid var(--line);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transform: translateY(110%); transition: transform .45s var(--ease-out);
  }
  .book-bar__prices { font-size: .875rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--champagne); }
  .book-bar__book { min-height: 2.75rem; padding: .7rem 1.1rem; font-size: .875rem; }
  .show-book-bar .book-bar, .book-bar:focus-within { transform: none; }
  .has-js .site-footer { padding-bottom: 6rem; }
  /* Phones: once the booking bar is up, park the Motion toggle just under the header so it never covers the step CTA. */
  .show-book-bar .scene__controls { bottom: auto; top: 7.1rem; }
  .show-book-bar .scene__meter { display: none; }
  .motion-on .method__cta { margin-top: 1rem; }
  .motion-on .method__cta .button { min-height: 2.6rem; padding: .6rem 1rem; font-size: .85rem; }
}
/* Without JavaScript the bar has no trigger, so it stays hidden; header and in-page buttons remain. */


/* ---------- Homepage refinement: campaign imagery (content and layout only; no motion rules) ---------- */
/* Focal points so each landscape master frames its subject inside the gallery's fixed panel shapes. */
.panel__img--consult img { object-position: 58% 45%; }
.panel__img--colour img { object-position: 62% 35%; }
.panel__img--cut img { object-position: 44% 40%; }
.panel__img--salon img { object-position: 40% 55%; }

/* Colour panel: eyebrow and supporting line sit in the sans type system around the serif quote. */
.panel--quote blockquote { margin: 1rem 0 0; }
.panel--quote .eyebrow { font-family: var(--sans); font-style: normal; }
.panel__support { margin-top: 1.25rem; font-family: var(--sans); font-style: normal; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); max-width: 26rem; }

/* Result section: portrait result image beside the heading and three points. */
.result-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.result-figure { margin: 0; overflow: hidden; border-radius: 40% 40% var(--radius) var(--radius) / 22% 22% var(--radius) var(--radius); background: var(--stone); }
.result-figure img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 42%; }
.result-content .section-head { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.result-content .steps { gap: clamp(1.25rem, 2.5vw, 2rem); }
.result-content .step h3 { font-size: 1.25rem; }
.result-content .step p { font-size: .95rem; }

/* Final booking band: photographic background under a readable espresso veil. Text stays real HTML. */
.cta-band { position: relative; isolation: isolate; }
.cta-band__media { position: absolute; inset: 0; z-index: -1; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 35%; }
.cta-band__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(51, 36, 29, .9) 0%, rgba(51, 36, 29, .8) 50%, rgba(51, 36, 29, .66) 100%); }

@media (max-width: 1100px) {
  .result-content .steps { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .result-layout { grid-template-columns: 1fr; }
  .result-figure { max-width: 26rem; }
  .cta-band__media::after { background: rgba(51, 36, 29, .84); }
}

/* =========================================================
   BOOKING PAGE
   ========================================================= */
.book-page .masthead { position: relative; }
.book { max-width: 52rem; margin: 0 auto; padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) 5rem; }
.book h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); margin-top: 1rem; }
.book__lede { margin-top: 1rem; color: var(--ink-soft); max-width: 36rem; }
.notice { margin-top: 1.75rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-left: 3px solid var(--champagne); background: var(--ivory-deep); font-size: .9375rem; }
.booking { margin-top: 2.5rem; display: grid; gap: 2.5rem; }
.booking fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.booking legend { font-family: var(--serif); font-size: 1.45rem; padding: 0; margin-bottom: .35rem; }
.legend-hint { font-size: .875rem; color: var(--ink-soft); margin-bottom: 1rem; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.choice-grid--times { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.choice label { display: flex; flex-direction: column; gap: .2rem; height: 100%; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease); }
.choice__title { font-weight: 600; }
.choice__meta { font-size: .8125rem; color: var(--ink-soft); }
.choice input:hover + label { border-color: var(--espresso-2); }
.choice input:checked + label { border-color: var(--espresso); box-shadow: inset 0 0 0 1px var(--espresso); background: var(--ivory-deep); }
.choice input:focus-visible + label { outline: 2px solid var(--espresso); outline-offset: 3px; }
.guest { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem; padding: 1.1rem 1.25rem; background: var(--white); border: 1px dashed var(--line); font-size: .9375rem; }
.guest dt { color: var(--ink-soft); }
.guest dd { margin: 0; }
.booking__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.booking__submit p { font-size: .8125rem; color: var(--ink-soft); }
.result { margin-top: 2.5rem; padding: 2rem; background: var(--espresso); color: var(--ivory); }
.result[hidden] { display: none; }
.result h1, .result h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); }
.book .result h1 { margin-top: 0; } /* completion page: its heading is the h1, sized as before */
.result p { margin-top: .9rem; color: #e9dfd2; }
.result dl { margin: 1.25rem 0 0; display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; font-size: .9375rem; }
.result dt { color: #cbbba8; }
.result dd { margin: 0; }
.result a { color: var(--ivory); }
.result :focus-visible { outline-color: var(--ivory); }
.back-link { display: inline-block; margin-top: 2rem; font-size: .9rem; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service { border-bottom: 1px solid var(--line); }
  .service:nth-child(2n) { border-right: 0; }
  .service:nth-child(3) { padding-left: 0; }
  .service:nth-child(3)::before { left: 0; }
}
@media (min-width: 701px) and (max-height: 960px) {
  .hero-copy { padding-top: 7.5rem; }
  .hero-title { font-size: clamp(2.6rem, 4.6vw, 4.3rem); margin: 1rem 0; }
  .hero-actions { margin-top: 1.6rem; }
  .motion-on .act--three .method { gap: 1rem; }
  .motion-on .method-title { margin-bottom: 1.25rem; }
}
@media (max-width: 820px) {
  .site-nav a[href="#visit"] { display: none; }
  .hero-copy { max-width: 30rem; }
  .steps { grid-template-columns: 1fr; }
  .choice-grid--times { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  body { font-size: 1rem; }
  .demo-bar { font-size: .72rem; padding: .4rem .75rem; }
  .site-header, .has-js:not(.is-scrolled) .masthead .site-header { padding: .7rem var(--gutter); background: rgba(247, 242, 235, .94); border-color: var(--line); }
  .wordmark__name { font-size: 1.1rem; letter-spacing: .22em; }
  .wordmark__sub { font-size: .55rem; }
  .site-nav a[href="#services"] { display: none; }
  .scroll-cue { display: none; }
  .scene__poster img { object-position: 60% 20%; }
  .hero-copy {
    max-width: none; justify-content: flex-end; padding: 6rem var(--gutter) 4.5rem; box-sizing: border-box;
    background: linear-gradient(to top, rgba(247, 242, 235, .97) 0%, rgba(247, 242, 235, .9) 38%, rgba(247, 242, 235, 0) 66%);
  }
  .hero-title { font-size: clamp(2.3rem, 10.5vw, 3rem); margin: .9rem 0 .8rem; }
  .hero-lede { font-size: 1rem; }
  .hero-actions { margin-top: 1.25rem; width: 100%; }
  .hero-actions .button { flex: 1 1 auto; }
  .service-list { grid-template-columns: 1fr; }
  .service, .service + .service { padding: 1.75rem 0; border-right: 0; padding-left: 0; }
  .service + .service::before { left: 0; }
  .choice-grid { grid-template-columns: 1fr; }

  /* Phone choreography: statement over a soft ivory veil; arch at the top, method below. */
  .motion-on .act--two { align-items: flex-end; padding-bottom: 5rem; background: linear-gradient(to top, rgba(247, 242, 235, calc(.95 * var(--t-s1))) 0%, rgba(247, 242, 235, calc(.85 * var(--t-s1))) 45%, rgba(247, 242, 235, 0) 70%); }
  .motion-on .statement { max-width: none; font-size: clamp(2.1rem, 9.5vw, 2.8rem); }
  .motion-on .scene__media {
    clip-path: inset(
      calc(var(--t-arch) * 8.5rem) calc(var(--t-arch) * 16vw) calc(var(--t-arch) * 52svh) calc(var(--t-arch) * 16vw)
      round calc(var(--t-arch) * 34vw) calc(var(--t-arch) * 34vw) calc(var(--t-arch) * 3px) calc(var(--t-arch) * 3px)
    );
  }
  .motion-on .scene__ring { top: calc(8.5rem - .7rem); right: calc(16vw - .7rem); bottom: calc(52svh - .7rem); left: calc(16vw - .7rem); border-radius: 34.7vw 34.7vw 0 0; }
  .motion-on .act--three { justify-content: flex-end; padding: 0 var(--gutter) 4.5rem; }
  .motion-on .act--three .eyebrow { display: none; }
  .motion-on .method-title { font-size: 1.6rem; margin: 0 0 1rem; }
  .motion-on .method { gap: .75rem; }
  .motion-on .method__item { grid-template-columns: 2rem 1fr; gap: .5rem; }
  .motion-on .method__item h3 { font-size: 1.1rem; margin-bottom: .1rem; }
  .motion-on .method__item p { font-size: .85rem; line-height: 1.45; }
  .motion-on .method__rule { display: none; }

  .motion-on .atelier { --track: 500vw; height: 400svh; }
  .motion-on .atelier__track { gap: 8vw; padding: 0 8vw; }
  .motion-on .panel--intro, .motion-on .panel--image, .motion-on .panel--wide, .motion-on .panel--quote, .motion-on .panel--end { width: 76vw; }
  .motion-on .panel--tall { width: 64vw; }
  .motion-on .panel__img { height: 52svh; }
  .motion-on .panel--tall .panel__img { height: 58svh; }
}
@media (max-width: 700px) and (max-height: 700px) {
  .hero-note { display: none; }
  .motion-on .method__item p { display: none; }
}
@media (max-width: 480px) {
  .hide-sm { display: none; }
  .show-sm { display: inline; }
}

/* Reduced motion: never arm the scroll choreography, even if the script runs. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* =========================================================
   POLICY & SUPPORTING PAGES (static pages: no scripts)
   Plus the shared footer policy links and the booking page's example-policy line.
   ========================================================= */
.policy { max-width: var(--maxw); margin: 0 auto; padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) 4rem; }
.policy__layout { display: grid; grid-template-columns: minmax(0, 44rem) minmax(13rem, 17rem); justify-content: space-between; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.policy__head { padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.policy__head h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); margin-top: 1rem; }
.policy__status { margin-top: 1rem; font-family: var(--serif); font-style: italic; font-size: 1.125rem; color: var(--champagne-ink); }
.policy__updated { margin-top: .3rem; font-size: .875rem; color: var(--ink-soft); }
.policy__body > * + * { margin-top: 1rem; }
.policy__body > h2 { margin-top: 2.75rem; font-size: clamp(1.45rem, 2.4vw, 1.8rem); }
.policy__body > h2 + * { margin-top: .9rem; }
.policy__body p, .policy__body li { max-width: 40rem; }
.policy__body ul { margin-bottom: 0; padding-left: 1.25rem; }
.policy__body li + li { margin-top: .35rem; }
.policy__body li::marker { color: var(--champagne-ink); }
.policy__body a, .policy-nav a, .booking__policies a, .fine-print a { text-decoration-color: var(--champagne); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.policy__body a:hover, .booking__policies a:hover, .fine-print a:hover { text-decoration-color: currentColor; }
.policy__intro { font-size: 1.125rem; color: var(--espresso-2); }
.policy__body > .policy__notice { margin-top: 2rem; }
.policy__closing { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .875rem; color: var(--ink-soft); }

/* Unresolved production placeholders: visibly unfinished, never filled in by the demo. */
.placeholder { background: var(--stone); color: var(--espresso); padding: .05em .3em; border-bottom: 1px dashed var(--champagne-ink); border-radius: var(--radius); }
.policy-flag { display: inline-block; padding: .3rem .7rem; border: 1px solid var(--champagne-ink); font-size: .75rem; font-weight: 600; letter-spacing: .16em; color: var(--champagne-ink); }
.policy-example { padding: 1.1rem 1.25rem; border: 1px dashed var(--line); background: var(--white); }
.policy-example p + p { margin-top: .4rem; }
.policy-example__label { font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--champagne-ink); }

/* Side list of policy pages (after the article in reading order; right-hand column on wide screens). */
.policy-nav { position: sticky; top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .9rem; }
.policy-nav__group { font-size: .6875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--champagne-ink); }
.policy-nav__group ~ .policy-nav__group { margin-top: 1.5rem; }
.policy-nav ul { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .15rem; }
.policy-nav a { display: block; padding: .3rem 0 .3rem .85rem; border-left: 1px solid var(--line); color: var(--espresso-2); text-decoration: none; }
.policy-nav a:hover { border-left-color: var(--champagne); color: var(--espresso); }
.policy-nav a[aria-current="page"] { border-left: 2px solid var(--champagne-ink); padding-left: calc(.85rem - 1px); color: var(--espresso); font-weight: 600; }

/* Footer: grouped policy links on every page. */
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 1.25rem 3.5rem; margin-top: .75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.site-footer__heading { font-size: .6875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--champagne-ink); }
.site-footer__nav ul { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.site-footer__nav a { display: inline-block; padding: .3rem 0; color: var(--espresso-2); text-decoration: none; border-bottom: 1px solid transparent; }
.site-footer__nav a:hover { border-bottom-color: var(--champagne); }

/* Booking page: restrained secondary line; example policies only, never competing with the booking button. */
.booking__policies { margin-top: 1.25rem; font-size: .8125rem; color: var(--ink-soft); }
.booking__policies-label { margin-right: .35rem; }

@media (max-width: 900px) {
  .policy__layout { grid-template-columns: minmax(0, 1fr); }
  .policy-nav { position: static; }
}
/* Policy pages mirror the homepage header on smaller screens (its rules match the homepage's own #anchors). */
@media (max-width: 820px) { .policy-page .site-nav a[href$="#visit"] { display: none; } }
@media (max-width: 700px) { .policy-page .site-nav a[href$="services/index.html"] { display: none; } }
/* Solid-header pages (booking, policies) on the narrowest phones: a little less space between wordmark and nav. */
@media (max-width: 360px) { .site-header--solid { gap: 1rem; } }

/* =========================================================
   SERVICES PAGE (static: no scripts)
   Fast path (services + prices) and guided path (outcomes → service or consultation).
   ========================================================= */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: no-preference) { html:has(.services-page) { scroll-behavior: smooth; } }
.svc-wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.svc-intro, .svc-fast, .svc-guide, .svc-expect, .svc-unsure { padding-top: clamp(4rem, 8vw, 6.5rem); padding-bottom: clamp(4rem, 8vw, 6.5rem); }
.svc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.svc-prompt { font-size: .9375rem; color: var(--ink-soft); }
.svc-prompt a, .svc-unsure a:not(.button) { font-weight: 500; text-decoration-color: var(--champagne); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.svc-prompt a:hover { text-decoration-color: currentColor; }

/* 1 · Opening */
.svc-intro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-top: clamp(3rem, 7vw, 5.5rem); }
.svc-intro h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); margin-top: 1rem; }
.svc-intro__lede { margin-top: 1.25rem; max-width: 34rem; font-size: 1.125rem; color: var(--espresso-2); }
.svc-intro .svc-actions { margin-top: 2rem; }
.svc-intro .svc-prompt { margin-top: 1.25rem; }

/* Image slots. Final assets replace .img-placeholder with a <picture>; the slot keeps its shape. */
.svc-media { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--stone); aspect-ratio: 3 / 2; }
.svc-media--hero { aspect-ratio: 5 / 4; border-radius: 40% 40% var(--radius) var(--radius) / 30% 30% var(--radius) var(--radius); }
.svc-media img { width: 100%; height: 100%; object-fit: cover; }
/* INTERNAL DEVELOPMENT PLACEHOLDER: deliberately unfinished-looking so it can't be mistaken for a final image. */
.img-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; padding: 1rem; text-align: center;
  background: repeating-linear-gradient(135deg, var(--stone) 0 14px, var(--ivory-deep) 14px 28px); outline: 2px dashed var(--champagne-ink); outline-offset: -10px; color: var(--espresso); }
.img-placeholder__tag { font-size: .6875rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; background: var(--espresso); color: var(--ivory); padding: .25rem .6rem; }
.img-placeholder__id { font-family: var(--serif); font-size: 1.25rem; }
.img-placeholder__spec { font-size: .8125rem; color: var(--ink-soft); }

/* 2 · Fast path */
.svc-fast { border-top: 1px solid var(--line); }
.svc-fast .section-head .svc-prompt { margin-top: 1rem; }
.svc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem); }
.svc-card { display: flex; flex-direction: column; gap: 1.5rem; }
.svc-card__body { display: flex; flex-direction: column; gap: .75rem; flex: 1; padding-left: 1rem; border-left: 2px solid transparent; transition: border-color .6s var(--ease-out), background-color .6s var(--ease-out); }
.svc-card:target .svc-card__body { border-left-color: var(--champagne-ink); }
.svc-card__cat { font-size: .75rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--champagne-ink); }
.svc-card__name { font-size: clamp(1.6rem, 2.6vw, 2rem); }
.svc-card__desc { color: var(--ink-soft); max-width: 32rem; }
.svc-card__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.25rem; padding-top: .9rem; margin-top: auto; border-top: 1px solid var(--line); }
.svc-card__price { font-family: var(--serif); font-size: 1.35rem; color: var(--espresso); }
.svc-card__time { font-size: .9375rem; color: var(--ink-soft); }
.svc-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.5rem; margin-top: .5rem; }
.svc-fast .assurances { margin-top: clamp(3rem, 6vw, 4.5rem); }
.svc-prompt--end { margin-top: 1.5rem; }

/* 3 · Guided path: static outcome cards; the whole card is the link's hit area. */
.svc-guide { background: var(--ivory-deep); border-top: 1px solid var(--line); }
.svc-outcomes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.svc-outcome { position: relative; display: flex; flex-direction: column; gap: .6rem; padding: 1.5rem 1.5rem 1.35rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .25s var(--ease), transform .35s var(--ease-out); }
.svc-outcome h3 { font-size: 1.35rem; }
.svc-outcome p { color: var(--ink-soft); font-size: .9375rem; flex: 1; }
.svc-outcome__link { align-self: flex-start; font-size: .9rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--champagne); padding-bottom: .1rem; }
.svc-outcome__link::after { content: ""; position: absolute; inset: 0; }
.svc-outcome__link:focus-visible { outline: none; }
.svc-outcome:focus-within { outline: 2px solid var(--espresso); outline-offset: 3px; }
.svc-outcome:hover { border-color: var(--espresso-2); transform: translateY(-2px); }
.svc-outcome--consult { background: var(--ivory); border-style: dashed; }

/* 4 · What to expect */
.svc-expect { border-top: 1px solid var(--line); }
.svc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--champagne); padding-top: 1.75rem; }
.svc-step { display: flex; flex-direction: column; gap: .5rem; }
.svc-step__num { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--champagne-ink); line-height: 1.2; }
.svc-step h3 { font-size: 1.3rem; }
.svc-step p { color: var(--ink-soft); font-size: .9375rem; }
.svc-expect .svc-actions { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* 5 · Uncertainty route */
.svc-unsure { background: var(--espresso); color: var(--ivory); }
.svc-unsure__layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.svc-unsure h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); }
.svc-unsure h2 em { color: #e3cfa6; }
.svc-unsure__copy > p { margin-top: 1rem; color: #e9dfd2; max-width: 34rem; }
.svc-unsure__questions { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.svc-unsure__questions li { font-family: var(--serif); font-style: italic; font-size: 1.25rem; padding-left: 1.25rem; border-left: 1px solid var(--champagne); }
.svc-unsure__card { padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid rgba(247, 242, 235, .28); }
.svc-unsure__card h3 { font-size: 1.6rem; }
.svc-unsure__card p { margin-top: .75rem; color: #e9dfd2; }
.svc-unsure__meta { font-size: .9375rem; }
.svc-unsure .svc-actions { margin-top: 1.5rem; }
.svc-unsure .text-link { color: var(--ivory); border-color: var(--champagne); }
.svc-unsure .text-link:hover { border-color: var(--ivory); }
.svc-unsure :focus-visible { outline-color: var(--ivory); }

/* Header on smaller screens: the repointed "Services & pricing" link collapses like the homepage's in-page one did. */
@media (max-width: 820px) { .services-page .site-nav a[href$="#visit"] { display: none; } }
@media (max-width: 700px) {
  .masthead .site-nav a[href="services/index.html"], .services-page .site-nav a[href$="services/index.html"] { display: none; }
}
@media (max-width: 1000px) {
  .svc-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .svc-intro, .svc-unsure__layout { grid-template-columns: minmax(0, 1fr); }
  .svc-media--hero { max-width: 30rem; }
  .svc-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .svc-outcomes, .svc-steps { grid-template-columns: minmax(0, 1fr); }
  .svc-card__body { padding-left: .75rem; }
}

/* DigiThat prototype frame integration */
:root{--digithat-frame-height:0px}
body:has(.example-toolbar) .masthead{top:var(--digithat-frame-height)}
body:has(.example-toolbar) .book-page .masthead{top:auto}
.example-bare body:has(.example-toolbar) .masthead{top:0}

/* Phone opening: readable sequential acts, no clipped arch/text overlap. */
@media(max-width:900px){
 .demo-bar{display:none}
 body:has(.example-toolbar) .masthead,.example-bare body:has(.example-toolbar) .masthead{position:sticky;top:var(--digithat-frame-height);z-index:30}
 .site-header,.has-js:not(.is-scrolled) .masthead .site-header{padding:8px 12px;gap:10px;min-height:62px}
 .wordmark__name{font-size:.95rem;letter-spacing:.16em}.wordmark__sub{font-size:.5rem;letter-spacing:.25em}
 .site-nav{gap:12px;font-size:.8125rem}.site-nav [data-salon-result]{display:none!important}
 .site-nav [data-salon-services]{display:inline-flex!important;align-items:center;min-height:44px;white-space:nowrap}
 .site-nav .button{min-height:44px;padding:10px 12px;font-size:.8125rem}.site-nav .hide-sm{display:none}.site-nav .show-sm{display:inline}
 .scene,.motion-on .scene{height:auto}
 .motion-on .scene__sticky{position:relative;top:auto;height:auto;overflow:visible}
 .scene__stage,.motion-on .scene__stage{position:relative;height:auto;min-height:0;overflow:hidden}
 .hero-copy,.motion-on .act--one{height:auto;min-height:calc(100svh - 112px);padding:clamp(15rem,43svh,25rem) var(--gutter) 2rem;opacity:1;transform:none;visibility:visible;max-width:none;box-sizing:border-box}
 .hero-title{font-size:clamp(2.1rem,9vw,2.8rem)}.hero-actions{gap:10px}.hero-actions .button{padding:.8rem 1rem;min-height:48px}
 .motion-on .scene__media{clip-path:none;will-change:auto}.motion-on .scene__frame{transform:scale(calc(1.02 + .035 * var(--p,0)));transform-origin:60% 30%}
 .scene__poster img{object-position:60% 12%}.motion-on .scene__ring{display:none}
 .act--two,.motion-on .act--two{position:relative;inset:auto;padding:3rem var(--gutter);display:block;opacity:1;transform:none;background:var(--ivory-deep);pointer-events:auto}
 .motion-on .statement{max-width:none;font-size:clamp(2rem,8.5vw,2.65rem)}
 .motion-on .statement__line:nth-child(n) .statement__inner{transform:none}
 .act--three,.motion-on .act--three{position:relative;inset:auto;padding:3rem var(--gutter);display:block;pointer-events:auto}
 .motion-on .act--three>.eyebrow{display:flex}.motion-on .act--three>.eyebrow,.motion-on .act--three>.method-title,.motion-on .method__item:nth-child(n){opacity:1;transform:none}
 .motion-on .method-title{font-size:1.85rem;margin:1rem 0 1.5rem}.motion-on .method{gap:1.25rem}.motion-on .method__item p{display:block;font-size:1rem;line-height:1.6}.motion-on .method__item h3{font-size:1.2rem}
 .method__cta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:1.5rem}
 .scene__controls,.motion-on .scene__controls{position:relative;inset:auto;padding:0 var(--gutter) 1.5rem}.scene__meter{display:none!important}
 .motion-on .atelier__sticky{top:var(--salon-top,110px);height:calc(100svh - var(--salon-top,110px));padding:1.5rem 0}
 .motion-on .panel__img{height:42svh}.motion-on .panel--tall .panel__img{height:46svh}
 .book-bar{display:none!important}
 .book{padding-top:2rem}.book h1{font-size:clamp(2rem,9vw,3rem)}
}
.motion-on .atelier__track{width:max-content}
@media(max-width:900px){.motion-on.scene-past-copy .act--one{visibility:visible}}

@media(min-width:701px) and (max-width:900px){.hero-copy{background:linear-gradient(to top,rgba(247,242,235,.98) 0%,rgba(247,242,235,.92) 38%,rgba(247,242,235,0) 72%)}}