@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&family=Zen+Kaku+Gothic+Antique:wght@400;500;700&display=swap');
/* Typography scoped to the hero; other sections retain their existing design. */
.hero h1{font-family:'Zen Kaku Gothic Antique','Noto Sans JP',sans-serif;font-weight:700;font-size:clamp(30px,3.15vw,46px);line-height:1.45;letter-spacing:.04em;margin-bottom:25px}
.hero h1 small{font-size:.65em;font-weight:500}
.hero .last-line{font-size:.83em}
.hero .lead{font-family:'Montserrat','Noto Sans JP',sans-serif;font-weight:400;font-size:14px;line-height:1.85;letter-spacing:.04em;color:#5a5a5a}
.hero .hero-price{font-family:'Zen Kaku Gothic Antique','Noto Sans JP',sans-serif;font-weight:500;font-size:22px;letter-spacing:.03em;gap:7px;margin-top:20px;white-space:nowrap}
.hero .hero-price strong{font-family:'Montserrat','Noto Sans JP',sans-serif;font-weight:500;font-size:42px;letter-spacing:0;line-height:1.25;font-variant-numeric:lining-nums proportional-nums}
.hero .hero-price strong small{font-family:'Zen Kaku Gothic Antique','Noto Sans JP',sans-serif;font-size:18px;font-weight:400;margin-left:3px}
.hero .hero-price>span{font-family:'Zen Kaku Gothic Antique','Noto Sans JP',sans-serif;font-size:13px;font-weight:400;letter-spacing:0}
.hero .actions{margin-top:26px}
@media(max-width:900px){.hero h1{font-size:29px}.hero .lead{font-size:12px}.hero .hero-price{font-size:17px;gap:4px}.hero .hero-price strong{font-size:34px}.hero .hero-price strong small{font-size:15px}.hero .hero-price>span{font-size:11px}}
@media(max-width:600px){.hero h1{font-size:clamp(26px,7.3vw,38px);line-height:1.45;letter-spacing:.025em;margin-bottom:23px}.hero .lead{font-size:12px;line-height:1.85;letter-spacing:.025em}.hero .hero-price{font-size:18px;gap:3px;padding-left:10px;padding-right:0;margin-top:15px}.hero .hero-price strong{font-size:clamp(29px,8.5vw,38px)}.hero .hero-price strong small{font-size:15px}.hero .hero-price>span{font-size:10px}.hero .actions{margin-top:23px}}
/* Keep mobile copy readable over the moving portfolio without shifting its layout. */
@media(max-width:600px){
  .hero .lead,.hero .hero-price{position:relative;isolation:isolate}
  .hero .lead{width:fit-content;max-width:100%}
  .hero .lead::before,.hero .hero-price::before{content:"";position:absolute;z-index:-1;background:rgba(252,251,248,.92);border-radius:6px;pointer-events:none}
  .hero .lead::before{inset:-10px -12px}
  .hero .hero-price::before{inset:0 -10px 0 0}
}