/* Zahnarztpraxis Lindgren: concept study by Zigna. V2, "Nordic calm".
   Birch and deep Nordic blue, an oversized light serif, photography-led,
   slow and deliberate motion. All motion is off for reduced-motion. */

:root {
  --birch: #f4efe6;
  --birch-2: #ebe4d8;
  --ink: #1b2531;
  --ink-2: #5b6572;
  --line: #d9d0c1;
  --blue: #1d3550;
  --blue-2: #2a4a6b;
  --on-blue: #e8edf2;
  --on-blue-2: #a9b7c6;
  --wood: #b08a5a;
  --serif: 'Spectral', Georgia, serif;
  --sans: 'Schibsted Grotesk', system-ui, sans-serif;
  --wrap: 84rem;
  --gut: clamp(1.1rem, 4.5vw, 3.5rem);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
body {
  margin: 0; background: var(--birch); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 400; }
img { display: block; max-width: 100%; height: auto; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.fict { color: var(--ink-2); font-size: .875em; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.display { font: 300 clamp(4rem, 13vw, 11.5rem)/.9 var(--serif); letter-spacing: -0.035em; }
.display-s { font: 300 clamp(2.4rem, 5.2vw, 4.4rem)/1 var(--serif); letter-spacing: -0.025em; }
.display span, .display-s span { display: block; }
.label { font: 500 .8125rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.label--light { color: var(--on-blue-2); }

/* Concept label */
.concept {
  display: flex; flex-wrap: wrap; gap: .25rem 1rem; justify-content: center;
  padding: .55rem var(--gut); background: var(--ink); color: #eef0f2;
  font-size: .8125rem; line-height: 1.4; text-align: center;
}
.concept a { color: #fff; }
.concept-en { opacity: .65; }
@media (max-width: 30rem) { .concept-long, .concept-en { display: none; } }
@media (min-width: 30.01rem) { .concept-short { display: none; } }

/* Header */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--birch) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .4s; }
.top.is-stuck { border-bottom-color: var(--line); }
.top-in { display: flex; align-items: center; gap: 2.25rem; min-height: 4.75rem; }
.brand { font: 400 1.75rem/1 var(--serif); letter-spacing: -0.02em; text-decoration: none; margin-right: auto; display: inline-flex; align-items: baseline; }
.brand-dot { width: .32em; height: .32em; border-radius: 50%; background: var(--wood); margin-left: .12em; }
.nav { display: flex; gap: 1.75rem; font-size: .9375rem; }
.nav a { text-decoration: none; color: var(--ink-2); position: relative; padding: .3rem 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.next-slot { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; padding: .6rem 1rem; border: 1px solid var(--ink); border-radius: 999px; font-size: .875rem; white-space: nowrap; transition: background .4s, color .4s; }
.next-slot:hover { background: var(--ink); color: var(--birch); }
.ns-dot { width: .45rem; height: .45rem; border-radius: 50%; background: #3f7d58; box-shadow: 0 0 0 0 rgba(63, 125, 88, .5); animation: breathe 3s ease-in-out infinite; }
.ns-label { color: inherit; opacity: .7; }
.ns-time { font-weight: 500; }
@keyframes breathe { 50% { box-shadow: 0 0 0 .35rem rgba(63, 125, 88, 0); } }
.menu-btn { display: none; font: inherit; font-size: .9375rem; background: none; border: 0; padding: .4rem 0; color: var(--ink); text-decoration: underline; text-underline-offset: .25em; }

@media (max-width: 64rem) {
  .nav { display: none; }
  .js .menu-btn { display: block; }
  .nav.is-open { display: flex; flex-direction: column; gap: 0; position: absolute; left: 0; right: 0; top: 100%; background: var(--birch); border-bottom: 1px solid var(--line); padding: .5rem var(--gut) 1.25rem; }
  .nav.is-open a { padding: .9rem 0; border-bottom: 1px solid var(--line); color: var(--ink); font: 300 1.5rem/1.2 var(--serif); }
  .top-in { gap: 1rem; }
}
@media (max-width: 34rem) { .ns-label { display: none; } .next-slot { padding: .5rem .8rem; } }

/* Hero */
.hero { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; align-items: end; padding-top: clamp(2.5rem, 7vw, 6rem); }
.hero-text { grid-column: 1 / span 7; position: relative; z-index: 2; padding-bottom: clamp(1rem, 3vw, 2.5rem); }
.hero h1 { margin-right: -12vw; }   /* the headline runs over the photo */
.hero-meta { margin-top: clamp(2rem, 4vw, 3.25rem); display: grid; grid-template-columns: minmax(0, 22rem) auto; gap: 1.5rem 2.5rem; align-items: end; }
.hero-meta p { color: var(--ink-2); }
.hero-photo { grid-column: 8 / span 5; aspect-ratio: 4 / 5; }
.hero-photo img { object-position: 62% 50%; }
.btn {
  display: inline-flex; align-items: center; gap: .75rem; justify-self: start;
  font: 500 1rem/1 var(--sans); text-decoration: none; cursor: pointer;
  background: var(--blue); color: var(--on-blue); border: 0; border-radius: 999px; padding: 1.05rem 1.6rem;
  transition: background .4s;
}
.btn::after { content: "→"; transition: transform .5s var(--ease); }
.btn:hover { background: var(--ink); }
.btn:hover::after { transform: translateX(.3rem); }
@media (max-width: 62rem) {
  .hero-text, .hero-photo { grid-column: 1 / -1; }
  .hero h1 { margin-right: 0; }
  .hero-photo { aspect-ratio: 4 / 3; margin-top: 2.5rem; }
  .hero-meta { grid-template-columns: 1fr; }
}

/* Photo frames: clip reveal on the outer frame, parallax on the inner */
.frame { margin: 0; overflow: hidden; position: relative; background: var(--birch-2); }
.frame-in { position: absolute; inset: -8% 0; }
.frame-in img { width: 100%; height: 100%; object-fit: cover; }

/* The week, as a quiet strip */
.week { display: grid; grid-template-columns: auto 1fr; gap: 1rem 3rem; align-items: center; padding-top: 2rem; padding-bottom: 2rem; margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.week-status { display: flex; align-items: center; gap: .6rem; font: 400 1.0625rem/1.3 var(--sans); }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ink-2); flex: none; }
.week-status.is-open .dot { background: #3f7d58; }
.week-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; justify-self: end; width: min(100%, 38rem); }
.week-days li { display: grid; gap: .1rem; font-size: .9375rem; padding-left: .75rem; border-left: 1px solid var(--line); }
.week-days li span:first-child { color: var(--ink-2); font-size: .8125rem; }
.week-days li.is-today { border-left-color: var(--blue); }
.week-days li.is-today span:first-child { color: var(--blue); font-weight: 500; }
.week-days li.closed { color: var(--ink-2); }
.week-note { grid-column: 1 / -1; font-size: .875rem; color: var(--ink-2); }
@media (max-width: 48rem) {
  .week { grid-template-columns: 1fr; }
  .week-days { justify-self: stretch; grid-template-columns: repeat(3, 1fr); row-gap: 1rem; }
}

/* Intro statement: words brighten as you scroll */
.intro { padding-top: clamp(5rem, 13vw, 11rem); padding-bottom: clamp(5rem, 13vw, 11rem); }
.intro-text { font: 300 clamp(1.75rem, 3.6vw, 3.25rem)/1.22 var(--serif); letter-spacing: -0.015em; max-width: 24ch; margin-left: auto; margin-right: 8%; }
.intro-text .w { opacity: var(--o, 1); transition: opacity .25s linear; }

/* Your visit: steps on the left, a sticky photo stage on the right */
.visit { background: var(--birch-2); }
.visit-in { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; }
.visit-steps { grid-column: 1 / span 5; padding: clamp(4rem, 9vw, 7rem) 0; }
.visit-steps .label { margin-bottom: 3rem; }
.vstep { min-height: 58vh; display: flex; flex-direction: column; justify-content: center; border-top: 1px solid var(--line); padding: 2rem 0; opacity: .35; transition: opacity .6s var(--ease); }
.vstep.is-on, .still .vstep, html:not(.js) .vstep { opacity: 1; }
.vstep-n { font: 300 1rem/1 var(--serif); color: var(--wood); }
.vstep h3 { font: 300 clamp(2.2rem, 4vw, 3.5rem)/1.05 var(--serif); letter-spacing: -0.02em; margin: .75rem 0 1rem; }
.vstep p { color: var(--ink-2); max-width: 30rem; }
.vstep-photo { display: none; margin: 1.5rem 0 0; }
.visit-stage { grid-column: 7 / span 6; position: relative; }
.stage { position: sticky; top: 7.5rem; height: calc(100vh - 10rem); max-height: 52rem; margin: clamp(4rem, 9vw, 7rem) 0; }
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.1s var(--ease), transform 2.4s var(--ease); }
.stage img.is-on { opacity: 1; transform: scale(1); }
.stage-progress { position: sticky; top: calc(100vh - 2.25rem); height: 1px; background: var(--line); margin-top: -1px; }
.stage-progress span { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); }
@media (max-width: 62rem) {
  .visit-steps { grid-column: 1 / -1; }
  .visit-stage { display: none; }
  .vstep { min-height: 0; opacity: 1; }
  .vstep-photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
  .vstep-photo img { width: 100%; height: 100%; object-fit: cover; }
}

/* Sections */
.section { padding-top: clamp(5rem, 11vw, 9rem); }
.section-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; align-items: end; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head h2 { grid-column: 1 / span 6; }
.section-head p { grid-column: 8 / span 5; color: var(--ink-2); }
@media (max-width: 62rem) { .section-head h2, .section-head p { grid-column: 1 / -1; } .section-head p { margin-top: 1rem; } }

/* Services: duration drawn as a bar on a 90-minute scale */
.services { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.services li { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; align-items: baseline; padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.services h3 { grid-column: 1 / span 3; font: 400 1.5rem/1.2 var(--serif); letter-spacing: -0.01em; }
.services li > p:not(.svc-cost) { grid-column: 4 / span 5; color: var(--ink-2); }
.svc-time { grid-column: 9 / span 2; display: grid; gap: .45rem; font-size: .875rem; }
.svc-time .bar { display: block; height: 3px; background: var(--line); position: relative; }
.svc-time .bar::after { content: ""; position: absolute; inset: 0; width: calc(var(--min) / 90 * 100%); background: var(--blue); transform-origin: left; transform: scaleX(var(--grow, 1)); transition: transform 1.2s var(--ease) .2s; }
.js:not(.still) .card:not(.is-in) .bar::after { --grow: 0; }
.svc-cost { grid-column: 11 / span 2; text-align: right; font-size: .9375rem; }
@media (max-width: 52rem) {
  .services li { grid-template-columns: 1fr auto; row-gap: .5rem; }
  .services h3 { grid-column: 1 / -1; }
  .services li > p:not(.svc-cost) { grid-column: 1 / -1; }
  .svc-time { grid-column: 1; max-width: 12rem; }
  .svc-cost { grid-column: 2; align-self: end; }
}

/* Anxiety: the deep blue band */
.anxiety { margin-top: clamp(5rem, 11vw, 9rem); background: var(--blue); color: var(--on-blue); }
.anxiety-in { padding-top: clamp(5rem, 11vw, 9rem); padding-bottom: clamp(5rem, 11vw, 9rem); }
.anxiety-text { font: 300 clamp(2.2rem, 5.4vw, 5rem)/1.06 var(--serif); letter-spacing: -0.025em; margin-top: 2rem; max-width: 20ch; }
.anxiety-text span { display: block; }
.anxiety-text em { font-style: italic; color: #fff; }
.anxiety-points { list-style: none; margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; color: var(--on-blue-2); font-size: .9375rem; }
.anxiety-points li { border-top: 1px solid var(--blue-2); padding-top: 1.25rem; }
.anxiety-points strong { display: block; color: #fff; font-weight: 500; margin-bottom: .3rem; }
@media (max-width: 52rem) { .anxiety-points { grid-template-columns: 1fr; } }

/* Team: names set large, no stock faces */
.team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.team li { border-top: 1px solid var(--ink); padding-top: 1.5rem; }
.person-name { font: 300 clamp(1.9rem, 3vw, 2.6rem)/1.05 var(--serif); letter-spacing: -0.02em; }
.person-role { font-size: .875rem; color: var(--ink-2); margin-top: .6rem; }
.person-note { margin-top: 1.25rem; max-width: 22rem; }
@media (max-width: 52rem) { .team { grid-template-columns: 1fr; gap: 2.5rem; } }

/* Booking */
.booking { margin-top: clamp(5rem, 11vw, 9rem); background: var(--birch-2); }
.booking-in { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; padding-top: clamp(4.5rem, 9vw, 7rem); padding-bottom: clamp(4.5rem, 9vw, 7rem); }
.booking-head { grid-column: 1 / span 5; }
.booking-head p { margin-top: 1.5rem; color: var(--ink-2); max-width: 24rem; }
.book { grid-column: 7 / span 6; display: grid; gap: 2.5rem; }
.step { border: 0; margin: 0; padding: 0; min-width: 0; }
.step legend { padding: 0; font: 400 1.375rem/1.2 var(--serif); margin-bottom: 1rem; display: flex; align-items: center; gap: .8rem; }
.step-n { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 1px solid var(--ink); border-radius: 50%; font: 400 .875rem/1 var(--sans); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; display: inline-flex; padding: .75rem 1.1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--birch); cursor: pointer; font-size: .9375rem; transition: border-color .3s, background .3s, color .3s; }
.chip:hover { border-color: var(--ink-2); }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip:has(input:checked) { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.chip:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.slots { display: flex; flex-wrap: wrap; gap: .5rem; }
.slot-day { flex-basis: 100%; font-size: .8125rem; color: var(--ink-2); margin-top: .6rem; }
.slot-day:first-child { margin-top: 0; }
.js .no-js-note { display: none; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.75rem; }
.field { display: grid; gap: .35rem; font-size: .875rem; color: var(--ink-2); }
.field:nth-child(3) { grid-column: 1 / -1; max-width: 20rem; }
.field input, .field select { font: inherit; font-size: 1rem; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink-2); border-radius: 0; padding: .6rem 0; }
.field input:focus, .field select:focus { outline: none; border-bottom-color: var(--blue); box-shadow: 0 1px 0 var(--blue); }
.book-error { margin-top: 1rem; color: #8a3b2e; font-size: .9375rem; }
.book-done { display: grid; gap: .6rem; }
.book-done[hidden] { display: none; }
.book-done-title { font: 300 clamp(2rem, 4vw, 3rem)/1.05 var(--serif); }
.book.is-done .step { display: none; }
@media (max-width: 62rem) { .booking-head, .book { grid-column: 1 / -1; } .booking-head { margin-bottom: 2.5rem; } }
@media (max-width: 36rem) { .fields { grid-template-columns: 1fr; } }

/* Costs */
.costs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; color: var(--ink-2); }
.costs p { border-top: 1px solid var(--ink); padding-top: 1.25rem; }
.costs strong { display: block; font: 400 1.375rem/1.2 var(--serif); color: var(--ink); margin-bottom: .6rem; }
@media (max-width: 52rem) { .costs { grid-template-columns: 1fr; } }

/* Place: a full-bleed photo with the contact card over it */
.place { position: relative; margin-top: clamp(5rem, 11vw, 9rem); }
.place-photo { height: clamp(32rem, 80vh, 48rem); }
.place-in { position: absolute; inset: 0; display: flex; align-items: flex-end; padding-bottom: clamp(1.5rem, 4vw, 3.5rem); pointer-events: none; }
.place-card { pointer-events: auto; background: var(--birch); padding: clamp(1.5rem, 3vw, 2.5rem); width: min(100%, 30rem); margin-left: auto; }
.place-card h2 { margin-bottom: 1.25rem; }
.contact-list { margin: 0; }
.contact-list div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: .65rem 0; border-top: 1px solid var(--line); font-size: .9375rem; }
.contact-list dt { color: var(--ink-2); }
.contact-list dd { margin: 0; }
@media (max-width: 40rem) {
  .place-photo { height: 22rem; }
  .place-in { position: static; padding: 0; }
  .place-card { width: auto; margin: -3rem var(--gut) 0; position: relative; }
  .contact-list div { grid-template-columns: 1fr; gap: .1rem; }
}

.foot { margin-top: clamp(4rem, 8vw, 6rem); border-top: 1px solid var(--line); }
.foot-in { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; row-gap: 1rem; padding-top: 2.25rem; padding-bottom: 2.75rem; font-size: .875rem; color: var(--ink-2); }
.foot-brand { grid-column: 1 / span 4; font: 400 1.75rem/1 var(--serif); color: var(--ink); }
.foot-legal { grid-column: 6 / span 7; }
@media (max-width: 48rem) { .foot-brand, .foot-legal { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- motion */
/* Only with JS and without reduced motion; everything is visible otherwise. */
/* the mask leaves room above for umlauts on capitals and below for descenders */
.js:not(.still) [data-lines] .ln { display: block; overflow: hidden; padding: .2em 0 .1em; margin: -.2em 0 -.1em; }
.js:not(.still) [data-lines] .ln > span { display: block; transform: translateY(105%); transition: transform 1.3s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
.js:not(.still) [data-lines].is-in .ln > span { transform: none; }
.js:not(.still) [data-reveal] { opacity: 0; transform: translateY(1.5rem); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js:not(.still) [data-reveal].is-in { opacity: 1; transform: none; }
.js:not(.still) [data-clip] { clip-path: inset(100% 0 0 0); transition: clip-path 1.6s var(--ease); }
.js:not(.still) [data-clip].is-in { clip-path: inset(0 0 0 0); }
.still .ns-dot { animation: none; }


/* ===================================================================== V3 */
/* Cinematic opening: a small photo inside a giant wordmark opens up to the
   full screen as you scroll; the headline lands on the photo. --p (0–1) is
   the scroll progress through the section, set by app.js. */
.stage-intro { position: relative; height: 260vh; --p: 0; }
.intro-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--birch); isolation: isolate; }
.wordmark {
  position: absolute; inset: 0; z-index: 2; margin: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font: 300 21vw/.8 var(--serif); letter-spacing: -0.055em; white-space: nowrap;
  color: var(--birch); mix-blend-mode: difference;
  opacity: calc(1 - var(--p) * 1.6);
}
.wordmark .wl { display: inline-block; transform: translate3d(var(--dx, 0), 0, 0); }
.intro-frame {
  position: absolute; inset: 0; margin: 0;
  --iy: calc((1 - var(--p)) * 30%); --ix: calc((1 - var(--p)) * 34%);
  clip-path: inset(var(--iy) var(--ix) var(--iy) var(--ix) round calc((1 - var(--p)) * 6px));
}
.intro-frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.18 - var(--p) * .18)); }
/* the treatment room is bright: a birch wash on the left carries dark type */
.intro-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(244, 239, 230, .94) 0%, rgba(244, 239, 230, .78) 34%, rgba(244, 239, 230, .2) 58%, transparent 72%); opacity: var(--copy, 0); }
.intro-copy {
  position: absolute; z-index: 3; left: 0; right: 0; top: clamp(7rem, 17vh, 11rem);
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); color: var(--ink);
  opacity: var(--copy, 0); transform: translate3d(0, calc((1 - var(--copy, 0)) * 3rem), 0);
  pointer-events: none;
}
.intro-copy .display { font-size: clamp(3.4rem, 9.5vw, 9rem); max-width: 7ch; }
.intro-meta { margin-top: clamp(1.5rem, 4vh, 2.75rem); display: grid; gap: 1.5rem; max-width: 24rem; color: var(--ink-2); pointer-events: auto; }
.btn--light { background: var(--birch); color: var(--ink); }
.btn--light:hover { background: #fff; }
.scroll-hint { position: absolute; z-index: 3; left: 50%; bottom: 1.5rem; transform: translateX(-50%); margin: 0; font: 500 .75rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); opacity: calc(1 - var(--p) * 4); }
.scroll-hint::after { content: ""; display: block; width: 1px; height: 2.25rem; margin: .75rem auto 0; background: currentColor; transform-origin: top; animation: hint 2.2s var(--ease) infinite; }
@keyframes hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 40rem) {
  .stage-intro { height: 220vh; }
  .intro-frame { --iy: calc((1 - var(--p)) * 27%); --ix: calc((1 - var(--p)) * 17%); }
  .intro-frame::after { background: linear-gradient(180deg, rgba(244, 239, 230, .95) 0%, rgba(244, 239, 230, .82) 42%, rgba(244, 239, 230, .2) 66%, transparent 78%); }
  .intro-copy { top: 5.5rem; }
}
/* Without JS or with reduced motion: the finished state, no pinning */
html:not(.js) .stage-intro, .still .stage-intro { height: auto; --p: 1; --copy: 1; }
html:not(.js) .intro-pin, .still .intro-pin { position: relative; height: 92vh; }
html:not(.js) .wordmark, .still .wordmark, html:not(.js) .scroll-hint, .still .scroll-hint { display: none; }

/* Services: a horizontal track that moves as you scroll down */
.track-section { position: relative; height: var(--track-h, auto); margin-top: clamp(4rem, 9vw, 7rem); }
.track-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.track-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; align-items: end; width: 100%; }
.track-head h2 { grid-column: 1 / span 5; }
.track-head p { grid-column: 7 / span 4; color: var(--ink-2); }
.track-count { grid-column: 11 / span 2 !important; justify-self: end; font: 300 1.5rem/1 var(--serif) !important; color: var(--ink) !important; font-variant-numeric: lining-nums; }
.track-viewport { width: 100%; }
.track { list-style: none; margin: clamp(2rem, 5vh, 3.5rem) 0 0; padding: 0 var(--gut); display: flex; gap: 1.25rem; transform: translate3d(var(--x, 0), 0, 0); will-change: transform; }
.card {
  flex: 0 0 clamp(17rem, 29vw, 25rem); min-height: clamp(21rem, 50vh, 29rem);
  padding: clamp(1.5rem, 2.4vw, 2.25rem); display: flex; flex-direction: column; gap: .9rem;
  background: var(--birch-2);
}
.card:nth-child(even) { background: var(--blue); color: var(--on-blue); }
.card:nth-child(even) p { color: var(--on-blue-2); }
.card:nth-child(even) .bar { background: var(--blue-2); }
.card:nth-child(even) .bar::after { background: var(--birch); }
.card-n { font: 300 clamp(3rem, 5vw, 4.5rem)/1 var(--serif); color: var(--wood); letter-spacing: -0.03em; }
.card h3 { font: 300 clamp(1.9rem, 2.6vw, 2.5rem)/1.05 var(--serif); letter-spacing: -0.02em; }
.card p { color: var(--ink-2); }
.card-foot { margin-top: auto; display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.card .svc-time { min-width: 9rem; }
.card .svc-cost { font: 400 1.125rem/1.2 var(--serif); text-align: right; color: inherit !important; }
@media (max-width: 62rem) {
  .track-head h2, .track-head p { grid-column: 1 / -1; }
  .track-head p { margin-top: 1rem; }
  .track-count { display: none; }
}
/* Phones, no JS, reduced motion: a native swipeable row instead of pinning */
@media (max-width: 62rem) { .track-section { height: auto !important; } .track-pin { position: relative; height: auto; } }
html:not(.js) .track-section, .still .track-section { height: auto !important; }
html:not(.js) .track-pin, .still .track-pin { position: relative; height: auto; }
@media (max-width: 62rem) {
  .track { transform: none !important; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: none; }
  .track::-webkit-scrollbar { display: none; }
  .card { scroll-snap-align: start; flex-basis: 82vw; }
}
html:not(.js) .track, .still .track { transform: none !important; overflow-x: auto; }

/* Anxiety: the sentence fills word by word */
.anxiety-text .w { display: inline; opacity: var(--o, 1); transition: opacity .3s linear; }

/* Floating booking pill */
.float-book {
  position: fixed; z-index: 30; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 1.2rem; border-radius: 999px;
  background: var(--blue); color: var(--on-blue); text-decoration: none; font-size: .9375rem;
  box-shadow: 0 .75rem 2rem rgba(18, 30, 45, .25);
  transform: translate3d(0, 180%, 0); transition: transform .7s var(--ease), background .3s;
}
.float-book.is-on { transform: none; }
.float-book:hover { background: var(--ink); }
.float-time { font-weight: 500; }
.still .float-book { transition: none; }

/* Footer: practice details, then the name across the whole width */
.foot { margin-top: clamp(4rem, 8vw, 6rem); border-top: 1px solid var(--line); overflow: hidden; }
.foot-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding-top: clamp(2.5rem, 5vw, 4rem); }
.foot-top .label { margin-bottom: .6rem; }
.clock { font: 300 clamp(2rem, 3.5vw, 3rem)/1 var(--serif); font-variant-numeric: lining-nums; }
.foot-word { margin: clamp(1.5rem, 4vw, 3rem) 0 0; padding-bottom: .2em; text-align: center; white-space: nowrap; font: 300 26vw/.78 var(--serif); letter-spacing: -0.06em; color: var(--ink); }
.foot-word .wl { display: inline-block; }
.js:not(.still) .foot-word .wl { transform: translate3d(0, 60%, 0); opacity: 0; transition: transform 1.4s var(--ease), opacity 1.4s var(--ease); transition-delay: calc(var(--i) * 60ms); }
.js:not(.still) .foot-word.is-in .wl { transform: none; opacity: 1; }
.foot-in { padding-top: 2rem; padding-bottom: 2.5rem; }
.foot-legal { grid-column: 1 / -1; font-size: .8125rem; max-width: 44rem; }
@media (max-width: 48rem) { .foot-top { grid-template-columns: 1fr; } }