/* Yuzuki: readable type, generous controls, and layouts that reflow. */
/* Brand tokens are shared in assets/yuzuki-design.css. */
* { box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1.1875rem/1.7 var(--sans); }
a { color: inherit; text-decoration: none; text-underline-offset: .22em; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
:where(a, button, summary):focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
.visit :focus-visible, .announcement :focus-visible { outline-color: var(--paper); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; overflow-wrap: anywhere; }
p { color: var(--muted); }
em { font-weight: 500; }
:where(p, a, button, summary, small, .eyebrow, .values span, .image-caption, .visit-meta, .footer-bottom) { overflow-wrap: anywhere; }
.announcement { min-height: 3rem; padding: .65rem 6%; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; align-items: center; background: var(--bronze); color: var(--paper); font-size: 1rem; letter-spacing: .01em; text-align: center; }
.announcement span { font-size: .875rem; letter-spacing: .08em; }
header { min-height: 7.5rem; padding: 1.25rem 6%; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; border-bottom: 1px solid var(--line); background: var(--paper); }
.brand { display: flex; max-width: 100%; min-width: 0; flex-shrink: 1; gap: .8rem; align-items: center; letter-spacing: .15em; font: 500 2rem/1.2 var(--serif); }
.brand > span { min-width: 0; overflow-wrap: anywhere; }
.brand small { display: block; text-align: center; font: 500 .8125rem/1.6 var(--sans); letter-spacing: .23em; margin-top: .25rem; }
.moon { display: block; flex-shrink: 0; width: 2.2rem; height: 2.2rem; border: 1px solid var(--ink); border-radius: 50%; position: relative; overflow: hidden; }
.moon:after { content: ''; position: absolute; width: 2rem; height: 2rem; background: var(--paper); border-radius: 50%; left: .7rem; top: -.3rem; border: 1px solid var(--ink); }
nav { margin: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; font-size: 1.0625rem; font-weight: 500; }
nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .35rem .2rem; }
nav a:hover { text-decoration: underline; }
.button { display: inline-flex; justify-content: space-between; gap: 1.5rem; align-items: center; min-height: 3.25rem; background: var(--bronze); color: var(--paper); padding: .9rem 1.5rem; font-size: 1.0625rem; line-height: 1.5; font-weight: 500; border: 1px solid var(--bronze); transition: background .2s; }
.button:hover { background: #555d49; }
.button span { font-size: 1.5rem; }
.button.small { padding: .8rem 1.25rem; }
.menu { display: none; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6%; padding: 3.5rem 6%; position: relative; max-width: 1600px; margin: auto; align-items: start; }
.hero-copy { padding-top: 1.75rem; min-width: 0; }
.eyebrow { font-size: .9375rem; letter-spacing: .08em; line-height: 1.6; display: flex; gap: .7rem; align-items: center; color: var(--muted); font-weight: 600; }
.eyebrow > span { flex-shrink: 0; width: 1.2rem; height: 1px; background: var(--copper); }
h1 { font: 500 clamp(4rem, 7vw, 7rem)/1.02 var(--serif); letter-spacing: -.035em; margin: 1.75rem 0; }
h1 em, h2 em { color: var(--accent); }
h2 { font: 500 clamp(2.75rem, 4.4vw, 4.0625rem)/1.12 var(--serif); letter-spacing: -.025em; }
.hero-copy > p { max-width: 30rem; font-size: 1.1875rem; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: 2rem; }
.text-link { display: inline-flex; gap: 1rem; align-items: center; min-height: 2.75rem; font-size: 1.0625rem; line-height: 1.6; text-decoration: underline; text-decoration-thickness: 1px; padding: .5rem 0; }
.text-link:hover { text-decoration-thickness: 2px; }
.hero-note { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.25rem; max-width: 30rem; font-size: 1rem; color: var(--muted); display: flex; gap: .8rem; align-items: center; }
.tiny-moon { font-size: 1.75rem; color: var(--copper); }
.hero-art { position: relative; padding: .75rem; border: 1px solid #b8bcaa; min-width: 0; }
.hero-art img { width: 100%; aspect-ratio: 4/4.3; object-fit: cover; display: block; }
.image-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; font-size: .875rem; letter-spacing: .035em; line-height: 1.6; padding-top: .8rem; }
.image-caption span { color: var(--muted); }
.image-label { display: block; width: fit-content; margin-top: .5rem; background: var(--paper); padding: .15rem 0; font-size: .875rem; color: var(--muted); }
.vertical-note { position: absolute; right: 1.3%; top: 50%; writing-mode: vertical-rl; font-size: .875rem; letter-spacing: .06em; color: var(--muted); }
.values { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; gap: 1rem 1.5rem; border-block: 1px solid var(--line); padding: 1.5rem 6%; font-size: 1rem; font-weight: 500; }
.values i { font-style: normal; color: var(--copper); }
.section { padding: 6rem 7%; max-width: 1600px; margin: auto; }
.section-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 2rem; }
.section-top h2 { margin-top: 1.25rem; }
.section-top > p { max-width: 25rem; font-size: 1.1875rem; }
.tabs { display: flex; flex-wrap: wrap; gap: .5rem 2rem; border-bottom: 1px solid var(--line); margin-top: 2.5rem; padding-bottom: .5rem; }
.tabs button { min-height: 3rem; border: 0; border-bottom: 3px solid transparent; background: none; padding: .75rem .4rem; color: var(--muted); font-size: 1.0625rem; line-height: 1.5; }
.tabs button[aria-pressed=true] { color: var(--ink); border-color: var(--ink); font-weight: 600; }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; margin-top: 2rem; }
.service-card { padding: 2rem 1.6rem 1.25rem; background: #eeece3; position: relative; display: flex; flex-direction: column; min-width: 0; }
.service-card:nth-child(2) { background: #e6e3d7; }
.service-card:nth-child(3) { background: #e9e1d6; }
.service-card .service-number { font-size: .875rem; letter-spacing: .035em; color: var(--muted); padding-right: 2.5rem; }
.service-card .motif { position: absolute; right: 1.3rem; top: 1.2rem; font: 2.4rem var(--serif); color: #626b53; }
.service-card h3 { font: 500 2.25rem/1.15 var(--serif); margin: 2rem 0 1rem; }
.service-card p { font-size: 1.125rem; line-height: 1.75; margin-bottom: 1.5rem; }
.service-card button { background: none; border: 0; border-top: 1px solid #aeb39e; display: flex; gap: .75rem; justify-content: space-between; align-items: center; color: var(--ink); padding: 1rem 0 .5rem; font-size: 1.0625rem; line-height: 1.6; width: 100%; min-height: 3rem; margin-top: auto; text-align: left; }
.service-card button:hover { text-decoration: underline; }
.service-card button span { font-size: 1.5rem; }
.treatment-bottom { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; margin-top: 2rem; }
.treatment-bottom p { font-size: 1.125rem; }
.demo-note { display: block; font-size: 1rem; line-height: 1.7; color: var(--muted); margin-top: 1.5rem; max-width: 70ch; }
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #eeebe1; }
.story-visual { min-height: 38rem; background: #4b4d40; position: relative; overflow: hidden; padding: 4rem; color: #f7f4ed; display: flex; flex-direction: column; justify-content: end; }
.orb { position: absolute; width: 15rem; height: 15rem; border-radius: 50%; left: 50%; top: 3rem; background: radial-gradient(circle at 35% 25%, #ede4c7, #b3aa8b); box-shadow: 0 0 70px #d9bf7233; }
.story-visual > span { font: 1.5rem Georgia; letter-spacing: .3em; writing-mode: vertical-rl; position: absolute; top: 4rem; left: 3rem; color: #f7f4ed; }
.story-visual p { font: 500 3rem/1.2 var(--serif); color: inherit; position: relative; z-index: 1; margin-top: 16rem; }
.story-visual small { margin-top: 2rem; font-size: .9375rem; line-height: 1.7; letter-spacing: .06em; z-index: 1; }
.story-copy { padding: 5rem 12%; display: flex; flex-direction: column; justify-content: center; align-items: start; min-width: 0; }
.story-copy h2 { font-size: 3.25rem; margin: 1.5rem 0; }
.story-copy p { font-size: 1.1875rem; margin: 0 0 1.4rem; max-width: 60ch; }
.signature { border-top: 1px solid var(--line); width: 100%; margin-top: 1.5rem; padding-top: 1.25rem; font-size: 1rem; color: var(--muted); }
.signature em { font: 500 2.25rem var(--serif); margin-left: .75rem; }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center h2 { margin-top: 1.25rem; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin-top: 3.5rem; }
.steps article { border-top: 1px solid var(--line); padding-top: 1.25rem; min-width: 0; }
.steps article > span { font-size: 1rem; color: var(--copper); }
.steps h3 { font: 500 2rem/1.2 var(--serif); margin: 1.2rem 0 1rem; }
.steps p { font-size: 1.125rem; line-height: 1.75; }
.gallery-band { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1.75rem; padding: 4rem 7%; background: #eae6db; align-items: center; }
.gallery-text { min-width: 0; }
.gallery-text h2 { font-size: 3.25rem; margin: 1.25rem 0; }
.gallery-text p { font-size: 1.125rem; max-width: 45ch; }
.texture { height: 23rem; position: relative; overflow: hidden; }
.texture-one { background: linear-gradient(115deg, transparent 35%, #fff7d769 36%, transparent 55%), repeating-linear-gradient(90deg, #8e7d64 0 3px, #a69275 4px 8px); }
.texture-two { background: linear-gradient(115deg, #ded0b9 22%, #b3a48d 23%, #dfd3bf 42%, #efe6d5 43%, #d4c6b0 67%, #f3ead9 68%); }
.texture span { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; width: fit-content; color: var(--paper); font-size: .875rem; line-height: 1.7; letter-spacing: .03em; background: var(--bronze); padding: .4rem .7rem; }
.faq { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 8%; }
.faq h2 { margin: 1.25rem 0; }
.faq > div > p { font-size: 1.1875rem; }
details { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; padding: 1.4rem 2rem 1.4rem 0; font-size: 1.1875rem; line-height: 1.6; font-weight: 500; position: relative; }
summary::-webkit-details-marker { display: none; }
summary:after { content: '+'; position: absolute; right: .25rem; top: 1.4rem; color: var(--ink); font-size: 1.4rem; }
details[open] summary:after { content: '−'; }
details p { font-size: 1.125rem; padding: 0 1rem 1.5rem 0; line-height: 1.75; max-width: 65ch; }
.visit { padding: 5rem 7% 2rem; text-align: center; background: var(--bronze); color: var(--paper); position: relative; overflow: hidden; }
.visit:before { content: ''; position: absolute; width: 28rem; height: 28rem; border: 1px solid #e0d9c540; border-radius: 50%; left: -16rem; top: 2rem; pointer-events: none; }
.visit .eyebrow { justify-content: center; color: var(--paper); }
.visit h2 { font-size: 4.75rem; margin: 1.75rem 0; }
.visit h2 em { color: #e0ddca; }
.visit p { font-size: 1.1875rem; color: var(--paper); }
.button.light { background: var(--paper); color: var(--ink); margin-top: 2rem; }
.button.light:hover { background: #e9e5d9; }
.visit-meta { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; border-top: 1px solid #e0d9c570; padding-top: 1.75rem; margin-top: 4rem; font-size: .9375rem; line-height: 1.7; letter-spacing: .03em; color: var(--paper); }
footer { padding: 3.5rem 6% 1.5rem; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
footer > * { min-width: 0; }
footer p { font-size: 1.125rem; }
footer p small { font-size: 1rem; }
footer > div:not(.footer-bottom) { display: flex; flex-direction: column; align-items: end; font-size: 1rem; gap: .75rem; }
footer > div:not(.footer-bottom) a { min-height: 2.75rem; display: inline-flex; align-items: center; text-decoration: underline; }
.footer-bottom { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; font-size: .9375rem; line-height: 1.7; color: var(--muted); padding-top: 1.75rem; border-top: 1px solid var(--line); margin-top: 1rem; }
.skip { position: fixed; left: .75rem; top: -10rem; z-index: 100; background: var(--paper); color: var(--ink); padding: 1rem; font-size: 1.125rem; }
.skip:focus { top: .75rem; }
dialog { border: 1px solid var(--line); background: var(--paper); color: var(--ink); padding: 3.5rem 2.5rem 2.5rem; max-width: 42rem; width: calc(100% - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; }
dialog::backdrop { background: #25291fd0; backdrop-filter: blur(5px); }
dialog h2 { font-size: 3rem; margin: 1rem 0; }
dialog p { font-size: 1.125rem; margin: 1.25rem 0; line-height: 1.75; }
.close { position: absolute; top: .5rem; right: .5rem; width: 3rem; height: 3rem; display: grid; place-items: center; font-size: 2rem; line-height: 1; background: none; border: 0; color: var(--ink); }
.mobile-book { display: none; }
@media (max-width: 75rem) {
  header { gap: 1rem; padding-inline: 4%; }
  nav { gap: .5rem 1rem; }
  .hero { padding-inline: 5%; gap: 5%; }
  .section { padding: 5rem 6%; }
  .story-copy { padding: 4rem 9%; }
  .story-copy h2 { font-size: 3rem; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-band { grid-template-columns: 1fr 1fr; padding: 3.5rem 6%; }
  .gallery-text { grid-column: 1/-1; }
  .gallery-text p { max-width: 65ch; }
  .vertical-note { display: none; }
}
@media (max-width: 68rem) {
  header { position: relative; z-index: 5; justify-content: space-between; padding-inline: 6%; }
  header > .button { margin-left: auto; }
  nav { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: 1.5rem 6%; margin: 0; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 .5rem 1rem #343c3012; }
  nav.open { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; }
  nav a { padding: .6rem; min-height: 3rem; }
  .menu { display: grid; place-items: center; min-width: 3rem; min-height: 3rem; border: 1px solid var(--line); background: none; color: var(--ink); font-size: 1.5rem; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  body { font-size: 1.125rem; }
  .announcement { font-size: 1rem; padding: .75rem 6%; }
  .announcement span { display: none; }
  header { min-height: 6.5rem; padding-block: 1rem; }
  header > .button { display: none; }
  .brand { font-size: 2rem; }
  .hero { grid-template-columns: 1fr; padding: 2.5rem 6%; gap: 2rem; }
  .hero-copy { padding-top: 0; }
  h1 { font-size: clamp(3.5rem, 14vw, 4.5rem); margin: 1.5rem 0; }
  .hero-copy > p { font-size: 1.125rem; max-width: 60ch; }
  .hero-actions { gap: .75rem 1.25rem; margin-top: 1.5rem; }
  .hero-note { margin-top: 1.75rem; }
  .hero-art img { aspect-ratio: 4/4.3; }
  .values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: center; gap: 1.2rem; padding: 1.5rem 6%; }
  .values i { display: none; }
  .section { padding: 4rem 6%; }
  h2 { font-size: 2.875rem; }
  .section-top > p { font-size: 1.125rem; max-width: 60ch; }
  .eyebrow { font-size: .9375rem; letter-spacing: .06em; }
  .tabs { gap: .4rem 1rem; margin-top: 1.5rem; }
  .tabs button { text-align: left; }
  .service-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .service-card { padding: 1.75rem 1.5rem 1.25rem; }
  .service-card h3 { font-size: 2.25rem; }
  .treatment-bottom { margin-top: 1.5rem; }
  .story { grid-template-columns: 1fr; }
  .story-visual { min-height: 32rem; padding: 2.5rem; }
  .orb { width: 13rem; height: 13rem; }
  .story-visual > span { left: 2rem; top: 3rem; }
  .story-visual p { font-size: 2.75rem; }
  .story-copy { padding: 3.5rem 7%; }
  .story-copy h2 { font-size: 2.875rem; }
  .story-copy p { font-size: 1.125rem; }
  .steps { grid-template-columns: 1fr; gap: 2rem; margin-top: 2.5rem; }
  .steps h3 { font-size: 2rem; }
  .gallery-band { padding: 3.5rem 6%; gap: 1.25rem; }
  .gallery-text h2 { font-size: 2.875rem; }
  .texture { height: 20rem; }
  .texture span { left: .5rem; right: .5rem; bottom: .5rem; }
  .faq { grid-template-columns: 1fr; gap: 1.5rem; }
  .visit { padding: 4rem 6% 2rem; }
  .visit h2 { font-size: 3.75rem; }
  .visit-meta { justify-content: center; margin-top: 3rem; }
  footer { grid-template-columns: 1fr; padding: 3rem 6% 8rem; gap: 1.75rem; }
  footer > div:not(.footer-bottom) { align-items: start; }
  .mobile-book { display: block; position: fixed; bottom: 0; background: var(--paper); padding: .75rem 6% max(.75rem, env(safe-area-inset-bottom)); width: 100%; z-index: 6; border-top: 1px solid var(--line); }
  .mobile-book .button { width: 100%; justify-content: center; }
  html { scroll-padding-bottom: 7rem; }
  body { padding-bottom: 1rem; }
  dialog { padding: 3.5rem 1.5rem 1.5rem; max-height: calc(100dvh - 2rem); }
}
@media (max-width: 23rem) {
  .values, .gallery-band { grid-template-columns: 1fr; }
  .gallery-text { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}
@media (forced-colors: active) {
  .button, .tabs button, .menu { border: 1px solid ButtonText; }
  .tabs button[aria-pressed=true] { border-bottom: 4px solid Highlight; }
}

/* Immersive editorial layer. All essential content stays readable without motion. */
:root { --motion-ease: cubic-bezier(.22,.61,.36,1); }
html { scroll-padding-top: 9rem; }
body { background-image: radial-gradient(ellipse at 5% 40%, #d9d5c31a, transparent 65%); }
.reading-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; background: #b99a6c; transform: scaleX(0); transform-origin: left; z-index: 70; pointer-events: none; }
header { position: sticky; top: 0; z-index: 30; background: #f7f4edf5; backdrop-filter: blur(16px); transition: box-shadow .3s ease; }
header.scrolled { box-shadow: 0 4px 24px #20251d12; }
nav a { position: relative; }
nav a::after { content: ''; position: absolute; bottom: .35rem; height: 1px; background: var(--ink); left: .2rem; right: .2rem; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--motion-ease); }
nav a:hover { text-decoration: none; }
nav a:hover::after, nav a:focus-visible::after { transform: scaleX(1); }
.hero { display: block; max-width: none; min-height: 48rem; padding: 6.5rem 7% 7.5rem; isolation: isolate; overflow: hidden; background: #292f24; color: var(--paper); }
.hero-media { position: absolute; inset: -3%; z-index: -3; }
.hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; transform: translate3d(0,var(--hero-shift,0px),0) scale(1.06); }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#1f271df5 0%,#20271ee8 28%,#22291fb5 55%,#22291f1a 85%),linear-gradient(0deg,#20261eaa,transparent 40%); z-index: -2; }
.hero-copy { padding: 0; max-width: 48rem; }
.hero .eyebrow { color: #eeeadd; }
.hero .eyebrow > span { background: #d7c49f; }
.hero h1 { font-size: clamp(4.5rem,7.5vw,7.5rem); line-height: 1.02; margin: 2rem 0; max-width: 47rem; letter-spacing: -.035em; }
.hero h1 em { color: #e2d8b9; }
.hero-copy > p { font-size: 1.25rem; color: var(--paper); max-width: 34rem; }
.hero-actions { margin-top: 2.25rem; gap: 1.5rem 2rem; }
.hero .button.light { margin: 0; }
.hero .text-link { color: var(--paper); }
.hero-note { color: #eeeadd; border-color: #ded8c55c; max-width: 32rem; margin-top: 2.5rem; }
.hero .tiny-moon { color: #e2d8b9; }
.hero :focus-visible, .stillness :focus-visible { outline-color: #f7f4ed; }
.hero-bottom { position: absolute; bottom: 2rem; left: 7%; right: 7%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.scroll-cue { display: inline-flex; align-items: center; gap: 1rem; min-height: 3rem; font-size: .875rem; letter-spacing: .08em; }
.scroll-line { display: block; width: 1px; height: 2.5rem; background: linear-gradient(#e5ddc580,#e5ddc5); transform-origin: top; }
.concept-label { font-size: .875rem; line-height: 1.6; background: #242c22e8; color: #f7f4ed; padding: .35rem .65rem; }
.hero-orbit { position: absolute; right: -5rem; bottom: -12rem; width: 34rem; height: 34rem; border: 1px solid #ede4cb50; border-radius: 50%; z-index: -1; pointer-events: none; }
.hero-orbit::after { content: ''; position: absolute; inset: 1.5rem; border: 1px solid #ede4cb26; border-radius: 50%; }
.values { background: #eae7dd; position: relative; }
.treatments { position: relative; }
.treatments::before { content: '01'; position: absolute; top: 2rem; right: 7%; font: 500 10rem/1 var(--serif); color: #343c300a; pointer-events: none; }
.section-top { position: relative; }
.service-grid { gap: 1.75rem; }
.service-card { padding: 0; background: #eeece3; overflow: hidden; transition: box-shadow .4s ease; }
.service-card:hover { box-shadow: 0 15px 35px #343c3014; }
.service-art { height: 14rem; position: relative; overflow: hidden; background: #d7cbb9; }
.service-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--motion-ease); }
.service-card:nth-child(3) .service-art img { object-position: 65% 65%; }
.service-card:hover .service-art img { transform: scale(1.045); }
.service-image-label { position: absolute; bottom: .75rem; left: 1rem; padding: .2rem .45rem; background: #242c22eb; color: #f7f4ed; font-size: .875rem; letter-spacing: .035em; }
.service-card-content { position: relative; display: flex; flex-direction: column; padding: 1.75rem 1.6rem 1.25rem; flex: 1; }
.service-card .motif { top: 1.25rem; }
.service-card h3 { margin-top: 1.5rem; }
.service-card button span { transition: transform .3s var(--motion-ease); }
.service-card button:hover span { transform: translate(3px,-3px); }
.stillness { min-height: 40rem; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; isolation: isolate; background: #30362b; color: #f7f4ed; text-align: center; padding: 5rem 7%; }
.stillness-media { position: absolute; inset: -4%; z-index: -3; }
.stillness-media img { width: 100%; height: 100%; display: block; object-fit: cover; transform: translate3d(0,var(--stillness-shift,0px),0) scale(1.06); }
.stillness::before { content: ''; position: absolute; inset: 0; z-index: -2; background: #20271ed6; }
.stillness::after { content: ''; position: absolute; inset: 1.5rem; border: 1px solid #e0d6bc60; z-index: -1; pointer-events: none; }
.stillness-copy { max-width: 60rem; }
.stillness .eyebrow { justify-content: center; color: #e8e1cf; }
.stillness h2 { font-size: clamp(3rem,5.3vw,5.5rem); margin: 2rem 0; }
.stillness h2 em { color: #e2d8b9; }
.stillness p { color: #f7f4ed; font-size: 1.25rem; }
.stillness-mark { display: block; font: 3rem var(--serif); margin-top: 2rem; color: #e2d8b9; }
.stillness > .concept-label { position: absolute; bottom: 2rem; right: 2rem; }
.story { margin: 0; background: #eeebe1; }
.story-visual { min-height: 48rem; padding: 0; background: #4b4d40; }
.story-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.story-plaque { position: relative; z-index: 1; margin: auto 2rem 2rem; padding: 2rem; background: #252d23ef; border: 1px solid #d9ccb84d; }
.story-plaque > span { font: 2.5rem var(--serif); color: #ded1af; }
.story-plaque p { font: 500 2.75rem/1.2 var(--serif); margin: .5rem 0 1rem; color: #f7f4ed; }
.story-plaque small { margin: 0; color: #eee6d2; font-size: .875rem; }
.story-copy { padding-block: 5.5rem; }
.experience { position: relative; }
.experience::before { content: ''; position: absolute; width: 23rem; height: 23rem; border: 1px solid #b9bba53d; border-radius: 50%; left: calc(50% - 11.5rem); top: 2rem; pointer-events: none; }
.experience > * { position: relative; }
.steps article { position: relative; }
.steps article > span { display: inline-flex; width: 3rem; height: 3rem; border: 1px solid #aeb69a; border-radius: 50%; align-items: center; justify-content: center; margin-top: .25rem; }
.gallery-band { display: block; background: #e6e1d5; padding-block: 6rem; }
.gallery-text { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 5rem; align-items: end; margin-bottom: 3rem; }
.gallery-text .eyebrow { grid-column: 1/-1; }
.gallery-text h2 { font-size: 4rem; grid-row: span 2; margin: 0; }
.gallery-text p { max-width: 38rem; }
.gallery-text .gallery-disclaimer { font-size: 1rem; }
.journal-grid { display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: 20rem 20rem; gap: 1.5rem; }
.journal-photo { position: relative; overflow: hidden; padding: 0; border: 0; background: #4b4d40; text-align: left; color: #f7f4ed; min-width: 0; }
.journal-tall { grid-row: span 2; }
.journal-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--motion-ease); }
.journal-photo:hover > img { transform: scale(1.035); }
.journal-photo > span { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: #242c22eb; font-size: .9375rem; letter-spacing: .04em; }
.journal-photo > span > span:last-child { font-size: 1.5rem; }
.journal-photo:focus-visible { outline-offset: -6px; outline-color: #f7f4ed; outline-width: 3px; }
.visit { isolation: isolate; padding-top: 6rem; }
.visit-image { position: absolute; inset: 0; z-index: -3; background: url('assets/hero-wide.jpg') center 55% / cover; }
.visit::after { content: ''; position: absolute; inset: 0; background: #263022ed; z-index: -2; }
.visit::before { z-index: -1; border-color: #e0d9c555; }
.visit > :not(.visit-image) { position: relative; }
footer { background: var(--paper); }
.motion-toggle { border: 1px solid #929c82; background: transparent; color: var(--ink); min-height: 2.75rem; padding: .45rem .8rem; font: 1rem/1.6 var(--sans); }
.motion-toggle[aria-pressed=true] { background: #e0e4d7; }
dialog[data-gallery] { max-width: 70rem; }
.lightbox-image { display: block; width: 100%; max-height: 65vh; object-fit: contain; background: #e6e1d5; margin-top: 1rem; }
.motion-ready .reveal-pending { opacity: 0; transform: translateY(24px); transition: opacity .75s var(--motion-ease),transform .75s var(--motion-ease); transition-delay: var(--reveal-delay,0ms); }
.motion-ready .reveal-pending.is-visible, .motion-ready .reveal-pending:focus-within { opacity: 1; transform: none; }
body.motion-reduced *, body.motion-reduced *::before, body.motion-reduced *::after { animation: none !important; transition: none !important; }
html:has(body.motion-reduced) { scroll-behavior: auto; }
body.motion-reduced .hero-media img, body.motion-reduced .stillness-media img { transform: none; }
body.motion-reduced .reveal-pending { opacity: 1; transform: none; }
@media (max-width: 75rem) {
  .hero { min-height: 46rem; padding-top: 5.5rem; }
  .hero h1 { max-width: 42rem; }
  .story-visual { min-height: 46rem; }
  .gallery-text { display: grid; }
}
@media (max-width: 68rem) {
  header { position: sticky; }
  .hero { min-height: 46rem; }
  .hero::before { background: linear-gradient(90deg,#1f271df2,#20271ed9 52%,#22291f80),linear-gradient(0deg,#20261eaa,transparent); }
  .hero-copy { max-width: 39rem; }
  .service-art { height: 15rem; }
  .journal-grid { grid-template-rows: 18rem 18rem; }
}
@media (max-width: 48rem) {
  html { scroll-padding-top: 8rem; }
  header { min-height: 6rem; }
  .hero { min-height: 46rem; padding: 4rem 7% 8rem; }
  .hero::before { background: linear-gradient(90deg,#20271eeb,#22291fd6),linear-gradient(0deg,#20261eaa,transparent); }
  .hero-media img { object-position: 60% center; }
  .hero h1 { font-size: clamp(3.75rem,13vw,5rem); margin: 1.5rem 0; }
  .hero-copy > p { font-size: 1.1875rem; }
  .hero-actions { gap: 1rem; align-items: start; flex-direction: column; }
  .hero-note { margin-top: 1.75rem; }
  .hero-bottom { bottom: 1.5rem; left: 7%; right: 7%; align-items: end; }
  .scroll-cue { font-size: .875rem; max-width: 12rem; gap: .7rem; }
  .hero-bottom .concept-label { font-size: .875rem; }
  .hero-orbit { width: 22rem; height: 22rem; right: -12rem; bottom: -10rem; }
  .treatments::before { font-size: 7rem; top: 1rem; }
  .service-art { height: 14rem; }
  .service-card-content { padding: 1.75rem 1.5rem 1.25rem; }
  .stillness { min-height: 36rem; padding: 5rem 8%; }
  .stillness::after { inset: 1rem; }
  .stillness h2 { font-size: 3rem; }
  .stillness p { font-size: 1.125rem; }
  .stillness > .concept-label { bottom: 1.5rem; right: 1.5rem; }
  .story-visual { min-height: 38rem; }
  .story-plaque { margin: auto 1.25rem 1.25rem; padding: 1.5rem; }
  .story-plaque p { font-size: 2.5rem; }
  .experience::before { width: 16rem; height: 16rem; left: calc(50% - 8rem); }
  .gallery-band { padding: 4rem 6%; }
  .gallery-text { grid-template-columns: 1fr; gap: 1.2rem; margin-bottom: 2rem; }
  .gallery-text h2 { grid-row: auto; font-size: 3rem; }
  .journal-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 1.25rem; }
  .journal-photo { height: 20rem; }
  .journal-tall { grid-row: auto; height: 30rem; }
  .journal-photo > span { font-size: .875rem; padding: .85rem 1rem; }
  .visit { padding-top: 4rem; }
  .footer-bottom .motion-toggle { width: fit-content; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-media img, .stillness-media img, .service-card:hover .service-art img, .journal-photo:hover > img { transform: none !important; }
  .motion-ready .reveal-pending { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}
.journal-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; }
.journal-nav > span { font-size: 1rem; color: var(--muted); }
.journal-nav .button { gap: .5rem; padding: .7rem 1rem; }
/* Contain decorative orbit artwork when readers enlarge the text. */
.experience { overflow: clip; }
@media (max-width: 48rem) {
  .hero::before { background: linear-gradient(180deg,#20271ee6 0%,#20271ed9 60%,#20271e73 100%); }
  .hero-media img { object-position: 78% center; }
  .hero-note { background: #20271ee8; padding: .75rem; border: 1px solid #ded8c54d; }
  .scroll-cue { background: #20271ee8; padding: .4rem .65rem; }
}
.location-section { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr); gap:5%; align-items:center; }
.location-copy h2 { margin:1.5rem 0 2rem; }
.location-copy address { font-style:normal; font-size:1.25rem; line-height:1.8; margin-bottom:1.5rem; color:var(--ink); }
.booth-label { display:inline-flex; background:#e5e8dc; border:1px solid #a5af95; padding:.25rem .8rem; margin-top:.75rem; font-size:1.0625rem; font-weight:600; }
.location-copy p { font-size:1.125rem; margin-bottom:1.5rem; }
.directions-note { display:block; font-size:1rem; line-height:1.7; color:var(--muted); margin-top:1rem; max-width:35ch; }
.location-map { min-width:0; border:1px solid #a9b19b; padding:.75rem; background:#eeece3; box-shadow:0 1.25rem 3rem #343c3010; }
.map-topline { display:flex; align-items:center; gap:.75rem; padding:.25rem .5rem 1rem; font-size:.9375rem; letter-spacing:.04em; color:var(--ink); }
.map-topline > span:first-child { font:2rem var(--serif); color:var(--copper); }
.map-frame { overflow:hidden; border:1px solid #a9b19b; background:#e0e3d8; }
.map-frame iframe { display:block; width:100%; height:27rem; border:0; filter:grayscale(.7) sepia(.16); }
.map-caption { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.5rem 1rem; padding:1rem .5rem .25rem; font-size:1rem; color:var(--ink); }
.map-caption a { display:inline-flex; align-items:center; min-height:2.75rem; text-decoration:underline; }
@media(max-width:60rem) { .location-section { grid-template-columns:1fr; gap:2.5rem; } }
@media(max-width:40rem) { .map-frame iframe { height:23rem; } .location-map { padding:.5rem; } }
/* A warm full-width panel separates the studio location from the cream FAQs. */
.location-section {
  max-width:none;
  background:#e3ddcf;
  border-top:1px solid #c9c1b0;
  padding-inline:max(7%,calc((100% - 1376px) / 2));
}
.location-map { background:var(--paper); }

.map-consent{min-height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;background:linear-gradient(35deg,transparent 48%,#c6bbaa66 49%,#c6bbaa66 51%,transparent 52%),linear-gradient(145deg,#ebe5d8 48%,#ded8c9 49%,#ded8c9 51%,#ebe5d8 52%);background-size:120px 110px}.map-consent p{margin:12px}.map-consent[hidden],.map-frame iframe[hidden]{display:none}