/* Dr. Ramona Drilea · Focșani
   Direction: "The place carries it". One face (Boska), plum-black and white, pink only on actions. */

@font-face {
  font-family: "Boska";
  src: url("../fonts/boska/boska-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Boska";
  src: url("../fonts/boska/boska-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3/source-sans-3-latin-ext-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3/source-sans-3-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #0d060b;
  --surface: #1b0e17;
  --ink: #ffffff;
  --muted: #cfc6cc;
  --accent: #ff488b;
  --accent-ink: #0d060b;
  --field-1: #470c35;
  --field-1-ink: #ffffff;
  --paper: #ffffff;
  --paper-ink: #101421;
  --paper-muted: #45414f;
  --font-display: "Boska", Georgia, "Times New Roman", serif;
  --font-text: "Source Sans 3", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step-small: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.3125rem, 0.98rem + 1.05vw, 1.875rem);
  --step-head: clamp(2.25rem, 1rem + 4.4vw, 5.5rem);
  --step-display: calc((100vw - 2 * var(--m)) * 0.1735);

  --m: clamp(16px, 2.2vw, 32px);
  --g: clamp(12px, 1.6vw, 24px);
  --cw: calc((100vw - 2 * var(--m) - 11 * var(--g)) / 12);
  --section: clamp(104px, 12vw, 200px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.55;
  font-variant-numeric: lining-nums;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 400; font-family: var(--font-display); }
.voice__quote blockquote, .foot__sign, .show__title { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.005em; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
strong { font-weight: 600; }
address { font-style: normal; }
table { border-collapse: collapse; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[id] { scroll-margin-top: 72px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--m); top: -100px; z-index: 100;
  padding: 12px 18px; background: var(--paper); color: var(--paper-ink);
}
.skip:focus { top: 12px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px;
  font-size: 1rem; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap; border: 0; border-radius: 0;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.btn:active { transform: scale(0.97); }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: #ff6a9f; }
.btn--paper { background: var(--paper); color: var(--paper-ink); }
.btn--paper:hover { background: var(--accent); color: var(--accent-ink); }

/* ---------- top bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 28px;
  padding: 14px var(--m);
  color: var(--ink);
  transition: background-color var(--t-ui) ease;
}
.bar.is-solid { background: var(--bg); }
.bar__mark { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; text-decoration: none; margin-right: auto; }
.bar__nav { display: flex; gap: 28px; font-size: 1rem; }
.bar__nav a { text-decoration: none; position: relative; }
.bar__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-hover) var(--ease-out);
}
.bar__nav a:hover::after { transform: scaleX(1); }
.bar__menu { display: none; }
.bar__call { min-height: 38px; padding: 0 18px; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  height: 100svh; min-height: 540px;
  overflow: hidden;
  background: var(--surface);
}
.hero__media, .hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.hero__media img { object-fit: cover; object-position: 50% 42%; }
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 150px; z-index: 1;
  /* neutral scrim under the top bar only. taste-skill-ignore */
  background: linear-gradient(to bottom, rgba(10, 6, 9, 0.62), rgba(10, 6, 9, 0)); /* taste-skill-ignore */
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 52%;
  /* neutral scrim under the hero text only. taste-skill-ignore */
  background: linear-gradient(to bottom, rgba(10, 6, 9, 0), rgba(10, 6, 9, 0.66) 45%, rgba(10, 6, 9, 0.88)); /* taste-skill-ignore */
  pointer-events: none;
}
.hero__foot {
  position: absolute; inset: auto var(--m) 0 var(--m); z-index: 1;
  display: grid; align-items: end; row-gap: 14px;
}
.hero__lede { position: relative; z-index: 1; font-size: var(--step-lead); line-height: 1.3; max-width: 62ch; font-weight: 400; }
.hero__name {
  grid-column: 1 / -1;
  font-size: var(--step-display);
  line-height: 0.86;
  letter-spacing: -0.02em;
  white-space: nowrap;
  margin: 0 0 calc(34px - 0.08em) -0.04em;
}

/* ---------- about ---------- */
.about {
  padding: var(--section) var(--m) calc(var(--section) * 0.8);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g);
}
.about__title { grid-column: 1 / -1; font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.02em; }
.about__lead { grid-column: 1 / span 7; margin-top: 28px; font-size: var(--step-lead); line-height: 1.35; max-width: 42ch; }
.about__mosaic {
  grid-column: 1 / -1; margin-top: 72px;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); align-items: start;
}
.about__photo { grid-column: 1 / span 8; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); }
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__note {
  position: absolute; top: 0; right: 0; width: min(320px, 46%);
  padding: 20px; background: var(--paper); color: var(--paper-ink);
  font-size: var(--step-small); line-height: 1.45;
}
.about__side { grid-column: 9 / -1; }
.about__tile {
  aspect-ratio: 4 / 3; background: var(--field-1);
  display: grid; place-items: center; padding: 8%;
}
.about__tile img { width: 100%; height: 100%; object-fit: contain; }
.about__facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px var(--g); margin-top: 26px;
}
.about__facts dt { font-size: var(--step-small); color: var(--muted); }
.about__facts dd { font-size: var(--step-body); line-height: 1.35; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ---------- the clinic's own film, with its chapters ---------- */
.film { background: var(--bg); padding-bottom: var(--section); }
.film__head {
  padding: 0 var(--m) 48px;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); align-items: end;
}
.film__head h2 { grid-column: 1 / span 6; font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.02em; }
.film__body {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); align-items: start;
  padding-right: var(--m);
}
.film__frame { grid-column: 1 / span 9; background: #000; }
.film__video { display: block; width: 100%; height: auto; aspect-ratio: 1080 / 510; object-fit: cover; background: #000; }
.film__bar {
  grid-column: 10 / -1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
}
.film__chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.film__chapters button, .film__toggle {
  position: relative; padding: 10px 0 12px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--step-body); color: var(--muted); text-align: left;
  transition: color var(--t-hover) ease;
}
.film__chapters button:hover, .film__chapters button.is-current { color: var(--ink); }
html:not(.js) .film__chapters button { cursor: default; }
.film__progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left;
}
.film__toggle { flex: none; color: var(--ink); text-decoration: underline; text-underline-offset: 0.25em; }
.film__toggle:hover { color: var(--accent); }

/* ---------- white middle ---------- */
.list, .show, .work, .steps, .voice {
  background: var(--paper); color: var(--paper-ink);
}
.list a, .work a, .steps a, .voice a { color: var(--paper-ink); }

/* ---------- treatments ---------- */
.list {
  padding: var(--section) var(--m) calc(var(--section) * 0.75);
}
.list__title { font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.02em; }
.list__title span { display: block; }
.list__title span:first-child { padding-left: 3vw; }
.list__body {
  margin-top: 72px;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g);
}
.list__photo { grid-column: 1 / span 5; align-self: end; width: 100%; }
.list__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.list__photo figcaption { margin-top: 10px; font-size: var(--step-small); color: var(--paper-muted); }
.list__name { grid-column: 7; font-size: var(--step-small); color: var(--paper-muted); padding-top: 3px; }
.list__table { grid-column: 8 / -1; }
.list__table table { width: 100%; font-size: var(--step-body); }
.list__table th, .list__table td { padding: 0 0 26px; vertical-align: top; text-align: left; }
.list__table th { width: 34%; font-weight: 400; color: var(--paper-muted); padding-right: 12px; }
.list__table td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; color: var(--paper-muted); }
.list__table td:last-child a { color: var(--paper-ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.list__table tr.gap > * { padding-top: 44px; }
.list__note { margin-top: 28px; max-width: 46ch; font-size: var(--step-body); }

/* ---------- showcase: one frame, before and after ---------- */
.show { position: relative; padding: calc(var(--section) * 0.5) var(--m) var(--section); }
.show__stage { display: grid; justify-items: center; gap: 28px; }
.show__title { font-size: var(--step-head); line-height: 0.95; letter-spacing: -0.02em; text-align: center; }
.show__frame { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); width: min(100%, 760px); }
.show__img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #ece8ea; }
.show__img img { width: 100%; height: 100%; object-fit: cover; }
.show__img figcaption {
  position: absolute; left: 12px; top: 12px; font-size: var(--step-small);
  padding: 4px 10px; background: var(--paper); color: var(--paper-ink);
}
.show__caption { max-width: 34ch; font-size: var(--step-body); }
.show__mark { display: none; }

/* pinned version, only when motion is allowed and the script runs */
.motion-ready .show { height: 300svh; padding: 0; }
.motion-ready .show__stage {
  --fw: min(30vw, calc((100svh - 2 * var(--step-head) - 120px) * 0.8));
  position: sticky; top: 0; height: 100svh; display: block;
}
.motion-ready .show__frame {
  position: absolute; left: 50%; top: 50%; width: var(--fw); aspect-ratio: 4 / 5;
  transform: translate(-50%, -50%); display: block;
}
.motion-ready .show__img { position: absolute; inset: 0; }
.motion-ready .show__img img { transition: transform 900ms var(--ease-soft); transform-origin: 50% 52%; }
.motion-ready .show__img--after { opacity: 0; transition: opacity 1600ms ease; }
.motion-ready .show__title { position: static; }
.motion-ready .show__half { position: absolute; left: 0; right: 0; display: block; z-index: 2; pointer-events: none; }
.motion-ready .show__half--top { bottom: calc(50% + var(--fw) * 0.625 + 0.1em); }
.motion-ready .show__half--bottom {
  top: calc(50% + var(--fw) * 0.625 + 0.08em);
  opacity: 0; transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.motion-ready .show__caption {
  position: absolute; top: calc(50% - var(--fw) * 0.625); left: calc(50% + var(--fw) / 2 + 32px);
  width: min(28ch, calc(50vw - var(--fw) / 2 - 32px - var(--m))); opacity: 0; transform: translateY(16px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.motion-ready .show__mark {
  display: block; position: absolute; left: 0; width: 1px; height: 100svh; pointer-events: none;
}
.motion-ready .show__mark[data-stage="0"] { top: 0; }
.motion-ready .show__mark[data-stage="1"] { top: 100svh; }
.motion-ready .show__mark[data-stage="2"] { top: 200svh; }
.show[data-stage="1"] .show__img--after, .show[data-stage="2"] .show__img--after { opacity: 1; }
.motion-ready .show__img--before { transition: opacity 1600ms ease; }
.show[data-stage="1"] .show__img--before, .show[data-stage="2"] .show__img--before { opacity: 0; }
.show[data-stage="1"] .show__half--bottom, .show[data-stage="2"] .show__half--bottom { opacity: 1; transform: none; }
.show[data-stage="2"] .show__img--after img { transform: scale(1.14); }
.show[data-stage="2"] .show__caption { opacity: 1; transform: none; }

/* ---------- cases with the comparison slider ---------- */
.work { padding: calc(var(--section) * 0.6) var(--m) var(--section); overflow: hidden; }
.work__block {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); align-items: end;
}
.work__block + .work__block { margin-top: 140px; }
.work__block .compare { grid-column: 1 / span 7; margin-left: calc(-1 * var(--m)); }
.work__block--b .compare { grid-column: 1 / span 6; }
.work__cluster { grid-column: 9 / -1; }
.work__small { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.work__text { margin-top: 28px; }
.work__title { font-size: var(--step-lead); line-height: 1.15; letter-spacing: -0.01em; }
.work__text p { margin-top: 14px; font-size: var(--step-body); }
.work__hint { margin-top: 72px; max-width: 52ch; font-size: var(--step-small); color: var(--paper-muted); }
.work__hint a { color: var(--paper-ink); }

.compare {
  --pos: 50%;
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: #ece8ea; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  cursor: ew-resize;
}
.compare__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.compare__label {
  position: absolute; top: 14px; z-index: 2; font-size: var(--step-small);
  padding: 4px 10px; background: var(--paper); color: var(--paper-ink);
}
.compare__label--l { left: 14px; }
.compare__label--r { right: 14px; }
.compare__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2;
  width: 3px; margin-left: -1.5px; background: var(--accent);
}
.compare__handle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  background: var(--accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6' fill='none' stroke='%230d060b' stroke-width='2'/%3E%3C/svg%3E")
    center / 24px no-repeat;
  transition: transform var(--t-hover) var(--ease-out);
}
.compare:hover .compare__handle::after, .compare.is-dragging .compare__handle::after { transform: scale(1.12); }
.compare__range {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; touch-action: pan-y;
}
.compare:has(.compare__range:focus-visible) .compare__handle::after { outline: 2px solid var(--paper-ink); outline-offset: 3px; }
html:not(.js) .compare { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; cursor: auto; }
html:not(.js) .compare__img, html:not(.js) .compare__after { position: static; clip-path: none; aspect-ratio: 4 / 3; }
html:not(.js) .compare__handle, html:not(.js) .compare__range { display: none; }

/* ---------- why an implant: photographs down a diagonal ---------- */
.steps {
  padding: calc(var(--section) * 0.4) var(--m) var(--section);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); align-items: start;
}
.steps__head { grid-column: 8 / -1; grid-row: 1; position: relative; z-index: 1; }
.steps__title { font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.02em; }
.steps__lead { margin-top: 20px; max-width: 30ch; font-size: var(--step-lead); line-height: 1.3; }
.steps__stage { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; align-items: start; }
.steps__stage img { width: 100%; object-fit: cover; }
.steps__stage p { max-width: 36ch; font-size: var(--step-body); }
.steps__stage--1 img { grid-column: 1 / span 4; aspect-ratio: 3 / 4; }
.steps__stage--1 p { grid-column: 5 / span 3; padding-right: 8px; }
.steps__stage--2 { grid-row: 2; margin-top: calc(360px - (4 * var(--cw) + 3 * var(--g)) * 4 / 3); }
.steps__stage--2 img { grid-column: 6 / span 3; aspect-ratio: 1; }
.steps__stage--2 p { grid-column: 9 / span 3; }
.steps__stage--3 { grid-row: 3; margin-top: 180px; }
.steps__stage--3 img { grid-column: 8 / -1; grid-row: 1; aspect-ratio: 16 / 10; }
.steps__stage--3 p { grid-column: 4 / span 4; grid-row: 1; }

/* ---------- a patient's words beside the doctor's portrait ---------- */
.voice {
  padding: calc(var(--section) * 0.4) var(--m) var(--section);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); align-items: start;
}
.voice__portrait {
  grid-column: 2 / span 4; grid-row: 1 / span 2;
  width: 100%; height: 70svh; min-height: 460px; object-fit: cover; object-position: 70% 30%;
}
.voice__quote { grid-column: 7 / -1; grid-row: 1; margin-top: 120px; }
.voice__quote blockquote { margin: 0; font-size: var(--step-lead); line-height: 1.22; max-width: 31ch; }
.voice__quote figcaption { margin-top: 32px; font-size: var(--step-body); }
.voice__small { grid-column: 10 / span 2; grid-row: 2; margin-top: 96px; }
.voice__small img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.voice__small figcaption { margin-top: 10px; font-size: var(--step-small); color: var(--paper-muted); }

/* ---------- reviews on paper slips ---------- */
.slips {
  background: var(--field-1); color: var(--field-1-ink);
  padding: var(--section) var(--m) 0;
  overflow: hidden;
}
.slips__head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); align-items: end; }
.slips__head h2 { grid-column: 1 / span 8; font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.02em; max-width: 13ch; }
.slips__score { grid-column: 9 / -1; font-size: var(--step-body); max-width: 30ch; }
.slips__num { font-size: var(--step-lead); font-weight: 600; }
.slips__more { grid-column: 9 / -1; margin-top: 10px; font-size: var(--step-body); }
.slips__more a { display: inline-flex; align-items: center; gap: 6px; }
.slips__row {
  display: flex; justify-content: center; align-items: flex-start;
  margin: 88px auto 0; max-width: 1240px; padding-inline: 2vw;
}
.slip {
  flex: 0 0 290px; position: relative;
  background: var(--paper); color: var(--paper-ink);
  padding: 34px 24px 72px;
  font-size: var(--step-body); line-height: 1.5;
  --zig: polygon(0 10px, 4% 0, 8% 10px, 12% 0, 16% 10px, 20% 0, 24% 10px, 28% 0, 32% 10px, 36% 0, 40% 10px, 44% 0, 48% 10px, 52% 0, 56% 10px, 60% 0, 64% 10px, 68% 0, 72% 10px, 76% 0, 80% 10px, 84% 0, 88% 10px, 92% 0, 96% 10px, 100% 0,
         100% calc(100% - 10px), 96% 100%, 92% calc(100% - 10px), 88% 100%, 84% calc(100% - 10px), 80% 100%, 76% calc(100% - 10px), 72% 100%, 68% calc(100% - 10px), 64% 100%, 60% calc(100% - 10px), 56% 100%, 52% calc(100% - 10px), 48% 100%, 44% calc(100% - 10px), 40% 100%, 36% calc(100% - 10px), 32% 100%, 28% calc(100% - 10px), 24% 100%, 20% calc(100% - 10px), 16% 100%, 12% calc(100% - 10px), 8% 100%, 4% calc(100% - 10px), 0 100%);
  clip-path: var(--zig);
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0));
  transition: transform 420ms var(--ease-out);
}
.slip + .slip { margin-left: 20px; }
.slip:nth-child(1) { --r: -2.5deg; --y: 40px; }
.slip:nth-child(2) { --r: 1.5deg; --y: 0px; }
.slip:nth-child(3) { --r: 3deg; --y: 64px; }
.slip:nth-child(4) { --r: -1.5deg; --y: 22px; }
.slip:hover { --r: 0deg; }
.slip figcaption { text-align: center; }
.slip figcaption strong { display: block; font-size: var(--step-body); }
.slip figcaption span { display: block; font-size: var(--step-small); color: var(--paper-muted); }
.slip figcaption { margin-bottom: 18px; }
.slip blockquote { margin: 0; }
.slip blockquote p + p { margin-top: 0.7em; }
.slips__award { max-width: 60ch; margin: 120px 0 0; padding-bottom: calc(var(--section) * 0.7); font-size: var(--step-body); }

/* ---------- contact: visit card on the map ---------- */
.visit { position: relative; height: 100svh; min-height: 680px; background: var(--surface); overflow: hidden; }
.visit__map { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 36% 50%; }
.visit__card {
  position: absolute; top: 60px; right: 60px; width: 380px;
  background: var(--paper); color: var(--paper-ink);
  padding: 32px 32px 0;
}
.visit__card h2 { font-size: var(--step-lead); line-height: 1.1; }
.visit__card address { margin-top: 18px; font-size: var(--step-body); line-height: 1.5; }
.visit__hours { width: 100%; margin-top: 20px; font-size: var(--step-body); font-variant-numeric: tabular-nums; }
.visit__hours th { text-align: left; font-weight: 400; padding: 3px 0; }
.visit__hours td { text-align: right; padding: 3px 0; }
.visit__note { margin-top: 10px; font-size: var(--step-small); color: var(--paper-muted); line-height: 1.45; }
.visit__lines { margin-top: 18px; font-size: var(--step-body); line-height: 1.75; }
.visit__lines a { display: inline-flex; align-items: center; gap: 6px; }
.visit__btn { display: flex; width: calc(100% + 64px); margin: 26px -32px 0; min-height: 52px; font-size: var(--step-body); }
.visit__credit { position: absolute; left: var(--m); bottom: 14px; font-size: var(--step-small); color: var(--muted); }

/* ---------- footer: the back of the card ---------- */
.foot { padding: 120px var(--m) 72px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); }
.foot__card {
  grid-column: 2 / span 10; position: relative;
  background: var(--paper); color: var(--paper-ink);
  min-height: 420px; padding: 64px 56px 28px;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; align-content: space-between;
}
.foot__card::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath d='M0 50A50 50 0 0 1 100 50A50 50 0 0 1 200 50A50 50 0 0 1 300 50A50 50 0 0 1 400 50A50 50 0 0 1 500 50A50 50 0 0 1 600 50A50 50 0 0 1 700 50A50 50 0 0 1 800 50A50 50 0 0 1 900 50A50 50 0 0 1 1000 50A50 50 0 0 1 1100 50A50 50 0 0 1 1200 50Z' fill='%23ffffff'/%3E%3C/svg%3E") 0 100% / 100% 100% no-repeat;
}
.foot__sign { font-size: var(--step-lead); line-height: 1.15; }
.foot__msg p + p { margin-top: 16px; max-width: 38ch; font-size: var(--step-body); }
.foot__addr { position: relative; display: grid; gap: 12px; align-content: start; padding-top: 128px; font-size: var(--step-body); }
.foot__addr a { justify-self: start; text-decoration-color: rgba(16, 20, 33, 0.35); transition: text-decoration-color var(--t-hover) ease; }
.foot__addr a:hover { text-decoration-color: var(--accent); }
.foot__stamp {
  position: absolute; top: 0; right: 0; width: 88px; aspect-ratio: 3 / 4; object-fit: cover;
  padding: 6px; background: var(--paper); outline: 2px dashed #c9c3cb; outline-offset: -2px;
  transform: rotate(4deg); transition: transform var(--t-ui) var(--ease-out);
}
.foot__stamp:hover { transform: rotate(0deg) scale(1.04); }
.foot__imprint { grid-column: 1 / -1; margin-top: 64px; text-align: center; font-size: var(--step-small); color: var(--paper-muted); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] {
    opacity: 0; transform: translateY(22px);
    animation: rise 900ms var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 110ms + 200ms);
  }
  .hero__media img { animation: drift 16s var(--ease-soft) both; }

  .motion-ready [data-reveal] > *,
  .motion-ready .steps__stage[data-reveal] > *,
  .motion-ready [data-reveal-rows] tr {
    opacity: 0; transform: translateY(26px);
    transition: opacity 760ms var(--ease-out), transform 760ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .motion-ready .about__photo img, .motion-ready .steps__stage img, .motion-ready .work__small {
    scale: 1.06; transition: scale 1400ms var(--ease-soft);
  }
  .motion-ready .is-in > *,
  .motion-ready .steps__stage.is-in > *,
  .motion-ready [data-reveal-rows].is-in tr { opacity: 1; transform: none; }
  .motion-ready .is-in .about__photo img, .motion-ready .steps__stage.is-in img, .motion-ready .is-in .work__small { scale: 1; }
  .motion-ready .slip { opacity: 0; translate: 0 60px; transition: transform 420ms var(--ease-out), opacity 800ms var(--ease-out), translate 900ms var(--ease-out); transition-delay: 0s, calc(var(--i, 0) * 110ms), calc(var(--i, 0) * 110ms); }
  .motion-ready .slips__row.is-in .slip { opacity: 1; translate: 0 0; }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: scale(1.08); } to { transform: scale(1); } }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .film__body { display: block; padding: 0; }
  .film__bar { flex-direction: row; justify-content: space-between; padding: 18px var(--m) 0; }
  .film__chapters { display: flex; flex-wrap: wrap; gap: 4px 28px; }
  .slips__row { display: block; max-width: 640px; margin-top: 64px; padding: 0; }
  .slip { width: min(78%, 420px); }
  .slip + .slip { margin-left: auto; margin-top: 20px; }
  .slip:nth-child(odd) { --r: -2.5deg; --y: 0px; margin-left: 0; }
  .slip:nth-child(even) { --r: 2.5deg; --y: 0px; margin-left: auto; }
  .visit__card { right: var(--m); top: 88px; }
  .about__note { width: min(300px, 52%); }
  .list__name { display: none; }
  .list__table { grid-column: 5 / -1; }
  .list__photo { width: 100%; min-width: 0; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  :root {
    --step-display: 21vw;
    --step-head: 10.5vw;
    --step-lead: 1.3125rem;
  }
  .bar { gap: 14px; padding: 10px var(--m); }
  .bar__call-long { display: none; }
  .bar__nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: grid; gap: 0; padding: 8px var(--m) 20px;
    background: var(--bg); font-size: var(--step-lead);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out), visibility 0s linear var(--t-ui);
  }
  .bar__nav a { padding: 10px 0; }
  .bar__nav a::after { display: none; }
  .bar.is-open { background: var(--bg); }
  .bar.is-open .bar__nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .bar__menu {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 4px;
    background: none; border: 0; color: inherit; font: inherit; font-size: var(--step-body); cursor: pointer;
  }
  html:not(.js) .bar__menu { display: none; }
  html:not(.js) .bar__nav { display: none; }

  .hero__lede br { display: none; }
  .hero__name { white-space: normal; line-height: 0.84; margin-bottom: calc(20px - 0.12em); }
  .hero__word { display: block; }
  .hero::after { height: 58%; }

  .about { padding-top: 88px; }
  .about__lead { grid-column: 1 / -1; }
  .about__mosaic { margin-top: 48px; }
  .about__photo { grid-column: 1 / -1; aspect-ratio: auto; overflow: visible; background: none; }
  .about__photo img { aspect-ratio: 4 / 3; height: auto; }
  .about__note { position: static; width: auto; padding: 16px 0 0; background: none; color: var(--ink); }
  .about__side { grid-column: 1 / -1; margin-top: 40px; }
  .about__tile { aspect-ratio: 3 / 2; }

  .film__head { display: block; padding-bottom: 28px; }
  .film__body { display: block; padding: 0; }
  .film__bar { display: block; padding: 8px var(--m) 0; }
  .film__toggle { margin-top: 8px; }
  .list__title span:first-child { padding-left: 0; }
  .list__body { margin-top: 56px; }
  .list__name { display: none; }
  .list__table { grid-column: 1 / -1; grid-row: 1; }
  .list__table tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding-bottom: 18px; }
  .list__table th { grid-column: 1 / -1; width: auto; padding: 0 0 2px; font-size: var(--step-small); }
  .list__table td { padding: 0; }
  .list__table td:last-child:empty { display: none; }
  .list__table tr.gap { padding-top: 26px; }
  .list__table tr.gap > * { padding-top: 0; }
  .list__photo { grid-column: 1 / -1; grid-row: 2; justify-self: end; width: 60%; min-width: 0; margin-top: 48px; }

  .motion-ready .show__stage { --fw: min(70vw, calc((100svh - 2 * var(--step-head) - 300px) * 0.8)); }
  .motion-ready .show__frame { top: 42%; }
  .motion-ready .show__half--top { bottom: calc(58% + var(--fw) * 0.625 + 0.1em); }
  .motion-ready .show__half--bottom { top: calc(42% + var(--fw) * 0.625 + 0.08em); }
  .motion-ready .show__caption {
    left: 50%; top: calc(42% + var(--fw) * 0.625 + var(--step-head) * 1.15);
    width: calc(100vw - 2 * var(--m)); text-align: center;
    transform: translate(-50%, 16px);
  }
  .show[data-stage="2"] .show__caption { transform: translate(-50%, 0); }
  .show__frame { grid-template-columns: 1fr; }

  .work__block { display: block; }
  .work__block + .work__block { margin-top: 88px; }
  .work__block .compare { width: calc(100% + var(--m)); margin-left: calc(-1 * var(--m)); aspect-ratio: 4 / 5; }
  .work__cluster { display: flex; flex-direction: column; }
  .work__text { margin-top: 24px; order: 1; }
  .work__small { order: 2; width: 70%; align-self: flex-end; margin-top: 28px; }

  .steps { display: block; }
  .steps__head { margin-bottom: 32px; }
  .steps__stage { display: block; margin: 0; }
  .steps__stage + .steps__stage { margin-top: 56px; }
  .steps__stage p { margin-top: 16px; }
  .steps__stage--2 img { width: 62%; margin-left: auto; }
  .steps__stage--2 p { margin-left: 38%; }
  .steps__stage--3 img { width: 78%; }
  
  .voice { display: block; }
  .voice__portrait { width: 72%; height: auto; min-height: 0; aspect-ratio: 3 / 4; }
  .voice__quote { margin-top: 32px; }
  .voice__quote blockquote { font-size: 1.5rem; }
  .voice__small { width: 44%; margin: 48px 0 0 auto; }

  .slips__head { display: block; }
  .slips__score { margin-top: 20px; }
  .slips__row { margin-top: 48px; }
  .slip { width: 82%; }
  .slips__award { margin-top: 72px; }

  .visit { height: auto; min-height: 0; padding-bottom: 48px; }
  .visit__map { position: relative; height: 70svh; }
  .visit__card { position: relative; top: auto; right: auto; width: auto; margin: -80px var(--m) 0; }
  .visit__btn { min-height: 56px; }
  .visit__credit { position: static; padding: 18px var(--m) 0; }

  .foot { display: block; padding: 96px var(--m) 40px; }
  .foot__card { display: block; padding: 40px 22px 24px; min-height: 0; }
  .foot__card::before { height: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 50' preserveAspectRatio='none'%3E%3Cpath d='M0 50A50 50 0 0 1 100 50A50 50 0 0 1 200 50A50 50 0 0 1 300 50A50 50 0 0 1 400 50A50 50 0 0 1 500 50A50 50 0 0 1 600 50Z' fill='%23ffffff'/%3E%3C/svg%3E"); }
  .foot__msg { padding-right: 76px; }
  .foot__addr { position: static; padding-top: 32px; }
  .foot__stamp { top: 32px; right: 18px; width: 64px; }
  .foot__imprint { margin-top: 40px; }
}