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

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

:root {
  --font-heading: 'Crimson Text', serif;
  --font-body: 'Open Sans', sans-serif;
  --font-jp: 'Noto Sans JP', sans-serif;

  --color-text: #503629;
  --color-label: #8B796F;
  --color-hero-bg: #423D33;
  --color-btn-border: #50362A;
  --color-bg: #FFFFFF;
  --color-access-bg: #FCF8F1;
  --color-footer-bg: #4D4744;
  --color-accent: #FB7F65;
  --color-border-light: #B3B3B3;
  --color-btn-hero-text: #444444;
}

/* ── 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: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3.6px;
  color: var(--color-label);
  text-align: center;
  line-height: 1.36;
}

.section__heading {
  font-family: var(--font-heading);
  font-size: 30px;
  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: var(--font-heading);
  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%, #fcf8f1 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: #503629;
  line-height: 1.65;
}
.agd-menu__lang-line {
  height: 1px;
  background: rgba(80, 54, 41, 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: #503629;
  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: #503629;
  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: #503629;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.lang-dropdown__item:hover {
  background: #f7f2eb;
  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: #503629;
}
.agd-menu__reserve-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 22px;
  background: #000;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 14px;
  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(80, 54, 41, 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: #503629;
  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;
  border-bottom: 1px solid rgba(80,54,41,0.2);
}
.agd-menu__sub-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 14px;
  color: #7a6558;
  font-weight: 400;
  text-decoration: none;
  padding: 10px 0 10px 16px;
  border-top: 1px solid rgba(80,54,41,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: var(--font-heading);
  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: #4d4744; color: #fff; border: 1px solid #4d4744;
}
.agd-menu__cta--dark:hover {
  background: #fff;
  color: #4d4744;
  border-color: #4d4744;
  opacity: 1;
}
.agd-menu__cta--outline {
  background: #fff; color: #4d4744; border: 1px solid #503629;
}
.agd-menu__cta--outline:hover {
  background: #4d4744;
  color: #fff;
  border-color: #4d4744;
  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: 24px;
  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: #503629;
}
.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;
  filter: blur(4px);
  transform: scale(1.08);
  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: var(--font-heading);
  font-size: 17.6px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2.6px;
  font-style: normal;
  font-weight: 600;
  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: #503629;
  line-height: 1.65;
}
.agd-menu__discovery-desc {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 14px;
  color: #503629;
  line-height: 20px;
}
.agd-menu__discovery-link {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: #50362a;
  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, #fcf8f1 700px);
  }
  .agd-menu__nav-col {
    flex: none;
    width: 700px;
    padding: 10px 0 10px 100px;
  }
  .agd-menu__link {
    height: 50px;
    max-width: 550px;
  }
  .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: #503629;
    font-size: 14px;
  }
  .agd-menu__lang--mobile .agd-menu__lang-row svg {
    stroke: #503629;
  }
  .agd-menu__lang--mobile .agd-menu__lang-line {
    background: #503629;
  }
  .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: var(--font-heading);
    font-size: 14px;
    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 */
  .agd-menu__discovery { display: none; }
}

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

.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 12px 25px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(80,54,42,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: var(--font-heading);
  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: #50362A;
  border: none;
  border-radius: 50px;
  font-family: 'Crimson Text', serif;
  font-weight: 600;
  font-size: 14px;
  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: var(--font-heading);
  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: italic;
}

.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: var(--font-heading);
  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: var(--font-heading);
  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(80,54,42,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: var(--font-heading);
  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: var(--font-heading);
  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: var(--font-heading);
  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: var(--font-heading);
  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: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3.6px;
  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: 25px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  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: var(--color-footer-bg);
  color: #fff;
  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: 14px;
  color: #fff;
  line-height: 1.65;
}
.section-footer__email a { color: #fff; }

/* 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: #fff;
  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: #fff;
  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;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  transition: all 0.3s ease;
}
.section-footer__btn--solid {
  background: #fff;
  color: var(--color-footer-bg);
}
.section-footer__btn--solid:hover {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
}
.section-footer__btn--outline {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}
.section-footer__btn--outline:hover {
  background: #fff;
  color: var(--color-footer-bg);
}

/* 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: 14px;
  font-weight: 600;
  color: #fff;
  line-height: 3.11;
  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: #fff;
  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/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: 42px; }

  .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: 48px; }

  /* 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;
  }
  /* 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: #503629; }
  .pc-nav.is-scrolled .pc-nav__lang-toggle svg { stroke: #503629; }
  .pc-nav.is-scrolled .pc-nav__lang-line { background: #503629; }
  /* 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: var(--font-heading);
    font-size: 14px;
    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/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: 48px;
  }
  .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: #503629;
    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: 20px;
    letter-spacing: 4px;
    line-height: 1.36;
  }
  .section-concept__text-block .section__heading {
    text-align: left;
    font-size: 50px;
  }
  .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/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: 20px;
    letter-spacing: 4px;
  }
  .section-experience__banner-overlay .section__heading {
    font-size: 50px;
  }
  .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: 22px;
    color: #8B796F;
    letter-spacing: 2px;
    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: 40px;
    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: 20px;
    letter-spacing: 4px;
  }
  .toppage-rooms .section-property__header .section__heading {
    font-size: 50px;
    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/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: 20px;
    letter-spacing: 4px;
  }
  .section-usage__banner-overlay .section__heading {
    font-size: 50px;
  }
  .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: var(--font-heading);
    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/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: 20px;
    letter-spacing: 4px;
  }
  .section-service__banner-overlay .section__heading {
    font-size: 50px;
    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: 20px;
    letter-spacing: 4px;
  }
  .section-access__header .section__heading {
    font-size: 50px;
    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: 20px;
    letter-spacing: 4px;
  }
  .section-next__header .section__heading {
    font-size: 50px;
  }
  .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: #fff;
    opacity: 0.3;
  }
  .section-footer::after {
    content: '';
    position: absolute;
    left: 100px;
    right: 100px;
    top: 370px;          /* was 437 → 370: bottom padding (32px) now equals top padding */
    height: 1px;
    background: #fff;
    opacity: 0.3;
  }

  /* 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: 80px;
    margin: 0;
    padding: 0;
  }
  .section-footer__nav-col {
    width: 156px;
    flex-shrink: 0;
  }
  .section-footer__nav-col ul { gap: 0; }
  .section-footer__nav-col li a {
    font-size: 14px;
    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;
  }

  /* 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: #503629;
    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: 50px;
    line-height: 1.3;
    color: #503629;
  }
  .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 #503629;
    border-radius: 50px;
    color: #503629;
    font-family: var(--font-heading);
    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: #503629;
    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: 38px; }
  .section-hero__logo-group { gap: 16px; }
  .section-hero__btn {
    width: 280px;
    height: 54px;
    margin-top: 24px;
    font-size: 14px;
    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: 20px; letter-spacing: 4px; }
  .section-concept__text-block .section__heading { font-size: 40px; }
  .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: 20px; letter-spacing: 4px; }
  .section-experience__banner-overlay .section__heading { font-size: 40px; }
  .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: 20px; letter-spacing: 4px; }
  .section-property__header .section__heading { font-size: 40px; }
  .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: 20px; letter-spacing: 4px; }
  .section-usage__banner-overlay .section__heading { font-size: 40px; }
  .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: 20px; letter-spacing: 4px; }
  .section-service__banner-overlay .section__heading { font-size: 40px; }
  .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: 20px; letter-spacing: 4px; }
  .section-access__header .section__heading { font-size: 40px; }
  .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: 20px; letter-spacing: 4px; }
  .section-next__header .section__heading { font-size: 40px; }
  .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: 40px;
  }
  .section-footer__nav-col { width: 140px; }

  .section-footer__ctas {
    right: 60px;
    gap: 16px;
  }
  .section-footer__btn { width: 220px; height: 54px; font-size: 14px; }

  .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: 48px; }
  .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: 14px;
  }

  /* ── 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: 40px;
  }

  .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: #50362A;
  border: none;
  border-radius: 50px;
  font-family: 'Crimson Text', serif;
  font-weight: 600;
  font-size: 14px;
  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;
}
.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: #503629;
}
/* 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: 'Crimson Text', serif;
  font-weight: 400;
  font-style: italic;
  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: var(--font-heading);
  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: 60px;
  }

  /* ── 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(80, 54, 41, 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: 50px;
    margin-bottom: 5px;
    line-height: 1.3;
  }

  .space-room__subtitle {
    font-family: 'Crimson Text', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 26px;
    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: 'Crimson Text', serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 1.3;
  }

  .space-room__subtitle {
    font-family: 'Crimson Text', serif;
    font-weight: 400;
    font-style: italic;
    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: #FCF8F1;
  --jw-text: #503629;
  --jw-text-soft: #6B5B50;
  --jw-label: #8B796F;
  --jw-divider: #E6DFD5;
  --jw-border: #50362A;
  --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: 'Crimson Text', serif;
  font-weight: 600;
  font-size: 13px;
  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: 'Crimson Text', serif;
  font-weight: 400;
  font-size: 34px;
  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: Open Sans 600 / 20px / letter-spacing 20% / uppercase / #8B796F
   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: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8B796F;
  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: 'Crimson Text', 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: 'Open 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: 'Open Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--jw-label);
}
.jw-times__value {
  font-family: 'Open 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: 'Open 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: 'Open 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: 'Open Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #503629;
  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(80, 54, 42, 0.3);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.jw-floorplan__dot.is-active {
  background: #503629;
  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: 'Crimson Text', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 32px;
  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: 'Open 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: 'Open Sans', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #503629;
  margin: 70px 0 18px !important;
}
.jw-happy__closing {
  font-family: 'Crimson Text', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  color: #503629;
  margin: 24px 0 0 !important;
  text-transform: none;
  letter-spacing: normal;
}
.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: 'Crimson Text', 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: 'Crimson Text', serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
  color: var(--jw-text);
  margin: 0 0 36px;
}
.jw-block__note {
  margin-top: 20px;
  font-family: 'Open 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: 'Open 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: 'Crimson Text', serif;
  font-weight: 400;
  font-size: 32px;
  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: 'Crimson Text', 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: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  color: #8B796F;
}


/* =====================================================
   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: 'Crimson Text', serif;
  font-weight: 400;
  font-size: 32px;
  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: 'Open 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: 'Crimson Text', 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: 44px; }
  .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');
  }
  .jw-hero__nav--mobile { display: none; }
  .jw-hero__pc-nav { display: flex; }
  .jw-hero__title h1 { font-size: 60px; 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: 15px;
    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: 'Crimson Text', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 40px;
    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: 20px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.8;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #503629;
  }

  /* 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 all 60px on PC, 100px gap between blocks */
  .jw-block { padding: 50px 0; }
  .jw-block__heading,
  .jw-inside__heading,
  .jw-others__heading {
    font-family: 'Crimson Text', serif;
    font-weight: 400;
    font-size: 50px;
    line-height: 1.2;
    margin-bottom: 50px;
  }
  .jw-others-property .section__heading {
    font-family: 'Crimson Text', serif;
    font-weight: 400;
    font-size: 50px !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: 50px; margin-bottom: 50px; font-family: 'Crimson Text', 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 */
  .jw-others { padding: 120px 0; }
  .jw-others__grid { gap: 60px; }
  .jw-others__hero { height: 580px; }
  .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;
  }
}

/* =====================================================
   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: 'Open 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: 50px; 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: 35px; margin-bottom: 26px; }
  .jw-happy__intro,
  .jw-happy__more { font-size: 14px; line-height: 1.95em; }
  .jw-happy__highlight { font-size: 18px; font-weight: 600; font-style: normal; letter-spacing: 0.2em; text-transform: uppercase; color: #503629; 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: 40px !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: 13px;
  }
  .jw-inside__label { font-size: 18px; }

  /* See our other rooms — keep centered, smaller card width */
  .jw-others-property { padding-top: 50px !important; padding-bottom: 50px !important; }
  .jw-others-property .section-property__rooms {
    max-width: 900px;
    gap: 30px;
  }
  .jw-others-property .section-property__room-card {
    flex: 0 1 420px;
    max-width: 420px;
  }

  /* 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: 55px 0 0;
  }

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

  /* 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;
  }

  /* 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: #503629;
    font-family: 'Crimson Text', 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, Crimson Text 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: 300px;
    width: 100%;
    margin: 0 auto;
  }
  .jw-others-property .section-property__room-image {
    max-width: 300px;
    width: 100%;
    height: 369px; /* 480 × (300/390) */
  }
  .jw-others-property .section-property__room-thumbnails {
    max-width: 300px;
    width: 100%;
    gap: 14px; /* scaled from 18px */
  }
  .jw-others-property .section-property__thumb {
    height: 77px; /* 100 × (300/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;
  }
}