/* ============================================================================
   AGD Fukuoka Riverside — CSS (Pixel-perfect from Figma)
   Mobile-first: 440px → 768px → 1024px+
   ============================================================================ */

/* ── 1. CUSTOM PROPERTIES ── */

:root {
  --font-heading: 'Playfair Display', serif;
  --font-body: 'DM Sans', sans-serif;
  --font-jp: 'Noto Sans JP', sans-serif;

  --color-text: #4D4D4D;
  --color-label: #4D4D4D;
  --color-hero-bg: #423D33;
  --color-btn-border: #4D4D4D;
  --color-bg: #FFFFFF;
  --color-access-bg: #f6f6f6;
  --color-footer-bg: #4D4D4D;
  --color-accent: #FB7F65;
  --color-border-light: #B3B3B3;
  --color-btn-hero-text: #444444;
}

/* ── SR-ONLY (screen-reader only, SEO H1) ── */
.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;
}

/* ── 2. RESET ── */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: 14px;
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
a { text-decoration: none; color: inherit; transition: opacity 0.25s ease; }
a:hover { opacity: 0.5; }
ul { list-style: none; }

/* ── 3. SHARED SECTION CLASSES ── */

.section__label {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--color-label);
  text-align: center;
  line-height: 1.36;
}

.section__heading {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400;
  color: var(--color-text);
  text-align: center;
  line-height: 1.3;
}

.section__tagline {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  color: var(--color-text);
  text-align: center;
  line-height: 1.3;
}

/* All buttons border-radius */
[class*="__btn"],
.sticky-cta__btn {
  border-radius: 50px;
}

/* Shared button styles */
.btn-outline {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 390px;
  height: 50px;
  background: var(--color-bg);
  border: 1px solid var(--color-btn-border);
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-btn-border);
  transition: all 0.3s ease;
}
.btn-outline:hover {
  background: var(--color-btn-border);
  color: #fff;
}

/* ── 4. ANIMATIONS ── */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 5. MENU OVERLAY ── */

/* Container */
.agd-menu {
  position: fixed;
  inset: 0;
  z-index: 9999;
  visibility: hidden;
  pointer-events: none;
}
.agd-menu.is-open {
  visibility: visible;
  pointer-events: all;
}
/* Keep overlay visible throughout close animation */
.agd-menu.is-closing {
  visibility: visible;
  pointer-events: none;
}

/* Backdrop */
.agd-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.agd-menu.is-open    .agd-menu__backdrop { opacity: 1; }
.agd-menu.is-closing .agd-menu__backdrop {
  opacity: 0;
  transition: opacity 0.38s ease;
}

/* Panel – slides from left (open: ease-out expo | close: ease-in expo) */
.agd-menu__panel {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 88.5%;
  max-width: 1700px;
  /* PC: discovery = 39.8% → nav-col fills 60.2% */
  background: linear-gradient(to right, #ffffff 60.2%, #f6f6f6 60.2%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); /* open easing */
}
.agd-menu.is-open    .agd-menu__panel { transform: translateX(0); }
.agd-menu.is-closing .agd-menu__panel {
  transform: translateX(-100%);
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.84, 0); /* ease-in — slides away fast */
}

/* ── PC Header ── */
.agd-menu__header {
  display: flex;
  align-items: center;
  height: 100px;
  padding: 0 50px 0 100px;
  flex-shrink: 0;
  border-bottom: none;
}
.agd-menu__header-logo img { width: 180px; height: 40px; object-fit: contain; display: block; }
.agd-menu__header-right {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}
.agd-menu__lang {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  position: relative;
}
.agd-menu__lang-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.agd-menu__lang span {
  font-family: var(--font-body);
  font-size: 14px;
  color: #4D4D4D;
  line-height: 1.65;
}
.agd-menu__lang-line {
  height: 1px;
  background: rgba(77, 77, 77, 0.35);
}

/* ── Language Dropdown ── */
.lang-dropdown {
  position: fixed;
  background: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
  box-sizing: border-box;
  min-width: 120px;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10000;
}
.lang-dropdown.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
/* Header: "English ^" — exact clone of trigger layout */
.lang-dropdown__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  white-space: nowrap;
  /* height set by JS to match trigger */
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: #4D4D4D;
  cursor: pointer;
}
.lang-dropdown__header span,
.lang-dropdown__header svg {
  /* padding mirrors pc-nav__lang-toggle inner spacing */
  padding: 0;
}
.lang-dropdown__chevron {
  flex-shrink: 0;
  margin-left: 8px;
}
/* Divider line — mirrors .pc-nav__lang-line */
.lang-dropdown__line {
  width: 100%;
  height: 1px;
  background: #4D4D4D;
  margin-top: 5px;
}
.lang-dropdown__item {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: #4D4D4D;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.lang-dropdown__item:hover {
  background: #f6f6f6;
  opacity: 1;
}
.lang-dropdown__item.is-active {
  font-weight: 400;
}
/* Chevron rotation when open */
.pc-nav__lang-toggle svg,
.agd-menu__lang-row svg {
  transition: transform 0.25s ease;
}
.pc-nav__lang-toggle.is-open svg,
.agd-menu__lang.is-open .agd-menu__lang-row svg {
  transform: rotate(180deg);
}
/* Header dropdown context */
.pc-nav__lang {
  position: relative;
}
.pc-nav__lang .lang-dropdown {
  background: #fff;
}
.pc-nav__lang .lang-dropdown__item {
  color: #4D4D4D;
}
.agd-menu__reserve-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 22px;
  background: #000;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  border-radius: 50px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.agd-menu__reserve-btn:hover {
  background: #fff;
  color: #000;
  box-shadow: inset 0 0 0 1px #000;
  opacity: 1;
}
.agd-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}
.agd-menu__close:hover { transform: rotate(90deg); opacity: 0.7; }

/* Mobile header – hidden on PC */
.agd-menu__header-mobile {
  display: none;
}

/* ── Body (nav + discovery) ── */
.agd-menu__body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* Nav column */
.agd-menu__nav-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 50px 10px 100px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none; /* Firefox */
}
.agd-menu__nav-col::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* Nav items */
.agd-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0;
  border-bottom: 1px solid rgba(77, 77, 77, 0.2);
  text-decoration: none;
  max-width: 818px;
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.agd-menu__link span {
  font-family: var(--font-body);
  font-size: 18px;
  color: #4D4D4D;
  font-weight: 400;
  line-height: normal;
}
/* Nav link hover — text darkens + arrow slides right */
.agd-menu__link span {
  transition: color 0.25s ease;
}
.agd-menu__link svg {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}
.agd-menu__link:hover { opacity: 1; }
.agd-menu__link:hover span { color: #1a0e0a; }
.agd-menu__link:hover svg  { transform: translateX(6px); }
.agd-menu.is-open .agd-menu__link {
  opacity: 1;
  transform: translateX(0);
}
.agd-menu.is-open .agd-menu__link:nth-child(1)  { transition-delay: 0.12s; }
.agd-menu.is-open .agd-menu__link:nth-child(2)  { transition-delay: 0.16s; }
.agd-menu.is-open .agd-menu__link:nth-child(3)  { transition-delay: 0.20s; }
.agd-menu.is-open .agd-menu__link:nth-child(4)  { transition-delay: 0.24s; }
.agd-menu.is-open .agd-menu__link:nth-child(5)  { transition-delay: 0.28s; }
.agd-menu.is-open .agd-menu__link:nth-child(6)  { transition-delay: 0.32s; }
.agd-menu.is-open .agd-menu__link:nth-child(7)  { transition-delay: 0.36s; }
.agd-menu.is-open .agd-menu__link:nth-child(8)  { transition-delay: 0.40s; }
.agd-menu.is-open .agd-menu__link:nth-child(9)  { transition-delay: 0.44s; }
.agd-menu.is-open .agd-menu__link:nth-child(10) { transition-delay: 0.48s; }
/* Rooms wrapper — giữ đúng stagger delay (vị trí 3) */
.agd-menu.is-open .agd-menu__item--has-sub .agd-menu__link { transition-delay: 0.20s; }

/* Sub-menu — Rooms child items */
.agd-menu__item--has-sub {
  display: flex;
  flex-direction: column;
  max-width: 818px;
}
.agd-menu__sub {
  display: flex;
  flex-direction: column;
  padding: 0 0 4px 0;
  max-width: 818px;
  width: 100%;
  border-bottom: 1px solid rgba(77,77,77,0.2);
}
.agd-menu__sub-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 14px;
  color: #4D4D4D;
  font-weight: 400;
  text-decoration: none;
  padding: 10px 0 10px 16px;
  max-width: 818px;
  width: 100%;
  border-top: 1px solid rgba(77,77,77,0.08);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.agd-menu__sub-link:first-child { border-top: none; }
.agd-menu__sub-link span { transition: color 0.25s ease; }
.agd-menu__sub-link svg {
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.agd-menu__sub-link:hover span { color: #1a0e0a; }
.agd-menu__sub-link:hover svg  { transform: translateX(6px); }
.agd-menu.is-open .agd-menu__sub-link {
  opacity: 1;
  transform: translateX(0);
}
.agd-menu.is-open .agd-menu__sub-link:nth-child(1) { transition-delay: 0.26s; }
.agd-menu.is-open .agd-menu__sub-link:nth-child(2) { transition-delay: 0.30s; }
.agd-menu.is-open .agd-menu__sub-link:nth-child(3) { transition-delay: 0.34s; }

/* CTAs */
.agd-menu__ctas {
  display: flex;
  gap: 20px;
  margin-top: 50px;
  flex-shrink: 0;
}
.agd-menu__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 20px;
  min-width: 250px;
  border-radius: 50px;
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  text-decoration: none;
  white-space: nowrap;
}
.agd-menu__cta {
  transition: background 0.28s ease, color 0.28s ease,
              border-color 0.28s ease, box-shadow 0.28s ease;
}
.agd-menu__cta--dark {
  background: #4D4D4D; color: #fff; border: 1px solid #4D4D4D;
}
.agd-menu__cta--dark:hover {
  background: #fff;
  color: #4D4D4D;
  border-color: #4D4D4D;
  opacity: 1;
}
.agd-menu__cta--outline {
  background: #fff; color: #4D4D4D; border: 1px solid #4D4D4D;
}
.agd-menu__cta--outline:hover {
  background: #4D4D4D;
  color: #fff;
  border-color: #4D4D4D;
  opacity: 1;
}

/* Social */
.agd-menu__social {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 50px;
}
.agd-menu__social-link {
  display: block;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.25s ease;
}
.agd-menu__social-link:hover {
  transform: scale(1.18) translateY(-2px);
  opacity: 1;
}
.agd-menu__social-link img { width: 30px; height: 30px; }

/* ── Discovery panel (right, PC only) ── */
.agd-menu__discovery {
  width: 39.8%;
  background: transparent;
  padding: 0 50px 0 60px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  justify-content: center;
  flex-shrink: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.agd-menu__discovery::-webkit-scrollbar { display: none; }
.agd-menu__discovery-label {
  font-family: var(--font-body);
  font-size: 14px;
  color: #4D4D4D;
}
.agd-menu__discovery-card {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}
.agd-menu__discovery-thumb {
  width: 210px;
  height: 148px;
  background: #c7bfb5;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.agd-menu__discovery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.45s ease;
}
.agd-menu__discovery-thumb:hover img {
  transform: scale(1.18);
}
.agd-menu__discovery-coming {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0;
  font-style: normal;
  font-weight: 500;
  background: rgba(0,0,0,0.18);
}
.agd-menu__discovery-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.agd-menu__discovery-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: #4D4D4D;
  line-height: 1.65;
}
.agd-menu__discovery-desc {
  font-family: var(--font-heading);
  font-style: normal;
  font-size: 14px;
  color: #4D4D4D;
  line-height: 20px;
}
.agd-menu__discovery-link {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: #4D4D4D;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Mobile ── */
/* ── Menu: Laptop overrides (901px – 1700px) ── */
@media (min-width: 901px) and (max-width: 1700px) {
  .agd-menu__panel {
    /* Laptop: nav-col = 700px fixed → discovery starts at 700px */
    background: linear-gradient(to right, #ffffff 700px, #f6f6f6 700px);
  }
  .agd-menu__nav-col {
    flex: none;
    width: 700px;
    padding: 10px 0 10px 100px;
  }
  .agd-menu__link {
    height: 50px;
    max-width: 550px;
  }
  .agd-menu__item--has-sub {
    max-width: 550px;
  }
  .agd-menu__sub {
    max-width: 550px;
    width: 100%;
  }
  .agd-menu__sub-link {
    max-width: 550px;
    width: 100%;
  }
  .agd-menu__discovery {
    flex: 1;
    width: auto;
    padding: 0 50px 0 50px;
  }
  .agd-menu__ctas {
    margin-top: 30px;
  }
  .agd-menu__social {
    margin-top: 30px;
  }
}

@media (max-width: 900px) {
  /* Panel: white background, no gradient */
  .agd-menu__panel {
    width: 100%;
    max-width: 100%;
    background: #fff;
  }

  /* Header */
  .agd-menu__header { display: none; }
  .agd-menu__header-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 25px;
    height: 70px;
    flex-shrink: 0;
  }
  .agd-menu__close--mobile {
    padding: 4px;
    flex-shrink: 0;
  }
  /* Right side: lang + reserve */
  .agd-menu__mobile-right {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  /* Mobile lang toggle — dark text */
  .agd-menu__lang--mobile .agd-menu__lang-row span {
    color: #4D4D4D;
    font-size: 14px;
  }
  .agd-menu__lang--mobile .agd-menu__lang-row svg {
    stroke: #4D4D4D;
  }
  .agd-menu__lang--mobile .agd-menu__lang-line {
    background: #4D4D4D;
  }
  .lang-dropdown--mobile .lang-dropdown__header,
  .lang-dropdown--mobile .lang-dropdown__item {
    font-size: 14px;
  }
  .agd-menu__reserve-btn--mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 18px;
    background: #000;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Body & nav */
  .agd-menu__body {
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: none;
    align-items: center;
  }
  .agd-menu__body::-webkit-scrollbar { display: none; }
  .agd-menu__nav-col {
    padding: 20px 0 0;
    flex: none;
    width: 320px;
    align-items: flex-start;
  }
  .agd-menu__link {
    width: 320px;
    max-width: 320px;
    height: 45px;
    padding: 0;
  }
  .agd-menu__link span { font-size: 14px; }
  .agd-menu__link svg { width: 20px; height: 20px; }

  /* Buttons */
  .agd-menu__ctas {
    flex-direction: column;
    gap: 12px;
    margin-top: 0;
    padding-top: 50px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    width: 320px;
    align-items: center;
  }
  .agd-menu__cta {
    width: 320px;
    min-width: unset;
    height: 44px;
  }

  /* Social */
  .agd-menu__social {
    justify-content: center;
    margin-top: 16px;
    padding: 0 0 30px;
    width: 320px;
  }

  /* Hide discovery panel (PC version) */
  .agd-menu__discovery { display: none; }
}

/* ── Mobile discovery cards (bottom of menu) ── */
.agd-menu__discovery-mobile {
  display: none; /* hidden on PC by default */
}
@media (max-width: 1023px) {
  .agd-menu__discovery-mobile {
    display: flex;
    flex-direction: column;
    gap: 50px;
    margin-top: 24px;
    padding: 50px 0 100px;
    border-top: 1px solid rgba(77,77,77,0.15);
    width: 100%;
    max-width: 550px;
  }
  .agd-menu__discovery-mobile .agd-menu__discovery-label {
    font-size: 14px;
    margin-bottom: 4px;
  }
  .agd-menu__discovery-mobile-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    width: 100%;
    max-width: 550px;
  }
  .agd-menu__discovery-mobile-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0;
    overflow: hidden;
    position: relative;
  }
  .agd-menu__discovery-mobile-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .agd-menu__discovery-mobile-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .agd-menu__discovery-mobile-name {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: #4D4D4D;
    line-height: 1.3;
  }
  .agd-menu__discovery-mobile-opening {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 12px;
    color: #FB7F65;
    line-height: 1;
  }
}

/* ── 6. STICKY CTA ── */

.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 12px 43px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(77,77,77,0.1);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  background: #000;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

/* ============================================================================
   7. S1 — HERO
   ============================================================================ */

.section-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 956px;
  max-height: 956px;
  background-color: var(--color-hero-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Hero video background */
.section-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Gradient overlay */
.section-hero__gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 18, 13, 0.15) 0%,
    rgba(20, 18, 13, 0.05) 50%,
    rgba(20, 18, 13, 0.72) 100%
  );
  z-index: 1;
}

.section-hero__nav {
  position: absolute;
  top: 55px;
  left: 25px;
  right: 25px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}
.section-hero__hamburger {
  background: none;
  border: none;
  padding: 0;
  z-index: 10;
  width: 40px;
  flex-shrink: 0;
}
.section-hero__nav-logo {
  flex-shrink: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.section-hero__nav-logo img {
  height: 30px;
  width: auto;
}
.section-hero__nav-spacer {
  width: 40px;
  flex-shrink: 0;
}
.section-hero__nav-reserve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 70px;
  height: 30px;
  background: #ffffff;
  color: #4D4D4D;
  border: none;
  border-radius: 50px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.section-hero__content {
  position: absolute;
  bottom: 270px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
  width: 407px;
}
.section-hero__logo-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 31px;
}
.section-hero__logo-image {
  width: 248px;
  height: auto;
}
.section-hero__tagline {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 400;
  color: #fff;
  text-align: center;
  line-height: 1.3;
}

.section-hero__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 169px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 260px;
  height: 50px;
  background: #fff;
  border: 1px solid var(--color-btn-border);
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-btn-hero-text);
  transition: all 0.3s ease;
  white-space: nowrap;
}
.section-hero__btn:hover {
  background: transparent;
  color: #fff;
}

/* ============================================================================
   8. S2 — CONCEPT
   ============================================================================ */

.section-concept {
  background: var(--color-bg);
  padding: 100px 25px 80px;
}

.section-concept__container {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}

.section-concept__text-block {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}
.section-concept__text-block .section__tagline {
  font-style: normal;
}

.section-concept__title-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.section-concept__video-container {
  width: 100%;
  height: 450px;
  overflow: hidden;
  position: relative;
}
.section-concept__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-concept__story {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.section-concept__story-intro {
  font-family: var(--font-body);
  font-size: 23px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.65;
  text-align: left;
}

.section-concept__story-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.section-concept__story-body p {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.65;
  text-align: left;
}

.section-concept__btn {
  width: 100%;
  height: 50px;
  background: var(--color-bg);
  border: 1px solid var(--color-btn-border);
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-btn-border);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}
.section-concept__btn:hover {
  background: var(--color-btn-border);
  color: #fff;
}

/* ============================================================================
   9. S3 — EXPERIENCE
   ============================================================================ */

.section-experience {
  background: var(--color-bg);
}

/* Banner */
.section-experience__banner {
  width: 100%;
  height: 750px;
  position: relative;
  overflow: hidden;
  background-color: var(--color-hero-bg);
}
.section-experience__banner-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.section-experience__banner-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 368px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
  z-index: 1;
}

.section-experience__banner-overlay {
  position: absolute;
  bottom: 100px;
  left: 50px;
  width: 340px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.section-experience__banner-title-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.section-experience__banner-overlay .section__label { color: #fff; }
.section-experience__banner-overlay .section__heading { color: #fff; }
.section-experience__banner-overlay .section__tagline { color: #fff; text-align: center; }

/* Subsections */
.section-experience__subsection {
  padding: 80px 0 0;
}
.section-experience__subsection-text {
  padding: 0 25px;
  max-width: 440px;
  margin: 0 auto 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.section-experience__subsection-title {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.09;
}
.section-experience__subsection-intro {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.3;
}
.section-experience__subsection-body {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.65;
}

.section-experience__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 390px;
  height: 50px;
  margin: 50px auto 80px;
  background: var(--color-bg);
  border: 1px solid var(--color-btn-border);
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-btn-border);
  transition: all 0.3s ease;
}
.section-experience__btn:hover {
  background: var(--color-btn-border);
  color: #fff;
}

/* Gallery (horizontal scroll — 320px centered, peek adjacent) */
.gallery {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 calc(50% - 160px);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  scroll-snap-type: x mandatory;
}
.gallery::-webkit-scrollbar { height: 4px; }
.gallery::-webkit-scrollbar-track { background: transparent; }
.gallery::-webkit-scrollbar-thumb { background: rgba(77,77,77,0.2); border-radius: 2px; }
.gallery.is-dragging { cursor: grabbing; }

.gallery__item {
  flex: 0 0 320px;
  width: 320px;
  height: 250px;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  scroll-snap-align: center;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================================
   10. S4 — PROPERTY OVERVIEW
   ============================================================================ */

.section-property {
  background: var(--color-bg);
  padding: 100px 25px 80px;
}

.section-property__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
}

.section-property__description {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.65;
  text-align: center;
  max-width: 390px;
  margin: 0 auto 50px;
}

.section-property__rooms {
  max-width: 390px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.section-property__room-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.section-property__room-image {
  width: 100%;
  max-width: 390px;
  height: 480px;
  overflow: hidden;
  border-radius: 0;
}
.section-property__room-image picture {
  display: block;
  width: 100%;
  height: 100%;
}
.section-property__room-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-property__room-name {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-text);
  text-align: center;
  line-height: 1.65;
}

.section-property__room-link {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-btn-border);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.section-property__room-link:hover {
  color: var(--color-btn-border);
  opacity: 0.8;
}

/* Room Thumbnails */
.section-property__room-thumbnails {
  display: flex;
  gap: 18px;
  width: 100%;
  max-width: 390px;
}
.section-property__thumb {
  flex: 1;
  height: 100px;
  overflow: hidden;
  border-radius: 0;
}
.section-property__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-property__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 390px;
  height: 50px;
  margin: 80px auto 0;
  background: var(--color-bg);
  border: 1px solid var(--color-btn-border);
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-btn-border);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.section-property__btn:hover {
  background: var(--color-btn-border);
  color: #fff;
}

/* ============================================================================
   11. S5 — USAGE STYLE
   ============================================================================ */

.section-usage {
  background: var(--color-bg);
}

/* Banner */
.section-usage__banner {
  width: 100%;
  height: 320px;
  position: relative;
  overflow: hidden;
  background: var(--color-hero-bg);
  background-image: url('../images/space/Usage_Style_banner.webp');
  background-size: cover;
  background-position: center;
}
.section-usage__banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 1;
}
.section-usage__banner-overlay {
  position: absolute;
  top: 50%;
  left: 50px;
  transform: translateY(-50%);
  width: 340px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.section-usage__banner-overlay .section__label { color: #fff; }
.section-usage__banner-overlay .section__heading { color: #fff; }

/* Content */
.section-usage__content {
  padding: 50px 25px 80px;
  max-width: 390px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Subsections */
.section-usage__membership,
.section-usage__selection,
.section-usage__reservation {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.section-usage__membership h3,
.section-usage__selection h3,
.section-usage__reservation h3 {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.36;
}
.section-usage__membership p,
.section-usage__selection p,
.section-usage__reservation p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.75;
}

.section-usage__note {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-accent);
  line-height: 1.75;
}

/* Airbnb badge */
.section-usage__airbnb-badge {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 15px;
}
.section-usage__airbnb-row1 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.section-usage__airbnb-rating {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.36;
}
.section-usage__airbnb-stars-img {
  width: 131px;
  height: 24px;
}
.section-usage__airbnb-row2 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.section-usage__airbnb-text {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: underline;
}
.section-usage__airbnb-logo { width: 61px; height: auto; }

.section-usage__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  background: var(--color-bg);
  border: 1px solid var(--color-btn-border);
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-btn-border);
  transition: all 0.3s ease;
}
.section-usage__btn:hover {
  background: var(--color-btn-border);
  color: #fff;
}

/* ============================================================================
   12. S6 — SERVICE
   ============================================================================ */

.section-service {
  background: var(--color-bg);
}

.section-service__banner {
  width: 100%;
  height: 320px;
  position: relative;
  overflow: hidden;
  background: var(--color-hero-bg);
  background-image: url('../images/space/Service_banner.webp');
  background-size: cover;
  background-position: center;
}
.section-service__banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 1;
}
.section-service__banner-overlay {
  position: absolute;
  top: 50%;
  left: 50px;
  transform: translateY(-50%);
  width: 340px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.section-service__banner-overlay .section__label { color: #fff; }
.section-service__banner-overlay .section__heading { color: #fff; line-height: 1.08; }

/* Service cards */
.section-service__cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  padding: 50px 25px 0;
  max-width: 440px;
  margin: 0 auto;
}

.section-service__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 400px;
}
.section-service__card-icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.section-service__card h3 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  line-height: 1.56;
}
.section-service__card p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  text-align: center;
  line-height: 1.5;
}

.section-service__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 390px;
  height: 50px;
  margin: 50px auto 80px;
  background: var(--color-bg);
  border: 1px solid var(--color-btn-border);
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-btn-border);
  transition: all 0.3s ease;
}
.section-service__btn:hover {
  background: var(--color-btn-border);
  color: #fff;
}

/* ============================================================================
   13. S7 — PRESS & MEDIA
   ============================================================================ */

.section-press {
  background: var(--color-bg);
  padding: 100px 25px 80px;
}

.section-press__header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
}

.section-press__description {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.65;
  text-align: center;
  max-width: 396px;
  margin: 0 auto 50px;
}

.section-press__logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 390px;
  margin: 0 auto 50px;
}
.section-press__logo-row {
  display: flex;
  gap: 10px;
}
.section-press__logo-item {
  height: 80px;
  border: 1px solid #B3B3B3;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  flex-shrink: 0;
}
.section-press__logo-item img {
  object-fit: contain;
}
/* Row 1: kyushu 140, cq 90, expedia 140 = 370 + 20 gap = 390 */
.section-press__logo-item--kyushu { width: 140px; }
.section-press__logo-item--kyushu img { width: 106px; height: 32px; }
.section-press__logo-item--cq { width: 90px; }
.section-press__logo-item--cq img { max-width: 64px; max-height: 30px; }
.section-press__logo-item--expedia { width: 140px; }
.section-press__logo-item--expedia img { width: 97px; height: 30px; }
/* Row 2: nakasu 290, bond 90 = 380 + 10 gap = 390 */
.section-press__logo-item--nakasu { width: 290px; }
.section-press__logo-item--nakasu img { max-width: 192px; max-height: 30px; }
.section-press__logo-item--bond { width: 90px; }
.section-press__logo-item--bond img { width: 43px; height: 38px; }

.section-press__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 390px;
  height: 50px;
  margin: 0 auto;
  background: var(--color-bg);
  border: 1px solid var(--color-btn-border);
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-btn-border);
  transition: all 0.3s ease;
}
.section-press__btn:hover {
  background: var(--color-btn-border);
  color: #fff;
}

/* ============================================================================
   14. S8 — ACCESS
   ============================================================================ */

.section-access {
  background: var(--color-access-bg);
  padding: 100px 25px 0;
}

.section-access__header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
  max-width: 396px;
}

.section-access__description {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.65;
  text-align: center;
  max-width: 396px;
  margin-bottom: 40px;
}

/* Transport items */
.section-access__transport {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 396px;
  margin-bottom: 40px;
}

.section-access__transport-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.section-access__transport-item svg { flex-shrink: 0; }
.section-access__transport-item h3 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--color-label);
  text-align: center;
}
.section-access__transport-item p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.65;
  text-align: center;
}

/* Map */
.section-access__map {
  width: calc(100% + 50px);
  height: 600px;
  margin: 0 -25px;
  overflow: hidden;
  background: #e0ddd5;
}
.section-access__map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Address info */
.section-access__info {
  padding: 50px 0 80px;
  max-width: 329px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.section-access__address {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
.section-access__address img {
  flex-shrink: 0;
  margin-top: 5px;
}
.section-access__address p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.65;
}

/* Feature items: Riverside, Near the park, Airport, Drive */
.section-access__features {
  display: flex;
  flex-direction: column;
}
.section-access__feature-item {
  display: flex;
  align-items: center;
  gap: 22px;
  line-height: 2.125;
}
.section-access__feature-item img {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.section-access__feature-item span {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  line-height: 2.125;
}

.section-access__directions {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}
.section-access__link {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--color-text);
  line-height: 2.125;
  cursor: pointer;
}
.section-access__link--underline {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================================
   15. S9 — NEXT DESTINATION
   ============================================================================ */

.section-next {
  background: var(--color-bg);
  padding: 100px 25px 80px;
}

.section-next__header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 396px;
  margin: 0 auto 50px;
}

.section-next__cards {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 390px;
  margin: 0 auto;
}

.section-next__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.section-next__card-image {
  position: relative;
  width: 100%;
  max-width: 300px;
  height: 370px;
  overflow: hidden;
  border-radius: 0;
}
.section-next__coming-soon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 4px;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}
.section-next__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-next__card-name {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-text);
  text-align: center;
  line-height: 1.65;
}

.section-next__card-link {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-btn-border);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================================
   15.5. S9.5 — INSTAGRAM (PC + Laptop only; hidden on mobile)
   ============================================================================ */

.section-instagram { display: none; }

/* ============================================================================
   16. S10 — FOOTER
   ============================================================================ */

.section-footer {
  background: #fff;
  color: #4D4D4D;
  border-top: 1px solid rgba(0,0,0,0.2);
  padding: 99px 25px 100px;
}

.section-footer__top {
  margin-bottom: 30px;
}

.section-footer__logo-area {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 399px;
}

.section-footer__logo {
  height: 36px;
  width: auto;
}

.section-footer__social {
  display: flex;
  align-items: center;
  gap: 16px;
}
.section-footer__social a { display: flex; }
.section-footer__social svg { width: 32px; height: 32px; }

/* Contact */
.section-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 30px;
  padding-left: 6px;
}

.section-footer__address,
.section-footer__email {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
.section-footer__address svg,
.section-footer__email svg,
.section-footer__address img,
.section-footer__email img {
  flex-shrink: 0;
  margin-top: 3px;
}
.section-footer__address p,
.section-footer__email p {
  font-family: var(--font-body);
  font-size: 16px;
  color: #4D4D4D;
  line-height: 1.65;
}
.section-footer__email a { color: #4D4D4D; }

/* Airbnb badge */
.section-footer__airbnb-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 0 50px;
}
.section-footer__airbnb-row1 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.section-footer__airbnb-rating {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: #4D4D4D;
  line-height: 1.36;
}
.section-footer__airbnb-stars-img {
  width: 131px;
  height: 24px;
}
.section-footer__airbnb-row2 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.section-footer__airbnb-text {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: #4D4D4D;
  line-height: 1.36;
  text-decoration: underline;
}
.section-footer__airbnb-logo {
  width: 61px;
  height: 19px;
}

/* CTA Buttons */
.section-footer__ctas {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  margin-bottom: 50px;
  padding: 0 67px;
}

.section-footer__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 276px;
  height: 50px;
  border-radius: 50px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  transition: all 0.3s ease;
}
.section-footer__btn--solid {
  background: #000;
  color: #fff;
  border-radius: 50px;
}
.section-footer__btn--solid:hover {
  background: transparent;
  color: #4D4D4D;
  border: 1px solid #4D4D4D;
}
.section-footer__btn--outline {
  background: #fff;
  border: 1px solid #4D4D4D;
  color: #4D4D4D;
  border-radius: 50px;
}
.section-footer__btn--outline:hover {
  background: #4D4D4D;
  color: #fff;
}

/* Footer Navigation */
.section-footer__nav {
  display: flex;
  gap: 49px;
  margin-bottom: 50px;
}

/* Mobile: show 2-col nav, hide 4-col nav */
.section-footer__nav--pc {
  display: none;
}

.section-footer__nav--mb {
  display: flex;
  justify-content: center;
  gap: 49px;
}

.section-footer__nav-col ul {
  display: flex;
  flex-direction: column;
}
.section-footer__nav-col li a {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: #4D4D4D;
  line-height: 3.11;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}
.section-footer__nav-col li a:hover { opacity: 0.7; }

/* Footer Bottom */
.section-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-bottom: 70px;
}
.section-footer__bottom p {
  font-family: var(--font-body);
  font-size: 14px;
  color: #4D4D4D;
  line-height: 1.65;
  text-align: left;
}
.section-footer__bottom p:last-child { opacity: 0.7; }

/* ── Hover zoom effect on large images ── */
.gallery__item img,
.section-property__room-image img,
.section-property__thumb img,
.section-next__card-image img,
.section-access__map img {
  transition: transform 0.5s ease;
}
.gallery__item:hover img,
.section-property__room-image:hover img,
.section-property__thumb:hover img,
.section-next__card-image:hover img,
.section-access__map:hover img {
  transform: scale(1.08);
}

/* ── Toppage rooms — zoom on large image hover ── */
.toppage-rooms .section-property__room-image {
  overflow: hidden;
  cursor: pointer;
}
.toppage-rooms .section-property__room-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.toppage-rooms .section-property__room-image:hover img {
  transform: scale(1.06);
}
.section-service__banner {
  transition: background-size 0.5s ease;
  background-size: 100%;
}
.section-service__banner:hover {
  background-size: 108%;
}

/* ============================================================================
   17. RESPONSIVE — TABLET (768px+)
   ============================================================================ */

@media (min-width: 768px) {
  .section-hero::before {
    background-image: url('../images/toppage_old/agd_Fukuoka_riverside_PC_Hero.webp');
  }
  .section-hero__nav { width: auto; left: 25px; right: 25px; }
  .section-hero__content { width: 500px; }
  .section-hero__tagline { font-size: 40px; }

  .section-concept { padding: 120px 40px 100px; }
  .section-concept__container { max-width: 700px; }
  .section-concept__text-block { width: auto; max-width: 500px; }
  .section-concept__video-container { width: 100%; max-width: 600px; height: 500px; }
  .section-concept__story { width: auto; max-width: 600px; }
  .section-concept__btn { width: 100%; max-width: 500px; }

  .gallery { padding: 0 calc(50% - 180px); }
  .gallery__item { flex: 0 0 360px; width: 360px; height: 280px; }

  .section-property { padding: 120px 40px 100px; }
  .section-property__rooms { max-width: 700px; }
  .section-property__room-image { width: 100%; max-width: 600px; height: 500px; }

  .section-service__cards { max-width: 700px; gap: 40px 30px; }
  .section-service__card { max-width: 300px; }

  .section-access { padding: 120px 40px 0; }
  .section-access__map { width: calc(100% + 80px); margin: 0 -40px; }

  .section-next { padding: 120px 40px 100px; }
  .section-next__card-image { width: 100%; max-width: 600px; height: 500px; }

  .section-footer { padding: 100px 40px 100px; }
  .section-footer__nav { gap: 80px; }
}

/* ============================================================================
   18. RESPONSIVE — DESKTOP (1024px+)
   ============================================================================ */

@media (min-width: 1024px) {
  .section-hero { max-height: 100vh; min-height: 700px; }
  .section-hero__btn { width: 315px; }
  .section-hero__content { width: 600px; }
  .section-hero__tagline { font-size: 44px; }

  /* Concept: split layout */
  .section-concept { padding: 140px 60px 120px; }
  .section-concept__container {
    max-width: 1400px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px;
  }
  .section-concept__text-block { width: 480px; text-align: left; }
  .section-concept__text-block .section__label,
  .section-concept__text-block .section__heading,
  .section-concept__text-block .section__tagline { text-align: left; }
  .section-concept__video-container { width: 500px; height: 550px; }
  .section-concept__story { width: 100%; max-width: 800px; }

  /* Experience galleries: grid */
  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    overflow-x: visible;
    padding: 10px 25px;
    scroll-snap-type: none;
  }
  .gallery__item {
    flex: none;
    width: 100%;
    height: 250px;
    border-radius: 0;
    scroll-snap-align: none;
  }

  /* Property: 3-column grid */
  .section-property { padding: 140px 60px 120px; }
  .section-property__rooms {
    max-width: 1200px;
    flex-direction: row;
    gap: 30px;
  }
  .section-property__room-card { flex: 1; }
  .section-property__room-image { width: 100%; height: 400px; }

  /* Service: 2x2 grid */
  .section-service__cards {
    max-width: 900px;
    gap: 60px 40px;
  }
  .section-service__card { max-width: 380px; }

  /* Access: split layout */
  .section-access { padding: 140px 60px 0; }

  /* Next: side by side */
  .section-next { padding: 140px 60px 120px; }
  .section-next__cards {
    flex-direction: row;
    max-width: 1200px;
    gap: 40px;
  }
  .section-next__card { flex: 1; }
  .section-next__card-image { width: 100%; height: 450px; }

  /* Footer: 3-column nav */
  .section-footer { padding: 100px 60px 100px; }
  .section-footer__ctas { flex-direction: row; gap: 20px; padding: 0; justify-content: center; }
  .section-footer__nav { gap: 100px; justify-content: center; }
}

/* ============================================================================
   19. MAX WIDTH CONTAINER (1400px+)
   ============================================================================ */

@media (min-width: 1400px) {
  .section-concept__container { max-width: 1400px; }
  .section-property__rooms { max-width: 1400px; }
  .section-next__cards { max-width: 1400px; }
}

/* ============================================================================
   20. PC NAV — Hidden on mobile, base styles
   ============================================================================ */

.pc-nav {
  display: none;
}

.section-experience__pc-image {
  display: none;
}

.section-usage__pc-right {
  display: none;
}

/* ============================================================================
   21. RESPONSIVE — PC / LAPTOP (1280px+)
   ============================================================================ */

@media (min-width: 1280px) {

  /* ── PC NAV — Simplified header: hamburger left / logo center / lang + reserve right ── */
  .section-hero__nav--mobile { display: none; }
  .pc-nav {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    z-index: 100;
    align-items: center;
    padding: 0 60px;
    background: transparent;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, height 0.3s ease, transform 0.35s ease;
  }
  /* Hidden state — slide up off screen */
  .pc-nav.nav-hidden {
    transform: translateY(-100%);
  }
  /* Scrolled state — solid white bg + dark text per Figma, compact height */
  .pc-nav.is-scrolled {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    height: 70px;
  }
  /* Hamburger icon — left */
  .pc-nav__hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  .pc-nav__hamburger:hover { opacity: 0.75; }
  .pc-nav__hamburger svg,
  .pc-nav__hamburger img { display: block; width: 40px; height: 40px; transition: content 0.3s ease; }
  /* Swap hamburger icon to dark variant when scrolled */
  .pc-nav.is-scrolled .pc-nav__hamburger img {
    content: url('../images/shared/icons/menu_PC_dark.svg');
  }
  /* Logo centered absolutely — side-content width can't shift it */
  .pc-nav__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }
  .pc-nav__logo {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
  }
  .pc-nav__logo img {
    width: 180px;
    height: 40px;
    object-fit: contain;
    transition: width 0.3s ease, height 0.3s ease;
  }
  /* Swap logo to dark variant + shrink proportionally (h=30px) when scrolled */
  .pc-nav.is-scrolled .pc-nav__logo img {
    content: url('../images/shared/logo/AGD_logo_black.svg');
    width: 135px;
    height: 30px;
  }
  /* Toppage — hide the header logo in the initial transparent state (hero shows it).
     Logo re-appears (in dark) once the page is scrolled. */
  .pc-nav--toppage .pc-nav__logo {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .pc-nav--toppage.is-scrolled .pc-nav__logo {
    opacity: 1;
    visibility: visible;
  }
  /* Swap English text / line / caret color when scrolled */
  .pc-nav.is-scrolled .pc-nav__lang-toggle span { color: #4D4D4D; }
  .pc-nav.is-scrolled .pc-nav__lang-toggle svg { stroke: #4D4D4D; }
  .pc-nav.is-scrolled .pc-nav__lang-line { background: #4D4D4D; }
  /* Invert Reserve button when scrolled: black bg + white text */
  .pc-nav.is-scrolled .pc-nav__reserve-btn {
    background: #000;
    color: #fff;
    border: 1px solid #000;
  }
  .pc-nav.is-scrolled .pc-nav__reserve-btn:hover {
    background: #fff;
    color: #000;
  }
  .pc-nav__links {
    display: flex;
    gap: 50px;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 36px;
  }
  .pc-nav__links a,
  .pc-nav__links .pc-nav__dropdown-link {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    line-height: 1.65;
    white-space: nowrap;
    transition: opacity 0.3s ease;
  }
  .pc-nav__links a:hover { opacity: 0.7; }
  .pc-nav__links a.pc-nav__active {
    border-bottom: 1px solid #fff;
    padding-bottom: 2px;
  }
  .pc-nav__dropdown-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
  }
  .pc-nav__dropdown-link svg {
    width: 12px;
    height: 8px;
    margin-top: 2px;
  }
  .pc-nav__right {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-left: auto;
  }
  .pc-nav__lang {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    width: 79px;
  }
  .pc-nav__lang-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }
  .pc-nav__lang-toggle span {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: #fff;
  }
  .pc-nav__lang-line {
    width: 100%;
    height: 1px;
    background: #fff;
  }
  .pc-nav__reserve-btn {
    width: 110px;
    height: 40px;
    background: #fff;
    border: none;
    border-radius: 50px;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-btn-border);
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .pc-nav__reserve-btn:hover {
    background: var(--color-btn-border);
    color: #fff;
  }

  /* ── HERO ── */
  .section-hero {
    max-height: none;
    min-height: 990px;
    height: 100vh;
    background-image: url('../images/toppage_old/hero_pc.webp');
    background-size: cover;
    background-position: center;
    justify-content: center;
    align-items: center;
    padding-top: 0;
  }
  .section-hero__video {
    display: none;
  }
  .section-hero__content {
    position: relative;
    bottom: auto;
    left: auto;
    top: auto;
    transform: translateY(0);
    width: 793px;
    text-align: center;
    z-index: 10;
  }
  .section-hero__logo-image {
    width: 350px;
  }
  .section-hero__tagline {
    font-size: 46px;
  }
  .section-hero__logo-group {
    gap: 20px;
  }
  .section-hero__btn {
    position: relative;
    bottom: auto;
    left: auto;
    transform: translateY(0);
    width: 330px;
    height: 60px;
    margin: 30px auto 0;
    font-size: 18px;
    border: 1px solid #fff;
    color: #4D4D4D;
    background: #fff;
    z-index: 10;
    transition: all 0.3s ease;
  }
  .section-hero__btn:hover {
    background: #000;
    color: #fff;
    border-color: #000;
  }

  /* ── CONCEPT ── */
  .section-concept {
    padding: 196px 0 150px;
  }
  .section-concept__container {
    max-width: 1920px;
    padding: 0 240px;
    display: grid;
    grid-template-columns: 640px 1fr;
    grid-template-rows: auto auto auto;
    gap: 50px 153px;
    align-items: start;
  }
  .section-concept__text-block {
    max-width: none;
    text-align: left;
    grid-column: 1;
    grid-row: 1;
  }
  .section-concept__text-block .section__label {
    text-align: left;
    font-size: 16px;
    letter-spacing: 4px;
    line-height: 1.36;
  }
  .section-concept__text-block .section__heading {
    text-align: left;
    font-size: 36px;
  }
  .section-concept__text-block .section__tagline {
    text-align: left;
    font-size: 26px;
  }
  .section-concept__video-container {
    grid-column: 2;
    grid-row: 1 / 4;
    width: 100%;
    max-width: 706px;
    height: 850px;
  }
  .section-concept__story {
    grid-column: 1;
    grid-row: 2;
    width: 582px;
  }
  .section-concept__story-intro {
    font-size: 28px;
  }
  .section-concept__btn {
    grid-column: 1;
    grid-row: 3;
    width: 350px;
    height: 60px;
    max-width: none;
  }

  /* ── EXPERIENCE BANNER ── */
  .section-experience__banner {
    height: 750px;
    background-image: url('../images/toppage_old/experience_banner_pc.webp');
    background-size: cover;
    background-position: center;
  }
  .section-experience__banner-video {
    display: none;
  }
  .section-experience__banner-overlay {
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    text-align: center;
    align-items: center;
  }
  .section-experience__banner-overlay .section__label {
    font-size: 16px;
    letter-spacing: 4px;
  }
  .section-experience__banner-overlay .section__heading {
    font-size: 36px;
  }
  .section-experience__banner-overlay .section__tagline {
    font-size: 26px;
  }

  /* ── EXPERIENCE SUBSECTIONS ── */
  .section-experience__subsection {
    padding: 0;
    max-width: 1196px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 50px;
    row-gap: 0;
  }
  .section-experience__subsection + .section-experience__subsection {
    margin-top: 101px;
  }
  .section-experience__banner + .section-experience__subsection {
    margin-top: 100px;
  }
  .section-experience__pc-image {
    display: block;
    width: 582px;
    min-width: 582px;
    height: 482px;
    position: relative;
    flex-shrink: 0;
  }
  .section-experience__pc-image > img,
  .section-experience__pc-image-fallback {
    display: none !important;
  }

  /* PC Slideshow */
  .pc-slideshow {
    position: relative;
    width: 582px;
    height: 453px;
    overflow: hidden;
  }
  .pc-slideshow__track {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .pc-slideshow__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1200ms ease-in-out;
    pointer-events: none;
  }
  .pc-slideshow__slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
  }
  .pc-slideshow__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .pc-slideshow__slide--placeholder {
    background: linear-gradient(135deg, #efe7dc 0%, #d9cdbe 100%);
  }
  .pc-slideshow__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 16px;
    color: #4D4D4D;
    letter-spacing: 4px;
    text-transform: uppercase;
  }
  .pc-slideshow__dots {
    position: absolute;
    right: 16px;
    bottom: 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    z-index: 2;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 50px;
    backdrop-filter: blur(4px);
  }
  .pc-slideshow__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease;
  }
  .pc-slideshow__dot.is-active {
    background: #ffffff;
    width: 20px;
    border-radius: 4px;
  }
  .pc-slideshow__dot:hover {
    background: rgba(255, 255, 255, 0.85);
  }
  .section-experience__pc-image-caption {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
  }
  .section-experience__pc-image-caption span {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-label);
  }
  .section-experience__subsection-text {
    max-width: 563px;
    padding: 0;
    margin: 0;
    height: 482px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: auto;
  }
  .section-experience__subsection-title {
    font-size: 36px;
    line-height: 1.26;
  }
  .section-experience__subsection-intro {
    font-size: 26px;
  }
  .gallery {
    display: none;
  }
  .section-experience__btn {
    display: flex;
    flex: 0 0 100%;
    width: 350px;
    height: 60px;
    margin: 150px auto 100px;
  }

  /* ── PROPERTY OVERVIEW (toppage new design) ── */
  .toppage-rooms {
    background: var(--color-access-bg);
    padding: 200px 0 200px;
  }
  .toppage-rooms .section-property__header {
    max-width: 935px;
    margin: 0 auto;
    gap: 5px;
  }
  .toppage-rooms .section-property__header .section__label {
    font-size: 16px;
    letter-spacing: 4px;
  }
  .toppage-rooms .section-property__header .section__heading {
    font-size: 36px;
    white-space: normal;
  }
  .toppage-rooms .section-property__header .section__heading .br-mobile-only {
    display: none;
  }
  .toppage-rooms .section-property__description {
    font-size: 14px;
    max-width: 935px;
    margin: 20px auto 0;
  }
  /* Rooms: vertical stack */
  .toppage-rooms .section-property__rooms {
    flex-direction: column;
    max-width: none;
    gap: 0;
    margin: 0;
    padding: 0;
    width: 100%;
  }
  .toppage-rooms .section-property__room-card {
    flex: none;
    width: 100%;
    max-width: none;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0 0 100px;
  }
  .toppage-rooms .section-property__room-card:first-child {
    padding-top: 100px;
  }
  /* Main image: 1200×600px — all 3 rooms same height */
  .toppage-rooms .section-property__room-image {
    width: 1200px;
    max-width: 100%;
    height: 600px;
  }
  /* Thumbnails: 4 in a row, 285×200px, 20px gap */
  .toppage-rooms .section-property__room-thumbnails {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
    width: 1200px;
    max-width: 100%;
    margin-top: 20px;
  }
  .toppage-rooms .section-property__thumb {
    flex: 0 0 285px;
    width: 285px;
    height: 200px;
  }
  /* Room name & link: centered */
  .toppage-rooms .section-property__room-name {
    font-size: 20px;
    text-align: center;
    width: 1200px;
    max-width: 100%;
    margin-top: 30px;
  }
  .toppage-rooms .section-property__room-link {
    display: block;
    text-align: center;
    margin-top: 12px;
  }
  /* Button */
  .toppage-rooms .section-property__btn {
    width: 350px;
    height: 60px;
    max-width: none;
    margin: 0 auto;
    background: var(--color-access-bg);
  }
  .toppage-rooms .section-property__btn:hover {
    background: var(--color-btn-border);
  }

  /* ── USAGE STYLE ── */
  .section-usage__banner {
    height: 750px;
    background-image: url('../images/toppage_old/usage_style_banner_pc.webp');
  }
  .section-usage__banner-overlay {
    left: 50%;
    top: 43%;
    transform: translate(-50%, -50%);
    width: auto;
    text-align: center;
    align-items: center;
  }
  .section-usage__banner-overlay .section__label {
    font-size: 16px;
    letter-spacing: 4px;
  }
  .section-usage__banner-overlay .section__heading {
    font-size: 36px;
  }
  .section-usage__banner::before {
    background: rgba(0,0,0,0.2);
  }
  .section-usage {
    position: relative;
  }
  .section-usage__content {
    max-width: 524px;
    padding: 50px 0 80px;
    margin: 0 0 0 485px;
  }
  .section-usage__btn--mobile {
    display: none;
  }
  .section-usage__airbnb-badge {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .section-usage__pc-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    position: absolute;
    right: auto;
    left: 1112px;
    top: 866px;
  }
  .section-usage__pc-logo {
    width: 348px;
    height: auto;
  }
  .section-usage__btn--pc {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 350px;
    height: 60px;
    background: var(--color-btn-border);
    border: 1px solid #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    transition: all 0.3s ease;
    border-radius: 50px;
  }
  .section-usage__btn--pc:hover {
    background: #000;
    color: #fff;
    border-color: #000;
  }

  /* ── SERVICE ── */
  .section-service__banner {
    width: calc(100% - 480px);
    margin-left: 240px;
    height: 820px;
    position: relative;
    overflow: hidden;
    background-image: url('../images/toppage_old/service_banner_pc.webp');
    background-size: cover;
    background-position: center;
  }
  .section-service__banner::before {
    background: rgba(0,0,0,0.4);
  }
  .section-service__banner-overlay {
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%);
    width: auto;
    text-align: center;
    align-items: center;
  }
  .section-service__banner-overlay .section__label {
    font-size: 16px;
    letter-spacing: 4px;
  }
  .section-service__banner-overlay .section__heading {
    font-size: 36px;
    white-space: nowrap;
  }
  .section-service__cards {
    max-width: 1440px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 50px;
    padding: 50px 60px 0;
    flex-wrap: nowrap;
  }
  .section-service__card {
    flex: 0 0 328px;
    width: 328px;
    max-width: 328px;
    gap: 20px;
  }
  .section-service__card-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
  }
  .section-service__card-icon img {
    width: 36px;
    height: 36px;
  }
  .section-service__card h3 {
    font-size: 22px;
  }
  .section-service__btn {
    width: 350px;
    height: 60px;
    max-width: none;
    margin: 50px auto 200px;
  }

  /* ── ACCESS ── */
  .section-access {
    padding: 200px 0 0;
  }
  .section-access__header {
    max-width: none;
    margin: 0 auto 30px;
    align-items: center;
  }
  .section-access__header .section__label {
    font-size: 16px;
    letter-spacing: 4px;
  }
  .section-access__header .section__heading {
    font-size: 36px;
    white-space: nowrap;
  }
  .section-access__header .section__heading .br-mobile-only {
    display: none;
  }
  .section-access__description {
    font-size: 14px;
    max-width: 935px;
    margin: 0 auto 50px;
  }
  .section-access__transport {
    flex-direction: row;
    gap: 30px;
    max-width: 872px;
    margin: 0 auto 50px;
  }
  .section-access__transport-item {
    flex: 1;
    gap: 15px;
  }
  .section-access__map {
    width: 1440px;
    max-width: calc(100% - 480px);
    height: 600px;
    margin: 0 auto;
  }
  .section-access__info {
    max-width: 1440px;
    padding: 50px 0 200px;
    margin: 0 auto;
    flex-direction: row;
    gap: 60px;
    justify-content: center;
    align-items: flex-start;
    width: calc(100% - 480px);
  }
  .section-access__directions {
    flex-direction: column;
    gap: 0;
  }
  .section-access__info .section-access__link {
    font-size: 14px;
  }

  /* ── NEXT DESTINATION ── */
  .section-next {
    padding: 200px 0 0;
  }
  .section-next__header {
    max-width: none;
    align-items: center;
  }
  .section-next__header .section__label {
    font-size: 16px;
    letter-spacing: 4px;
  }
  .section-next__header .section__heading {
    font-size: 36px;
  }
  .section-next__cards {
    flex-direction: row;
    gap: 50px;
    max-width: 900px;
    justify-content: center;
  }
  .section-next__card {
    flex: 0 0 425px;
    gap: 30px;
  }
  .section-next__card-image {
    max-width: 425px;
    height: 523px;
  }
  .section-next__coming-soon {
    font-size: 35px;
  }
  .section-next__card-name {
    font-size: 22px;
  }

  /* ── FOOTER ── */
  .section-footer {
    padding: 0 100px;
    position: relative;
    min-height: 669px;   /* shortened by 67px (was 736) — symmetric padding around nav block */
  }
  .section-footer__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1720px;
    margin: 0;
    padding-top: 99px;
  }
  .section-footer__logo-area {
    max-width: none;
    flex-direction: column;
    gap: 0;
  }
  .section-footer__logo {
    height: 50px;
    width: 225px;
  }
  .section-footer__social {
    position: absolute;
    top: 99px;
    right: 100px;
    gap: 25px;
  }
  .section-footer__social a img,
  .section-footer__social a svg {
    width: 50px;
    height: 50px;
  }

  /* Airbnb badge – sits between logo and social at y:109 */
  .section-footer__airbnb-badge {
    position: absolute;
    top: 109px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin: 0;
    white-space: nowrap;
  }

  /* Footer divider lines */
  .section-footer::before {
    content: '';
    position: absolute;
    left: 100px;
    right: 100px;
    top: 206px;
    height: 1px;
    background: rgba(0,0,0,0.2);
    opacity: 1;
  }
  .section-footer::after {
    content: '';
    position: absolute;
    left: 100px;
    right: 100px;
    top: 370px;
    height: 1px;
    background: rgba(0,0,0,0.2);
    opacity: 1;
  }

  /* Nav – PC: show 4-col, hide 2-col mobile */
  .section-footer__nav--mb {
    display: none;
  }

  .section-footer__nav--pc {
    position: absolute;
    top: 238px;
    left: 100px;
    display: flex;
    flex-direction: row;
    gap: 40px;
    margin: 0;
    padding: 0;
  }
  .section-footer__nav-col {
    width: auto;
    flex-shrink: 0;
  }
  .section-footer__nav-col ul { gap: 0; }
  .section-footer__nav-col li a {
    font-size: 18px;
    line-height: 3.11;
    font-weight: 600;
  }

  /* CTA buttons – vertically centered with the 2-row nav text block.
     Nav top=238, nav bottom≈338 (2 lines × ~50). Center=288.
     Button height=60, so top = 288 − 30 = 258. */
  .section-footer__ctas {
    position: absolute;
    top: 258px;
    right: 100px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 0;
    margin: 0;
  }
  .section-footer__btn {
    width: 276px;
    height: 60px;
    border-radius: 50px;
  }

  /* Contact – shifted up 67px to match the new bottom-divider position */
  .section-footer__contact {
    position: absolute;
    top: 420px;
    left: 100px;
    right: 100px;
    flex-direction: row;
    gap: 36px;
    padding: 0;
    margin: 0;
  }

  /* Copyright – shifted up 67px in sync with Contact */
  .section-footer__bottom {
    position: absolute;
    top: 502px;
    left: 100px;
    margin: 0;
    padding: 0;
  }

  /* Hide sticky CTA on desktop */
  .sticky-cta { display: none !important; }

  /* ── INSTAGRAM — PC (1920 Figma spec) ── */
  .section-instagram {
    display: block;
    background: #fff;
    padding: 200px 0 200px;
    position: relative;
  }
  .section-instagram__title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 0 auto 43px;
    width: fit-content;
    color: #4D4D4D;
    text-decoration: none;
    transition: opacity 0.3s ease;
  }
  .section-instagram__title:hover { opacity: 0.7; }
  .section-instagram__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }
  .section-instagram__title span {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 36px;
    line-height: 1.3;
    color: #4D4D4D;
  }
  .section-instagram__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2px;
    max-width: 1440px;
    margin: 0 auto;
    aspect-ratio: 1440 / 575;
  }
  .section-instagram__item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: block;
    transition: opacity 0.3s ease;
  }
  .section-instagram__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
  }
  .section-instagram__item:hover { opacity: 0.85; }
  .section-instagram__item:hover img { transform: scale(1.05); }
  .section-instagram__btn {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 15px;
    width: 350px;
    height: 60px;
    padding: 0 20px;
    margin: 60px auto 0;
    background: #fff;
    border: 1px solid #4D4D4D;
    border-radius: 50px;
    color: #4D4D4D;
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  .section-instagram__btn svg { flex-shrink: 0; }
  .section-instagram__btn svg path { transition: stroke 0.3s ease; }
  .section-instagram__btn:hover {
    background: #4D4D4D;
    color: #fff;
  }
  .section-instagram__btn:hover svg path { stroke: #fff; }
}

/* ============================================================================
   22. RESPONSIVE — LAPTOP (1280px – 1599px)
   Overrides PC (1920px Figma) values so layout fits common laptop widths
   (1366, 1440, 1536, 1600). Does NOT affect mobile (<1280px) or desktop
   (>=1600px) ranges.
   ============================================================================ */

@media (min-width: 1280px) and (max-width: 1599px) {

  /* ── PC NAV ── */
  .pc-nav {
    padding: 0 60px;
    height: 80px;
  }
  /* On laptop, shrink the nav to 70px in the scrolled (white) state */
  .pc-nav.is-scrolled { height: 70px; }
  .pc-nav__links { gap: 32px; }
  .pc-nav__right { gap: 24px; }
  .pc-nav__logo img { width: 150px; height: 34px; }

  /* ── HERO — fit exactly 1 viewport ── */
  .section-hero {
    min-height: 0;
    height: 100vh;
    max-height: 100vh;
    padding-top: 0;
  }
  .section-hero__content {
    width: auto;
    max-width: 700px;
    transform: none;
  }
  .section-hero__logo-image { width: 280px; }
  .section-hero__tagline { font-size: 46px; }
  .section-hero__logo-group { gap: 16px; }
  .section-hero__btn {
    width: 280px;
    height: 54px;
    margin-top: 24px;
    font-size: 18px;
    transform: none;
  }

  /* ── CONCEPT ── */
  .section-concept { padding: 140px 0 120px; }
  .section-concept__container {
    padding: 0 40px;
    grid-template-columns: 500px 570px;
    justify-content: center;
    column-gap: 100px;
    row-gap: 40px;
  }
  .section-concept__text-block .section__label { font-size: 16px; letter-spacing: 4px; }
  .section-concept__text-block .section__heading { font-size: 36px; }
  .section-concept__text-block .section__tagline { font-size: 22px; }
  .section-concept__video-container {
    width: 570px;
    max-width: 570px;
    height: 750px;
  }
  .section-concept__story { width: 500px; }
  .section-concept__story-intro { font-size: 22px; }

  /* ── EXPERIENCE ── */
  .section-experience__banner { height: 600px; }
  .section-experience__banner-overlay { bottom: 80px; }
  .section-experience__banner-overlay .section__label { font-size: 16px; letter-spacing: 4px; }
  .section-experience__banner-overlay .section__heading { font-size: 36px; }
  .section-experience__banner-overlay .section__tagline { font-size: 22px; }

  .section-experience__subsection {
    max-width: 1100px;
    padding: 0 20px;
    gap: 40px;
    align-items: flex-start;
  }
  .section-experience__subsection + .section-experience__subsection {
    margin-top: 50px;
  }
  .section-experience__banner + .section-experience__subsection {
    margin-top: 100px;
  }
  .section-experience__pc-image {
    width: 480px;
    min-width: 480px;
    height: 420px;
    flex-shrink: 0;
  }
  .section-experience__pc-image img {
    width: 480px;
    height: 390px;
  }
  .pc-slideshow {
    width: 480px;
    height: 390px;
  }
  .section-experience__subsection-text {
    max-width: 460px;
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    justify-content: flex-start;
    align-self: flex-start;
  }
  .section-experience__subsection-title { font-size: 36px; }
  .section-experience__subsection-intro { font-size: 22px; }
  .section-experience__btn { margin: 5px auto 100px; }

  /* ── PROPERTY OVERVIEW ── */
  .section-property { padding: 100px 80px 100px; }
  .section-property__header .section__label { font-size: 16px; letter-spacing: 4px; }
  .section-property__header .section__heading { font-size: 36px; }
  .section-property__description { font-size: 18px; margin-bottom: 50px; }
  .section-property__rooms { gap: 24px; }
  .section-property__room-card { max-width: none; gap: 24px; }
  .section-property__room-image { max-width: none; height: 480px; }
  .section-property__room-thumbnails { max-width: none; gap: 16px; }
  .section-property__thumb { height: 96px; }
  .section-property__btn { margin: 80px auto 0; }

  /* ── TOPPAGE ROOMS (laptop: 1000px wide content block) ── */
  .toppage-rooms .section-property__room-image {
    width: 1000px;
    max-width: 100%;
    height: 500px;
  }
  .toppage-rooms .section-property__room-thumbnails {
    width: 1000px;
    max-width: 100%;
  }
  .toppage-rooms .section-property__thumb {
    flex: 0 0 235px;
    width: 235px;
    height: 167px;
  }
  .toppage-rooms .section-property__room-name {
    width: 1000px;
    max-width: 100%;
  }
  .toppage-rooms .section-property__header {
    max-width: 780px;
  }
  .toppage-rooms .section-property__description {
    max-width: 780px;
  }

  /* ── USAGE STYLE ── */
  .section-usage__banner { height: 600px; }
  .section-usage__banner-overlay .section__label { font-size: 16px; letter-spacing: 4px; }
  .section-usage__banner-overlay .section__heading { font-size: 36px; }
  .section-usage__content {
    max-width: 480px;
    margin: 0 0 0 360px;
  }
  .section-usage__pc-right { left: 900px; top: 720px; }
  .section-usage__pc-logo { width: 300px; }

  /* ── SERVICE ── */
  .section-service__banner {
    width: calc(100% - 160px);
    margin-left: 80px;
    height: 640px;
  }
  .section-service__banner-overlay .section__label { font-size: 16px; letter-spacing: 4px; }
  .section-service__banner-overlay .section__heading { font-size: 36px; }
  .section-service__cards {
    padding: 50px 80px 0;
    gap: 30px;
  }
  .section-service__card {
    flex: 0 0 260px;
    width: 260px;
    max-width: 260px;
  }
  .section-service__btn { margin: 50px auto 100px; }

  /* ── ACCESS ── */
  .section-access { padding: 100px 0 0; }
  .section-access__header .section__label { font-size: 16px; letter-spacing: 4px; }
  .section-access__header .section__heading { font-size: 36px; }
  .section-access__transport { max-width: 800px; }
  .section-access__map {
    max-width: calc(100% - 160px);
    height: 500px;
  }
  .section-access__info {
    width: calc(100% - 160px);
    gap: 40px;
    padding: 50px 0 100px;
  }

  /* ── NEXT DESTINATION ── */
  .section-next { padding: 100px 0 0; }
  .section-next__header .section__label { font-size: 16px; letter-spacing: 4px; }
  .section-next__header .section__heading { font-size: 36px; }
  .section-next__cards { max-width: 820px; gap: 40px; }
  .section-next__card { flex: 0 0 390px; }
  .section-next__card-image { max-width: 390px; height: 480px; }

  /* ── FOOTER ── */
  .section-footer { padding: 0 60px; min-height: 653px; }
  .section-footer__social { right: 60px; gap: 20px; }
  .section-footer__social a img,
  .section-footer__social a svg { width: 44px; height: 44px; }
  .section-footer__logo { height: 44px; width: 200px; }

  .section-footer::before,
  .section-footer::after {
    left: 60px;
    right: 60px;
  }

  .section-footer__nav {
    left: 60px;
    gap: 20px;
  }
  .section-footer__nav-col { width: auto; }
  .section-footer__nav-col li a { font-size: 16px; font-weight: 600; white-space: nowrap; }

  .section-footer__ctas {
    right: 60px;
    gap: 16px;
  }
  .section-footer__btn { width: 240px; height: 54px; font-size: 16px; border-radius: 50px; white-space: nowrap; }

  .section-footer__contact { left: 60px; right: 60px; gap: 28px; }
  .section-footer__bottom { left: 60px; }

  /* ── INSTAGRAM — laptop scale ── */
  .section-instagram { padding: 100px 60px 100px; }
  .section-instagram__icon { width: 32px; height: 32px; }
  .section-instagram__title span { font-size: 36px; }
  .section-instagram__title { margin: 0 auto 32px; }
  .section-instagram__grid { max-width: 1200px; }
  .section-instagram__btn {
    width: 300px;
    height: 54px;
    margin: 40px auto 0;
    font-size: 18px;
  }

  /* ── OUR SPACE PAGE — Laptop overrides ── */
  .space-banner {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
  }

  .space-intro {
    padding: 60px 60px;
  }

  .space-intro__container {
    max-width: 800px;
  }

  .space-intro__heading {
    font-size: 28px;
  }

  .space-intro__text {
    font-size: 18px;
  }

  .space-room__slideshow-wrapper {
    width: 1080px;
    max-width: 1080px;
    height: 682px;
    margin-left: 80px;
  }

  .space-room__info {
    width: calc(100% - 160px);
    max-width: 1100px;
    margin-left: 80px;
  }

  .space-room__title {
    font-size: 36px;
  }

  .space-room__subtitle {
    font-size: 22px;
  }

  .space-room__specs p,
  .space-room__specs-detail--mb p {
    font-size: 18px;
  }

  .space-room__btn {
    margin-left: 80px;
    margin-bottom: 60px;
  }

  .space-slideshow__arrow--left {
    left: -80px;
  }

  .space-slideshow__arrow--right {
    right: -80px;
  }

  .space-slideshow__arrow svg {
    width: 56px;
    height: 56px;
  }
}

/* ============================================================================
   23. RESPONSIVE — PC ONLY (1600px+)
   Overrides for true desktop/PC widths. Does NOT affect laptop (1280-1599)
   or mobile (<1280).
   ============================================================================ */

@media (min-width: 1600px) {
  /* Gap between Reservation (section-usage) and Service banner = 200px */
  .section-usage__content {
    padding-bottom: 200px;
  }
}

/* ============================================================================
   24. OUR SPACE PAGE — BANNER, INTRO, ROOMS & SLIDESHOW
   ============================================================================ */

/* ── BANNER (Hero) ── */
.space-banner {
  position: relative;
  width: 100%;
  height: 956px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.space-banner__mobile {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.space-banner__mobile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.space-banner__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.space-banner__pc {
  display: none;
}

.space-banner__pc-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.space-banner__pc-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.space-banner__pc-layer--1 {
  z-index: 0;
}

.space-banner__pc-layer--2 {
  z-index: 1;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0) 100%);
}

.space-banner__pc-layer--3 {
  z-index: 2;
  background: rgba(0, 0, 0, 0.2);
}

/* Mobile nav in banner */
.space-banner__nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 20;
}

.space-banner__nav--mobile {
  display: flex;
  top: 25px;
  padding: 0 25px;
  height: 40px;
}

.space-banner__hamburger {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.space-banner__hamburger svg {
  width: 40px;
  height: 40px;
}

.space-banner__nav-logo {
  flex-shrink: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.space-banner__nav-logo img {
  height: 30px;
  width: auto;
}

.space-banner__nav-spacer {
  width: 40px;
}

.space-banner__nav-reserve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 70px;
  height: 30px;
  background: #ffffff;
  color: #4D4D4D;
  border: none;
  border-radius: 50px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

/* Logo anchors — no underline */
.section-hero__nav-logo,
.jw-hero__logo,
.space-banner__nav-logo,
.pc-nav__logo {
  text-decoration: none;
}

/* ============================================================================
   MOBILE NAV — Scroll state
   Applies to all 3 mobile nav variants (section-hero / jw-hero / space-banner).
   When user scrolls past threshold, the nav pins to the top with a white bg
   and dark icon/text, and the Reserve button inverts (black bg + white text).
   ============================================================================ */
.section-hero__nav--mobile,
.jw-hero__nav--mobile,
.space-banner__nav--mobile {
  transition: background-color 0.3s ease, top 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease, transform 0.35s ease;
}
/* Hidden state — slide up off screen (mobile navs) */
.section-hero__nav--mobile.nav-hidden,
.jw-hero__nav--mobile.nav-hidden,
.space-banner__nav--mobile.nav-hidden {
  transform: translateY(-100%);
}
.section-hero__nav--mobile.is-scrolled,
.jw-hero__nav--mobile.is-scrolled,
.space-banner__nav--mobile.is-scrolled {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;           /* reset the 55px margin-top set on jw-hero mobile base */
  width: auto;
  height: 60px;
  padding: 0 16px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  z-index: 100;
}
/* Hamburger lines → dark */
.section-hero__nav--mobile.is-scrolled .section-hero__hamburger svg line,
.jw-hero__nav--mobile.is-scrolled .jw-hero__hamburger svg line,
.space-banner__nav--mobile.is-scrolled .space-banner__hamburger svg line {
  stroke: #4D4D4D;
}
/* Logo → dark variant + shrink proportionally to h=24px */
.section-hero__nav--mobile.is-scrolled .section-hero__nav-logo img,
.jw-hero__nav--mobile.is-scrolled .jw-hero__logo img,
.space-banner__nav--mobile.is-scrolled .space-banner__nav-logo img {
  content: url('../images/shared/logo/AGD_logo_black.svg');
  height: 24px;
  width: auto;
  transition: height 0.3s ease;
}
/* Reserve button → black bg + white text */
.section-hero__nav--mobile.is-scrolled .section-hero__nav-reserve,
.jw-hero__nav--mobile.is-scrolled .jw-hero__reserve,
.space-banner__nav--mobile.is-scrolled .space-banner__nav-reserve {
  background: #000;
  color: #fff;
}

/* Toppage mobile — hide the header logo at the initial transparent state
   (hero banner already shows the same logo big). Logo re-appears on scroll. */
.section-hero__nav--mobile .section-hero__nav-logo {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.section-hero__nav--mobile.is-scrolled .section-hero__nav-logo {
  opacity: 1;
  visibility: visible;
}

/* PC nav */
.space-banner__nav.pc-nav {
  display: none;
}

/* Banner content */
.space-banner__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-align: center;
}

.space-banner__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 36px;
  color: #ffffff;
  margin: 0;
}

/* ── INTRO SECTION ── */
.space-intro {
  background: var(--color-bg);
  padding: 100px 25px 50px;
}

.space-intro__container {
  max-width: 390px;
  margin: 0 auto;
  text-align: center;
}

.space-intro__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 25px;
  color: var(--color-text);
  margin: 0 0 30px 0;
  line-height: 1.2;
}

.space-intro__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--color-text);
  line-height: 2em;
  margin: 0;
}

/* ── ROOM SECTIONS ── */
.space-room {
  background: var(--color-bg);
  padding: 50px 0;
}

.space-room__container {
  width: 100%;
  padding: 0 0;
}

/* ── Room Static Image ── */
.space-room__image-wrapper {
  width: 440px;
  max-width: 100%;
  height: 320px;
  margin: 0 auto 30px;
  overflow: hidden;
}

.space-room__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.space-room__slideshow-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
  background: #1A1A1A;
  margin-bottom: 30px;
}

.space-room__slideshow {
  position: relative;
  width: 100%;
  height: 100%;
}

.space-slideshow__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}

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

.space-slideshow__slide:first-child {
  opacity: 1;
}

.space-slideshow__slide--active {
  opacity: 1;
}

.space-slideshow__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2A2A2A;
  color: #888888;
  font-family: var(--font-body);
  font-size: 14px;
}

/* Slide navigation arrows */
.space-slideshow__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 5;
  display: block;
}

.space-slideshow__slide picture {
  width: 100%;
  height: 100%;
  display: block;
}

.space-slideshow__slide picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.space-slideshow__arrow--left {
  left: 10px;
}

.space-slideshow__arrow--right {
  right: 10px;
}

.space-slideshow__arrow svg {
  width: 36px;
  height: 36px;
  display: block;
}

/* Dots */
.space-slideshow__dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
}

.space-slideshow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease;
}

.space-slideshow__dot--active {
  background: rgba(255, 255, 255, 1);
}

/* Room info */
.space-room__info {
  padding: 0 25px;
  margin-bottom: 25px;
  display: flex;
  flex-direction: column;
}

.space-room__text {
  order: 1;
  margin-bottom: 20px;
}

.space-room__specs {
  order: 2;
}

.space-room__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 30px;
  color: var(--color-text);
  margin: 0 0 10px 0;
}

.space-room__subtitle {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
}

.space-room__specs {
  margin-bottom: 0;
}

.space-room__specs p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--color-text);
  line-height: 2em;
  margin: 0;
  text-align: left;
}

/* Specs mobile/pc visibility */
.space-room__specs-detail--pc { display: none; }
.space-room__specs-detail--mb { display: block; }

/* View Detail button (works for both <button> and <a>) */
.space-room__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  order: 3;
  width: 190px;
  height: 50px;
  margin: 30px 0 0;
  background: #000000;
  color: #ffffff;
  border: none;
  border-radius: 50px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.space-room__btn:hover {
  opacity: 0.8;
  color: #ffffff;
}

/* ============================================================================
   25. RESPONSIVE — PC / LAPTOP (1280px+)
   ============================================================================ */

@media (min-width: 1280px) {

  /* ── BANNER ── */
  .space-banner {
    height: 990px;
  }

  .space-banner__mobile {
    display: none;
  }

  .space-banner__pc {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }

  .space-banner__nav--mobile {
    display: none;
  }

  .pc-nav {
    display: flex !important;
  }

  .space-banner__title {
    font-size: 46px;
  }

  /* ── INTRO ── */
  .space-intro {
    padding: 80px 100px;
  }

  .space-intro__container {
    max-width: 994px;
    margin: 0 auto;
  }

  .space-intro__heading {
    font-size: 32px;
  }

  .space-intro__text {
    font-size: 20px;
  }

  /* ── ROOMS ── */
  .space-room {
    padding: 0;
    margin-bottom: 200px;
  }

  .space-room__container {
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
  }

  .space-room__image-wrapper {
    width: calc(100% - 480px);
    max-width: 1440px;
    height: 880px;
    margin: 0 auto;
    overflow: hidden;
  }

  .space-room__slideshow-wrapper {
    width: calc(100% - 480px);
    max-width: 1440px;
    height: 880px;
    margin: 0 auto 0;
    position: relative;
  }

  .space-room__slideshow {
    width: 100%;
    height: 100%;
  }

  /* PC slide arrows (large circles) */
  .space-slideshow__arrow {
    display: block;
  }

  .space-slideshow__arrow svg {
    width: 68px;
    height: 68px;
  }

  .space-slideshow__arrow--left {
    left: -100px;
  }

  .space-slideshow__arrow--right {
    right: -100px;
  }

  /* Dots positioning for PC */
  .space-slideshow__dots {
    bottom: auto;
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    transform: none;
  }

  .space-slideshow__dot {
    width: 10px;
    height: 10px;
    background: rgba(77, 77, 77, 0.3);
  }

  .space-slideshow__dot--active {
    background: var(--color-btn-border);
    width: 24px;
    border-radius: 5px;
  }

  /* Room info layout — CSS Grid: text+btn left, specs right */
  .space-room__info {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "text specs"
      "btn  specs";
    align-items: start;
    width: calc(100% - 480px);
    max-width: 1440px;
    margin: 30px auto 0;
    padding: 0;
  }

  .space-room__text {
    grid-area: text;
    margin-bottom: 0;
    order: unset;
  }

  .space-room__title {
    font-size: 36px;
    margin-bottom: 5px;
    line-height: 1.3;
  }

  .space-room__subtitle {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 22px;
    line-height: 1.3;
  }

  .space-room__specs {
    grid-area: specs;
    margin-bottom: 0;
    text-align: right;
    order: unset;
  }

  .space-room__specs p,
  .space-room__specs-detail--mb p {
    font-size: 20px;
    text-align: right;
  }

  /* Show PC specs, hide mobile specs */
  .space-room__specs-detail--pc { display: block; }
  .space-room__specs-detail--mb { display: none; }

  .space-room__btn {
    grid-area: btn;
    width: 220px;
    height: 50px;
    margin: 30px 0 0;
    order: unset;
  }
}

/* ============================================================================
   26. RESPONSIVE — PC ONLY (1600px+)
   ============================================================================ */

@media (min-width: 1600px) {

  .space-banner {
    height: 990px;
  }

  .space-intro {
    padding: 200px 200px 100px;
    margin-bottom: 100px;
  }

  .space-room {
    margin-bottom: 200px;
  }

  .space-room:last-of-type {
    margin-bottom: 200px;
  }

  .space-room__btn {
    margin-bottom: 0;
  }

  .space-room__image-wrapper {
    width: 1440px;
    max-width: 1440px;
    height: 880px;
    margin-left: 240px;
    margin-right: auto;
    overflow: hidden;
  }

  .space-room__slideshow-wrapper {
    width: 1440px;
    max-width: 1440px;
    margin-left: 240px;
    margin-right: auto;
  }

  .space-room__info {
    width: 1440px;
    max-width: 1440px;
    margin-left: 240px;
    margin-right: auto;
  }

  .space-room__btn {
    margin-left: 0;
  }

  .space-slideshow__arrow--left {
    left: -120px;
  }

  .space-slideshow__arrow--right {
    right: -120px;
  }
}

/* ============================================================================
   27. RESPONSIVE — LAPTOP OVERRIDE (final, highest priority)
   ============================================================================ */

@media (min-width: 1280px) and (max-width: 1599px) {
  .space-room {
    margin-bottom: 100px;
  }

  .space-room__image-wrapper {
    width: 1080px;
    max-width: 1080px;
    height: 660px;
    margin: 0 auto;
    overflow: hidden;
  }

  .space-room__slideshow-wrapper {
    width: 1080px;
    max-width: 1080px;
    height: 682px;
    margin: 0 auto;
  }

  .space-room__info {
    width: 1080px;
    max-width: 1080px;
    margin: 0 auto;
    padding-top: 50px;
  }

  .space-room__title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.3;
  }

  .space-room__subtitle {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 22px;
    line-height: 1.3;
  }

  .space-room__btn {
    width: 220px;
    margin: 30px 0 0;
  }

  /* Specs: ẩn PC (1 dòng ngang), hiện MB (từng dòng), căn phải */
  .space-room__specs-detail--pc {
    display: none !important;
  }

  .space-room__specs-detail--mb {
    display: block !important;
    text-align: right;
  }

  .space-room__specs-detail--mb p {
    margin: 0;
    padding: 0;
    line-height: 1.8;
  }

  .space-room__specs-line {
    text-align: right;
  }
}

/* ============================================================================
   25. ROOM DETAIL — Japanese Western Room (Pixel-aligned to Figma)
   Mobile (440px) → Tablet (768px) → Desktop (1024px) → Wide (1440px+)
   ============================================================================ */

/* ---- Tokens ---- */
:root {
  --jw-bg: #ffffff;
  --jw-cream: #f6f6f6;
  --jw-text: #4D4D4D;
  --jw-text-soft: #6B5B50;
  --jw-label: #4D4D4D;
  --jw-divider: #DBDBDB;
  --jw-border: #4D4D4D;
  --jw-pad-mb: 25px;
  --jw-pad-pc: 240px;
  --jw-content-pc: 1440px;
}


/* =====================================================
   S1 — HERO BANNER
   Mobile: 600px tall, mobile banner img
   PC: 600px tall, landscape banner — uses ourspace-banner-pc-1.webp
   When jwr/hero-composite.jpg is dropped in, swap with @media or update.
   ===================================================== */
.jw-hero {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  background-color: #2a241e;
  background-image: url('../images/space/ourspace-banner-mb.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.jw-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: linear-gradient(180deg, rgba(20,18,13,0.40) 0%, rgba(20,18,13,0.10) 30%, rgba(20,18,13,0.55) 100%);
}

/* Mobile nav inside hero */
.jw-hero__nav--mobile {
  position: absolute;
  top: 25px;
  left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px;
  height: 40px;
}
.jw-hero__hamburger {
  background: none; border: none; padding: 0; cursor: pointer; flex-shrink: 0;
}
.jw-hero__hamburger svg { width: 32px; height: 32px; }
.jw-hero__logo {
  position: absolute; left: 50%; transform: translateX(-50%);
}
.jw-hero__logo img { height: 28px; width: auto; display: block; }
.jw-hero__reserve {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 70px; height: 30px;
  background: #fff; color: var(--jw-border);
  border-radius: 50px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

/* PC nav — hidden on mobile */
.jw-hero__pc-nav { display: none; }

/* Hero title */
.jw-hero__title {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  text-align: center;
  padding: 0 25px;
}
.jw-hero__title h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
  color: #fff;
  margin: 0;
  letter-spacing: 0.5px;
}


/* =====================================================
   S1.5 — CHECK-IN / CHECK-OUT BAR
   Figma Group 88 — y=650, h=56, w=1440 within 1920 viewport
   Text: DM Sans 600 / 20px / letter-spacing 20% / uppercase / #4D4D4D
   ALL 4 elements same style — no bold/light variation.
   ===================================================== */
.jw-checkin {
  background: var(--jw-bg);
  padding: 22px 0;
}
.jw-checkin__inner {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--jw-pad-mb);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.jw-checkin__item {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #4D4D4D;
  white-space: nowrap;
}
.jw-checkin__center {
  display: flex;
  align-items: center;
  gap: 50px;
}


/* =====================================================
   S2 — GALLERY SLIDER
   Slides + left/right arrows (68×68 Figma) + View all CTA
   ===================================================== */
.jw-gallery {
  background: var(--jw-bg);
  padding: 0;
}
/* Mobile-only gallery slides (no desktop variants) — hidden by default, shown only on mobile */
.jw-gallery__slide--mb-only { display: none; }
@media (max-width: 767px) {
  .jw-gallery__slide--mb-only { display: block; }
}
/* PC-only gallery slides (no mobile variants) — shown by default, hidden on mobile */
.jw-gallery__slide--pc-only { display: block; }
@media (max-width: 767px) {
  .jw-gallery__slide--pc-only { display: none; }
}
.jw-gallery__frame {
  position: relative;
  width: 100%;
  height: 480px;
  overflow: hidden;
}
.jw-gallery__slides {
  position: relative;
  width: 100%;
  height: 100%;
}
.jw-gallery__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.jw-gallery__slide.is-active {
  opacity: 1;
  z-index: 1;
}
.jw-gallery__slide img {
  width: 100%;
  height: 100%;
  max-height: 880px;
  object-fit: contain;
  display: block;
  background: var(--jw-bg);
}

/* Arrows — Figma 68×68 circles, neo giữa chiều dọc */
.jw-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.jw-gallery__arrow img { width: 100%; height: 100%; display: block; }
.jw-gallery__arrow--prev { left: 16px; }
.jw-gallery__arrow--next { right: 16px; }
.jw-gallery__arrow:hover { transform: translateY(-50%) scale(1.08); }

/* View all CTA — single line, white pill */
.jw-gallery__cta {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: #fff;
  border: none;
  border-radius: 50px;
  color: #000;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
}
.jw-gallery__cta img { width: 18px; height: 18px; display: block; flex-shrink: 0; }
.jw-gallery__cta span { white-space: nowrap; }


/* =====================================================
   S3 — ROOM SPECS + CHECK-IN/OUT + FLOOR PLAN
   ===================================================== */
.jw-info {
  background: var(--jw-bg);
  padding: 50px 0 100px;
}
.jw-info__inner {
  width: 100%;
  max-width: 100%;
  padding: 0 var(--jw-pad-mb);
  margin: 0 auto;
}

/* Specs list — Figma Frame 121: row icon (24×24) + text, line-height 2.5em */
.jw-specs {
  list-style: none;
  margin: 0;
  padding: 0 0 30px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.jw-specs__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 0;
  line-height: 2.5em;
}
.jw-specs__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: block;
}
.jw-specs__text {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--jw-text);
}
.jw-specs__label {
  font-weight: 400;
  color: var(--jw-text);
}

/* Check-in / Check-out */
.jw-times {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  padding: 24px 0;
  border-top: 1px solid var(--jw-divider);
  border-bottom: 1px solid var(--jw-divider);
  margin-bottom: 0;
}
.jw-times__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.jw-times__col:last-child { text-align: right; align-items: flex-end; }
.jw-times__divider { width: 1px; background: var(--jw-divider); margin: 0 20px; }
.jw-times__label {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--jw-label);
}
.jw-times__value {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--jw-text);
}


/* =====================================================
   GENERIC ACCORDION (Floor Plan / Service / FAQ rows)
   ===================================================== */
.jw-accordion {
  border-bottom: 1px solid var(--jw-divider);
  list-style: none;
}
.jw-accordion__head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 70px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--jw-text);
  text-align: left;
}
.jw-accordion__head,
.jw-accordion__head .jw-accordion__title {
  font-weight: 500 !important;
}
.jw-accordion__lead {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.jw-accordion__lead img {
  width: 20px;
  height: 20px;
  display: block;
}
.jw-accordion__title { flex: 1; line-height: 1.4; }
.jw-accordion__icon {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-block;
}
.jw-accordion__icon--plus,
.jw-accordion__icon--minus {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.jw-accordion__icon--plus { opacity: 1; transform: rotate(0deg); }
.jw-accordion__icon--minus { opacity: 0; transform: rotate(-90deg); }
.jw-accordion.is-open .jw-accordion__icon--plus { opacity: 0; transform: rotate(90deg); }
.jw-accordion.is-open .jw-accordion__icon--minus { opacity: 1; transform: rotate(0deg); }

.jw-accordion__arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  transition: transform 0.35s ease;
}
.jw-accordion__arrow img { width: 100%; height: 100%; display: block; }
.jw-accordion.is-open .jw-accordion__arrow { transform: rotate(90deg); }

/* Smooth body open/close — max-height + opacity (reliable, animated) */
.jw-accordion__body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 0.45s ease, opacity 0.3s ease, transform 0.35s ease, padding 0.3s ease;
  color: var(--jw-text);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  padding: 0;
}
.jw-accordion.is-open .jw-accordion__body {
  max-height: 1200px;
  opacity: 1;
  transform: translateY(0);
  padding: 4px 0 24px 34px; /* align with title text (icon 20px + gap 14px) */
}
/* Floor Plan accordion body — no left padding so slider arrows align with head icon */
.jw-accordion--floor.is-open .jw-accordion__body {
  padding: 4px 0 24px;
}
.jw-accordion__body p {
  margin: 0 0 12px;
  opacity: 0.8;
}
.jw-accordion__body p:last-child { margin: 0; }
.jw-accordion__body a {
  color: var(--jw-border);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Floor Plan needs first border */
.jw-info .jw-accordion {
  border-top: 1px solid var(--jw-divider);
  margin-top: 0;
}
.jw-info .jw-accordion__head {
  min-height: 70px;
  padding: 0;
  display: flex;
  align-items: center;
}
.jw-floorplan {
  background: #fff;
  padding: 16px;
  display: flex;
  justify-content: center;
}
.jw-floorplan img {
  width: 626px;
  height: 795px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 626 / 795;
  display: block;
  background: #fff;
  object-fit: contain;
}
@media (min-width: 1024px) {
  .jw-floorplan img {
    width: 441px;
    height: 560px;
    aspect-ratio: 626 / 795;
  }
}

/* Dual floor plan (Suite Double Room — 2 room size variants)
   Mobile: horizontal scroll-snap slider with dots pagination
   PC/Laptop: show both side-by-side */
.jw-floorplan--dual {
  display: block;
  padding: 24px 0 16px;
  background: #fff;
  position: relative;
}
.jw-floorplan__track {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 0;
  padding: 0;
}
.jw-floorplan__track::-webkit-scrollbar { display: none; }
.jw-floorplan__item {
  margin: 0;
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
}
.jw-floorplan__item img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 560px;
  display: block;
  background: #fff;
  object-fit: contain;
}
.jw-floorplan__item figcaption {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #4D4D4D;
  text-align: center;
  line-height: 1.4;
}

/* Prev/Next arrows — 36×36 circle buttons overlaid on slider */
.jw-floorplan__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.jw-floorplan__arrow img {
  width: 36px;
  height: 36px;
  display: block;
}
.jw-floorplan__arrow:hover {
  transform: translateY(-50%) scale(1.08);
}
.jw-floorplan__arrow:disabled {
  opacity: 0.4;
  cursor: default;
}
.jw-floorplan__arrow--prev { left: 0; }
.jw-floorplan__arrow--next { right: 0; }

/* Dots pagination */
.jw-floorplan__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.jw-floorplan__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(77, 77, 77, 0.3);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.jw-floorplan__dot.is-active {
  background: #4D4D4D;
  transform: scale(1.2);
}

/* PC/Laptop: disable slider, show side-by-side */
@media (min-width: 1024px) {
  .jw-floorplan--dual {
    padding: 24px 16px;
  }
  .jw-floorplan__track {
    overflow-x: visible;
    scroll-snap-type: none;
    justify-content: center;
    align-items: flex-start;
    gap: 60px;
  }
  .jw-floorplan__item {
    flex: 0 0 auto;
    padding: 0;
  }
  .jw-floorplan__item img {
    max-height: 560px;
  }
  .jw-floorplan__item figcaption {
    font-size: 14px;
  }
  .jw-floorplan__dots,
  .jw-floorplan__arrow {
    display: none; /* Arrows + dots not needed when both visible */
  }
}


/* =====================================================
   S4 — BEING HAPPY TOGETHER  (Figma Group 84)
   Mobile: stacked (photos top, text bottom)
   PC: photos LEFT, text RIGHT
   ===================================================== */
.jw-happy {
  background: var(--jw-cream);
  padding: 60px 0;
}
.jw-happy__inner {
  width: 100%;
  padding: 0 var(--jw-pad-mb);
  margin: 0 auto;
  /* Mobile: flex column so we can reorder heading above photos */
  display: flex;
  flex-direction: column;
}
/* Mobile only — unwrap text div so heading can be reordered ahead of photos */
.jw-happy__text {
  display: contents;
}
.jw-happy__heading {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-style: normal;
  font-size: 28px;
  line-height: 1.3;
  color: var(--jw-text);
  margin: 0 0 24px;
  text-align: center;
  order: 1;
}
.jw-happy__intro,
.jw-happy__more {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 2em;
  color: var(--jw-text);
}
.jw-happy__intro { order: 3; }
.jw-happy__more  { order: 4; }
.jw-happy__intro p,
.jw-happy__more p { margin: 0 0 16px; }
.jw-happy__intro p:last-child,
.jw-happy__more p:last-child { margin-bottom: 0; }
.jw-happy__highlight {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #4D4D4D;
  margin: 70px 0 18px !important;
}
.jw-happy__closing {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 1.4;
  color: #4D4D4D;
  margin: 24px 0 0 !important;
  text-transform: none;
  letter-spacing: normal;
}
.jw-happy__closing--accent {
  color: #FB7F65;
}
.jw-happy .jw-toggle { order: 5; }

/* Photos column — stacked on mobile, 2-col grid on PC */
.jw-happy__photos {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 30px;
  order: 2;
}
.jw-happy__photo {
  width: 100%;
  overflow: hidden;
}
.jw-happy__photo img {
  width: 100%;
  height: auto;
  display: block;
}


/* =====================================================
   SHOW MORE / SHOW LESS toggle
   ===================================================== */
.jw-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  padding: 8px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--jw-border);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.jw-toggle__less { display: none; }
.jw-toggle[aria-expanded="true"] .jw-toggle__more { display: none; }
.jw-toggle[aria-expanded="true"] .jw-toggle__less { display: inline; }
.jw-toggle__arrow { transition: transform 0.3s ease; }
.jw-toggle[aria-expanded="true"] .jw-toggle__arrow { transform: rotate(180deg); }

/* Hide expandable */
[data-more-content] {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}
[data-more-content].is-expanded {
  max-height: 3000px;
  opacity: 1;
}
.jw-happy__intro { max-height: none !important; opacity: 1 !important; overflow: visible; }


/* =====================================================
   GENERIC BLOCK (Amenities / Facility / Services / FAQ)
   ===================================================== */
.jw-block {
  background: var(--jw-bg);
  padding: 50px 0;
}
.jw-block__inner {
  width: 100%;
  padding: 0 var(--jw-pad-mb);
  margin: 0 auto;
}
.jw-block__heading {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  color: var(--jw-text);
  margin: 0 0 36px;
}
.jw-block__note {
  margin-top: 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--jw-label);
}

/* Item lists */
.jw-cols-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.jw-itemlist {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--jw-text);
}
.jw-itemlist li {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.jw-itemlist li img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: block;
}
.jw-itemlist li span {
  flex: 1;
}

/* On mobile, Amenities/Facility bodies are collapsed */
.jw-block--amenities .jw-block__body,
.jw-block--facility .jw-block__body { display: none; }
.jw-block--amenities.is-expanded .jw-block__body,
.jw-block--facility.is-expanded .jw-block__body { display: block; }

.jw-toggle--mobile { display: inline-flex; }

.jw-rowlist { list-style: none; margin: 0; padding: 0; }
.jw-rowlist .jw-accordion:first-child { border-top: 1px solid var(--jw-divider); }


/* =====================================================
   S8 — INSIDE YOUR SPACE (Figma Frame 149: 2 cards × 705 × 450)
   ===================================================== */
.jw-inside {
  background: var(--jw-bg);
  padding: 50px 0;
}
.jw-inside__inner {
  width: 100%;
  padding: 0 var(--jw-pad-mb);
  margin: 0 auto;
}
.jw-inside__heading {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  color: var(--jw-text);
  margin: 0 0 36px;
}
.jw-inside__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
.jw-inside__card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.jw-inside__media {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
  background: #efeae3;
}
.jw-inside__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.jw-inside__cta {
  position: absolute;
  right: 16px; bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 22px;
  background: #fff;
  border: none;
  border-radius: 50px;
  color: #000;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.jw-inside__cta img,
.jw-inside__cta svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px;
  max-height: 18px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.jw-inside__label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-align: center;
  color: #4D4D4D;
}


/* =====================================================
   S9 — SEE OUR OTHER ROOMS
   ===================================================== */
.jw-others {
  background: var(--jw-bg);
  padding: 80px 0;
}
.jw-others__inner {
  width: 100%;
  padding: 0 var(--jw-pad-mb);
  margin: 0 auto;
}
.jw-others__heading {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  color: var(--jw-text);
  text-align: center;
  margin: 0 0 40px;
}
.jw-others__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
.jw-others__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jw-others__hero {
  display: block;
  width: 100%;
  height: 320px;
  overflow: hidden;
  background: #efeae3;
}
.jw-others__hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.jw-others__card:hover .jw-others__hero img { transform: scale(1.04); }
.jw-others__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.jw-others__thumbs img {
  width: 100%;
  aspect-ratio: 98/118;
  object-fit: cover;
  display: block;
  background: #efeae3;
}
.jw-others__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}
.jw-others__name {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--jw-text);
  margin: 0;
}
.jw-others__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 14px;
  color: #000;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.jw-others__link:hover { color: var(--jw-border); }


/* =====================================================
   26. ROOM DETAIL — TABLET (≥768px)
   ===================================================== */
@media (min-width: 768px) {
  .jw-info__inner,
  .jw-happy__inner,
  .jw-block__inner,
  .jw-inside__inner,
  .jw-others__inner { padding: 0 60px; }

  .jw-hero__title h1 { font-size: 40px; }
  .jw-hero { height: 600px; }

  .jw-gallery__frame { height: 600px; }
  .jw-gallery__cta { font-size: 14px; padding: 14px 24px; }

  .jw-specs {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px 60px;
  }
  .jw-specs li { min-width: 200px; flex: 1 1 calc(50% - 60px); }

  .jw-happy__heading,
  .jw-block__heading,
  .jw-inside__heading,
  .jw-others__heading { font-size: 30px; }

  .jw-cols-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
  }

  /* Tablet+: Amenities/Facility always visible, hide Show more */
  .jw-block--amenities .jw-block__body,
  .jw-block--facility .jw-block__body {
    display: block;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
  .jw-toggle--mobile { display: none; }

  .jw-inside__grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .jw-inside__media { height: 360px; }

  .jw-others__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .jw-others__hero { height: 360px; }
}


/* =====================================================
   27. ROOM DETAIL — DESKTOP (≥1024px)
   ===================================================== */
@media (min-width: 1024px) {
  /* Hero — full-width landscape banner, 600px tall per Figma */
  .jw-hero {
    height: 500px;
    background-image: url('../images/rooms/japanese-western/JWR_mainbanner_PC.webp');
    background-size: cover;
    background-position: center center;
  }
  /* Suite Double Room — use its own banner */
  .jw-hero--sd {
    background-image: url('../images/rooms/suite-double/SDR_mainbanner_PC.webp');
  }
  /* Simple King Room — use its own banner */
  .jw-hero--sk {
    background-image: url('../images/rooms/simple-king/SKR_mainbanner_PC.webp');
  }
  /* Sapporo City Stay — interior living/dining shot */
  .jw-hero--sapporo {
    background-image: url('../images/rooms/sapporo/SAP_01.webp');
    background-position: center 35%;
  }
  /* Karuizawa Riverside Villa — placeholder until hero image provided */
  .jw-hero--karuizawa {
    background-image: url('../images/toppage_karuizawa/hero_PC.webp');
    background-position: center center;
  }
  .jw-hero__nav--mobile { display: none; }
  .jw-hero__pc-nav { display: flex; }
  .jw-hero__title h1 { font-size: 44px; letter-spacing: 1px; }

  /* Check-in / Check-out bar PC — flush with gallery image edges (1440 centered) */
  .jw-checkin {
    padding: 0;
    min-height: 150px;
    display: flex;
    align-items: center;
  }
  .jw-checkin__inner {
    max-width: 1440px;
    padding: 0;
    justify-content: space-between;
    gap: 0;
  }
  .jw-checkin__item { font-size: 14px; }

  /* Gallery hero PC: 1440 × 880 per Figma */
  .jw-gallery { padding: 0; }
  .jw-gallery__frame {
    width: 100%;
    max-width: 1440px;
    height: 880px;
    margin: 0 auto;
  }
  .jw-gallery__arrow {
    width: 68px;
    height: 68px;
  }
  .jw-gallery__arrow--prev { left: 40px; }
  .jw-gallery__arrow--next { right: 40px; }
  .jw-gallery__cta {
    right: 40px; bottom: 40px;
    height: 40px;
    padding: 0 22px;
    font-size: 14px;
    gap: 10px;
  }
  .jw-gallery__cta img { width: 18px; height: 18px; }

  /* Content sections — flush with gallery image edges (1440 centered, no inner padding) */
  .jw-info__inner,
  .jw-block__inner,
  .jw-inside__inner,
  .jw-others__inner,
  .jw-happy__inner {
    max-width: 1440px;
    padding: 0;
    margin: 0 auto;
  }

  /* Specs PC — vertical column, icon + text per row, larger gap between rows, 100px gap to next */
  .jw-info { padding: 80px 0 100px; }
  .jw-specs {
    flex-direction: column;
    gap: 28px;
    padding: 0 0 50px;
    margin: 0;
    border: none;
  }
  .jw-specs__row {
    padding: 0;
    gap: 24px;
    line-height: 1.4;
    border: none;
  }
  .jw-specs__icon { width: 28px; height: 28px; }
  .jw-specs__text {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
  }
  .jw-specs__label {
    font-weight: 600;
    font-size: 20px;
    color: var(--jw-text);
  }

  /* Times — wider gap */
  .jw-times {
    border-top: none;
    border-bottom: 1px solid var(--jw-divider);
    padding: 28px 0;
    justify-content: flex-start;
    gap: 80px;
  }
  .jw-times__col, .jw-times__col:last-child { flex: 0 0 auto; text-align: left; align-items: flex-start; }
  .jw-times__divider { display: none; }
  .jw-times__value { font-size: 22px; }

  /* Floor plan accordion — keep top + bottom border, head height 70px */
  .jw-info .jw-accordion {
    border-top: 1px solid var(--jw-divider);
  }
  .jw-info .jw-accordion__head {
    min-height: 70px;
    padding: 0;
  }

  /* Happy together PC — photos LEFT 510×308 each, text RIGHT (Figma Frame 126) */
  .jw-happy { padding: 100px 0; }
  .jw-happy__inner {
    display: grid;
    grid-template-columns: 510px 1fr;
    gap: 80px;
    align-items: start;
  }
  .jw-happy__photos {
    display: flex;
    flex-direction: column;
    gap: 10px;
    grid-column: 1 / 2;
    grid-row: 1;
    width: 510px;
    margin-bottom: 0;
    order: initial;
  }
  .jw-happy__photo {
    width: 510px;
    height: 308px;
    overflow: hidden;
  }
  .jw-happy__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .jw-happy__text {
    display: block; /* reset mobile display:contents */
    grid-column: 2 / 3;
    grid-row: 1;
  }
  .jw-happy__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 34px;
    line-height: 1;
    color: var(--jw-text);
    margin: -12px 0 30px;
    text-align: left; /* reset mobile center */
    order: initial;
  }
  .jw-happy__intro,
  .jw-happy__more { order: initial; }
  .jw-happy__intro,
  .jw-happy__more {
    font-size: 14px;
    line-height: 2em;
  }
  .jw-happy__highlight {
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.8;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #4D4D4D;
  }

  /* PC: always show full content, hide Show more toggle */
  .jw-happy .jw-happy__more {
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
  .jw-happy .jw-toggle { display: none !important; }

  /* Generic blocks — section titles scaled to H2 laptop (34px) */
  .jw-block { padding: 50px 0; }
  .jw-block__heading,
  .jw-inside__heading,
  .jw-others__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 34px;
    line-height: 1.2;
    margin-bottom: 50px;
  }
  .jw-others-property .section__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 34px !important;
    line-height: 1.2;
  }
  .jw-cols-3 { gap: 60px; }
  .jw-itemlist { font-size: 14px; line-height: 1.85; gap: 12px; }

  /* Service / FAQ rows on PC — 70px height, content centered */
  .jw-rowlist .jw-accordion__head {
    min-height: 70px;
    padding: 0 8px;
    font-size: 18px;
  }
  .jw-rowlist .jw-accordion__body {
    font-size: 14px;
    padding-left: 42px; /* align with title: head padding 8 + icon 20 + gap 14 */
    padding-right: 8px;
  }
  .jw-rowlist .jw-accordion.is-open .jw-accordion__body {
    padding: 4px 8px 28px 42px;
  }

  /* Inside Your Space PC: 2 cards × 705 × 450 (Figma exact) — 100px gap to neighbors */
  .jw-inside { padding: 50px 0; }
  .jw-inside__heading { font-size: 34px; margin-bottom: 50px; font-family: 'Playfair Display', serif; font-weight: 400; }
  .jw-inside__grid {
    grid-template-columns: 705px 705px;
    gap: 30px;
    justify-content: space-between;
  }
  .jw-inside__media {
    width: 705px;
    height: 450px;
  }
  .jw-inside__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .jw-inside__cta { right: 24px; bottom: 24px; font-size: 14px; }
  .jw-inside__label { font-size: 20px; }

  /* Other rooms PC — match Inside Your Space dimensions exactly */
  .jw-others { padding: 120px 0; }
  .jw-others__grid {
    grid-template-columns: 705px 705px;
    gap: 30px;
    justify-content: space-between;
  }
  .jw-others__hero {
    width: 705px;
    height: 450px;
  }
  .jw-others__name { font-size: 22px; }
  .jw-others__link { font-size: 18px; }
}


/* =====================================================
   28. ROOM DETAIL — WIDE (≥1440px) — content area = 1440px,
   flush left with gallery image (no inner padding)
   ===================================================== */
@media (min-width: 1440px) {
  .jw-info__inner,
  .jw-happy__inner,
  .jw-block__inner,
  .jw-inside__inner,
  .jw-others__inner {
    max-width: 1440px;
    padding: 0;
    margin: 0 auto;
  }
  .jw-gallery__frame { max-width: 1440px; }
  .jw-checkin__inner { max-width: 1440px; padding: 0; }
}

/* =====================================================
   See our other rooms — scope override for JWR detail page.
   Only 2 cards → center them instead of stretching full width.
   ===================================================== */
.jw-others-property {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}
.jw-others-property .section-property__rooms {
  justify-content: center;
}
@media (min-width: 1024px) {
  .jw-others-property {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  .jw-others-property .section-property__rooms {
    max-width: 1000px;
    justify-content: center;
    gap: 40px;
  }
  .jw-others-property .section-property__room-card {
    flex: 0 1 460px;
    max-width: 460px;
  }
}
/* See our other rooms — PC (≥1600px): match Inside Your Space 705 × 450 */
@media (min-width: 1600px) {
  .jw-others-property .section-property__rooms {
    max-width: 1440px;
    justify-content: space-between;
    gap: 30px;
  }
  .jw-others-property .section-property__room-card {
    flex: 0 0 705px;
    width: 705px;
    max-width: 705px;
  }
  .jw-others-property .section-property__room-image {
    width: 705px;
    height: 450px;
  }
  .jw-others-property .section-property__room-thumbnails {
    width: 705px;
    max-width: 705px;
  }
}

/* =====================================================
   LIGHTBOX — Fullscreen gallery viewer for JWR
   ===================================================== */
.jw-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 12, 8, 0.96);
  display: none;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.jw-lightbox.is-open {
  display: flex;
}
body.lightbox-open {
  overflow: hidden;
}

.jw-lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.jw-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.05);
}
.jw-lightbox__close svg { display: block; }

.jw-lightbox__counter {
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 10;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.85);
}

.jw-lightbox__stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 0;
  position: relative;
  width: 100%;
  padding: 0;
}
.jw-lightbox__main {
  flex: 1;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.jw-lightbox__track {
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}
.jw-lightbox__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.jw-lightbox__slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.jw-lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.95;
}
.jw-lightbox__arrow--prev { left: 20px; }
.jw-lightbox__arrow--next { right: 20px; }
.jw-lightbox__arrow:hover {
  transform: translateY(-50%) scale(1.08);
  opacity: 1;
}
.jw-lightbox__arrow img { width: 56px; height: 56px; display: block; }

.jw-lightbox__thumbs {
  margin-top: 0;
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 16px 12px;
  background: rgba(0, 0, 0, 0.35);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.jw-lightbox__thumbs::-webkit-scrollbar {
  height: 6px;
}
.jw-lightbox__thumbs::-webkit-scrollbar-track {
  background: transparent;
}
.jw-lightbox__thumbs::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.jw-lightbox__thumb {
  flex-shrink: 0;
  width: 110px;
  height: 70px;
  background: none;
  border: 2px solid transparent;
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s ease, opacity 0.2s ease;
  opacity: 0.55;
}
.jw-lightbox__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.jw-lightbox__thumb:hover {
  opacity: 0.85;
}
.jw-lightbox__thumb.is-active {
  border-color: #fff;
  opacity: 1;
}

/* PC larger arrows */
@media (min-width: 1024px) {
  .jw-lightbox { padding: 0; }
  .jw-lightbox__arrow { width: 68px; height: 68px; }
  .jw-lightbox__arrow img { width: 68px; height: 68px; }
  .jw-lightbox__arrow--prev { left: 32px; }
  .jw-lightbox__arrow--next { right: 32px; }
  .jw-lightbox__thumb { width: 140px; height: 90px; }
  .jw-lightbox__counter { font-size: 15px; top: 24px; left: 32px; }
  .jw-lightbox__close { top: 24px; right: 32px; width: 48px; height: 48px; }
  .jw-lightbox__slide { padding: 40px; }
}

/* Small mobile — smaller arrows, tighter thumbs */
@media (max-width: 640px) {
  .jw-lightbox { padding: 0; }
  .jw-lightbox__arrow { width: 44px; height: 44px; }
  .jw-lightbox__arrow img { width: 44px; height: 44px; }
  .jw-lightbox__arrow--prev { left: 8px; }
  .jw-lightbox__arrow--next { right: 8px; }
  .jw-lightbox__stage { gap: 0; }
  .jw-lightbox__slide { padding: 10px; }
  .jw-lightbox__thumb { width: 80px; height: 52px; }
}

/* =====================================================
   GLOBAL — Image zoom on hover (all pages)
   Soft scale(1.05) with smooth 0.6s easing — same feel
   as toppage. Container needs overflow:hidden so zoom
   stays bounded inside its frame.
   ===================================================== */
.jw-gallery__frame,
.jw-happy__photo,
.jw-inside__media,
.section-property__room-image,
.section-next__card-image,
.space-room__image-wrapper,
.section-experience__pc-image,
.gallery__item,
.jw-others__hero {
  overflow: hidden;
}

.jw-gallery__slide img,
.jw-happy__photo img,
.jw-inside__media img,
.section-property__room-image img,
.section-next__card-image img,
.space-room__image-wrapper img,
.section-experience__pc-image img,
.gallery__item img {
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}

/* Trigger zoom on hovering the card / container */
.jw-gallery__frame:hover .jw-gallery__slide.is-active img,
.jw-happy__photo:hover img,
.jw-inside__media:hover img,
.section-property__room-card:hover .section-property__room-image img,
.section-next__card:hover .section-next__card-image img,
.space-room__image-wrapper:hover img,
.section-experience__pc-image:hover img,
.gallery__item:hover img {
  transform: scale(1.05);
}

/* Lightbox track/thumbs must NOT inherit this (they use translateX / own hover) */
.jw-lightbox__slide img,
.jw-lightbox__thumb img {
  transition: none !important;
  transform: none !important;
}

/* =====================================================
   29. JWR DETAIL — LAPTOP (1280px – 1599px)
   Scales down PC values to match common laptop widths
   (1280, 1366, 1440, 1536). Mirrors rooms.html laptop scale.
   ===================================================== */
@media (min-width: 1280px) and (max-width: 1599px) {
  /* Content max-width 1080px (same as rooms.html laptop) */
  .jw-info__inner,
  .jw-happy__inner,
  .jw-block__inner,
  .jw-inside__inner,
  .jw-others__inner {
    max-width: 1080px !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }
  .jw-checkin__inner {
    max-width: 1080px;
    padding: 0;
  }

  /* Hero — slightly shorter on laptop */
  .jw-hero { height: 375px; }
  .jw-hero__title h1 { font-size: 46px; letter-spacing: 0.5px; }

  /* Gallery slider — proportional 1080 × 660 */
  .jw-gallery__frame {
    max-width: 1080px;
    height: 660px;
  }
  .jw-gallery__arrow { width: 56px; height: 56px; }
  .jw-gallery__arrow img { width: 56px; height: 56px; }
  .jw-gallery__arrow--prev { left: 30px; }
  .jw-gallery__arrow--next { right: 30px; }
  .jw-gallery__cta {
    right: 30px; bottom: 30px;
    height: 38px;
    font-size: 14px;
  }

  /* Specs — slightly smaller text */
  .jw-info { padding: 60px 0 80px; }
  .jw-specs { gap: 22px; padding-bottom: 40px; }
  .jw-specs__icon { width: 24px; height: 24px; }
  .jw-specs__text,
  .jw-specs__label { font-size: 18px; }

  /* Floor Plan accordion 70px */
  .jw-info .jw-accordion__head { min-height: 70px; padding: 0; }

  /* Being Happy Together — split layout, reduce font */
  .jw-happy { padding: 80px 0; }
  .jw-happy__inner {
    grid-template-columns: 460px 1fr;
    gap: 60px;
  }
  .jw-happy__photos { width: 460px; gap: 10px; }
  .jw-happy__photo { width: 460px; height: 308px; }
  .jw-happy__heading { font-size: 36px; margin-bottom: 26px; }
  .jw-happy__intro,
  .jw-happy__more { font-size: 14px; line-height: 1.95em; }
  .jw-happy__highlight { font-size: 16px; font-weight: 600; font-style: normal; letter-spacing: 4px; text-transform: uppercase; color: #4D4D4D; margin-top: 50px !important; }

  /* Block sections — Amenities / Facility / Services / FAQ */
  .jw-block { padding: 50px 0; }
  .jw-block__heading,
  .jw-inside__heading,
  .jw-others__heading,
  .jw-others-property .section__heading {
    font-size: 36px !important;
    margin-bottom: 40px;
  }
  .jw-cols-3 { gap: 50px; }
  .jw-itemlist { font-size: 15px; gap: 12px; }

  /* Service / FAQ rows */
  .jw-rowlist .jw-accordion__head {
    min-height: 70px;
    padding: 0 6px;
    font-size: 17px;
  }
  .jw-rowlist .jw-accordion__body { font-size: 15px; }

  /* Inside Your Space — proportional 525 × 335 */
  .jw-inside { padding: 50px 0; }
  .jw-inside__grid {
    grid-template-columns: 525px 525px;
    gap: 30px;
    justify-content: space-between;
  }
  .jw-inside__media { width: 525px; height: 335px; }
  .jw-inside__cta {
    right: 20px; bottom: 20px;
    height: 38px;
    font-size: 14px;
  }
  .jw-inside__label { font-size: 18px; }

  /* See our other rooms — match Inside Your Space (525 × 335) */
  .jw-others-property { padding-top: 50px !important; padding-bottom: 50px !important; }
  .jw-others-property .section-property__rooms {
    max-width: 1080px;
    justify-content: space-between;
    gap: 30px;
  }
  .jw-others-property .section-property__room-card {
    flex: 0 0 525px;
    width: 525px;
    max-width: 525px;
  }
  .jw-others-property .section-property__room-image {
    width: 525px;
    height: 335px;
  }
  .jw-others-property .section-property__room-thumbnails {
    width: 525px;
    max-width: 525px;
  }

  /* Floor Plan image — fits within laptop content width */
  .jw-floorplan img { max-width: 100%; }
}


/* =====================================================
   30. JWR MOBILE — Figma node 446:34474 (≤767px)
   White top area (nav + dark title), check-in in 2 rows.
   Scoped to mobile only — does NOT affect tablet, PC, or laptop.
   ===================================================== */
@media (max-width: 767px) {
  /* Hero: remove dark image overlay, use white flow layout */
  .jw-hero {
    background-image: none;
    background-color: #FFFFFF;
    height: auto;
    overflow: visible;
  }
  .jw-hero__overlay { display: none; }

  /* Nav bar — now in flow (not absolute) — JWR room pages only.
     Scoped to body.jwr-page so other pages (inquire, our-story, etc.)
     keep the default ABSOLUTE-over-hero nav styling. */
  body.jwr-page .jw-hero__nav--mobile {
    position: relative;
    top: auto;
    left: auto; right: auto;
    margin: 25px 0 0;
  }

  /* Dark hamburger lines (per Figma #4D4D4D-family) — JWR pages only */
  body.jwr-page .jw-hero__hamburger svg line { stroke: #4D4D4D; }

  /* Swap logo to black variant — JWR pages only */
  body.jwr-page .jw-hero__logo img {
    content: url('../images/shared/logo/AGD_logo_black.svg');
  }

  /* Reserve button — black bg, white text (per Figma) — JWR pages only */
  body.jwr-page .jw-hero__reserve {
    background: #000000;
    color: #FFFFFF;
  }

  /* Sticky nav — once JS adds .is-scrolled, fix the nav to top of viewport.
     This rule must come AFTER the body.jwr-page relative rule above so it wins. */
  body.jwr-page .jw-hero__nav--mobile.is-scrolled {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
  }

  /* Page title — flow in natural position, dark color, centered */
  .jw-hero__title {
    position: relative;
    top: auto;
    left: auto; right: auto;
    transform: none;
    padding: 50px 25px 0;
    margin: 0;
    z-index: auto;
  }
  .jw-hero__title h1 {
    color: #4D4D4D;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.3;
    letter-spacing: 0;
  }

  /* Check-in bar — 2-row grid (Figma: CHECK-IN | 3:00PM / CHECK-OUT | 11:00AM) */
  .jw-checkin {
    padding: 50px 0;
  }
  .jw-checkin__inner {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    row-gap: 20px;
    column-gap: 20px;
  }
  /* display:contents lets the two center items become direct grid items */
  .jw-checkin__center { display: contents; }

  .jw-checkin__inner > .jw-checkin__item:first-child {
    grid-row: 1; grid-column: 1;
  }
  .jw-checkin__center > .jw-checkin__item:first-child {
    grid-row: 1; grid-column: 2;
    justify-self: end;
  }
  .jw-checkin__center > .jw-checkin__item:last-child {
    grid-row: 2; grid-column: 1;
  }
  .jw-checkin__inner > .jw-checkin__item:last-child {
    grid-row: 2; grid-column: 2;
    justify-self: end;
  }
  .jw-checkin__item { font-size: 14px; }

  /* Gallery — Figma mobile: image area 440×600, arrows 36×36 */
  .jw-gallery__frame {
    height: 600px;
  }
  /* Fill full width of mobile, crop as needed (no letterbox) */
  .jw-gallery__slide img {
    object-fit: cover;
  }
  .jw-gallery__arrow {
    width: 36px;
    height: 36px;
  }
  .jw-gallery__arrow img {
    width: 36px;
    height: 36px;
  }
  .jw-gallery__arrow--prev { left: 14px; }
  .jw-gallery__arrow--next { right: 14px; }

  /* View all photos CTA — Figma mobile height 30px */
  .jw-gallery__cta {
    height: 30px;
    padding: 0 13px;
    gap: 8px;
    font-size: 14px;
  }
  .jw-gallery__cta img { width: 16px; height: 16px; }

  /* Specs — Figma mobile: icons 20×20, labels weight 500, values normal,
     added gap between rows for breathing room */
  .jw-specs {
    gap: 20px;
    padding: 0 0 30px;
  }
  .jw-specs__row {
    align-items: flex-start;
    line-height: 1.5em;
  }
  .jw-specs__icon {
    width: 20px;
    height: 20px;
    margin-top: 2px;
  }
  .jw-specs__text {
    font-weight: 400;
    line-height: 1.5em;
  }
  .jw-specs__label { font-weight: 500; }

  /* Section headings — Figma mobile: all 36px, Playfair Display 400 */
  .jw-happy__heading,
  .jw-block__heading,
  .jw-inside__heading,
  .jw-others__heading,
  .jw-others-property .section__heading {
    font-size: 30px;
    line-height: 1.3;
    margin: 0 0 30px;
  }
  /* Being Happy Together — 50px gap between heading and photos */
  .jw-happy__heading { margin-bottom: 50px; }

  /* Smaller gap before highlight lines on mobile (default is 70px) */
  .jw-happy__highlight { margin-top: 40px !important; }

  /* Section vertical padding on mobile.
     Rule:
       - Same background-color adjacent sections → total gap = 100px (50 + 50)
       - Different background-color adjacent sections → total gap = 200px (100 + 100)
     .jw-happy (cream) sits between .jw-info (white) and .jw-block--amenities (white),
     so .jw-happy gets 100px both sides, and .jw-block--amenities gets 100px top
     to match the cream/white boundary. All other white sections stay at 50/50. */
  .jw-block,
  .jw-inside,
  .jw-others-property {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .jw-happy {
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .jw-block--amenities {
    padding-top: 100px;
  }
  /* Zero out extra padding/margin on Show more button so it doesn't compound section padding */
  .jw-block .jw-toggle,
  .jw-happy .jw-toggle {
    margin-top: 16px;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .jw-itemlist {
    gap: 20px;
    font-size: 14px;
    line-height: 1.5;
  }
  .jw-itemlist li {
    gap: 30px;
    align-items: center;
  }
  .jw-itemlist li img {
    width: 20px;
    height: 20px;
  }

  /* Lightbox — mobile: image fills full screen width, arrows overlaid */
  .jw-lightbox {
    padding-left: 0;
    padding-right: 0;
  }
  .jw-lightbox__stage {
    gap: 0;
  }
  .jw-lightbox__main {
    width: 100%;
    flex: 1 1 100%;
  }
  .jw-lightbox__slide {
    height: auto;
    min-height: 100%;
  }
  .jw-lightbox__slide img {
    width: 100vw;
    max-width: 100vw;
    height: auto;
    max-height: none;
    object-fit: contain;
  }
  .jw-lightbox__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 40px;
  }
  .jw-lightbox__arrow--prev { left: 12px; }
  .jw-lightbox__arrow--next { right: 12px; }

  /* Inside Your Space — View all N photos CTA: 30px height on mobile */
  .jw-inside__cta {
    height: 30px;
    padding: 0 13px;
    gap: 8px;
    font-size: 14px;
  }
  .jw-inside__cta img,
  .jw-inside__cta svg {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px;
    max-height: 16px;
  }

  /* See our other rooms — scale down card to 300px width proportionally on mobile for JW page only
     (.jw-others-property is unique to the Japanese-Western Room page, toppage unaffected)
     Original ratios: image 390×480 (0.8125), thumbnails 390×100, so scale height by 300/390 ≈ 0.77 */
  .jw-others-property .section-property__rooms {
    align-items: center;
    justify-content: center;
  }
  .jw-others-property .section-property__room-card {
    max-width: 380px;
    width: 100%;
    margin: 0 auto;
  }
  .jw-others-property .section-property__room-image {
    max-width: 380px;
    width: 100%;
    height: 280px;
  }
  .jw-others-property .section-property__room-thumbnails {
    max-width: 380px;
    width: 100%;
    gap: 18px;
  }
  .jw-others-property .section-property__thumb {
    height: 97px; /* 100 × (380/390) */
  }

  /* Amenities / Facility (Figma default = 5 items visible + Show more).
     Always render the body on mobile — override [data-more-content] collapse;
     hide extra columns + footnote until .is-expanded is toggled on the body. */
  .jw-block--amenities .jw-block__body,
  .jw-block--facility .jw-block__body {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
  /* Collapsed: keep first column (5 items) only, hide cols 2-3 + note */
  .jw-block--amenities .jw-block__body:not(.is-expanded) .jw-cols-3 > .jw-itemlist:nth-child(n+2),
  .jw-block--amenities .jw-block__body:not(.is-expanded) .jw-block__note,
  .jw-block--facility .jw-block__body:not(.is-expanded) .jw-cols-3 > .jw-itemlist:nth-child(n+2),
  .jw-block--facility .jw-block__body:not(.is-expanded) .jw-block__note {
    display: none;
  }
}



/* =============================================================
   PC — See Our Other Rooms: force 705×450 to match
   Inside Your Space. Only ≥1600px; laptop & mobile untouched.
   ============================================================= */
@media (min-width: 1600px) {
  .jw-others-property .section-property__rooms {
    max-width: 1440px !important;
    justify-content: space-between !important;
    gap: 30px !important;
  }
  .jw-others-property .section-property__room-card {
    flex: 0 0 705px !important;
    width: 705px !important;
    max-width: 705px !important;
  }
  .jw-others-property .section-property__room-image {
    width: 705px !important;
    height: 450px !important;
    max-width: none !important;
  }
  .jw-others-property .section-property__room-thumbnails {
    width: 705px !important;
    max-width: 705px !important;
  }
}

/* See our other rooms — title left-aligned, 50px gap to images */
.jw-others-property .section-property__header {
  align-items: flex-start;
  margin-bottom: 50px;
}

/* See our other rooms — align title left edge with images */
.jw-others-property .section-property__header {
  align-items: flex-start;
  margin-bottom: 50px;
  width: 100%;
  max-width: 390px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .jw-others-property .section-property__header { max-width: 700px; }
}
@media (min-width: 1024px) {
  .jw-others-property .section-property__header { max-width: 1000px; }
}
@media (min-width: 1280px) and (max-width: 1599px) {
  .jw-others-property .section-property__header { max-width: 1080px; }
}
@media (min-width: 1600px) {
  .jw-others-property .section-property__header { max-width: 1440px; }
}

/* Center "Inside Your Space" and "See our other rooms" headings */
.jw-inside__heading {
  text-align: center;
}
.jw-others-property .section-property__header {
  align-items: center;
}

/* Laptop: title–images gap = 50px */
@media (min-width: 1280px) and (max-width: 1599px) {
  .jw-others-property .section-property__header {
    margin-bottom: 50px !important;
  }
}

/* Laptop: reduce title–images gap by 40px */
@media (min-width: 1280px) and (max-width: 1599px) {
  .jw-others-property .section-property__header {
    margin-bottom: 10px !important;
  }
}

@media (min-width: 1280px) and (max-width: 1599px) {
  .jw-others-property .section-property__header {
    margin-bottom: 0px !important;
  }
}

/* PC: thumbnails taller by 40px (100 → 140px) */
@media (min-width: 1600px) {
  .jw-others-property .section-property__thumb {
    height: 140px !important;
  }
}

/* PC: thumbnails 140 → 130px */
@media (min-width: 1600px) {
  .jw-others-property .section-property__thumb {
    height: 130px !important;
  }
}

/* Mobile: thumbnails 97 → 77px */
@media (max-width: 767px) {
  .jw-others-property .section-property__thumb {
    height: 77px !important;
  }
}

@media (max-width: 767px) {
  .jw-others-property .section-property__thumb {
    height: 67px !important;
  }
}

/* Rooms page: subtitle text italic */
.space-room__subtitle {
  font-style: italic;
}

/* br visible only on laptop (1280–1599px) */
.br-laptop-only { display: none; }
@media (min-width: 1280px) and (max-width: 1599px) {
  .br-laptop-only { display: block; }
}

/* ===== SECTION 31: Font size 14px → 16px (English only) ===== */
/* Scoped to body:not(.lang-ja) so Japanese is NOT affected     */

body:not(.lang-ja) {
  font-size: 16px !important;
}

body:not(.lang-ja) .agd-menu__lang span,
body:not(.lang-ja) .lang-dropdown__header,
body:not(.lang-ja) .lang-dropdown__item,
body:not(.lang-ja) .agd-menu__sub-link,
body:not(.lang-ja) .agd-menu__discovery-label,
body:not(.lang-ja) .agd-menu__discovery-name,
body:not(.lang-ja) .agd-menu__discovery-desc,
body:not(.lang-ja) .agd-menu__discovery-link,
body:not(.lang-ja) .agd-menu__link span,
body:not(.lang-ja) .pc-nav__links .pc-nav__dropdown-link,
body:not(.lang-ja) .pc-nav__lang-toggle span,
body:not(.lang-ja) .section-concept__story-body p,
body:not(.lang-ja) .section-experience__subsection-body,
body:not(.lang-ja) .section-experience__pc-image-caption span,
body:not(.lang-ja) .section-property__description,
body:not(.lang-ja) .toppage-rooms .section-property__description,
body:not(.lang-ja) .section-usage__reservation p,
body:not(.lang-ja) .section-usage__note,
body:not(.lang-ja) .section-usage__airbnb-rating,
body:not(.lang-ja) .section-usage__airbnb-text,
body:not(.lang-ja) .section-service__card p,
body:not(.lang-ja) .section-press__description,
body:not(.lang-ja) .section-access__description,
body:not(.lang-ja) .section-access__transport-item p,
body:not(.lang-ja) .section-access__address p,
body:not(.lang-ja) .section-access__feature-item span,
body:not(.lang-ja) .section-access__info .section-access__link,
body:not(.lang-ja) .section-footer__airbnb-rating,
body:not(.lang-ja) .section-footer__airbnb-text,
body:not(.lang-ja) .section-footer__bottom p,
body:not(.lang-ja) .space-intro__text,
body:not(.lang-ja) .space-slideshow__placeholder,
body:not(.lang-ja) .space-room__specs p,
body:not(.lang-ja) .jw-gallery__cta,
body:not(.lang-ja) .jw-specs__text,
body:not(.lang-ja) .jw-accordion__head,
body:not(.lang-ja) .jw-happy__more,
body:not(.lang-ja) .jw-toggle,
body:not(.lang-ja) .jw-itemlist,
body:not(.lang-ja) .jw-inside__cta,
body:not(.lang-ja) .jw-others__link,
body:not(.lang-ja) .jw-lightbox__counter,
body:not(.lang-ja) .jw-rowlist .jw-accordion__body,
body:not(.lang-ja) .jw-checkin__item,
body:not(.lang-ja) .jw-floorplan__item figcaption,
body:not(.lang-ja) .agd-menu__lang--mobile .agd-menu__lang-row span,
body:not(.lang-ja) .lang-dropdown--mobile .lang-dropdown__item {
  font-size: 16px !important;
}

/* ===== SECTION 32: Font 14px → 16px – inline PHP page styles (English only) ===== */
/* Overrides <style> blocks inside PHP page templates for body:not(.lang-ja)        */

/* --- page-discover-fukuoka.php --- */
body:not(.lang-ja) .df-intro__body,
body:not(.lang-ja) .df-tour__body,
body:not(.lang-ja) .df-tour__bullets,
body:not(.lang-ja) .df-tour .df-card__name,
body:not(.lang-ja) .df-row .df-card__name,
body:not(.lang-ja) .df-row__body,
body:not(.lang-ja) .df-row__eyebrow,
body:not(.lang-ja) .df-tabs,
body:not(.lang-ja) .df-tab,

/* --- page-our-story.php --- */
body:not(.lang-ja) .os-eyebrow,
body:not(.lang-ja) .os-signature__name,
body:not(.lang-ja) .os-chapter-label,
body:not(.lang-ja) .os-dropcap,
body:not(.lang-ja) .os-story-subhead,
body:not(.lang-ja) .os-story-quote,
body:not(.lang-ja) .os-story-body,
body:not(.lang-ja) .os-story-card__caption,
body:not(.lang-ja) .os-story-pull,
body:not(.lang-ja) .os-but__label,
body:not(.lang-ja) .os-paradox__body,
body:not(.lang-ja) .os-chapter-two__sublabel,
body:not(.lang-ja) .os-chapter-one-intro__body,
body:not(.lang-ja) .os-chapter-two__body,
body:not(.lang-ja) .os-final__label,

/* --- page-company-story.php --- */
body:not(.lang-ja) .cst-tagline__body,
body:not(.lang-ja) .cst-origin__body p,
body:not(.lang-ja) .cst-definition__text p,
body:not(.lang-ja) .cst-vm__body,
body:not(.lang-ja) .cst-hero__eyebrow,
body:not(.lang-ja) .cst-eyebrow,

/* --- page-company.php --- */
body:not(.lang-ja) .cp-about__label,
body:not(.lang-ja) .cp-about__body,
body:not(.lang-ja) .cp-wch__label,
body:not(.lang-ja) .cp-hotels__qa-q,
body:not(.lang-ja) .cp-hotels__qa-a,
body:not(.lang-ja) .cp-hotels__qa-circle,
body:not(.lang-ja) .cp-hotels__ops-title,
body:not(.lang-ja) .cp-hotels__ops-item-text,
body:not(.lang-ja) .cp-hotels__ops-sub-bullet,
body:not(.lang-ja) .cp-hotels__ops-subitem-text,
body:not(.lang-ja) .cp-expertise__label,
body:not(.lang-ja) .cp-expertise__sub,
body:not(.lang-ja) .cp-expertise__desc,
body:not(.lang-ja) .cp-expertise__grid-desc,
body:not(.lang-ja) .cp-diff__row-body,
body:not(.lang-ja) .cp-sustain__label,
body:not(.lang-ja) .cp-projects__label,
body:not(.lang-ja) .cp-projects__address-text,
body:not(.lang-ja) .cp-projects__link,
body:not(.lang-ja) .cp-projects__list-text,
body:not(.lang-ja) .cp-contact__field-wrap textarea,
body:not(.lang-ja) .cp-contact__label,
body:not(.lang-ja) .cp-map__addr-text,
body:not(.lang-ja) .cp-map__directions-link,
body:not(.lang-ja) .cp-map__email-text,
body:not(.lang-ja) .cp-map__phone-text,
body:not(.lang-ja) .cp-success-modal__body,
body:not(.lang-ja) .cp-contact .wpcf7-response-output,

/* --- page-contact.php --- */
body:not(.lang-ja) .ct-subtitle,
body:not(.lang-ja) .ct-field textarea,
body:not(.lang-ja) .ct-success-modal__body,
body:not(.lang-ja) .ct-success-modal__close,
body:not(.lang-ja) .ct-form-wrap .wpcf7-form-control:not([type="submit"]),

/* --- page-inquire.php --- */
body:not(.lang-ja) .iq-form__sub,
body:not(.lang-ja) .iq-field textarea,
body:not(.lang-ja) .iq-field__label,
body:not(.lang-ja) .iq-flag-btn,
body:not(.lang-ja) .iq-flag-list__search input,
body:not(.lang-ja) .iq-flag-list li,
body:not(.lang-ja) .iq-field--select .iq-select-display,
body:not(.lang-ja) .iq-select-list li,
body:not(.lang-ja) .iq-field--date .iq-date-display,
body:not(.lang-ja) .iq-date-display,
body:not(.lang-ja) .iq-cal__monthlabel,
body:not(.lang-ja) .iq-cal__action,
body:not(.lang-ja) .iq-success-modal__body,
body:not(.lang-ja) .iq-success-modal__close,
body:not(.lang-ja) .iq-form-card .wpcf7-form-control[type="date"],
body:not(.lang-ja) .iq-form-card .wpcf7-form-control[type="date"]::-webkit-datetime-edit,

/* --- page-sustainability.php --- */
body:not(.lang-ja) .su-goal,
body:not(.lang-ja) .su-work-section__intro,
body:not(.lang-ja) .su-work-section__label,
body:not(.lang-ja) .su-work__body,
body:not(.lang-ja) .su-work__impact-label,
body:not(.lang-ja) .su-work__impact-text,
body:not(.lang-ja) .su-hero__eyebrow,
body:not(.lang-ja) .su-intro__label,
body:not(.lang-ja) .su-intro__body,
body:not(.lang-ja) .su-stat__label,
body:not(.lang-ja) .su-banner__label,
body:not(.lang-ja) .su-targets__label,
body:not(.lang-ja) .su-quote__label,
body:not(.lang-ja) .su-contact__label,

/* --- shared form elements (phone, WP CF7) --- */
body:not(.lang-ja) .phone-wrapper .wpcf7-form-control,
body:not(.lang-ja) .phone-wrapper input.wpcf7-form-control,
body:not(.lang-ja) .phone-panel-item,
body:not(.lang-ja) .wpcf7-response-output,

/* --- page-karuizawa / page-sapporo --- */
body:not(.lang-ja) .description {
  font-size: 16px !important;
}

/* inquire: the all-!important wpcf7 inputs rule needs extra specificity */
body:not(.lang-ja) .iq-form-card .wpcf7-form-control:not([type="submit"]):not([type="hidden"]):not(.wpcf7-select):not(.wpcf7-tel) {
  font-size: 16px !important;
}

/* ===== SECTION 33: our-story page – fix brownish text → #4D4D4D ===== */
.os-paradox__point p,
.os-paradox__body,
.os-but__label {
  color: #4D4D4D !important;
}

/* ===== SECTION 34: jw-happy – body text 16px, highlight 20px (English only) ===== */
body:not(.lang-ja) .jw-happy__more,
body:not(.lang-ja) .jw-happy__more p,
body:not(.lang-ja) .jw-happy__intro,
body:not(.lang-ja) .jw-happy__intro p {
  font-size: 16px !important;
}

body:not(.lang-ja) .jw-happy__highlight {
  font-size: 20px !important;
  letter-spacing: 4px;
  text-transform: uppercase;
}

/* ===== SECTION 35: Menu font sizes EN=16px / JA=14px + Inquire btn black ===== */

/* English: nav links + sub-links + CTA buttons + reserve btn → 16px */
body:not(.lang-ja) .agd-menu__link span,
body:not(.lang-ja) .agd-menu__sub-link,
body:not(.lang-ja) .agd-menu__cta,
body:not(.lang-ja) .agd-menu__reserve-btn,
body:not(.lang-ja) .agd-menu__reserve-btn--mobile {
  font-size: 16px !important;
}

/* Japanese: nav links + sub-links + CTA buttons + reserve btn → 14px */
body.lang-ja .agd-menu__link span,
body.lang-ja .agd-menu__sub-link,
body.lang-ja .agd-menu__cta,
body.lang-ja .agd-menu__reserve-btn,
body.lang-ja .agd-menu__reserve-btn--mobile {
  font-size: 14px !important;
}

/* "Inquire About Availability" CTA → black background */
.agd-menu__cta--dark {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}
.agd-menu__cta--dark:hover {
  background: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
}

/* ===== SECTION 36: Menu discovery – desc italic, link DM Sans 16px ===== */

/* Description text → italic */
.agd-menu__discovery-desc {
  font-style: italic !important;
}

/* "Discovery Now" link → DM Sans 14px (EN + JA, all breakpoints) */
.agd-menu__discovery-link {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
}

/* ===== SECTION 37: Form field content font-size → 16px (English only) ===== */

/* Generic catch-all: all text inputs, textareas, selects on English pages */
body:not(.lang-ja) input[type="text"],
body:not(.lang-ja) input[type="email"],
body:not(.lang-ja) input[type="tel"],
body:not(.lang-ja) input[type="date"],
body:not(.lang-ja) input[type="number"],
body:not(.lang-ja) textarea,
body:not(.lang-ja) select {
  font-size: 16px !important;
}

/* Specific selectors: contact page */
body:not(.lang-ja) .ct-field input,
body:not(.lang-ja) .ct-field textarea,
body:not(.lang-ja) .ct-form-wrap .wpcf7-form-control:not([type="submit"]),
body:not(.lang-ja) .ct-form-wrap .wpcf7-form-control.wpcf7-textarea,

/* Specific selectors: company page */
body:not(.lang-ja) .cp-contact .wpcf7-form-control:not([type="submit"]),
body:not(.lang-ja) .cp-contact .wpcf7-form-control.wpcf7-textarea,
body:not(.lang-ja) .cp-contact__field-wrap textarea,

/* Phone wrapper (shared across pages) */
body:not(.lang-ja) .phone-wrapper .wpcf7-form-control,
body:not(.lang-ja) .phone-wrapper input.wpcf7-form-control {
  font-size: 16px !important;
}

/* ===== SECTION 38: Heading size spec – H1/H2/H3 all pages, all devices ===== */
/*                                                                               */
/*  Mobile  ≤767px : H1=36  H2=28  H3=22                                        */
/*  Tablet  768-1023: H1=40  H2=30  H3=24                                        */
/*  Laptop 1024-1279: H1=44  H2=32  H3=26                                        */
/*  PC     1280+    : H1=46  H2=36  H3=28                                        */
/* ============================================================================= */

/* ---- H1 selectors ---- */
h1,
.jw-hero__title h1,
.space-banner__title,
.os-hero__title,
.df-hero__title,
.ct-title,
.iq-hero__title,
.su-hero__title,
.cp-hero__title,
.cst-hero__title {
  font-size: 36px !important;
}

/* ---- H2 selectors ---- */
h2,
.section__heading,
.jw-happy__heading,
.jw-block__heading,
.jw-inside__heading,
.jw-others__heading,
.jw-others-property .section__heading,
.os-chapter-heading,
.os-paradox__heading,
.os-chapter-two__heading,
.os-final__statement,
.df-h2,
.su-intro__heading,
.su-banner__heading,
.su-targets__title,
.su-work-section__title,
.su-work__heading,
.su-contact__heading,
.cp-wch__heading,
.cp-hotels__heading,
.cp-expertise__heading,
.cp-diff__title,
.cp-projects__heading,
.cp-team__heading,
.cp-contact__heading,
.cst-origin__title,
.cst-vm__title,
.space-intro__heading {
  font-size: 28px !important;
}

/* ---- H3 selectors ---- */
h3:not(.section-access__transport-item h3),
.jw-happy__closing,
.df-tour__title,
.os-letter__heading,
.space-room__title,
.cp-diff__row-title,
.cp-about__heading,
.section-service__card h3,
.section-usage__membership h3,
.cst-tagline__subtitle,
.su-hero__lede {
  font-size: 20px !important;
}

/* === Tablet 768–1023px === */
@media (min-width: 768px) and (max-width: 1023px) {
  h1,
  .jw-hero__title h1,
  .space-banner__title,
  .os-hero__title,
  .df-hero__title,
  .ct-title,
  .iq-hero__title,
  .su-hero__title,
  .cp-hero__title,
  .cst-hero__title { font-size: 40px !important; }

  h2,
  .section__heading,
  .jw-happy__heading,
  .jw-block__heading,
  .jw-inside__heading,
  .jw-others__heading,
  .jw-others-property .section__heading,
  .os-chapter-heading,
  .os-paradox__heading,
  .os-chapter-two__heading,
  .os-final__statement,
  .df-h2,
  .su-intro__heading,
  .su-banner__heading,
  .su-targets__title,
  .su-work-section__title,
  .su-work__heading,
  .su-contact__heading,
  .cp-wch__heading,
  .cp-hotels__heading,
  .cp-expertise__heading,
  .cp-diff__title,
  .cp-projects__heading,
  .cp-team__heading,
  .cp-contact__heading,
  .cst-origin__title,
  .cst-vm__title,
  .space-intro__heading { font-size: 30px !important; }

  h3:not(.section-access__transport-item h3),
  .jw-happy__closing,
  .df-tour__title,
  .os-letter__heading,
  .space-room__title,
  .cp-diff__row-title,
  .cp-about__heading,
  .section-service__card h3,
  .section-usage__membership h3,
  .cst-tagline__subtitle,
  .su-hero__lede { font-size: 22px !important; }
}

/* === Laptop 1024–1279px === */
@media (min-width: 1024px) and (max-width: 1279px) {
  h1,
  .jw-hero__title h1,
  .space-banner__title,
  .os-hero__title,
  .df-hero__title,
  .ct-title,
  .iq-hero__title,
  .su-hero__title,
  .cp-hero__title,
  .cst-hero__title { font-size: 44px !important; }

  h2,
  .section__heading,
  .jw-happy__heading,
  .jw-block__heading,
  .jw-inside__heading,
  .jw-others__heading,
  .jw-others-property .section__heading,
  .os-chapter-heading,
  .os-paradox__heading,
  .os-chapter-two__heading,
  .os-final__statement,
  .df-h2,
  .su-intro__heading,
  .su-banner__heading,
  .su-targets__title,
  .su-work-section__title,
  .su-work__heading,
  .su-contact__heading,
  .cp-wch__heading,
  .cp-hotels__heading,
  .cp-expertise__heading,
  .cp-diff__title,
  .cp-projects__heading,
  .cp-team__heading,
  .cp-contact__heading,
  .cst-origin__title,
  .cst-vm__title,
  .space-intro__heading { font-size: 32px !important; }

  h3:not(.section-access__transport-item h3),
  .jw-happy__closing,
  .df-tour__title,
  .os-letter__heading,
  .space-room__title,
  .cp-diff__row-title,
  .cp-about__heading,
  .section-service__card h3,
  .section-usage__membership h3,
  .cst-tagline__subtitle,
  .su-hero__lede { font-size: 22px !important; }
}

/* === PC 1280+px === */
@media (min-width: 1280px) {
  h1,
  .jw-hero__title h1,
  .space-banner__title,
  .os-hero__title,
  .df-hero__title,
  .ct-title,
  .iq-hero__title,
  .su-hero__title,
  .cp-hero__title,
  .cst-hero__title { font-size: 46px !important; }

  h2,
  .section__heading,
  .jw-happy__heading,
  .jw-block__heading,
  .jw-inside__heading,
  .jw-others__heading,
  .jw-others-property .section__heading,
  .os-chapter-heading,
  .os-paradox__heading,
  .os-chapter-two__heading,
  .os-final__statement,
  .df-h2,
  .su-intro__heading,
  .su-banner__heading,
  .su-targets__title,
  .su-work-section__title,
  .su-work__heading,
  .su-contact__heading,
  .cp-wch__heading,
  .cp-hotels__heading,
  .cp-expertise__heading,
  .cp-diff__title,
  .cp-projects__heading,
  .cp-team__heading,
  .cp-contact__heading,
  .cst-origin__title,
  .cst-vm__title,
  .space-intro__heading { font-size: 32px !important; }

  h3:not(.section-access__transport-item h3),
  .jw-happy__closing,
  .df-tour__title,
  .os-letter__heading,
  .space-room__title,
  .cp-diff__row-title,
  .cp-about__heading,
  .section-service__card h3,
  .section-usage__membership h3,
  .cst-tagline__subtitle,
  .su-hero__lede { font-size: 24px !important; }
}

/* === Restore exceptions that must NOT follow heading spec === */
.section-access__transport-item h3 { font-size: 16px !important; }

/* ===== SECTION 39: our-story paradox point text – EN=16px / JA=14px ===== */
body:not(.lang-ja) .os-paradox__point p {
  font-size: 16px !important;
}
body.lang-ja .os-paradox__point p {
  font-size: 14px !important;
}

/* ===== SECTION 40: br-ja-laptop-only – xuống dòng JA laptop+PC only ===== */
.br-ja-laptop-only { display: none; }
body.lang-ja .br-ja-laptop-only { display: none; }
@media (min-width: 1024px) {
  body.lang-ja .br-ja-laptop-only { display: block; }
}

/* ===== SECTION 41: br-ja-mb-only – xuống dòng JA mobile only ===== */
.br-ja-mb-only { display: none; }
@media (max-width: 767px) {
  body.lang-ja .br-ja-mb-only { display: block; }
}

/* ===== SECTION 42: Japanese button text — Noto Sans JP 14px ===== */
/* All text buttons, submit buttons, CTA links on Japanese pages */
body.lang-ja button,
body.lang-ja input[type="submit"],
body.lang-ja input[type="button"],
body.lang-ja input[type="reset"],
body.lang-ja .btn,
body.lang-ja .btn-outline,
body.lang-ja .btn-primary,
/* Nav & menu buttons */
body.lang-ja .agd-menu__cta,
body.lang-ja .agd-menu__reserve-btn,
body.lang-ja .agd-menu__reserve-btn--mobile,
body.lang-ja .pc-nav__reserve-btn,
body.lang-ja .jw-hero__reserve,
/* Room / gallery / facility CTAs */
body.lang-ja .jw-gallery__cta,
body.lang-ja .jw-inside__cta,
body.lang-ja .space-room__btn,
/* Page-specific CTAs */
body.lang-ja .cp-about__btn,
body.lang-ja .cp-sustain__btn,
body.lang-ja .cp-projects__view-btn,
body.lang-ja .cst-btn-outline,
body.lang-ja .su-contact__btn,
body.lang-ja .os-but__label,
/* Footer CTA */
body.lang-ja .section-footer__ctas a,
body.lang-ja .section-footer__ctas button {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif !important;
  font-size: 14px !important;
}

/* ===== SECTION 43: Company expertise names – font-weight 400 ===== */
.cp-expertise__name {
  font-weight: 400 !important;
}

/* ===== SECTION 43: Company – cp-wch__body & cp-sustain__quote ===== */
/* PC + Laptop (≥1024px): EN → 22px italic / JA → 22px normal */
@media (min-width: 1024px) {
  body:not(.lang-ja) .cp-wch__body,
  body:not(.lang-ja) .cp-sustain__quote {
    font-size: 22px !important;
    font-style: italic !important;
    line-height: 1.6 !important;
  }
  body.lang-ja .cp-wch__body {
    font-size: 22px !important;
    font-style: normal !important;
    line-height: 1.6 !important;
  }
}

/* Mobile ≤900px: font-size 20px; EN italic, JA normal */
@media (max-width: 900px) {
  .cp-wch__body,
  .cp-sustain__quote {
    font-size: 20px !important;
    line-height: 1.6 !important;
  }
  body:not(.lang-ja) .cp-wch__body {
    font-style: italic !important;
  }
}

/* ===== SECTION 44: English button text — 16px all pages ===== */
/* Covers all CTA, submit, and link-button elements on English pages */
body:not(.lang-ja) input[type="submit"],
body:not(.lang-ja) input[type="button"],
body:not(.lang-ja) .btn,
body:not(.lang-ja) .btn-outline,
body:not(.lang-ja) .btn-primary,
/* Nav reserve */
body:not(.lang-ja) .pc-nav__reserve-btn,
body:not(.lang-ja) .jw-hero__reserve,
/* Room / gallery / facility */
body:not(.lang-ja) .jw-gallery__cta,
body:not(.lang-ja) .jw-inside__cta,
body:not(.lang-ja) .space-room__btn,
/* Form submit (contact, company, inquire) */
body:not(.lang-ja) .ct-form-wrap .wpcf7 input[type="submit"],
body:not(.lang-ja) .cp-contact .wpcf7 input[type="submit"],
body:not(.lang-ja) .iq-form-card .wpcf7 input[type="submit"],
/* Page-specific CTAs */
body:not(.lang-ja) .cp-about__btn,
body:not(.lang-ja) .cp-sustain__btn,
body:not(.lang-ja) .cp-projects__view-btn,
body:not(.lang-ja) .cst-btn-outline,
body:not(.lang-ja) .su-contact__btn,
/* Footer */
body:not(.lang-ja) .section-footer__ctas a,
body:not(.lang-ja) .section-footer__ctas button {
  font-size: 16px !important;
}

/* ============================================================
   Section 45 — UPPERCASE LABEL TYPOGRAPHY — All Pages
   Spec: PC (≥1280px) = 18px | Laptop (1024–1279px) = 16px | Mobile (≤767px) = 16px
   letter-spacing: 4px at all breakpoints
   Overrides scattered per-page inline values (14px/20px, ls 2.4–5.2px)
   ============================================================ */

/* --- Default (mobile + tablet + laptop): 16px --- */
.section__label,
.jw-checkin__item,
.jw-times__label,
.jw-happy__highlight,
.jw-inside__label,
.cst-hero__eyebrow,
.cst-eyebrow,
.cp-about__label,
.cp-wch__label,
.cp-expertise__label,
.cp-sustain__label,
.cp-projects__label,
.cp-contact__label,
.df-eyebrow,
.df-row__eyebrow,
.iq-form__eyebrow,
.os-eyebrow,
.os-chapter-label,
.os-story-subhead,
.os-chapter-two__sublabel,
.os-final__label,
.os-but__label,
.su-hero__eyebrow,
.su-intro__label,
.su-stat__label,
.su-banner__label,
.su-targets__label,
.su-work-section__label,
.su-work__impact-label,
.su-quote__label,
.su-contact__label {
  font-size: 16px !important;
  letter-spacing: 4px !important;
}

/* Override Section 44's body:not(.lang-ja) .jw-happy__highlight { 20px } */
body:not(.lang-ja) .jw-happy__highlight {
  font-size: 16px !important;
  letter-spacing: 4px !important;
}

/* --- PC (≥1280px): 18px --- */
@media (min-width: 1280px) {
  .section__label,
  .jw-checkin__item,
  .jw-times__label,
  .jw-happy__highlight,
  .jw-inside__label,
  .cst-hero__eyebrow,
  .cst-eyebrow,
  .cp-about__label,
  .cp-wch__label,
  .cp-expertise__label,
  .cp-sustain__label,
  .cp-projects__label,
  .cp-contact__label,
  .df-eyebrow,
  .df-row__eyebrow,
  .iq-form__eyebrow,
  .os-eyebrow,
  .os-chapter-label,
  .os-story-subhead,
  .os-chapter-two__sublabel,
  .os-final__label,
  .os-but__label,
  .su-hero__eyebrow,
  .su-intro__label,
  .su-stat__label,
  .su-banner__label,
  .su-targets__label,
  .su-work-section__label,
  .su-work__impact-label,
  .su-quote__label,
  .su-contact__label {
    font-size: 18px !important;
    letter-spacing: 4px !important;
  }

  /* Override Section 44's body:not(.lang-ja) .jw-happy__highlight at PC */
  body:not(.lang-ja) .jw-happy__highlight {
    font-size: 18px !important;
    letter-spacing: 4px !important;
  }
}

/* ============================================================
   Section 46 — os-final__statement JA mobile line-height fix
   ============================================================ */
@media (max-width: 767px) {
  .os-final__statement {
    line-height: 40px !important;
  }
}

/* ============================================================
   Section 47 — H1 / H2 line-height on laptop + PC
   H1: line-height = 2 | H2: line-height = 1.8
   ============================================================ */
@media (min-width: 1024px) {
  h1,
  .jw-hero__title h1,
  .space-banner__title,
  .os-hero__title,
  .df-hero__title,
  .ct-title,
  .iq-hero__title,
  .su-hero__title,
  .cp-hero__title,
  .cst-hero__title {
    line-height: 1.2 !important;
  }

  h2,
  .section__heading,
  .jw-happy__heading,
  .jw-block__heading,
  .jw-inside__heading,
  .jw-others__heading,
  .jw-others-property .section__heading,
  .os-chapter-heading,
  .os-paradox__heading,
  .os-chapter-two__heading,
  .os-final__statement,
  .df-h2,
  .su-intro__heading,
  .su-banner__heading,
  .su-targets__title,
  .su-work-section__title,
  .su-work__heading,
  .su-contact__heading,
  .cp-wch__heading,
  .cp-hotels__heading,
  .cp-expertise__heading,
  .cp-diff__title,
  .cp-projects__heading,
  .cp-team__heading,
  .cp-contact__heading,
  .cst-origin__title,
  .cst-vm__title,
  .space-intro__heading {
    line-height: 1.2 !important;
  }
}

/* ============================================================
   Section 48 — H1 line-height = 1.2 / H2 line-height = 1.2 on mobile (≤767px)
   ============================================================ */
@media (max-width: 767px) {
  h1,
  .jw-hero__title h1,
  .space-banner__title,
  .os-hero__title,
  .df-hero__title,
  .ct-title,
  .iq-hero__title,
  .su-hero__title,
  .cp-hero__title,
  .cst-hero__title {
    line-height: 1.2 !important;
  }

  h2,
  .section__heading,
  .jw-happy__heading,
  .jw-block__heading,
  .jw-inside__heading,
  .jw-others__heading,
  .jw-others-property .section__heading,
  .os-chapter-heading,
  .os-paradox__heading,
  .os-chapter-two__heading,
  .os-final__statement,
  .df-h2,
  .su-intro__heading,
  .su-banner__heading,
  .su-targets__title,
  .su-work-section__title,
  .su-work__heading,
  .su-contact__heading,
  .cp-wch__heading,
  .cp-hotels__heading,
  .cp-expertise__heading,
  .cp-diff__title,
  .cp-projects__heading,
  .cp-team__heading,
  .cp-contact__heading,
  .cst-origin__title,
  .cst-vm__title,
  .space-intro__heading {
    line-height: 1.2 !important;
  }
}

/* ============================================================
   Section 49 — su-hero eyebrow→title gap: giảm 30px cho JA
   ============================================================ */
body.lang-ja .su-hero__eyebrow {
  margin-bottom: -30px !important;
}

/* ============================================================
   Section 50 — Reserve button — đồng bộ kích thước toàn bộ trang
   80×35px, border-radius pill, font-weight normal
   JA: 12px | EN: 14px
   ============================================================ */
/* --- Tất cả reserve buttons: kích thước cố định 80×35 --- */
.pc-nav__reserve-btn,
.jw-hero__reserve,
.section-hero__nav-reserve,
.space-banner__nav-reserve,
.ix2-hero__nav-reserve,
.agd-menu__reserve-btn,
.agd-menu__reserve-btn--mobile {
  width: 80px !important;
  height: 35px !important;
  min-width: 80px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50px !important;
  font-weight: 400 !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
/* EN: 14px */
body:not(.lang-ja) .pc-nav__reserve-btn,
body:not(.lang-ja) .jw-hero__reserve,
body:not(.lang-ja) .section-hero__nav-reserve,
body:not(.lang-ja) .space-banner__nav-reserve,
body:not(.lang-ja) .ix2-hero__nav-reserve,
body:not(.lang-ja) .agd-menu__reserve-btn,
body:not(.lang-ja) .agd-menu__reserve-btn--mobile {
  font-size: 14px !important;
}
/* JA: 12px */
body.lang-ja .pc-nav__reserve-btn,
body.lang-ja .jw-hero__reserve,
body.lang-ja .section-hero__nav-reserve,
body.lang-ja .space-banner__nav-reserve,
body.lang-ja .ix2-hero__nav-reserve,
body.lang-ja .agd-menu__reserve-btn,
body.lang-ja .agd-menu__reserve-btn--mobile {
  font-size: 12px !important;
}

/* --- Section 50b: PC/Laptop reserve button — wider + larger font --- */
@media (min-width: 768px) {
  .pc-nav__reserve-btn,
  .jw-hero__reserve,
  .section-hero__nav-reserve,
  .space-banner__nav-reserve,
  .ix2-hero__nav-reserve,
  .agd-menu__reserve-btn,
  .agd-menu__reserve-btn--mobile {
    width: 95px !important;
    min-width: 95px !important;
  }
  /* EN: 16px on laptop/PC */
  body:not(.lang-ja) .pc-nav__reserve-btn,
  body:not(.lang-ja) .jw-hero__reserve,
  body:not(.lang-ja) .section-hero__nav-reserve,
  body:not(.lang-ja) .space-banner__nav-reserve,
  body:not(.lang-ja) .ix2-hero__nav-reserve,
  body:not(.lang-ja) .agd-menu__reserve-btn,
  body:not(.lang-ja) .agd-menu__reserve-btn--mobile {
    font-size: 16px !important;
  }
  /* JA: 14px on laptop/PC */
  body.lang-ja .pc-nav__reserve-btn,
  body.lang-ja .jw-hero__reserve,
  body.lang-ja .section-hero__nav-reserve,
  body.lang-ja .space-banner__nav-reserve,
  body.lang-ja .ix2-hero__nav-reserve,
  body.lang-ja .agd-menu__reserve-btn,
  body.lang-ja .agd-menu__reserve-btn--mobile {
    font-size: 14px !important;
  }
}

/* ============================================================
   Section 51 — Reserve button fixes
   1) Mobile: font-weight 500 for EN & JA
   2) Hero-image pages: transparent bg, white border, white text
   ============================================================ */

/* --- 51a: Reserve buttons — font-weight 500, lowercase, all breakpoints --- */
.pc-nav__reserve-btn,
.jw-hero__reserve,
.section-hero__nav-reserve,
.space-banner__nav-reserve,
.ix2-hero__nav-reserve,
.agd-menu__reserve-btn,
.agd-menu__reserve-btn--mobile {
  font-weight: 500 !important;
  text-transform: none !important;
}
/* JA mobile: font-size 14px */
@media (max-width: 767px) {
  body.lang-ja .jw-hero__reserve,
  body.lang-ja .section-hero__nav-reserve,
  body.lang-ja .space-banner__nav-reserve,
  body.lang-ja .ix2-hero__nav-reserve,
  body.lang-ja .agd-menu__reserve-btn,
  body.lang-ja .agd-menu__reserve-btn--mobile {
    font-size: 14px !important;
  }
}

/* --- 51b: Hero-image pages — transparent button, white border, white text ---
   All sub-pages use .jw-hero__reserve (rooms, sustainability, our-story,
   company, discover-fukuoka, inquire, contact, company-story, simple-king,
   suite-double). index2 uses .ix2-hero__nav-reserve.
   front-page uses .section-hero__nav-reserve (hero video — also apply same style
   since it sits on dark overlay).
   Excludes: .agd-menu__reserve-btn (hamburger menu — has its own bg).
   Note: .pc-nav__reserve-btn (desktop sticky nav) already handles its own style.
   ---------------------------------------------------------------- */

/* Initial state (before scroll) — transparent + white border + white text */
.jw-hero__reserve,
.section-hero__nav-reserve,
.ix2-hero__nav-reserve,
.space-banner__nav-reserve,
.pc-nav__reserve-btn {
  background: transparent !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}

/* Hover state — subtle white fill */
.jw-hero__reserve:hover,
.section-hero__nav-reserve:hover,
.ix2-hero__nav-reserve:hover,
.space-banner__nav-reserve:hover,
.pc-nav__reserve-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* Scrolled state — keep black bg + white text (already handled, reinforce) */
.jw-hero__nav--mobile.is-scrolled .jw-hero__reserve,
.section-hero__nav--mobile.is-scrolled .section-hero__nav-reserve,
.space-banner__nav--mobile.is-scrolled .space-banner__nav-reserve,
.pc-nav.is-scrolled .pc-nav__reserve-btn {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}
.pc-nav.is-scrolled .pc-nav__reserve-btn:hover {
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
}

/* --- 51c: JWR room pages mobile — white bg hero, button stays black --- */
@media (max-width: 767px) {
  body.jwr-page .jw-hero__reserve {
    background: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
  }
}

/* --- 51d: Contact page — no hero image, button stays black on all breakpoints --- */
body.page-template-page-contact .jw-hero__reserve,
body.page-template-page-contact .pc-nav__reserve-btn {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

/* ============================================================
   Section 52 — Global button hover effects (all pages/breakpoints)
   Rule 1: Black bg + white text (on white bg)  →  hover: transparent, border #000, text #000
   Rule 2: Transparent/outline white border + white text (on image)  →  hover: bg #000, text #fff
   Rule 3: White/transparent + dark border + dark text (on white bg)  →  hover: bg #000, text #fff
   ============================================================ */

/* --- Rule 3: ALL outline/white buttons on white backgrounds ---
   border dark + text dark + bg white/transparent → hover: bg #000, text #fff */
.section-concept__btn:hover,
.section-experience__btn:hover,
.section-property__btn:hover,
.section-usage__btn:hover,
.section-service__btn:hover,
.section-press__btn:hover,
.section-hero__btn:hover,
.btn-outline:hover,
.section-instagram__btn:hover,
.section-footer__btn--outline:hover,
.agd-menu__cta--outline:hover,
.jw-gallery__cta:hover,
.jw-inside__cta:hover,
.ix2-cta:hover,
.ix2-news__cta a:hover,
.cst-btn-outline:hover {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
.section-instagram__btn:hover svg path { stroke: #fff !important; }

/* --- Rule 1: ALL black/dark bg buttons on white backgrounds ---
   bg dark + text white → hover: transparent, border #000, text #000 */
.section-footer__btn--solid:hover,
.agd-menu__cta--dark:hover,
.agd-menu__reserve-btn:hover,
.space-room__btn:hover,
.pc-nav.is-scrolled .pc-nav__reserve-btn:hover {
  background: transparent !important;
  color: #000 !important;
  border: 1px solid #000 !important;
  border-color: #000 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* --- Rule 1: Submit buttons (inquire, contact, company forms) ---
   bg dark + text white → hover: transparent, border #000, text #000 */
.iq-submit:hover,
.ct-submit:hover,
.iq-form-card .wpcf7 input[type="submit"]:hover,
.ct-form-wrap .wpcf7 input[type="submit"]:hover,
.cp-contact .wpcf7 input[type="submit"]:hover {
  background: transparent !important;
  color: #000 !important;
  border: 1px solid #000 !important;
  transform: none !important;
}

/* --- Rule 3: Page-specific outline buttons on white bg ---
   (company about/sustain — border dark, text dark → hover: bg #000, text #fff) */
.cp-about__btn:hover,
.cp-sustain__btn:hover {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

/* --- Rule 1: Sustainability contact (dark bg button on white bg) ---
   hover: transparent, border #000, text #000 */
.su-contact__btn:hover {
  background: transparent !important;
  color: #000 !important;
  border: 1px solid #000 !important;
}

/* --- Rule 2: Reserve buttons on image (not scrolled) ---
   transparent + white border → hover: bg #000, text #fff */
.pc-nav:not(.is-scrolled) .pc-nav__reserve-btn:hover,
.jw-hero__reserve:hover,
.section-hero__nav-reserve:hover,
.ix2-hero__nav-reserve:hover,
.space-banner__nav-reserve:hover {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

/* --- Rule 1: Scrolled mobile reserve (black bg on white header) ---
   hover: transparent, border #000, text #000 */
.jw-hero__nav--mobile.is-scrolled .jw-hero__reserve:hover,
.section-hero__nav--mobile.is-scrolled .section-hero__nav-reserve:hover,
.space-banner__nav--mobile.is-scrolled .space-banner__nav-reserve:hover,
.ix2-hero__nav--mobile.is-scrolled .ix2-hero__nav-reserve:hover {
  background: transparent !important;
  color: #000 !important;
  border-color: #000 !important;
}

/* --- Rule 1: Contact page & JWR room mobile (black btn on light bg) --- */
body.page-template-page-contact .jw-hero__reserve:hover,
body.page-template-page-contact .pc-nav__reserve-btn:hover {
  background: transparent !important;
  color: #000 !important;
  border-color: #000 !important;
}
@media (max-width: 767px) {
  body.jwr-page .jw-hero__reserve:hover {
    background: transparent !important;
    color: #000 !important;
    border-color: #000 !important;
  }
}

/* --- Ensure smooth transition on all buttons --- */
.section-footer__btn,
.agd-menu__reserve-btn,
.space-room__btn,
.jw-gallery__cta,
.jw-inside__cta,
.su-contact__btn,
.cp-about__btn,
.cp-sustain__btn,
.iq-submit,
.ct-submit,
.iq-form-card .wpcf7 input[type="submit"],
.ct-form-wrap .wpcf7 input[type="submit"],
.cp-contact .wpcf7 input[type="submit"] {
  transition: all 0.3s ease !important;
}


/* ============================================================
   Section 60 — Scroll Reveal Animation (all pages)
   ============================================================ */

/* Hidden state — fade up */
.agd-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Visible state */
.agd-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for children */
.agd-reveal-d1 { transition-delay: 0.1s; }
.agd-reveal-d2 { transition-delay: 0.2s; }
.agd-reveal-d3 { transition-delay: 0.3s; }
.agd-reveal-d4 { transition-delay: 0.4s; }
.agd-reveal-d5 { transition-delay: 0.5s; }

/* Banner / full-width images — fade only, no slide */
.agd-reveal--fade {
  opacity: 0;
  transform: none;
  transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.agd-reveal--fade.agd-reveal--visible {
  opacity: 1;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .agd-reveal,
  .agd-reveal--fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}