/* YSA Luxe · ysaluxe.com. Site layer on top of scrollcraft.css.
   Colours and fonts come only from the YSA Luxe brand kit. Shape rule: anything you
   press is a pill; photos, panels and cards share one 20px radius. */

:root {
  --ysa-cream: #fbf8f3;
  --ysa-charcoal: #2b2b2b;
  --ysa-gold: #c6a661;
  --ysa-deep-gold: #8a6b2e;
  --ysa-light-gold: #f0e4c8;
  --ysa-terracotta: #b85c38;
  --ysa-lavender: #ada0d6;
  --ysa-white: #ffffff;

  /* Roles. These carry the day look; html[data-theme="dark"] swaps them for the night
     look below. Each page's head sets the theme from the visitor's own clock. */
  --page: var(--ysa-cream);
  --page-alt: var(--ysa-light-gold);
  --card: var(--ysa-white);
  --text: var(--ysa-charcoal);
  --accent-text: var(--ysa-deep-gold);
  --van: var(--ysa-terracotta);
  --link-hover: var(--ysa-terracotta);

  --sc-canvas: var(--page);
  --sc-surface: var(--page-alt);
  --sc-ink: var(--text);
  --sc-ink-soft: color-mix(in oklab, var(--text) 80%, var(--page));
  --sc-accent: var(--ysa-terracotta);
  --sc-accent-ink: var(--ysa-white);
  --sc-hairline: color-mix(in oklab, var(--text) 14%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--text) 24%, transparent);
  --sc-font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sc-font-text: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* The engine's shadows are tuned for a dark ground. On cream they are warm and light. */
  --sc-shadow-color: 30 35% 28%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.08), 0 1px 1px hsl(var(--sc-shadow-color) / 0.05);
  --sc-e2: 0 6px 14px hsl(var(--sc-shadow-color) / 0.09), 0 2px 4px hsl(var(--sc-shadow-color) / 0.06);
  --sc-e3: 0 24px 48px hsl(var(--sc-shadow-color) / 0.13), 0 8px 16px hsl(var(--sc-shadow-color) / 0.08);
  --sc-edge: inset 0 1px 0 rgb(255 255 255 / 0.75);

  --bar-h: 72px;
  --r: 20px;
  --t-hero: clamp(2.35rem, 1.1rem + 3.7vw, 4.6rem);
  --t-h2: clamp(2rem, 1.25rem + 2.6vw, 3.75rem);
  --t-h3: clamp(1.4rem, 1.2rem + 0.8vw, 1.875rem);
  --t-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  /* Apple-like entrances: a quick start and a long, soft settle. */
  --ease-glide: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Night look, 6 pm to 6 am. The palette has no dark ground, so its charcoal becomes the
   page, cream the text and gold the accent; terracotta and lavender keep their jobs. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: var(--ysa-charcoal);
  --page-alt: color-mix(in oklab, var(--ysa-charcoal) 90%, var(--ysa-deep-gold));
  --card: color-mix(in oklab, var(--ysa-charcoal) 88%, var(--ysa-light-gold));
  --text: var(--ysa-cream);
  --accent-text: var(--ysa-gold);
  --van: color-mix(in oklab, var(--ysa-terracotta) 84%, var(--ysa-charcoal));
  --link-hover: color-mix(in oklab, var(--ysa-terracotta) 70%, var(--ysa-cream));
  --sc-ink-soft: color-mix(in oklab, var(--text) 74%, var(--page));
  --sc-hairline: color-mix(in oklab, var(--text) 16%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--text) 28%, transparent);
  --sc-e1: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 1px rgb(0 0 0 / 0.2);
  --sc-e2: 0 8px 20px rgb(0 0 0 / 0.32), 0 2px 6px rgb(0 0 0 / 0.24);
  --sc-e3: 0 28px 56px rgb(0 0 0 / 0.42), 0 10px 20px rgb(0 0 0 / 0.28);
  --sc-edge: inset 0 1px 0 rgb(255 255 255 / 0.07);
}
/* Terracotta sits too close to charcoal for a focus ring at night; gold reads clearly. */
:root[data-theme="dark"] :focus-visible { outline-color: var(--ysa-gold); }

body { font-weight: 400; font-size: var(--t-body); }
h1, h2, h3 { font-family: var(--sc-font-display); font-weight: 600; margin: 0; text-wrap: balance; }
p { margin: 0; }
em { font-style: italic; }
/* Jumps land clear of the fixed bar; taps answer at once with a soft terracotta flash. */
html { scroll-padding-top: calc(var(--bar-h) + 1rem); color-scheme: light; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: rgb(184 92 56 / 0.16); }
/* Content keeps clear of the notch when a phone is on its side. */
.sc-wrap { padding-inline: max(var(--sc-gutter), env(safe-area-inset-left)) max(var(--sc-gutter), env(safe-area-inset-right)); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: fixed; left: 1rem; top: 0.75rem; z-index: 100;
  padding: 0.75rem 1.1rem; border-radius: 999px;
  background: var(--text); color: var(--page); text-decoration: none; font-weight: 600;
  translate: 0 -200%;
}
.skip:focus-visible { translate: 0 0; }

/* ------------------------------------------------------------------ buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0 1.5rem; border-radius: 999px; border: 0;
  font: 600 0.9375rem/1 var(--sc-font-text); letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--ysa-terracotta); color: var(--ysa-white); box-shadow: var(--sc-e1); }
.btn--quiet { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); }
.btn--lavender { background: var(--ysa-lavender); color: var(--ysa-charcoal); }
.btn--white { background: var(--ysa-white); color: var(--van); }
.btn--sm { min-height: 40px; padding: 0 1.1rem; font-size: 0.875rem; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: color-mix(in oklab, var(--ysa-terracotta) 86%, var(--ysa-charcoal)); box-shadow: var(--sc-e2); }
  .btn--quiet:hover { background: var(--page-alt); }
  .btn--lavender:hover { background: color-mix(in oklab, var(--ysa-lavender) 88%, var(--ysa-charcoal)); }
  .btn--white:hover { background: var(--ysa-cream); }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px;
  font-weight: 600; text-decoration: none; color: inherit;
}
.link-arrow::after { content: "\2192"; transition: transform 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover::after { transform: translateX(4px); } }

/* ------------------------------------------------------------------- bar ---- */
.bar {
  position: fixed; inset: 0 0 auto; z-index: var(--sc-z-chrome);
  height: var(--bar-h); display: flex; align-items: center; gap: 2rem;
  padding-inline: max(var(--sc-gutter), env(safe-area-inset-left)) max(var(--sc-gutter), env(safe-area-inset-right));
  transition: background-color 240ms var(--sc-ease-out), box-shadow 240ms var(--sc-ease-out);
}
.bar.is-solid {
  background: color-mix(in oklab, var(--page) 80%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 1px 0 var(--sc-hairline);
}
@media (prefers-reduced-transparency: reduce) {
  .bar.is-solid { background: var(--page); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* On phones the bar stays nearly solid instead of blurring what scrolls beneath it: a
   full-width blur on every frame of scroll is the heaviest effect on a small phone. */
@media (max-width: 899px) {
  .bar.is-solid { background: color-mix(in oklab, var(--page) 95%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.bar__brand { display: block; flex: none; border-radius: 50%; }
.bar__brand img { width: 52px; height: 52px; }
.bar__nav { display: flex; gap: 1.75rem; margin-left: auto; }
.bar__nav a {
  position: relative; padding: 0.6rem 0; font-size: 0.9375rem; font-weight: 500; text-decoration: none;
}
.bar__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.3rem; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 180ms var(--sc-ease-out);
}
.bar__nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .bar__nav a:hover::after { transform: scaleX(1); } }
.bar__menu {
  display: none; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  padding: 0 0.9rem; border: 0; border-radius: 999px; background: transparent;
  box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); font-weight: 600; font-size: 0.875rem; cursor: pointer;
}
@media (max-width: 899px) {
  :root { --bar-h: 64px; }
  .bar { gap: 0.75rem; }
  .bar__brand img { width: 46px; height: 46px; }
  .bar__nav { display: none; }
  .bar .btn--sm { margin-left: auto; }
  .bar__menu { display: inline-flex; }
}

.menu {
  position: fixed; inset: 0; z-index: calc(var(--sc-z-chrome) - 1);
  padding: calc(var(--bar-h) + 1.5rem) max(var(--sc-gutter), env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) max(var(--sc-gutter), env(safe-area-inset-left));
  background: var(--page); display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
}
.menu[hidden] { display: none; }
.menu a:not(.btn) {
  font: 500 clamp(1.8rem, 1.4rem + 2vw, 2.4rem)/1.2 var(--sc-font-display);
  text-decoration: none; padding: 0.7rem 0; border-bottom: 1px solid var(--sc-hairline);
}
.menu .btn { margin-top: 2rem; align-self: flex-start; }
@media (prefers-reduced-motion: no-preference) {
  .menu:not([hidden]) { animation: menu-in 220ms var(--sc-ease-out); }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }
}

/* ------------------------------------------------------------ visit index -- */
/* The page follows a first visit, so the margin index is the visit's steps. */
.vindex { position: fixed; left: clamp(0.75rem, 1.4vw, 1.5rem); top: 50%; translate: 0 -50%; z-index: 50; display: none; }
.vindex ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.vindex a {
  position: relative; display: flex; align-items: center; width: 28px; height: 28px; justify-content: center;
  color: var(--text); text-decoration: none; border-radius: 50%;
}
.vindex a::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px currentColor; transition: transform 200ms var(--sc-ease-out), background-color 200ms;
}
.vindex a[aria-current="step"]::before { background: currentColor; transform: scale(1.35); }
.vindex span {
  position: absolute; left: 34px; white-space: nowrap; font-size: 0.8125rem; font-weight: 600;
  padding: 0.3rem 0.65rem; border-radius: 999px; background: var(--page); color: var(--text);
  box-shadow: var(--sc-e2); opacity: 0; translate: -4px 0; pointer-events: none;
  transition: opacity 160ms var(--sc-ease-out), translate 160ms var(--sc-ease-out);
}
.vindex a:is(:hover, :focus-visible) span { opacity: 1; translate: 0 0; }
.vindex.is-on-dark a { color: var(--ysa-white); }
.vindex.is-on-dark a:focus-visible { outline-color: var(--ysa-white); }
@media (min-width: 1200px) { .vindex { display: block; } }

/* ==================================================================== HERO == */
/* The people behind YSA Luxe, seen through a window that opens to full bleed
   while the photos change on their own. */
.hero__stage { background: var(--page); }
/* --e opens the window only after the headline has gone, so no photo passes under the type. */
.hero {
  --o: clamp(0, (var(--sc-p, 0) - 0.2) / 0.56, 1);
  --e: calc(var(--o) * var(--o) * (3 - 2 * var(--o)));
  --win-t: 15vh; --win-r: var(--sc-gutter); --win-b: 7vh; --win-l: 54vw;
}
/* No clip: each photo already stays inside the window as it opens, so the browser is
   spared a clip on every frame of scroll. */
.hero__scene { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
/* An invisible copy of the closed window. site.js measures it, sizes each photo whole
   (never cropped, so everyone in a group shot stays in frame) and sets --s0, --tx0 and
   --ty0 on the slides, so the photos start fitted inside the window and grow to fill the
   screen as --e opens it. One layer moves, by transform only. */
.hero__frame { position: absolute; top: var(--win-t); right: var(--win-r); bottom: var(--win-b); left: var(--win-l); visibility: hidden; pointer-events: none; }
.hero__slides {
  position: absolute; inset: 0; transform-origin: 0 0;
  transform: translate(calc(var(--tx0, 0px) * (1 - var(--e))), calc(var(--ty0, 0px) * (1 - var(--e)))) scale(calc(var(--s0, 1) + (1 - var(--s0, 1)) * var(--e)));
  will-change: transform;
}
/* One photo at a time; site.js moves .is-on every 2 seconds. */
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms var(--sc-ease-in-out); }
.hero__slide.is-on { opacity: 1; }
.hero__slide img {
  position: absolute; left: 0; top: 0; display: block; max-width: none;
  width: 100%; height: 100%; object-fit: contain; border-radius: var(--r); box-shadow: var(--sc-e2);
}
.hero__copy { position: absolute; z-index: var(--sc-z-copy); left: var(--sc-gutter); top: 54%; translate: 0 -50%; width: calc(54vw - var(--sc-gutter) - 3vw); }
.hero__title { font-size: var(--t-hero); line-height: 1.04; letter-spacing: -0.025em; }
.hero__title > * { display: block; }
.hero__title em { font-weight: 500; color: var(--accent-text); }
.hero__sub { margin-top: 1.5rem; max-width: 36ch; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.6; color: var(--sc-ink-soft); }
.hero__ctas { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* The frosted plate under the caption is a sibling driven from --sc-p, not part of
   the cued text, so it is there when contrast is measured with the copy hidden. */
.hero__tag { position: absolute; z-index: var(--sc-z-copy); left: var(--sc-gutter); bottom: 9vh; display: grid; }
.hero__tag > * { grid-area: 1 / 1; }
.hero__glass {
  border-radius: var(--r);
  background: color-mix(in oklab, var(--page) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--sc-edge), var(--sc-e2);
  /* Fully up before the caption starts, and still up until the caption has all but gone. */
  opacity: min(clamp(0, (var(--sc-p, 0) - 0.56) / 0.06, 1), clamp(0, (1 - var(--sc-p, 0)) / 0.04, 1));
}
/* Margin, not padding: the text box sits inside the plate's rounded corners, so
   nothing but the plate is ever behind a letter. */
.hero__caption { position: relative; margin: 0.95rem 1.25rem; font-size: 0.875rem; line-height: 1.45; }
.hero__caption strong { display: block; font-family: var(--sc-font-display); font-size: 1.125rem; font-weight: 600; }
.hero__caption > * { transition: opacity 300ms var(--sc-ease-in-out); }
.hero__caption.is-swapping > * { opacity: 0; }
/* The slideshow moves for longer than five seconds beside the copy, so it can be paused.
   Two bars while it plays, a triangle once it is held. */
.hero__pause {
  position: absolute; z-index: var(--sc-z-copy); right: calc(var(--sc-gutter) + 1rem); bottom: calc(7vh + 1rem);
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  color: var(--text); background: color-mix(in oklab, var(--page) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--sc-edge), var(--sc-e2); cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.hero__pause[hidden] { display: none; }
.hero__pause:active { transform: scale(0.94); }
.hero__pause::before { content: ""; box-sizing: border-box; width: 12px; height: 14px; border-inline: 4px solid currentColor; }
.hero__pause[aria-pressed="true"]::before {
  width: 0; height: 0; margin-left: 3px;
  border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor;
}
@media (hover: hover) and (pointer: fine) { .hero__pause:hover { background: var(--page); } }
@media (prefers-reduced-transparency: reduce) { .hero__glass, .hero__pause { background: var(--page); -webkit-backdrop-filter: none; backdrop-filter: none; } }

@media (max-width: 899px) {
  .hero { --win-t: 37svh; --win-r: 14px; --win-b: 14px; --win-l: 14px; }
  .hero__copy { top: calc(var(--bar-h) + 1.25rem); translate: none; right: var(--sc-gutter); width: auto; }
  .hero__sub { margin-top: 1rem; font-size: 1rem; }
  .hero__ctas { margin-top: 1.25rem; }
  .hero__tag { left: max(14px, env(safe-area-inset-left)); right: calc(max(14px, env(safe-area-inset-right)) + 58px); bottom: calc(14px + env(safe-area-inset-bottom)); }
  .hero__pause { right: calc(max(14px, env(safe-area-inset-right)) + 0.5rem); bottom: calc(14px + env(safe-area-inset-bottom) + 0.5rem); }
}
@media (max-width: 899px) and (max-height: 720px) { .hero { --win-t: 45svh; } .hero__sub { display: none; } }
/* The smallest phones keep the headline to two lines and both buttons on one row. */
@media (max-width: 359px) {
  .hero { --t-hero: 2rem; }
  .hero__ctas { gap: 0.5rem; }
  .hero__ctas .btn { padding-inline: 1rem; font-size: 0.875rem; }
}
/* A phone on its side is short and wide, so the hero returns to the split layout. */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 500px) {
  .hero { --win-t: calc(var(--bar-h) + 12px); --win-r: var(--sc-gutter); --win-b: 12px; --win-l: 54vw; --t-hero: clamp(1.75rem, 1rem + 2.6vw, 2.4rem); }
  .hero__copy { top: calc(50% + var(--bar-h) / 2); translate: 0 -50%; right: auto; width: calc(54vw - var(--sc-gutter) - 3vw); }
  .hero__ctas { margin-top: 1rem; }
  .hero__tag { left: var(--sc-gutter); right: auto; bottom: 12px; }
  .hero__pause { right: calc(var(--sc-gutter) + 0.5rem); bottom: calc(12px + 0.5rem); }
}

/* ========================================================== YOUR CONCERN == */
.concern { background: var(--page); }
.concern__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.concern__head { position: sticky; top: calc(var(--bar-h) + 3rem); }
.concern__head h2 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -0.02em; max-width: 11ch; }
.concern__head p { margin-top: 1.25rem; max-width: 30ch; line-height: 1.65; color: var(--sc-ink-soft); }
.concern__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline-strong); }
.concern__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 64px; padding: 1.1rem 0; border-bottom: 1px solid var(--sc-hairline-strong);
  font: italic 500 clamp(1.45rem, 1.1rem + 1.5vw, 2.4rem)/1.2 var(--sc-font-display); letter-spacing: -0.015em;
  text-decoration: none; transition: color 160ms var(--sc-ease-out);
}
.concern__list a::after { content: "\2192"; flex: none; font: 400 1.125rem/1 var(--sc-font-text); transition: transform 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .concern__list a:hover { color: var(--link-hover); }
  .concern__list a:hover::after { transform: translateX(6px); }
}
@media (max-width: 899px) { .concern__grid { grid-template-columns: minmax(0, 1fr); } .concern__head { position: static; } }

/* ========================================================= THE ANALYSIS == */
/* The peak. A lavender lens opens on a real Nexa session and the scan runs
   inside it under the reader's hand. */
.look {
  --open: clamp(0, (var(--sc-p, 0) - 0.14) / 0.5, 1);
  --rad: calc(2.4% + var(--open) * 70%);
  --k: clamp(0, (var(--sc-p, 0) - 0.7) / 0.16, 1);
}
.look__stage {
  background: var(--page);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
  padding: calc(var(--bar-h) + 3vh) var(--sc-gutter) 5vh;
}
.look__copy { display: grid; max-width: 34rem; }
.look__copy > * { grid-area: 1 / 1; align-self: center; }
.look__mirror { font: italic 500 var(--t-h2)/1.1 var(--sc-font-display); letter-spacing: -0.02em; color: var(--sc-ink-soft); }
.look__title { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -0.02em; }
.look__body { margin-top: 1.25rem; max-width: 40ch; font-size: 1.0625rem; line-height: 1.65; }
.look__closing { font: 600 var(--t-h3)/1.25 var(--sc-font-display); max-width: 22ch; }
.look__cta { position: relative; margin-top: 1.75rem; }
.look__cta::after {
  content: ""; position: absolute; inset: -7px; border-radius: 999px; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--ysa-lavender);
  opacity: var(--k); transform: scale(calc(1 + 0.9 * (1 - var(--k))));
}
.look__panel {
  position: relative; height: min(76vh, 60rem); aspect-ratio: 3 / 4;
  border-radius: var(--r); overflow: hidden; isolation: isolate; box-shadow: var(--sc-e3);
}
.look__surface { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.look__rim, .look__inside { position: absolute; inset: 0; }
.look__rim { background: var(--ysa-lavender); clip-path: circle(calc(var(--rad) + 3px) at 50% 50%); }
.look__inside { clip-path: circle(var(--rad) at 50% 50%); }
@media (max-width: 899px) {
  .look__stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; justify-items: center; gap: 1.25rem; padding-top: calc(var(--bar-h) + 1rem); }
  .look__copy { justify-self: stretch; min-height: 9.5rem; align-content: start; }
  .look__copy > * { align-self: start; }
  .look__mirror, .look__title { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.2rem); }
  .look__body { margin-top: 0.75rem; font-size: 0.95rem; }
  .look__closing { font-size: 1.35rem; }
  .look__cta { margin-top: 1rem; }
  .look__panel { height: min(54svh, 116vw); }
}

/* ============================================================ THE DOCTOR == */
.doctor { background: var(--page-alt); }
.doctor__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 7vw, 8rem); align-items: center; }
.doctor__photo { margin: 0; }
.doctor__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); box-shadow: var(--sc-e2); }
.doctor__photo figcaption { margin-top: 1rem; font-size: 0.875rem; line-height: 1.5; }
.doctor__photo figcaption strong { display: block; font-family: var(--sc-font-display); font-size: 1.125rem; font-weight: 600; }
.doctor__copy h2 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -0.02em; max-width: 15ch; }
.doctor__copy p { max-width: 46ch; line-height: 1.7; }
.doctor__quote { margin: 0; padding-top: 1.5rem; border-top: 1px solid color-mix(in oklab, var(--ysa-terracotta) 45%, transparent); }
.doctor__quote p { font: italic 500 clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem)/1.35 var(--sc-font-display); color: var(--accent-text); }
.doctor__quote footer { margin-top: 0.6rem; font-size: 0.875rem; color: var(--sc-ink-soft); }
@media (max-width: 899px) { .doctor__grid { grid-template-columns: minmax(0, 1fr); } .doctor__photo { max-width: 28rem; } }

/* ============================================================== THE PLAN == */
.plan__stage { background: var(--page); display: flex; align-items: center; }
.plan__rail { display: flex; align-items: flex-end; gap: clamp(1.25rem, 2.6vw, 2.75rem); padding: calc(var(--bar-h) + 3vh) var(--sc-gutter) 6vh; }
.plan__lead { flex: 0 0 min(28rem, 80vw); align-self: center; }
.plan__lead h2 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -0.02em; }
.plan__lead p { margin-top: 1.25rem; max-width: 38ch; line-height: 1.65; }
.item { flex: 0 0 clamp(15rem, 22vw, 21rem); }
.item__media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); box-shadow: var(--sc-e2); }
.item h3 { margin-top: 1.1rem; font-size: var(--t-h3); line-height: 1.1; letter-spacing: -0.01em; }
.item__meta { margin-top: 0.35rem; font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--sc-ink-soft); }
.item__for { margin-top: 0.7rem; font-size: 0.9375rem; line-height: 1.55; }
.item__price {
  margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--sc-hairline);
  font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent-text);
}
.plan__end { flex: 0 0 min(20rem, 72vw); align-self: center; }
.plan__end p { font: 500 var(--t-h3)/1.25 var(--sc-font-display); }
.plan__end small { display: block; margin-top: 1rem; font-size: 0.8125rem; line-height: 1.5; color: var(--sc-ink-soft); }
.plan__end .link-arrow { margin-top: 1rem; }
/* Items settle in sequence, so the rail reads as a drawer being pulled, not a slideshow. */
@media (prefers-reduced-motion: no-preference) {
  .plan .item { opacity: calc(0.55 + 0.45 * clamp(0, var(--sc-p, 0) * 5.2 - var(--i, 0) + 0.6, 1)); }
}
@media (max-width: 899px) { .item { flex-basis: 72vw; } .plan__rail { align-items: center; } }

/* =============================================================== THE VAN == */
.van {
  --sc-ink: var(--ysa-white); --sc-ink-soft: var(--ysa-white);
  background: var(--van); color: var(--ysa-white);
  padding-top: var(--sc-section);
}
.van ::selection { background: var(--ysa-white); color: var(--van); }
.van :focus-visible, :root[data-theme="dark"] .van :focus-visible { outline-color: var(--ysa-white); }
.van__head h2 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.02em; max-width: 16ch; }
.van__head p { max-width: 44ch; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.65; }
.van__cta { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; }
.van__photo { margin: clamp(2.5rem, 6vw, 5rem) 0 0; }
.van__photo img { width: 100%; height: min(80vh, 62vw); object-fit: cover; object-position: 50% 62%; }
@media (max-width: 899px) { .van__photo img { height: 62vw; } }

/* ============================================================ THE LAUNCH == */
/* Real people on the day the van was unveiled. A collage keeps every photo whole,
   so no one at the edge of a group shot is cropped out. */
/* content-visibility lets the browser skip the 15 photos entirely until the section
   is close, so they cost nothing while the reader is still in the scenes above. */
.moments { background: var(--page-alt); content-visibility: auto; contain-intrinsic-size: auto 1400px; }
@media (min-width: 900px) { .moments { contain-intrinsic-size: auto 1900px; } }
.moments__head h2 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -0.02em; max-width: 14ch; }
.moments__head p { margin-top: 1.25rem; max-width: 46ch; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.65; }
.moments__grid { margin-top: clamp(2.5rem, 5vw, 4rem); columns: 1; column-gap: 12px; }
.moments__grid figure { margin: 0 0 12px; break-inside: avoid; }
.moments__grid img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: var(--sc-e1); }
@media (min-width: 340px) { .moments__grid { columns: 2; } }
@media (min-width: 900px) {
  .moments__grid { columns: 3; column-gap: 20px; }
  .moments__grid figure { margin-bottom: 20px; }
  .moments__grid img { border-radius: var(--r); }
}

/* ======================================================= THE APPOINTMENT == */
.visit { background: var(--page); padding-bottom: 0; }
.card {
  position: relative; max-width: 60rem; margin-inline: auto;
  padding: clamp(2rem, 5vw, 4rem); border-radius: var(--r);
  background: var(--card); box-shadow: var(--sc-e3);
}
.card::before {
  content: ""; position: absolute; inset: 10px; border-radius: calc(var(--r) - 6px); pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ysa-terracotta) 55%, transparent);
}
.card h2 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.02em; }
.card__lede { margin-top: 1rem; max-width: 44ch; font-size: 1.0625rem; line-height: 1.65; }
.card__places { margin: 2.25rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.card__places div { padding-top: 1rem; border-top: 1px solid var(--sc-hairline-strong); }
.card__places dt { font: 600 1.25rem/1.25 var(--sc-font-display); }
.card__places dd { margin: 0.4rem 0 0; font-size: 0.9375rem; line-height: 1.5; }
.card__actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.card__actions a:not(.btn) { font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
@media (max-width: 899px) { .card__places { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================ FOOTER == */
.foot { margin-top: var(--sc-section); padding: clamp(3rem, 6vw, 5rem) 0 calc(2.5rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--sc-hairline); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 2.5rem; }
.foot__brand img { width: 88px; height: 88px; }
.foot__brand p { margin-top: 1.25rem; font: 500 1.375rem/1.3 var(--sc-font-display); max-width: 18ch; }
.foot h3 { font: 600 0.875rem/1.4 var(--sc-font-text); letter-spacing: 0.02em; }
.foot ul { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.foot li a { display: inline-flex; min-height: 40px; align-items: center; font-size: 0.9375rem; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot li a:hover { text-decoration: underline; } }
/* Follow: icon buttons, each a full 44px tap target, opening the page in a new tab. */
.foot__social { display: flex; gap: 0.5rem; }
.foot .foot__social a {
  display: grid; place-items: center; width: 44px; height: 44px; min-height: 0; border-radius: 50%;
  color: var(--text); box-shadow: inset 0 0 0 1px var(--sc-hairline-strong);
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), transform 140ms var(--sc-ease-out);
}
.foot .foot__social a:active { transform: scale(0.94); }
.foot__social svg { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) {
  .foot .foot__social a:hover { background: var(--ysa-terracotta); color: var(--ysa-white); box-shadow: none; text-decoration: none; }
}
.foot__fine { margin-top: 3rem; max-width: 86ch; font-size: 0.8125rem; line-height: 1.6; color: var(--sc-ink-soft); }
.foot__legal { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--sc-hairline); font-size: 0.8125rem; color: var(--sc-ink-soft); }
@media (max-width: 899px) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot__brand { grid-column: 1 / -1; } }

/* ==================================================== PHONE ON ITS SIDE == */
/* Short and wide: the two pinned scenes switch to side-by-side layouts so the lens
   and every machine card, name and price, fit inside one screen. */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 500px) {
  .look__stage {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none;
    align-content: center; justify-items: stretch; gap: 1.5rem;
    padding: calc(var(--bar-h) + 0.75rem) var(--sc-gutter) 0.75rem;
  }
  .look__copy { min-height: 0; align-content: center; }
  .look__copy > * { align-self: center; }
  .look__mirror, .look__title { font-size: clamp(1.4rem, 1rem + 2vw, 1.9rem); }
  .look__body { font-size: 0.9rem; }
  .look__panel { height: calc(100svh - var(--bar-h) - 1.5rem); }

  .plan__rail { align-items: center; gap: 1.25rem; padding: calc(var(--bar-h) + 0.5rem) var(--sc-gutter) 0.5rem; }
  .plan__lead { flex-basis: min(22rem, 44vw); }
  .plan__lead h2 { font-size: clamp(1.5rem, 1rem + 2.4vw, 2rem); }
  .plan__lead p { margin-top: 0.75rem; font-size: 0.9rem; }
  .item { flex-basis: 13.5rem; }
  .item__media img { aspect-ratio: 4 / 3; }
  .item h3 { margin-top: 0.6rem; font-size: 1.2rem; }
  .item__meta { margin-top: 0.2rem; }
  .item__for { margin-top: 0.4rem; font-size: 0.85rem; line-height: 1.45; }
  .item__price { margin-top: 0.5rem; padding-top: 0.5rem; font-size: 0.9rem; }
  .plan__end { flex-basis: min(18rem, 44vw); }
}

/* =========================================================== INNER PAGES == */
/* Treatments, Doctors, Mobile clinic, Visit and Privacy share one quiet frame: a page head,
   plain sections and the same footer. No pinned scenes here; these pages are for reading. */
.phead { padding: calc(var(--bar-h) + clamp(2.5rem, 7vw, 6.5rem)) 0 clamp(2.5rem, 5vw, 4.5rem); }
.phead h1 { font-size: var(--t-hero); line-height: 1.06; letter-spacing: -0.025em; max-width: 15ch; padding-bottom: 0.06em; }
.phead h1 em { font-weight: 500; color: var(--accent-text); }
.phead__lede { margin-top: 1.5rem; max-width: 46ch; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.65; color: var(--sc-ink-soft); }
.phead__note { margin-top: 1rem; max-width: 60ch; font-size: 0.875rem; line-height: 1.55; color: var(--sc-ink-soft); }
.phead__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

.psec { padding-block: clamp(3.5rem, 8vw, 8rem); }
.psec--tight { padding-top: 0; }
.psec--alt { background: var(--page-alt); }
.psec__head { max-width: 46rem; }
.psec__head h2, .split__copy h2, .pcta h2, .contact__title { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -0.02em; }
.psec__head p, .contact__lede { margin-top: 1.25rem; max-width: 46ch; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.65; }

/* A photo beside its words; --flip puts the photo on the right on wide screens. */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 7vw, 8rem); align-items: center; }
.split--flip > :first-child { order: 2; }
.split__copy p { max-width: 46ch; line-height: 1.7; }
.split__copy .split__role { margin-top: 0.5rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; color: var(--sc-ink-soft); }
.pphoto { margin: 0; }
.pphoto img, .pwide img { width: 100%; height: auto; border-radius: var(--r); box-shadow: var(--sc-e2); }
.pphoto figcaption { margin-top: 0.9rem; font-size: 0.875rem; line-height: 1.5; color: var(--sc-ink-soft); }
.pwide { margin: 0; }
.pquote { margin: 0; padding-top: 1.5rem; border-top: 1px solid color-mix(in oklab, var(--ysa-terracotta) 45%, transparent); }
.pquote p { font: italic 500 clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem)/1.35 var(--sc-font-display); color: var(--accent-text); }
.pquote footer { margin-top: 0.6rem; font-size: 0.875rem; color: var(--sc-ink-soft); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 1.5rem; }
.split__copy .steps { margin-top: 1.75rem; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 1rem; line-height: 1.6; }
.steps li::before {
  content: counter(step); grid-row: 1 / span 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: 50%; font: 600 1.0625rem/1 var(--sc-font-display); font-variant-numeric: lining-nums;
  box-shadow: inset 0 0 0 1px var(--sc-hairline-strong);
}
.steps strong { display: block; margin-bottom: 0.2rem; font: 600 1.1875rem/1.3 var(--sc-font-display); }

.gallery { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); align-items: start; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: auto; border-radius: var(--r); box-shadow: var(--sc-e1); }

.pcta { padding-block: clamp(4rem, 9vw, 8rem); border-top: 1px solid var(--sc-hairline); }
.pcta__inner { max-width: 46rem; }
.pcta p { margin-top: 1.25rem; max-width: 44ch; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.65; }
.pcta__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
main + .foot { margin-top: 0; }
/* The privacy line sits at the end of the legal line, on its own when the line wraps. */
.foot__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; }
.foot__links { display: inline-flex; flex-wrap: wrap; gap: 0 1.25rem; }
.foot__links > * { display: inline-flex; align-items: center; min-height: 44px; }
.foot__cookies {
  padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
}

/* Treatments: category chips stay under the bar; the chip for the section in view is filled. */
.chips { position: sticky; top: var(--bar-h); z-index: 30; background: color-mix(in oklab, var(--page) 96%, transparent); box-shadow: 0 1px 0 var(--sc-hairline); }
.chips__row {
  position: relative; display: flex; gap: 0.5rem; max-width: var(--sc-maxw); margin-inline: auto;
  padding: 0.7rem max(var(--sc-gutter), env(safe-area-inset-right)) 0.7rem max(var(--sc-gutter), env(safe-area-inset-left)); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.chips__row::-webkit-scrollbar { display: none; }
.chips a {
  flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border-radius: 999px;
  font-size: 0.875rem; font-weight: 500; white-space: nowrap; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--sc-hairline-strong);
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.chips a[aria-current="true"] { background: var(--text); color: var(--page); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .chips a:not([aria-current="true"]):hover { background: var(--page-alt); } }
.tcat { padding-block: clamp(3rem, 6vw, 5.5rem); border-top: 1px solid var(--sc-hairline); scroll-margin-top: calc(var(--bar-h) + 3.5rem); }
.chips + .tcat { border-top: 0; }
.tcat__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.tcat__head { position: sticky; top: calc(var(--bar-h) + 6rem); }
.tcat__head h2 { font-size: clamp(1.9rem, 1.3rem + 1.9vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; }
.tcat__head p { margin-top: 1rem; max-width: 30ch; font-size: 0.9375rem; line-height: 1.6; color: var(--sc-ink-soft); }
.tcat__head .tcat__count { margin-top: 0.75rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.tcat__note { margin-top: 1.5rem; padding: 1rem 1.1rem; max-width: 34ch; border-radius: 14px; background: var(--page-alt); font-size: 0.8125rem; line-height: 1.6; }
.tgroup { scroll-margin-top: calc(var(--bar-h) + 4.75rem); }
/* Tabbing never hides a focused link under the bar and the chip row. */
html:has(.chips) { scroll-padding-top: calc(var(--bar-h) + 4.75rem); }
.tgroup + .tgroup { margin-top: clamp(2.5rem, 5vw, 3.75rem); }
.tgroup h3 { font: 600 var(--t-h3)/1.2 var(--sc-font-display); letter-spacing: -0.01em; }
.tgroup__desc { margin-top: 0.5rem; max-width: 62ch; font-size: 0.9375rem; line-height: 1.6; color: var(--sc-ink-soft); }
.tlist { list-style: none; margin: 1.25rem 0 0; padding: 0; border-top: 1px solid var(--sc-hairline-strong); }
.titem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(13rem, 17rem); gap: 0.75rem 2.5rem; padding: 1.25rem 0; border-bottom: 1px solid var(--sc-hairline); }
.titem h4 { font: 600 1.1875rem/1.3 var(--sc-font-display); letter-spacing: -0.005em; text-wrap: pretty; }
.titem__text p { margin-top: 0.35rem; max-width: 60ch; font-size: 0.9375rem; line-height: 1.55; color: var(--sc-ink-soft); }
.tprice { margin: 0; display: grid; gap: 0.3rem; }
.tprice div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.9375rem; line-height: 1.45; }
.tprice dt { color: var(--sc-ink-soft); }
.tprice dd, .tprice__solo { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--accent-text); }
.tprice__solo { text-align: right; font-size: 0.9375rem; }
.tprice__label { font-size: 0.8125rem; font-weight: 600; }
.tprice + .tprice__label, .tprice__solo + .tprice__label, .tprice + .tprice { margin-top: 0.75rem; }

/* Visit: the three places, the way in, and how to reach us. */
.places { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.place { display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--r); background: var(--card); box-shadow: var(--sc-e2); }
.place h3 { font: 600 var(--t-h3)/1.15 var(--sc-font-display); }
.place p { margin-top: 0.5rem; line-height: 1.55; }
.place .place__note { font-size: 0.875rem; color: var(--sc-ink-soft); }
.place .place__go { margin-top: auto; padding-top: 1.25rem; }
.place .place__hours { font-weight: 600; }
/* The Google map waits behind a cover until the visitor asks for it, so a visit that never
   opens it loads nothing from Google and gets no Google cookies. */
.gmap {
  position: relative; margin-top: clamp(1rem, 2vw, 1.5rem); aspect-ratio: 21 / 9; overflow: hidden;
  border-radius: var(--r); box-shadow: var(--sc-e2);
  background:
    radial-gradient(circle at 50% 45%, color-mix(in oklab, var(--ysa-gold) 22%, transparent), transparent 62%),
    repeating-linear-gradient(0deg, var(--sc-hairline) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, var(--sc-hairline) 0 1px, transparent 1px 44px),
    var(--page-alt);
}
.gmap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gmap__cover { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.6rem; padding: 1.5rem; text-align: center; }
.gmap__pin { width: 2.75rem; height: 2.75rem; color: var(--ysa-terracotta); }
.gmap__title { max-width: 26ch; font: 600 var(--t-h3)/1.2 var(--sc-font-display); text-wrap: balance; }
.gmap__note { max-width: 42ch; font-size: 0.875rem; line-height: 1.5; color: var(--sc-ink-soft); }
.gmap__actions { margin-top: 0.6rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
@media (max-width: 899px) { .gmap { aspect-ratio: 4 / 5; } }
.contact { margin: 2rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; max-width: 46rem; }
.contact div { padding-top: 1rem; border-top: 1px solid var(--sc-hairline-strong); }
.contact dt { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: var(--sc-ink-soft); }
.contact dd { margin: 0.25rem 0 0; }
.contact a { display: inline-flex; align-items: center; min-height: 44px; font: 600 1.1875rem/1.3 var(--sc-font-display); text-decoration: none; font-variant-numeric: lining-nums tabular-nums; }
@media (hover: hover) and (pointer: fine) { .contact a:hover { text-decoration: underline; } }

/* Privacy: a single readable column. */
.psec--prose { padding-top: 0; }
.prose { max-width: 44rem; }
.prose h2 { margin-top: 2.75rem; font: 600 var(--t-h3)/1.2 var(--sc-font-display); scroll-margin-top: calc(var(--bar-h) + 1.5rem); }
.prose p, .prose li, .prose address { line-height: 1.75; }
.prose p, .prose address { margin-top: 0.9rem; }
.prose address { font-style: normal; }
.prose ul { margin: 0.9rem 0 0; padding-left: 1.25rem; }
.prose li + li { margin-top: 0.45rem; }
.prose a { text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); }

@media (max-width: 899px) {
  .split, .tcat__grid { grid-template-columns: minmax(0, 1fr); }
  .split--flip > :first-child { order: 0; }
  .pphoto { max-width: 32rem; }
  .gallery, .places { grid-template-columns: minmax(0, 1fr); }
  .tcat__head { position: static; }
  .titem { grid-template-columns: minmax(0, 1fr); }
  .tprice__solo { text-align: left; }
  .tprice div { justify-content: flex-start; }
  .tprice dt::after { content: ":"; }
  /* A treatment with only a name and one price keeps the two on one line. */
  .titem:has(.titem__text > h4:only-child):has(.titem__price > .tprice__solo:only-child) { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
}
@media (min-width: 560px) and (max-width: 899px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .contact { grid-template-columns: minmax(0, 1fr); } }

/* =============================================================== COOKIES == */
/* One question, asked once and never in the way: a card in the corner on wide screens and
   across the bottom on phones. site.js builds it, and only when no answer is stored yet. */
.consent {
  position: fixed; z-index: calc(var(--sc-z-chrome) + 1);
  right: max(1.5rem, env(safe-area-inset-right)); bottom: max(1.5rem, env(safe-area-inset-bottom));
  width: min(25rem, calc(100vw - 3rem)); padding: 1.25rem 1.4rem 1.4rem; border-radius: var(--r);
  background: var(--card); color: var(--text); box-shadow: var(--sc-e3), 0 0 0 1px var(--sc-hairline);
}
.consent[hidden] { display: none; }
.consent__title { font: 600 1.125rem/1.2 var(--sc-font-display); }
.consent__text { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.55; color: var(--sc-ink-soft); }
.consent__text a { color: var(--text); }
.consent__actions { margin-top: 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (max-width: 559px) {
  .consent { left: max(0.75rem, env(safe-area-inset-left)); right: max(0.75rem, env(safe-area-inset-right)); bottom: max(0.75rem, env(safe-area-inset-bottom)); width: auto; }
}
@media (prefers-reduced-motion: no-preference) { .consent:not([hidden]) { animation: rise-in 0.7s var(--ease-glide) both; } }

/* ================================================================ MOTION == */
/* Apple-like entrances: transform and opacity only, short distances, a long soft settle.
   Headlines glide in from the left; the lines under them rise. Each plays once. */

/* The hero headline plays as the page opens, line by line, then the line under it and
   the buttons rise. It waits for the scroll engine, which is what first shows the copy. */
@media (prefers-reduced-motion: no-preference) {
  .sc-ready .hero__title > * { animation: glide-in 1.25s var(--ease-glide) 0.12s both; }
  .sc-ready .hero__title > * + * { animation-delay: 0.24s; }
  .sc-ready .hero__sub { animation: rise-in 1.1s var(--ease-glide) 0.48s both; }
  .sc-ready .hero__ctas { animation: rise-in 1.1s var(--ease-glide) 0.62s both; }
}
@keyframes glide-in { from { opacity: 0; translate: -2.75rem 0; } }
@keyframes rise-in { from { opacity: 0; translate: 0 1.25rem; } }

/* Section heads: site.js adds .is-in when a [data-reveal] block comes into view and
   numbers its children (--i) so they arrive in turn; [data-glide] marks the headline.
   Children are text or wrappers, never a bare .btn, so buttons keep their own transitions.
   The `translate` property is used, not `transform`, so it adds to any transform the
   scroll engine writes instead of replacing it. */
.js [data-reveal] > * {
  opacity: 0; translate: 0 1.25rem;
  transition: opacity 0.9s var(--ease-glide), translate 1.15s var(--ease-glide);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal] > [data-glide] { translate: -2.5rem 0; transition-duration: 1s, 1.3s; }
.js [data-reveal].is-in > * { opacity: 1; translate: 0 0; }
/* A headline the scroll engine already fades gets only the glide. */
.js [data-glide]:not([data-reveal] > *) { translate: -2.5rem 0; transition: translate 1.3s var(--ease-glide); }
.js [data-glide]:not([data-reveal] > *).is-in { translate: 0 0; }

/* In the pinned analysis scene the headline and its closing line glide with the scroll,
   in step with the engine's fades (cues 0.22 to 0.34 and 0.6 to 0.72), easing out. */
.look {
  --gt: clamp(0, (var(--sc-p, 0) - 0.22) / 0.14, 1);
  --gc: clamp(0, (var(--sc-p, 0) - 0.6) / 0.14, 1);
}
.look__title { translate: calc((1 - var(--gt)) * (1 - var(--gt)) * -2.5rem) 0; }
.look__body { translate: 0 calc((1 - var(--gt)) * 1rem); }
.look__closing { translate: calc((1 - var(--gc)) * (1 - var(--gc)) * -2.5rem) 0; }

/* ======================================================== REDUCED MOTION == */
/* Fewer and gentler, not zero: no pinned travel for the bespoke scenes, the
   hero holds its window composition, and the lens holds open on the scan. */
@media (prefers-reduced-motion: reduce) {
  .hero { --e: 0; }
  .look { --open: 1; --k: 1; }
  .js [data-reveal] > *, .js [data-reveal] > [data-glide] { translate: none; transition: opacity 0.4s ease; }
  .js [data-glide]:not([data-reveal] > *) { translate: none; }
  .look__title, .look__body, .look__closing { translate: none; }
}