/* Coral-inspired visual system: editorial collage, coral accents, layered geometry, no kanji artwork. */
:root {
  --coral: #ef6a58;
  --coral-deep: #c94336;
  --coral-soft: #f6d5cc;
  --aqua: #b9ded9;
  --aqua-deep: #68b8b0;
  --sun: #eedb5e;
  --cream: #f6f1e8;
}

body { background: var(--paper); }

/* Header */
.site-header::after {
  content: '';
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--coral) 0 8%, transparent 8% 100%);
  opacity: .85;
  pointer-events: none;
}
.brand-mark { border-color: var(--coral-deep); color: var(--coral-deep); }
.nav-cta { border-color: var(--coral-deep); }
.nav-cta:hover { background: var(--coral-deep); border-color: var(--coral-deep); }

/* Homepage hero */
.hero { isolation: isolate; }
.hero::before {
  content: '';
  position: absolute;
  z-index: -2;
  right: -3%;
  bottom: 7%;
  width: min(47vw, 690px);
  height: min(38vw, 555px);
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255,255,255,.45) 8% 9%, transparent 9% 64%, rgba(255,255,255,.55) 64% 65%, transparent 65%),
    linear-gradient(0deg, transparent 0 18%, rgba(255,255,255,.5) 18% 19%, transparent 19% 72%, rgba(255,255,255,.5) 72% 73%, transparent 73%),
    linear-gradient(135deg, var(--coral-soft) 0 32%, var(--aqua) 32% 58%, var(--sun) 58% 70%, #e6d8c9 70% 100%);
  clip-path: polygon(10% 4%, 100% 0, 94% 88%, 62% 100%, 0 89%, 4% 35%);
  opacity: .95;
}
.hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: 6%;
  bottom: 13%;
  width: min(29vw, 410px);
  aspect-ratio: 1.36;
  background:
    radial-gradient(circle at 24% 30%, var(--coral) 0 6px, transparent 7px),
    radial-gradient(circle at 78% 68%, var(--aqua-deep) 0 5px, transparent 6px),
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(17,16,15,.08) 11px 12px),
    rgba(255,253,248,.78);
  border: 1px solid rgba(17,16,15,.16);
  transform: rotate(3deg);
  box-shadow: -18px 18px 0 rgba(239,106,88,.18);
}
.hero-grid { opacity: .32; }
.hero-kicker {
  display: inline-flex;
  width: fit-content;
  padding: 7px 11px;
  border: 1px solid rgba(17,16,15,.26);
  border-radius: 999px;
  background: rgba(246,241,232,.78);
  backdrop-filter: blur(10px);
}
.hero-kicker span { color: var(--coral-deep); }
.hero h1 { position: relative; max-width: 930px; }
.hero h1 em { color: var(--coral); }
.hero h1 em::after {
  content: '';
  position: absolute;
  width: 1.1em;
  height: .11em;
  right: .05em;
  bottom: -.03em;
  background: var(--sun);
  transform: rotate(-2deg);
  z-index: -1;
}
.hero-lede { max-width: 660px; }
.hero-actions .button-primary {
  background: var(--coral-deep);
  box-shadow: 8px 8px 0 var(--coral-soft);
}
.hero-actions .button-primary:hover {
  background: var(--ink);
  transform: translate(-2px,-2px);
  box-shadow: 11px 11px 0 var(--coral-soft);
}
.hero-aside {
  position: relative;
  z-index: 2;
  padding: 13px 0 13px 15px;
  border-left: 3px solid var(--aqua-deep);
  background: linear-gradient(90deg, rgba(185,222,217,.18), transparent);
}

/* Premise */
.manifesto { position: relative; overflow: hidden; }
.manifesto::before {
  content: '';
  position: absolute;
  width: 125px;
  height: 125px;
  right: 4%;
  top: 18%;
  border: 18px solid var(--coral-soft);
  border-radius: 50%;
  opacity: .65;
}
.manifesto::after {
  content: '';
  position: absolute;
  right: 13%;
  bottom: 12%;
  width: 150px;
  height: 20px;
  background: repeating-linear-gradient(90deg, var(--aqua-deep) 0 5px, transparent 5px 10px);
  opacity: .5;
}
.manifesto-copy { padding-left: 28px; border-left: 2px solid var(--coral); }

/* Services */
.services {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 0%, rgba(239,106,88,.25), transparent 28rem),
    radial-gradient(circle at 6% 100%, rgba(104,184,176,.16), transparent 26rem),
    var(--ink);
}
.services::before,
.services::after { content: ''; position: absolute; pointer-events: none; }
.services::before {
  width: 280px;
  height: 280px;
  right: -105px;
  top: 42px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  box-shadow: 0 0 0 44px rgba(239,106,88,.04), 0 0 0 88px rgba(239,106,88,.025);
}
.services::after {
  width: 150px;
  height: 44px;
  left: 3%;
  bottom: 5%;
  background: repeating-linear-gradient(90deg, var(--sun) 0 7px, transparent 7px 14px);
  opacity: .25;
}
.service-item { position: relative; transition: padding-left .22s ease, background .22s ease; }
.service-item::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--coral);
  transform: scaleY(0);
  transition: transform .22s ease;
}
.service-item:hover { padding-left: 18px; background: rgba(255,255,255,.025); }
.service-item:hover::before { transform: scaleY(1); }
.service-number { color: var(--coral-soft); }
.service-item h3 a:hover { color: var(--coral-soft); }

/* Approach */
.split-section { position: relative; }
.split-section::after {
  content: '';
  position: absolute;
  right: 2%;
  top: 7%;
  width: 82px;
  height: 82px;
  background: linear-gradient(135deg, var(--sun) 0 50%, var(--coral-soft) 50%);
  clip-path: polygon(0 0,100% 0,100% 68%,68% 68%,68% 100%,0 100%);
  opacity: .75;
}
.steps li > span { color: var(--coral-deep); }
.steps li:hover strong { color: var(--coral-deep); }

/* Japan specialization: deliberately no kanji. */
.japan-section { grid-template-columns: .62fr 1.38fr; background: var(--paper-2); }
.japan-symbol {
  position: relative;
  font-size: 0 !important;
  color: transparent !important;
  background:
    linear-gradient(90deg, transparent 49%, rgba(255,255,255,.48) 49% 50%, transparent 50%),
    linear-gradient(0deg, transparent 49%, rgba(255,255,255,.48) 49% 50%, transparent 50%),
    linear-gradient(135deg, var(--coral) 0 43%, var(--coral-soft) 43% 66%, var(--aqua) 66% 100%);
  overflow: hidden;
}
.japan-symbol::before {
  content: '';
  position: absolute;
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sun);
  right: 14%;
  top: 16%;
  box-shadow: -105px 160px 0 -26px rgba(255,255,255,.52);
}
.japan-symbol::after {
  content: '';
  position: absolute;
  width: 155%;
  height: 24%;
  border-top: 1px solid rgba(17,16,15,.25);
  border-bottom: 1px solid rgba(17,16,15,.25);
  left: -28%;
  bottom: 18%;
  transform: rotate(-15deg);
}
.japan-copy { padding-left: clamp(48px, 7vw, 104px); }

/* Studio */
.studio { position: relative; }
.studio::before {
  content: '';
  position: absolute;
  top: 108px;
  right: 32px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 20px 0 0 var(--sun), 40px 0 0 var(--aqua-deep);
}
.studio-card {
  padding: 26px 26px 14px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(140deg, rgba(255,253,248,.82), rgba(185,222,217,.28));
  box-shadow: 12px 12px 0 var(--coral-soft);
}

/* Perspectives */
.perspective-feature {
  position: relative;
  padding: 28px 30px 31px;
  border: 1px solid var(--line-strong);
  border-top: 5px solid var(--coral);
  background:
    radial-gradient(circle at 88% 18%, rgba(238,219,94,.68) 0 36px, transparent 37px),
    linear-gradient(135deg, var(--paper-2), #f8eee7);
}
.perspective-feature::after {
  content: '↗';
  position: absolute;
  right: 24px;
  top: 19px;
  font-size: 22px;
  color: var(--coral-deep);
}
.perspective-links a { transition: padding-left .2s ease, color .2s ease; }
.perspective-links a:hover { padding-left: 10px; color: var(--coral-deep); }

/* Generated service and article pages */
.page-hero,
.article-hero,
.perspectives-hero { position: relative; overflow: hidden; }
.page-hero::before,
.article-hero::before,
.perspectives-hero::before {
  content: '';
  position: absolute;
  width: 390px;
  height: 250px;
  right: -75px;
  bottom: -65px;
  background:
    radial-gradient(circle at 70% 25%, var(--sun) 0 26px, transparent 27px),
    linear-gradient(130deg, rgba(239,106,88,.24) 0 44%, rgba(185,222,217,.35) 44% 74%, transparent 74%);
  transform: rotate(-5deg);
  opacity: .8;
  pointer-events: none;
}
.page-intro { background: linear-gradient(90deg, rgba(239,106,88,.06), transparent 65%); }
.content-aside ol { border-top-color: var(--coral); }
.featured-perspective { background: linear-gradient(135deg, rgba(239,106,88,.08), rgba(185,222,217,.17)), var(--paper-2); }
.editorial-row:hover { background: rgba(239,106,88,.035); }

/* Contact */
.contact {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 18%, var(--sun) 0 52px, transparent 53px),
    var(--coral-deep);
}
.contact::before {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  left: -165px;
  bottom: -210px;
  box-shadow: 0 0 0 45px rgba(255,255,255,.035), 0 0 0 90px rgba(255,255,255,.02);
}
.contact .button-light { box-shadow: 7px 7px 0 rgba(17,16,15,.2); }

@media (max-width: 900px) {
  .site-header::after { left: 20px; right: 20px; }

  .hero {
    padding-bottom: 70px;
    display: block;
  }
  .hero-copy { max-width: 100%; }
  .hero::before {
    position: relative;
    display: block;
    width: calc(100% + 48px);
    height: 260px;
    right: auto;
    bottom: auto;
    margin: 44px -24px 0;
    z-index: 0;
    clip-path: none;
    opacity: 1;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background:
      linear-gradient(90deg, transparent 0 17%, rgba(255,255,255,.58) 17% 18%, transparent 18% 68%, rgba(255,255,255,.5) 68% 69%, transparent 69%),
      linear-gradient(0deg, transparent 0 56%, rgba(17,16,15,.10) 56% 56.5%, transparent 56.5%),
      linear-gradient(130deg, var(--coral) 0 30%, var(--coral-soft) 30% 49%, var(--aqua) 49% 72%, var(--sun) 72% 84%, #ded4c4 84% 100%);
  }
  .hero::after {
    display: block;
    width: 46vw;
    max-width: 310px;
    right: 7%;
    bottom: 66px;
    z-index: 1;
    opacity: 1;
    box-shadow: -14px 14px 0 rgba(239,106,88,.22);
  }
  .hero-aside { margin-top: 34px; }

  .manifesto::before {
    width: 96px;
    height: 96px;
    top: auto;
    bottom: 38px;
    right: -18px;
    border-width: 15px;
    opacity: .8;
  }
  .manifesto::after { opacity: .65; right: 10%; }

  .services::before {
    width: 220px;
    height: 220px;
    right: -100px;
    top: 88px;
  }
  .services::after { opacity: .5; }

  .split-section::after {
    width: 70px;
    height: 70px;
    right: 24px;
    top: 38px;
    opacity: .9;
  }

  .japan-section { grid-template-columns: 1fr; }
  .japan-symbol { min-height: 280px; }

  .studio::before { opacity: 1; }
}

@media (max-width: 600px) {
  .site-header::after { left: 18px; right: 18px; }

  .hero { padding-bottom: 0; }
  .hero-kicker { position: relative; z-index: 3; }
  .hero h1 { position: relative; z-index: 3; }
  .hero-lede,
  .hero-actions,
  .hero-aside,
  .scroll-note { position: relative; z-index: 3; }

  .hero::before {
    width: calc(100% + 36px);
    height: 225px;
    margin: 38px -18px 0;
    background:
      linear-gradient(90deg, transparent 0 16%, rgba(255,255,255,.60) 16% 17%, transparent 17% 66%, rgba(255,255,255,.52) 66% 67%, transparent 67%),
      linear-gradient(0deg, transparent 0 60%, rgba(17,16,15,.11) 60% 60.5%, transparent 60.5%),
      linear-gradient(132deg, var(--coral) 0 29%, var(--coral-soft) 29% 48%, var(--aqua) 48% 72%, var(--sun) 72% 85%, #ded4c4 85% 100%);
  }
  .hero::after {
    display: block;
    width: 57vw;
    max-width: 240px;
    right: 8%;
    bottom: 34px;
    aspect-ratio: 1.25;
    transform: rotate(3deg);
  }

  .hero-aside { max-width: 100%; }

  .manifesto { padding-bottom: 92px; }
  .manifesto::before { right: -28px; bottom: 20px; opacity: .9; }
  .manifesto::after { left: 18px; right: auto; bottom: 34px; opacity: .75; }
  .manifesto-copy { position: relative; z-index: 2; }

  .services::before {
    width: 190px;
    height: 190px;
    right: -86px;
    top: 120px;
    box-shadow: 0 0 0 35px rgba(239,106,88,.05), 0 0 0 70px rgba(239,106,88,.03);
  }
  .services::after {
    width: 120px;
    height: 34px;
    left: 18px;
    bottom: 20px;
    opacity: .7;
  }

  .split-section { padding-top: 92px; }
  .split-section::after {
    width: 60px;
    height: 60px;
    right: 18px;
    top: 24px;
    opacity: 1;
  }

  .japan-symbol {
    min-height: 235px;
    height: 235px !important;
  }
  .japan-symbol::before {
    width: 38%;
    right: 12%;
    top: 13%;
    box-shadow: -74px 112px 0 -18px rgba(255,255,255,.58);
  }

  .studio { padding-top: 92px; }
  .studio::before {
    top: 52px;
    right: 18px;
    opacity: 1;
  }
  .studio-card { box-shadow: 8px 8px 0 var(--coral-soft); }

  .perspective-feature {
    padding: 24px 20px 26px;
    border-top-width: 6px;
    background:
      radial-gradient(circle at 88% 14%, rgba(238,219,94,.9) 0 30px, transparent 31px),
      linear-gradient(135deg, var(--paper-2), #f8eee7);
  }

  .page-hero::before,
  .article-hero::before,
  .perspectives-hero::before {
    width: 250px;
    height: 170px;
    right: -78px;
    bottom: -28px;
    opacity: 1;
  }

  .contact {
    background:
      radial-gradient(circle at 88% 12%, var(--sun) 0 40px, transparent 41px),
      var(--coral-deep);
  }
}