/* Meeture: a soft clay surface layered over the original wine-and-paper identity. */
:root {
  --meeture-paper: #faf9f7;
  --meeture-surface: #ffffff;
  --meeture-ink: #302b2d;
  --meeture-wine: #5d2036;
  --meeture-wine-deep: #421b2b;
  --meeture-muted: #716b6d;
  --meeture-line: #dedbd8;
  --meeture-line-soft: #ece9e6;
  --meeture-copper: #89766c;
  --meeture-sage: #738176;
  --meeture-ease: cubic-bezier(.22, 1, .36, 1);
  --paper: var(--meeture-paper);
  --surface: var(--meeture-surface);
  --ink: var(--meeture-ink);
  --wine: var(--meeture-wine);
  --muted: var(--meeture-muted);
  --line: var(--meeture-line);
  --gold: var(--meeture-copper);
  --coral: var(--meeture-wine);
  --blush: var(--meeture-panel, #efedeb);
  --warm: var(--meeture-panel, #efedeb);
  --radius: 16px;
  --soft-shadow: 10px 10px 22px #dedbd8, -10px -10px 22px #ffffff;
}
html { scroll-padding-top: 92px; }
body { background: var(--paper); color: var(--ink); font-size:calc(15px * var(--meeture-text-scale, 1)); }
#app *, .header *, .footer *, .mobile-nav *, .sticky-booking *, .music-control * { letter-spacing: 0; }
::selection { color: var(--wine); background: #e9d9de; }
a, button { -webkit-tap-highlight-color: #5d203616; }
a:hover, button:hover { opacity: 1; }
:focus-visible { outline: 2px solid var(--wine); outline-offset: 5px; }
button:disabled { cursor: not-allowed; }

/* Identity and navigation retain the existing logo. */
.header { height: 80px; padding-inline: max(32px, calc((100vw - 1280px) / 2)); background: #faf9f7f5; border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.brand { gap: 12px; }
.brand-word { color: var(--wine); font: 400 32px/1 var(--serif); letter-spacing: 0; }
.brand-word small { color: var(--muted); font-size:calc(9px * var(--meeture-text-scale, 1)); letter-spacing: 0; }
.logo-crop { border-radius: 0; }
.desktop-nav { gap: 8px; }
.desktop-nav a { position: relative; min-height: 54px; padding-inline: 14px; border-radius: 0; }
.desktop-nav a > span { display: none; }
.desktop-nav a.active, .desktop-nav a:hover { background: transparent; color: var(--wine); }
.desktop-nav a::after { content: ""; position: absolute; height: 1px; left: 14px; right: 14px; bottom: 14px; background: var(--wine); transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--meeture-ease); }
.desktop-nav a:hover::after, .desktop-nav a.active::after { transform: scaleX(1); }
.header-account { min-height: 44px; padding-left: 18px; border-left: 1px solid var(--line); }
.header-account .arrow { transition: transform 180ms ease; }
.header-account:hover .arrow { transform: translate(2px, -2px); }
.language-switch select { min-height: 44px; }

/* Feedback is small and consistent; labels remain uncovered. */
.button { position: relative; min-height: 50px; gap: 28px; padding: 13px 22px; border: 1px solid var(--wine); border-radius: 2px; color: var(--meeture-surface, #fff); background: var(--wine); box-shadow: none; transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms var(--meeture-ease); }
.button::before, .button::after { display: none; }
.button > span { transition: transform 200ms var(--meeture-ease); }
.button:hover { background: var(--meeture-wine-deep); border-color: var(--meeture-wine-deep); color: var(--meeture-surface, #fff); box-shadow: none; }
.button:hover > span:last-child { transform: translate(2px,-2px); }
.button:active, .header-account:active { transform: translateY(1px); }
.button:disabled { opacity: .48; transform: none; }
.text-link { position: relative; min-height: 44px; border: 0; border-radius: 0; color: var(--wine); }
.text-link::after { content: ""; position: absolute; height: 1px; left: 0; right: 0; bottom: 6px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--meeture-ease); }
.text-link:hover::after { transform: scaleX(1); }
.text-link > span { transition: transform 200ms var(--meeture-ease); }
.text-link:hover > span:last-child { transform: translate(2px,-2px); }
.text-link:active { transform: translateY(1px); }
.eyebrow { color: var(--muted); font-size:calc(11px * var(--meeture-text-scale, 1)); line-height: 1.7; }
.eyebrow::before { display: none; }
.section { padding: 64px max(32px, calc((100vw - 1200px) / 2)); }
.section-heading { padding-bottom: 24px; border-bottom: 1px solid var(--line); gap: 28px; }
.section-heading h2 { margin-top: 12px; color: var(--ink); font-size:calc(32px * var(--meeture-text-scale, 1)); font-weight: 400; line-height: 1.4; }
.section-heading h2 em { color: var(--ink); font-style: normal; }
.section-aside { color: var(--muted); font-size:calc(14px * var(--meeture-text-scale, 1)); }

/* A complete editorial cover beside the identity, with independent text space. */
.creative-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .86fr); align-items: center; width: 100%; max-width: 1320px; height: auto; min-height: 0; margin: 0 auto; padding: 48px 40px; gap: 64px; background: var(--paper); overflow: hidden; }
.creative-hero::before, .creative-hero::after, .creative-hero .line-hero-copy::after { display: none; }
.creative-hero .line-hero-visual.hero-photograph { position: relative; inset: auto; z-index: auto; display: block; width: 100%; max-width: 480px; height: auto; min-height: 0; margin: 0; padding: 0; justify-self: end; align-self: center; }
.creative-hero .hero-photograph .portrait-window { width: 100%; height: auto; aspect-ratio: 3 / 4; margin: 0; border: 0; border-radius: 0; box-shadow: none; transform: none; background: transparent; }
.creative-hero .hero-photograph img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; filter: none; transform: none; }
.creative-hero .line-hero-copy { width: 100%; max-width: 560px; min-width: 0; padding: 0; align-self: center; }
.creative-hero .line-hero-copy .eyebrow { color: var(--wine); }
.creative-hero .editorial-title { width: auto; margin: 22px 0 24px; color: var(--wine); font: 400 104px/1 var(--serif); }
.creative-hero .title-line { display: block; padding: 0; line-height: 1; white-space: normal; overflow-wrap: anywhere; }
.creative-hero .hero-chinese { display: block; padding: 0; border: 0; margin: 0; }
.creative-hero .hero-chinese h2 { margin: 0; color: var(--wine); font-size:calc(32px * var(--meeture-text-scale, 1)); font-weight: 400; line-height: 1.55; }
.creative-hero .hero-description { margin: 18px 0 0; max-width: 420px; color: var(--meeture-ink, #514647); font-size:calc(16px * var(--meeture-text-scale, 1)); line-height: 1.8; white-space: pre-line; }
.creative-hero .hero-actions { margin-top: 32px; gap: 28px; flex-wrap: wrap; }
.creative-hero .hero-actions .text-link { color: var(--wine); }
.hero-image-note { display: block; position: static; margin-top: 8px; padding: 0; color: var(--muted); background: transparent; text-align: right; font-size:calc(10px * var(--meeture-text-scale, 1)); line-height: 1.6; }
.creative-hero.long-title .editorial-title { font-size:calc(58px * var(--meeture-text-scale, 1)); }
.brand-note { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px max(32px, calc((100vw - 1240px) / 2)); border-bottom: 1px solid var(--line); background: var(--paper); }
.brand-note p { margin: 0; color: var(--muted); font-size:calc(14px * var(--meeture-text-scale, 1)); line-height: 1.7; }
.brand-note .text-link { flex-shrink: 0; font-size:calc(13px * var(--meeture-text-scale, 1)); }

/* The name's meaning lives on the about page, without a decorative panel. */
.brand-manifesto { display: block; background: transparent; }
.brand-manifesto-full { padding: 12px 0 40px; margin-bottom: 36px; border: 0; border-bottom: 1px solid var(--line); }
.manifesto-intro h2 { margin: 18px 0; color: var(--wine); font-size:calc(30px * var(--meeture-text-scale, 1)); font-weight: 400; line-height: 1.5; }
.manifesto-intro p { max-width: 660px; margin: 0; color: var(--muted); font-size:calc(15px * var(--meeture-text-scale, 1)); line-height: 1.9; white-space: pre-line; }
.manifesto-meanings { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px; margin-top: 30px; }
.meaning-row { padding: 20px 0 0; border-top: 1px solid var(--line); }
.meaning-row h3 { display: flex; align-items: baseline; gap: 16px; margin: 0; color: var(--wine); font: 400 30px/1.2 var(--serif); }
.meaning-row small { color: var(--muted); font: 400 12px/1.5 var(--sans); }
.meaning-row p { margin: 12px 0 0; font-size:calc(13px * var(--meeture-text-scale, 1)); color: var(--muted); line-height: 1.8; }

/* Works and services stay truthful, including when no work is published yet. */
.filters { gap: 12px; flex-wrap: wrap; }
.filter { min-height: 44px; padding: 10px 12px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; color: var(--muted); }
.filter:hover, .filter.active { color: var(--wine); background: transparent; border-color: var(--wine); }
.filter.active { font-weight: 600; }
.work-grid > .work-card, .collection-grid > .collection-card { border: 1px solid var(--line); border-radius: 2px; background: var(--surface); box-shadow: none; transition: border-color 200ms ease, transform 200ms var(--meeture-ease); }
.work-grid > .work-card:hover, .collection-grid > .collection-card:hover { border-color: var(--wine); transform: translateY(-2px); box-shadow: none; }
.work-grid > .work-card:nth-child(n) .work-image { padding: 0; border-radius: 0; }
.work-image img, .collection-image, .collection-image img { border-radius: 0; }
.work-open, .work-badge, .collection-image > span { border-radius: 2px; }
.work-open { background: var(--wine); color: var(--paper); }
.portfolio-composition:has(.empty-editorial) { display: block; }
.empty-editorial { display: block; min-height: 0; padding: 32px 0; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: transparent; }
.empty-editorial .empty-copy { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0; }
.empty-editorial .empty-copy p { margin: 0; color: var(--muted); font-size:calc(15px * var(--meeture-text-scale, 1)); }
.empty-editorial .text-link { flex-shrink: 0; font-size:calc(13px * var(--meeture-text-scale, 1)); }
.creative-portfolio .all-works { margin-top: 20px; }
.creative-portfolio:has(.empty-editorial) .all-works { display: none; }
.creative-services { background: #f2f3f0; border-block: 1px solid var(--line); }
.creative-services::before { display: none; }
.creative-services .services-grid { grid-template-columns: repeat(6, minmax(0,1fr)); gap: 32px; margin-top: 32px; }
.creative-services .services-grid > .service-card:nth-child(n) { grid-column: span 2; }
.creative-services .services-grid > .service-card:nth-child(3n + 1):last-child { grid-column: 3 / span 2; }
.creative-services .services-grid > .service-card:nth-child(3n + 1):nth-last-child(2) { grid-column: 2 / span 2; }
.creative-services .services-grid > .service-card:nth-child(3n + 2):last-child { grid-column: 4 / span 2; }
.creative-services .service-card { display: grid; position: relative; min-width: 0; min-height: 280px; padding: 26px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; grid-template-columns: 1fr 28px; grid-template-rows: 24px auto; align-items: start; gap: 20px 12px; color: var(--ink); background: transparent; box-shadow: none; transition: border-color 200ms ease; }
.creative-services .service-card::before, .creative-services .service-card::after { display: none; }
.creative-services .service-card:hover { border-color: var(--wine); background: transparent; }
.service-card .service-number { grid-column: 1; grid-row: 1; align-self: start; color: var(--meeture-sage); font: 400 14px/1.5 var(--sans); opacity: 1; }
.service-card .service-body { grid-column: 1 / -1; grid-row: 2; }
.creative-services .service-card h3 { color: var(--ink); font-size:calc(22px * var(--meeture-text-scale, 1)); font-weight: 400; line-height: 1.5; }
.creative-services .service-card h3 > span { display: block; margin-top: 6px; color: var(--muted); font-size:calc(11px * var(--meeture-text-scale, 1)); line-height: 1.6; }
.service-card .round-arrow { grid-column: 2; grid-row: 1; width: 28px; height: 28px; align-self: start; border: 0; border-radius: 0; background: transparent; color: var(--wine); transition: transform 200ms ease; }
.service-card:hover .round-arrow { transform: translate(2px,-2px); background: transparent; }
.creative-services .service-card p { margin-top: 16px; color: var(--muted); font-size:calc(14px * var(--meeture-text-scale, 1)); line-height: 1.85; }
.creative-services .service-card .service-subproject-preview { display: none; }
.service-meta { gap: 12px; }
.service-meta span { padding: 0; border: 0; border-radius: 0; color: var(--muted); background: transparent; font-size:calc(12px * var(--meeture-text-scale, 1)); }
.service-section-links { padding-top: 20px; margin-top: 24px; border-top: 1px solid var(--line); }
.collection-coming, .collection-coming.product { border-radius: 2px; border-color: var(--line); background: transparent; }
.collection-coming .coming-symbol { color: var(--meeture-sage); }
.collection-coming p { color: var(--muted); }
.collection-detail-images img { border-radius: 2px; }

/* A single wine band is enough. */
.line-invitation.creative-invitation { display: flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 0; padding: 62px max(32px, calc((100vw - 1200px) / 2)); background: var(--wine); border: 0; color: var(--paper); text-align: left; }
.creative-invitation > div:first-child { flex: 1; min-width: 0; }
.line-invitation.creative-invitation::before, .line-invitation.creative-invitation::after { display: none; }
.creative-invitation .eyebrow { color: #dbc9cf; }
.creative-invitation h2, .creative-invitation h2 em { margin: 14px 0; color: var(--paper); font: 400 32px/1.5 var(--sans); }
.creative-invitation p { margin: 0; color: #e7dce0; font-size:calc(15px * var(--meeture-text-scale, 1)); line-height: 1.8; white-space: pre-line; }
.creative-invitation .invitation-actions { flex-shrink: 0; margin: 0; }
.creative-invitation .button { background: var(--paper); color: var(--wine); border-color: var(--paper); }
.creative-invitation .button:hover { background: #eee8eb; border-color: #eee8eb; }

/* Inner pages use the same restrained surfaces. */
.page-head { position: relative; background: var(--paper); border-bottom: 1px solid var(--line); }
.page-head::before, .page-head::after { display: none; }
.page-title { font-size:calc(42px * var(--meeture-text-scale, 1)); line-height: 1.4; font-weight: 400; color: var(--wine); }
.page-title em { font-size:calc(21px * var(--meeture-text-scale, 1)); font-weight: 400; color: var(--muted); }
.service-detail-visual, .service-detail-visual img, .service-detail-options, .studio-location, .beauty-path-step, .beauty-note, .expression-note, .atelier-faq, .atelier-journey { border-radius: 2px; box-shadow: none; border-color: var(--line); }
.service-detail-options { background: var(--surface); }
.service-line-art { background: #efefeb; }
.service-line-art::before { display: none; }
.service-line-art .contour-art { opacity: .35; }
.beauty-path-step:hover { background: #f0f1ed; }
.beauty-note summary { min-height: 64px; }
.beauty-note[open] .note-toggle { color: var(--wine); }
.booking-form { border-radius: 2px; border-color: var(--line); background: var(--surface); box-shadow: none; }
.booking-progress { padding: 0; gap: 8px; border-radius: 0; background: transparent; }
.booking-progress span { border-radius: 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.booking-progress span.active { color: var(--wine); border-color: var(--wine); background: transparent; box-shadow: inset 0 -1px var(--wine); }
.booking-form .service-option { border-radius: 2px; background: transparent; border-color: var(--line); }
.booking-form .service-option:hover { background: #f7f6f4; }
.booking-form .service-option.active { background: var(--meeture-panel, #f6eff1); border-color: var(--wine); box-shadow: inset 2px 0 var(--wine); }
.booking-summary, .booking-optional, .booking-package-notice { border-radius: 2px; border-color: var(--line); background: #f4f2f0; }
.field input, .field select, .field textarea, .auth-form input, .auth-form select, .auth-form textarea { border-radius: 2px; border: 1px solid #b9b1b3; background: var(--surface); transition: border-color 180ms ease, box-shadow 180ms ease; }
.field :is(input, select, textarea):focus, .auth-form :is(input, select, textarea):focus { border-color: var(--wine); box-shadow: 0 0 0 3px #5d203611; }
.time-slot > span, .style-choice span { border-radius: 2px; }
.time-slot input:checked + span { background: var(--wine); border-color: var(--wine); color: var(--paper); }
.time-slot input:focus-visible + span, .style-choice input:focus-visible + span { outline: 2px solid var(--wine); outline-offset: 3px; }
.booking-form .booking-form-nav > .text-link { border-radius: 2px; }
.member-card { border-radius: 2px; }
.member-card .button { background: var(--paper); border-color: var(--paper); color: var(--wine); }
.member-card .button:hover { background: #eee8eb; color: var(--wine); }
.member-card .text-link::after { background: var(--paper); }
.visit-card, .booking-record { border-radius: 2px; box-shadow: none; border-color: var(--line); }
.status-badge { border-radius: 2px; }
dialog { border: 1px solid var(--line); border-radius: 2px; background: var(--paper); box-shadow: 0 20px 80px #30232926; }
.modal-close { border: 1px solid var(--line); border-radius: 50%; color: var(--wine); transition: background-color 180ms ease; }
.modal-close:hover { transform: none; background: var(--meeture-panel, #efedeb); }
.email-auth-shell .auth-tabs { padding: 0; border-radius: 0; border-bottom: 1px solid var(--line); background: transparent; }
.auth-tabs button { border-radius: 0; border-bottom: 1px solid transparent; }
.auth-tabs button.active { border-bottom-color: var(--wine); box-shadow: inset 0 -1px var(--wine); background: transparent; color: var(--wine); }
.auth-methods { padding: 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); }
.auth-methods button { min-height: 44px; border-radius: 0; }
.auth-methods button[aria-pressed="true"] { background: transparent; color: var(--wine); box-shadow: inset 0 -2px var(--wine); font-weight: 600; }
.auth-private-notice, .auth-registration-steps, .auth-verified { border-radius: 2px; border-color: var(--line); }
.email-auth-shell .consent, .booking-form .consent { color: var(--muted); }
.consent input { accent-color: var(--wine); }
#toast { border-radius: 2px; }
.footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 22px 48px; margin: 0; padding: 42px max(32px, calc((100vw - 1248px) / 2)) 34px; background: var(--paper); color: var(--muted); border-top: 1px solid var(--line); }
.footer-brand, .footer .text-link { color: var(--wine); }
.footer-brand { grid-column: 1; grid-row: 1; font-size:calc(40px * var(--meeture-text-scale, 1)); }
.footer-brand span, .footer p, .footer small, .footer .footer-note { color: var(--muted); }
.footer > p { grid-column: 2; grid-row: 1; margin: 12px 0 0; text-align: right; }
.footer-links { grid-column: 1 / -1; }
.footer > small { grid-column: 1 / -1; }
.footer .motion-toggle { grid-column: 1 / -1; justify-self: start; }
.footer a:hover { color: var(--wine); }
.sticky-booking { border-radius: 2px; border: 1px solid var(--wine); background: var(--wine); box-shadow: 0 4px 14px #30232912; }
.music-toggle { border: 1px solid var(--line); border-radius: 2px; background: var(--paper); color: var(--wine); min-height: 44px; }
.back-to-top { border: 1px solid var(--line); border-radius: 50%; }
.mobile-nav { border-top: 1px solid var(--line); background: #faf9f7fa; }
.mobile-nav a { position: relative; min-height: 52px; border-radius: 0; background: transparent; }
.mobile-nav a.active { color: var(--wine); background: transparent; }
.mobile-nav a.active::before { display: block; content: ""; position: absolute; top: 0; left: 26%; right: 26%; width: auto; height: 2px; background: var(--wine); border-radius: 0; }

@media (max-width: 1100px) and (min-width: 761px) {
  .creative-hero { padding: 40px 32px; gap: 32px; }
  .creative-hero .line-hero-copy { width: 100%; }
  .creative-hero .editorial-title { font-size:calc(68px * var(--meeture-text-scale, 1)); }
  .creative-hero .hero-chinese h2 { font-size:calc(26px * var(--meeture-text-scale, 1)); }
  .creative-services .service-card h3 { font-size:calc(20px * var(--meeture-text-scale, 1)); }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 82px; }
  body { font-size:calc(15px * var(--meeture-text-scale, 1)); }
  .header { height: 72px; padding-inline: 20px; gap: 12px; }
  .brand { gap: 8px; }
  .brand-word { font-size:calc(28px * var(--meeture-text-scale, 1)); }
  .brand-word small { display: block; margin-top: 6px; font-size:calc(8px * var(--meeture-text-scale, 1)); }
  .header-account { border: 0; padding: 0; }
  .logo-crop { width: 32px; height: 34px; }
  .logo-crop img { width: 65px; height: 65px; left: -16px; top: -14px; }
  .section { padding: 42px 24px; }
  .creative-hero { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; padding: 28px 24px 32px; gap: 28px; align-items: start; }
  .creative-hero .line-hero-visual.hero-photograph { max-width: 440px; justify-self: center; }
  .creative-hero .line-hero-copy { width: 100%; max-width: 440px; justify-self: center; align-self: start; }
  .creative-hero .line-hero-copy .eyebrow { display: none; }
  .creative-hero .editorial-title { font-size:calc(48px * var(--meeture-text-scale, 1)); line-height: 1; margin: 0 0 16px; }
  .creative-hero .hero-chinese h2 { font-size:calc(24px * var(--meeture-text-scale, 1)); line-height: 1.6; }
  .creative-hero .hero-description { margin-top: 10px; font-size:calc(16px * var(--meeture-text-scale, 1)); }
  .creative-hero .hero-actions { gap: 24px; margin-top: 22px; }
  .creative-hero .hero-actions .button { min-height: 48px; padding: 12px 18px; font-size:calc(14px * var(--meeture-text-scale, 1)); }
  .hero-image-note { font-size:calc(10px * var(--meeture-text-scale, 1)); }
  .creative-hero.long-title .editorial-title { font-size:calc(38px * var(--meeture-text-scale, 1)); }
  .brand-note { padding: 16px 24px; gap: 16px; }
  .brand-note p { font-size:calc(12px * var(--meeture-text-scale, 1)); }
  .brand-note .text-link { font-size:calc(12px * var(--meeture-text-scale, 1)); }
  .brand-manifesto-full { padding: 0 0 28px; margin-bottom: 28px; }
  .manifesto-intro h2 { font-size:calc(25px * var(--meeture-text-scale, 1)); }
  .manifesto-intro p { font-size:calc(14px * var(--meeture-text-scale, 1)); }
  .manifesto-meanings { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .meaning-row { padding-top: 18px; }
  .meaning-row h3 { font-size:calc(28px * var(--meeture-text-scale, 1)); }
  .section-heading { align-items: flex-start; gap: 16px; padding-bottom: 20px; }
  .section-heading h2 { font-size:calc(27px * var(--meeture-text-scale, 1)); }
  .section-aside { font-size:calc(13px * var(--meeture-text-scale, 1)); }
  .filters { gap: 6px; }
  .filter { padding-inline: 10px; }
  .empty-editorial { padding-block: 24px; }
  .empty-editorial .empty-copy { align-items: flex-start; flex-direction: column; gap: 8px; }
  .empty-editorial .empty-copy p { font-size:calc(14px * var(--meeture-text-scale, 1)); }
  .creative-services .services-grid { grid-template-columns: minmax(0,1fr); gap: 24px; margin-top: 24px; }
  .creative-services .services-grid > .service-card:nth-child(n) { grid-column: 1; }
  .creative-services .service-card { min-height: 0; padding: 22px 0 0; grid-template-columns: 28px minmax(0,1fr) 24px; grid-template-rows: auto; gap: 18px; }
  .service-card .service-number { grid-column: 1; grid-row: 1; margin-top: 5px; font-size:calc(13px * var(--meeture-text-scale, 1)); }
  .service-card .service-body { grid-column: 2; grid-row: 1; }
  .service-card .round-arrow { grid-column: 3; grid-row: 1; width: 24px; height: 24px; }
  .creative-services .service-card h3 { font-size:calc(20px * var(--meeture-text-scale, 1)); }
  .creative-services .service-card h3 > span { font-size:calc(10px * var(--meeture-text-scale, 1)); }
  .creative-services .service-card p { font-size:calc(14px * var(--meeture-text-scale, 1)); }
  .line-invitation.creative-invitation { align-items: flex-start; flex-direction: column; gap: 28px; padding: 42px 24px; }
  .creative-invitation h2 { font-size:calc(25px * var(--meeture-text-scale, 1)); }
  .creative-invitation p { font-size:calc(14px * var(--meeture-text-scale, 1)); }
  .page-head { padding-inline: 24px; }
  .page-title { font-size:calc(30px * var(--meeture-text-scale, 1)); }
  .page-title em { font-size:calc(17px * var(--meeture-text-scale, 1)); }
  .booking-layout { padding-inline: 18px; }
  .booking-form { padding: 20px; }
  .booking-form .service-option { padding: 16px; }
  .booking-progress span { font-size:calc(12px * var(--meeture-text-scale, 1)); }
  .member-card { position: relative; top: auto; }
  .footer { grid-template-columns: 1fr; padding-inline: 24px; }
  .footer-brand, .footer > p, .footer-links, .footer > small, .footer .motion-toggle { grid-column: 1; grid-row: auto; }
  .footer > p { margin-top: 0; text-align: left; }
  .music-control, .sticky-booking { bottom: calc(90px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
  .header { padding-inline: 16px; }
  .header-account { display: none; }
  .creative-hero, .section, .page-head, .brand-note { padding-inline: 20px; }
  .creative-hero .editorial-title { font-size:calc(68px * var(--meeture-text-scale, 1)); }
  .creative-hero .hero-chinese h2 { font-size:calc(22px * var(--meeture-text-scale, 1)); }
  .creative-services .service-card { gap: 12px; }
  .brand-note { flex-wrap: wrap; gap: 4px; }
}
@media (hover: none) { .work-grid > .work-card:hover, .collection-grid > .collection-card:hover { transform: none; } }
body[data-motion="off"] .button, body[data-motion="off"] .button > span, body[data-motion="off"] .text-link, body[data-motion="off"] .text-link::after, body[data-motion="off"] .desktop-nav a::after, body[data-motion="off"] .service-card .round-arrow { transition: none; }
@media (prefers-reduced-motion: reduce) { .button, .button > span, .text-link, .text-link::after, .desktop-nav a::after, .service-card .round-arrow { transition: none; } }

/* Standalone customer journal only; staff tools remain unchanged. */
body[data-customer] { --flow-line: var(--line); --flow-muted: var(--muted); --flow-ink: var(--wine); }
body[data-customer] .flow-card, body[data-customer] .flow-report, body[data-customer] .flow-empty { border-radius: 2px; border-color: var(--line); box-shadow: none; }
body[data-customer] .flow-nav a { min-height: 44px; }
body[data-customer] .flow-brand small { font: 12px var(--sans); margin-left: 8px; letter-spacing: 0; }
body[data-customer] .flow-button { border-radius: 2px; background: var(--wine); border-color: var(--wine); }