@font-face {
  font-family: "Raleway";
  src: url("./assets/fonts/raleway-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --canvas: #fff;
  --brand-green: #0e4412;
  --ink: var(--brand-green);
  --supporting-ink: var(--brand-green);
  font-family: "Raleway", sans-serif;
  font-synthesis: none;
  font-weight: 400;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-width: 280px; }
body { -webkit-font-smoothing: antialiased; }
p, h1, h2 { margin: 0; }

.scene {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: max(100svh, 44rem, 216vw);
  overflow: clip;
}

.scene__background,
.scene__hand-layer,
.scene__graphics { position: absolute; inset: 0; pointer-events: none; }

.scene__background { z-index: -1; background: var(--canvas); }
.scene__hand-layer { z-index: 0; }
.scene__graphics { z-index: 1; }

/* The photographed layer keeps its original static pose outside the bridge. */
.scene__hand {
  position: absolute;
  display: block;
  width: 92%;
  left: -5%;
  top: -19vw;
  transform: rotate(8deg);
  transform-origin: 0 0;
}

.scene__hand img { display: block; width: 100%; height: auto; user-select: none; }

.scene__brand {
  position: absolute;
  z-index: 2;
  top: 6.4%;
  left: 50%;
  transform: translateX(-50%);
}

.brand {
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  color: var(--supporting-ink);
}

.scene__title-group {
  position: absolute;
  z-index: 2;
  top: 45.6%;
  right: 5%;
  max-width: 90%;
  text-align: right;
}

h1 {
  font-size: clamp(1.75rem, 8.45vw, 2.5rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: normal;
}

h1 span,
.scene__note span { display: block; }

.scene__subtitle {
  margin-top: .65rem;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  color: var(--supporting-ink);
}

.scene__note {
  position: absolute;
  z-index: 2;
  top: 75%;
  left: 12%;
  right: 12%;
  text-align: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: normal;
  color: var(--supporting-ink);
}

@media (min-width: 600px) and (max-width: 899px) {
  .scene { min-height: max(100svh, 48rem); }
  .scene__hand { width: 70%; left: -7%; top: -10%; }
  .scene__title-group { right: 9%; max-width: 85%; }
  h1 { font-size: clamp(2.5rem, 6vw, 3.4rem); }
}

@media (min-width: 900px) {
  .scene { min-height: max(100svh, 48rem); }
  .scene__hand { width: min(46vw, 650px); top: -33%; left: -1.5%; }
  .scene__brand { top: 6.5%; }
  .brand { font-size: .875rem; }
  .scene__title-group { top: 46%; right: 47%; max-width: 46%; }
  h1 { font-size: clamp(2.75rem, 3.6vw, 3.625rem); }
  .scene__subtitle { font-size: 1rem; margin-top: .9rem; }
  .scene__note { top: 75%; font-size: 1rem; }
}

/* Content can grow with increased text size; the image never carries text. */
@media (max-width: 359px) {
  .scene__title-group { right: 5%; max-width: 90%; }
  h1 { font-size: 1.75rem; }
  .scene__note { left: 6%; right: 6%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Reference 2: right-edge hand and an open, annotated left field. */
.scene--preparation { --canvas: #f1f2f1; }
.preparation__heading { position: absolute; z-index: 2; top: 17.8%; left: 10%; right: 7%; }
h2 { font-size: clamp(1.7rem, 7.3vw, 2.3rem); font-weight: 300; line-height: 1.08; letter-spacing: normal; }
h2 span { display: block; }
.preparation__hand { position: absolute; display: block; width: 104%; left: 57%; top: 40%; transform-origin: 85% 55%; }
.preparation__hand img { display: block; width: 100%; height: auto; user-select: none; }
.preparation__diagram { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.preparation__diagram svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.preparation__diagram path, .preparation__diagram circle { stroke: #b4b8b5; stroke-width: .75; vector-effect: non-scaling-stroke; fill: none; }
.preparation__diagram circle { fill: #f1f2f1; }
.preparation__annotations { position: absolute; inset: 0; z-index: 2; }
.annotation { position: absolute; width: 46%; color: var(--supporting-ink); }
.annotation:nth-child(1) { top: 35.4%; left: 10%; }
.annotation:nth-child(2) { top: 54.8%; left: 6%; }
.annotation:nth-child(3) { top: 74%; left: 21%; }
.annotation h3 { display: inline; padding: .12em .35em; border-radius: .35em; background: #edf0f0; color: var(--brand-green); font-size: .75rem; font-weight: 400; line-height: 1.5; }
.annotation p { margin-top: .5rem; font-size: .875rem; line-height: 1.35; }
.sequence__stage { position: relative; }
.sequence--animated .sequence__stage { height: var(--stage-height); overflow: clip; isolation: isolate; }
.sequence--animated .sequence__stage > .scene { position: absolute; inset: 0; min-height: 0; height: 100%; overflow: visible; }
.sequence--animated .scene--preparation { background: transparent; }
.sequence--animated .sequence__stage .scene:not(.scene--introduction) .scene__background { display: none; }
.sequence--animated .sequence__stage .scene__hand-layer { z-index: 3; }
@media (min-width: 600px) and (max-width: 899px) {
  .preparation__hand { width: 88%; left: 60%; top: 37%; }
}
@media (min-width: 900px) {
  .preparation__heading { left: 20%; top: 18%; right: auto; }
  h2 { font-size: clamp(2.75rem, 3.6vw, 3.625rem); }
  .preparation__hand { width: min(45vw, 650px); left: 84%; top: 39%; }
  .preparation__diagram { left: auto; width: calc(100svh * 249 / 458); min-width: calc(48rem * 249 / 458); }
  .annotation { width: 25%; }
  .annotation:nth-child(1) { left: 65%; }
  .annotation:nth-child(2) { left: 60%; }
  .annotation:nth-child(3) { left: 68%; }
  .annotation h3 { font-size: .8125rem; }
  .annotation p { font-size: 1rem; max-width: 18rem; }
}
/* Enlarged text has space to grow. Short windows use ordinary stacked scenes. */
@media (prefers-reduced-motion: reduce) { .sequence__stage { height: auto; } }

/* Reference 3: upper checklist, long leader, one large fingertip below. */
.scene--macro { --canvas: #edf0f0; --macro-width: 164vw; --macro-anchor: .26; --nail-x: 32.6%; }
.macro__heading { position: absolute; z-index: 2; top: 21%; left: 10%; right: 7%; }
.macro__choices { position: absolute; z-index: 2; top: 35.8%; left: 23.5%; right: 7%; margin: 0; padding: 0; list-style: none; color: var(--supporting-ink); font-size: .9375rem; line-height: 1.4; }
.macro__choices li { display: flex; align-items: flex-start; gap: .65rem; }
.macro__choices li + li { margin-top: 1.5rem; }
.macro__choices svg { flex: 0 0 1.125rem; width: 1.125rem; height: 1.125rem; margin-top: .1rem; fill: none; stroke: #858d89; stroke-width: 1; }
.macro__hand { display: block; position: absolute; width: var(--macro-width); left: calc(var(--nail-x) - var(--macro-width) * var(--macro-anchor)); top: calc(74% - var(--macro-width) * .32552); transform-origin: 90% 50%; }
.macro__hand img { display: block; width: 100%; height: auto; user-select: none; }
.macro__leader { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.macro__leader svg { width: 100%; height: 100%; display: block; overflow: visible; }
.macro__leader path { fill: none; stroke: #858d89; stroke-width: .8; vector-effect: non-scaling-stroke; }
.macro__dot { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #7b827e; left: var(--nail-x); top: 74%; transform: translate(-50%, -50%); }
.macro__line-desktop { display: none; }
@media (min-width: 900px) {
  .scene--macro { --macro-width: 78vw; --macro-anchor: .293; --nail-x: 48%; }
  .macro__heading { left: 20%; right: auto; }
  .macro__choices { left: 38%; right: 20%; font-size: 1rem; }
  .macro__choices li + li { margin-top: 1.75rem; }
  .macro__line-mobile { display: none; }
  .macro__line-desktop { display: block; }
}

/* Scenes 04–07 extend references 2–3; reference 4 closes the sequence. */
a { color: inherit; text-underline-offset: .35em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
.editorial { background: #f1f2f1; }
.editorial__heading { position: absolute; top: 18%; left: 10%; right: 7%; z-index: 2; }
.editorial__subtitle { margin-top: 1rem; font-size: 1rem; line-height: 1.4; }
.editorial picture { display: block; position: absolute; }
.editorial picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.prototype-note { position: absolute; left: 10%; right: 7%; bottom: max(5.5%, env(safe-area-inset-bottom)); z-index: 2; font-size: .75rem; line-height: 1.5; color: var(--brand-green); }
.podology__image { width: 106%; right: -27%; top: 28%; }
.editorial .podology__image img { height: auto; }
.scene--works { background: #fff; }
.gallery { position: absolute; top: 34%; left: 50%; width: min(80vw, 34.5svh); transform: translateX(-50%); }
.gallery__viewport { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; touch-action: pan-y; cursor: grab; isolation: isolate; }
.gallery__viewport:active { cursor: grabbing; }
.gallery__slide { position: absolute; inset: 0; margin: 0; }
.gallery__controls { position: relative; margin-top: 1rem; display: flex; gap: 1.25rem; align-items: center; font-size: .8125rem; }
.gallery__controls button { background: transparent; border: 0; border-bottom: 1px solid #b5b9b5; padding: .5rem; min-width: 44px; min-height: 44px; cursor: pointer; font-size: 1.25rem; }
.gallery__controls button:last-child { margin-left: auto; }
.education__image { top: 34%; right: 0; width: 76%; height: 43%; overflow: hidden; }
.editorial .education__image img { object-position: 50% 70%; }
.education__copy { position: absolute; z-index: 2; top: 79%; left: 10%; right: 7%; font-size: .875rem; line-height: 1.5; }
.text-link { display: inline-block; padding: .6rem 0; }
.scene--education .prototype-note { bottom: 3%; }
.scene--materials { background: #edf0f0; }
.materials__image { width: 88%; height: 48%; right: 0; top: 39%; overflow: hidden; }
.editorial .materials__image img { object-position: 55% 82%; }
.scene--contact { background: #343936; color: var(--brand-green); }
.contact__image { inset: 0; z-index: -2; }
.editorial .contact__image img { object-position: 50% 50%; }
.scene--contact::after { content: ''; position: absolute; inset: 0; background: rgb(241 237 234 / 84%); z-index: -1; }
.scene--contact .brand { color: var(--brand-green); }
.contact__heading { position: absolute; top: 22%; left: 8%; right: 8%; text-align: center; }
.contact__heading h2 { font-size: clamp(2.5rem, 10vw, 4rem); }
.contact__heading p { margin-top: 1.1rem; font-size: 1rem; }
.contact__links { position: absolute; top: 69%; left: 10%; right: 10%; text-align: center; }
.contact__booking { display: inline-block; font-size: 1.4rem; font-weight: 300; padding: .75rem 0; text-decoration-thickness: 1px; }
.contact__instagram { display: block; width: fit-content; margin: 1.75rem auto 0; font-size: .875rem; line-height: 1.7; text-decoration: none; }
@media (min-width: 600px) and (max-width: 899px) {
  .podology__image { width: 75%; right: -8%; top: 20%; }
  .education__image { width: 65%; }
  .materials__image { width: 65%; }
}
@media (min-width: 900px) {
  .editorial__heading { left: 20%; right: 10%; }
  .prototype-note { left: 20%; font-size: .8125rem; bottom: 6%; }
  .podology__image { width: min(65vw, 920px); right: -4%; top: 5%; }
  .gallery { top: 28%; left: 64%; width: min(38vw, 39svh); }

  .education__image { width: 40%; height: 64%; top: 22%; right: 4%; }
  .education__copy { left: 20%; right: 48%; top: 49%; font-size: 1rem; }
  .scene--education .prototype-note { bottom: 6%; }
  .materials__image { width: 48%; height: 65%; top: 27%; right: 4%; }
  .contact__image { inset: 0; }
  .editorial .contact__image img { object-position: 50% 48%; }
  .contact__heading { top: 22%; }
  .contact__heading h2 { font-size: 4rem; }
}
/* Keep browser scroll anchoring from competing with the pinned-stage refresh. */
.sequence { overflow-anchor: none; }
@media (min-width: 900px) {
}

/* Keep the approved heading beside the capped H1 photograph on wide screens. */
@media (min-width: 1600px) {
  .scene__title-group { right: calc(100% - 800px); }
}
@media (hover: hover) {
  .gallery__controls button:hover { border-bottom-color: currentColor; }
  .contact__instagram:hover { text-decoration: underline; }
}

/* Motion uses separate photographic, depth and text layers. */
.macro__exit { position: absolute; inset: 0; transform-origin: right center; }
.materials__toggle { display: block; margin-top: .35rem; min-height: 44px; padding: .4rem 0; border: 0; background: none; font: inherit; font-size: .8125rem; text-decoration: underline; text-underline-offset: .35em; cursor: pointer; }
.materials__image img { transform-origin: 65% 68%; }
a, button { transition: opacity 160ms ease, translate 160ms ease; }
a:active, button:active { translate: 0 1px; opacity: .9; }
.gallery__cursor { position: absolute; z-index: 5; padding: .3rem .45rem; color: var(--brand-green); background: #fff; font-size: .75rem; pointer-events: none; opacity: 0; transition: opacity 140ms; white-space: nowrap; }
.gallery__viewport:hover .gallery__cursor { opacity: 1; }
.gallery__viewport.is-dragging { cursor: grabbing; }
.gallery__viewport.is-dragging .gallery__cursor { opacity: 0; }
.motion-debug { position: fixed; left: 8px; bottom: 8px; z-index: 100; max-width: calc(100vw - 16px); padding: 6px 9px; font: 12px/1.4 monospace; color: var(--brand-green); background: #f1f2f1; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { a, button { transition: none; } }

/* Small controls use the existing reference's fine lines and restrained labels. */
.podology__object { position: absolute; inset: 0; pointer-events: none; transform-origin: right bottom; }
.macro__inspection { position: absolute; left: var(--nail-x); top: 74%; transform: translate(-50%, -50%); pointer-events: auto; }
.macro__point { position: relative; display: block; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.macro__point .macro__dot { left: 50%; top: 50%; transition: scale 150ms; }
.macro__point:hover .macro__dot, .macro__point[aria-expanded="true"] .macro__dot { scale: 1.5; }
.macro__caption { position: absolute; top: -4px; left: 44px; padding: 4px 7px; font-size: .875rem; color: var(--brand-green); background: #edf0f0; white-space: nowrap; }
.gallery__viewport.is-dragging .gallery__cursor { opacity: .85; scale: .95; }
.scene-nav { position: fixed; z-index: 10; left: 50%; bottom: max(5px, env(safe-area-inset-bottom)); translate: -50% 0; width: 352px; max-width: calc(100% - 8px); display: flex; color: var(--brand-green); }
.scene-nav a { flex: 1; min-width: 0; padding: 15px 0 10px; text-align: center; font-size: .75rem; line-height: 19px; text-decoration: none; opacity: .6; }
.scene-nav a[aria-current], .scene-nav a:hover, .scene-nav a:focus-visible { opacity: 1; }
.scene-nav a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
.scene-nav__track { position: absolute; top: 4px; left: 12px; right: 12px; height: 1px; background: currentColor; opacity: .55; pointer-events: none; }
.scene-nav__progress { display: block; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; }
.scene-nav--light { color: var(--brand-green); }
.editorial .prototype-note, .scene--education .prototype-note { bottom: max(8%, 70px); }
@media (prefers-reduced-motion: reduce) {
}

/* Education: one photographic composition, four presentation stages. */
.scene--education { overflow: visible; }
.education__stage { position: relative; min-height: max(100svh, 44rem, 216vw); overflow: clip; }
.education__navigation { position: absolute; z-index: 3; left: 10%; top: 28%; width: 56%; display: flex; }
.education__navigation button { position: relative; flex: 1; min-height: 44px; border: 0; background: none; font-size: .8125rem; padding: 12px 0; cursor: pointer; opacity: .55; }
.education__navigation button:hover, .education__navigation button[aria-pressed="true"] { opacity: 1; }
.education__track { position: absolute; height: 1px; left: 0; right: 0; bottom: 0; background: #b8bdb8; }
.education__progress { display: block; width: 25%; height: 1px; background: var(--ink); transform-origin: left; }
.education__caption { position: absolute; z-index: 2; left: 10%; top: 37%; display: flex; align-items: baseline; gap: 20px; font-size: 1.15rem; font-weight: 300; }
.education__caption [data-education-number] { font-size: .75rem; font-weight: 400; }
.scene--education .education__image { top: 44%; height: 32%; touch-action: pan-y; }
.education__image img { transform-origin: 55% 65%; }
@media (min-width: 600px) { .education__stage { min-height: max(100svh, 48rem); } }
@media (min-width: 900px) {
  .education__navigation { left: 20%; top: 37%; width: 24%; }
  .education__caption { left: 20%; top: 49%; font-size: 1.75rem; }
  .scene--education .education__image { top: 22%; height: 64%; width: 45%; right: 4%; }
  .education__copy { top: 65%; right: 50%; }
}

/* Closing scene: the reference's photographic field, outlined marks and open type. */
.scene--contact { min-height: max(100svh, 930px); padding: 100px 8% 85px; display: grid; grid-template-columns: 1fr; align-content: start; gap: 24px; }
.scene--contact::after { background: rgb(241 237 234 / 84%); }
.scene--contact .scene__brand { top: 35px; }
.contact__heading { position: relative; inset: auto; text-align: left; }
.contact__heading h2 { font-size: 3rem; }
.contact__heading p { margin-top: 6px; font-size: .875rem; }
.contact__details { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 12px; }
.contact__row { display: flex; align-items: start; gap: 12px; min-height: 44px; padding: 5px 0; text-decoration: none; font-size: .875rem; line-height: 1.5; }
.contact__address, .contact__phone { grid-column: 1 / -1; }
.contact__label { display: block; margin-bottom: 4px; font-size: .6875rem; letter-spacing: .06em; opacity: .75; }
.contact__icon { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms ease, opacity 160ms ease; }
.contact__row .contact__icon { margin-top: 2px; }
.contact__instagram { margin: 0; width: auto; }
.contact__links { position: relative; inset: auto; text-align: left; }
.contact__booking { display: flex; justify-content: space-between; align-items: center; max-width: 270px; padding: 12px 0; min-height: 44px; border-bottom: 1px solid #c0c5c0; text-decoration: none; font-size: 1.3rem; }
.contact__map-group { min-width: 0; }
.contact__map-frame { position: relative; height: 250px; }
.contact__map { height: 100%; width: 100%; background: #e0e3dd; color: var(--brand-green); z-index: 0; }
.contact__map-meta { display: flex; justify-content: space-between; align-items: start; gap: 16px; font-size: .6875rem; line-height: 1.5; }
#map-status { padding-top: 12px; max-width: 210px; }
.contact__route { display: flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; font-size: .8125rem; }
.contact__map--locked { pointer-events: none; }
.contact__map-frame:has(.contact__map--locked) { touch-action: pan-y; }
.contact__address.is-emphasized > span, .contact__row:hover > span, .contact__row:focus-visible > span { text-decoration: underline; text-underline-offset: 5px; }
.contact__row:hover .contact__icon, .contact__row:focus-visible .contact__icon { transform: translateY(-2px); }
@media (min-width: 900px) {
  .scene--contact { min-height: max(100svh, 800px); padding: 15vh 7% 110px 13%; grid-template-columns: 34% 1fr; grid-template-rows: auto auto auto; column-gap: 9%; row-gap: 32px; align-content: center; }
  .contact__heading h2 { font-size: 4.1rem; }
  .contact__details { grid-column: 1; row-gap: 24px; }
  .contact__row { font-size: .9375rem; }
  .contact__links { grid-column: 1; }
  .contact__map-group { grid-column: 2; grid-row: 1 / 4; align-self: center; }
  .contact__map-frame { height: min(58vh, 560px); }
  .contact__image img { object-position: 50% 45%; }
}
@media (prefers-reduced-motion: reduce) { .contact__icon { transition: none; } }

/* Shared photo layers retain the reference-led media footprint. */
.education__image, .materials__image { position: absolute; display: block; overflow: hidden; }
[data-media-slide] { position: absolute; inset: 0; margin: 0; }
[data-media-slide] img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.education__slide:nth-child(1) img { object-position: 55% 68%; }
.education__slide:nth-child(2) img { object-position: 50% 70%; }
.education__slide:nth-child(3) img { object-position: 50% 62%; }
.education__slide:nth-child(4) img { object-position: 50% 57%; }
.education__hint { position: absolute; top: 33.5%; left: 10%; font-size: .6875rem; color: var(--supporting-ink); }
.materials__image { cursor: grab; touch-action: pan-y; }
.materials__image.is-dragging { cursor: grabbing; }
.materials__image img { transition: transform 180ms ease; }
.materials__navigation { position: absolute; left: 10%; right: 10%; top: 31%; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-size: .8125rem; }
.materials__navigation button { border: 0; border-bottom: 1px solid #b5b9b5; padding: 10px; min-width: 44px; min-height: 44px; background: none; cursor: pointer; font-size: 1.15rem; }
.materials__navigation button:disabled { opacity: .35; cursor: default; }
.materials__navigation p { width: 100%; margin: 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .materials__image:hover img { transform: scale(1.025); } }
@media (min-width:900px) { .education__hint { left: 20%; top: 43%; } .materials__navigation { left: 20%; right: 55%; top: 44%; gap: 18px; } }
.contact__details { grid-template-columns: 1.25fr 1fr; column-gap: 12px; }
.contact__hours { font-size: .8125rem; }
.contact__hours > span > span:last-child { white-space: nowrap; }
.contact__map-meta { flex-wrap: wrap; gap: 0 12px; }
.contact__route { font-size: .6875rem; }
.contact__phone:hover .contact__icon, .contact__phone:focus-visible .contact__icon { transform: translateY(-1px) rotate(-6deg); }
@media (prefers-reduced-motion: reduce) { .materials__image img { transition: none; } }
/* Reserve the bottom chapter controls after adding the full weekly schedule. */
@media (max-width: 899px) {
  .scene--contact { padding-top: 88px; gap: 20px; }
  .contact__map-frame { height: 210px; }
  .contact__map-meta { display: grid; grid-template-columns: 1fr; }
  .contact__route { grid-row: 1; justify-self: start; }
  #map-status { grid-row: 2; padding-top: 0; max-width: none; font-size: .625rem; }
}

/* Google owns iframe controls; MANiLAB interaction stays outside its surface. */
iframe.contact__map { display: block; border: 0; }
.contact__map-line { position: absolute; left: 0; right: 0; height: 1px; background: #b5beb5; transform-origin: left center; pointer-events: none; }
.contact__map-line--top { top: 0; z-index: 1; }
.contact__map-line--bottom { bottom: 0; z-index: 1; transform-origin: right center; }
.contact__map-frame.is-emphasized .contact__map-line { background: #fff; }
.contact__map-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin-bottom: 12px; }
.contact__map-tools[hidden] { display: none; }
.contact__map-toggle { min-height: 44px; padding: 8px 0; color: inherit; font: inherit; font-size: .75rem; border: 0; border-bottom: 1px solid currentColor; background: transparent; cursor: pointer; }
.contact__map-hint { font-size: .625rem; line-height: 1.5; opacity: .8; }
.contact__map-meta #map-status { min-height: 44px; display: inline-flex; align-items: center; padding-top: 0; text-decoration: none; }
@media (max-width: 899px) { .scene--contact { padding-bottom: 100px; } }

@media (max-width: 899px) {
  .contact__map-meta { display: flex; align-items: center; justify-content: space-between; }
  .contact__route { order: 1; }
  .contact__map-tools { order: 2; max-width: 49%; margin: 0; }
  .contact__map-toggle { font-size: .6875rem; }
  .contact__map-hint { display: none; }
  .contact__map-meta #map-status { order: 3; width: 100%; }
}

/* Official raster signature: original geometry and serif belong only to the brand asset. */
.site-header { position: absolute; z-index: 25; top: 16px; left: 24px; }
.site-header a { display: flex; align-items: center; justify-content: center; width: 60px; height: 48px; background: transparent; }
.site-header img { display: block; width: 42px; height: auto; }
.opening-logo { position: absolute; z-index: 2; top: 22px; left: 50%; transform: translateX(-50%); width: 164px; }
.opening-logo img { display: block; width: 100%; height: auto; }
.contact__heading { display: flex; align-items: center; gap: 18px; }
.contact__signature { width: 158px; padding: 10px 8px; background: transparent; flex: 0 0 auto; }
.contact__signature img { display: block; width: 100%; height: auto; }
.contact__heading h2 { font-size: 1.5rem; }
.contact__hours { grid-column: 1 / -1; }
.hours-grid { display: grid; grid-template-columns: 76px auto; column-gap: 18px; row-gap: 5px; margin: 0; font-size: .8125rem; line-height: 1.5; }
.hours-grid dt, .hours-grid dd { margin: 0; white-space: nowrap; }
.contact__instagram { grid-column: 1 / -1; }
.contact__location { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin: 0 0 20px; font-size: .625rem; letter-spacing: .05em; }
.contact__location p { grid-column: 1 / -1; font-size: .8125rem; letter-spacing: normal; margin: 0; }
.contact__instagram:hover > span, .contact__phone:hover > span { text-decoration-thickness: 1px; text-underline-offset: 5px; }
@media (min-width: 900px) {
 .opening-logo { top: 26px; width: 190px; }
 .contact__signature { width: 190px; }
 .contact__heading { gap: 24px; }
 .contact__heading h2 { font-size: 1.6rem; }
 .contact__details { row-gap: 14px; }
}
@media (max-width: 899px) {
 .site-header { top: 12px; left: 14px; }
 .site-header a { width: 48px; height: 44px; }
 .site-header img { width: 34px; }
 .scene--contact { padding-top: 78px; gap: 18px; min-height: 100svh; }
 .contact__heading { gap: 16px; }
 .contact__signature { width: 152px; }
 .contact__heading h2 { font-size: 1.3rem; }
 .contact__location { margin-top: 4px; margin-bottom: 16px; gap: 8px; }
 .contact__map-frame { height: 230px; }
}
/* Keep the complete signature clear of H1's sleeve on narrow screens. */
@media (max-width: 899px) { .opening-logo { left: auto; right: 16px; top: 22px; transform: none; width: 150px; } }

/* Brand ink sampled from the authoritative JPG: RGB 14, 68, 18. */
.scene-nav a { opacity: .85; }
.education__navigation button { opacity: .8; }
.contact__label, .contact__map-hint { opacity: .9; }
.contact__map-line, .contact__map-frame.is-emphasized .contact__map-line { background: var(--brand-green); }

/* Regression fixes: true alpha assets, isolated map reveal, small viewport safety. */
.contact__map-reveal { height: 100%; width: 100%; overflow: hidden; }
.contact__map-group { position: relative; z-index: 1; }
.contact__heading { flex-wrap: wrap; }
.scene-nav { overflow-x: auto; scrollbar-width: none; }
.scene-nav::-webkit-scrollbar { display: none; }
.scene-nav a { flex: 1 0 44px; min-height: 44px; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; }
.site-header { top: max(12px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); }
@media (max-width: 359px) { .contact__heading { gap: 10px; } .contact__signature { width: 142px; } .contact__heading h2 { font-size: 1.15rem; } }
/* Keep the opening caption above chapter controls on short, narrow phones. */
@media (max-width: 359px) and (max-height: 649px) { .scene__note { top: 62%; } }

/* CTA feedback belongs to the complete control, never a decorative arrow. */
.cta-link { position: relative; text-decoration: none; transition: opacity 160ms ease-out; }
.cta-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--brand-green); transform: scaleX(.28); transform-origin: left center; transition: transform 160ms ease-out; pointer-events: none; }
.contact__booking.cta-link::after { bottom: 0; }
@media (hover: hover) { .cta-link:hover::after { transform: scaleX(1); } }
.cta-link:focus-visible { outline: 1px solid var(--brand-green); outline-offset: 4px; }
.cta-link:focus-visible::after, .cta-link:active::after { transform: scaleX(1); }
.cta-link:active { opacity: .75; }
@media (prefers-reduced-motion: reduce) { .cta-link, .cta-link::after { transition: none; } }

/* Real photographs use the existing media windows and transition layers. */
.editorial .education__image--real img { object-position: 50% 50%; }
.editorial .materials__image--real img { object-fit: contain; object-position: 50% 50%; }

/* Works: one bounded media window, independent of source aspect ratio. */
.gallery__media { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; user-select: none; }
.gallery__play { position: absolute; left: .75rem; bottom: .75rem; z-index: 2; min-height: 44px; padding: .45rem .7rem; border: 1px solid currentColor; background: #f1f2f1; color: var(--brand-green); font-size: .8125rem; cursor: pointer; transition: opacity 160ms; }
.gallery__play:hover { opacity: .85; }
.gallery__play:active { opacity: .7; }
.gallery__play:focus-visible { outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .gallery__play { transition: none; } }

/* Local album controls; the four education stages retain their scroll positions. */
.education__album-controls { position: absolute; z-index: 5; right: 0; bottom: 0; display: flex; align-items: center; background: var(--paper, #f1f2f1); color: var(--brand-green); font-size: .75rem; }
.education__album-controls button { border: 0; border-bottom: 1px solid transparent; background: none; color: inherit; min-width: 44px; min-height: 44px; padding: 8px; cursor: pointer; font: inherit; font-size: 1.1rem; transition: opacity 160ms; }
.education__album-controls button:hover { border-bottom-color: currentColor; }
.education__album-controls button:active { opacity: .65; }
.education__album-controls button:focus-visible { outline: 1px solid currentColor; outline-offset: -3px; }
.education__album-controls button:disabled { opacity: .4; cursor: default; }
.materials__caption { position: absolute; top: 88%; left: 10%; right: 10%; font-size: .8125rem; line-height: 1.5; }
.materials__caption p { margin: 0; }
.materials__caption [data-materials-category] { margin-top: .25rem; opacity: .85; }
@media (min-width: 900px) { .materials__caption { top: 55%; left: 20%; right: 55%; } }
@media (prefers-reduced-motion: reduce) { .education__album-controls button { transition: none; } }

/* Chapter 04 continues with real cases; P1 keeps its original composition. */
.podology__cases-link { position: absolute; left: 10%; top: 78%; min-height: 44px; display: inline-flex; align-items: center; font-size: .875rem; z-index: 2; }
.scene--cases { background: #f1f2f1; }
.cases__modes { position: absolute; left: 10%; top: 28%; display: flex; gap: 24px; }
.cases__modes button, .cases__endpoints button { min-height: 44px; padding: 8px 0; border: 0; border-bottom: 1px solid transparent; background: none; cursor: pointer; font-size: .8125rem; }
.cases__modes button[aria-pressed=true], .cases__modes button:hover, .cases__endpoints button:hover { border-bottom-color: currentColor; }
.cases__modes button:active, .cases__endpoints button:active { opacity: .7; }
.cases__gallery { position: absolute; top: 36%; right: 6%; width: min(84vw, 44svh); }
.cases__viewport { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; touch-action: pan-y; }
.cases__viewport > figure > img, .cases__viewport > figure > video { display: block; width: 100%; height: 100%; object-fit: contain; }
.comparison { --split: 50%; position: absolute; inset: 0; touch-action: pan-y; cursor: ew-resize; user-select: none; }
.comparison img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #f1f2f1; pointer-events: none; }
.comparison__before { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.comparison__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.comparison__line { position: absolute; left: var(--split); top: 0; bottom: 0; width: 1px; background: var(--brand-green); box-shadow: 1px 0 #f1f2f1; pointer-events: none; }
.comparison__line > span { position: absolute; top: 50%; left: 0; translate: -50% -50%; width: 36px; height: 44px; border: 1px solid var(--brand-green); background: #f1f2f1; }
.comparison__line > span::after { content: ''; position: absolute; inset: 12px 12px; border-left: 1px solid var(--brand-green); border-right: 1px solid var(--brand-green); }
.comparison:focus-within { outline: 2px solid var(--brand-green); outline-offset: -2px; }
.comparison__label { position: absolute; top: 8px; padding: 5px 8px; background: #f1f2f1; font-size: .6875rem; pointer-events: none; }
.comparison__label--before { left: 8px; }.comparison__label--after { right: 8px; }
.cases__copy { position: absolute; left: 10%; right: 8%; top: max(85%, calc(36% + min(84vw, 44svh) + 76px)); font-size: .8125rem; line-height: 1.5; }
.cases__copy [data-cases-hint] { margin-top: 4px; font-size: .75rem; }
.cases__endpoints { display: flex; gap: 24px; }.cases__endpoints[hidden] { display: none; }
.cases__endpoints button { min-width: 44px; text-align: left; }
.education__slide > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.education__slide .gallery__play { left: 0; bottom: 0; margin: 0; }
.scene--gift { background: #f1f2f1; }
.gift__reveal { position: absolute; right: 6%; top: 36%; width: 78%; }
.gift__paper { position: relative; aspect-ratio: 1.5; padding: 8%; background: #fff; border: 1px solid rgb(14 68 18 / .25); transform-origin: center; }
.gift__mark { display: block; width: 26%; height: auto; }
.gift__name { position: absolute; right: 8%; top: 38%; font-size: clamp(.8rem, 3.2vw, 1.4rem); font-weight: 300; line-height: 1.25; letter-spacing: .025em; }
.gift__line { position: absolute; left: 8%; right: 8%; bottom: 24%; height: 1px; background: var(--brand-green); opacity: .45; transform-origin: left; }
.gift__city { position: absolute; left: 8%; bottom: 10%; font-size: .625rem; letter-spacing: .09em; }
.gift__copy { position: absolute; left: 10%; right: 10%; top: 67%; font-size: .875rem; line-height: 1.5; }
.gift__details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; width: fit-content; border-bottom: 1px solid var(--brand-green); list-style: none; }
.gift__details summary::-webkit-details-marker { display: none; }
.gift__details summary::after { content: '+'; margin-left: 24px; }.gift__details[open] summary::after { content: '−'; }
.gift__answer { margin-top: 16px; max-width: 30ch; }.gift__cta { margin-top: 12px; }
.contact__privacy { display: block; width: fit-content; margin-top: 14px; font-size: .6875rem; }
.scene-nav { width: 396px; }
@media (min-width: 600px) and (max-width: 899px) { .cases__gallery { right: 12%; }.gift__reveal { width: 65%; } }
@media (min-width: 900px) {
  .podology__cases-link { left: 20%; top: 63%; }
  .cases__modes { left: 20%; top: 36%; }
  .cases__gallery { top: 28%; right: 8%; width: min(37vw, 50svh, 540px); }
  .cases__copy { top: 52%; left: 20%; right: 52%; }
  .gift__reveal { top: 33%; right: 7%; width: 43%; max-width: 750px; }
  .gift__copy { top: 51%; left: 20%; right: 54%; }
  .gift__name { font-size: clamp(1rem, 1.7vw, 1.8rem); }
}
@media (max-width: 899px) and (max-height: 740px) {
 .scene--cases { min-height: 850px; }.cases__gallery { width: min(80vw, 328px); top: 35%; }.cases__copy { top: 82%; }
 .scene--gift { min-height: 800px; }
}
@media (max-width: 599px) {
 .scene--gift { min-height: max(100svh, 800px, 165vw); }
 .gift__copy { top: max(67%, calc(36% + 52vw + 32px)); }
}
@media (min-width: 600px) and (max-width: 899px) {
 .scene--gift { min-height: max(100svh, 880px, 120vw); }
 .gift__copy { top: max(67%, calc(36% + 43.334vw + 32px)); }
}
@media (prefers-reduced-motion: reduce) { .gift__paper { transform: none; } }

/* Nail controls occupy the existing photograph/leader composition. */
.scene--macro { min-height: max(100svh, 560px); --nail-y: 69%; }
.macro__hand { top: calc(var(--nail-y) - var(--macro-width) * .32552); }
.macro__heading { top: 15%; }
.macro__choices { top: 31%; left: 10%; right: 12%; max-width: 31ch; font-size: .9375rem; line-height: 1.55; padding: 0; }
.nail__lines { position: absolute; inset: 0; overflow: visible; }
.macro__leader .nail__lines path { stroke: var(--brand-green); opacity: .28; transition: opacity 180ms; stroke-width: .7; }
.macro__leader .nail__lines path.is-active { opacity: .8; }
.nail__hotspot { position: absolute; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--brand-green); cursor: pointer; pointer-events: auto; }
.nail__marker { position: absolute; left: 19px; top: 19px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-green); opacity: .55; transition: transform 180ms, opacity 180ms; }
.nail__hotspot[aria-pressed=true] .nail__marker, .nail__hotspot.is-preview .nail__marker { transform: scale(1.3); opacity: 1; }
.nail__label { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; justify-content: center; min-height: 44px; min-width: 68px; font-size: .6875rem; line-height: 1.6; letter-spacing: .035em; text-align: center; opacity: .6; white-space: nowrap; transition: opacity 180ms; }
.nail__label > span { font-size: .625rem; }
.nail__hotspot[aria-pressed=true] .nail__label, .nail__hotspot.is-preview .nail__label, .nail__hotspot:focus-visible .nail__label { opacity: 1; }
.nail__hotspot:focus-visible { outline: 1px solid var(--brand-green); outline-offset: 2px; }
@media (min-width: 600px) and (max-width: 899px) { .scene--macro { --macro-width: 130vw; --nail-x: 37%; } }
@media (min-width: 900px) {
 .scene--macro { --nail-y: 74%; }
 .macro__heading { top: 18%; }
 .macro__choices { top: 35%; left: 20%; right: auto; max-width: 34ch; font-size: 1rem; }
 .nail__label { font-size: .8125rem; }.nail__label > span { font-size: .6875rem; }
}
@media (prefers-reduced-motion: reduce) { .nail__marker, .nail__label, .macro__leader .nail__lines path { transition: none; } }

/* Certificate uses content flow, so copy/disclosure never depends on a fixed canvas. */
.scene--gift { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; min-height: 100svh; padding: clamp(72px, 12svh, 120px) 10% 100px; align-content: center; overflow: visible; }
.scene--gift > .editorial__heading, .scene--gift .gift__reveal, .scene--gift .gift__copy { position: relative; inset: auto; min-width: 0; }
.scene--gift > .editorial__heading h2 { font-size: clamp(1.5rem, 6.6vw, 2.8rem); line-height: 1.12; overflow-wrap: normal; }
.scene--gift .gift__reveal { width: 100%; max-width: 750px; justify-self: end; }
.scene--gift .gift__copy { font-size: .875rem; line-height: 1.65; max-width: 38ch; }
.gift__intro { margin-bottom: 12px; }
.gift__answer { max-width: none; }.gift__answer p + p { margin-top: 14px; }
.gift__cta { font-size: .75rem; letter-spacing: .035em; line-height: 1.6; margin-top: 16px; }
.scene--gift .gift__name { font-size: clamp(.7rem, 3vw, 1.4rem); }
@media (min-width: 600px) and (max-width: 1023px) {
 .scene--gift { gap: 36px; padding-left: 10%; padding-right: 8%; }
 .scene--gift .gift__reveal { width: 78%; }
 .scene--gift > .editorial__heading h2 { font-size: clamp(2rem, 4.5vw, 2.8rem); }
}
@media (min-width: 1024px) {
 .scene--gift { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); column-gap: 5vw; row-gap: 34px; padding: 12svh 7% 100px 20%; }
 .scene--gift > .editorial__heading { grid-column: 1 / -1; }
 .scene--gift > .editorial__heading h2 { font-size: clamp(2rem, 3.4vw, 3.5rem); }
 .scene--gift .gift__reveal { grid-column: 2; grid-row: 2; align-self: center; }
 .scene--gift .gift__copy { grid-column: 1; grid-row: 2; align-self: center; }
 .scene--gift .gift__name { font-size: clamp(.8rem, 1.45vw, 1.8rem); }
}
.macro__leader .nail__lines .nail__highlight { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .8; transition: stroke-dashoffset 180ms; }
.macro__leader .nail__lines .nail__highlight.is-active { stroke-dashoffset: 0; }
.nail__label { font-size: .75rem; }
@media (min-width: 900px) { .nail__label { font-size: .8125rem; } }
@media (prefers-reduced-motion: reduce) { .macro__leader .nail__lines .nail__highlight { transition: none; } }
.nail__exit { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
/* Bound GSAP's cached pin width while its existing resize debounce rebuilds. */
.sequence > .pin-spacer { max-width: 100%; }
.sequence__stage { max-width: 100vw !important; }

/* Optional photographic experiences stay inside the approved media windows. */
.experience-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.experience-canvas[hidden] { display: none; }
.hand-canvas { z-index: 3; }
.webgl-hand-active [data-hand="H2"] img, .webgl-hand-active [data-hand="H3"] img { visibility: hidden !important; }
.product-canvas { z-index: 3; }
.product-webgl.product-active > figure:first-child img { opacity: 0; }
.product-active { cursor: ew-resize; }
.product-toggle { display: flex; width: fit-content; margin: 0 0 8px; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; }
.materials__image > figure > video { width: 100%; height: 100%; display: block; object-fit: contain; }
.materials__caption { top: 87%; }
@media (min-width: 900px) { .materials__caption { top: 55%; } }
@media (max-width: 899px) { .scene--materials { min-height: max(100svh, 820px); } }
.gift__paper { transition: border-color 160ms ease; }
.gift__reveal:active .gift__paper { border-color: var(--brand-green); }
@media (prefers-reduced-motion: reduce) { .experience-canvas { display: none; }.gift__paper { transition: none; } }

@media (max-width: 899px) {
  .scene--materials .materials__image { height: 42%; }
  .materials__caption { top: 82%; }
}

/* Mobile hero clearance is positional; GSAP remains the sole transform owner. */
@media (max-width: 599px) {
  .scene--introduction .scene__title-group { right: 12px; top: calc(45.6% + 28px); }
}

/* Targeted composition corrections: intro, preparation and education only. */
.scene--introduction .scene__title-group { z-index: 4; }
.preparation__annotations { inset: 36% auto auto 20%; width: min(35%, 29rem); display: grid; gap: 1.75rem; }
.preparation__annotations .annotation { position: relative; inset: auto; width: auto; }
.annotation h3 { display: inline-block; margin: 0; padding: .18em .5em; border: 1px solid rgb(14 68 18 / 12%); border-radius: 3px; background: rgb(14 68 18 / 7%); font-size: .75rem; line-height: 1.5; }
.annotation p { max-width: 35ch; margin-top: .55rem; line-height: 1.45; }
@media (max-width: 899px) {
  .scene--preparation { min-height: max(100svh, 780px); }
  .preparation__heading { top: 10%; left: 8%; right: 8%; }
  .preparation__annotations { inset: 24% 8% auto; width: auto; gap: 1.25rem; }
  .annotation h3 { font-size: .6875rem; }
  .annotation p { max-width: 36ch; font-size: .875rem; }
  /* Share the SVG coordinate scale with the cutout, including its transparent margin.
     Keep the complete visible arc above navigation and below the three text groups.
     Animated layouts use the stable stage height rather than Safari toolbar height. */
  .scene--preparation { --preparation-visual-width: min(80vw, calc((var(--stage-height, 100svh) * .76 - 388px) * 1.245)); }
  .preparation__hand {
    top: calc(100% - 72px - var(--preparation-visual-width) * .7157);
    left: calc(100% - var(--preparation-visual-width) * .48 + 12px);
    width: calc(var(--preparation-visual-width) * .88);
  }
  .preparation__diagram {
    inset: auto 0 72px auto; width: var(--preparation-visual-width); min-width: 0;
    height: calc(var(--preparation-visual-width) * 355 / 249); overflow: visible;
  }
  .preparation__diagram svg { height: calc(var(--preparation-visual-width) * 458 / 249); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .preparation__annotations { top: 25%; width: 64%; gap: 1.6rem; }
  .annotation h3 { font-size: .8125rem; }
  .annotation p { font-size: 1rem; }
  .preparation__hand { top: 66%; left: 60%; width: 68%; }
  .preparation__diagram { inset: calc(66% - 76vw) 0 50px auto; width: 100%; height: auto; overflow: hidden; }
  .preparation__diagram svg { height: calc(100vw * 458 / 249); }
}

/* One grid owns the education layout; media keeps its existing reveal and deck. */
.scene--education { min-height: 100svh; }
.scene--education .education__stage {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  width: min(84%, 1120px); margin-inline: auto;
  min-height: 100svh; padding: clamp(64px, 9svh, 108px) 0 92px;
  gap: 20px; align-content: center; overflow: visible;
}
.scene--education .education__stage > .editorial__heading,
.scene--education .education__navigation,
.scene--education .education__caption,
.scene--education .education__image,
.scene--education .education__copy {
  position: relative; inset: auto; width: auto; min-width: 0; grid-column: 1 / -1;
}
.scene--education .education__navigation { max-width: 22rem; }
.scene--education .education__image { grid-column: 1 / 12; height: clamp(240px, 35svh, 440px); }
.scene--education .education__copy { max-width: 36ch; }
@media (min-width: 900px) {
  .scene--education .education__stage {
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
    column-gap: clamp(32px, 4vw, 64px); row-gap: 24px;
    padding: 12svh 0 10svh;
  }
  .scene--education .education__stage > .editorial__heading { grid-column: 1; grid-row: 1; }
  .scene--education .education__navigation { grid-column: 1; grid-row: 2; align-self: end; }
  .scene--education .education__caption { grid-column: 1; grid-row: 3; }
  .scene--education .education__copy { grid-column: 1; grid-row: 4; align-self: start; }
  .scene--education .education__image { grid-column: 2; grid-row: 1 / 5; height: clamp(420px, 64svh, 680px); align-self: center; }
}

/* Bring the lateral hand into the same field as its annotations on wide screens. */
@media (min-width: 900px) {
  .preparation__hand { left: 62%; top: calc(54% - min(13.65vw, 196.7px)); width: min(43vw, 619px); }
  .preparation__diagram { left: 36%; right: auto; width: 46%; min-width: 0; }
  .annotation p { max-width: 40ch; }
}

/* Works and clinical cases share the approved education grid, keeping their own media. */
.scene--works, .scene--cases {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px; align-content: center; min-height: 100svh;
  padding: clamp(64px, 9svh, 108px) max(8%, calc((100% - 1120px) / 2)) 92px;
}
.scene--works > .editorial__heading, .scene--works .gallery,
.scene--cases > .editorial__heading, .scene--cases .cases__modes,
.scene--cases .cases__gallery, .scene--cases .cases__copy {
  position: relative; inset: auto; width: auto; min-width: 0; grid-column: 1 / -1;
}
.scene--works .gallery { grid-column: 1 / 12; transform: none; }
.scene--works .gallery__viewport { aspect-ratio: auto; height: clamp(320px, 49svh, 520px); }
.scene--works .gallery__controls {
  position: absolute; right: 0; bottom: 0; z-index: 4; margin: 0;
  gap: 16px; background: #fff; padding: 0 4px;
}
.scene--works .gallery__controls button { border-bottom-color: transparent; }
.scene--works .gallery__controls button:last-child { margin-left: 0; }
.scene--works .gallery__controls button:hover { border-bottom-color: currentColor; }
.scene--cases .cases__gallery { grid-column: 1 / 12; width: min(100%, 52svh); }
.scene--cases .cases__copy { max-width: 36ch; font-size: .875rem; }
.scene--cases .cases__copy [data-cases-hint] { font-size: .875rem; }
@media (min-width: 900px) {
  .scene--works, .scene--cases {
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
    column-gap: clamp(32px, 4vw, 64px); row-gap: 24px; padding-top: 12svh; padding-bottom: 10svh;
  }
  .scene--works > .editorial__heading { grid-column: 1; grid-row: 1; align-self: start; }
  .scene--works .gallery { grid-column: 2; grid-row: 1; }
  .scene--works .gallery__viewport { height: clamp(420px, 64svh, 680px); }
  .scene--cases > .editorial__heading { grid-column: 1; grid-row: 1; align-self: start; }
  .scene--cases .cases__modes { grid-column: 1; grid-row: 2; align-self: center; }
  .scene--cases .cases__copy { grid-column: 1; grid-row: 3; align-self: start; }
  .scene--cases .cases__gallery { grid-column: 2; grid-row: 1 / 4; width: min(100%, 60svh); }
}
/* Keep the approved original foot as an edge-entering cutout. */
.scene--podology > .editorial__heading { left: max(8%, calc((100% - 1120px) / 2)); }
.scene--podology .podology__cases-link { left: max(8%, calc((100% - 1120px) / 2)); }
@media (min-width: 900px) {
  .scene--podology .podology__image { width: min(55vw, 760px); right: 0; top: 2%; }
}