/*
 * Hero-only Signal Particles background.
 * Rollback: restore the matching files from _backup/20260826-signal-centered-before/.
 */
.hero--signal-centered{
  isolation:isolate;
  height:min(88svh,980px);
  min-height:720px;
  padding:80px var(--pad) 0;
  display:flex;
  align-items:stretch;
}

.hero--signal-centered .hero-grid{
  z-index:0;
  inset:80px 0 0;
  background-color:var(--paper);
  background-image:
    linear-gradient(rgba(0,86,99,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,86,99,.035) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:none;
  mask-image:none;
}

.hero--signal-centered .hero-stage{
  position:relative;
  z-index:3;
  width:100%;
  max-width:1440px;
  min-width:0;
  height:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero--signal-centered .hero-copy{
  position:relative;
  z-index:3;
  inset:auto;
  top:-1vh;
  width:min(100%,1080px);
  max-width:1080px;
  margin:0 auto;
  transform:none;
  text-align:center;
}

.hero--signal-centered .eyebrow{
  justify-content:center;
  margin-bottom:12px;
}

.hero--signal-centered .eyebrow::after{
  content:"";
  display:block;
  width:38px;
  height:2px;
  background:#D49B37;
}

.hero--signal-centered .hero-region{
  margin:0 0 30px;
  color:var(--blue);
  font-size:clamp(12px,1vw,14px);
  font-weight:600;
  line-height:1.6;
  letter-spacing:.055em;
  white-space:nowrap;
}

.hero--signal-centered .hero-title-ja{
  font-size:clamp(78px,8.25vw,132px);
  line-height:1.02;
  letter-spacing:-.062em;
}

.hero--signal-centered .hero-brand-copy{
  width:min(100%,760px);
  margin:42px auto 0;
}

.hero--signal-centered .hero-brand-intro-line{
  display:block;
  white-space:nowrap;
}

.hero--signal-centered .hero-delivery-note{
  width:auto;
  max-width:none;
  margin:14px auto 0;
  white-space:nowrap;
}

.hero--signal-centered .hero-actions--single{
  width:min(100%,650px);
  margin:34px auto 0;
  gap:12px;
  justify-content:center;
}

.hero--signal-centered .hero-actions--single .btn{
  flex:1 1 0;
  width:auto;
}

.hero--signal-centered .hero-price-cta{
  border-color:var(--blue2);
  background:rgba(212,155,55,.08);
}

.hero--signal-centered .hero-price-cta:hover{
  border-color:var(--blue2);
  background:var(--blue2);
  color:var(--ink);
}

.hero-signal-particles{
  position:absolute;
  z-index:1;
  inset:80px 0 0;
  overflow:hidden;
  pointer-events:none;
}

.hero-signal-particles__canvas{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  opacity:.98;
}

.hero-signal-particles__overlay{
  position:absolute;
  z-index:1;
  inset:0;
  background:
    radial-gradient(ellipse 47% 58% at 50% 49%,rgba(247,248,251,.9) 0%,rgba(247,248,251,.78) 31%,rgba(247,248,251,.3) 56%,rgba(247,248,251,.02) 80%,transparent 100%),
    linear-gradient(180deg,rgba(247,248,251,.2),transparent 20%,transparent 78%,rgba(247,248,251,.26));
}

.hero-signal-particles.is-fallback::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle,rgba(0,86,99,.18) 0 1px,transparent 1.4px),
    radial-gradient(circle at 78% 38%,rgba(212,155,55,.26) 0 2px,transparent 2.8px),
    radial-gradient(circle at 22% 72%,rgba(0,86,99,.16) 0 1.5px,transparent 2px);
  background-size:22px 22px,100% 100%,100% 100%;
}

@media(max-width:900px){
  .hero--signal-centered .hero-copy{width:min(100%,780px)}
  .hero--signal-centered .hero-title-ja{
    font-size:clamp(60px,10.2vw,88px);
    line-height:1.04;
  }
}

@media(max-width:700px){
  .hero--signal-centered{
    height:auto;
    min-height:0;
    padding:calc(var(--header-height) + clamp(58px,8svh,74px)) var(--pad) clamp(72px,10svh,96px);
  }

  .hero--signal-centered .hero-grid,
  .hero-signal-particles{inset:var(--header-height) 0 0}

  .hero--signal-centered .hero-stage{height:auto}

  .hero--signal-centered .hero-copy{
    top:0;
    width:100%;
    max-width:100%;
  }

  .hero--signal-centered .eyebrow{margin-bottom:12px}

  .hero--signal-centered .hero-region{
    margin-bottom:31px;
    font-size:clamp(10.5px,3vw,12px);
    letter-spacing:.035em;
  }

  .hero--signal-centered .hero-title-ja{
    width:calc(100% + 24px);
    max-width:none;
    margin-inline:-12px;
    font-size:clamp(40px,11vw,46px);
    line-height:1.08;
    letter-spacing:-.06em;
  }

  .hero--signal-centered .hero-brand-copy{
    width:100%;
    margin-top:40px;
    font-size:12.5px;
    line-height:1.8;
  }

  .hero--signal-centered .hero-delivery-note{
    width:auto;
    max-width:none;
    margin-top:22px;
    font-size:clamp(10px,2.8vw,11.5px);
    letter-spacing:0;
    white-space:nowrap;
  }

  .hero--signal-centered .hero-actions--single{
    width:84%;
    max-width:286px;
    margin-top:38px;
    gap:10px;
  }

  .hero--signal-centered .hero-actions--single .btn{
    flex:none;
    width:100%;
  }

  .hero-signal-particles__canvas{opacity:.73}

  .hero-signal-particles__overlay{
    background:
      radial-gradient(ellipse 86% 54% at 50% 43%,rgba(247,248,251,.9) 0%,rgba(247,248,251,.72) 45%,rgba(247,248,251,.13) 78%,transparent 100%),
      linear-gradient(180deg,rgba(247,248,251,.24),transparent 24%,transparent 72%,rgba(247,248,251,.3));
  }
}

@media(max-width:350px){
  .hero--signal-centered .hero-title-ja{
    width:calc(100% + 20px);
    margin-inline:-10px;
    font-size:34px;
    line-height:1.1;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-signal-particles__canvas{opacity:.72}
}
