* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Prevent FOUC (flash of untranslated content): hide elements marked for i18n
   until our translation script runs and makes them visible. translatePage()
   will set visibility back to visible after replacing text. */
[data-i18n] { visibility: hidden; }

/* Booking terms: keep the checkbox row visible even before translatePage()
  runs so users can always see the consent control. */
.booking-terms__summary,
.booking-terms__agree-text {
  visibility: visible;
}

/* Contact form required marker (must stay visible even while [data-i18n] is hidden) */
.contact-form-group label .required {
  visibility: visible;
  opacity: 1;
  color: inherit;
  font-weight: 400;
  margin-left: 0.35rem;
  font-size: 0.92em;
  letter-spacing: 0;
  white-space: nowrap;
  text-transform: none;
}

/* NOTE: The services page no longer uses a `data-service-panel="kimono"` panel.
  Any panel-scoped overrides for it were removed to avoid dead CSS and to ensure
  nothing can accidentally impact `kimonoprice`.
  If that panel is reintroduced in the future, add its styles back in a
  dedicated, clearly-scoped section. */

/* Booking CTA buttons are visible site-wide. */


html {
  /* Smooth scrolling can feel "laggy" and amplify tearing on some devices,
     especially with heavy pages. Keep default native scrolling.
     If you need smooth scroll for anchor jumps only, we can implement it
     in JS for clicks instead of global CSS. */
  scroll-behavior: auto;
}

/* Reduce scroll jank by allowing the browser to skip offscreen rendering.
   This is especially helpful on long pages and image-heavy sections. */
section {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}

/* Make sure above-the-fold sections render normally (avoid any delayed paint) */
.navbar {
  content-visibility: visible;
}

/* --- Services lite mode (iOS/WebView stability) ---
   When the informational kimonoprice tab is active we reduce offscreen rendering
   and isolate heavy card/image subtrees to lower memory spikes.
   Enabled by JS: documentElement.dataset.liteMode = 'true'.
*/
html[data-lite-mode="true"] .services-grid .service-panel {
  /* Contain layout & paint work within each panel; reduces ripple effect of
     layout recalcs during tab swaps. */
  contain: layout paint style;
}

/* Only the active panel needs full rendering. Allow browser to skip work for
   offscreen panels while keeping layout stable. */
@supports (content-visibility: auto) {
  html[data-lite-mode="true"] .services-grid .service-panel {
    content-visibility: auto;
    contain-intrinsic-size: 1400px;
  }

  html[data-lite-mode="true"] .services-grid .service-panel.active {
    content-visibility: visible;
  }

  /* Heavy subtree: cards + images */
  html[data-lite-mode="true"] .services-grid .service-card {
    content-visibility: auto;
    contain-intrinsic-size: 900px;
  }
}

/* iOS Safari doesn't support content-visibility in older versions; contain is
   still useful as a safe fallback. */
html[data-lite-mode="true"] .services-grid img {
  /* Encourage browsers to decode async and avoid blocking render. */
  image-rendering: auto;
}

/* --- Hero canvas (homepage) ---
   Replaces the old mosaic with a single 16:9 stage.
   - Full-bleed width
   - Keeps a stable 16:9 canvas (responsive)
   - Supports image or video media
*/
.hero-canvas {
  position: relative;
  width: 100%;
  /* The navbar is fixed; reserve its height so the hero starts right under it.
     The real value is set dynamically by JS on `:root` as `--nav-offset`. */
  padding-top: var(--nav-offset, 76px);
  margin: 0;
  background: #000;
}

.hero-canvas__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Red box: the stage itself is the 16:9 area.
     The navbar offset is handled by `.hero-canvas` padding, not by shrinking the stage. */
  height: 56.25vw;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}

@supports not (aspect-ratio: 16 / 9) {
  .hero-canvas__stage {
    height: 0;
    padding-top: 56.25%; /* 16:9 */
    min-height: 0;
    max-height: none;
  }
}

.hero-canvas__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Default: no scale animation. (Video slides can stutter when the compositor
     layer is scaled; keep them stable.) */
  transform: none;
  transition: opacity 520ms ease;
}

/* Keep the subtle scale-in effect for image slides only. */
.hero-canvas__slide[data-hero-slide-type="image"] {
  transform: scale(1.01);
  transition: opacity 520ms ease, transform 900ms ease;
}

.hero-canvas__slide.is-active {
  opacity: 1;
  transform: none;
}

.hero-canvas__slide.is-active[data-hero-slide-type="image"] {
  transform: scale(1);
}

.hero-canvas__media {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.hero-canvas__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.08) 0%,
    rgba(0,0,0,0.20) 55%,
    rgba(0,0,0,0.55) 100%
  );
  pointer-events: none;
}

.hero-canvas__caption {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 4vw, 2.2rem);
  transform: translateX(-50%);
  width: min(1100px, calc(100% - 3rem));
  text-align: center;
  pointer-events: none;
}

.hero-canvas__subtitle {
  margin: 0 0 0.6rem 0;
  font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}

.hero-canvas__title {
  margin: 0;
  font-size: clamp(1.15rem, 3.1vw, 2.2rem);
  font-weight: 650;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

.hero-canvas__controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Tap-to-play overlay (used when mobile autoplay is blocked) */
.hero-canvas.hero-canvas--needs-tap .hero-canvas__controls {
  pointer-events: auto;
}

.hero-canvas.hero-canvas--needs-tap .hero-canvas__controls::before {
  content: "Tap to play";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0.75rem 1.1rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.92);
  font-weight: 600;
  letter-spacing: 0.05em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 700px) {
  .hero-canvas.hero-canvas--needs-tap .hero-canvas__controls::before {
    content: "Click to play";
    font-size: 0.95rem;
  }
}

@media (max-width: 900px) {
  .hero-canvas__caption {
    width: min(84vw, 21.5rem);
    bottom: clamp(0.75rem, 4.6vw, 1.6rem);
  }

  .hero-canvas__title {
    max-width: 14ch;
    font-size: clamp(1.32rem, 4.9vw, 1.8rem);
    line-height: 1.08;
  }
}


@media (max-width: 700px) {
  .hero-canvas__caption {
    width: min(82vw, 18.8rem);
    top: auto;
    bottom: clamp(0.55rem, 3.9vw, 1.35rem);
    transform: translateX(-50%);
  }

  .hero-canvas__subtitle {
    display: block;
    margin: 0 0 0.18rem 0;
    max-width: 30ch;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(0.54rem, 1.92vw, 0.66rem);
    line-height: 1.18;
    font-weight: 500;
    letter-spacing: 0.09em;
    color: rgba(255, 255, 255, 0.6);
  }

  .hero-canvas__title {
    margin: 0 auto;
    max-width: 14.2ch;
    font-size: clamp(1.18rem, 4.5vw, 1.58rem);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: 0.01em;
    white-space: pre-line;
    text-shadow: none;
    text-wrap: balance;
  }

  html[lang="zh"] .hero-canvas__title::first-line,
  html[lang="ja"] .hero-canvas__title::first-line {
    font-size: 1.16em;
    font-weight: 650;
    letter-spacing: 0.02em;
  }
}

@media (max-width: 380px) {
  .hero-canvas__caption {
    width: min(84vw, 17rem);
    bottom: clamp(0.5rem, 3.5vw, 1.05rem);
  }

  .hero-canvas__title {
    max-width: 13.8ch;
    font-size: clamp(1.08rem, 4.2vw, 1.44rem);
  }

  .hero-canvas__subtitle {
    font-size: clamp(0.52rem, 1.82vw, 0.62rem);
    color: rgba(255, 255, 255, 0.58);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-canvas__slide {
    transition: none;
    transform: none;
  }
}

:root {
  --accent: #1a8885;
  --accent-dark: #0f5e5b;
  --ink: #1f1f1f;
  --graphite: #333333;
  --sand: #f5f3ef;
  --shell: #faf7f2;
  --cloud: #ffffff;

  /* Typography (system fonts only)
     Modern, commercial feel with consistent Latin + CJK fallback.
     - Body: clean UI sans
     - Heading: slightly heavier UI sans (no serif to avoid mixed vibe)
  */
  --font-sans-latin: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-sans-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
    "Noto Sans SC", "Heiti SC", sans-serif;
  --body-font: var(--font-sans-latin), var(--font-sans-cjk);
  --heading-font: var(--body-font);

  /* Service area typography variables (easily overridden) */
  --service-heading-font: var(--heading-font);
  --service-heading-size: clamp(1.6rem, 2.8vw, 2.2rem);
  --service-feature-size: 0.99rem; /* list items, includes */
  --service-body-size: 0.95rem;    /* paragraph / description */
  --service-line-height: 1.5;
  --service-accent: var(--accent);
  --service-color: rgba(31,31,31,0.88);
  --service-price-size: 1.6rem;
  --service-price-letter-spacing: 0.14em;
}

/* Layout: default centered page container
   Many sections (including Services) wrap content in a `.container` element.
   Ensure it has a max-width and centered margins on desktop; mobile overrides
   the padding in the media query near the end of the file. */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

body {
  font-family: var(--body-font);
  color: var(--graphite);
  line-height: 1.65;
  overflow-x: hidden;
  background: var(--cloud);
  /* base typography scale */
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography / Visual rhythm */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  color: var(--ink);
  margin: 0 0 0.6rem 0;
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.6rem, 3.6vw, 2.6rem); }
h2 { font-size: clamp(1.25rem, 2.6vw, 1.75rem); }
h3 { font-size: 1.05rem; }

p {
  margin: 0 0 1rem 0;
  color: rgba(31,31,31,0.85);
  font-size: 0.98rem;
}

/* ---- Lightweight scroll animation helpers ----
   Elements that should animate on scroll should have the class
   `animate-on-scroll`. The JS will toggle `.in-view` when the element
   enters the viewport. Animations are intentionally limited to
   transform and opacity to stay on the compositor thread. */
.animate-on-scroll {
  transform: translateY(12px);
  opacity: 0;
  transition: transform 420ms cubic-bezier(.2,.9,.2,1), opacity 320ms ease;
  /* Only promote to a composited layer when the element is actually animating. */
  will-change: auto;
}
.animate-on-scroll.in-view {
  transform: translateY(0);
  opacity: 1;
  will-change: transform, opacity;
}

/* Small helper: ensure feature-stack elements promote to their own
   compositing layer when animating. Use sparingly to avoid excessive GPU memory. */
.feature-stack__panel {
  will-change: transform;
}

/* Small helpers for visual harmony */
.muted { color: rgba(31,31,31,0.6); }
.lead { font-size: 1.05rem; color: rgba(31,31,31,0.9); }

/* Card / service styles */
.service-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  padding: 1rem;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.98));
  box-shadow: 0 10px 30px rgba(17,17,17,0.05);
  margin-bottom: 1rem;
}

.service-card.reverse { grid-auto-flow: dense; }

.service-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  object-fit: cover;
}

.service-content h2 {
  margin-bottom: 0.45rem;
  font-family: var(--service-heading-font);
  font-size: var(--service-heading-size);
  color: var(--service-color);
  line-height: 1.15;
  letter-spacing: 0;
}
.service-features {
  margin: 0.6rem 0 0.9rem 0;
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.service-features li {
  display:flex;
  gap:0.65rem;
  align-items:center;
  color: var(--service-color);
  font-size: var(--service-feature-size);
}
.service-features li i { /* removed: icon elements are no longer used */
  display: none; /* keep this harmless fallback in case any <i> remains elsewhere */
}

.service-content {
  display: flex;
  flex-direction: column;
}

.service-price {
  font-family: var(--service-heading-font);
  font-weight: 600;
  color: rgba(31,31,31,0.86);
  margin: 0.6rem 0 0.6rem 0;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

/* Let DOM order control price vs CTA. Removed forced ordering so markup determines layout. */
.service-content .btn-primary { margin-top: 0; align-self: flex-start; }

/* Price + description grouping */
.price-block {
  display: flex;
  flex-direction: column;
  gap: 0.24rem; /* tightened for compact price + description */
  margin-top: 0.12rem;
}
.price-block .service-price {
  margin: 0; /* remove extra vertical space inside the compact price-block */
  line-height: 1.05;
}

/* Make price-block a distinct, standalone module */
.price-block {
  margin: 0.6rem 0 0.6rem 0;
  /* make the price and its short description share the same width
     by using a single-column grid sized to the widest child */
  display: inline-grid;
  grid-auto-flow: row;
  gap: 0.18rem;
  padding: 0.4rem 0; /* keep vertical rhythm */
  background: transparent;
  border-left: none;
  border-radius: 0;
}
.price-block .service-price {
  font-size: 1.9rem; /* Larger price text */
  font-weight: 800;
  color: var(--accent-dark);
  letter-spacing: 0.02em;
  line-height: 1.05;
}

html[lang="ja"] .service-price__currency,
html[lang="zh"] .service-price__currency {
  font-size: 0.7em;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

html[lang="zh"] .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .price-block .service-price .service-price__main,
html[lang="zh"] .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .price-block .service-price .service-price__local {
  display: block;
}

html[lang="zh"] .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .price-block .service-price .service-price__local {
  margin-top: 0.28rem;
  font-family: var(--body-font);
  font-size: clamp(0.72rem, 0.42em, 0.86rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  color: rgba(31, 31, 31, 0.52);
}

html[lang="zh"] .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .price-block .service-price .service-price__currency-label {
  display: inline-block;
  margin-right: 0.32rem;
  font-size: 0.58em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  vertical-align: 0.12em;
}

html[lang="zh"] .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .price-block .service-price .service-price__amount {
  display: inline-block;
}

html[lang="zh"] .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .price-block .service-price .service-price__unit {
  display: inline-block;
  margin-left: 0.2rem;
  font-size: 0.52em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: 0.16em;
}

/* Chinese-only helper line under JPY package price (auxiliary, in normal flow). */
html[lang="zh"] .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .price-block .service-price[data-rmb-amount]:not([data-rmb-amount=""])::after {
  content: attr(data-rmb-amount) " " attr(data-rmb-note);
  display: block;
  margin-top: 0.18rem;   /* slightly closer to JPY main price */
  margin-bottom: 0.58rem; /* more breathing room before service text */
  font-family: var(--body-font);
  font-size: 0.38em;
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: 0.004em; /* tighten micro-spacing so "(ref.)" reads closer */
  color: rgba(31, 31, 31, 0.42);
  text-align: inherit;
  width: 100%;
  max-width: 100%;
}

html[lang="zh"] .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .price-block .service-text .package-includes__highlight {
  margin-top: 0.84rem; /* +~5px extra breathing room from the line above */
}
.price-block .service-text {
  margin: 0;
  color: rgba(31,31,31,0.78);
  font-size: 0.8rem; /* Smaller helper text */
  opacity: 0.95;
  /* ensure the text's width follows the grid column (same width as price) */
  display: block;
}
.service-text {
  font-size: var(--service-body-size);
  color: var(--service-color);
  margin: 0;
  line-height: var(--service-line-height);
}
.service-text strong {
  font-weight: 800;
  color: var(--accent-dark);
  background: rgba(26, 136, 133, 0.12);
  padding: 0.05em 0.3em;
  border-radius: 0.25em;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

.service-text .package-includes__highlight {
  display: inline-block;
}

@media (max-width: 640px) {
  .service-text .package-includes__highlight {
    margin-top: 0.2rem;
  }

  .price-block {
    gap: 0.5rem;
    padding: 0.65rem 0;
  }
}

/* Price + CTA inline grouping: price module next to primary CTA */
.price-cta {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 0.6rem;
}
.price-cta .price-block {
  flex: 0 0 auto;
}

.booking-submit {
  margin-top: 1rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
}

.booking-submit .btn-primary {
  min-width: 220px;
  justify-content: center;
}

/* Success popup shown after booking submit */
.success-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  z-index: 2000;
}

.success-modal.is-visible {
  display: flex;
}

.success-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.success-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: rgba(10, 10, 10, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 1.4rem 1.4rem 1.2rem;
  color: #fff;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.35);
}

.success-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.6rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.success-modal__content h3 {
  margin: 0 0 0.6rem;
  font-size: 1.25rem;
  text-align: center;
}

.success-modal__text {
  margin: 0 0 1.05rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.45;
}

.success-modal__content .btn-primary {
  width: 100%;
  justify-content: center;
}

/* Booking success page */
.booking-success {
  padding: 48px 0 72px;
  text-align: center;
}

.booking-success__status {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent-dark);
  margin-bottom: 24px;
}

.booking-success__status p {
  margin: 0;
}

.booking-success__slot {
  margin: 0.4rem 0 0.75rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: rgba(31, 31, 31, 0.78);
}

.booking-success__slot-value {
  margin: 0 0.2rem;
  color: rgba(31, 31, 31, 0.92);
}

.booking-success__header-notes {
  display: grid;
  gap: 0.45rem;
  max-width: 720px;
  margin: 0 auto;
  font-size: 1rem;
  color: rgba(31, 31, 31, 0.7);
  line-height: 1.6;
}

.booking-success-header,
.booking-success-header h1,
.booking-success-header p,
.booking-success-header .booking-success__slot,
.booking-success-header .booking-success__slot-value,
.booking-success-header .booking-success__header-notes,
.booking-success-header .booking-success__header-notes p {
  color: #fff;
}

.booking-success__panel {
  background: #fff;
  border: 1px solid rgba(31, 31, 31, 0.08);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.booking-success__panel h2 {
  margin: 0 0 16px;
  font-size: 1.1rem;
  color: var(--accent-dark);
}

.booking-success__details {
  margin: 0;
  display: grid;
  gap: 12px;
  justify-items: stretch;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.booking-success__details div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  align-items: start;
  text-align: left;
}

.booking-success__details dt {
  font-weight: 600;
  color: rgba(31, 31, 31, 0.65);
  text-align: right;
}

.booking-success__details dd {
  margin: 0;
  font-weight: 600;
  color: rgba(31, 31, 31, 0.9);
  text-align: left;
}

.booking-success__hint {
  margin: 0.85rem 0 0;
  color: rgba(31, 31, 31, 0.55);
  font-size: 0.9rem;
  text-align: center;
}

.booking-success__cta {
  margin-top: 32px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

@media (max-width: 900px) {
  .booking-success__details div {
    grid-template-columns: 96px 1fr;
  }
}

@media (max-width: 640px) {
  .booking-success {
    padding-bottom: 96px;
  }

  .booking-success__cta {
    margin-bottom: 32px;
  }
}
.price-cta .btn-primary {
  flex: 0 0 auto;
  align-self: center;
  min-width: 160px;
}
@media (max-width: 860px) {
  .price-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .price-cta .btn-primary {
    width: 100%;
  }
}

/* Ensure price-block text (small helper) and includes (title + list) styling */
.price-block .service-text {
  font-family: var(--body-font);
  /* keep the service-text deliberately smaller than the price and constrained
     so it wraps within the same width as the price (JS sets .price-block width) */
  font-size: 0.8rem;
  color: rgba(31,31,31,0.78);
  line-height: 1.25;
  font-weight: 400;
  overflow-wrap: break-word;
  word-wrap: break-word;
  /* allow explicit \n in i18n strings to render as line breaks */
  white-space: pre-line;
  max-width: 100%;
}

.includes-title,
.package-includes li {
  font-family: var(--body-font);
  font-size: 0.99rem;
  color: rgba(31,31,31,0.88);
  line-height: 1.5;
  font-weight: 400;
}

/* Small standalone note that sits between price and includes */
.service-note {
  margin: 0.9rem 0 1.1rem;
  padding: 0; /* keep unboxed */
  background: transparent;
  border-left: none;
  border-radius: 0;
  /* Emphasized note text: larger, bolder, uses the darker accent color; no extra background or blocks. */
  color: var(--accent-dark);
  font-size: 1.8rem; /* Increase font size; keep other styles the same */
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: block;
}

.service-note__main {
  display: block;
}

.service-note__meta {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.72em;
  line-height: 1.35;
  font-weight: 500;
  color: rgba(31, 31, 31, 0.54);
}


/* Includes list styling */
.includes-title {
  /* Softer includes title: slightly smaller, lighter weight, lighter color */
  font-size: 0.95rem;
  margin-top: 0;
  margin-bottom: 0; /* remove gap between title and list */
  color: rgba(31,31,31,0.58);
  font-weight: 500;
}
.includes {
  display: flex;
  flex-direction: column;
  gap: 0.12rem; /* keep small gap between title and list items managed below */
  margin-top: 0; /* remove gap between title and list */
}
.package-includes {
  /* Use a custom pseudo-element bullet because list items use flex layout.
     Keep list-style:none to avoid duplicate markers across browsers. */
  list-style: none;
  padding-left: 0;
  margin: 0 0 0.45rem 0;
  display: grid;
  gap: 0.32rem;
  /* Smaller, secondary text */
  font-size: 0.88rem;
  color: rgba(31,31,31,0.62);
}
.package-includes li {
  position: relative;
  /* switch to flex so bullets align like feature icons */
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0;
}

/* Make the includes area a grouped module, matching price-note styling */
.includes {
  margin-top: 0.6rem;
  padding: 0; /* remove boxed styling */
  background: transparent;
  border-left: none;
  border-radius: 0;
}

/* Restore default list marker (we hide the inline check icon instead) */
.package-includes li::before {
  /* bullets removed per design — hide the pseudo-element */
  content: none;
  display: none;
}

/* Ensure the inline check icon is the visible marker for includes */
.package-includes li i { /* removed: inline check icons deleted from HTML */
  display: none;
}

/* Buttons refinements */
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(26,136,133,0.12);
  padding: 0.8rem 1.4rem;
  min-width: 180px;
  height: 48px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Responsive service cards */
@media (max-width: 860px) {
  .service-card { grid-template-columns: 1fr; }
  .service-card .service-image { order: -1; }
  .service-panel[data-service-panel="solo"] .service-plan-badge:not(.service-plan-badge--inline) {
    top: 12px;
    right: 12px;
  }
}

/* Mobile: kimonoprice should show 2 cards per row.
   We scope rules to the kimonoprice panel only so other service panels keep
   their existing stacked-card behavior on small screens. */
@media (max-width: 860px) {
  /* Only apply when the panel is actually shown.
     We use aria-hidden as the single source of truth. */
  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] {
    --kimonoprice-tile-image-height: clamp(320px, 46vw, 560px);
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
  }

  /* kimonoprice tile image (mobile only). Scoped so desktop .service-image rules stay intact. */
  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .service-card .service-image {
    order: 0;                  /* keep image on top */
    width: 100%;
    background: transparent;
    padding: 0;
    aspect-ratio: auto !important;
    height: var(--kimonoprice-tile-image-height) !important;
    min-height: var(--kimonoprice-tile-image-height) !important;
    overflow: hidden;          /* allow cover crop */
    border-radius: 12px;
  }

  /* Remove desktop overlay on mobile tiles */
  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .service-card .service-image::after {
    content: none;
  }

  /* Keep photo proportions natural on mobile. If we force an aspect-ratio here,
     some devices end up with awkward cropping. */
  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .service-card .service-image img {
    width: 100%;
    height: 100% !important;
    max-height: none;
    object-fit: cover;         /* fill the tile */
    background: transparent;
  }

  /* Tighten typography spacing inside kimonoprice tiles so cards don't grow tall */
  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .service-content {
    gap: 0.35rem;
  }

  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .package-includes {
    margin: 0.35rem 0 0;
    gap: 0.35rem;
  }

  /* Mobile: ensure label keeps its color and is centered.
     Some global typography rules may override color/alignment on small screens.
     We also render it as a compact pill so it reads clearly in a 2-up grid. */
  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-label {
    color: rgb(26,136,133);
    text-align: center;
    align-self: center;
    justify-self: center;
    margin: 0.35rem auto 0;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: rgba(26,136,133,0.10);
    border: 1px solid rgba(26,136,133,0.16);
    line-height: 1.2;
  }
}

/* kimonoprice panel: extras section (below the whole card list) */
.service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras,
.service-panel .kimonoprice-extras--makeup,
.service-panel .kimonoprice-extras--family {
  grid-column: 1 / -1; /* span both columns when panel is a grid */
  margin-top: 1rem;
  padding: 1.1rem;
  border-radius: 16px;
  border: 1px solid rgba(31,31,31,0.035);
}

.service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__title,
.service-panel .kimonoprice-extras--makeup .kimonoprice-extras__title,
.service-panel .kimonoprice-extras--family .kimonoprice-extras__title {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(31,31,31,0.82);
  text-align: center;
  letter-spacing: 0.01em;
}

.service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__grid,
.service-panel .kimonoprice-extras--makeup .kimonoprice-extras__grid,
.service-panel .kimonoprice-extras--family .kimonoprice-extras__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.service-panel .kimonoprice-extras--makeup .kimonoprice-extras__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-panel .kimonoprice-extras--makeup.kimonoprice-extras--triple .kimonoprice-extras__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__item,
.service-panel .kimonoprice-extras--makeup .kimonoprice-extras__item,
.service-panel .kimonoprice-extras--family .kimonoprice-extras__item {
  padding: 1.1rem 1rem;
  border-radius: 16px;
  background: rgba(247, 250, 250, 0.96);
  border: 1px solid rgba(26,136,133,0.2);
  box-shadow:
    0 8px 20px rgba(31, 31, 31, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.5) inset;
  text-align: left;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
  will-change: transform;
}

.service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__item {
  display: flex;
  flex-direction: column;
}

.service-panel .kimonoprice-extras--family .kimonoprice-extras__item {
  display: flex;
  flex-direction: column;
}

/* Panel-level delivery note under duo/couple/parentchild/group */
/* Desktop/trackpad: subtle lift on hover/focus for a premium feel */
@media (hover: hover) and (pointer: fine) {
  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__item:hover,
  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__item:focus-within,
  .service-panel .kimonoprice-extras--makeup .kimonoprice-extras__item:hover,
  .service-panel .kimonoprice-extras--makeup .kimonoprice-extras__item:focus-within,
  .service-panel .kimonoprice-extras--family .kimonoprice-extras__item:hover,
  .service-panel .kimonoprice-extras--family .kimonoprice-extras__item:focus-within {
    transform: translateY(-2px);
    border-color: rgba(26,136,133,0.3);
    box-shadow:
      0 12px 28px rgba(31, 31, 31, 0.08),
      0 1px 0 rgba(255, 255, 255, 0.6) inset;
    background: rgba(248, 251, 251, 0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__item,
  .service-panel .kimonoprice-extras--makeup .kimonoprice-extras__item,
  .service-panel .kimonoprice-extras--family .kimonoprice-extras__item {
    transition: none;
  }
}

.service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__item-title,
.service-panel .kimonoprice-extras--makeup .kimonoprice-extras__item-title,
.service-panel .kimonoprice-extras--family .kimonoprice-extras__item-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  color: rgba(14, 94, 91, 0.9);
  line-height: 1.35;
  padding-top: 2px;
  text-align: left;
}

.service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__item:first-child .kimonoprice-extras__item-title,
.service-panel .kimonoprice-extras--makeup .kimonoprice-extras__item:first-child .kimonoprice-extras__item-title,
.service-panel .kimonoprice-extras--family .kimonoprice-extras__item:first-child .kimonoprice-extras__item-title {
  margin-bottom: 18px;
  font-size: 20px;
}

.service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__item-body,
.service-panel .kimonoprice-extras--makeup .kimonoprice-extras__item-body,
.service-panel .kimonoprice-extras--family .kimonoprice-extras__item-body {
  margin-top: 0.7rem;
  display: grid;
  gap: 0.95rem;
  padding-bottom: 0;
}

.service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__item-body {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  flex: 1;
  justify-content: flex-start;
  margin-top: 0.7rem;
  padding-bottom: 0;
}

.service-panel .kimonoprice-extras--family .kimonoprice-extras__item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

.service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__sub,
.service-panel .kimonoprice-extras--makeup .kimonoprice-extras__sub,
.service-panel .kimonoprice-extras--family .kimonoprice-extras__sub {
  padding-top: 0;
  border-top: 0;
}

.service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__sub + .kimonoprice-extras__sub,
.service-panel .kimonoprice-extras--makeup .kimonoprice-extras__sub + .kimonoprice-extras__sub,
.service-panel .kimonoprice-extras--family .kimonoprice-extras__sub + .kimonoprice-extras__sub {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(31,31,31,0.06);
}

.service-panel .kimonoprice-extras--family .kimonoprice-extras__sub {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.service-panel .kimonoprice-extras--family .kimonoprice-extras__item--split .kimonoprice-extras__sub:first-child {
  min-height: 0;
}

/* Group tab: fixed 2-column explanatory layout on desktop (no masonry/auto-fill). */
.service-panel .kimonoprice-extras--group .group-people-emphasis {
  font-weight: 600;
  color: rgba(31, 31, 31, 0.88);
}

.service-panel .kimonoprice-extras--group .rules-emphasis {
  font-weight: 600;
  color: rgba(31, 31, 31, 0.88);
}

.service-panel .kimonoprice-extras--group .kimonoprice-extras__sub--makeup .kimonoprice-extras__sub-entry:first-of-type {
  margin-top: 10px;
}

.service-panel .kimonoprice-extras--group .kimonoprice-extras__sub--makeup .kimonoprice-extras__sub-entry {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}

.service-panel .kimonoprice-extras--group .kimonoprice-extras__sub--makeup .kimonoprice-extras__sub-entry + .kimonoprice-extras__sub-entry {
  margin-top: 16px;
}

.service-panel .kimonoprice-extras--group .kimonoprice-extras__sub--makeup .kimonoprice-extras__sub-entry .kimonoprice-extras__sub-desc {
  margin-top: 0;
}

.service-specs .service-specs__item-title {
  margin: 0 0 24px;
  font-family: var(--body-font);
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-dark);
  line-height: 1.2;
  letter-spacing: -0.2px;
  text-align: left;
}

.service-specs .service-specs__sub-title {
  margin: 0 0 10px;
  font-family: var(--body-font);
  font-size: 18px;
  font-weight: 600;
  color: rgba(31, 31, 31, 0.86);
  line-height: 1.35;
  letter-spacing: normal;
  text-align: left;
}

.service-specs .service-specs__sub-title .makeup-emphasis {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  margin-left: 0.2em;
  padding: 1px 9px;
  border-radius: 999px;
  background: rgba(26, 136, 133, 0.08);
  color: rgba(14, 94, 91, 0.9);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  vertical-align: middle;
}

.service-specs .service-specs__sub-title .makeup-advanced-main,
.service-specs .service-specs__sub-title .makeup-advanced-meta {
  display: block;
  margin-left: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-style: inherit;
  font-variant: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.service-specs .service-specs__sub-title .makeup-advanced-meta {
  margin-top: 5px;
}

.service-specs .kimonoprice-extras__item-body {
  width: 100%;
  max-width: 32em;
}

.service-specs .kimonoprice-extras__sub > .service-specs__sub-title {
  margin-top: 28px;
  margin-bottom: 10px;
}

.service-specs .kimonoprice-extras__item-body > .kimonoprice-extras__sub:first-child > .service-specs__sub-title {
  margin-top: 0;
}

.service-specs .kimonoprice-extras__sub-desc,
.service-specs .kimonoprice-extras__sub--makeup .kimonoprice-extras__sub-entry .kimonoprice-extras__sub-desc {
  max-width: 32em;
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.2px;
  color: #6B6B6B;
  text-align: left;
}

.service-panel .kimonoprice-extras--group {
  margin-bottom: 40px;
}

@media (min-width: 900px) {
  .service-panel .kimonoprice-extras--group {
    width: 100%;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 56px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .service-panel .kimonoprice-extras--group .kimonoprice-extras__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
    align-items: stretch;
  }

  .service-panel .kimonoprice-extras--group .kimonoprice-extras__item {
    border-radius: 20px;
    padding: 32px;
    border: 1px solid #cfe3e1;
    background: rgba(249, 251, 251, 0.98);
    box-shadow: none;
    text-align: left;
    align-self: stretch;
    height: 100%;
  }

  .service-panel .kimonoprice-extras--group .kimonoprice-extras__item-title {
    margin: 0 0 24px;
    font-family: var(--body-font);
    font-size: 24px;
    font-weight: 700;
    color: var(--accent-dark);
    line-height: 1.2;
    letter-spacing: -0.2px;
    padding-top: 0;
  }

  .service-panel .kimonoprice-extras--group .kimonoprice-extras__item-body {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 32em;
  }

  .service-panel .kimonoprice-extras--group .kimonoprice-extras__sub {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 0;
    border-top: 0;
  }

  .service-panel .kimonoprice-extras--group .kimonoprice-extras__sub + .kimonoprice-extras__sub {
    margin-top: 24px;
    padding-top: 0;
    border-top: 0;
  }

  .service-panel .kimonoprice-extras--group .kimonoprice-extras__sub-title {
    margin: 0 0 10px;
    font-family: var(--body-font);
    font-size: 18px;
    font-weight: 600;
    color: rgba(31, 31, 31, 0.86);
    line-height: 1.35;
    letter-spacing: normal;
    text-align: left;
  }

  .service-panel .kimonoprice-extras--group .kimonoprice-extras__sub-desc {
    margin-top: 0;
    max-width: 32em;
    text-align: left;
    font-family: var(--body-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.2px;
    color: #6B6B6B;
  }

  .service-panel .kimonoprice-extras--group .kimonoprice-extras__sub-entry + .kimonoprice-extras__sub-entry {
    margin-top: 24px;
  }

  .service-panel .kimonoprice-extras--group .kimonoprice-extras__sub-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .service-panel .kimonoprice-extras--group .kimonoprice-extras__sub-entry .kimonoprice-extras__sub-desc {
    margin-top: 0;
  }
}

@media (min-width: 900px) {
  .services-filter .filter-btn {
    min-height: 42px;
    padding: 0.62rem 1.75rem;
    border-radius: 999px;
    border-width: 1.5px;
    border-color: rgba(44, 95, 127, 0.3);
    color: rgba(44, 95, 127, 0.6);
  }

  .services-filter .filter-btn:hover {
    border-color: rgba(44, 95, 127, 0.46);
    transform: none;
    border-radius: 999px;
    box-shadow: 0 1px 6px rgba(44, 95, 127, 0.08);
  }

  .services-filter .filter-btn.active,
  .services-filter .filter-btn.is-active {
    transform: none;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(44, 95, 127, 0.14);
  }

  .portfolio-filter .filter-btn,
  .portfolio-filter .filter-btn:hover,
  .portfolio-filter .filter-btn.active,
  .portfolio-filter .filter-btn.is-active {
    border-radius: 999px;
  }
}

.service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__sub:first-child,
.service-panel .kimonoprice-extras--makeup .kimonoprice-extras__sub:first-child,
.service-panel .kimonoprice-extras--family .kimonoprice-extras__sub:first-child {
  padding-top: 0;
  border-top: 0;
}

.service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__sub-title,
.service-panel .kimonoprice-extras--makeup .kimonoprice-extras__sub-title,
.service-panel .kimonoprice-extras--family .kimonoprice-extras__sub-title {
  font-family: var(--body-font);
  font-size: 1.8rem;
  font-weight: 600;
  color: rgba(31, 31, 31, 0.86);
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-align: left;
}

.service-panel .kimonoprice-extras__sub-title .makeup-emphasis {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  margin-left: 0.2em;
  padding: 1px 9px;
  border-radius: 999px;
  background: rgba(26, 136, 133, 0.08);
  color: rgba(14, 94, 91, 0.9);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  vertical-align: middle;
}

.service-panel .kimonoprice-extras__sub-title .makeup-advanced-main {
  display: block;
  font-weight: 600;
  color: inherit;
}

.service-panel .kimonoprice-extras__sub-title .makeup-advanced-meta {
  display: block;
  margin-top: 5px;
  margin-left: 0;
  font-family: var(--body-font);
  font-size: 1.8rem;
  font-weight: 600;
  color: rgba(31, 31, 31, 0.86);
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__sub-title,
.service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__sub-title .makeup-advanced-main,
.service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__sub-title .makeup-advanced-meta {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__sub-title .makeup-advanced-meta {
  margin-top: 4px;
}

.service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__sub-desc,
.service-panel .kimonoprice-extras--makeup .kimonoprice-extras__sub-desc,
.service-panel .kimonoprice-extras--family .kimonoprice-extras__sub-desc {
  margin-top: 0.5rem;
  font-family: var(--body-font);
  font-size: 0.88rem;
  font-weight: 400;
  color: rgba(31,31,31,0.62);
  line-height: 1.5;
  letter-spacing: normal;
  white-space: normal;
  max-width: 43ch;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  text-wrap: pretty;
}

.service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__item:first-child .kimonoprice-extras__sub-desc,
.service-panel .kimonoprice-extras--makeup .kimonoprice-extras__sub-desc,
.service-panel .kimonoprice-extras--family .kimonoprice-extras__item:first-child .kimonoprice-extras__sub-desc {
  line-height: 1.55;
}

.service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__sub--note .kimonoprice-extras__sub-desc {
  font-size: 0.78rem;
  color: rgba(31,31,31,0.56);
  max-width: 30ch;
}

.service-panel:not([data-service-panel="kimonoprice"])[aria-hidden="false"] .kimonoprice-extras--group .kimonoprice-extras__sub-title,
.service-panel:not([data-service-panel="kimonoprice"])[aria-hidden="false"] .kimonoprice-extras--group .kimonoprice-extras__sub-title .makeup-advanced-main,
.service-panel:not([data-service-panel="kimonoprice"])[aria-hidden="false"] .kimonoprice-extras--group .kimonoprice-extras__sub-title .makeup-advanced-meta {
  font-family: var(--body-font) !important;
  font-size: 1.8rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.01em !important;
  color: rgba(31, 31, 31, 0.86) !important;
}

.service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__sub--note {
  margin-top: 1.1rem;
}

.service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__subtitle {
  display: none;
}

/* Long single-line “free” list: allow nicer wrapping and breathing room */
.service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__item-body .kimonoprice-extras__sub-desc,
.service-panel .kimonoprice-extras--makeup .kimonoprice-extras__item-body .kimonoprice-extras__sub-desc,
.service-panel .kimonoprice-extras--family .kimonoprice-extras__item-body .kimonoprice-extras__sub-desc {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

@media (min-width: 900px) {
  .service-panel[data-service-panel="kimonoprice"] {
    --kimonoprice-extra-name-col: 11.2em;
    --kimonoprice-extra-title-size: 20px;
    --kimonoprice-extra-item-size: 15px;
    --kimonoprice-extra-desc-size: 13px;
    --kimonoprice-extra-title-weight: 620;
    --kimonoprice-extra-item-weight: 560;
    --kimonoprice-extra-desc-weight: 420;
  }

  html[lang="zh"] .service-panel[data-service-panel="kimonoprice"] {
    --kimonoprice-extra-name-col: 9.2em;
  }

  html[lang="en"] .service-panel[data-service-panel="kimonoprice"] {
    --kimonoprice-extra-name-col: 12.2em;
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras {
    margin-top: 1.45rem;
    padding: 1.35rem 1.3rem;
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__title {
    margin-bottom: 1.04rem;
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__subtitle {
    display: block;
    margin: -0.56rem 0 1.22rem;
    font-size: 12px;
    line-height: 1.52;
    color: rgba(31, 31, 31, 0.5);
    font-weight: var(--kimonoprice-extra-desc-weight);
    letter-spacing: 0.01em;
    text-align: center;
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1.06fr) minmax(0, 0.9fr);
    gap: 20px;
    align-items: stretch;
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__item {
    padding: 1.45rem 1.35rem;
    height: 100%;
    justify-content: center;
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__item-title {
    margin-top: 0;
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__item-body {
    margin-top: 0.08rem;
    gap: 0.88rem;
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__item .kimonoprice-extras__sub + .kimonoprice-extras__sub {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(31, 31, 31, 0.06);
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__item--makeup .kimonoprice-extras__item-title,
  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__item--photo .kimonoprice-extras__item-title {
    margin: 0 0 14px;
    font-size: var(--kimonoprice-extra-title-size);
    font-weight: var(--kimonoprice-extra-title-weight);
    color: rgba(14, 94, 91, 0.92);
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extra-title {
    display: grid;
    grid-template-columns: var(--kimonoprice-extra-name-col) minmax(0, 1fr);
    align-items: baseline;
    column-gap: 12px;
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extra-title__name {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(31, 31, 31, 0.82);
    font-size: var(--kimonoprice-extra-item-size);
    font-weight: var(--kimonoprice-extra-item-weight);
    line-height: 1.44;
    text-align: left;
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extra-title__price {
    width: 100%;
    justify-self: end;
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0;
    color: rgba(31, 31, 31, 0.9);
    font-size: var(--kimonoprice-extra-item-size);
    font-weight: var(--kimonoprice-extra-item-weight);
    line-height: 1.32;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extra-title__amount {
    color: rgba(31, 31, 31, 0.9);
    font-weight: var(--kimonoprice-extra-item-weight);
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extra-title__currency {
    margin-right: 0.04em;
    color: rgba(31, 31, 31, 0.58);
    font-weight: var(--kimonoprice-extra-desc-weight);
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extra-title__unit {
    margin-left: 0.2em;
    color: rgba(31, 31, 31, 0.52);
    font-size: 0.9em;
    font-weight: var(--kimonoprice-extra-desc-weight);
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__item--makeup .kimonoprice-extras__sub-desc,
  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__item--photo .kimonoprice-extras__sub-desc {
    margin-top: 6px;
    font-size: var(--kimonoprice-extra-desc-size);
    line-height: 1.8;
    color: rgba(31, 31, 31, 0.56);
    font-weight: var(--kimonoprice-extra-desc-weight);
    text-align: left;
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__item--photo .kimonoprice-extras__sub-desc {
    color: rgba(31, 31, 31, 0.52);
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__item--photo .kimonoprice-extras__sub--note .kimonoprice-extras__sub-desc {
    font-size: 12px;
    line-height: 1.62;
    color: rgba(31, 31, 31, 0.48);
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__item--included {
    border-color: rgba(26, 136, 133, 0.12);
    background: rgba(248, 251, 251, 0.9);
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__item--included .kimonoprice-extras__item-title {
    margin: 0 0 10px;
    font-size: var(--kimonoprice-extra-title-size);
    font-weight: var(--kimonoprice-extra-title-weight);
    color: rgba(14, 94, 91, 0.76);
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-included-note {
    margin: 0 0 12px;
    font-size: var(--kimonoprice-extra-desc-size);
    line-height: 1.62;
    letter-spacing: 0.004em;
    color: rgba(31, 31, 31, 0.5);
    font-weight: var(--kimonoprice-extra-desc-weight);
    text-align: left;
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-included-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 10px;
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-included-list li {
    display: block;
    min-width: 0;
    list-style: none;
    font-size: var(--kimonoprice-extra-item-size);
    line-height: 1.6;
    color: rgba(31, 31, 31, 0.72);
    font-weight: 450;
    text-align: left;
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-included-list li::before {
    content: none;
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-included-list li > span {
    display: block;
    min-width: 0;
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__item--photo .kimonoprice-extras__sub--note {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(31, 31, 31, 0.06);
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extras__item--photo .kimonoprice-extras__sub--note .kimonoprice-extras__sub-desc {
    margin-top: 0;
  }
}

@media (max-width: 860px) {
  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-extras,
  .service-panel[aria-hidden="false"] .kimonoprice-extras--makeup,
  .service-panel[aria-hidden="false"] .kimonoprice-extras--family {
    margin-top: 0.75rem;
    padding: 1rem;
  }


  /* Mobile: stack extras cards for a cleaner, premium layout */
  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-extras__grid,
  .service-panel[aria-hidden="false"] .kimonoprice-extras--makeup .kimonoprice-extras__grid,
  .service-panel[aria-hidden="false"] .kimonoprice-extras--family .kimonoprice-extras__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-extras__item,
  .service-panel[aria-hidden="false"] .kimonoprice-extras--makeup .kimonoprice-extras__item,
  .service-panel[aria-hidden="false"] .kimonoprice-extras--family .kimonoprice-extras__item {
    padding: 24px 20px;
  }

  .service-panel[aria-hidden="false"] .kimonoprice-extras--makeup .kimonoprice-extras__item:not(:first-child) {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .service-panel[aria-hidden="false"] .kimonoprice-extras--makeup .kimonoprice-extras__item:not(:first-child) .kimonoprice-extras__item-body {
    margin-top: 0.35rem;
    gap: 0.65rem;
  }

  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-extras__sub-desc,
  .service-panel[aria-hidden="false"] .kimonoprice-extras--makeup .kimonoprice-extras__sub-desc,
  .service-panel[aria-hidden="false"] .kimonoprice-extras--family .kimonoprice-extras__sub-desc {
    max-width: 36ch;
  }

  .service-panel[aria-hidden="false"] .kimonoprice-extras--group .kimonoprice-extras__sub-desc[data-i18n="services.group.booking.reschedule.desc"] {
    font-size: 12.5px;
    line-height: 1.68;
    letter-spacing: 0.01em;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
  }
}

  /* Mobile: decorative semi-transparent letters A/B/C for non-kimonoprice panels
     - displayed behind textual content but above the image
     - pointer-events: none so they never intercept taps
  */
  @media (max-width: 860px) {
    .service-panel:not([data-service-panel="kimonoprice"]) .service-card {
      position: relative; /* anchor for pseudo */
      overflow: hidden;
      border-radius: 18px;
      isolation: isolate;
    }

      .service-panel:not([data-service-panel="kimonoprice"]) .service-card::after {
        content: none; /* set per-nth below */
        position: absolute;
        right: 12px;
        top: 12px;
        font-family: var(--heading-font);
        font-weight: 600;
        font-size: clamp(96px, 24vw, 148px);
        line-height: 0.82;
        color: rgba(44, 95, 127, 0.62);
        opacity: 0.08;
        pointer-events: none;
        z-index: 1; /* above image (0) but beneath content (2) */
        user-select: none;
      }

  /* per-card letters (A/B/C) on mobile for non-kimonoprice panels */
      /* keep root-level card pseudo disabled on mobile (we'll render inside .service-content) */
  .service-panel:not([data-service-panel="kimonoprice"]) .service-card:nth-of-type(1)::after { content: none; }
  .service-panel:not([data-service-panel="kimonoprice"]) .service-card:nth-of-type(2)::after { content: none; }
  .service-panel:not([data-service-panel="kimonoprice"]) .service-card:nth-of-type(3)::after { content: none; }

      /* Instead render the decorative letter inside the content area so it sits behind
         text but above the image and not hidden by a content background. */
      .service-panel:not([data-service-panel="kimonoprice"]) .service-card .service-content {
        position: relative; /* anchor for ::before */
        overflow: visible;
      }

      .service-panel:not([data-service-panel="kimonoprice"]) .service-card .service-content::before {
        content: none; /* set per-card below */
        position: absolute;
        right: clamp(10px, 3.6vw, 18px);
        top: 50%;
        font-family: var(--heading-font);
        font-weight: 600;
        font-size: clamp(96px, 24vw, 148px);
        line-height: 0.82;
        color: var(--accent-dark);
        opacity: 0.1;
        pointer-events: none;
        z-index: 1; /* behind text (which we'll keep at z-index:2) */
        user-select: none;
        transform: translateY(-50%);
        -webkit-font-smoothing: antialiased;
      }

      .service-panel:not([data-service-panel="kimonoprice"]) .service-card.reverse .service-content::before {
        left: clamp(10px, 3.6vw, 18px);
        right: auto;
      }

      /* per-card letters placed inside the content area */
  .service-panel:not([data-service-panel="kimonoprice"]) .service-card:nth-of-type(1) .service-content::before { content: "A"; }
  .service-panel:not([data-service-panel="kimonoprice"]) .service-card:nth-of-type(2) .service-content::before { content: "B"; }
  .service-panel:not([data-service-panel="kimonoprice"]) .service-card:nth-of-type(3) .service-content::before { content: "C"; }

      /* Ensure content elements render above the decorative letter */
      .service-panel:not([data-service-panel="kimonoprice"]) .service-card .service-content > * {
        position: relative;
        z-index: 2;
      }

    /* Ensure card content sits above the decorative letter */
    .service-panel:not([data-service-panel="kimonoprice"]) .service-card > * {
      position: relative;
      z-index: 2; /* content above letter */
    }

    /* keep image beneath the letter so the letter reads clearly */
    .service-panel:not([data-service-panel="kimonoprice"]) .service-card .service-image {
      z-index: 0;
      background: transparent;
      border-radius: inherit;
    }

    .service-panel:not([data-service-panel="kimonoprice"]) .service-card .service-image::after,
    .service-panel:not([data-service-panel="kimonoprice"]) .service-card .service-image img {
      display: block;
      border-radius: inherit;
    }
  }

/* Desktop-only: for reversed cards, keep the includes anchored to the right
   and maintain a comfortable gap between image and content. */
@media (min-width: 900px) {
  /* Only align the includes group to the right so other content keeps normal flow.
     .includes is a column-flex container so align-items moves its children horizontally. */
  .service-card.reverse .includes {
    align-items: flex-end;
    text-align: right; /* fallback for inline text elements */
  }

  /* package-includes is a grid whose children are <li> (display:flex). Move each
     <li> to the right and make its inner contents right-aligned. */
  .service-card.reverse .package-includes {
    justify-items: end; /* align grid items (the <li>) to the right */
  }
  .service-card.reverse .package-includes li {
    justify-content: flex-end; /* align li's internal flex children to the right */
  }
}

/* Page fade-in animation */
body.page-loaded {
  animation: none;
}


/* Navigation */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 1000;
  /* Avoid transition: all on a fixed element (can trigger expensive paints). */
  transition: background-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

/* Mobile: hide navbar on scroll down, show on scroll up.
   Controlled by JS via .navbar--hidden. */
@media (max-width: 900px) {
  .navbar {
    will-change: transform;
    transition: transform 0.22s ease, background-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
  }

  body.nav-open .navbar {
    transform: translateY(0) !important;
  }

  .navbar.navbar--hidden {
    transform: translateY(-110%);
  }
}

.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  font-size: 0.98rem;
  line-height: 1.12;
  font-weight: 600;
  font-family: var(--heading-font);
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.logo::after {
  content: "";
  display: none;
}

html[lang="zh"] .logo::after {
  content: "\6DA6\548C\670D";
  display: block;
  font-size: 0.72rem;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: none;
  color: rgba(26, 136, 133, 0.75);
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.nav-menu a {
  color: #333;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1px;
  transition: color 0.3s;
}

.nav-menu a:hover,
.nav-menu a.active {
  color: var(--accent);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  width: 25px;
  height: 3px;
  background: #333;
  margin: 3px 0;
  transition: 0.3s;
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 6px;
}

.nav-toggle.is-active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

body.nav-open {
  overflow: hidden;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 900;
}

.nav-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.btn {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.78rem;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.btn-primary {
  background: var(--cloud);
  color: var(--ink);
  border-color: transparent;
}

.btn-primary:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.85);
}

.btn-ghost {
  border-color: rgba(255, 255, 255, 0.75);
  color: var(--cloud);
}

.btn-ghost:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.1);
}

.hero-statement {
  position: relative;
  padding: clamp(60px, 8vw, 120px) 5vw 0;
  background: var(--cloud);
  overflow: hidden;
  margin-bottom: 0;
}

.hero-statement::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(60deg, rgba(26, 136, 133, 0.06) 0 22px, transparent 22px 44px);
  opacity: 0.4;
  pointer-events: none;
}

.hero-statement > * {
  position: relative;
}

/* Clients page styles removed */

.hero-welcome {
  display: grid;
  grid-template-columns: minmax(280px, 500px) minmax(320px, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto clamp(60px, 8vw, 100px);
}

.hero-welcome__media {
  border-radius: 36px;
  overflow: hidden;
  margin: 0;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.18);
}

.hero-welcome__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-welcome__copy {
  text-align: left;
}

.hero-statement__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(4, 42, 40, 0.6);
  margin-bottom: clamp(12px, 1.6vw, 20px);
}

.hero-statement__title {
  font-family: var(--heading-font);
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--accent-dark);
  margin-bottom: clamp(16px, 2vw, 24px);
}

.hero-statement__copy {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.8;
  color: rgba(7, 28, 28, 0.75);
  margin-bottom: clamp(24px, 3vw, 36px);
  max-width: 560px;
}

.hero-statement__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}

.hero-statement__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  position: relative;
  padding-bottom: 6px;
}

.hero-statement__cta--primary {
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: none;
}

.hero-statement__cta--primary::after {
  display: none;
}

.hero-statement__cta--secondary {
  text-transform: none;
  letter-spacing: 0.08em;
}

.hero-statement__cta::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s ease;
  transform-origin: left;
}

.hero-statement__cta:hover::after {
  transform: scaleX(0.6);
}

@media (max-width: 900px) {
  .hero-welcome {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-welcome__copy {
    text-align: center;
    margin: 0 auto;
  }

  .hero-statement__actions {
    justify-content: center;
  }

  .hero-statement__cta {
    justify-content: center;
  }
}

.feature-stack {
  padding: clamp(60px, 8vw, 120px) clamp(5vw, 8vw, 140px) clamp(80px, 10vw, 140px);
  background: #bcded8;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.feature-stack__shell {
  max-width: 1300px;
  margin: 0 auto;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  width: 100%;
}

.feature-stack--visible {
  background: transparent;
}

.feature-stack__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.feature-stack__card {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 48px);
}

.feature-stack__panel {
  border-radius: 42px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
}

.feature-stack__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.feature-stack__panel--landscape {
  aspect-ratio: 16 / 9;
  min-height: 320px;
}

.feature-stack__panel--portrait {
  aspect-ratio: 3 / 4;
  min-height: 420px;
  max-width: 540px;
  justify-self: center;
}

.feature-stack__copy {
  text-align: center;
  color: #1a6f70;
  padding: 0 clamp(12px, 3vw, 60px);
}

.feature-stack__headline {
  font-family: var(--heading-font);
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  margin-bottom: 1rem;
}

.feature-stack__description {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.9;
  color: rgba(19, 72, 73, 0.95);
}

@media (max-width: 1024px) {
  .feature-stack__grid {
    grid-template-columns: 1fr;
  }

  .feature-stack__panel--portrait {
    max-width: none;
  }

  .feature-stack__card {
    order: 1;
  }

  .feature-stack__panel--portrait {
    order: 2;
  }
}

@media (min-width: 1025px) {
  .feature-stack {
    min-height: 100vh;
    padding: clamp(36px, 6vw, 110px) clamp(28px, 5vw, 96px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .feature-stack__shell {
    height: 100%;
    width: 100%;
    margin: 0;
    max-width: none;
  }

  .feature-stack__grid {
    min-height: clamp(520px, 75vh, 880px);
  grid-template-columns: minmax(520px, 1.15fr) minmax(400px, 0.85fr);
    grid-auto-rows: minmax(0, 1fr);
    align-items: start;
  gap: clamp(28px, 5vw, 96px);
    width: 100%;
    justify-content: space-between;
  }

  .feature-stack__card {
    height: 100%;
    justify-content: flex-start;
    width: 100%;
  }

  .feature-stack__card > .feature-stack__panel {
    height: auto;
    max-height: clamp(300px, 45vh, 520px);
    display: flex;
    justify-self: start;
    align-self: start;
    width: 100%;
  }

  .feature-stack__panel--landscape {
    aspect-ratio: 16 / 9;
    max-height: clamp(300px, 45vh, 520px);
    justify-self: start;
    width: 100%;
  }

  .feature-stack__panel--portrait {
    height: auto;
    max-height: clamp(420px, 72vh, 760px);
    width: 100%;
    max-width: clamp(420px, 38vw, 660px);
    justify-self: end;
    align-self: start;
    display: flex;
  }

  .feature-stack__panel img {
    height: 100%;
  }

  .feature-stack__copy {
    text-align: left;
    padding: clamp(20px, 3vw, 48px);
  }

  .feature-stack__card--landscape .feature-stack__copy {
    text-align: right;
    padding-right: 0;
  }
}

@media (max-width: 768px) {
  .feature-stack {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: clamp(48px, 12vw, 72px) clamp(16px, 6vw, 32px);
    overflow: hidden;
    background: var(--sand);
  }

  .feature-stack__shell {
    padding: 0;
    max-width: 100%;
  }

  .feature-stack__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .feature-stack__panel {
    border-radius: 28px;
  }

  .feature-stack__panel--landscape,
  .feature-stack__panel--portrait {
    min-height: clamp(220px, 45vw, 360px);
    max-width: 100%;
  }

  .feature-stack__copy {
    padding: 0 8px;
  }
}

@media (max-width: 480px) {
  .feature-stack {
    padding: 48px 16px;
  }

  .feature-stack__panel {
    border-radius: 24px;
  }

  .feature-stack__panel--landscape,
  .feature-stack__panel--portrait {
    min-height: 220px;
  }

  .feature-stack__copy {
    text-align: left;
    padding: 0;
  }
}

.section-heading {
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(32px, 4vw, 60px);
}

.section-heading p:first-child {
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-size: 0.8rem;
  color: rgba(0,0,0,0.55);
  margin-bottom: 0.5rem;
}

.section-heading h3 {
  font-family: var(--heading-font);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  margin-bottom: 1rem;
}

.section-heading p:last-child {
  color: rgba(0,0,0,0.7);
  line-height: 1.8;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  /* gallery-carousel removed */
}

.cookie-banner {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, 30px);
  width: min(92vw, 900px);
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  padding: 24px 32px;
  display: flex;
  gap: 24px;
  align-items: center;
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.cookie-banner.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.cookie-text {
  font-size: 0.95rem;
  color: rgba(0,0,0,0.75);
  line-height: 1.6;
}

.cookie-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
}

.cookie-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.cookie-btn {
  border-radius: 32px;
  padding: 12px 28px;
  font-size: 0.9rem;
  letter-spacing: 1px;
  border: 1px solid var(--accent);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.cookie-btn--ghost {
  background: transparent;
  color: var(--accent);
}

.cookie-btn--ghost:hover {
  background: rgba(26, 136, 133, 0.08);
}

.cookie-btn--primary {
  background: var(--accent);
  color: #fff;
}

.cookie-btn--primary:hover {
  background: var(--accent-dark);
}

@media (max-width: 768px) {
  .cookie-banner {
    flex-direction: column;
    text-align: center;
  }

  .cookie-actions {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .cookie-btn {
    flex: 1 1 45%;
  }
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border-radius: 32px;
  background: var(--accent);
  color: var(--cloud);
  text-decoration: none;
  letter-spacing: 3px;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  /* Avoid animating box-shadow (expensive). Use transform/opacity instead. */
  transition: transform 0.3s ease, background 0.3s ease;
}

.btn-primary:hover {
  background: var(--accent-dark);
  box-shadow: 0 12px 24px rgba(26, 136, 133, 0.35);
  transform: translateY(-2px);
}



/* Portfolio Categories */

.portfolio-categories {
  padding: 120px 0;
  background: var(--cloud);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(240px, 1fr));
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 28px;
  overflow-x: auto;
  /* Avoid horizontal page overflow on smaller screens: use container width by default. */
  width: 100%;
  margin-left: 0;
  padding: 0 16px 16px;
  scroll-snap-type: x proximity;

  /* Performance: isolate this scroller so its paints don't invalidate the page. */
  contain: layout paint;
  /* Enable momentum scrolling on iOS. */
  -webkit-overflow-scrolling: touch;
}

/* Large screens: allow the grid to bleed to viewport edges for a premium look
   without causing horizontal scrollbars on small viewports. */
@media (min-width: 901px) {
  .category-grid {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 0 clamp(24px, 5vw, 80px) 16px;
  }
}

.category-item {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  height: 420px;
  cursor: pointer;
  scroll-snap-align: start;

  /* Performance: keep offscreen cards cheap until scrolled into view. */
  content-visibility: auto;
  contain-intrinsic-size: 420px 240px;
  /* Create its own paint layer to avoid expensive repaints. */
  contain: paint;
}

.category-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  will-change: transform;
}

/* Avoid hover work on touch devices (it can cause jank while scrolling). */
@media (hover: hover) and (pointer: fine) {
  .category-item:hover img {
    transform: scale(1.08);
  }
}

.category-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.65) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
}

.category-overlay h3 {
  color: var(--cloud);
  font-size: 1.4rem;
  letter-spacing: 4px;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .portfolio-categories {
    padding: 90px 0;
  }

  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: unset;
    width: 100%;
    margin-left: 0;
    padding: 0 24px 12px;
    overflow-x: visible;
    scroll-snap-type: none;
    gap: 20px;
  }

  .category-item {
    height: clamp(220px, 50vw, 320px);
  }
}

@media (max-width: 540px) {
  .category-grid {
    grid-template-columns: 1fr;
    padding: 0 16px 12px;
  }
}

.btn-view {
  margin-top: 12px;
  padding: 10px 0;
  color: var(--cloud);
  text-decoration: none;
  letter-spacing: 3px;
  font-size: 0.85rem;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-view::after {
  content: '\2192';
  transition: transform 0.3s ease;
}

.btn-view:hover::after {
  transform: translateX(6px);
}

/* Testimonial Section */
.testimonial-section {
  padding: clamp(100px, 12vw, 180px) 0;
  background: linear-gradient(135deg, #0c0f0f 0%, #142f33 60%, #0c0f0f 100%);
  color: var(--cloud);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.testimonial-section .container {
  position: relative;
  z-index: 1;
}

.testimonial-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(32px, 5vw, 64px);
  padding: 0 16px;
}

.testimonial-eyebrow {
  font-size: clamp(0.68rem, 1.4vw, 0.86rem);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
  margin: 0;
}

.testimonial-intro h2 {
  font-family: var(--heading-font);
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  margin: 0;
  line-height: 1.05;
  max-width: 90%;
}

@media (max-width: 640px) {
  .testimonial-intro {
    gap: 12px;
    margin: 0 auto 24px;
    padding: 0 12px;
  }
  .testimonial-eyebrow {
    letter-spacing: 0.28em;
  }
  .testimonial-intro h2 {
    font-size: clamp(1.4rem, 5.2vw, 1.9rem);
  }
}

/* Removed .testimonial-subtitle (no longer used) */

.testimonial-bubble-layer {
  position: absolute;
  inset: 0;
  /* allow interaction with inner editable text */
  pointer-events: auto;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.testimonial-section.visible .testimonial-bubble-layer {
  opacity: 1;
}

.testimonial-bubble {
  position: absolute;
  /* scale up configured sizes slightly for a larger appearance */
  width: calc(var(--bubble-size, 90px) * 1.25);
  height: calc(var(--bubble-size, 90px) * 1.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* Avoid per-frame blur filters which cause heavy repaints. */
  filter: none;
  left: var(--bubble-left, 50%);
  top: calc(100% - var(--bubble-start, 10%));
  opacity: 0;
  mix-blend-mode: screen;
  animation: testimonialBubbleDrift var(--bubble-duration, 18s) linear infinite;
  animation-delay: var(--bubble-delay, 0s);
  animation-play-state: paused;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.testimonial-section.visible .testimonial-bubble {
  animation-play-state: running;
}

/* Bubble text */
.testimonial-bubble .bubble-text {
  color: var(--cloud);
  /* larger, more readable bubble text */
  font-size: clamp(0.8rem, 2.2vw, 1.05rem);
  line-height: 1.15;
  text-align: center;
  width: 82%;
  display: inline-block;
  user-select: none;
  hyphens: auto;
}


/* Mobile: when testimonial section is visible, increase vertical space so bubbles can float higher */
@media (max-width: 640px) {
  .testimonial-section.visible {
    /* Increase top and bottom padding to give section more height when active (further increased)
       and center the container vertically within the available space */
    padding-top: clamp(240px, 36vh, 360px);
    padding-bottom: clamp(180px, 28vh, 320px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .testimonial-section.visible .container {
    /* center the container absolutely within the testimonial section on mobile */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: min(100%, var(--container-max-width));
    padding-left: clamp(12px, 3vw, 24px);
    padding-right: clamp(12px, 3vw, 24px);
    z-index: 2; /* ensure it sits above the bubble layer */
  }

  .testimonial-section.visible .testimonial-bubble-layer {
    /* extend bubble layer beyond the section to allow even larger vertical motion */
    top: -28vh;
    bottom: -24vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-bubble {
    animation: none;
    opacity: 0.04;
  }
}

/* iOS Safari safe mode: avoid stacking multiple long-running blend animations
   with hero video playback, which can trigger low-memory reloads on real devices. */
html[data-ios-safe-mode="true"] .testimonial-bubble {
  animation: none;
  opacity: 0.18;
  mix-blend-mode: normal;
}

html[data-ios-safe-mode="true"] .testimonial-section.visible .testimonial-bubble-layer {
  opacity: 0.72;
}

@keyframes testimonialBubbleDrift {
  /* animate top from near-bottom to a per-bubble --bubble-end (keeps motion inside the section)
     and use per-bubble --bubble-sway for sideways drift for an irregular effect */
  0% {
    opacity: 0;
    transform: translateX(0) scale(0.85);
    top: calc(100% - var(--bubble-start, 10%));
  }
  10% {
    opacity: 0.4;
  }
  40% {
    opacity: 0.85;
    transform: translateX(calc(var(--bubble-sway, 0px) * 0.6)) scale(1);
  }
  70% {
    transform: translateX(calc(var(--bubble-sway, 0px) * -0.4)) scale(1.05);
  }
  100% {
    opacity: 0;
    top: var(--bubble-end, 6%);
    transform: translateX(calc(var(--bubble-sway, 0px) * 1.1)) scale(1.15);
  }
}

.testimonial-footnote {
  text-align: center;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

/* Legacy blockquote styles for other pages */
blockquote {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  font-style: italic;
  line-height: 2;
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  padding: 0 30px;
}

blockquote::before,
blockquote::after {
  content: '“';
  position: absolute;
  font-family: var(--heading-font);
  font-size: 4rem;
  color: rgba(255,255,255,0.2);
}

blockquote::before {
  left: -10px;
  top: -20px;
}

blockquote::after {
  content: '”';
  right: -10px;
  bottom: -40px;
}

.testimonial-section cite {
  display: inline-block;
  margin-top: 2rem;
  letter-spacing: 5px;
  font-size: 0.85rem;
  opacity: 0.8;
}



/* CTA Section */
.cta-section {
  padding: 120px 0;
  background: var(--shell);
}

.cta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}

.cta-box {
  background: var(--cloud);
  padding: 40px;
  border-radius: 28px;
  border: 1px solid rgba(0,0,0,0.08);
  text-align: center;
  transition: transform 0.3s ease;
}

.cta-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.08);
}

.cta-box h4 {
  font-size: 0.95rem;
  letter-spacing: 5px;
  color: rgba(0,0,0,0.5);
  margin-bottom: 10px;
}

.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 4px;
}

.cta-link::after {
  content: '\2192';
  transition: transform 0.3s ease;
}

.cta-link:hover::after {
  transform: translateX(6px);
}

/* Contact Section */
.contact-section {
  padding: 140px 0;
  background: var(--cloud);
  text-align: center;
}

.contact-section h2 {
  font-size: clamp(2.5rem, 4vw, 3.4rem);
  font-family: var(--heading-font);
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: var(--ink);
}

.contact-section p {
  font-size: 1.05rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(0,0,0,0.5);
}

.contact-section h3 {
  margin-top: 2rem;
  font-size: 1.1rem;
  letter-spacing: 6px;
  color: var(--accent);
  text-transform: uppercase;
}

.contact-form {
  margin-top: 40px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 18px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 18px;
  background: var(--shell);
  font-size: 1rem;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--cloud);
}

/* Standalone Contact Page */
.contact-hero,
.contact-info-section {
  --contact-accent: #105960;
  --contact-accent-deep: #0a454b;
  --contact-accent-line: rgba(16, 89, 96, 0.3);
  --contact-accent-soft: rgba(16, 89, 96, 0.08);
}

.contact-hero {
  margin-top: 90px;
  min-height: 63vh;
  padding: 32px 0 clamp(10px, 2vw, 18px);
  background: #f5f0e9;
}

.contact-hero > .container {
  width: 100%;
  max-width: 1456px;
  padding-left: 56px;
  padding-right: 56px;
}

.contact-hero__grid {
  display: grid;
  grid-template-columns: 37% 1.5% 61.5%;
  align-items: start;
  min-height: calc(63vh - 32px - clamp(10px, 2vw, 18px));
}

.contact-hero__content {
  grid-column: 1;
  width: min(100%, 560px);
  max-width: 560px;
  min-height: min(47vh, 520px);
  padding-top: clamp(4px, 1vh, 10px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.contact-hero__eyebrow {
  font-size: 14px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(19, 101, 107, 0.52);
  margin-bottom: 18px;
}

.contact-hero h1 {
  font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: clamp(3.3rem, 4.6vw, 4.12rem);
  font-weight: 580;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: #1f1a17;
  margin-bottom: 22px;
}

.contact-hero__subtitle {
  max-width: 16.2em;
  margin: 0;
  font-size: 20px;
  line-height: 1.62;
  color: #6c6057;
  text-wrap: balance;
}

.contact-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 24px;
}

.contact-hero__action-mobile-only {
  display: none;
}

.contact-hero__actions .btn {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  min-width: 0;
  padding: 0 30px;
  justify-content: center;
  text-align: center;
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 15px;
  font-weight: 550;
  border-width: 1px;
  box-shadow: none;
  border-radius: 999px;
  transform: none;
  gap: 0.5rem;
}

.contact-hero__actions .btn i {
  font-size: 0.96em;
  line-height: 1;
  flex-shrink: 0;
}

.contact-hero__actions .btn span {
  line-height: 1;
}

.contact-hero__actions .btn-primary {
  background: var(--contact-accent);
  color: #f7f2eb;
  border-color: var(--contact-accent);
}

.contact-hero__actions .btn-primary:hover {
  transform: none;
  background: var(--contact-accent-deep);
  border-color: var(--contact-accent-deep);
}

.contact-hero__actions .btn-ghost {
  border-color: rgba(19, 101, 107, 0.3);
  color: var(--contact-accent-deep);
  background: rgba(19, 101, 107, 0.045);
  font-weight: 560;
}

.contact-hero__actions .btn-ghost:hover,
.contact-hero__actions .btn-ghost:focus {
  transform: none;
  background: rgba(19, 101, 107, 0.1);
  border-color: rgba(19, 101, 107, 0.4);
}

.contact-hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 16px;
}

.contact-hero__link {
  color: rgba(13, 79, 86, 0.88);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-bottom: 1px solid rgba(19, 101, 107, 0.26);
  padding-bottom: 2px;
}

.contact-hero__link:hover,
.contact-hero__link:focus {
  color: var(--contact-accent-deep);
  border-bottom-color: rgba(19, 101, 107, 0.42);
}

.contact-hero__channels {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: clamp(22px, 3vh, 28px);
  padding-top: 0;
}

.contact-hero__channels-label {
  margin: 0;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(70, 89, 95, 0.36);
}

.contact-hero__channels-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.contact-hero__channel {
  position: relative;
  color: rgba(82, 95, 99, 0.88);
  font-size: 14px;
  font-weight: 410;
  letter-spacing: 0.055em;
  line-height: 1.6;
  text-decoration: none;
  white-space: nowrap;
}

.contact-hero__channel + .contact-hero__channel {
  margin-left: 16px;
  padding-left: 16px;
}

.contact-hero__channel + .contact-hero__channel::before {
  content: "·";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(70, 89, 95, 0.24);
}

.contact-hero__channel:hover,
.contact-hero__channel:focus {
  color: var(--contact-accent-deep);
}

.contact-hero__card {
  grid-column: 3;
  display: block;
  align-self: start;
  margin-left: -3%;
  width: 103%;
}

.contact-hero__card-media {
  overflow: hidden;
  border-radius: 26px;
  background: #110f0d;
}

.contact-hero__card-media img {
  width: 100%;
  display: block;
  height: min(47vh, 520px);
  object-fit: cover;
  object-position: 64% 42%;
}

.contact-hero__card-body {
  padding: 14px 2px 0;
}

.contact-hero__card-eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(19, 101, 107, 0.42);
}

.contact-hero__card-body p {
  margin: 0;
  font-size: 14px;
  font-weight: 390;
  line-height: 1.62;
  letter-spacing: 0.04em;
  color: #96897f;
}

.contact-visit-mobile {
  display: none;
}

.contact-visit-mobile__card {
  background: rgba(255, 251, 247, 0.82);
  border: 1px solid rgba(16, 89, 96, 0.08);
  border-radius: 24px;
  overflow: hidden;
}

.contact-visit-mobile__media {
  background: #110f0d;
}

.contact-visit-mobile__media img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 34%;
}

.contact-visit-mobile__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
}

.contact-visit-mobile__eyebrow,
.contact-visit-mobile__distance,
.contact-visit-mobile__address,
.contact-visit-mobile__summary {
  margin: 0;
}

.contact-visit-mobile__meta {
  width: 100%;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(16, 89, 96, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-visit-mobile__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(70, 89, 95, 0.56);
}

.contact-visit-mobile__distance {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(31, 26, 23, 0.82);
}

.contact-visit-mobile__address {
  padding-top: 4px;
  font-size: 0.95rem;
  line-height: 1.48;
  color: rgba(31, 26, 23, 0.9);
}

.contact-visit-mobile__summary {
  font-size: 0.82rem;
  line-height: 1.52;
  color: rgba(92, 80, 71, 0.7);
}

.contact-visit-mobile__button {
  min-height: 40px;
  min-width: 220px;
  max-width: 260px;
  margin-top: 8px;
  padding: 0 16px;
  align-self: flex-start;
  justify-content: center;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.78rem;
  font-weight: 560;
}

.contact-visit-mobile__button.btn-ghost {
  border-color: rgba(16, 89, 96, 0.24);
  color: var(--contact-accent-deep);
  background: rgba(16, 89, 96, 0.035);
}

.contact-visit-mobile__button.btn-ghost:hover {
  background: rgba(16, 89, 96, 0.08);
}

.contact-visit-mobile__social {
  display: none;
}

.contact-form-section {
  padding: clamp(60px, 10vw, 100px) 0;
  background: #f8f3ec;
}

.contact-coop-section {
  background: #fcf9f5;
  padding: clamp(60px, 10vw, 120px) 0;
}

.contact-form-wrapper {
  background: rgba(255, 251, 247, 0.78);
  border-radius: 36px;
  padding: clamp(32px, 6vw, 64px);
  border: 1px solid rgba(93, 77, 61, 0.07);
  box-shadow: 0 28px 72px rgba(53, 39, 28, 0.06);
}

.contact-coop-wrapper {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  max-width: 980px;
  margin: 0 auto;
}

.contact-coop-block {
  padding: clamp(32px, 6vw, 56px) 0;
}

.contact-coop-block + .contact-coop-block {
  border-top: 1px solid rgba(17, 17, 17, 0.08);
}

.contact-coop-block__label {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
  margin-bottom: 16px;
}

.contact-coop-block__title {
  font-family: var(--heading-font);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  line-height: 1.15;
  margin-bottom: 20px;
  color: #111;
}

.contact-coop-block--intro .contact-coop-block__title {
  font-size: clamp(1.95rem, 3.6vw, 2.8rem);
}

.contact-coop-block__subtitle {
  font-size: clamp(1rem, 1.55vw, 1.15rem);
  line-height: 1.65;
  color: #111;
  max-width: 720px;
  margin-bottom: 0;
}

.contact-coop-block__note,
.contact-coop-block__text {
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.7);
  max-width: 820px;
}

.contact-coop-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-coop-section .contact-form {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.contact-coop-form__section {
  display: grid;
  gap: 24px;
}

.contact-coop-form__section-title {
  font-size: 0.9rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
  margin-bottom: 0;
}

.contact-coop-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.contact-form-group--full {
  grid-column: 1 / -1;
}

.contact-coop-form .contact-form-group label {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
  color: #111;
}

.contact-coop-form input,
.contact-coop-form select,
.contact-coop-form textarea {
  border-radius: 10px;
  border-color: rgba(17, 17, 17, 0.2);
  color: #111;
  background: #fff;
}

.contact-coop-form input:focus,
.contact-coop-form select:focus,
.contact-coop-form textarea:focus {
  border-color: rgba(17, 17, 17, 0.55);
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}

.contact-coop-form__hint {
  margin-top: 10px;
  font-size: 0.95rem;
  color: rgba(17, 17, 17, 0.6);
}

.contact-coop-submit {
  align-self: flex-start;
  padding: 14px 28px;
  border-radius: 8px;
  border: 1px solid rgba(17, 17, 17, 0.8);
  background: #fff;
  color: #111;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: none;
}

.contact-coop-submit:hover {
  background: rgba(17, 17, 17, 0.06);
}

.contact-coop-entry-section {
  padding: clamp(18px, 4vw, 28px) 0 clamp(72px, 10vw, 110px);
  background: linear-gradient(180deg, rgba(237, 230, 219, 0.46) 0%, #f8f3ec 100%);
}

.contact-coop-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 44px);
  align-items: end;
  padding-top: 30px;
  border-top: 1px solid rgba(93, 77, 61, 0.1);
}

.contact-coop-entry__copy {
  max-width: 44rem;
}

.contact-coop-entry__label {
  margin: 0 0 14px;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(123, 109, 97, 0.56);
}

.contact-coop-entry__title {
  margin: 0;
  font-family: var(--heading-font);
  font-size: clamp(1.62rem, 2.5vw, 2.2rem);
  line-height: 1.12;
  color: #1f1a17;
}

.contact-coop-entry__subtitle {
  margin: 18px 0 0;
  max-width: 36rem;
  font-size: clamp(1rem, 1.45vw, 1.08rem);
  line-height: 1.72;
  color: rgba(84, 73, 65, 0.72);
}

.contact-coop-entry__button {
  align-self: end;
  min-height: 44px;
  padding: 0 20px;
  border-width: 1px;
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0.07em;
  font-size: 0.82rem;
  font-weight: 520;
}

.contact-coop-entry__button.btn-ghost {
  border-color: rgba(93, 77, 61, 0.14);
  color: #4f453d;
  background: transparent;
}

.contact-coop-entry__button:hover,
.contact-coop-entry__button:focus {
  transform: none;
}

.contact-coop-entry__button.btn-ghost:hover {
  background: rgba(255, 251, 247, 0.5);
}

.collaboration-page {
  background: #f8f3ec;
}

.collaboration-hero {
  margin-top: 90px;
  padding: clamp(56px, 8vw, 92px) 0 clamp(20px, 4vw, 34px);
  background: linear-gradient(180deg, #f5f0e9 0%, #f8f3ec 100%);
}

.collaboration-hero__inner {
  max-width: 980px;
}

.collaboration-hero__eyebrow {
  margin: 0 0 16px;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(144, 129, 116, 0.72);
}

.collaboration-hero h1 {
  margin: 0;
  font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: clamp(2.7rem, 4.6vw, 4rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #1f1a17;
}

.collaboration-hero__subtitle {
  margin: 20px 0 0;
  max-width: 38rem;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  line-height: 1.76;
  color: rgba(84, 73, 65, 0.76);
}

.collaboration-hero__link {
  display: inline-flex;
  margin-top: 22px;
  color: #5b5048;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none;
  border-bottom: 1px solid rgba(91, 80, 72, 0.28);
  padding-bottom: 2px;
}

.collaboration-hero__link:hover,
.collaboration-hero__link:focus {
  color: #3d342d;
  border-bottom-color: rgba(91, 80, 72, 0.5);
}

.collaboration-page .contact-coop-section {
  background: #f8f3ec;
  padding-top: clamp(16px, 4vw, 28px);
}

.collaboration-page .contact-coop-wrapper {
  max-width: 980px;
}

.collaboration-page .contact-coop-block--form .contact-coop-block__title {
  font-size: clamp(1.8rem, 2.6vw, 2.25rem);
}

.contact-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form-group label {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(31, 31, 31, 0.6);
}

.contact-form-group input,
.contact-form-group select,
.contact-form-group textarea {
  width: 100%;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.2;
  box-sizing: border-box;
}

/* Safari (and some mobile browsers) render select/date with different intrinsic heights.
   Normalize them to match text inputs. */
.contact-form-group input,
.contact-form-group select {
  min-height: 54px;
}

.contact-form-group select {
  -webkit-appearance: none;
  appearance: none;
}

.contact-form-group input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
}

.contact-form-group input:focus,
.contact-form-group select:focus,
.contact-form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(26, 136, 133, 0.1);
}

.contact-form-group textarea {
  min-height: 160px;
  resize: vertical;
}

.contact-info-section {
  position: relative;
  padding: 0 0 10px;
  background: linear-gradient(180deg, rgba(245, 240, 233, 0) 0%, rgba(241, 234, 224, 0.74) 100%);
}

.contact-info__strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 18px;
  min-height: clamp(150px, 12vw, 166px);
  padding: 8px 0 0;
  border-top: 1px solid rgba(117, 100, 86, 0.12);
}

.contact-info__main-copy {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 44rem;
}

.contact-info__address-mobile {
  display: none;
  margin: 0;
}

.contact-info__address-kicker,
.contact-info__address-line,
.contact-info__nearby-line,
.contact-info__summary-line {
  margin: 0;
}

.contact-info__address-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(19, 101, 107, 0.46);
}

.contact-info__address-line {
  max-width: 30ch;
  font-size: clamp(1.04rem, 1.22vw, 1.14rem);
  line-height: 1.44;
  letter-spacing: 0.01em;
  color: rgba(31, 26, 23, 0.84);
  text-wrap: pretty;
}

.contact-info__address-line a {
  color: var(--contact-accent-deep);
  text-decoration: none;
  border-bottom: 0;
}

.contact-info__address-line a:hover,
.contact-info__address-line a:focus {
  color: var(--contact-accent);
}

.contact-info__nearby-line {
  font-size: 0.84rem;
  line-height: 1.44;
  color: rgba(52, 43, 37, 0.62);
  letter-spacing: 0.02em;
}

.contact-info__summary-line {
  max-width: 42rem;
  font-size: 0.82rem;
  line-height: 1.48;
  color: rgba(92, 80, 71, 0.6);
}

.contact-info__side {
  display: flex;
  align-items: center;
  gap: 0;
  justify-self: end;
  margin-right: 18px;
}

.contact-info__strip-button {
  display: inline-flex;
  align-items: center;
  align-self: center;
  text-transform: none;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 510;
  min-height: 36px;
  padding: 0 16px;
  border-width: 1px;
}

.contact-info__strip-button.btn-ghost {
  border-color: rgba(19, 101, 107, 0.26);
  color: var(--contact-accent-deep);
  background: rgba(19, 101, 107, 0.04);
}

.contact-info__strip-button:hover,
.contact-info__strip-button:focus {
  transform: none;
}

.contact-info__strip-button.btn-ghost:hover {
  background: rgba(19, 101, 107, 0.08);
}

@media (max-width: 900px) {
  .contact-hero {
    min-height: auto;
    margin-top: 70px;
    padding: 26px 0 24px;
  }

  .contact-hero > .container {
    padding-left: 32px;
    padding-right: 32px;
  }

  .contact-hero__grid {
    grid-template-columns: 1fr;
    gap: 26px;
    min-height: auto;
  }

  .contact-hero__content {
    grid-column: auto;
    width: min(100%, 560px);
    max-width: none;
    min-height: auto;
    padding-top: 0;
  }

  .contact-hero h1 {
    font-size: clamp(2.8rem, 8vw, 3.8rem);
  }

  .contact-hero__subtitle {
    max-width: 16em;
    font-size: clamp(1.05rem, 2.8vw, 1.25rem);
  }

  .contact-hero__card-media img {
    height: min(56vh, 620px);
  }

  .contact-hero__card {
    grid-column: auto;
    max-width: none;
    margin-left: 0;
  }

  .contact-hero__card {
    width: 100%;
  }

  .contact-hero__channels {
    margin-top: 24px;
  }

  .contact-info__strip {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 10px;
    padding-top: 10px;
  }

  .contact-info__side {
    justify-self: start;
    margin-right: 0;
  }

  .contact-coop-entry {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .collaboration-hero {
    margin-top: 70px;
    padding: 38px 0 18px;
  }
}

/* Footer */
.footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #0b1220 0%, #101a2b 100%);
  color: var(--cloud);
  padding: 84px 0 48px;
}

.footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 48px;
  background: linear-gradient(
    180deg,
    rgba(214, 230, 244, 0.22) 0%,
    rgba(92, 132, 166, 0.12) 42%,
    rgba(16, 26, 43, 0) 100%
  );
  pointer-events: none;
}

.footer > .container {
  position: relative;
  z-index: 1;
}

.footer-content {
  text-align: center;
}

.footer-logo h3 {
  font-size: 2.2rem;
  font-family: var(--heading-font);
  margin-bottom: 24px;
  color: var(--cloud);
}

.footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 34px;
}

.footer-action {
  margin: 1.6rem 0 1.2rem;
  padding: 1.2rem 1.4rem;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: center;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
}

.footer-action__cta {
  width: min(520px, 100%);
  padding: 0.9rem 1.4rem;
  font-size: 1.05rem;
  justify-content: center;
  border-radius: 999px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
}

.footer-action__cta--static {
  pointer-events: none;
  cursor: default;
}

.footer-action__note {
  margin: -0.25rem 0 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.62);
}

.footer-action__note:empty {
  display: none;
}

.footer-action__channels,
.footer-action__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: center;
}

.footer-action__social {
  gap: 0.75rem;
}

.footer-action__social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: center;
}

.footer-action__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.footer-action__chip i {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease;
}

.footer-action__icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: grayscale(100%) brightness(1.12);
  opacity: 0.7;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.footer-action__chip--contact {
  padding: 0.52rem 1rem;
  font-size: 0.97rem;
  background: rgba(255, 255, 255, 0.16);
}

.footer-action__chip--contact i {
  font-size: 1.12rem;
}

.footer-action__chip--social {
  padding: 0.32rem 0.65rem;
  font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.08);
}

.footer-action__chip--social .footer-action__icon {
  width: 14px;
  height: 14px;
}

.footer-action__chip:hover,
.footer-action__chip:focus {
  transform: translateY(-1px);
  border-color: rgba(255, 215, 190, 0.7);
  color: #fff;
}

.footer-action__chip:hover i,
.footer-action__chip:focus i {
  color: #ffd7bf;
}

.footer-action__chip:hover .footer-action__icon,
.footer-action__chip:focus .footer-action__icon {
  filter: none;
  opacity: 1;
}

.footer-action__chip--contact:hover,
.footer-action__chip--contact:focus {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 235, 220, 0.85);
}

.footer-action__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}

.footer-action__divider {
  width: min(420px, 100%);
  height: 1px;
  background: rgba(255, 218, 196, 0.22);
}

@media (max-width: 640px) {
  .footer-action {
    padding: 1rem;
  }

  .footer-action__cta {
    font-size: 1rem;
  }
}

.floating-booking {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1200;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.85rem;
}

.floating-booking__toggle {
  position: relative;
  border: none;
  background: linear-gradient(135deg, #2a8a86, #257977);
  color: #fff;
  padding: 0.75rem 1.35rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  border: 1px solid rgba(21, 86, 84, 0.4);
  box-shadow: 0 16px 32px rgba(26, 136, 133, 0.22);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.floating-booking__toggle:hover,
.floating-booking__toggle:focus {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(26, 136, 133, 0.32);
}

.floating-booking__menu {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  width: auto;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.floating-booking.is-open .floating-booking__menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.floating-booking__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.75rem 1.35rem;
  width: 100%;
  border-radius: 999px;
  background: #f1f3f4;
  border: 1px solid #d3d7db;
  color: #2f3b45;
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: 0 12px 22px rgba(15, 28, 36, 0.12);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.floating-booking__item[aria-label="WhatsApp"] {
  background: #eef1f3;
  border-color: #cfd4d9;
}

.floating-booking__item[aria-label="LINE"] {
  background: #f3f4f5;
  border-color: #d5d9dd;
}

.floating-booking__item[aria-label="WeChat"] {
  background: #f0f2f4;
  border-color: #d2d6db;
}

.floating-booking__item i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  color: rgba(47, 59, 69, 0.65);
  line-height: 1;
}

.floating-booking__item:hover,
.floating-booking__item:focus {
  transform: translateY(-1px);
  border-color: #c7ccd1;
  color: #24313a;
  background: #e6eaed;
}

.floating-booking__item:hover i,
.floating-booking__item:focus i {
  color: #24313a;
}

.floating-booking__item:hover i,
.floating-booking__item:focus i {
  color: rgba(26, 136, 133, 0.85);
}

@media (max-width: 640px) {
  .floating-booking {
    right: 16px;
    bottom: 16px;
  }

  .floating-booking__toggle {
    font-size: 0.85rem;
    padding: 0.55rem 0.95rem;
  }

  .floating-booking__item {
    font-size: 0.85rem;
    padding: 0.55rem 0.95rem;
  }

  .floating-booking__menu {
    width: auto;
  }
}

.wechat-qr-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 28, 36, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1300;
}

.wechat-qr-modal.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.wechat-qr-modal__dialog {
  position: relative;
  width: min(360px, 88vw);
  background: #fff;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.wechat-qr-modal__title {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 600;
  color: #1f2e3a;
}

.wechat-qr-modal__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

.wechat-qr-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  aspect-ratio: 1 / 1;
  border: none;
  background: rgba(20, 30, 38, 0.08);
  color: #23323f;
  font-size: 20px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.wechat-qr-modal__close:hover,
.wechat-qr-modal__close:focus {
  background: rgba(20, 30, 38, 0.16);
  color: #0f1c24;
}

.footer-nav a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 3px;
}

.footer-nav a:hover {
  color: var(--cloud);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  letter-spacing: 2px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
}

.footer-nav a:hover {
  color: #2c5f7f;
}

.footer-bottom {
  border-top: 1px solid #333;
  padding-top: 30px;
}

.footer-bottom p {
  margin-bottom: 15px;
  font-size: 0.9rem;
  color: #999;
}


.footer-legal {
  margin-top: 8px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-legal a {
  color: #999;
  text-decoration: none;
  letter-spacing: 1px;
}

.footer-legal a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Footer refinement on existing structure: CTA card + independent legal layer */
@media (min-width: 900px) {
  .footer {
    padding: 80px 0 48px;
  }

  .footer .container {
    max-width: 1200px;
  }

  .footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 0;
  }

  .footer-nav,
  .footer-logo {
    display: none !important;
  }

  .footer-action {
    width: calc(100% - 48px);
    max-width: 860px;
    margin: 0 auto;
    height: auto;
    min-height: 0;
    padding: 34px 44px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
    gap: 0;
    position: relative;
    z-index: 1;
  }

  .footer-action::before {
    content: "RUN KIMONO";
    display: block;
    margin-bottom: 10px;
    font-family: var(--heading-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.68);
  }

  .footer-action::after {
    content: none !important;
    display: none !important;
  }

  .footer-action__cta {
    display: block;
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.92);
    font-size: 31px;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: 0;
    text-transform: none;
    margin: 0;
    margin-top: 16px;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-action__cta::before {
    content: "";
    display: block;
    width: 58px;
    height: 1px;
    margin: 0 auto 16px;
    background: rgba(255, 255, 255, 0.16);
  }

  .footer-action__note {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    margin-left: auto;
    margin-right: auto;
  }

  .footer-action__note:empty {
    display: none;
  }

  .footer-action__note::after {
    content: "9:00–18:00";
    display: block;
    margin-top: 6px;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.55);
  }

  .footer-action__channels {
    margin-top: 22px;
    gap: 10px;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-action__chip {
    font-weight: 500;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }

  .footer-action__chip:hover,
  .footer-action__chip:focus {
    transform: translateY(-1px);
    color: rgba(255, 255, 255, 0.94);
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
  }

  .footer-action__chip:focus-visible {
    outline: none;
    border-color: rgba(200, 169, 107, 0.62);
    box-shadow: 0 0 0 2px rgba(200, 169, 107, 0.22);
  }

  .footer-action__chip i {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.72);
  }

  .footer-action__chip:hover i,
  .footer-action__chip:focus i {
    color: rgba(255, 255, 255, 0.82);
  }

  .footer-action__chip--contact {
    height: 42px;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.92);
    font-size: 14.5px;
    font-weight: 500;
  }

  .footer-action__chip--contact[aria-label="WeChat"] {
    border-color: rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.96);
  }

  .footer-action__chip--contact[aria-label="WeChat"]:hover,
  .footer-action__chip--contact[aria-label="WeChat"]:focus {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.07);
  }

  .footer-action__chip--contact i {
    font-size: 16px;
  }

  .footer-action__chip--contact:hover,
  .footer-action__chip--contact:focus {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.95);
  }

  .footer-action__divider {
    display: none;
  }

  .footer-action__social {
    margin-top: 16px;
    gap: 10px;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-action__label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.52);
  }

  .footer-action__social-links {
    gap: 8px;
  }

  .footer-action__chip--social {
    height: 34px;
    min-height: 34px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 999px;
    border-color: rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.01);
    color: rgba(255, 255, 255, 0.58);
  }

  .footer-action__chip--social .footer-action__icon {
    width: 14px;
    height: 14px;
    opacity: 0.72;
  }

  .footer-action__chip--social:hover,
  .footer-action__chip--social:focus {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.035);
    color: rgba(255, 255, 255, 0.74);
  }

  .footer-action__chip--social:hover i,
  .footer-action__chip--social:focus i {
    color: rgba(255, 255, 255, 0.78);
  }

  .footer-bottom {
    width: calc(100% - 48px);
    max-width: 860px;
    margin: 36px auto 0;
    padding-top: 0;
    border-top: 0;
    gap: 10px;
    align-items: center;
    letter-spacing: 0.2px;
    position: relative;
    z-index: 1;
  }

  .footer-bottom::before {
    content: none;
    display: none;
  }

  .footer-bottom p {
    margin: 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.84);
    font-weight: 500;
    letter-spacing: 0.02em;
  }

  .footer-legal {
    margin-top: 6px;
    gap: 0;
    align-items: center;
  }

  .footer-legal a {
    color: rgba(255, 255, 255, 0.56);
    font-size: 12.5px;
    text-decoration: none;
  }

  .footer-legal a + a::before {
    content: "｜";
    color: rgba(255, 255, 255, 0.42);
    margin: 0 8px 0 6px;
  }

  .footer-legal a:hover {
    color: rgba(255, 255, 255, 0.86);
    text-decoration: none;
  }

}

@media (max-width: 899px) {
  .footer {
    border-top: 0;
    padding: 78px 0 44px;
    background: #101a2b;
  }

  /* Disable fog/overlay transition effects on mobile */
  .footer::before,
  .footer::after {
    content: none;
    display: none;
  }

  .footer > .container {
    position: relative;
    z-index: 1;
  }

  .footer-nav,
  .footer-logo {
    display: none !important;
  }

  .footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-action {
    width: calc(100% - 24px);
    padding: 20px 18px 18px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
    gap: 0;
    margin: 0 auto;
  }

  .footer-action::before {
    content: "RUN KIMONO";
    display: block;
    margin-bottom: 8px;
    font-family: var(--heading-font);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.68);
    text-align: center;
  }

  .footer-action__cta {
    display: block;
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.92);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: 0;
    text-transform: none;
    margin: 0;
    margin-top: 14px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .footer-action__cta::before {
    content: "";
    display: block;
    width: 58px;
    height: 1px;
    margin: 0 auto 14px;
    background: rgba(255, 255, 255, 0.15);
  }

  .footer-action__note {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
  }

  .footer-action__note::after {
    content: "9:00–18:00";
    display: block;
    margin-top: 5px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
  }

  .footer-action__channels {
    margin-top: 16px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    justify-items: stretch;
  }

  .footer-action__chip--contact {
    height: 39px;
    min-height: 39px;
    width: 100%;
    padding: 0 5px;
    font-size: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.92);
    gap: 4px;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
  }

  .footer-action__chip--contact[aria-label="LINE"] {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.92);
  }

  .footer-action__chip--contact[aria-label="WeChat"] {
    border-color: rgba(255, 255, 255, 0.19);
    background: rgba(255, 255, 255, 0.025);
    color: rgba(255, 255, 255, 0.94);
  }

  .footer-action__chip--contact i {
    font-size: 12px;
    line-height: 1;
  }

  .footer-action__chip:hover,
  .footer-action__chip:focus {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.94);
    transform: translateY(-1px);
  }

  .footer-action__chip:hover i,
  .footer-action__chip:focus i {
    color: rgba(255, 255, 255, 0.8);
  }

  .footer-action__channels .footer-action__chip--contact:last-child {
    grid-column: auto;
  }

  .footer-action__divider {
    display: none;
  }

  .footer-action__social {
    margin-top: 10px;
    gap: 6px;
    justify-content: center;
  }

  .footer-action__label {
    width: 100%;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1px;
  }

  .footer-action__social-links {
    gap: 6px;
    justify-content: center;
  }

  .footer-action__chip--social {
    height: 32px;
    min-height: 32px;
    padding: 0 12px;
    font-size: 12.5px;
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.01);
    color: rgba(255, 255, 255, 0.56);
  }

  .footer-action__chip--social:hover,
  .footer-action__chip--social:focus {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.035);
    color: rgba(255, 255, 255, 0.74);
  }

  .footer-bottom {
    width: calc(100% - 24px);
    margin: 34px auto 0;
    padding-top: 0;
    border-top: 0;
    gap: 8px;
    text-align: center;
  }

  .footer-bottom p {
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.035em;
    line-height: 1.45;
  }

  .footer-legal {
    margin-top: 7px;
    gap: 0;
    line-height: 1.5;
  }

  .footer-legal a {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.54);
    letter-spacing: 0.03em;
    line-height: 1.5;
  }

  .footer-legal a + a::before {
    content: "｜";
    color: rgba(255, 255, 255, 0.42);
    margin: 0 11px 0 9px;
  }

  .footer-legal a:hover {
    color: rgba(255, 255, 255, 0.86);
    text-decoration: none;
  }

  /* Japanese mobile: keep legal links on one line without changing structure */
  html:lang(ja) .footer-bottom {
    width: calc(100% - 12px);
  }

  html:lang(ja) .footer-legal {
    flex-wrap: nowrap;
    justify-content: center;
    white-space: nowrap;
    margin-top: 6px;
    line-height: 1.35;
  }

  html:lang(ja) .footer-legal a {
    font-size: clamp(10px, 2.65vw, 11px);
    letter-spacing: 0.005em;
    line-height: 1.35;
    white-space: nowrap;
  }

  html:lang(ja) .footer-legal a + a::before {
    margin: 0 6px;
  }

  /* English mobile: try single-line legal links first, keep separators */
  html:lang(en) .footer-bottom {
    width: calc(100% - 10px);
  }

  html:lang(en) .footer-legal {
    flex-wrap: nowrap;
    justify-content: center;
    white-space: nowrap;
    gap: 0;
    margin-top: 6px;
    line-height: 1.35;
  }

  html:lang(en) .footer-legal a {
    font-size: clamp(10px, 2.45vw, 11.2px);
    letter-spacing: 0.005em;
    line-height: 1.35;
    white-space: nowrap;
  }

  html:lang(en) .footer-legal a + a::before {
    margin: 0 6px 0 5px;
  }

  /* Very small screens fallback: 3 lines */
  @media (max-width: 390px) {
    html:lang(en) .footer-legal {
      flex-direction: column;
      align-items: center;
      white-space: normal;
      gap: 4px;
    }

    html:lang(en) .footer-legal a {
      white-space: normal;
    }
  }
}
/* Responsive Design */
@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    left: -100%;
    top: 70px;
    flex-direction: column;
    background-color: white;
    width: 100%;
    text-align: center;
    transition: 0.3s;
    box-shadow: 0 10px 27px rgba(0,0,0,0.05);
    padding: 20px 0;
  }

  .nav-menu.active {
    left: 0;
  }

  .category-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    width: 100%;
    margin: 0;
    padding: 0 16px 12px;
    overflow: visible;
  }

  .category-item {
    height: clamp(220px, 55vw, 320px);
  }

  .category-overlay h3 {
    font-size: 1.4rem;
  }

  .cta-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .testimonial-section p {
    font-size: 1.1rem;
  }

  .footer-nav {
    flex-direction: column;
    gap: 15px;
  }
}

/* Page Header */
.page-header {
  background: linear-gradient(135deg, #2c5f7f 0%, #1a4a66 100%);
  color: white;
  padding: 9.5rem 0 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-header > * {
  position: relative;
  z-index: 1;
}


/* Seasonal overrides (24 solar terms) */
html[data-season="spring"] .page-header {
  background-image: linear-gradient(135deg, #2c5f7f 0%, #1a4a66 100%);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

html[data-season="summer"] .page-header::before,
html[data-season="summer"] .page-header::after {
  content: none;
}

html[data-season="spring"] .page-header::before,
html[data-season="spring"] .page-header::after {
  content: none;
}


html[data-season="summer"] .page-header::before,
html[data-season="summer"] .page-header::after {
  top: -8%;
  left: 0;
  width: 100%;
  height: 120%;
  margin-left: 0;
  border-radius: 0;
  transform-origin: 50% 50%;
  --firework-lg: clamp(190px, 26vw, 320px);
  --firework-md: clamp(150px, 21vw, 240px);
  background-image:
    repeating-conic-gradient(from -6deg, rgba(255, 220, 140, 0.9) 0 0.6deg, transparent 0.6deg 9.5deg),
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1.8%, rgba(255, 200, 140, 0.55) 10%, rgba(255, 200, 140, 0) 42%),
    repeating-conic-gradient(from 8deg, rgba(140, 210, 255, 0.9) 0 0.6deg, transparent 0.6deg 9.5deg),
    radial-gradient(circle, rgba(255, 255, 255, 0.92) 0 1.8%, rgba(140, 210, 255, 0.5) 9.5%, rgba(140, 210, 255, 0) 40%),
    repeating-conic-gradient(from -12deg, rgba(255, 150, 180, 0.85) 0 0.6deg, transparent 0.6deg 9.5deg),
    radial-gradient(circle, rgba(255, 255, 255, 0.92) 0 1.6%, rgba(255, 160, 180, 0.5) 9%, rgba(255, 160, 180, 0) 38%),
    repeating-conic-gradient(from 4deg, rgba(120, 230, 190, 0.85) 0 0.6deg, transparent 0.6deg 9.5deg),
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 1.6%, rgba(120, 230, 190, 0.45) 9%, rgba(120, 230, 190, 0) 38%);
  background-size:
    var(--firework-lg) var(--firework-lg),
    var(--firework-lg) var(--firework-lg),
    var(--firework-md) var(--firework-md),
    var(--firework-md) var(--firework-md),
    var(--firework-md) var(--firework-md),
    var(--firework-md) var(--firework-md),
    var(--firework-md) var(--firework-md),
    var(--firework-md) var(--firework-md);
  background-position:
    14% 20%,
    14% 20%,
    50% 6%,
    50% 6%,
    80% 26%,
    80% 26%,
    30% 60%,
    30% 60%;
  background-repeat: no-repeat;
  -webkit-mask-image:
    radial-gradient(circle, rgba(0, 0, 0, 1) 0 62%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(circle, rgba(0, 0, 0, 1) 0 62%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(circle, rgba(0, 0, 0, 1) 0 62%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(circle, rgba(0, 0, 0, 1) 0 62%, rgba(0, 0, 0, 0) 70%);
  -webkit-mask-size:
    var(--firework-lg) var(--firework-lg),
    var(--firework-md) var(--firework-md),
    var(--firework-md) var(--firework-md),
    var(--firework-md) var(--firework-md);
  -webkit-mask-position:
    14% 20%,
    50% 6%,
    80% 26%,
    30% 60%;
  -webkit-mask-repeat: no-repeat;
  mask-image:
    radial-gradient(circle, rgba(0, 0, 0, 1) 0 62%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(circle, rgba(0, 0, 0, 1) 0 62%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(circle, rgba(0, 0, 0, 1) 0 62%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(circle, rgba(0, 0, 0, 1) 0 62%, rgba(0, 0, 0, 0) 70%);
  mask-size:
    var(--firework-lg) var(--firework-lg),
    var(--firework-md) var(--firework-md),
    var(--firework-md) var(--firework-md),
    var(--firework-md) var(--firework-md);
  mask-position:
    14% 20%,
    50% 6%,
    80% 26%,
    30% 60%;
  mask-repeat: no-repeat;
  animation: fireworks-burst 22s ease-out infinite;
  box-shadow: none;
  background-blend-mode: screen;
  filter: drop-shadow(0 0 10px rgba(255, 230, 170, 0.45));
  mix-blend-mode: screen;
  opacity: 0.78;
}

html[data-season="summer"] .page-header::after {
  --firework-sm: clamp(110px, 16vw, 180px);
  --firework-xs: clamp(80px, 11vw, 140px);
  background-image:
    repeating-conic-gradient(from 2deg, rgba(255, 220, 160, 0.7) 0 0.5deg, transparent 0.5deg 8deg),
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 1.6%, rgba(255, 200, 160, 0.4) 9%, rgba(255, 200, 160, 0) 36%),
    repeating-conic-gradient(from -10deg, rgba(160, 210, 255, 0.7) 0 0.5deg, transparent 0.5deg 8deg),
    radial-gradient(circle, rgba(255, 255, 255, 0.88) 0 1.6%, rgba(160, 210, 255, 0.35) 9%, rgba(160, 210, 255, 0) 36%);
  background-size:
    var(--firework-sm) var(--firework-sm),
    var(--firework-sm) var(--firework-sm),
    var(--firework-xs) var(--firework-xs),
    var(--firework-xs) var(--firework-xs);
  background-position:
    16% 58%,
    16% 58%,
    72% 56%,
    72% 56%;
  background-repeat: no-repeat;
  background-blend-mode: screen;
  opacity: 0.5;
  -webkit-mask-image:
    radial-gradient(circle, rgba(0, 0, 0, 1) 0 62%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(circle, rgba(0, 0, 0, 1) 0 62%, rgba(0, 0, 0, 0) 70%);
  -webkit-mask-size:
    var(--firework-sm) var(--firework-sm),
    var(--firework-xs) var(--firework-xs);
  -webkit-mask-position:
    16% 58%,
    72% 56%;
  -webkit-mask-repeat: no-repeat;
  mask-image:
    radial-gradient(circle, rgba(0, 0, 0, 1) 0 62%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(circle, rgba(0, 0, 0, 1) 0 62%, rgba(0, 0, 0, 0) 70%);
  mask-size:
    var(--firework-sm) var(--firework-sm),
    var(--firework-xs) var(--firework-xs);
  mask-position:
    16% 58%,
    72% 56%;
  mask-repeat: no-repeat;
  animation-duration: 28s;
  animation-delay: -14s;
}

html[data-season="autumn"] .page-header::before,
html[data-season="autumn"] .page-header::after {
  top: -8%;
  left: 0;
  width: 100%;
  height: 120%;
  margin-left: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  --leaf-orange: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23f7b24c'/><stop offset='1' stop-color='%23e05b2e'/></linearGradient></defs><path fill='url(%23g)' d='M50 4 L56 18 L66 8 L64 24 L82 20 L70 32 L90 36 L70 42 L88 54 L66 50 L72 72 L58 58 L56 90 L50 66 L44 90 L42 58 L28 72 L34 50 L12 54 L30 42 L10 36 L30 32 L18 20 L36 24 L34 8 L44 18 Z'/></svg>");
  --leaf-yellow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23f6d46a'/><stop offset='1' stop-color='%23f0a43a'/></linearGradient></defs><path fill='url(%23g)' d='M50 4 L56 18 L66 8 L64 24 L82 20 L70 32 L90 36 L70 42 L88 54 L66 50 L72 72 L58 58 L56 90 L50 66 L44 90 L42 58 L28 72 L34 50 L12 54 L30 42 L10 36 L30 32 L18 20 L36 24 L34 8 L44 18 Z'/></svg>");
  --leaf-lg: clamp(26px, 4.2vw, 52px);
  --leaf-md: clamp(22px, 3.4vw, 42px);
  --leaf-sm: clamp(18px, 2.8vw, 34px);
  background-image:
    var(--leaf-orange),
    var(--leaf-yellow),
    var(--leaf-orange),
    var(--leaf-yellow),
    var(--leaf-orange);
  background-size:
    var(--leaf-lg) var(--leaf-lg),
    var(--leaf-md) var(--leaf-md),
    var(--leaf-sm) var(--leaf-sm),
    var(--leaf-md) var(--leaf-md),
    var(--leaf-sm) var(--leaf-sm);
  background-position:
    12% 16%,
    34% 8%,
    52% 26%,
    72% 18%,
    24% 50%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 4px rgba(120, 60, 20, 0.25));
  animation: leaf-fall 36s linear infinite;
}

html[data-season="autumn"] .page-header::after {
  opacity: 0.6;
  animation-duration: 48s;
  animation-delay: -12s;
  box-shadow: none;
  background-image:
    var(--leaf-yellow),
    var(--leaf-orange),
    var(--leaf-yellow),
    var(--leaf-orange);
  background-size:
    var(--leaf-sm) var(--leaf-sm),
    var(--leaf-md) var(--leaf-md),
    var(--leaf-sm) var(--leaf-sm),
    var(--leaf-sm) var(--leaf-sm);
  background-position:
    18% 62%,
    50% 54%,
    80% 62%,
    68% 38%;
  background-repeat: no-repeat;
}

html[data-season="winter"] .page-header::before,
html[data-season="winter"] .page-header::after {
  top: -8%;
  left: 0;
  width: 100%;
  height: 120%;
  margin-left: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  --snowflake: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' stroke='%23ffffff' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' fill='none'><path d='M50 8 L50 92'/><path d='M8 50 L92 50'/><path d='M20 20 L80 80'/><path d='M80 20 L20 80'/><path d='M50 8 L44 20'/><path d='M50 8 L56 20'/><path d='M50 92 L44 80'/><path d='M50 92 L56 80'/><path d='M8 50 L20 44'/><path d='M8 50 L20 56'/><path d='M92 50 L80 44'/><path d='M92 50 L80 56'/></svg>");
  --snow-lg: clamp(18px, 3vw, 36px);
  --snow-md: clamp(14px, 2.4vw, 30px);
  --snow-sm: clamp(10px, 1.8vw, 22px);
  background-image:
    var(--snowflake),
    var(--snowflake),
    var(--snowflake),
    var(--snowflake),
    var(--snowflake),
    var(--snowflake);
  background-size:
    var(--snow-lg) var(--snow-lg),
    var(--snow-md) var(--snow-md),
    var(--snow-sm) var(--snow-sm),
    var(--snow-md) var(--snow-md),
    var(--snow-sm) var(--snow-sm),
    var(--snow-md) var(--snow-md);
  background-position:
    12% 10%,
    32% 22%,
    50% 8%,
    68% 18%,
    84% 12%,
    24% 40%;
  background-repeat: no-repeat;
  animation: snow-fall 40s linear infinite;
  filter: drop-shadow(0 1px 3px rgba(180, 210, 255, 0.28));
}

html[data-season="winter"] .page-header::after {
  opacity: 0.55;
  animation-duration: 52s;
  animation-delay: -12s;
  background-image:
    var(--snowflake),
    var(--snowflake),
    var(--snowflake),
    var(--snowflake);
  background-size:
    var(--snow-sm) var(--snow-sm),
    var(--snow-md) var(--snow-md),
    var(--snow-sm) var(--snow-sm),
    var(--snow-sm) var(--snow-sm);
  background-position:
    18% 55%,
    44% 48%,
    70% 58%,
    86% 42%;
  background-repeat: no-repeat;
}

@keyframes fireworks-burst {
  0% {
    transform: translate3d(0, 4vh, 0) scale(0.12);
    opacity: 0;
  }
  28% {
    opacity: 0.95;
  }
  70% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.75;
  }
  100% {
    transform: translate3d(0, -1vh, 0) scale(1.05);
    opacity: 0;
  }
}

@keyframes leaf-fall {
  0% {
    transform: translate3d(-6vw, -10%, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(4vw, 60vh, 0) rotate(140deg);
  }
  100% {
    transform: translate3d(8vw, 120vh, 0) rotate(280deg);
  }
}

@keyframes snow-fall {
  0% {
    transform: translate3d(0, -10%, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(4vw, 120vh, 0) rotate(90deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-header::before,
  .page-header::after {
    animation: none;
    opacity: 0.4;
  }
}


.page-header h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.page-header p {
  font-size: 1.25rem;
  opacity: 0.9;
}

/* Legal pages: keep long Japanese/Chinese legal text readable and consistent. */
.legal-layout {
  padding: 48px 0;
}

.legal-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 28px);
  line-height: 1.9;
}

.legal-content h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.08rem, 2vw, 1.34rem);
  letter-spacing: 0.01em;
}

.legal-content h2:not(:first-of-type) {
  margin-top: 2rem;
}

.legal-content p {
  margin-bottom: 0.9rem;
  color: rgba(31, 31, 31, 0.85);
}

.legal-list {
  margin: 0.75rem 0 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.4rem;
}

.legal-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 0;
}

.legal-facts__row {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.1);
}

.legal-facts__row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.legal-facts dt {
  font-weight: 700;
}

.legal-facts dd {
  margin: 6px 0 0;
  color: rgba(17, 17, 17, 0.82);
  overflow-wrap: anywhere;
}

/* Portfolio Filter */
.portfolio-filter {
  background: #f8f9fa;
  text-align: center;
  position: sticky;
  /* Stick to the top of the viewport, under the navbar.
     JS maintains --nav-sticky-offset based on the current navbar height. */
  top: var(--nav-sticky-offset, 0px);
  z-index: 980;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  /* restore vertical breathing room above and below the filter buttons */
  padding: 1.25rem 0;
}

/* Mobile pinned filter mode
   When enabled by JS, the filter bar becomes fixed at the very top of the
   viewport (top: 0). A spacer element is inserted above the filter to
   preserve layout flow and prevent content from jumping.
*/
.portfolio-filter--pinned {
  position: fixed;
  /* Pinned mode: fixed during scroll. The top offset is controlled via
     --filter-pinned-top so JS can switch between:
     - navbar shown  -> under navbar
     - navbar hidden -> absolute top (0)
  */
  top: var(--filter-pinned-top, 0px);
  left: 0;
  right: 0;
  width: 100%;
  z-index: 995;
}

.portfolio-filter-spacer {
  height: var(--portfolio-filter-height, 0px);
}

/* Mobile-specific adjustments for the portfolio filter
   - Make the filter non-sticky so it doesn't consume vertical space on small screens
   - Reduce padding to save space
   - Allow horizontal scrolling for the filter buttons row so many buttons fit
   - Reduce button padding and font-size for better fit
*/
@media (max-width: 899px) {
  .portfolio-filter {
    /* Default mobile behavior: sticky under navbar.
       JS may switch to pinned mode (.portfolio-filter--pinned) on pages
       that require the filter to stay at the very top while scrolling down. */
    position: sticky;
    top: var(--nav-sticky-offset, 0px);
    z-index: 980;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    padding: 0.6rem 0;
    background: #f8f9fa; /* ensure background covers content beneath when sticky */
  }

  .portfolio-filter--pinned {
    position: fixed;
    top: var(--filter-pinned-top, var(--nav-sticky-offset, 0px));
    z-index: 995;
  }

  .filter-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-start; /* left align so horizontal scroll feels natural */
    overflow-x: auto;
    padding: 0 0.5rem; /* breathing room at edges */
    -webkit-overflow-scrolling: touch;
  }

  .filter-buttons::-webkit-scrollbar { height: 8px; }
  .filter-buttons::-webkit-scrollbar-thumb { background: rgba(44,95,127,0.15); border-radius: 999px; }

  .filter-btn {
    flex: 0 0 auto; /* keep buttons from stretching */
    padding: 0.45rem 0.9rem;
    font-size: 0.95rem;
    border-width: 1.5px;
  }
}

.filter-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 0.75rem 2rem;
  border: 2px solid #2c5f7f;
  background: white;
  color: #2c5f7f;
  font-weight: 600;
  cursor: pointer;
  /* Avoid transition: all (layout/paint-heavy properties). */
  transition: background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}

.filter-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  /* match the button's pill shape */
  border-radius: inherit;
  background: rgba(44,95,127,0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.filter-btn:hover::before {
  width: 300px;
  height: 300px;
}

.filter-btn:hover,
.filter-btn.active {
  background: #2c5f7f;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(44,95,127,0.3);
  border-radius: inherit;
}

.filter-btn.active {
  box-shadow: 0 5px 20px rgba(44,95,127,0.4);
  border-radius: inherit;
}

.filter-btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  background: #f0f4f7;
  color: #7a8b99;
  border-color: #cad7e3;
  box-shadow: none;
  transform: none;
}

/* Mobile: show filter buttons as 4 columns per row and keep pill shape */
@media (max-width: 640px) {
  .filter-buttons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
    justify-items: stretch;
  }

  .filter-buttons .filter-btn {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border-radius: 999px; /* keep pill shape */
    font-size: 0.85rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal; /* allow wrapping if needed */
  }

  /* Mobile: ensure touch interactions show the same ripple and highlight as desktop hover */
  .filter-buttons .filter-btn:active::before,
  .filter-buttons .filter-btn.active::before,
  .filter-buttons .filter-btn.is-active::before {
    width: 300px;
    height: 300px;
  }

  .filter-buttons .filter-btn:active,
  .filter-buttons .filter-btn:focus-visible,
  .filter-buttons .filter-btn.active,
  .filter-buttons .filter-btn.is-active {
    background: #2c5f7f;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(44,95,127,0.3);
    border-radius: inherit;
  }
}

/* Services page: hero readability + restrained filter state hierarchy */
.page-header.services-page-header h1 {
  margin-bottom: 0.95rem;
  color: rgba(255, 255, 255, 0.99);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.page-header.services-page-header {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.12) 0, rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #2d6288 0%, #346d92 58%, #3d7799 100%);
}

.page-header.services-page-header p {
  max-width: min(640px, 92vw);
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(0.98rem, 1.18vw, 1.08rem);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

@media (min-width: 769px) {
  .page-header.services-page-header p {
    text-align: center;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.page-header.portfolio-page-header h1 {
  color: rgba(255, 255, 255, 0.99);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.page-header.portfolio-page-header p {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.page-header.about-page-header h1 {
  color: rgba(255, 255, 255, 0.99);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.page-header.about-page-header p {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.services-filter .filter-btn {
  border-color: rgba(44, 95, 127, 0.4);
  background: rgba(255, 255, 255, 0.94);
  color: rgba(44, 95, 127, 0.67);
  box-shadow: none;
  transform: none;
}

.services-filter .filter-btn::before {
  background: rgba(44, 95, 127, 0.1);
}

.services-filter .filter-btn:hover {
  border-color: rgba(44, 95, 127, 0.68);
  background: rgba(255, 255, 255, 0.98);
  color: #2c5f7f;
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(44, 95, 127, 0.12);
}

.services-filter .filter-btn.active,
.services-filter .filter-btn.is-active {
  border-color: #2c5f7f;
  background: #2c5f7f;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(44, 95, 127, 0.24);
}

.services-filter {
  padding: 1rem 0 1.1rem;
  background: transparent;
  box-shadow: none;
  margin-bottom: 14px;
}

.services-filter .container {
  max-width: 980px;
}

.services-filter .filter-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 10px;
  row-gap: 10px;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 10px 12px;
  border: 0;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: none;
}

.services-filter .filter-btn {
  min-height: 44px;
  height: 44px;
  width: 100%;
  padding: 0 16px;
  border: 1px solid rgba(44, 95, 127, 0.07);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.38);
  color: rgba(27, 64, 89, 0.8);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  transform: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.services-filter .filter-btn::before {
  display: none;
}

.services-filter .filter-btn:hover,
.services-filter .filter-btn:focus-visible {
  border-color: rgba(44, 95, 127, 0.11);
  background: rgba(53, 108, 145, 0.045);
  color: rgba(24, 61, 86, 0.88);
  transform: none;
  box-shadow: none;
}

.services-filter .filter-btn.active,
.services-filter .filter-btn.is-active {
  border-color: rgba(44, 95, 127, 0.075);
  background: rgba(44, 95, 127, 0.045);
  color: rgba(22, 63, 90, 0.94);
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(44, 95, 127, 0.015);
}

.services-filter .filter-btn[data-service-tab="kimonoprice"]:not(.active):not(.is-active) {
  color: rgba(38, 74, 99, 0.72);
  border-color: rgba(44, 95, 127, 0.06);
  letter-spacing: -0.01em;
}

.services-filter.portfolio-filter--pinned {
  padding-top: 8px;
  padding-bottom: 8px;
  margin-bottom: 0;
  background: transparent;
  box-shadow: none;
}

.services-filter.portfolio-filter--pinned .filter-buttons {
  max-width: 720px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 8px;
  row-gap: 8px;
  padding: 2px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.services-filter.portfolio-filter--pinned .filter-btn {
  min-height: 34px;
  height: 34px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 17px;
  border-color: rgba(20, 60, 70, 0.08);
  background: rgba(255, 255, 255, 0.90);
}

.services-filter.portfolio-filter--pinned.services-filter--sticky-primary .services-filter__primary {
  display: inline-flex;
}

.services-filter.portfolio-filter--pinned.services-filter--sticky-primary .services-filter__secondary {
  display: none;
}

.services-filter.portfolio-filter--pinned.services-filter--sticky-secondary .services-filter__primary {
  display: none;
}

.services-filter.portfolio-filter--pinned.services-filter--sticky-secondary .services-filter__secondary {
  display: inline-flex;
}

.services-filter.portfolio-filter--pinned .filter-btn.active,
.services-filter.portfolio-filter--pinned .filter-btn.is-active {
  background: rgba(20, 60, 70, 0.1);
  color: #143C46;
  border-color: rgba(20, 60, 70, 0.16);
}

@media (min-width: 901px) {
  .services-filter,
  .portfolio-filter {
    margin-bottom: 28px;
    padding: 20px 0;
    background: #f8f9fa;
    box-shadow: none;
  }

  .services-filter .container,
  .portfolio-filter .container {
    max-width: none;
    padding-left: clamp(24px, 3vw, 32px);
    padding-right: clamp(24px, 3vw, 32px);
  }

  .services-filter .filter-buttons,
  .portfolio-filter .filter-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .services-filter .filter-btn,
  .services-filter .filter-btn:hover,
  .services-filter .filter-btn:focus-visible,
  .services-filter .filter-btn.active,
  .services-filter .filter-btn.is-active {
    width: 168px;
    min-width: 168px;
    min-height: 45px;
    height: 45px;
    padding: 0 24px;
    border-radius: 23px;
    border-width: 1px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .services-filter .filter-btn {
    border-color: rgba(20,60,70,0.08);
    background: #ffffff;
    color: rgba(20,60,70,0.82);
    transform: none;
  }

  .services-filter .filter-btn::before {
    display: none;
  }

  .services-filter .filter-btn:hover,
  .services-filter .filter-btn:focus-visible {
    border-color: rgba(20,60,70,0.08);
    background: #ffffff;
    color: rgba(20,60,70,0.88);
    transform: none;
  }

  .services-filter .filter-btn.active,
  .services-filter .filter-btn.is-active {
    border-color: rgba(20,60,70,0.16);
    background: rgba(20,60,70,0.09);
    color: #143C46;
    transform: none;
    box-shadow: none;
  }

  .services-filter .services-filter__primary,
  .services-filter .services-filter__secondary {
    display: inline-flex;
  }

  .portfolio-filter .filter-btn {
    width: 168px;
    min-width: 168px;
    min-height: 45px;
    height: 45px;
    padding: 0 24px;
    border: 1px solid rgba(20,60,70,0.08);
    border-radius: 23px;
    background: #ffffff;
    color: rgba(20,60,70,0.82);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    box-shadow: none;
    transform: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .portfolio-filter .filter-btn::before {
    display: none;
  }

  .portfolio-filter .filter-btn:hover,
  .portfolio-filter .filter-btn:focus-visible {
    border-color: rgba(20,60,70,0.08);
    background: #ffffff;
    color: rgba(20,60,70,0.88);
    transform: none;
    box-shadow: none;
  }

  .portfolio-filter .filter-btn.active,
  .portfolio-filter .filter-btn.is-active {
    border-color: rgba(20,60,70,0.16);
    background: rgba(20,60,70,0.09);
    color: #143C46;
    transform: none;
    box-shadow: none;
  }

  /* Portfolio desktop: remove the visual seam between the filter bar and gallery. */
  .portfolio-filter:not(.services-filter) {
    margin-bottom: 0;
  }

  .portfolio-gallery {
    padding-top: 0;
  }
}

@media (max-width: 768px) {
  .page-header.services-page-header {
    padding-top: calc(var(--nav-sticky-offset, 52px) + 28px);
    padding-bottom: 20px;
  }

  .page-header.services-page-header h1 {
    margin-bottom: 14px;
  }

  .page-header.services-page-header p {
    width: 90%;
    max-width: 90%;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    text-align: center;
    color: rgba(255, 255, 255, 0.88);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .services-filter {
    padding-top: 16px;
    padding-bottom: 14px;
    margin-bottom: 12px;
  }

  .services-filter .filter-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 10px;
    column-gap: 10px;
    padding: 10px;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .services-filter .filter-buttons .filter-btn {
    width: 100%;
    min-height: 44px;
    height: 44px;
    padding: 0 16px;
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
    border-radius: 22px;
    border-width: 1px;
    transform: none;
    box-shadow: none;
  }

  .services-filter .filter-btn::before {
    display: none;
  }

  .services-filter .filter-btn:hover,
  .services-filter .filter-btn:active,
  .services-filter .filter-btn:focus-visible,
  .services-filter .filter-btn.active,
  .services-filter .filter-btn.is-active {
    transform: none;
    box-shadow: none;
    border-radius: 22px;
  }

  .services-filter .filter-btn[data-service-tab="kimonoprice"]:not(.active):not(.is-active) {
    color: rgba(44, 95, 127, 0.72);
    border-color: rgba(44, 95, 127, 0.06);
  }

  .services-filter.portfolio-filter--pinned {
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 0;
  }

  .services-filter.portfolio-filter--pinned .filter-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 2px 10px;
    border-radius: 14px;
    row-gap: 8px;
    column-gap: 8px;
  }

  .services-filter.portfolio-filter--pinned .filter-buttons .filter-btn {
    min-height: 34px;
    height: 34px;
    padding: 0 12px;
    font-size: 14px;
    border-radius: 17px;
  }

  .portfolio-filter:not(.services-filter) {
    padding-top: 16px;
    padding-bottom: 0;
    margin-bottom: 0;
    background: transparent;
    box-shadow: none;
  }

  .portfolio-filter:not(.services-filter) .filter-buttons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 10px;
    column-gap: 10px;
    padding: 10px;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: rgba(255, 255, 255, 0.98);
    border: 0;
    border-radius: 26px;
    box-shadow: none;
    overflow-x: visible;
  }

  .portfolio-filter:not(.services-filter) .filter-buttons .filter-btn {
    width: 100%;
    min-height: 44px;
    height: 44px;
    padding: 0 16px;
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
    border-radius: 22px;
    border-width: 1px;
    transform: none;
    box-shadow: none;
  }

  .portfolio-filter:not(.services-filter) .filter-btn {
    border-color: rgba(44, 95, 127, 0.07);
    background: rgba(255, 255, 255, 0.38);
    color: rgba(27, 64, 89, 0.8);
    font-weight: 500;
    letter-spacing: 0.01em;
  }

  .portfolio-filter:not(.services-filter) .filter-btn::before {
    display: none;
  }

  .portfolio-filter:not(.services-filter) .filter-btn:hover,
  .portfolio-filter:not(.services-filter) .filter-btn:active,
  .portfolio-filter:not(.services-filter) .filter-btn:focus-visible,
  .portfolio-filter:not(.services-filter) .filter-btn.active,
  .portfolio-filter:not(.services-filter) .filter-btn.is-active {
    transform: none;
    box-shadow: none;
    border-radius: 22px;
  }

  .portfolio-filter:not(.services-filter) .filter-btn:hover,
  .portfolio-filter:not(.services-filter) .filter-btn:focus-visible {
    border-color: rgba(44, 95, 127, 0.11);
    background: rgba(53, 108, 145, 0.045);
    color: rgba(24, 61, 86, 0.88);
  }

  .portfolio-filter:not(.services-filter) .filter-btn.active,
  .portfolio-filter:not(.services-filter) .filter-btn.is-active {
    border-color: rgba(44, 95, 127, 0.075);
    background: rgba(44, 95, 127, 0.045);
    color: rgba(22, 63, 90, 0.94);
    box-shadow: inset 0 0 0 1px rgba(44, 95, 127, 0.015);
  }

  .portfolio-filter:not(.services-filter).portfolio-filter--pinned {
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 0;
    background: transparent;
    box-shadow: none;
  }

  .portfolio-filter:not(.services-filter).portfolio-filter--pinned .filter-buttons {
    max-width: 720px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 8px;
    padding: 2px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .portfolio-filter:not(.services-filter).portfolio-filter--pinned.portfolio-filter--sticky-primary .filter-btn[data-category="lace"],
  .portfolio-filter:not(.services-filter).portfolio-filter--pinned.portfolio-filter--sticky-primary .filter-btn[data-category="couple"],
  .portfolio-filter:not(.services-filter).portfolio-filter--pinned.portfolio-filter--sticky-primary .filter-btn[data-category="family"] {
    display: none;
  }

  .portfolio-filter:not(.services-filter).portfolio-filter--pinned.portfolio-filter--sticky-secondary .filter-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 560px;
  }

  .portfolio-filter:not(.services-filter).portfolio-filter--pinned.portfolio-filter--sticky-secondary .filter-btn[data-category="haute"],
  .portfolio-filter:not(.services-filter).portfolio-filter--pinned.portfolio-filter--sticky-secondary .filter-btn[data-category="furisode"],
  .portfolio-filter:not(.services-filter).portfolio-filter--pinned.portfolio-filter--sticky-secondary .filter-btn[data-category="visiting"],
  .portfolio-filter:not(.services-filter).portfolio-filter--pinned.portfolio-filter--sticky-secondary .filter-btn[data-category="komon"] {
    display: none;
  }

  .portfolio-filter:not(.services-filter).portfolio-filter--pinned .filter-buttons .filter-btn {
    min-height: 34px;
    height: 34px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 17px;
    border-color: rgba(20, 60, 70, 0.08);
    background: rgba(255, 255, 255, 0.90);
  }

  .portfolio-filter:not(.services-filter).portfolio-filter--pinned .filter-btn.active,
  .portfolio-filter:not(.services-filter).portfolio-filter--pinned .filter-btn.is-active {
    background: rgba(20, 60, 70, 0.1);
    color: #143C46;
    border-color: rgba(20, 60, 70, 0.16);
  }

  .portfolio-gallery {
    padding-top: 16px;
  }
}

@media (max-width: 640px) {
  .services-filter .filter-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .services-filter .filter-buttons .filter-btn {
    width: 100%;
    min-height: 44px;
    height: 44px;
    padding: 0 16px;
    white-space: nowrap;
  }
}

/* Portfolio Gallery */
.portfolio-gallery {
  padding: clamp(60px, 8vw, 60px) 0 clamp(80px, 10vw, 140px);
  background: var(--cloud);
}

.portfolio-gallery .container {
  max-width: 1400px;
}


.gallery-grid {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(80px, 7vw, 150px);
  gap: clamp(14px, 1.5vw, 24px);
  contain: layout paint;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 0;
  opacity: 0;
  transform: scale(0.9) translateY(30px);
  animation: zoomFadeIn 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  box-shadow: 0 25px 60px rgba(15, 30, 40, 0.12);
  transition: transform 0.45s ease;
  grid-column: span 4;
  grid-row: span 3;
}

/* When the user prefers reduced motion, avoid large entrance animations that
   can hitch while scrolling (especially on mid/low-end devices). */
@media (prefers-reduced-motion: reduce) {
  .gallery-item {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@keyframes zoomFadeIn {
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.gallery-item:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 30px 70px rgba(15, 30, 40, 0.2);
  z-index: 10;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  filter: none;
  position: relative;
}

.gallery-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(140deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.1) 35%, transparent 70%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.gallery-item:hover::after {
  opacity: 1;
}

.gallery-item[data-orientation="landscape"] {
  grid-column: span 6;
  grid-row: span 3;
}

.gallery-item[data-orientation="portrait"] {
  grid-column: span 4;
  grid-row: span 5;
}

.gallery-item[data-orientation="square"] {
  grid-column: span 4;
  grid-row: span 4;
}

.gallery-item:hover img {
  transform: scale(1.08);
  filter: none;
}

.gallery-overlay {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--graphite);
  padding: 0.55rem 1.1rem;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
  transform: translateY(0);
}

.gallery-overlay h3,
.gallery-overlay p {
  margin: 0;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
}

.gallery-overlay p {
  opacity: 0.6;
  font-weight: 500;
}

/* Hide the overlay's direct child <p> (used to avoid showing filenames, e.g. <p>A1_00068.webp</p>). */
.gallery-overlay > p {
  display: none;
}

@media (max-width: 1200px) {
  .gallery-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: clamp(90px, 8vw, 160px);
  }

  .gallery-item {
    border-radius: 0;
  }
}

@media (max-width: 900px) {
  .portfolio-gallery {
    padding: 30px 0;
  }

  .gallery-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-auto-rows: clamp(110px, 14vw, 190px);
    gap: 16px;
  }

  .gallery-item {
    grid-column: span 4;
    grid-row: span 3;
  }

  .gallery-item[data-orientation="landscape"] {
    grid-column: span 8;
    grid-row: span 2;
  }

  .gallery-item[data-orientation="portrait"] {
    grid-column: span 4;
    grid-row: span 4;
  }
}

@media (max-width: 640px) {
  /* Mobile: single-column flow where each item sizes to its image's intrinsic aspect ratio */
  .gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto; /* height determined by content (image) */
    gap: 12px;
    grid-auto-flow: row;
  }

  .gallery-item {
    grid-column: span 1;
    grid-row: auto;
    border-radius: 28px;
    box-shadow: none;
    /* allow the item height to follow the image size */
    display: block;
  }

  /* let the image define the height (maintain aspect ratio) */
  .gallery-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: inherit;
  }

  .gallery-item::after {
    border-radius: inherit;
  }

  /* portrait-marked items will naturally be taller due to image aspect ratio */
  .gallery-item[data-orientation="landscape"],
  .gallery-item[data-orientation="portrait"] {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .gallery-item[data-orientation="square"] {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .gallery-overlay {
    top: auto;
    bottom: 16px;
    left: 16px;
    font-size: 0.6rem;
    letter-spacing: 0.18em;
  }
}

.loading {
  text-align: center;
  padding: 4rem 0;
  color: #2c5f7f;
  animation: pulse 2s ease-in-out infinite;
}

.loading i {
  font-size: 3rem;
  margin-bottom: 1rem;
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* Services Grid */
.services-grid {
  padding: 48px 0;
  background: var(--cloud);
  /* allow decorative pseudo-element to be positioned relative to this block */
  position: relative;
}

.service-cards {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.service-panel {
  display: none;
  flex-direction: column;
  gap: 3rem;
}

.service-panel.active {
  display: flex;
}

.service-card {
  /* large left image, flexible right content */
  display: grid;
  /* reduce visual weight of image: narrower left column so content has more presence */
  grid-template-columns: 36% 64%;
  /* increase overall card width but keep image smaller proportionally */
  width: 100%;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  align-items: start;
  padding: 0; /* inner spacing moved into content area so image fills full height */
  border-radius: 18px;
  background: var(--cloud);
  border: none;
  box-shadow: 0 20px 40px rgba(17,17,17,0.06);
  overflow: hidden; /* ensure image and content clip to rounded corners */
}

.service-card.reverse {
  direction: rtl;
}

.service-card.reverse > * {
  direction: ltr;
}

.service-image {
  position: relative;
  height: 100%;
  /* reduce image vertical heft so it doesn't dominate the card */
  min-height: 420px;
  overflow: hidden;
  background: #f0f0f0;
}

.service-image::after {
  /* subtle darkening toward bottom to match sample */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.12) 100%);
  pointer-events: none;
}

.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.6s ease;
}

.service-card:hover .service-image img {
  transform: scale(1.03);
}

.service-content {
  /* NOTE: Removed the fixed padding (40px 56px) because it can cause
     translated text to be clipped/covered on some layouts.
     Use a lighter, safer padding and center content. */
  padding: var(--service-content-padding, 0);
  position: relative; /* for top-right price positioning */
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}

.services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-plan-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--accent);
  border: 1px solid transparent;
  pointer-events: none;
  z-index: 3;
}

.services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-title-row {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
}

.services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-title-row h2 {
  margin-bottom: 0;
}

html[lang="zh"] .service-panel:not([data-service-panel="kimonoprice"]) .service-card:nth-of-type(3) .service-title-row h2[data-subcopy-zh]::after,
html[lang="en"] .service-panel:not([data-service-panel="kimonoprice"]) .service-card:nth-of-type(3) .service-title-row h2[data-subcopy-zh]::after,
html[lang="ja"] .service-panel:not([data-service-panel="kimonoprice"]) .service-card:nth-of-type(3) .service-title-row h2[data-subcopy-zh]::after {
  content: attr(data-subcopy-zh);
  display: block;
  margin-top: 9px;
  font-size: 0.36em;
  line-height: 1.35;
  font-weight: 400;
  color: rgba(31, 31, 31, 0.56);
}

@media (min-width: 861px) {
  .service-panel:not([data-service-panel="kimonoprice"]) .service-card:nth-of-type(3) .service-title-row {
    align-items: center;
    margin-bottom: 34px;
  }

  .service-panel:not([data-service-panel="kimonoprice"]) .service-card:nth-of-type(3) .service-title-row h2[data-subcopy-zh] {
    position: relative;
  }

  .service-panel:not([data-service-panel="kimonoprice"]) .service-card:nth-of-type(3) .service-title-row h2[data-subcopy-zh]::after {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 8px;
    white-space: nowrap;
  }
}

.services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-plan-badge--inline {
  position: static;
  top: auto;
  right: auto;
  height: 28px;
  padding: 0 13px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  border-radius: 999px;
  transform: translateY(1px);
  color: var(--accent-dark);
  background: transparent;
  border-width: 1.5px;
  border-style: solid;
  border-color: rgba(26, 136, 133, 0.82);
}

@media (min-width: 861px) {
  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card.reverse .service-title-row {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    align-self: flex-end;
    justify-content: flex-end;
    gap: 8px;
  }

  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card.reverse .service-title-row h2 {
    text-align: right;
  }

  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card.reverse .service-plan-badge--inline,
  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card.reverse .service-plan-badge--premium {
    margin: 0;
  }

  html[lang="en"] .service-panel[data-service-panel="duo"] .service-card:nth-of-type(3).reverse .service-title-row h2 {
    max-width: none;
    white-space: nowrap;
  }
}

.services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-plan-badge--premium {
  color: #0a4c4a;
  background: rgba(247, 243, 233, 0.55);
  border-color: rgba(10, 76, 74, 0.92);
}

/* Services page only (desktop/tablet): keep standard service cards readable (left-aligned)
  unless a specific panel explicitly wants centered content.
  IMPORTANT: do not force this on mobile, because it can fight mobile centering rules
  in other parts of the site and because mobile cards are stacked (1 column) anyway. */
@media (min-width: 861px) {
  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-content {
   align-items: flex-start;
   text-align: left;
   /* Default (non-kimonoprice) cards need inner breathing room.
     Without this, Solo A/C content can look clipped against the card edge
     because `.service-content` inherits `padding: 0` by default. */
   --service-content-padding: 40px 56px;
  }
}

/* kimonoprice tiles: center labels + list, and add a small inner padding
   without pushing content into the image overlay. */
.service-panel[data-service-panel="kimonoprice"] .service-content {
  --service-content-padding: 0.75rem 0.9rem;
  align-items: center;
  text-align: center;
}

/* kimonoprice: reverse cards should still be centered (do not inherit global reverse right-align rules) */
.service-panel[data-service-panel="kimonoprice"] .service-card.reverse .service-content {
  align-items: center;
  text-align: center;
}

/* subtle horizontal rule at top of the content area to match the design */
/* removed top divider for cleaner header */

.service-content h2 {
  font-family: var(--service-heading-font);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: var(--service-color);
  margin-bottom: 0.25rem;
  font-weight: 700;
}

/* Right-column overall layout refinements */
.service-content .eyebrow {
  text-transform: none;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: rgba(31,31,31,0.62);
  margin-bottom: 0.35rem;
}

/* Make the descriptive paragraph sit below the heading with relaxed rhythm */
.service-text {
  margin-top: 0.6rem;
  margin-bottom: 1rem;
  color: rgba(31,31,31,0.86);
}

/* Includes / pricing block styling to group price, includes and package options */
.includes-title {
  /* De-emphasized (keeps later declarations consistent with earlier override)
     slightly smaller, lighter and less prominent */
  font-size: 0.95rem;
  margin-top: 0.5rem;
  margin-bottom: 0.22rem;
  color: rgba(31,31,31,0.58);
  font-weight: 500;
}

.package-includes {
  list-style: none;
  padding: 0;
  margin: 0; /* remove default top/bottom margin so title and list touch */
  display: grid;
  gap: 0.32rem;
  font-size: 0.88rem;
  color: rgba(31,31,31,0.62);
}

/* make CTA stand out and consistently placed */
.service-content .btn-primary {
  margin-top: 1rem;
  align-self: flex-start;
  min-width: 240px;
  padding: 0.95rem 1.4rem;
  border-radius: 6px;
}

/* Mobile service card refinements.
   Keep all max-width:860 service tweaks together so overrides stay predictable. */
@media (max-width: 860px) {
  /* smaller screens: ensure right-column padding and price positioning remain sensible */
  .service-content { padding: 20px; }
  .package-includes { grid-template-columns: 1fr; }

  /* Mobile: center descriptive text inside paragraphs and lists */
  p {
    text-align: center;
  }
  .service-features li span,
  .package-includes li span {
    display: block;
    text-align: center;
  }
  .service-features {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .service-features li {
    justify-content: center;
  }
  .service-content > .service-features:first-of-type li {
    display: grid;
    grid-template-columns: 1.1rem minmax(0, 1fr);
    column-gap: 0.5rem;
    justify-content: center;
    align-items: flex-start;
  }
  .service-content > .service-features:first-of-type li i {
    align-self: center;
    margin-top: 0;
  }
  .service-content > .service-features:first-of-type li span {
    text-align: left;
  }

  /* Mobile: B/C title rows stack vertically across non-kimonoprice tabs
     so badges do not squeeze headings into awkward wrapping. */
  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card:nth-of-type(2) .service-title-row,
  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card:nth-of-type(3) .service-title-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card:nth-of-type(2) .service-title-row h2,
  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card:nth-of-type(3) .service-title-row h2 {
    text-align: center;
  }

  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card:nth-of-type(2) .service-plan-badge--inline,
  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card:nth-of-type(3) .service-plan-badge--premium {
    flex-shrink: 0;
    white-space: nowrap;
    transform: translateY(1px);
  }

  /* Includes layout */
  .includes-title {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 1rem;
    line-height: 1.35;
  }
  .service-features.package-includes,
  .package-includes {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    justify-items: center;
  }
  .service-features.package-includes li,
  .package-includes li {
    justify-content: center;
    font-size: 0.82rem;
    gap: 0.4rem;
  }
  .service-features.package-includes li span,
  .package-includes li span {
    text-align: center;
    white-space: nowrap;
  }

  /* remove vertical padding for services grid so content sits flush */
  .services-grid {
    padding: 0;
    background: var(--cloud);
  }
}


/* Decorative: large semi-transparent letter 'A' shown relative to the .service-cards container (desktop only) */
@media (min-width: 900px) {
  /* disable the global service-cards pseudo (we'll render the letter inside each card)
     and add a card-scoped pseudo-element so the letter is anchored to each
     `.service-card` rather than the viewport. This prevents clipping by other
     stacking contexts while keeping the letter inside the card bounds. */
  .service-cards::after { display: none; }

  .service-card {
    position: relative; /* anchor for per-card pseudo */
    overflow: hidden; /* ensure letter is clipped by rounded corners */
  }

  .service-card::after {
    /* default: no letter; specific letters are applied per-card below */
    content: none;
    position: absolute;
    /* place inside the right side of the card */
    right: 48px;
    top: 50%;
    /* show upright (no rotation) */
    transform: translateY(-50%);
    font-family: var(--heading-font), serif;
    font-size: clamp(124px, 12vw, 220px);
    color: var(--accent-dark);
    pointer-events: none;
    z-index: 0; /* sit behind card content */
    line-height: 0.82;
    letter-spacing: -0.04em;
    user-select: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    opacity: 0.08;
  }

  /* place the letter on the empty side: if the card is reversed (image on right)
     place the decorative letter on the left; otherwise place it on the right. */
  .service-card:not(.reverse)::after {
    right: clamp(24px, 3vw, 42px);
    left: auto;
  }

  .service-card.reverse::after {
    left: clamp(24px, 3vw, 42px);
    right: auto;
  }

  /* Per-card decorative letters: 1=A, 2=B, 3=C within each service-panel.
    kimonoprice is excluded so it doesn't show A/B/C (it uses translated labels). */
  .service-panel:not([data-service-panel="kimonoprice"]) .service-card:nth-of-type(1)::after { content: "A"; }
  .service-panel:not([data-service-panel="kimonoprice"]) .service-card:nth-of-type(2)::after { content: "B"; }
  .service-panel:not([data-service-panel="kimonoprice"]) .service-card:nth-of-type(3)::after { content: "C"; }

  /* kimonoprice panel: do not use A/B/C decorative letters (labels are rendered via i18n text nodes) */
  .service-panel[data-service-panel="kimonoprice"] .service-card::after { content: none; }

  /* stacking: decorative letter should sit above images but beneath content text */
  .service-card > * {
    position: relative;
    z-index: 1; /* base for children */
  }
  /* explicitly lower the image so the decorative letter can appear above it */
  .service-card .service-image { z-index: 0; }
  .service-card .service-image img { z-index: 0; }
  /* ensure content (text, CTA) sits above the decorative letter */
  .service-card .service-content { z-index: 2; }


  /* kimonoprice panel: show two service-cards per row on desktop **only when active** */
  .service-panel.active[data-service-panel="kimonoprice"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
    align-items: start;
  }

  .service-panel.active[data-service-panel="kimonoprice"] .service-card {
    max-width: none; /* allow full column width */
    width: 100%;
    margin-bottom: 0;
  }


/* kimonoprice: category label (A–F) rendered as DOM text for i18n */
.service-panel[data-service-panel="kimonoprice"] .kimonoprice-label {
  font-family: var(--heading-font), serif;
  font-weight: 600;
  color: rgb(26,136,133);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;

  /* Center the label within the text column */
  align-self: center;
  text-align: center;

  /* Keep label on a single line */
  white-space: nowrap;
}

/* kimonoprice: keep all include lines on a single line (no wrapping) */
.service-panel[data-service-panel="kimonoprice"] .package-includes li,
.service-panel[data-service-panel="kimonoprice"] .package-includes li span {
  white-space: nowrap;
}

/* If content is too long, allow horizontal scroll instead of wrapping.
   (Scoped to kimonoprice only.) */
.service-panel[data-service-panel="kimonoprice"] .package-includes {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* kimonoprice: mobile/tablet should also show 2 cards per row */
@media (max-width: 860px) {
  .service-panel.active[data-service-panel="kimonoprice"] {
    --kimonoprice-tile-image-height: clamp(320px, 46vw, 560px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
  }

  .service-panel.active[data-service-panel="kimonoprice"] .service-card {
    width: 100%;
    margin-bottom: 0;
  }

  /* Keep active kimonoprice tiles at identical, taller image heights. */
  .service-panel.active[data-service-panel="kimonoprice"] .service-card .service-image {
    aspect-ratio: auto !important;
    height: var(--kimonoprice-tile-image-height) !important;
    min-height: var(--kimonoprice-tile-image-height) !important;
  }
}

@media (min-width: 900px) {
  .service-panel[data-service-panel="kimonoprice"] .service-card {
    position: relative;
  }

  /* kimonoprice: keep image natural (no forced height) but stretch grid items
     so content column matches the image column height. */
  .service-panel.active[data-service-panel="kimonoprice"] .service-card {
    align-items: stretch;
  }

  /* kimonoprice: vertically center all text inside the content area.
     This is scoped to kimonoprice only so other service panels keep their layout. */
  .service-panel[data-service-panel="kimonoprice"] .service-content {
   /* Ensure vertical centering is actually applied by making this a flex container
     with enough height to center within (we match the image min-height by default). */
   display: flex;
   flex-direction: column;
    justify-content: center;

  /* Match the image column height (stretched by the grid item) */
  height: 100%;
  min-height: 100%;

   /* Keep the whole block horizontally centered */
   align-items: center;
   text-align: center;
  }

  /* Give text area a bit more room and tighten typography to prevent wrapping */
  .service-panel.active[data-service-panel="kimonoprice"] {
    gap: 2rem;
  }

  .service-panel.active[data-service-panel="kimonoprice"] .service-card {
    grid-template-columns: 55% 45%;
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-label {
    font-size: 1.45rem;
  }

  .service-panel[data-service-panel="kimonoprice"] .package-includes {
    gap: 0.25rem;
  }

  .service-panel[data-service-panel="kimonoprice"] .package-includes li {
    font-size: 0.84rem;
    gap: 0.4rem;
  }

  /* Keep label in normal flow so it can be vertically centered with the list */
  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-label {
    position: static;
    opacity: 0.95;
    pointer-events: none;
  }
}
}

/* Kimonoprice cards: premium pricing typography refinement (structure unchanged). */
.service-panel[data-service-panel="kimonoprice"] {
  --kimonoprice-name-col: 4.8em;
  --kimonoprice-amount-col: 7.6ch;
}

html[lang="ja"] .service-panel[data-service-panel="kimonoprice"] {
  --kimonoprice-name-col: 6.1em;
}

html[lang="zh"] .service-panel[data-service-panel="kimonoprice"] {
  --kimonoprice-name-col: 3.8em;
  --kimonoprice-amount-col: 11.8em;
}

html[lang="en"] .service-panel[data-service-panel="kimonoprice"] {
  --kimonoprice-name-col: 9.2em;
}

.service-panel[data-service-panel="kimonoprice"] .kimonoprice-label {
  margin-top: 0.46rem; /* unify image -> label spacing across cards */
  margin-bottom: 0.52rem; /* unify label -> first price spacing across cards */
  letter-spacing: 0.045em;
  font-weight: 580;
  line-height: 1.16;
}

.service-panel[data-service-panel="kimonoprice"] .package-includes {
  width: fit-content;
  max-width: 100%;
  margin: 0.1rem auto 0;
  padding-inline: 0.5rem; /* keep equal breathing room on both sides */
  gap: 0.36rem;
  overflow: visible;
  justify-content: center;
  justify-items: stretch;
  align-content: center;
}

.service-panel[data-service-panel="kimonoprice"] .package-includes li {
  width: 100%;
  margin: 0;
  padding: 0;
  justify-content: center;
  line-height: 1.38;
}

.service-panel[data-service-panel="kimonoprice"] .package-includes li > span {
  width: 100%;
}

.service-panel[data-service-panel="kimonoprice"] .kimonoprice-line {
  width: 100%;
  display: grid;
  grid-template-columns: var(--kimonoprice-name-col) var(--kimonoprice-amount-col);
  align-items: baseline;
  justify-content: center;
  column-gap: 0.22rem; /* compact two-column link without crowding */
  line-height: 1.38;
}

.service-panel[data-service-panel="kimonoprice"] .kimonoprice-line__label {
  width: 100%;
  min-width: 0;
  text-align: left;
  color: rgba(31, 31, 31, 0.64);
  font-weight: 560;
  letter-spacing: 0.004em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[lang="en"] .service-panel[data-service-panel="kimonoprice"] .kimonoprice-line__label {
  overflow: visible;
  text-overflow: clip;
  text-align: right;
}

html[lang="ja"] .service-panel[data-service-panel="kimonoprice"] .kimonoprice-line__label {
  overflow: visible;
  text-overflow: clip;
}

html[lang="en"] .service-panel[data-service-panel="kimonoprice"] .kimonoprice-line {
  column-gap: 0.52rem;
}

.service-panel[data-service-panel="kimonoprice"] .kimonoprice-line__price {
  width: 100%;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0;
  text-align: right;
  color: rgba(31, 31, 31, 0.82);
  font-weight: 590; /* slightly lighter while keeping clarity */
  letter-spacing: 0.009em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  line-height: 1.38;
}

.service-panel[data-service-panel="kimonoprice"] .kimonoprice-line__amount {
  color: rgba(31, 31, 31, 0.84);
  font-weight: 610;
  letter-spacing: 0.006em;
}

.service-panel[data-service-panel="kimonoprice"] .kimonoprice-line__currency {
  display: inline;
  margin-left: 0;
  margin-right: 0.04em;
  color: rgba(31, 31, 31, 0.42); /* lighter than number */
  font-weight: 390;
  font-size: 0.84em; /* visually lighter than the number */
  white-space: nowrap;
}

html[lang="zh"] .service-panel[data-service-panel="kimonoprice"] .kimonoprice-line__price--dual {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.12rem;
  white-space: normal;
  line-height: 1.12;
}

html[lang="zh"] .service-panel[data-service-panel="kimonoprice"] .kimonoprice-line__main {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0;
  white-space: nowrap;
}

html[lang="zh"] .service-panel[data-service-panel="kimonoprice"] .kimonoprice-line__unit {
  margin-left: 0.16rem;
  color: rgba(31, 31, 31, 0.52);
  font-size: 0.78em;
  font-weight: 520;
}

html[lang="zh"] .service-panel[data-service-panel="kimonoprice"] .kimonoprice-line__local {
  display: block;
  max-width: 100%;
  font-family: var(--body-font);
  font-size: 0.66rem;
  font-weight: 430;
  line-height: 1.24;
  letter-spacing: 0;
  color: rgba(31, 31, 31, 0.46);
  white-space: normal;
  text-align: right;
}

/* Single-line price card (Visiting Kimono): nudge price group for better vertical balance */
.service-panel[data-service-panel="kimonoprice"] .service-card:nth-of-type(3) .kimonoprice-label {
  margin-top: 0.46rem; /* keep same rhythm as other cards */
}

.service-panel[data-service-panel="kimonoprice"] .service-card:nth-of-type(3) .package-includes {
  margin-top: 0.1rem; /* keep same rhythm as other cards */
}

/* Desktop-only polish: align kimonoprice price columns and card rhythm. */
@media (min-width: 900px) {
  .service-panel.active[data-service-panel="kimonoprice"] {
    gap: 1.78rem; /* soften center gutter between the two card columns */
  }

  .service-panel[data-service-panel="kimonoprice"] .service-content {
    padding-top: 1.18rem;
    padding-bottom: 1.06rem;
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-label {
    margin-top: 0.44rem;
    margin-bottom: 0.5rem;
    white-space: normal; /* allow title wrap before price line gets squeezed */
    text-wrap: balance;
    max-width: 11.6ch;
    min-height: 2.32em; /* unify title slot height across cards */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .service-panel[data-service-panel="kimonoprice"] .package-includes {
    min-height: 5rem; /* unify price-zone baseline across all cards */
    margin-top: 0.12rem;
    gap: 0.34rem;
    align-content: start; /* keep price rows top-aligned in each card */
  }

  .service-panel[data-service-panel="kimonoprice"] .package-includes li {
    line-height: 1.36;
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-line {
    column-gap: 0.22rem; /* keep same column rhythm on desktop */
  }

  .service-panel[data-service-panel="kimonoprice"] .service-card:nth-of-type(3) .kimonoprice-label {
    margin-top: 0.44rem; /* no special vertical offset for single-line card */
  }

  .service-panel[data-service-panel="kimonoprice"] .service-card:nth-of-type(3) .package-includes {
    margin-top: 0.12rem; /* no special vertical offset for single-line card */
  }

  html[lang="en"] .service-panel[data-service-panel="kimonoprice"] .kimonoprice-label {
    font-size: 1.32rem;
    max-width: 13.2ch;
  }

  html[lang="en"] .service-panel[data-service-panel="kimonoprice"] .package-includes {
    width: max-content;
    max-width: 100%;
    display: grid;
    grid-template-columns: max-content var(--kimonoprice-amount-col);
    column-gap: 0.68rem;
    row-gap: 0.34rem;
    justify-content: center;
  }

  html[lang="en"] .service-panel[data-service-panel="kimonoprice"] .package-includes li,
  html[lang="en"] .service-panel[data-service-panel="kimonoprice"] .package-includes li > span,
  html[lang="en"] .service-panel[data-service-panel="kimonoprice"] .kimonoprice-line {
    display: contents;
  }

  html[lang="en"] .service-panel[data-service-panel="kimonoprice"] .kimonoprice-line__label {
    width: auto;
    justify-self: end;
    text-align: right;
  }

  html[lang="en"] .service-panel[data-service-panel="kimonoprice"] .kimonoprice-line__price {
    width: auto;
    justify-self: end;
    justify-content: flex-end;
  }

  html[lang="ja"] .service-panel[data-service-panel="kimonoprice"] .kimonoprice-line__label,
  html[lang="en"] .service-panel[data-service-panel="kimonoprice"] .kimonoprice-line__label {
    font-size: 0.95em; /* prevent long labels from colliding with right price */
  }
}

@media (max-width: 860px) {
  .service-panel[data-service-panel="kimonoprice"] {
    --kimonoprice-name-col: 4.2em;
    --kimonoprice-amount-col: 7.2ch;
  }

  html[lang="ja"] .service-panel[data-service-panel="kimonoprice"] {
    --kimonoprice-name-col: 5.8em;
  }

  html[lang="zh"] .service-panel[data-service-panel="kimonoprice"] {
    --kimonoprice-name-col: 3.5em;
    --kimonoprice-amount-col: 10.9em;
  }

  html[lang="en"] .service-panel[data-service-panel="kimonoprice"] {
    --kimonoprice-name-col: 6.4ch;
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-label {
    margin-top: 0.4rem;
    margin-bottom: 0.46rem; /* unified label-to-first-line spacing on mobile */
    letter-spacing: 0.04em;
  }

  .service-panel[data-service-panel="kimonoprice"] .package-includes {
    width: fit-content;
    max-width: 100%;
    padding-inline: 0.34rem;
    gap: 0.34rem;
  }

  .service-panel[data-service-panel="kimonoprice"] .package-includes li > span {
    width: 100%;
  }

  .service-panel[data-service-panel="kimonoprice"] .kimonoprice-line {
    column-gap: 0.18rem;
    line-height: 1.36;
  }

  .service-panel[data-service-panel="kimonoprice"] .service-card:nth-of-type(3) .kimonoprice-label {
    margin-top: 0.4rem; /* keep same rhythm as other cards */
  }

  .service-panel[data-service-panel="kimonoprice"] .service-card:nth-of-type(3) .package-includes {
    margin-top: 0.1rem; /* keep same rhythm as other cards */
  }
}

/* Kimonoprice extras on mobile: hierarchy and spacing polish (no layout rebuild). */
@media (max-width: 860px) {
  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-extras {
    padding: 1.12rem 1rem;
    border-color: rgba(31, 31, 31, 0.045);
  }

  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-extras__item {
    padding: 22px 20px;
    border-color: rgba(26, 136, 133, 0.14);
    background: rgba(248, 251, 251, 0.96);
  }

  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-extras__item-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
    color: rgba(14, 94, 91, 0.9);
    text-align: left;
  }

  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-extras__item-body {
    margin-top: 0;
    gap: 0.72rem;
  }

  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-extras__item .kimonoprice-extras__sub + .kimonoprice-extras__sub {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(31, 31, 31, 0.065);
  }

  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] {
    --kimonoprice-extra-name-col: 10.2em;
  }

  html[lang="zh"] .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] {
    --kimonoprice-extra-name-col: 8.8em;
  }

  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-extra-title {
    display: grid;
    grid-template-columns: var(--kimonoprice-extra-name-col) minmax(0, 1fr);
    align-items: baseline;
    column-gap: 10px;
  }

  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-extra-title__name {
    min-width: 0;
    color: rgba(31, 31, 31, 0.8);
    font-size: 13.5px;
    font-weight: 560;
    line-height: 1.46;
    letter-spacing: 0.005em;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-extra-title__price {
    width: 100%;
    justify-self: end;
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0;
    color: rgba(31, 31, 31, 0.9);
    font-size: 14px;
    font-weight: 640;
    line-height: 1.34;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
  }

  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-extra-title__amount {
    color: rgba(31, 31, 31, 0.9);
    font-weight: 640;
  }

  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-extra-title__currency {
    margin-right: 0.04em;
    color: rgba(31, 31, 31, 0.58);
    font-weight: 460;
  }

  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-extra-title__unit {
    margin-left: 0.18em;
    color: rgba(31, 31, 31, 0.52);
    font-size: 0.9em;
    font-weight: 450;
  }

  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-extras__item--makeup .kimonoprice-extras__sub-desc,
  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-extras__item--photo .kimonoprice-extras__sub-desc {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.72;
    color: rgba(31, 31, 31, 0.56);
    text-align: left;
  }

  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-extras__item--included .kimonoprice-extras__item-title {
    margin-bottom: 12px;
  }

  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-included-note {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.62;
    letter-spacing: 0.004em;
    color: rgba(31, 31, 31, 0.5);
    text-align: left;
  }

  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-included-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
  }

  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-included-list li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    font-size: 13px;
    line-height: 1.62;
    color: rgba(31, 31, 31, 0.69);
    text-align: left;
  }

  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-included-list li::before {
    content: "•";
    margin-top: 0.08em;
    color: rgba(31, 31, 31, 0.4);
    font-size: 0.76em;
    line-height: 1.6;
    flex: 0 0 auto;
  }

  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-included-list li > span {
    min-width: 0;
  }

  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-extras__item--photo .kimonoprice-extras__sub--note {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(31, 31, 31, 0.065);
  }

  .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-extras__item--photo .kimonoprice-extras__sub--note .kimonoprice-extras__sub-desc {
    margin-top: 0;
  }
}

html[lang="zh"] .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extra-title__price.kimonoprice-extra-title__price--dual {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.12rem;
  white-space: normal;
  line-height: 1.16;
}

html[lang="zh"] .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extra-title__main {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  white-space: nowrap;
}

html[lang="zh"] .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extra-title__unit,
html[lang="zh"] .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extra-title__per-unit {
  margin-left: 0.18em;
  color: rgba(31, 31, 31, 0.52);
  font-size: 0.88em;
  font-weight: 450;
}

html[lang="zh"] .service-panel[data-service-panel="kimonoprice"] .kimonoprice-extra-title__local {
  display: block;
  max-width: 100%;
  font-family: var(--body-font);
  font-size: 0.72em;
  font-weight: 430;
  line-height: 1.28;
  letter-spacing: 0;
  color: rgba(31, 31, 31, 0.46);
  white-space: normal;
  text-align: right;
}

.service-price {
  font-family: var(--service-heading-font);
  font-size: var(--service-price-size);
  font-weight: 700;
  color: rgba(31,31,31,0.9);
  letter-spacing: var(--service-price-letter-spacing);
  margin: 0;
}

/* ================== Emphasize primary service content ================== */
/* Heading (package title) — more prominent */
.service-content > h2 {
  color: var(--ink);
  font-weight: 700;
  /* slightly larger headline for emphasis */
  font-size: clamp(1.35rem, 2.2vw, 1.95rem);
  margin-bottom: 0.5rem;
}

/* First features list (summary) — treated as primary information */
.service-content > .service-features:first-of-type li {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(31,31,31,0.92);
  gap: 0.7rem;
}
.service-content > .service-features:first-of-type li i {
  font-size: 1.08rem;
  min-width: 1.2rem;
  color: var(--accent-dark);
}

/* Price area (price + short descriptor) — primary, but keep price most prominent */
.price-block .service-price {
  font-size: 2.1rem; /* more prominent */
  font-weight: 900;
  color: var(--accent-dark);
}
.price-block .service-text {
  font-size: 0.95rem; /* smaller than price but still important */
  font-weight: 600;
  color: rgba(31,31,31,0.88);
}

/* Ensure de-emphasized modules remain subtle: includes already weakened above.
   Reinforce that other .service-features (package-includes) are smaller than summary. */
.service-features.package-includes li {
  opacity: 0.95; /* keep readable but subdued */
}

/* Small screens: scale headline and price down slightly to keep balance */
@media (max-width: 860px) {
  .service-content > h2 { font-size: 1.25rem; text-align: center; }
  .price-block .service-price { font-size: 1.6rem; }
  .price-block .service-text { font-size: 0.9rem; }
}

/* ======================================================================= */

.service-text,
.service-content p {
  line-height: var(--service-line-height);
  color: var(--service-color);
  margin-bottom: 1rem;
  font-size: var(--service-body-size);
}

.service-features {
  list-style: none;
  display: grid;
  /* Default to a single-column (vertical) features stack so cards across
     the site follow the Solo A visual rhythm (feature1/feature2 stacked).
     The previous two-column layout created side-by-side features on other
     panels/pages; switching to 1fr keeps mobile behaviour but normalizes
     desktop presentation to match Solo A. */
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.service-content > .service-features:first-of-type {
  /* summary features: enforce a single-column stack (vertical) so every
     panel's primary features follow the Solo A layout. If a two-column
     layout is required later we can scope that exception explicitly. */
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin: 0.45rem 0 1rem; /* spacing between features and the following price-block */
}

/* Make the summary feature list single-column for the solo service (vertical stacking) */
.service-panel[data-service-panel="solo"] .service-content > .service-features:first-of-type {
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.service-content > .service-features:first-of-type li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.98rem;
  color: rgba(31,31,31,0.78);
}

/* Enforce visual ordering inside the content column so price appears under
   the primary (first) features list consistently across all panels. We
   use explicit flex order on direct children of .service-content rather than
   relying on DOM quirks introduced elsewhere. This is low-risk: if DOM is
   correct already these rules are harmless. */
.service-content > .service-features:first-of-type { order: 1; }
.service-content > .price-block { order: 2; }
.service-content > .service-note { order: 3; }
.service-content > .includes { order: 4; }
.service-content > .price-cta { order: 5; }

.service-content > .service-features:first-of-type li i {
  /* show only the check mark (no surrounding circle) */
  display: inline-block;
  width: auto;
  height: auto;
  background: transparent;
  color: var(--service-accent);
  font-size: 1em;
  line-height: 1;
}

/* Ensure the generated check (from ::before) for the summary list is visible and uses the accent color */
.service-content > .service-features:first-of-type li i::before {
  /* Allow Font Awesome to provide the icon glyph via its own ::before.
     Keep color and sizing here but do NOT set content so the font icon can render. */
  color: var(--service-accent);
  font-size: 0.95rem;
}

.service-features li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  color: var(--service-color);
  font-size: var(--service-feature-size);
}

/* Override: ensure package-includes renders as a vertical (single-column) list.
   The global .service-features rule above uses a two-column grid for summary
   features; package-includes also uses the .service-features class, so we
   explicitly set its grid-template to a single column here to force vertical
   stacking without altering the summary features. */
.service-features.package-includes,
.package-includes {
  --package-includes-row-gap: 0.32rem;
  grid-template-columns: 1fr; /* single column */
  display: grid; /* keep grid behaviour for spacing */
  gap: var(--package-includes-row-gap);
}
.service-features.package-includes li,
.package-includes li {
  display: flex; /* keep icon + text aligned */
  align-items: flex-start;
  gap: 0.65rem;
}

/* ====== Package includes: enforce smaller size for list items and icons ====== */
/* Use the combined selector to win over generic .service-features li rules later in the file */
.service-features.package-includes li {
  font-size: 0.88rem; /* smaller */
  color: rgba(31,31,31,0.62);
  gap: 0.5rem;
}
.service-features.package-includes li span {
  font-size: inherit;
  line-height: 1.5;
}
.service-features.package-includes li span .package-includes__stack {
  display: grid;
  width: 100%;
  grid-auto-rows: minmax(calc(1em * 1.5), auto);
  row-gap: var(--package-includes-row-gap);
  align-content: start;
}
.service-features.package-includes li span .package-includes__line {
  display: block;
  line-height: 1.5;
}

@media (max-width: 860px) {
  html[lang="zh"] .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .package-includes {
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
    overflow: visible;
    justify-items: center;
    gap: 0.7rem;
  }

  html[lang="zh"] .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .package-includes li,
  html[lang="zh"] .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .package-includes li > span {
    width: 100%;
    display: block;
    white-space: normal;
    overflow: visible;
  }

  html[lang="zh"] .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-line {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 0.12rem;
    line-height: 1.2;
  }

  html[lang="zh"] .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-line__label {
    width: auto;
    max-width: 100%;
    text-align: center;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  html[lang="zh"] .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-line__price--dual,
  html[lang="zh"] .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-line__main {
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  html[lang="zh"] .service-panel[data-service-panel="kimonoprice"][aria-hidden="false"] .kimonoprice-line__local {
    text-align: center;
    font-size: 0.62rem;
    line-height: 1.22;
  }
}

.service-features.package-includes li span .package-includes__note-chip {
  display: inline-flex;
  align-items: center;
  margin-top: 0.38rem;
  padding: 2px 10px;
  border-radius: 7px;
  background: rgba(26, 136, 133, 0.07);
  color: var(--accent-dark);
  font-size: 0.76em;
  font-weight: 600;
  line-height: 1.25;
}
.service-features.package-includes li i { display: none; }

body.modal-open {
  overflow: hidden;
}

.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vh, 2rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  overflow-y: auto;
}

.booking-modal.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.booking-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  /* Disable backdrop-filter to reduce paint cost; consider a static blurred PNG if needed. */
  backdrop-filter: none;
}

.booking-modal__dialog {
  position: relative;
  max-width: 920px;
  width: 100%;
  background: var(--cloud);
  border-radius: 32px;
  padding: clamp(1.5rem, 3vw, 3rem);
  box-shadow: 0 40px 120px rgba(0,0,0,0.35);
  z-index: 1;
  max-height: min(92vh, 980px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.booking-modal__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  border: none;
  background: rgba(0,0,0,0.05);
  color: var(--graphite);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.booking-modal__close:hover,
.booking-modal__close:focus {
  background: rgba(0,0,0,0.15);
}

.booking-modal__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.booking-modal__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-size: 0.75rem;
  color: rgba(0,0,0,0.6);
}

.booking-modal__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 20px;
  background: var(--sand);
}

.booking-summary__item p {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  color: rgba(0,0,0,0.6);
  margin-bottom: 0.35rem;
}

.booking-summary__item strong {
  font-size: 1.25rem;
  color: var(--ink);
  font-family: var(--heading-font);
}

.booking-summary__includes {
  margin-top: 0.4rem;
  font-size: 0.95rem;
  color: rgba(0,0,0,0.7);
  line-height: 1.35;
}

.booking-summary__suffix {
  display: inline;
  margin-left: 0.35em;
}

.booking-summary__includes-line {
  display: inline;
}

.booking-summary__includes-highlight {
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.booking-summary__note {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: rgba(0,0,0,0.6);
  line-height: 1.35;
}

.booking-summary__note-amount {
  color: var(--service-accent);
  font-weight: 600;
}


.booking-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.booking-form__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.booking-form__grid--split {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Booking form: stack related fields (Name + Participants) more tightly. */
.booking-field--stack {
  display: grid;
  grid-auto-rows: min-content;
  gap: 0.6rem;
}

.booking-field__stack-item {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.booking-field {
  --booking-placeholder-color: rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.booking-field__input {
  position: relative;
}

.booking-field__placeholder {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--booking-placeholder-color);
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.booking-field__input.is-filled .booking-field__placeholder,
.booking-field__input:focus-within .booking-field__placeholder {
  opacity: 0;
}

.booking-field span {
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: rgba(0,0,0,0.7);
}

.booking-field input,
.booking-field select,
.booking-field textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.12);
  padding: 0.9rem 1rem;
  font-size: 1rem;
  transition: border-color 0.2s ease;
  font-family: var(--body-font);

  /* Safari normalization: keep consistent control heights across input/select/date */
  box-sizing: border-box;
  line-height: 1.25;
  min-height: 56px;
}

/* Safari normalization: ensure the native select/date rendering doesn't change height */
.booking-field select {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
}

.booking-field select:invalid {
  color: var(--booking-placeholder-color);
}

.booking-field select option {
  color: var(--ink);
}

.booking-field select option[disabled] {
  color: var(--booking-placeholder-color);
}

.booking-field input::placeholder,
.booking-field textarea::placeholder {
  color: var(--booking-placeholder-color);
}

.booking-field input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  color: transparent;
}

.booking-field input[type="date"]::-webkit-datetime-edit,
.booking-field input[type="date"]::-webkit-datetime-edit-text,
.booking-field input[type="date"]::-webkit-datetime-edit-month-field,
.booking-field input[type="date"]::-webkit-datetime-edit-day-field,
.booking-field input[type="date"]::-webkit-datetime-edit-year-field {
  color: transparent;
}

.booking-field__input.is-filled input[type="date"],
.booking-field__input.is-filled input[type="date"]::-webkit-datetime-edit,
.booking-field__input.is-filled input[type="date"]::-webkit-datetime-edit-text,
.booking-field__input.is-filled input[type="date"]::-webkit-datetime-edit-month-field,
.booking-field__input.is-filled input[type="date"]::-webkit-datetime-edit-day-field,
.booking-field__input.is-filled input[type="date"]::-webkit-datetime-edit-year-field,
.booking-field__input:focus-within input[type="date"],
.booking-field__input:focus-within input[type="date"]::-webkit-datetime-edit,
.booking-field__input:focus-within input[type="date"]::-webkit-datetime-edit-text,
.booking-field__input:focus-within input[type="date"]::-webkit-datetime-edit-month-field,
.booking-field__input:focus-within input[type="date"]::-webkit-datetime-edit-day-field,
.booking-field__input:focus-within input[type="date"]::-webkit-datetime-edit-year-field {
  color: inherit;
}

.booking-field input:focus,
.booking-field select:focus,
.booking-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26, 136, 133, 0.18);
}

.booking-field small {
  font-size: 0.75rem;
  color: rgba(0,0,0,0.55);
}

.booking-payment {
  background: var(--shell);
  border-radius: 24px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid rgba(0,0,0,0.05);
}

/* Stripe payment section (booking modal)
   If Stripe isn't configured, main.js will show a friendly fallback message/CTA.
*/

.booking-payment__copy p {
  margin: 0;
  color: rgba(0,0,0,0.65);
}

.booking-payment__element {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 1rem 1.25rem;
  background: var(--cloud);
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.75rem;
}

#bookingPaymentMount {
  width: 100%;
}

.payment-element-placeholder {
  text-align: center;
  color: rgba(0,0,0,0.55);
  font-size: 0.85rem;
}

.payment-element-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.payment-element-loader[hidden] {
  display: none;
}

.loader-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.1s infinite ease-in-out;
}

.loader-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.loader-dot:nth-child(3) {
  animation-delay: 0.3s;
}

.booking-payment__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.booking-payment__helper {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.6);
  text-align: center;
}

.booking-payment__actions .btn-primary {
  width: min(520px, 100%);
}

.booking-payment__actions .booking-payment__cancel {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(0,0,0,0.6);
  font-weight: 500;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none;
}

.booking-payment__actions .booking-payment__cancel:hover {
  transform: none;
  color: rgba(0,0,0,0.85);
}

.booking-payment__actions .btn-primary[disabled],
.booking-payment__actions .btn-primary[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.booking-payment__actions .booking-payment__fallback {
  margin-left: auto;
}

.booking-payment__divider {
  width: min(520px, 100%);
  height: 1px;
  border: 0;
  background: #ededed;
  margin: 18px auto;
}

.booking-payment__fineprint,
.booking-payment__note {
  font-size: 0.78rem;
  color: rgba(0,0,0,0.55);
  margin: 0;
}

.booking-payment__copy-text {
  margin: 0;
}

.booking-payment__copy-text strong {
  font-weight: 700;
  color: var(--service-accent);
}

.booking-payment__fallback-note {
  font-size: 0.78rem;
  color: rgba(0,0,0,0.65);
  margin: 0;
}

.booking-terms {
  margin-top: 0.85rem;
  width: min(520px, 100%);
  margin-left: auto;
  margin-right: auto;
  border: 1px solid rgba(31,31,31,0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.55);
  overflow: hidden;
}

.booking-terms__summary {
  cursor: pointer;
  list-style: none;
  padding: 0.85rem 1rem;
  font-weight: 700;
  color: rgba(0,0,0,0.78);
  width: min(520px, 100%);
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 2.2rem;
  position: relative;
  text-align: center;
}

.booking-terms__summary::-webkit-details-marker {
  display: none;
}

.booking-terms__summary::after {
  content: '▾';
  float: none;
  position: absolute;
  right: 1rem;
  top: 50%;
  opacity: 0.6;
  transition: transform 0.15s ease;
  transform: translateY(-50%);
}

.booking-terms[open] .booking-terms__summary::after {
  transform: translateY(-50%) rotate(180deg);
}

.booking-terms__content {
  padding: 0 1rem 0.95rem;
}

.booking-terms__list {
  margin: 0;
  padding: 0.2rem 0 0 1.1rem;
  color: rgba(0,0,0,0.7);
  font-size: 0.9rem;
  line-height: 1.45;
}

.booking-terms__agree {
  margin-top: 0.9rem;
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-weight: 700;
  color: rgba(0,0,0,0.85);
}

.booking-terms__agree--outside {
  width: min(520px, 100%);
  margin: 1.2rem auto 0;
  padding: 0 0.25rem;
  justify-content: center;
}

.booking-terms__agree input[type="checkbox"] {
  margin-top: 0.15rem;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.booking-payment__actions .btn-primary[disabled],
.booking-payment__actions .btn-primary[aria-disabled="true"] {
  filter: grayscale(0.15);
  opacity: 0.55;
}

/* Temporary: hide booking feedback messages (success/error). */
.booking-feedback {
  display: none !important;
}

/* Panel-specific fixes: force duo/couple/parentchild/group to use the same
  vertical feature stacking as Solo on desktop, and constrain the price block to
  prevent overlapping the image. */
@media (min-width: 900px) {
  .service-panel[data-service-panel="duo"] .service-content > .service-features:first-of-type,
  .service-panel[data-service-panel="couple"] .service-content > .service-features:first-of-type,
  .service-panel[data-service-panel="parentchild"] .service-content > .service-features:first-of-type,
  .service-panel[data-service-panel="group"] .service-content > .service-features:first-of-type {
   grid-template-columns: 1fr !important; /* force single-column vertical stack */
    gap: 0.5rem !important;
    margin: 0.45rem 0 1rem !important;
  }

  /* For reverse cards (image on the right), add right padding so the price block
    stays inside the content area and doesn't overlap the image. */
  .service-panel[data-service-panel="duo"] .service-card.reverse .service-content,
  .service-panel[data-service-panel="couple"] .service-card.reverse .service-content,
  .service-panel[data-service-panel="parentchild"] .service-card.reverse .service-content,
  .service-panel[data-service-panel="group"] .service-card.reverse .service-content {
    padding-right: 56px !important;
    text-align: right !important;
    align-items: flex-end !important;
    margin-left: auto !important;
  }

  /* Solo B (reverse) keeps right-aligned content independent of panel-specific rules above. */
  .service-panel[data-service-panel="solo"] .service-card.reverse .service-content {
    text-align: right !important;
    align-items: flex-end !important;
    margin-left: auto !important;
  }

  /* Constrain the price block width and keep it aligned within the content area
    (does not affect Solo). We use calc(100% - padding) to remain compatible with
    any maxWidth value set by syncPriceBlocks. */
  .service-panel[data-service-panel="duo"] .service-card.reverse .price-block,
  .service-panel[data-service-panel="couple"] .service-card.reverse .price-block,
  .service-panel[data-service-panel="parentchild"] .service-card.reverse .price-block,
  .service-panel[data-service-panel="group"] .service-card.reverse .price-block {
    text-align: right !important;
    align-self: flex-end !important;
    width: 100% !important;
    justify-items: end;
    max-width: 100% !important;
    margin-right: 0 !important;
  }

  /* Symmetry: when the image is on the left (non-reverse), ensure left padding and
     constrain the price block so it stays inside the content area. */
  .service-panel[data-service-panel="duo"] .service-card:not(.reverse) .service-content,
  .service-panel[data-service-panel="couple"] .service-card:not(.reverse) .service-content,
  .service-panel[data-service-panel="parentchild"] .service-card:not(.reverse) .service-content,
  .service-panel[data-service-panel="group"] .service-card:not(.reverse) .service-content {
    padding-left: 56px !important;
    text-align: left !important;
    align-items: flex-start !important;
  }

  .service-panel[data-service-panel="duo"] .service-card:not(.reverse) .price-block,
  .service-panel[data-service-panel="couple"] .service-card:not(.reverse) .price-block,
  .service-panel[data-service-panel="parentchild"] .service-card:not(.reverse) .price-block,
  .service-panel[data-service-panel="group"] .service-card:not(.reverse) .price-block {
    text-align: left !important;
    align-self: flex-start !important;
    max-width: calc(100% - 56px) !important; /* leave space for the image */
    margin-left: 0 !important;
  }
}

.booking-feedback--error {
  color: #d52d2d;
}

.booking-feedback--success {
  color: var(--accent);
}

.booking-feedback-templates {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .booking-modal {
    padding: 0.75rem;
    align-items: flex-start;
  }

  .booking-modal__dialog {
    border-radius: 24px;
    padding: 1.25rem;
    max-height: calc(100vh - 1.5rem);
  }

  .booking-modal__close {
    top: 0.75rem;
    right: 0.75rem;
  }

  /* Mobile: center booking header elements */
  #bookingModalTitle,
  #bookingSummaryName,
  #bookingSummaryPrice,
  #bookingSummaryIncludes {
    text-align: center;
  }

  .booking-modal__summary {
    text-align: center;
  }

  #bookingSummaryName .booking-summary__suffix {
    display: block;
    margin-left: 0;
    margin-top: 0.25rem;
  }

  #bookingSummaryIncludes .booking-summary__includes-line {
    display: block;
  }

  #bookingSummaryIncludes .booking-summary__includes-line--break {
    margin-top: 0.25rem;
  }
}



.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.75rem;
  border-radius: 30px;
  border: 2px dashed rgba(0,0,0,0.2);
  background: transparent;
  color: rgba(0,0,0,0.75);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

/* About Story */
.about-story {
  padding: 4rem 0;
}

.story-content {
  max-width: 800px;
  margin: 0 auto 3rem;
}

.story-content h2 {
  color: #2c5f7f;
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.story-content p {
  line-height: 1.8;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

.story-image {
  border-radius: 12px;
  overflow: hidden;
  max-width: 800px;
  margin: 0 auto;
}

.story-image img {
  width: 100%;
  height: auto;
}

/* Values Section */
.values-section {
  padding: 4rem 0;
}

.values-section h2 {
  text-align: center;
  font-size: 2.5rem;
  color: #2c5f7f;
  margin-bottom: 3rem;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.value-box {
  text-align: center;
  padding: 2rem;
}

.value-icon {
  font-size: 3rem;
  color: #2c5f7f;
  margin-bottom: 1rem;
}

.value-box h3 {
  font-size: 1.25rem;
  color: #333;
  margin-bottom: 0.75rem;
}

.value-box p {
  color: #666;
  line-height: 1.6;
}

/* About CTA */
.about-cta {
  padding: 4rem 0;
  background: linear-gradient(135deg, #2c5f7f 0%, #1a4a66 100%);
  color: white;
  text-align: center;
}

.about-cta h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.about-cta p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

/* Legacy contact-section module styles (kept scoped to avoid colliding with contact-coop layout). */
.contact-section h2 {
  color: #2c5f7f;
  margin-bottom: 1rem;
}

.contact-section p {
  color: #666;
  margin-bottom: 2rem;
}

/* Form Styles */
.contact-section .contact-form {
  background: #f8f9fa;
  padding: 2.5rem;
  border-radius: 12px;
}

.contact-section .form-group {
  margin-bottom: 1.5rem;
}

.contact-section .form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #333;
  font-weight: 600;
}

.contact-section .form-group input,
.contact-section .form-group select,
.contact-section .form-group textarea {
  width: 100%;
  padding: 0.875rem;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.contact-section .form-group input:focus,
.contact-section .form-group select:focus,
.contact-section .form-group textarea:focus {
  outline: none;
  border-color: #2c5f7f;
}

.social-links {
  margin-bottom: 2rem;
}

.contact-social__channels {
  margin-bottom: 1.2rem;
  justify-content: flex-start;
  align-items: flex-start;
}

.contact-social__channels .footer-action__chip {
  background: rgba(31, 31, 31, 0.04);
  border-color: rgba(31, 31, 31, 0.16);
  color: var(--accent-dark);
}

.contact-social__channels .footer-action__chip i {
  color: rgba(31, 31, 31, 0.7);
}

.contact-social__channels .footer-action__chip:hover,
.contact-social__channels .footer-action__chip:focus {
  border-color: rgba(31, 31, 31, 0.4);
  color: var(--accent-dark);
}

.contact-social__channels .footer-action__chip:hover i,
.contact-social__channels .footer-action__chip:focus i {
  color: var(--accent-dark);
}

.social-links h3 {
  color: #2c5f7f;
  margin-bottom: 1rem;
}

.social-icons {
  display: flex;
  gap: 1rem;
}

/* Mobile: center social icons row */
@media (max-width: 640px) {
  .social-icons {
    justify-content: center;
  }
}


.social-icons a {
  width: 66px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: #2c5f7f;
}

.social-icons a .social-icon__img,
.social-icons a i {
  width: 44px;
  height: 44px;
  display: block;
}

.social-icons a .social-icon__img {
  object-fit: contain;
  object-position: center;
}

.social-icons a i {
  font-size: 1.25rem;
}

.social-icons .social-icon__label {
  font-size: 0.8rem;
  line-height: 1.1;
  white-space: nowrap;
}

.social-icons a:hover .social-icon__img,
.social-icons a:focus .social-icon__img,
.social-icons a:hover i,
.social-icons a:focus i {
  transform: translateY(-1px);
}

.social-icons a:hover .social-icon__img,
.social-icons a:focus .social-icon__img {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

@media (max-width: 768px) {
  .page-header h1 {
    font-size: 2rem;
  }

  .page-header p {
    font-size: 1rem;
  }

  .gallery-grid {
    column-count: 1;
  }

  .gallery-item {
    margin-bottom: 1rem;
  }

  .gallery-item:hover {
    transform: translateY(-5px) scale(1.01);
  }

  .service-card,
  .service-card.reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

}

/* Language Toggle Button */
.lang-toggle {
  /* Visual proportions (desktop first) */
  min-height: 38px;
  height: 38px;
  padding: 0 0.98rem;
  background: transparent;
  border: 1px solid rgba(44, 95, 127, 0.44);
  color: rgba(44, 95, 127, 0.72);
  border-radius: 999px;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.82rem;
  /* No custom animation */
  transition: none;
  margin-left: 1rem;

  /* Remove native arrow (no custom arrow either) */
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(255,255,255,0.78);
  /* Balance padding so center alignment is visually consistent */
  padding-left: 0.98rem;
  padding-right: 0.98rem;
  line-height: 38px;
  display: inline-block;
  text-align: center;
  text-align-last: center;
  width: auto;
  min-width: 0; /* let JS autosize based on selected label */
  max-width: 260px;

  /* Avoid text colliding with the custom arrow */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chinese label can look optically smaller; slightly bump only for zh */
.lang-toggle[data-lang="zh"] {
  font-size: 0.86rem;
}

/* Hide native arrow on legacy Edge/IE (harmless elsewhere) */
.lang-toggle::-ms-expand {
  display: none;
}

/* Desktop: allow JS to expand, but still keep it within a safe range */
@media (min-width: 769px) {
  .lang-toggle {
    max-width: 260px;
  }
}


/* No hover styling: keep it stable */

@media (max-width: 768px) {
  .lang-toggle {
    position: static;
    margin-left: auto;
    margin-right: 0;
    height: 34px;
    min-height: 34px;
    line-height: 34px;
    padding: 0 0.62rem;
    font-size: 0.64rem;
    border-width: 1px;
    text-align: center;
    text-align-last: center;
    order: 2;
  }

  .lang-toggle[data-lang="zh"] {
    font-size: 0.67rem;
  }
}

/* ========================================
  Mobile optimization enhancements
  ======================================== */

/* Mobile navigation optimizations */
@media (max-width: 768px) {
  .navbar {
    padding: 0;
  }
  
  .nav-container {
    padding: 0.8rem 1.2rem;
  }
  
  .logo {
    font-size: 0.95rem;
    z-index: 1001;
    order: 1;
    line-height: 1.1;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-height: 0;
    height: auto;
    align-self: center;
  }

  .nav-toggle {
    display: flex;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    align-items: center;
    order: 3;
    margin-left: 8px;
  }

  .nav-menu {
    order: 4;
  }
  
  .nav-menu {
    position: fixed;
    left: -100%;
    top: 0;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.98);
    width: 80%;
    max-width: 300px;
    height: 100vh;
    text-align: left;
    transition: left 0.3s ease;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    padding: 80px 0 20px;
    gap: 0;
    overflow-y: auto;
    z-index: 1002;
  }
  
  .nav-menu.active {
    left: 0;
  }
  
  body.nav-open .nav-menu {
    left: 0;
  }
  
  .nav-menu li {
    width: 100%;
  }
  
  .nav-menu a {
    display: block;
    padding: 1rem 2rem;
    font-size: 1rem;
    min-height: 48px;
    line-height: 1.6;
    border-bottom: 1px solid rgba(0,0,0,0.05);
  }
  
  .nav-menu a:hover,
  .nav-menu a.active {
    background: rgba(26, 136, 133, 0.08);
  }
}

/* Mobile typography & spacing */
@media (max-width: 640px) {
  body {
    font-size: 16px;
    line-height: 1.6;
  }
  
  h1:not(.hero-canvas__title) {
    font-size: 2rem !important;
    line-height: 1.3;
    margin-bottom: 1rem;
  }

  .hero-canvas__title {
    font-size: clamp(0.92rem, 3.2vw, 1.12rem) !important;
    line-height: 1.06 !important;
  }
  
  h2 {
    font-size: 1.75rem !important;
    line-height: 1.35;
    margin-bottom: 0.875rem;
  }
  
  h3 {
    line-height: 1.4;
    margin-bottom: 0.75rem;
  }
  
  p {
    font-size: 0.94rem;
    line-height: 1.75;
    margin-bottom: 0.9rem;
  }
  
  .container {
    padding: 0 16px;
  }
}

/* Mobile: tighten logo typography and layout so long English name fits and doesn't push content down */
@media (max-width: 640px) {
  .nav-container {
    padding: 0.5rem 0.9rem;
    align-items: center;
    gap: 8px;
  }

  .logo {
    font-size: 0.94rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    max-width: 76% !important; /* leave room for language toggle + menu */
    text-transform: uppercase !important;
  }

  /* Reduce top spacing of the navbar when logo wraps to two lines */
  .navbar {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

/* Mobile: larger Chinese logo styling when site is in Chinese */
@media (max-width: 640px) {
  html[lang="zh"] .logo {
    font-size: 0.92rem !important;
    max-width: 78% !important;
    letter-spacing: 0.12em !important;
  }

  html[lang="zh"] .logo::after {
    font-size: 0.66rem;
    letter-spacing: 0.07em;
    line-height: 1.1;
  }
}

/* Mobile buttons & touch targets */
@media (max-width: 768px) {
  .btn {
    min-height: 48px;
    padding: 0.875rem 2rem;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .btn-primary,
  .btn-ghost {
    min-width: 140px;
  }
  
  a, button, input[type="submit"], input[type="button"] {
    min-height: 44px;
  }
  
  /* Larger tap targets */
}

/* Mobile form tweaks */
@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px;
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 8px;
  }
  
  textarea {
    min-height: 120px;
  }
  
  label {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    display: block;
  }
}

/* Contact (mobile only): form grid should show 2 boxes per row */
@media (max-width: 640px) {
  /* Remove excessive side gutters on contact page */
  .contact-form-section .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  .contact-form-section .contact-form-wrapper {
    padding: 16px;
    border-radius: 20px;
  }

  /* Long controls below the grid should remain full width */
  .contact-form-section .contact-form > .contact-form-group {
    width: 100%;
  }
}

/* Contact (mobile only): keep contact page left-aligned and compact */
@media (max-width: 640px) {
  .contact-info-section {
    text-align: left;
    padding: 0 0 18px;
  }

  .contact-info-section .contact-info__strip {
    grid-template-columns: 1fr;
    align-items: start;
    min-height: 0;
    gap: 10px;
    padding-top: 10px;
  }

  .contact-info-section .contact-info__main-copy {
    gap: 8px;
  }

  .contact-info-section .contact-info__address-line {
    max-width: none;
  }

  .contact-info-section .contact-info__side {
    gap: 0;
  }

  .contact-info-section .contact-info__strip-button {
    width: auto;
    justify-content: flex-start;
  }
}

/* Contact page (mobile only): keep spacing compact but avoid global text-align overrides. */
@media (max-width: 640px) {
  .contact-hero {
    text-align: left;
    margin-top: 58px;
    padding: 14px 0 0;
  }

  .contact-hero > .container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .contact-hero__grid {
    gap: 0;
    min-height: auto;
  }

  .contact-hero__content {
    width: 100%;
    max-width: none;
    min-height: auto;
    padding-top: 2px;
    align-items: flex-start;
    text-align: left;
  }

  .contact-hero__eyebrow {
    display: none;
  }

  .contact-hero h1 {
    font-size: clamp(1.84rem, 7.4vw, 2.08rem);
    margin-bottom: 9px;
    letter-spacing: -0.055em;
  }

  .contact-hero__subtitle {
    max-width: none;
    font-size: clamp(0.82rem, 3.1vw, 0.9rem);
    line-height: 1.5;
    color: #6a5d53;
    white-space: nowrap;
    margin: 0;
    text-align: left;
  }

  .contact-hero__actions {
    width: 100%;
    margin-top: 13px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 6px;
  }

  .contact-hero__actions .btn {
    width: 100%;
    min-height: 34px;
    padding: 0 5px;
    font-size: clamp(9px, 2.55vw, 9.8px);
    letter-spacing: 0;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 14px;
    border-width: 1px;
    box-shadow: none;
    gap: 0.44rem;
  }

  .contact-hero__actions .btn i {
    font-size: 1.34em;
  }

  .contact-hero__action-mobile-only {
    display: inline-flex !important;
  }

  .contact-hero__actions .btn-ghost {
    border-color: rgba(10, 69, 75, 0.14);
    background: rgba(255, 252, 248, 0.97);
    color: var(--contact-accent-deep);
  }

  .contact-hero__links {
    width: 100%;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 10px;
    overflow: visible;
    padding-bottom: 0;
  }

  .contact-hero__link {
    font-size: 13px;
    font-weight: 420;
    line-height: 1.4;
    white-space: nowrap;
    border-bottom: 0;
    padding-bottom: 0;
    color: rgba(13, 79, 86, 0.82);
  }

  .contact-hero__link-wechat {
    display: none;
  }

  .contact-hero__channels {
    display: none;
  }

  .contact-hero__card {
    display: none;
  }

  .contact-info-section {
    display: none;
  }

  .contact-visit-mobile {
    display: block;
    margin-top: 0;
    padding: 2px 0 18px;
    background: #f5f0e9;
  }

  .contact-visit-mobile > .container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .contact-visit-mobile__card {
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    max-width: 100%;
  }

  .contact-visit-mobile__media {
    border-bottom: 0;
    border-radius: 22px;
    overflow: hidden;
    background: #110f0d;
  }

  .contact-visit-mobile__media img {
    aspect-ratio: 7 / 8;
    object-position: 56% 31%;
  }

  .contact-visit-mobile__body {
    padding: 11px 0 0;
    gap: 2px;
    text-align: left !important;
    align-items: flex-start !important;
  }

  .contact-visit-mobile__eyebrow {
    display: none;
  }

  .contact-visit-mobile__distance {
    width: 100%;
    max-width: none;
    font-size: 0.88rem;
    line-height: 1.36;
    color: #312922;
    white-space: nowrap;
    text-align: left !important;
  }

  .contact-visit-mobile__address {
    width: 100%;
    padding-top: 0;
    font-size: 0.84rem;
    line-height: 1.43;
    color: rgba(31, 26, 23, 0.92);
    text-align: left !important;
  }

  .contact-visit-mobile__summary {
    width: 100%;
    max-width: 22em;
    font-size: 0.75rem;
    line-height: 1.5;
    color: rgba(92, 80, 71, 0.68);
    text-align: left !important;
  }

  .contact-visit-mobile__meta {
    width: 100%;
    margin-top: 8px;
    padding-top: 9px;
    gap: 5px;
    align-items: flex-start;
    text-align: left !important;
    border-top: 1px solid rgba(16, 89, 96, 0.05);
    max-width: 100%;
  }

  .contact-visit-mobile__button {
    min-height: 34px;
    min-width: 0;
    width: auto;
    max-width: 156px;
    margin-top: 10px;
    padding: 0 12px;
    font-size: 0.61rem;
    letter-spacing: 0.01em;
    border-width: 1px;
    text-transform: none;
    box-shadow: none;
    justify-content: center;
    align-self: flex-start;
  }

  .contact-visit-mobile__button.btn-ghost {
    border-color: rgba(10, 69, 75, 0.16);
    background: rgba(255, 252, 248, 0.92);
    color: var(--contact-accent-deep);
  }

  .contact-visit-mobile__social {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding-top: 0;
    text-align: left !important;
    align-self: flex-start;
    border-top: 0;
  }

  .contact-visit-mobile__social-label {
    display: none;
  }

  .contact-visit-mobile__social-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start !important;
    gap: 0;
    width: 100%;
    max-width: 100%;
    text-align: left !important;
  }

  .contact-visit-mobile__social-link {
    position: relative;
    font-size: 11.5px;
    font-weight: 405;
    letter-spacing: 0.02em;
    line-height: 1.3;
    text-decoration: none;
    color: rgba(82, 95, 99, 0.68);
    white-space: nowrap;
  }

  .contact-visit-mobile__social-link + .contact-visit-mobile__social-link {
    margin-left: 10px;
    padding-left: 10px;
  }

  .contact-visit-mobile__social-link + .contact-visit-mobile__social-link::before {
    content: "·";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(70, 89, 95, 0.26);
  }

  .contact-coop-entry-section {
    padding: 12px 0 74px;
  }

  .contact-coop-entry {
    gap: 18px;
    padding-top: 22px;
  }

  .contact-coop-entry__subtitle {
    margin-top: 14px;
  }

  .contact-coop-entry__button {
    min-height: 48px;
    padding: 0 22px;
  }

  .collaboration-hero {
    padding: 30px 0 12px;
  }

  .collaboration-hero h1 {
    font-size: clamp(2.35rem, 10vw, 3rem);
  }

  .collaboration-hero__subtitle {
    margin-top: 16px;
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.72;
  }

  .collaboration-hero__link {
    margin-top: 18px;
    font-size: 0.92rem;
  }

  .contact-form-wrapper {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 900px) {
  .contact-coop-form__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .contact-coop-section,
  .contact-coop-section *:not(.contact-form):not(.contact-form *):not(input):not(textarea):not(select) {
    text-align: left;
  }

  .contact-coop-section .contact-coop-wrapper {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .contact-coop-block {
    padding: 24px 0;
  }

  .contact-coop-submit {
    width: 100%;
    text-align: center;
  }
}

/* Mobile images & gallery */
@media (max-width: 640px) {
  img {
    max-width: 100%;
    height: auto;
  }
  
  .gallery-item {
    border-radius: 12px;
  }
}


/* Mobile page header */
@media (max-width: 640px) {
  .legal-layout {
    padding: 32px 0 38px;
  }

  .legal-content {
    line-height: 1.78;
  }

  .legal-content h2 {
    font-size: 1.15rem;
  }

  .page-header {
    padding: 96px 1rem 18px;
    min-height: auto;
  }

  html[data-season="spring"] .page-header {
    background-position: center;
    background-size: cover;
  }
  
  .page-header h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  
  .page-header p {
    font-size: 1rem;
    line-height: 1.6;
  }
}

/* Mobile footer */
@media (max-width: 640px) {
  footer {
    padding: 2rem 1rem;
  }
  
  .footer-content {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
  
}

/* Mobile text selection */
@media (max-width: 640px) {
  ::selection {
    background: rgba(26, 136, 133, 0.3);
  }
  
  /* Prevent overly small rendered text */
  * {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* Mobile landscape */
@media (max-width: 900px) and (orientation: landscape) {
  .page-header {
    padding: 100px 1rem 40px;
    min-height: 60vh;
  }
}

/* Extra-small screens (e.g., iPhone SE) */
@media (max-width: 375px) {
  .logo {
    font-size: 0.88rem;
  }
  
  .nav-container {
    padding: 0.7rem 1rem;
  }
  
  .btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.8rem;
  }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover-only effects; use touch-friendly feedback */
  .btn:active,
  .nav-menu a:active {
    transform: scale(0.98);
    transition: transform 0.1s;
  }
  
  .gallery-item:active {
    opacity: 0.9;
  }
}

/* Mobile scrolling */
@media (max-width: 768px) {
  html {
    scroll-padding-top: 80px;
  }
  
  body {
    -webkit-overflow-scrolling: touch;
  }
}

/* Desktop tweaks for reversed service-cards: right-align text and bring it close to the
   image. Adjust column widths and gap so spacing sits in the 40-60px range (48px here). */
@media (min-width:900px) {
  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card.reverse {
    /* Keep reversed cards on the same image/content ratio as normal cards
       so all rows look visually consistent on desktop. */
    grid-template-columns: 36% 64%;
    align-items: start;
  }

  /* NOTE: Do NOT force all reversed cards to right-align.
     Only specific panels need that treatment (handled below with scoped selectors).
     Keeping this global rule out prevents unexpected layout shifts in other modules. */

  /* reverse alignment for specific panels is handled by scoped rules (duo/couple/parentchild/group).
     kimonoprice has its own centering overrides. */
  
  /* Constrain image container so it fits inside the fixed image column and doesn't overflow */
  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card.reverse .service-image {
    width: 100%;
    max-width: none;
    /* min-height: 320px; /* keep reasonable vertical presence */
    overflow: hidden;
    display: block;
  }

  .service-card.reverse .service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* preserve coverage while respecting container size */
    display: block;
  }

  /* Force includes/title/list to right-align inside reversed cards on desktop */
  .service-card.reverse .includes {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* push title and list to the right */
    text-align: right;
    width: 100%;
  }

  .service-card.reverse .includes .includes-title {
    align-self: flex-end;
    margin-right: 0;
  }

  .service-card.reverse .includes .package-includes {
    /* prevent the list from stretching full-width so it hugs the right edge */
    width: auto !important;
    margin-left: auto !important; /* push block to the right inside the flex column */
    max-width: 360px !important; /* keep list reasonably narrow so it aligns with price/CTA */
    align-self: flex-end !important;
    text-align: right !important;
  }

  .service-card.reverse .includes .package-includes li span {
    display: block;
    text-align: right;
  }

  /* Stronger specificity fallback: ensure includes inside the content column aligns right
     even if other rules apply. Keep use of !important minimal and only for alignment. */
  .service-card.reverse .service-content > .includes {
    align-items: flex-end !important;
    text-align: right !important;
  }

  .service-card.reverse .service-content > .includes .package-includes {
    margin-left: auto !important;
    align-self: flex-end !important;
    max-width: 360px !important;
  }

  .service-panel[data-service-panel="duo"] .service-card.reverse .includes .package-includes,
  .service-panel[data-service-panel="couple"] .service-card.reverse .includes .package-includes,
  .service-panel[data-service-panel="parentchild"] .service-card.reverse .includes .package-includes,
  .service-panel[data-service-panel="group"] .service-card.reverse .includes .package-includes {
    width: min(100%, 420px) !important;
    max-width: min(100%, 420px) !important;
    justify-items: stretch !important;
  }

  .service-panel[data-service-panel="duo"] .service-card.reverse .includes .package-includes li,
  .service-panel[data-service-panel="couple"] .service-card.reverse .includes .package-includes li,
  .service-panel[data-service-panel="parentchild"] .service-card.reverse .includes .package-includes li,
  .service-panel[data-service-panel="group"] .service-card.reverse .includes .package-includes li {
    width: 100%;
  }

  .service-panel[data-service-panel="duo"] .service-card.reverse .includes .package-includes li span,
  .service-panel[data-service-panel="couple"] .service-card.reverse .includes .package-includes li span,
  .service-panel[data-service-panel="parentchild"] .service-card.reverse .includes .package-includes li span,
  .service-panel[data-service-panel="group"] .service-card.reverse .includes .package-includes li span {
    width: 100%;
  }

  html[lang="zh"] .service-card.reverse .price-block .service-text {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
  }

  .service-panel[data-service-panel="duo"] .service-card.reverse .price-block .service-text,
  .service-panel[data-service-panel="couple"] .service-card.reverse .price-block .service-text,
  .service-panel[data-service-panel="parentchild"] .service-card.reverse .price-block .service-text,
  .service-panel[data-service-panel="group"] .service-card.reverse .price-block .service-text {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
  }
}

/* Mobile: Duo tab should always show the full image area (no vertical crop). */
@media (max-width: 860px) {
  .service-panel[data-service-panel="duo"] .service-card .service-image {
    height: auto;
    min-height: 0;
  }

  .service-panel[data-service-panel="duo"] .service-card .service-image img {
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center top;
  }
}

/* Mobile-only: sync non-kimonoprice A/B/C cards to the refined C-card system. */
@media (max-width: 860px) {
  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .service-content {
    padding-left: 24px;
    padding-right: 24px;
    align-items: stretch;
    text-align: left;
  }

  /* Title group (badge + title + subtitle) remains centered. */
  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .service-title-row {
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .service-title-row h2 {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
  }

  html[lang="zh"] .service-panel:not([data-service-panel="kimonoprice"]) .service-card:nth-of-type(3) .service-title-row h2[data-subcopy-zh]::after {
    margin-top: 9px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(31, 31, 31, 0.39);
    line-height: 1.35;
  }

  html[lang="en"] .service-panel:not([data-service-panel="kimonoprice"]) .service-card:nth-of-type(3) .service-title-row h2[data-subcopy-zh]::after,
  html[lang="ja"] .service-panel:not([data-service-panel="kimonoprice"]) .service-card:nth-of-type(3) .service-title-row h2[data-subcopy-zh]::after {
    margin-top: 9px;
    font-size: 13px;
    font-weight: 400;
    color: rgba(31, 31, 31, 0.39);
    line-height: 1.35;
  }

  /* Selling points: left-aligned list with fixed icon/text columns. */
  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .service-content > .service-features:first-of-type {
    width: 100%;
    margin: 16px 0 0;
    gap: 12px;
  }

  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .service-content > .service-features:first-of-type li {
    width: 100%;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.48;
  }

  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .service-content > .service-features:first-of-type li i {
    width: 18px;
    min-width: 18px;
    justify-self: start;
    align-self: start;
    margin-top: 0.12rem;
  }

  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .service-content > .service-features:first-of-type li span {
    text-align: left;
  }

  /* Price zone: left-aligned with the same content axis. */
  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .service-content > .price-block {
    width: 100%;
    margin-top: 18px;
    align-items: flex-start;
    text-align: left;
    gap: 10px;
  }

  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .price-block .service-price {
    font-size: 32px;
    font-weight: 700;
    text-align: left;
  }

  html[lang="ja"] .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .price-block .service-price .service-price__currency,
  html[lang="zh"] .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .price-block .service-price .service-price__currency {
    font-size: 0.75em;
  }

  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .price-block .service-text {
    margin: 0;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    color: rgba(31, 31, 31, 0.64);
  }

  /* "All-inclusive" as a pill note under the service-line in the price zone. */
  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .price-block .service-text .package-includes__highlight {
    display: inline-flex;
    align-items: center;
    height: 22px;
    margin-top: 6px;
    padding: 2px 10px;
    border-radius: 7px;
    background: rgba(26, 136, 133, 0.07);
    color: var(--accent-dark);
    font-size: 12px;
    font-weight: 600;
  }

  /* Description and includes: left-aligned and rhythm-tightened. */
  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .service-note {
    width: 100%;
    margin-top: 16px;
    margin-bottom: 0;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
    color: rgba(31, 31, 31, 0.86);
  }

  .service-panel .kimonoprice-extras--group .kimonoprice-extras__item-title,
  .service-panel .kimonoprice-extras--group .kimonoprice-extras__item-title {
    font-family: var(--body-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0.01em;
    color: var(--accent-dark);
  }

  .service-panel:not([data-service-panel="kimonoprice"])[aria-hidden="false"] .kimonoprice-extras--group .kimonoprice-extras__sub-title,
  .service-panel:not([data-service-panel="kimonoprice"])[aria-hidden="false"] .kimonoprice-extras--group .kimonoprice-extras__sub-title .makeup-advanced-main,
  .service-panel:not([data-service-panel="kimonoprice"])[aria-hidden="false"] .kimonoprice-extras--group .kimonoprice-extras__sub-title .makeup-advanced-meta {
    font-family: var(--body-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0.01em;
    color: rgba(31, 31, 31, 0.86);
  }

  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .service-note .service-note__meta {
    font-size: 0.78em;
    color: rgba(31, 31, 31, 0.52);
  }

  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .includes {
    width: 100%;
    margin-top: 16px;
    text-align: left;
    align-items: flex-start;
  }

  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .includes-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
  }

  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .package-includes {
    --package-includes-row-gap: 8px;
    width: 100%;
    margin: 0;
    gap: var(--package-includes-row-gap);
    justify-items: start;
  }

  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .package-includes li {
    justify-content: flex-start;
  }

  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .package-includes li span {
    text-align: left;
    white-space: normal;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
  }

  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .package-includes li:first-child span {
    font-weight: 500;
  }

  .service-panel .kimonoprice-extras--group .kimonoprice-extras__sub-desc,
  .service-panel .kimonoprice-extras--group .kimonoprice-extras__sub--makeup .kimonoprice-extras__sub-entry .kimonoprice-extras__sub-desc,
  .service-panel .kimonoprice-extras__sub-desc {
    font-family: var(--body-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    color: rgba(31,31,31,0.62);
  }

  .service-specs .service-specs__item-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0.01em;
    color: var(--accent-dark);
  }

  .service-specs .service-specs__sub-title,
  .service-specs .service-specs__sub-title .makeup-advanced-main,
  .service-specs .service-specs__sub-title .makeup-advanced-meta {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0.01em;
    color: rgba(31, 31, 31, 0.86);
  }

  .service-specs .kimonoprice-extras__sub--makeup > .service-specs__sub-title {
    margin-bottom: 10px;
  }

  .service-panel:not([data-service-panel="kimonoprice"])[aria-hidden="false"] .kimonoprice-extras--group .kimonoprice-extras__sub-title,
  .service-panel:not([data-service-panel="kimonoprice"])[aria-hidden="false"] .kimonoprice-extras--group .kimonoprice-extras__sub-title .makeup-advanced-main,
  .service-panel:not([data-service-panel="kimonoprice"])[aria-hidden="false"] .kimonoprice-extras--group .kimonoprice-extras__sub-title .makeup-advanced-meta {
    font-family: var(--body-font) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    letter-spacing: 0.01em !important;
    color: rgba(31, 31, 31, 0.86) !important;
  }

  /* CTA: full width within the same content column (not floating narrow). */
  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .price-cta {
    width: 100%;
    margin-top: 18px;
    justify-content: center;
  }

  .services-grid .service-panel:not([data-service-panel="kimonoprice"]) .service-card .price-cta .btn-primary {
    width: 100%;
    min-width: 0;
    height: 46px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    background: #0e5754;
    box-shadow: 0 5px 12px rgba(26, 136, 133, 0.16);
    justify-content: center;
    align-self: stretch;
  }

  /* Decorative letters (A/B/C): align vertically to the price zone and keep subtle. */
  .service-panel:not([data-service-panel="kimonoprice"]) .service-card .service-content::before {
    top: 52%;
    bottom: auto;
    right: 4px;
    left: auto;
    transform: translateY(-50%);
    color: var(--accent-dark);
    opacity: 0.12;
  }

  .service-panel:not([data-service-panel="kimonoprice"]) .service-card.reverse .service-content::before {
    right: 4px;
    left: auto;
  }
}