/* Revision 51 — final mobile art direction and cross-page header alignment. */

@media (max-width: 768px) {
  /* Anchor the pendant cord to the lower edge of the main concept photo. */
  body.page-home .concept__pendant {
    top: calc(78.125vw + 96px) !important;
    right: 18px !important;
    left: auto !important;
    width: 52px !important;
    opacity: 1 !important;
    z-index: 3 !important;
  }

  /* Give the leaf-and-puddle motif enough presence to balance the chair. */
  body.page-home .concept__leaf {
    top: auto !important;
    right: auto !important;
    bottom: 28px !important;
    left: -36px !important;
    width: 228px !important;
    opacity: 1 !important;
    z-index: 1 !important;
  }

  body.page-home .concept__chair {
    right: 16px !important;
    bottom: 30px !important;
    width: 72px !important;
  }

  /* Keep the English FV artwork locked to the title area on every phone height. */
  body.page-home .hero__script {
    top: auto !important;
    right: 20px !important;
    bottom: 125px !important;
    left: auto !important;
  }
}

@media (max-width: 370px) {
  body.page-home .hero__script {
    bottom: 190px !important;
  }
}

/* Lower-page headers use the same 1442px design canvas and scale as TOP. */
@media (min-width: 768px) {
  body:not(.page-home) .header.site-header,
  body:not(.page-home) .header.site-header.is-scrolled {
    left: 0 !important;
    width: 1442px !important;
    transform: scale(var(--header-position-scale, calc(100vw / 1442px))) !important;
    transform-origin: top left !important;
  }
}

/* PRICE: remove section numbering without leaving its grid gutter behind. */
body.page-price .sec-head {
  grid-template-columns: minmax(0, auto) minmax(64px, 1fr) !important;
}

body.page-price .sec-head__title {
  grid-column: 1 !important;
}

body.page-price .sec-head::after {
  grid-column: 2 !important;
}

body.page-price .sec-head__note {
  grid-column: 1 / -1 !important;
}

/* Center every included-work heading beneath its illustration. */
body.page-price .included__item,
body.page-price .included__label {
  text-align: center !important;
}

body.page-price .included__label {
  width: 100% !important;
}

/* Center the price and explanatory copy in all three building-type cards. */
body.page-price .type-card,
body.page-price .type-card__price,
body.page-price .type-card__desc {
  text-align: center !important;
}

@media (min-width: 1101px) {
  body:not(.page-home) .header.site-header,
  body:not(.page-home) .header.site-header.is-scrolled {
    height: 132px !important;
    padding: 0 clamp(26px, 3.33vw, 48px) !important;
  }

  body:not(.page-home) .site-header .site-header__right {
    gap: clamp(24px, 2.35vw, 34px) !important;
  }
}

@media (max-width: 767px) {
  /* Every mobile drawer uses the same opaque Le tiroir blue. */
  body > .drawer {
    background: #39779d !important;
    background-image: none !important;
  }

  /* The logo sits above the drawer, so switch it to the white artwork while open. */
  body:has(.drawer.is-open) .site-header__logo-image--dark {
    opacity: 0 !important;
  }

  body:has(.drawer.is-open) .site-header__logo-image--light {
    opacity: 1 !important;
  }

  body:not(.page-home) .header.site-header,
  body:not(.page-home) .header.site-header.is-scrolled {
    height: 74px !important;
  }

  body:not(.page-home) .header.site-header .header__logo.site-header__logo {
    top: 17px !important;
    left: 24px !important;
    width: 142px !important;
    height: 38px !important;
  }

  body:not(.page-home) .site-header .hamburger {
    top: 15px !important;
    right: 17px !important;
    width: 44px !important;
    height: 44px !important;
  }

  /* Keep the close trigger above the full-screen drawer on every page. */
  body:has(.drawer.is-open) .header.site-header {
    z-index: 10002 !important;
  }

  .drawer__close {
    position: absolute;
    top: 15px;
    right: 17px;
    z-index: 2;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    cursor: pointer;
  }

  .drawer__close::before,
  .drawer__close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 1.5px;
    background: #fff;
    content: "";
  }

  .drawer__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .drawer__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  /* PRICE CTA: preserve the intended two title lines and keep the full label visible. */
  body.page-price .estimate__title {
    font-size: clamp(24px, 7.1vw, 28px) !important;
    letter-spacing: .08em !important;
    white-space: normal !important;
  }

  body.page-price .estimate__title > span {
    display: block;
    white-space: nowrap;
  }

  body.page-price .estimate__btn {
    gap: 0 !important;
    width: 100% !important;
    padding-right: 56px !important;
    padding-left: 16px !important;
    font-size: clamp(10px, 3vw, 12px) !important;
    letter-spacing: .01em !important;
  }

  body.page-price .estimate__btn-label {
    max-width: 100% !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  body.page-price .estimate__btn .arrow {
    right: 9px !important;
    width: 44px !important;
    height: 44px !important;
  }

  /* TOP WORKS: remove the translucent leaf and make the main image a direct link. */
  body.page-home .works__intro::after {
    display: none !important;
    background: none !important;
    content: none !important;
  }

  body.page-home .works__caption {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.page-home .works__visual-mobile-link {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: block;
    border-radius: inherit;
  }

  /* FAQ category 05 is the only long heading; keep it on one line on phones. */
  body.page-faq #cat05 .faq-cat__title {
    font-size: clamp(16px, 5vw, 20px) !important;
    letter-spacing: .035em !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 768px) {
  body.page-home .works__visual-mobile-link {
    display: none;
  }
}

/* Revision 55 — final cross-device QA corrections. */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Remove the legacy desktop minimum width so the footer fits the tablet viewport. */
  .footer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Give tablet footers full-width navigation columns so Japanese labels do not orphan. */
  .footer__inner {
    flex-direction: column !important;
    gap: 42px !important;
  }

  .footer__brand {
    width: 100% !important;
    padding-right: 0 !important;
    padding-bottom: 34px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.22) !important;
    text-align: center !important;
  }

  .footer__nav {
    width: 100% !important;
  }

  .footer__nav-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px 30px !important;
  }

  .footer__nav-grid a {
    white-space: nowrap !important;
  }

  /* NEWS: use the horizontal category rail and a full-width readable list on tablets. */
  body.page-news .news__layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }

  body.page-news .news__side {
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  body.page-news .news__side::-webkit-scrollbar {
    display: none;
  }

  body.page-news .news__cat {
    flex: 0 0 auto !important;
    padding: 11px 15px !important;
    border: 1px solid var(--c-border) !important;
  }

  body.page-news .news__cat-icon {
    display: none !important;
  }

  body.page-news .news__list {
    width: 100% !important;
    padding: 6px 30px !important;
  }

  body.page-news .news-item {
    gap: 26px !important;
  }

  body.page-news .news-item__image {
    width: 140px !important;
  }

  body.page-news .news-item__body {
    min-width: 0 !important;
  }

  /* CONTACT: stack the form and guidance panel before either column becomes cramped. */
  body.page-contact .contact-main__inner {
    display: block !important;
    width: min(760px, 100%) !important;
    max-width: 760px !important;
    margin-inline: auto !important;
  }

  body.page-contact .form-card {
    width: 100% !important;
  }

  body.page-contact .form-row {
    grid-template-columns: 168px minmax(0, 1fr) !important;
  }

  body.page-contact .form-simulator-launch {
    width: min(100%, 470px) !important;
    padding-inline: 22px !important;
    font-size: 14px !important;
    letter-spacing: .045em !important;
  }

  body.page-contact .contact-side {
    position: static !important;
    width: 100% !important;
    margin-top: 64px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 32px !important;
  }
}