/* --------------------------------------------------
   REVERVE MOBILE FOUNDATION
   Shared last-mile rules loaded after each page stylesheet.
   Keep page-specific art direction in the page CSS files.
-------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(41, 41, 35, .1);
}

body,
main {
  min-width: 0;
}

img,
svg,
video {
  max-width: 100%;
}

.container > *,
main :is(article, section, div, dl, ol, ul) {
  min-width: 0;
}

:is(.global-en-detail, .english-page) :is(h1, h2, h3, p, li, a),
.company-table dd,
.confirm-list dd {
  overflow-wrap: anywhere;
}

:where(a, button, input, select, textarea) {
  touch-action: manipulation;
}

@media (max-width: 1120px) {
  .site-header {
    padding-top: env(safe-area-inset-top, 0px);
  }

  .header-inner {
    width: min(calc(100% - 32px), 1440px);
  }

  .menu-button {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    padding: 15px 10px;
  }

  .global-nav {
    min-height: 100dvh;
    justify-content: flex-start;
    gap: 4px;
    padding: calc(92px + env(safe-area-inset-top, 0px)) max(28px, 8vw) calc(40px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .global-nav a,
  .global-nav .nav-contact {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    margin: 0;
    padding: 8px 0;
  }

  .global-nav .nav-contact {
    margin-top: 14px;
    border-top: 1px solid rgba(214, 210, 196, .24);
  }
}

@media (max-width: 900px) {
  body {
    overflow-x: hidden;
    overflow-x: clip;
  }

  main {
    overflow: clip;
  }

  :is(
    .business-hero,
    .company-hero,
    .brands-hero,
    .products-hero,
    .editorial-hero,
    .news-hero,
    .recruit-hero,
    .contact-hero,
    .privacy-hero,
    .form-hero
  ) {
    min-height: 440px;
    padding-top: calc(var(--header-height) + 64px);
    padding-bottom: 62px;
  }

  :is(
    .business-breadcrumb,
    .company-breadcrumb,
    .brands-breadcrumb,
    .products-breadcrumb,
    .editorial-breadcrumb,
    .news-breadcrumb,
    .recruit-breadcrumb,
    .contact-breadcrumb,
    .privacy-breadcrumb,
    .form-breadcrumb
  ) {
    margin-bottom: 42px;
  }

  .section,
  .company-section,
  .editorial-section {
    padding-block: clamp(82px, 13vw, 118px);
  }

  .reveal {
    transform: translateY(14px);
  }

  .footer-nav-group a {
    display: flex;
    min-height: 40px;
    align-items: center;
  }

  .global-nav a[aria-current] {
    color: var(--greige);
  }
}

@media (max-width: 560px) {
  :root {
    --side: 20px;
  }

  body {
    font-size: 16px;
    line-height: 1.78;
  }

  .header-inner {
    width: calc(100% - 28px);
  }

  .logo img {
    width: clamp(150px, 47vw, 176px);
  }

  :is(
    .business-hero,
    .company-hero,
    .brands-hero,
    .products-hero,
    .editorial-hero,
    .news-hero,
    .recruit-hero,
    .contact-hero,
    .privacy-hero,
    .form-hero
  ) {
    min-height: 390px;
    padding-top: calc(var(--header-height) + 54px);
    padding-bottom: 52px;
  }

  :is(
    .business-hero,
    .company-hero,
    .brands-hero,
    .products-hero,
    .editorial-hero,
    .news-hero,
    .recruit-hero,
    .contact-hero,
    .privacy-hero,
    .form-hero
  ) h1 {
    max-width: 100%;
    font-size: clamp(2.75rem, 14vw, 4.25rem);
    line-height: .98;
  }

  :is(
    .business-hero,
    .company-hero,
    .brands-hero,
    .products-hero,
    .editorial-hero,
    .news-hero,
    .recruit-hero,
    .contact-hero,
    .privacy-hero,
    .form-hero
  ) h1 span {
    margin-top: 18px;
    font-size: .76rem;
    line-height: 1.55;
  }

  :is(
    .business-breadcrumb,
    .company-breadcrumb,
    .brands-breadcrumb,
    .products-breadcrumb,
    .editorial-breadcrumb,
    .news-breadcrumb,
    .recruit-breadcrumb,
    .contact-breadcrumb,
    .privacy-breadcrumb,
    .form-breadcrumb
  ) {
    margin-bottom: 34px;
    font-size: .68rem;
    letter-spacing: .1em;
  }

  .section,
  .company-section,
  .editorial-section {
    padding-block: 78px;
  }

  :is(.section, .company-section, .editorial-section) h2 {
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: 1.35;
  }

  :is(
    .body-copy,
    .business-intro-grid,
    .commerce-intro-grid,
    .products-intro-grid,
    .editorial-intro-copy,
    .recruit-intro-grid,
    .contact-intro-grid,
    .responsibility-head
  ) p {
    font-size: 1rem;
    line-height: 1.85;
  }

  .text-link,
  .business-links a,
  .product-link,
  .editorial-inline-link,
  .editorial-cta-link,
  .method-link,
  .news-link,
  .contact-link {
    min-height: 48px;
  }

  .next-page-link {
    min-height: 260px;
    padding-block: 40px;
  }

  .next-page-title {
    font-size: clamp(2.25rem, 11vw, 3.5rem);
    overflow-wrap: anywhere;
  }

  .next-page-arrow {
    width: 52px;
  }

  .site-footer {
    padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  }

  .footer-nav {
    gap: 26px 20px;
  }

  .footer-nav-group {
    gap: 4px;
  }

  .footer-nav-group a {
    min-height: 42px;
    font-size: .84rem;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }

  .brand-hero-copy h1 {
    font-size: clamp(2.35rem, 11vw, 3.2rem);
    line-height: 1.06;
  }

  :is(
    .service-row,
    .operation-row,
    .editorial-card,
    .guide-card,
    .recruit-work-card,
    .recruit-value-card,
    .foundation-facts article,
    .capability-grid article,
    .global-process-list li,
    .product-copy,
    .brand-detail-copy
  ) p {
    font-size: .98rem;
    line-height: 1.8;
  }

  .form-steps strong {
    font-size: .8rem;
  }
}

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

/* Homepage process cards are intentionally compact on an iPhone viewport. */
@media (max-width: 560px) {
  .home-material-visual {
    padding-bottom: 84px;
  }

  .home-material-visual figure {
    height: min(112vw, 440px);
    border-radius: 2px;
  }

  .home-material-visual img {
    object-position: 62% 50%;
  }

  .home-material-visual figcaption {
    gap: 6px;
    padding: 64px 20px 20px;
  }

  .home-material-visual figcaption span,
  .home-material-visual figcaption strong {
    font-size: .74rem;
    line-height: 1.55;
    letter-spacing: .12em;
  }

  .home-art-direction .commerce-system {
    padding-top: 0;
    padding-bottom: 96px;
  }

  .home-art-direction .commerce-system-heading {
    margin-bottom: 42px;
  }

  .home-art-direction .commerce-system-heading h2 {
    font-size: clamp(2rem, 8.6vw, 2.6rem);
    line-height: 1.3;
  }

  .home-art-direction .commerce-system-heading .display-line-responsive {
    width: auto;
    white-space: normal;
  }

  .home-art-direction .commerce-system-heading .display-line-responsive > span {
    display: block;
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
  }

  .home-art-direction .commerce-system-heading > p {
    font-size: 1rem;
    line-height: 1.8;
  }

  .home-art-direction .commerce-flow {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 12px;
    border: 0;
  }

  .home-art-direction .commerce-flow li,
  .home-art-direction .commerce-flow li:nth-child(2),
  .home-art-direction .commerce-flow li:nth-child(4) {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas:
      "number kicker"
      "mark title"
      ". copy";
    column-gap: 16px;
    row-gap: 8px;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 24px 22px 26px;
    border: 1px solid #cbc6ba;
    background: linear-gradient(135deg, #fcfbf8 0%, #f8f6f0 100%);
    box-shadow: 0 8px 26px rgba(41, 41, 35, .035);
  }

  .home-art-direction .commerce-flow li::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--signal-blue);
  }

  .home-art-direction .commerce-flow-number {
    position: static;
    grid-area: number;
    align-self: center;
    font-size: .74rem;
    letter-spacing: .12em;
  }

  .home-art-direction .commerce-flow li::before {
    grid-area: mark;
    align-self: start;
    width: 10px;
    height: 10px;
    margin: 10px 0 0 2px;
    border-width: 2px;
  }

  .home-art-direction .commerce-flow strong {
    grid-area: kicker;
    align-self: center;
    font-size: .72rem;
    letter-spacing: .14em;
  }

  .home-art-direction .commerce-flow h3 {
    grid-area: title;
    margin: 0;
    font-size: 1.68rem;
    line-height: 1.35;
    letter-spacing: -.035em;
  }

  .home-art-direction .commerce-flow p {
    grid-area: copy;
    margin: 4px 0 0;
    color: #625f57;
    font-size: 1rem;
    line-height: 1.78;
  }

  .home-art-direction .commerce-system-footer {
    gap: 26px;
    margin-top: 34px;
    padding-top: 24px;
  }

  .home-art-direction .commerce-system-footer p {
    font-size: .95rem;
    line-height: 1.75;
  }
}