/* meeture / a brand-led website with a clear, quiet booking workspace. */
:root {
  --paper: #f6f4ee;
  --ink: #25372c;
  --muted: #626a60;
  --line: #d9ddd1;
  --olive: #344b3a;
  --gold: #81694b;
  --warm: #e8dfcf;
}
body {font-size:calc(15px * var(--meeture-text-scale, 1)); line-height: 1.65}
button, a {touch-action: manipulation}
button:disabled {cursor: not-allowed; opacity: .5}
button:hover, a:hover {opacity: 1}
.header {height: 94px; padding-inline: 5%; gap: 24px; position: relative}
.brand-word {letter-spacing: -.8px}
.desktop-nav {gap: 24px}
.desktop-nav a {font-size:calc(12px * var(--meeture-text-scale, 1)); min-height: 44px; display: flex; justify-content: center; flex-direction: column}
.desktop-nav a span {font-size:calc(8px * var(--meeture-text-scale, 1)); letter-spacing: 1.2px}
.desktop-nav a.active {color: var(--olive)}
.header-account {font-size:calc(11px * var(--meeture-text-scale, 1)); min-height: 44px; white-space: nowrap}
.language-switch {margin-left: 0; min-height: 44px}
.language-switch select {min-height: 44px}
.button {background: var(--olive); color: var(--paper); border-radius: 2px; min-height: 52px; font-size:calc(13px * var(--meeture-text-scale, 1)); gap: 24px}
.button:hover {background: #263c2c}
.text-link {font-size:calc(13px * var(--meeture-text-scale, 1)); min-height: 44px}
.section {padding: 96px 6%; max-width: 1600px; margin-inline: auto}
.section-heading {margin-bottom: 44px; gap: 32px}
.section-heading h2 {font-size: clamp(32px, 4.2vw, 58px); line-height: 1.3; font-weight: 400; letter-spacing: -1.5px}
.section-heading h2 em {display: block; margin-top: 6px; font-style: normal}
.eyebrow {font-size:calc(10px * var(--meeture-text-scale, 1)); letter-spacing: 2.2px; color: var(--gold)}
.atelier-hero {min-height: 700px; display: grid; grid-template-columns: 1.08fr 1fr; padding: 64px 6% 70px; gap: 5%; max-width: 1600px; margin-inline: auto; border-bottom: 0}
.atelier-hero .line-hero-copy {padding: 0; align-self: center}
.atelier-hero .editorial-title {font-size: clamp(76px, 7.7vw, 118px); letter-spacing: -4px; line-height: .86; margin: 38px 0 28px; width: auto; max-width: 100%}
.atelier-hero .title-line {display: block; padding: 0; line-height: .92}
.atelier-hero .title-line.sans-line {font-family: var(--serif); font-size: inherit; font-weight: 400; letter-spacing: -3px}
.atelier-hero .title-line em {font-weight: 400; font-style: italic}
.atelier-hero .alternate-type {display: none}
.atelier-hero .hero-chinese {margin: 28px 0 15px; padding: 0; border: 0; display: block}
.atelier-hero .hero-chinese h2 {font-size:calc(22px * var(--meeture-text-scale, 1)); letter-spacing: 2px; font-weight: 400; line-height: 1.5}
.atelier-hero .hero-description {font-size:calc(13px * var(--meeture-text-scale, 1)); line-height: 1.9; max-width: 380px; white-space: pre-line; color: var(--muted)}
.atelier-hero .hero-actions {gap: 24px; margin-top: 28px; flex-wrap: wrap}
.hero-bottom-note {display: flex; justify-content: space-between; max-width: 430px; margin-top: 40px; padding-top: 17px; border-top: 1px solid var(--line); font-size:calc(9px * var(--meeture-text-scale, 1)); letter-spacing: 1px; color: var(--muted); gap: 16px}
.atelier-hero .line-hero-visual {height: 570px; min-height: 0; margin: 0; width: 100%; align-self: center}
.atelier-hero .portrait-outline {position: absolute; width: 83%; height: 94%; top: 0; right: 0; left: auto; bottom: auto; border: 0; padding: 0; border-radius: 42% 42% 0 0; transform: none}
.atelier-hero .portrait-window {height: 100%; width: 100%; margin: 0; border-radius: inherit; transform: none; box-shadow: none; overflow: hidden; background: var(--warm)}
.atelier-hero .portrait-window img {height: 100%; width: 100%; object-fit: cover; transform: none}
.atelier-hero .contour-art, .atelier-hero .portrait-caption, .atelier-hero .portrait-number {display: none}
.hero-case.hero-case-note {padding: 24px 20px; text-align: left}
.hero-case-note p {font-family: var(--serif); font-size:calc(18px * var(--meeture-text-scale, 1)); line-height: 1.6; margin: 18px 0 0}
.hero-visual-label {position: absolute; left: 17%; right: 0; bottom: 1%; display: flex; justify-content: space-between; gap: 16px; font-size:calc(8px * var(--meeture-text-scale, 1)); letter-spacing: 1.2px; color: var(--muted)}
.hero-case {position: absolute; bottom: 14%; left: -4%; width: 42%; background: var(--paper); padding: 8px; box-shadow: 0 12px 35px #25372c18; z-index: 2}
.hero-case > img {height: 172px; width: 100%; object-fit: cover}
.hero-case > span {display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 4px 6px}
.hero-case small {grid-column: 1/-1; font-size:calc(7px * var(--meeture-text-scale, 1)); letter-spacing: 1px; color: var(--muted)}
.hero-case strong {font-weight: 400; font-size:calc(11px * var(--meeture-text-scale, 1)); line-height: 1.5}
.hero-case b {font-weight: 400; font-size:calc(18px * var(--meeture-text-scale, 1))}
.hero-edition {position: absolute; right: -25px; top: 35%; writing-mode: vertical-rl; font-size:calc(8px * var(--meeture-text-scale, 1)); letter-spacing: 2px; color: var(--muted)}
.line-marquee {border-block: 1px solid var(--line); min-height: 80px; font-size:calc(30px * var(--meeture-text-scale, 1)); color: #6b7866; background: #eef0e6}
.work-grid {gap: 32px}
.atelier-portfolio .work-grid:has(> .work-card:only-child) {grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr)}
.atelier-portfolio .work-grid:has(> .work-card:only-child)::after {content: "Every detail,\A beautifully yours."; white-space: pre-line; font-family: var(--serif); font-style: italic; font-size: clamp(38px, 5vw, 72px); line-height: 1.2; align-self: center; padding: 9%; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line)}
.work-image {aspect-ratio: 4/5; background: var(--warm)}
.work-image img {height: 100%; transition: transform .6s var(--ease-editorial)}
@media (hover:hover) {.work-card:hover .work-image img, .service-example:hover img {transform: scale(1.035)}}
.work-bottom h3 {font-size:calc(17px * var(--meeture-text-scale, 1)); font-weight: 500; line-height: 1.6}
.work-bottom p {font-size:calc(10px * var(--meeture-text-scale, 1)); color: var(--muted)}
.work-badge {font-size:calc(10px * var(--meeture-text-scale, 1)); background: var(--paper)}
.services-section {background: #eaeee3; max-width: none}
.services-grid {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 50px}
.service-card {padding: 26px 0; min-height: 172px; gap: 22px; background: transparent; border-bottom: 1px solid #cbd2c1}
.service-number {color: var(--gold); font-size:calc(11px * var(--meeture-text-scale, 1)); padding-top: 3px}
.service-card h3 {font-size:calc(21px * var(--meeture-text-scale, 1)); font-weight: 400; line-height: 1.5}
.service-card h3 span {margin-top: 5px; font-size:calc(8px * var(--meeture-text-scale, 1)); letter-spacing: 1px; color: var(--muted)}
.service-card p {font-size:calc(12px * var(--meeture-text-scale, 1)); color: var(--muted); max-width: 340px; line-height: 1.9}
.service-meta {display: flex; gap: 12px; flex-wrap: wrap; font-size:calc(11px * var(--meeture-text-scale, 1)); color: var(--muted); margin-block: 14px}
.service-meta span {background: #ffffff70; padding: 4px 8px}
.round-arrow {border: 1px solid #b9c4ad; width: 40px; height: 40px; font-size:calc(21px * var(--meeture-text-scale, 1)); background: transparent}
.service-section-links {display: flex; gap: 30px; flex-wrap: wrap; margin-top: 24px}
.atelier-journey {margin-top: 72px; padding-top: 42px}
.atelier-faq summary {min-height: 52px}
.line-invitation {min-height: 430px; padding: 86px 6%; background: var(--olive); color: var(--paper); text-align: center; position: relative; overflow: hidden}
.line-invitation h2 {font-size: clamp(46px,6.5vw,86px); line-height: 1.15; max-width: 1000px; margin: 24px auto}
.line-invitation .eyebrow, .line-invitation p {color: #d1d6c7}
.invitation-actions {display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 24px}
.circle-cta {width: 62px; height: 62px; margin: 0; border-color: #c5cbb7; background: transparent; font-size:calc(32px * var(--meeture-text-scale, 1)); color: inherit}
.page-head {padding: 64px 6% 32px; max-width: 1600px; margin-inline: auto}
.page-title {font-size: clamp(34px,4.4vw,62px); line-height: 1.3; letter-spacing: -1.5px; margin: 18px 0}
.page-title em {display: block; font-size: .73em; font-weight: 400; margin-top: 12px}
.page-head > p {font-size:calc(14px * var(--meeture-text-scale, 1)); max-width: 660px; line-height: 1.9; color: var(--muted)}
.service-directory {padding-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 32px; align-items: center}
.service-directory .filter {white-space: nowrap; flex: 0 0 auto; min-height: 44px}
.page-head + .section {padding-top: 36px}
.service-detail {display: grid; grid-template-columns: 1fr 1.1fr; gap: 8%; padding-block: 56px; border-bottom: 1px solid var(--line); scroll-margin-top: 32px}
.service-detail-visual {min-width: 0; height: 410px; background: #e8ebdf}
.service-example {padding: 0; position: relative; width: 100%; height: 100%; overflow: hidden}
.service-example img {height: 100%; object-fit: cover; transition: transform .5s}
.service-example > span {position: absolute; bottom: 0; left: 0; right: 0; color: white; padding: 38px 20px 20px; font-size:calc(12px * var(--meeture-text-scale, 1)); background: linear-gradient(transparent,#25372c99)}
.service-detail-copy {align-self: center; min-width: 0}
.service-detail-copy h2 {font-size: clamp(26px,3vw,38px); font-weight: 400; line-height: 1.4; margin: 18px 0}
.service-detail-copy > p {color: var(--muted); font-size:calc(14px * var(--meeture-text-scale, 1)); line-height: 1.9; white-space: pre-line}
.service-detail-copy .button {margin-top: 24px}
.service-detail-copy > .text-link {margin-left: 22px}
.service-line-art {position: relative; height: 100%; overflow: hidden}
.service-line-art .contour-art {position: absolute; inset: 0; width: 100%; height: 100%; opacity: .32; color: var(--olive)}
.service-line-art > span {position: absolute; top: 20px; left: 24px; font-size:calc(12px * var(--meeture-text-scale, 1)); letter-spacing: 2px}
.service-line-art em {position: absolute; bottom: 16px; right: 36px; font-family: var(--serif); font-size:calc(120px * var(--meeture-text-scale, 1)); line-height: 1; color: var(--olive)}
.service-highlight {border-top: 2px solid var(--olive)}
.preparation-copy {padding-top: 18px; border-top: 1px solid var(--line); margin-top: 22px}
.preparation-copy h3, .preparation-copy strong {font-size:calc(13px * var(--meeture-text-scale, 1)); font-weight: 500}
.preparation-copy p {font-size:calc(12px * var(--meeture-text-scale, 1)); color: var(--muted); line-height: 1.9; white-space: pre-line}
.studio-story {padding-top: 24px}
.studio-location-heading {margin-top: 60px; padding-top: 42px; border-top: 1px solid var(--line)}
.studio-location-heading h2 {font-weight: 400; font-size:calc(30px * var(--meeture-text-scale, 1))}
.studio-location-heading p {font-size:calc(13px * var(--meeture-text-scale, 1)); color: var(--muted)}
.studio-locations {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 30px}
.studio-location {border: 1px solid var(--line); padding: 30px; background: #eeefe6}
.studio-location h3 {font-weight: 400; font-size:calc(25px * var(--meeture-text-scale, 1))}
.studio-location p, .studio-location address {font-size:calc(13px * var(--meeture-text-scale, 1)); white-space: pre-line; color: var(--muted); font-style: normal}
.studio-location-actions {display: flex; gap: 22px; flex-wrap: wrap; margin-top: 22px}
.booking-layout {padding: 12px 32px 190px; display: block; max-width: 840px; margin-inline: auto; align-items: start}
.booking-form {min-width: 0; padding: 0}
.booking-section {border: 0; margin: 0 0 32px; padding: 26px 0 0; min-width: 0; border-top: 1px solid var(--line)}
.booking-section legend {font-size:calc(17px * var(--meeture-text-scale, 1)); font-weight: 500; padding-right: 24px}
.booking-section legend > span {font-size:calc(10px * var(--meeture-text-scale, 1)); color: var(--gold); margin-right: 16px}
.service-select {display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0}
.service-option {text-align: left; border: 1px solid var(--line); border-radius: 3px; padding: 17px; min-height: 90px; background: #faf9f5; margin: 0}
.service-option strong {font-size:calc(14px * var(--meeture-text-scale, 1)); font-weight: 500; line-height: 1.5}
.service-option small {font-size:calc(8px * var(--meeture-text-scale, 1)); margin-top: 6px; display: block; color: var(--muted); letter-spacing: .6px}
.service-option.active {background: #e8edde; border-color: var(--olive); box-shadow: inset 0 0 0 1px var(--olive)}
.service-option-duration {font-size:calc(10px * var(--meeture-text-scale, 1)); display: block; color: var(--muted); margin-top: 8px}
.form-grid {grid-template-columns: 1fr; gap: 24px}
.field {font-size:calc(13px * var(--meeture-text-scale, 1)); gap: 10px}
.field input, .field select, .field textarea {font-size:calc(16px * var(--meeture-text-scale, 1)); min-height: 52px; background: #faf9f5; border: 1px solid #cbd2c4; padding: 13px 14px; border-radius: 3px; margin: 0}
.field input[type=date] {width: 100%; min-width: 0}
.field textarea {min-height: 110px; width: 100%}
.availability-note {font-size:calc(12px * var(--meeture-text-scale, 1)); line-height: 1.7; color: var(--muted); margin-top: 14px}
.availability-retry {margin-top: 0}
.field-label {display: block; font-size:calc(13px * var(--meeture-text-scale, 1)); margin-bottom: 12px}
.time-picker {margin-top: 24px}
.slot-grid {display: grid; grid-template-columns: 1fr; gap: 10px}
.time-slot {display: block; position: relative; cursor: pointer; min-height: 54px}
.time-slot input {position: absolute; width: 1px; height: 1px; opacity: 0}
.time-slot > span {display: grid; place-items: center; padding: 10px; border: 1px solid #cbd2c4; border-radius: 3px; font-size:calc(14px * var(--meeture-text-scale, 1)); min-height: 54px; background: #faf9f5}
.time-slot small {font-size:calc(9px * var(--meeture-text-scale, 1)); color: var(--muted)}
.time-slot input:checked + span {background: var(--olive); color: white; border-color: var(--olive)}
.time-slot input:checked + span small {color: #e3e7dc}
.time-slot input:focus-visible + span {outline: 2px solid var(--gold); outline-offset: 3px}
.time-slot.is-unavailable {cursor: not-allowed; opacity: .45}
.booking-optional {border: 1px solid var(--line); border-radius: 3px; margin-block: 28px; background: #eeefe6}
.booking-optional > summary {min-height: 60px; padding: 16px 20px; display: flex; align-items: center; gap: 12px; cursor: pointer; font-size:calc(14px * var(--meeture-text-scale, 1)); list-style: none}
.booking-optional > summary::-webkit-details-marker {display: none}
.booking-optional > summary small {font-size:calc(11px * var(--meeture-text-scale, 1)); color: var(--muted)}
.booking-optional > summary i {margin-left: auto; font-style: normal; font-size:calc(20px * var(--meeture-text-scale, 1))}
.booking-optional[open] > summary i {transform: rotate(45deg)}
.optional-body {padding: 0 20px 24px}
.optional-body .style-fieldset {margin-bottom: 22px}
.optional-body .style-fieldset legend {font-size:calc(13px * var(--meeture-text-scale, 1))}
.style-choice span {min-height: 44px; display: inline-flex; align-items: center; font-size:calc(12px * var(--meeture-text-scale, 1))}
.consent {font-size:calc(12px * var(--meeture-text-scale, 1)); line-height: 1.8; align-items: start; margin-block: 22px}
.consent input {width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px}
.consent button {min-height: 30px}
.booking-submit-area > .button {width: 100%; justify-content: space-between}
.notice, .draft-note {font-size:calc(11px * var(--meeture-text-scale, 1)); line-height: 1.8}
.booking-aside {position: sticky; top: 24px; padding: 0; border: 0}
.booking-aside > img {height: 240px; aspect-ratio: 5/4; margin-top: 28px}
.booking-aside > h3 {font-size:calc(26px * var(--meeture-text-scale, 1))}
.booking-summary {padding: 26px; background: #e8edde; border: 1px solid #d3dbc9}
.booking-summary h3 {font-family: var(--sans); font-size:calc(20px * var(--meeture-text-scale, 1)); line-height: 1.5; margin-top: 15px}
.booking-summary > p {font-size:calc(11px * var(--meeture-text-scale, 1)); color: var(--muted)}
.member-layout {padding-top: 20px; align-items: start}
.member-card {background: #e8edde; border-radius: 3px; padding: 32px}
.member-actions {gap: 5px}
.member-actions .text-link {font-size:calc(12px * var(--meeture-text-scale, 1))}
.member-bookings > .section-heading {margin-bottom: 22px}
.visit-card, .visit-empty {padding: 26px; border: 1px solid #b8c7aa; background: #edf1e5; margin-bottom: 24px; border-radius: 3px}
.visit-card-top {display: flex; align-items: center; gap: 16px; justify-content: space-between}
.visit-card h3 {font-size:calc(28px * var(--meeture-text-scale, 1)); font-weight: 400; margin: 22px 0 10px}
.visit-card h3 em {font-style: normal; margin-left: 14px; color: var(--muted)}
.visit-card strong {font-size:calc(14px * var(--meeture-text-scale, 1)); font-weight: 500}
.visit-card > p, .visit-empty > p {font-size:calc(12px * var(--meeture-text-scale, 1)); color: var(--muted)}
.visit-card > small {font-size:calc(11px * var(--meeture-text-scale, 1)); color: var(--muted)}
.visit-empty h3 {font-size:calc(22px * var(--meeture-text-scale, 1)); font-weight: 400}
.visit-empty .button {margin-top: 16px}
.visit-preparation {border-top: 1px solid #d0d8c4; padding-top: 14px; margin-top: 16px}
.visit-preparation > span {font-size:calc(12px * var(--meeture-text-scale, 1)); font-weight: 500}
.visit-preparation p {font-size:calc(12px * var(--meeture-text-scale, 1)); white-space: pre-line; color: var(--muted)}
.visit-actions {display: flex; gap: 24px; flex-wrap: wrap; margin-top: 16px}
.booking-record {padding: 22px; border-radius: 3px}
.booking-record h3 {font-size:calc(24px * var(--meeture-text-scale, 1))}
.cancel-booking {min-height: 44px; font-size:calc(12px * var(--meeture-text-scale, 1))}
.status-badge {font-size:calc(10px * var(--meeture-text-scale, 1)); padding: 5px 10px; white-space: nowrap}
.footer {padding: 48px 6%; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; background: #eeefe6}
.footer-links {display: flex; gap: 24px; flex-wrap: wrap; font-size:calc(12px * var(--meeture-text-scale, 1)); grid-column: 1/-1}
.footer-links a {min-height: 44px; display: inline-flex; align-items: center}
.footer > small {font-size:calc(10px * var(--meeture-text-scale, 1))}
.motion-toggle {grid-column: 1/-1; justify-self: start; min-height: 44px}
.sticky-booking {min-height: 64px; padding: 12px 18px; right: 24px; bottom: 24px; border-radius: 3px; background: var(--olive); color: var(--paper)}
.music-control {left: 24px; right: auto; bottom: 24px}
.music-toggle {min-height: 44px; font-size:calc(11px * var(--meeture-text-scale, 1)); background: #f6f4eef2}
.back-to-top {right: 24px; bottom: 110px; width: 44px; height: 44px; background: var(--paper)}
.experience-heading-lines,.experience-hero-orbit,.experience-axis,.experience-invitation-orbit,.hero-gridline,.side-caption {display: none}
@media(max-width:1150px) {
  .header {gap: 18px; padding-inline: 4%}
  .desktop-nav {gap: 16px}
  .header-account .icon-user {display: none}
  .language-switch {font-size:calc(10px * var(--meeture-text-scale, 1))}
  .atelier-hero {gap: 5%; padding-inline: 5%}
  .atelier-hero .editorial-title {font-size:calc(90px * var(--meeture-text-scale, 1))}
  .atelier-hero .line-hero-visual {height: 520px}
  .booking-layout {gap: 36px}
}
@media(max-width:900px) {
  .desktop-nav {display: none}
  .header {height: 80px}
  .header-account {margin-left: auto}
  .section {padding: 60px 6%}
  .atelier-hero {min-height: auto; padding: 48px 6% 56px}
  .atelier-hero .editorial-title {font-size:calc(76px * var(--meeture-text-scale, 1))}
  .atelier-hero .line-hero-visual {height: 460px}
  .atelier-hero .hero-chinese h2 {font-size:calc(19px * var(--meeture-text-scale, 1))}
  .hero-case > img {height: 120px}
  .services-grid {gap: 0 30px}
  .booking-layout {grid-template-columns: 1fr; gap: 32px}
  .booking-aside {position: static; display: none}
  .service-detail {gap: 6%}
  .service-detail-visual {height: 350px}
}
@media(max-width:600px) {
  body {font-size:calc(15px * var(--meeture-text-scale, 1))}
  .header {height: 74px; padding-inline: 20px; gap: 12px}
  .logo-crop {width: 32px; height: 38px}
  .brand-word {font-size:calc(28px * var(--meeture-text-scale, 1))}
  .brand-word small {font-size:calc(6px * var(--meeture-text-scale, 1)); letter-spacing: 1.3px}
  .header-account {font-size:calc(10px * var(--meeture-text-scale, 1)); gap: 4px}
  .header-account .arrow {display: none}
  .language-switch {gap: 3px; border: 0; padding: 0}
  .language-switch > span {display: none}
  .language-switch select {font-size:calc(10px * var(--meeture-text-scale, 1)); width: 74px; padding-inline: 4px}
  .atelier-hero {grid-template-columns: 1fr; gap: 38px; padding: 30px 22px 35px}
  .atelier-hero .eyebrow {font-size:calc(8px * var(--meeture-text-scale, 1)); letter-spacing: 1.5px}
  .atelier-hero .editorial-title {font-size: clamp(68px,20vw,92px); margin: 26px 0 20px; letter-spacing: -3px}
  .atelier-hero .title-line {line-height: .94}
  .atelier-hero .hero-chinese {margin: 22px 0 10px}
  .atelier-hero .hero-chinese h2 {font-size:calc(19px * var(--meeture-text-scale, 1)); letter-spacing: 1px}
  .atelier-hero .hero-description {font-size:calc(12px * var(--meeture-text-scale, 1)); max-width: 320px}
  .atelier-hero .hero-actions {margin-top: 24px; gap: 18px}
  .atelier-hero .hero-actions .button {min-height: 48px; padding-inline: 18px; font-size:calc(12px * var(--meeture-text-scale, 1))}
  .atelier-hero .hero-actions .text-link {font-size:calc(11px * var(--meeture-text-scale, 1))}
  .hero-bottom-note {margin-top: 26px; font-size:calc(8px * var(--meeture-text-scale, 1))}
  .atelier-hero .line-hero-visual {height: 380px; width: 100%; max-width: 420px; justify-self: center}
  .atelier-hero .portrait-outline {width: 78%; height: 93%}
  .hero-case {width: 42%; left: 0; bottom: 13%; padding: 6px}
  .hero-case > img {height: 145px}
  .hero-case strong {font-size:calc(10px * var(--meeture-text-scale, 1))}
  .hero-case small {font-size:calc(6px * var(--meeture-text-scale, 1))}
  .hero-visual-label {left: 22%; font-size:calc(7px * var(--meeture-text-scale, 1)); gap: 8px}
  .hero-edition {right: -12px; font-size:calc(7px * var(--meeture-text-scale, 1))}
  .line-marquee {min-height: 62px; font-size:calc(24px * var(--meeture-text-scale, 1))}
  .section {padding: 44px 22px}
  .section-heading {display: block; margin-bottom: 24px}
  .section-heading h2 {font-size:calc(32px * var(--meeture-text-scale, 1)); letter-spacing: -1px}
  .section-heading .filters {margin-top: 24px}
  .filters {gap: 6px}
  .filter {min-height: 44px; font-size:calc(12px * var(--meeture-text-scale, 1)); padding-inline: 14px}
  .work-grid {gap: 20px; grid-template-columns: repeat(2,minmax(0,1fr))}
  .atelier-portfolio .work-grid:has(> .work-card:only-child) {grid-template-columns: 1fr}
  .atelier-portfolio .work-grid:has(> .work-card:only-child)::after {display: none}
  .work-card:only-child .work-image {aspect-ratio: 4/4.2}
  .work-bottom h3 {font-size:calc(13px * var(--meeture-text-scale, 1))}
  .work-bottom p {font-size:calc(9px * var(--meeture-text-scale, 1))}
  .work-bottom .arrow {font-size:calc(20px * var(--meeture-text-scale, 1))}
  .work-badge {font-size:calc(9px * var(--meeture-text-scale, 1)); padding: 6px 8px}
  .services-grid {grid-template-columns: 1fr}
  .service-card {padding: 24px 0; min-height: 136px; gap: 16px}
  .service-card h3 {font-size:calc(19px * var(--meeture-text-scale, 1))}
  .service-card p {font-size:calc(12px * var(--meeture-text-scale, 1))}
  .service-meta {font-size:calc(10px * var(--meeture-text-scale, 1)); gap: 7px}
  .service-section-links {gap: 12px 20px}
  .service-section-links .text-link {font-size:calc(11px * var(--meeture-text-scale, 1))}
  .atelier-journey {margin-top: 44px; padding-top: 24px}
  .journey-track {grid-template-columns: 1fr; gap: 22px}
  .journey-step {display: grid; grid-template-columns: 28px 1fr; gap: 3px 16px}
  .journey-step > span {grid-row: 1/3}
  .journey-step h4 {margin: 0; font-size:calc(15px * var(--meeture-text-scale, 1))}
  .journey-step p {margin: 0; font-size:calc(12px * var(--meeture-text-scale, 1))}
  .atelier-faq {display: block; margin-top: 32px}
  .atelier-faq h3 {font-size:calc(23px * var(--meeture-text-scale, 1))}
  .atelier-faq summary {font-size:calc(13px * var(--meeture-text-scale, 1)); min-height: 56px}
  .atelier-faq p {font-size:calc(12px * var(--meeture-text-scale, 1))}
  .line-invitation {padding: 60px 22px; min-height: 360px}
  .line-invitation h2 {font-size:calc(48px * var(--meeture-text-scale, 1))}
  .line-invitation p {font-size:calc(13px * var(--meeture-text-scale, 1))}
  .page-head {padding: 36px 22px 20px}
  .page-title {font-size:calc(34px * var(--meeture-text-scale, 1)); letter-spacing: -1px}
  .page-head > p {font-size:calc(12px * var(--meeture-text-scale, 1))}
  .service-directory {padding-top: 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; gap: 16px; max-width: 100%; margin-bottom: 24px}
  .service-detail {grid-template-columns: 1fr; gap: 24px; padding-block: 30px}
  .service-detail-visual {height: 270px}
  .service-detail-copy h2 {font-size:calc(25px * var(--meeture-text-scale, 1))}
  .service-detail-copy > p {font-size:calc(13px * var(--meeture-text-scale, 1))}
  .service-detail-copy .button {width: 100%; justify-content: space-between}
  .service-detail-copy > .text-link {margin-left: 0; margin-top: 8px}
  .studio-locations {grid-template-columns: 1fr; gap: 16px}
  .studio-location {padding: 22px}
  .studio-location-heading {margin-top: 38px; padding-top: 28px}
  .studio-location-heading h2 {font-size:calc(25px * var(--meeture-text-scale, 1))}
  .booking-layout {padding-top: 8px}
  .booking-section {margin-bottom: 28px; padding-top: 20px}
  .booking-section legend {font-size:calc(16px * var(--meeture-text-scale, 1))}
  .service-select {gap: 9px}
  .service-option {padding: 13px; min-height: 88px}
  .service-option strong {font-size:calc(13px * var(--meeture-text-scale, 1))}
  .service-option small {font-size:calc(7px * var(--meeture-text-scale, 1)); letter-spacing: 0}
  .form-grid {grid-template-columns: 1fr; gap: 20px}
  .field {font-size:calc(12px * var(--meeture-text-scale, 1))}
  .slot-grid {grid-template-columns: 1fr; gap: 9px}
  .booking-optional > summary {padding: 14px 16px}
  .optional-body {padding: 0 16px 20px}
  .consent {margin-block: 20px}
  .booking-submit-area {padding-top: 4px}
  .member-layout {display: flex; flex-direction: column; gap: 28px}
  .member-card {padding: 24px; width: 100%}
  .member-card .member-monogram {font-size:calc(72px * var(--meeture-text-scale, 1))}
  .member-actions {display: flex; flex-wrap: wrap; gap: 0 20px}
  .member-bookings {width: 100%}
  .member-bookings > .section-heading {display: flex; gap: 16px}
  .member-bookings > .section-heading h2 {font-size:calc(25px * var(--meeture-text-scale, 1))}
  .visit-card,.visit-empty {padding: 20px; margin-bottom: 20px}
  .visit-card h3 {font-size:calc(24px * var(--meeture-text-scale, 1))}
  .visit-card h3 em {margin-left: 8px}
  .visit-card .eyebrow {font-size:calc(8px * var(--meeture-text-scale, 1)); letter-spacing: 1px}
  .visit-actions {gap: 12px 20px}
  .booking-record {padding: 20px}
  .footer {padding: 36px 22px calc(100px + env(safe-area-inset-bottom)); gap: 16px; grid-template-columns: 1fr}
  .footer-links {gap: 0 22px; font-size:calc(11px * var(--meeture-text-scale, 1))}
  .footer > p {font-size:calc(10px * var(--meeture-text-scale, 1)); margin: 0}
  .mobile-nav {height: calc(65px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #f6f4eef7; border-color: var(--line); backdrop-filter: blur(12px)}
  .mobile-nav a {min-height: 54px; padding: 8px 0; font-size:calc(10px * var(--meeture-text-scale, 1)); gap: 5px}
  .mobile-nav a.active {color: var(--olive)}
  .sticky-booking {right: 16px; bottom: calc(82px + env(safe-area-inset-bottom)); width: auto; min-height: 48px; padding: 10px 14px; gap: 16px; left: auto; box-shadow: 0 4px 20px #25372c20}
  .sticky-booking .sticky-symbol,.sticky-booking small {display: none}
  .sticky-booking > span {font-size:calc(11px * var(--meeture-text-scale, 1))}
  .sticky-booking .sticky-arrow {font-size:calc(21px * var(--meeture-text-scale, 1))}
  .music-control {left: 16px; bottom: calc(82px + env(safe-area-inset-bottom)); right: auto}
  .music-toggle {min-height: 44px; padding-inline: 12px; font-size:calc(10px * var(--meeture-text-scale, 1))}
  .back-to-top {right: 16px; bottom: calc(146px + env(safe-area-inset-bottom))}
  .modal {padding: 30px 22px; max-width: calc(100vw - 24px)}
  .modal-title {font-size:calc(27px * var(--meeture-text-scale, 1))}
  .modal .visit-actions {gap: 10px}
  .modal .policy-copy {font-size:calc(13px * var(--meeture-text-scale, 1))}
}
body[data-page="booking"] .music-control, body[data-page="member"] .music-control,
body[data-page="booking"] .sticky-booking, body[data-page="member"] .sticky-booking {display: none}
body[data-page="booking"] .back-to-top {display: none}
.booking-step-pane[hidden] {display: none !important}
.booking-step-pane .form-step {font-size:calc(17px * var(--meeture-text-scale, 1)); font-family: var(--sans); letter-spacing: .5px; line-height: 1.6; color: var(--ink); margin-bottom: 22px}
.booking-form .service-option {padding: 20px 54px 20px 20px; min-height: 84px}
.booking-form .service-option strong {font-family: var(--sans); letter-spacing: .5px; margin-bottom: 6px; font-size:calc(15px * var(--meeture-text-scale, 1))}
.booking-form .service-option small {font-size:calc(9px * var(--meeture-text-scale, 1)); letter-spacing: .8px}
.booking-form .service-option::after {content: "○"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size:calc(20px * var(--meeture-text-scale, 1)); color: var(--muted)}
.booking-form .service-option.active::after {content: "✓"; color: var(--olive)}
.booking-subprojects {margin-top: 28px}
.booking-subprojects:empty {display: none}
.booking-option-title {font-family: var(--sans); font-size:calc(15px * var(--meeture-text-scale, 1)); font-weight: 500; line-height: 1.6; margin-bottom: 15px}
.booking-summary .booking-chosen-option {font-size:calc(14px * var(--meeture-text-scale, 1)); color: var(--olive); margin-top: 8px}
.service-detail-options {margin: 22px 0}
.service-detail-options h3 {font-size:calc(13px * var(--meeture-text-scale, 1)); margin-bottom: 10px}
.service-detail-options ul {padding-left: 18px; font-size:calc(14px * var(--meeture-text-scale, 1)); line-height: 1.9}
.service-body .service-subproject-preview {font-size:calc(12px * var(--meeture-text-scale, 1)); color: var(--olive); margin-top: 12px}
.booking-form .booking-form-nav {display: flex; flex-direction: column; gap: 4px; position: fixed; z-index: 25; bottom: 0; left: 50%; transform: translateX(-50%); width: calc(100% - 64px); max-width: 776px; padding: 12px 0 18px; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -12px 22px var(--paper)}
.booking-form .booking-form-nav > [hidden] {display: none !important}
.booking-form .booking-form-nav > .button {width: 100%; justify-content: space-between; min-height: 54px}
.booking-form .booking-form-nav > .text-link {width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 3px; padding: 8px 14px; text-align: center; justify-content: center; font-size:calc(12px * var(--meeture-text-scale, 1))}
body[data-page="booking"] .page-head {max-width: 840px; padding-inline: 32px; padding-bottom: 12px}
.booking-form[aria-busy="true"] {opacity: .7}
@media(max-width:600px) {
  .booking-layout {padding: 8px 22px 210px}
  body[data-page="booking"] .page-head {padding-inline: 22px}
  .booking-form .booking-form-nav {bottom: calc(65px + env(safe-area-inset-bottom)); width: calc(100% - 44px); padding: 8px 0 12px; gap: 0}
  .booking-form .service-option {min-height: 78px; padding: 16px 50px 16px 16px}
  .booking-form .service-option strong {font-size:calc(14px * var(--meeture-text-scale, 1))}
  .booking-form .service-option small {font-size:calc(8px * var(--meeture-text-scale, 1)); letter-spacing: .3px}
  .booking-step-pane .form-step {font-size:calc(16px * var(--meeture-text-scale, 1))}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior: auto}
  *, *::before, *::after {animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important}
}