/* Mobile-first visual composition for the Coral-inspired design layer. */
@media (max-width: 900px) {
  .hero {
    display: flex !important;
    flex-direction: column;
    overflow: visible;
  }

  .hero-kicker { order: 1; }
  .hero-copy { order: 2; max-width: 100% !important; }
  .hero::before {
    content: '';
    order: 3;
    position: relative !important;
    inset: auto !important;
    z-index: 0 !important;
    display: block;
    width: 100% !important;
    height: 300px !important;
    margin: 38px 0 0;
    opacity: 1 !important;
    clip-path: polygon(0 7%, 94% 0, 100% 74%, 70% 100%, 5% 92%);
    background:
      radial-gradient(circle at 73% 22%, var(--sun) 0 36px, transparent 37px),
      linear-gradient(90deg, transparent 0 9%, rgba(255,255,255,.55) 9% 10%, transparent 10% 63%, rgba(255,255,255,.55) 63% 64%, transparent 64%),
      linear-gradient(0deg, transparent 0 24%, rgba(255,255,255,.45) 24% 25%, transparent 25% 72%, rgba(255,255,255,.45) 72% 73%, transparent 73%),
      linear-gradient(135deg, var(--coral) 0 30%, var(--coral-soft) 30% 49%, var(--aqua) 49% 73%, #e8ded2 73% 100%) !important;
    box-shadow: 14px 14px 0 rgba(239,106,88,.18);
  }

  .hero::after {
    content: 'JAPAN  /  GLOBAL';
    order: 4;
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: flex-end;
    width: 66% !important;
    height: 126px !important;
    margin: -82px 18px 0 auto;
    padding: 15px 16px;
    border: 1px solid rgba(17,16,15,.2);
    background:
      repeating-linear-gradient(135deg, transparent 0 10px, rgba(17,16,15,.07) 10px 11px),
      rgba(255,253,248,.94) !important;
    color: var(--ink);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .18em;
    line-height: 1;
    transform: rotate(2deg);
    box-shadow: -10px 10px 0 rgba(185,222,217,.7) !important;
    opacity: 1 !important;
  }

  .hero-aside {
    order: 5;
    max-width: 100% !important;
    margin-top: 40px !important;
    padding: 16px 18px !important;
    border-left: 0 !important;
    border-top: 3px solid var(--aqua-deep);
    background: linear-gradient(90deg, rgba(185,222,217,.28), rgba(246,213,204,.18)) !important;
  }
  .scroll-note { order: 6; }

  .manifesto { padding-top: 92px; }
  .manifesto::before {
    width: 96px !important;
    height: 96px !important;
    right: 18px !important;
    top: 22px !important;
    border: 18px solid var(--coral-soft) !important;
    opacity: 1 !important;
  }
  .manifesto::after {
    width: 116px !important;
    height: 18px !important;
    right: auto !important;
    left: 24px !important;
    bottom: 24px !important;
    opacity: .85 !important;
  }

  .services {
    background:
      radial-gradient(circle at 93% 6%, rgba(239,106,88,.52), transparent 13rem),
      radial-gradient(circle at 2% 94%, rgba(104,184,176,.28), transparent 15rem),
      var(--ink) !important;
  }
  .services::before {
    right: -64px !important;
    top: 30px !important;
    width: 220px !important;
    height: 220px !important;
    opacity: 1 !important;
  }
  .services::after {
    left: 18px !important;
    bottom: 18px !important;
    width: 108px !important;
    opacity: .7 !important;
  }

  .split-section::after {
    width: 70px !important;
    height: 70px !important;
    right: 18px !important;
    top: 34px !important;
    opacity: 1 !important;
  }

  .japan-symbol {
    min-height: 245px !important;
    height: 245px !important;
    background:
      radial-gradient(circle at 72% 27%, var(--sun) 0 34px, transparent 35px),
      linear-gradient(90deg, transparent 0 13%, rgba(255,255,255,.5) 13% 14%, transparent 14% 63%, rgba(255,255,255,.45) 63% 64%, transparent 64%),
      linear-gradient(135deg, var(--coral) 0 33%, var(--coral-soft) 33% 54%, var(--aqua) 54% 78%, #ded4c4 78% 100%) !important;
  }
  .japan-symbol::before {
    width: 82px !important;
    height: 82px !important;
    right: 18% !important;
    top: 24px !important;
    background: var(--sun) !important;
    box-shadow: -145px 128px 0 -15px rgba(255,255,255,.62) !important;
  }
  .japan-symbol::after { opacity: .9; }

  .studio::before {
    top: 86px !important;
    right: 24px !important;
    opacity: 1 !important;
  }

  .perspective-feature {
    background:
      radial-gradient(circle at 88% 16%, rgba(238,219,94,.85) 0 34px, transparent 35px),
      linear-gradient(135deg, #f1ddd7, #dcece9 54%, #f6f1e8 54%) !important;
  }

  .contact {
    background:
      radial-gradient(circle at 88% 16%, var(--sun) 0 44px, transparent 45px),
      linear-gradient(145deg, var(--coral-deep) 0 70%, #983329 70% 100%) !important;
  }
}

@media (max-width: 600px) {
  .hero::before {
    height: 250px !important;
    margin-top: 32px;
    box-shadow: 10px 10px 0 rgba(239,106,88,.18);
  }
  .hero::after {
    width: 72% !important;
    height: 112px !important;
    margin-top: -72px;
    margin-right: 8px;
  }
  .hero-aside { margin-top: 34px !important; }
  .manifesto { padding-top: 84px; }
  .japan-symbol { min-height: 220px !important; height: 220px !important; }
}