/*
 * Brighter MPR palette: keep the logo's warm brown/ivory identity while
 * reducing the muted cast. Cool tones remain limited to reflected light.
 */
:root {
  --font-mpr:
    "PingFang SC",
    "Hiragino Sans GB",
    "Noto Sans CJK SC",
    "Noto Sans SC",
    "Microsoft YaHei",
    Arial,
    sans-serif;
  --ivory: #fbf8f4;
  --paper: #fffdfb;
  --white: #fff;
  --brown: #684f45;
  --brown-dark: #332925;
  --taupe: #786d67;
  --line: #e5ddd6;
  --gold: #b89063;
  --shadow: 0 24px 70px rgb(70 50 42 / 10%);
}

body {
  background: var(--paper);
  font-family: var(--font-mpr);
  font-synthesis: none;
}

button,
summary {
  font-family: var(--font-mpr);
}

h1,
h2,
h3,
.fact-band span,
.quote-panel p,
.faq-list summary,
.doctor-card-copy b {
  font-family: var(--font-mpr);
  font-weight: 400;
}

.eyebrow,
.fact-band b,
.tag {
  font-weight: 600;
}

.site-header {
  background: rgb(255 253 251 / 92%);
  border-bottom-color: rgb(104 79 69 / 10%);
}

.hero {
  background: var(--ivory);
}

.hero-copy {
  position: relative;
  z-index: 1;
}

.hero-visual {
  background: #eef1f4;
  overflow: hidden;
}

.hero-visual::after {
  background:
    linear-gradient(90deg, rgb(251 248 244 / 18%), transparent 25%),
    linear-gradient(180deg, transparent 68%, rgb(83 68 72 / 8%));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.hero-visual img {
  object-position: 56% center;
}

.orb-note {
  background: rgb(86 72 80 / 58%);
  border-color: rgb(255 255 255 / 72%);
  box-shadow: 0 10px 30px rgb(46 36 38 / 12%);
  z-index: 1;
}

.section.warm {
  background: #f7f2ed;
}

.service-card,
.article-card,
.info-card {
  background: rgb(255 255 255 / 88%);
  border-color: var(--line);
}

.service-card.featured,
.fact-band,
.cta-section {
  background: #634b41;
}

.definition-box,
.notice-box {
  background: #f7f1eb;
}

.site-footer {
  background: #f5eee8;
}

@media (width > 980px) {
  .hero {
    grid-template-columns: minmax(0, 44%) minmax(0, 56%);
    height: min(680px, calc(100svh - 82px));
    min-height: 600px;
  }

  .hero-copy {
    padding: 54px clamp(40px, 4.5vw, 82px);
  }

  .hero h1 {
    font-size: clamp(46px, 3.35vw, 60px);
    letter-spacing: -0.035em;
    line-height: 1.2;
    margin-bottom: 22px;
  }

  .hero-lead {
    font-size: 16px;
    line-height: 1.8;
  }

  .hero-actions {
    margin-top: 28px;
  }

  .trust-line {
    margin-top: 30px;
    padding-top: 20px;
  }

  .hero-visual {
    height: 100%;
    min-height: 0;
  }

  .hero-visual img {
    transform: scale(1.1);
    transform-origin: 56% 58%;
  }

  .section {
    padding-block: 88px;
  }

  .section.split {
    padding-block: 60px;
  }

  .fact-band + .section {
    padding-bottom: 48px;
    padding-top: 56px;
  }

  .fact-band + .section + .section {
    padding-top: 48px;
  }

  .section-heading {
    grid-template-columns: minmax(150px, 0.7fr) minmax(0, 2.3fr);
    margin-bottom: 44px;
  }

  .section-heading h2 {
    font-size: clamp(35px, 2.8vw, 46px);
  }

  .process-card {
    min-height: 235px;
  }

  .service-card {
    min-height: 320px;
  }

  .split h2 {
    font-size: clamp(38px, 3.2vw, 52px);
  }

  .cta-section h2 {
    font-size: clamp(42px, 4vw, 58px);
  }
}

@media (width > 640px) and (width <= 980px) {
  .hero h1 {
    font-size: clamp(42px, 7vw, 56px);
  }

  .hero-visual img {
    transform: scale(1.05);
    transform-origin: 56% 56%;
  }

  .fact-band + .section {
    padding-bottom: 52px;
    padding-top: 64px;
  }

  .fact-band + .section + .section {
    padding-top: 52px;
  }
}

@media (width <= 640px) {
  .hero-visual img {
    object-position: 56% center;
    transform: none;
  }

  .fact-band + .section {
    padding-bottom: 44px;
    padding-top: 48px;
  }

  .fact-band + .section + .section {
    padding-top: 44px;
  }
}