/*
 * Mobile editorial direction for TOP.
 * Existing copy and desktop geometry are intentionally untouched.
 */
.page-home .contact__mobile-break {
  display: none;
}

.page-home .hero__mini-illust {
  display: none;
}

@media (max-width: 768px) {
  :root {
    --home-editorial-paper: #fff; --text-v37-home-editorial-paper: #fff;
    --home-editorial-ink: #243039; --text-v37-home-editorial-ink: #243039;
    --home-editorial-rule: rgba(36, 48, 57, .2); --text-v37-home-editorial-rule: rgba(36, 48, 57, .2);
    --home-editorial-blue: #39779d; --text-v37-home-editorial-blue: #39779d;
  }

  body.page-home {
    color: var(--text-v37-home-editorial-ink);
    background: var(--home-editorial-paper);
  }

  .page-home .pc-page {
    position: relative;
    background: var(--home-editorial-paper);
  }

  .page-home .pc-page::before {
    display: none;
  }

  /* Minimal header over the photographic first view. */
  .page-home .header.site-header,
  .page-home .header.site-header.is-scrolled {
    height: 74px;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    background: linear-gradient(180deg, rgba(20, 29, 34, .3), transparent);
  }

  .page-home .header.site-header .header__logo.site-header__logo {
    top: 17px;
    left: 24px;
    width: 142px;
    height: 38px;
  }

  .page-home .site-header .hamburger {
    top: 15px;
    right: 17px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(57, 119, 157, .9);
    box-shadow: 0 8px 22px rgba(57, 119, 157, .2);
    backdrop-filter: blur(8px);
  }

  .page-home .site-header .hamburger span {
    width: 20px;
  }

  .page-home .drawer {
    justify-content: flex-start;
    padding: 112px 34px 42px;
    background: rgba(57, 119, 157, .98);
  }

  .page-home .drawer__nav {
    width: 100%;
  }

  .page-home .drawer__nav a {
    padding: 15px 3px;
    font-size: 14px;
    letter-spacing: .12em;
  }

  .page-home .drawer__cta {
    border-radius: 999px !important;
  }

  /* Full-screen photo and oversized editorial headline. */
  .page-home .hero {
    min-height: 100svh;
    height: max(720px, 100svh) !important;
    background: #2f3a40;
  }

  .page-home .hero::before {
    inset: 0;
    height: auto;
    background:
      linear-gradient(180deg, rgba(57, 119, 157, .34) 0%, transparent 35%),
      linear-gradient(0deg, rgba(57, 119, 157, .66) 0%, transparent 52%);
  }

  .page-home .hero::after {
    display: none;
  }

  .page-home .hero__slides {
    height: 100%;
  }

  .page-home .hero__slide {
    height: 100%;
    object-position: 53% 50%;
    filter: saturate(.84) contrast(.98);
  }

  .page-home .hero__blue-line,
  .page-home .hero__flower,
  .page-home .hero__house {
    display: none;
  }

  .page-home .hero__mini-illust {
    display: none;
  }

  .page-home .hero__script {
    top: auto;
    right: 18px;
    bottom: 190px;
    left: auto;
    z-index: 4;
    display: block;
    width: min(76vw, 299px);
    height: auto;
    opacity: .96;
    filter: drop-shadow(0 3px 12px rgba(57, 119, 157, .32));
  }

  .page-home .hero__title {
    right: 24px;
    bottom: 58px;
    left: 30px;
    display: block;
    color: #fff;
    font-size: clamp(31px, 7.4vw, 47px);
    line-height: 1.4;
    letter-spacing: .065em;
    text-shadow: 0 2px 18px rgba(11, 20, 25, .34);
  }

  .page-home .hero__title::after {
    display: block;
    width: 100%;
    margin-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .68);
    content: "";
  }

  .page-home .hero__title-line:first-child {
    margin-bottom: 6px;
    font-size: .58em;
    letter-spacing: .18em;
  }

  .page-home .hero__title-line--adaptive,
  .page-home[data-hero-title-tone="dark"] .hero__title-line--adaptive,
  .page-home[data-hero-title-tone="light"] .hero__title-line--adaptive,
  .page-home[data-hero-title-tone="mixed"] .hero__title-line--adaptive {
    color: #fff;
    background: none;
    filter: none;
    text-shadow: 0 2px 18px rgba(11, 20, 25, .34);
  }

  body.page-home.motion-ready .hero__title .hero__title-line--adaptive.motion-copy,
  body.page-home.motion-ready .hero__title .hero__title-line--adaptive.motion-copy.is-visible,
  body.page-home[data-hero-title-tone="dark"].motion-ready .hero__title .hero__title-line--adaptive.motion-copy,
  body.page-home[data-hero-title-tone="dark"].motion-ready .hero__title .hero__title-line--adaptive.motion-copy.is-visible,
  body.page-home[data-hero-title-tone="light"].motion-ready .hero__title .hero__title-line--adaptive.motion-copy,
  body.page-home[data-hero-title-tone="light"].motion-ready .hero__title .hero__title-line--adaptive.motion-copy.is-visible,
  body.page-home[data-hero-title-tone="mixed"].motion-ready .hero__title .hero__title-line--adaptive.motion-copy,
  body.page-home[data-hero-title-tone="mixed"].motion-ready .hero__title .hero__title-line--adaptive.motion-copy.is-visible {
    filter: none;
  }

  /* Editorial introduction: image, inset copy, offset image pair. */
  .page-home .concept {
    display: flex;
    padding: 118px 0 156px 20px;
    flex-direction: column;
    gap: 0;
    background: var(--home-editorial-paper);
  }

  .page-home .concept::before {
    width: calc(100% - 24px);
    margin: 0 0 40px 4px;
    border-top: 1px solid var(--home-editorial-rule);
    content: "";
  }

  .page-home .concept__main,
  .page-home .concept__sub,
  .page-home .concept__tall {
    filter: saturate(.76) contrast(.96);
  }

  .page-home .concept__main {
    order: 1;
    width: calc(100% - 20px);
    aspect-ratio: 1.18;
    margin-left: auto;
    border-radius: 0 42px 0 0;
  }

  .page-home .concept__copy {
    z-index: 2;
    order: 2;
    width: calc(100% - 42px);
    margin: -58px 0 0;
    padding: 42px 24px 10px 4px;
    background: var(--home-editorial-paper);
  }

  .page-home .concept__copy::before {
    display: block;
    width: 42px;
    margin-bottom: 26px;
    border-top: 1px solid var(--home-editorial-ink);
    content: "";
  }

  .page-home .concept__title {
    font-size: clamp(29px, 7vw, 38px);
    line-height: 1.65;
    letter-spacing: .07em;
  }

  .page-home .concept__text {
    margin-top: 30px;
    color: #4e575d;
    font-size: 14px;
    line-height: 2.15;
    letter-spacing: .035em;
  }

  .page-home .concept__text + .concept__text {
    margin-top: 20px;
  }

  .page-home .concept__sub {
    order: 3;
    width: 72%;
    aspect-ratio: 1.08;
    margin: 94px 0 0;
  }

  .page-home .concept__tall {
    z-index: 2;
    order: 4;
    width: 54%;
    aspect-ratio: .72;
    margin: -58px 20px 0 auto;
    box-shadow: -16px 16px 0 var(--home-editorial-paper);
    border-radius: 0 0 38px 0;
  }

  .page-home .concept__pendant {
    top: 508px;
    right: 3px;
    left: auto;
    display: block;
    width: 55px;
    opacity: .58;
  }

  .page-home .concept__leaf {
    left: -74px;
    top: auto;
    bottom: 26px;
    display: block;
    width: 176px;
    opacity: .28;
  }

  .page-home .concept__chair {
    right: 2px;
    bottom: 25px;
    left: auto;
    top: auto;
    display: block;
    width: 74px;
    opacity: .68;
  }

  .page-home .site-header__logo-image--dark {
    opacity: 0 !important;
  }

  .page-home .site-header__logo-image--light {
    opacity: 1 !important;
    filter: drop-shadow(0 2px 8px rgba(57, 119, 157, .38));
  }

  /* Project-story inspired works list. */
  .page-home .works {
    display: block;
    padding: 112px 20px 132px;
    background: linear-gradient(180deg, #fafbfc 0%, #f1f5f8 100%);
  }

  .page-home .works::before {
    display: block;
    width: 100%;
    margin-bottom: 32px;
    border-top: 1px solid var(--home-editorial-rule);
    content: "";
  }

  .page-home .works__surface {
    display: none;
  }

  .page-home .works__intro {
    position: relative;
    width: 100%;
  }

  .page-home .works__intro::after {
    position: absolute;
    right: -8px;
    bottom: -112px;
    width: 112px;
    aspect-ratio: 412 / 387;
    background: url("../editable-parts/concept-leaf.png") center / contain no-repeat;
    content: "";
    opacity: .22;
    pointer-events: none;
    transform: rotate(8deg);
  }

  .page-home .works__eyebrow {
    margin-bottom: 18px;
    color: var(--text-v37-home-editorial-blue);
    font-size: 11px;
    letter-spacing: .2em;
  }

  .page-home .works__title {
    font-size: clamp(45px, 11vw, 62px);
    line-height: 1.05;
    letter-spacing: .05em;
  }

  .page-home .works__lead {
    max-width: 34em;
    margin-top: 38px;
    color: #4e575d;
    font-size: 14px;
    line-height: 2.15;
  }

  .page-home .works__more {
    justify-content: center;
    width: min(100%, 320px);
    height: 58px;
    margin-top: 36px;
    padding: 0 24px;
    color: #fff;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #39779d, #39779d);
    font-size: 15px;
  }

  .page-home .works__more::after {
    margin-left: 34px;
  }

  .page-home .works__visual {
    width: 100%;
    aspect-ratio: 920 / 614;
    margin: 76px 0 0;
    border-radius: 0 42px 0 0;
  }

  .page-home .works__main-image {
    filter: saturate(.78) contrast(.98);
  }

  .page-home .works__caption {
    right: 18px;
    bottom: 18px;
    left: 18px;
    min-height: 0;
    padding: 18px 18px 16px;
    color: var(--text-v37-home-editorial-ink);
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(10px);
  }

  .page-home .works__caption-title {
    font-size: 18px;
  }

  .page-home .works__caption-text {
    color: #596269;
    font-size: 10px;
  }

  .page-home .works__arrow {
    display: inline-grid;
    width: 48px;
    height: 48px;
    margin-top: 14px;
    border: 1px solid var(--home-editorial-rule);
    border-radius: 50%;
    background: #fff;
  }

  .page-home .works__arrow--prev {
    margin-right: 2px;
    margin-left: calc(100% - 110px);
  }

  .page-home .works__arrow--next {
    margin-left: 0;
  }

  .page-home .works__cards {
    display: flex;
    width: calc(100% + 40px);
    height: auto;
    margin: 64px -20px 0;
    padding: 0 20px 16px;
    flex-direction: row;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .page-home .works__cards::-webkit-scrollbar {
    display: none;
  }

  .page-home .work-card,
  .page-home .work-card:nth-child(n) {
    flex: 0 0 min(78vw, 316px);
    width: min(78vw, 316px);
    min-height: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    scroll-snap-align: start;
  }

  .page-home .work-card:nth-child(even) {
    align-self: auto;
  }

  .page-home .work-card__link {
    min-height: 0;
    padding: 0;
  }

  .page-home .work-card__image {
    aspect-ratio: 1.28;
    border-radius: 0 34px 0 0;
    filter: saturate(.78) contrast(.98);
  }

  .page-home .work-card__title,
  .page-home .work-card__meta,
  .page-home .work-card__area {
    margin-right: 0;
    margin-left: 0;
  }

  .page-home .work-card__title {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--home-editorial-rule);
    font-size: 18px;
    line-height: 1.6;
  }

  .page-home .work-card__meta {
    margin-top: 13px;
  }

  /* Quiet ruled news list. */
  .page-home .news {
    padding: 108px 20px 118px;
    background: var(--home-editorial-paper);
  }

  .page-home .news::before {
    display: block;
    width: 100%;
    margin-bottom: 34px;
    border-top: 1px solid var(--home-editorial-rule);
    content: "";
  }

  .page-home .news__bird {
    display: none;
  }

  .page-home .news__label {
    color: var(--text-v37-home-editorial-ink);
    font-size: 34px;
  }

  .page-home .news__label::before {
    color: var(--text-v37-home-editorial-blue);
  }

  .page-home .news__list {
    margin-top: 46px;
    border-top: 1px solid var(--home-editorial-rule);
  }

  .page-home .news__item {
    border-color: var(--home-editorial-rule);
  }

  /* Contact keeps the supplied illustrations but uses a quieter editorial frame. */
  .page-home .contact {
    padding: 116px 20px 118px;
    overflow: hidden;
    background: #fbfaf7;
  }

  .page-home .contact::before {
    display: block;
    width: 100%;
    margin-bottom: 42px;
    border-top: 1px solid rgba(57, 119, 157, .28);
    content: "";
  }

  .page-home .contact__background {
    opacity: .58;
    filter: none;
  }

  .page-home .contact__corner,
  .page-home .contact__flower,
  .page-home .contact__bird,
  .page-home .contact__house {
    display: block;
  }

  .page-home .contact__eyebrow,
  .page-home .contact__title,
  .page-home .contact__lead {
    text-align: left;
  }

  .page-home .contact__eyebrow {
    color: var(--text-v37-home-editorial-blue);
  }

  .page-home .contact__title {
    max-width: 12em;
    margin-top: 20px;
    padding: 0;
    font-size: clamp(27px, 6.8vw, 37px);
    line-height: 1.75;
  }

  .page-home .contact__mobile-break {
    display: block;
  }

  .page-home .contact__lead {
    margin-top: 14px;
    color: #587b91;
    font-size: 14px;
  }

  .page-home .contact__options {
    margin-top: 56px;
    gap: 34px 16px;
  }

  .page-home .contact-option__image {
    filter: saturate(.72);
  }

  .page-home .contact-option__label {
    font-size: 12px;
  }

  .page-home .contact__button {
    justify-content: center;
    max-width: 340px;
    height: 64px;
    margin-top: 60px;
    padding: 0 24px;
    color: #fff;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #39779d, #39779d);
    box-shadow: 0 8px 20px rgba(57, 119, 157, .12);
    font-size: 18px;
  }

  .page-home .contact__button::after {
    margin-left: 28px;
  }

  /* Footer follows the same restrained rule-based system. */
  .page-home .footer {
    padding-top: 76px;
    background: #39779d;
  }

  .page-home .footer__brand {
    padding-bottom: 48px;
  }

  .page-home .footer__nav-grid a {
    padding-block: 17px;
    font-size: 12px;
  }

  .page-home .home-op__disc {
    background: #39779d;
  }
}

@media (max-width: 390px) {
  .page-home .hero__title {
    right: 18px;
    left: 24px;
    font-size: 29px;
  }

  .page-home .concept {
    padding-left: 16px;
  }

  .page-home .works,
  .page-home .news,
  .page-home .contact {
    padding-right: 16px;
    padding-left: 16px;
  }

  .page-home .works__visual {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}