/* Top section only: readable type, responsive photo and clear regional names. */
.hero{grid-template-columns:52% 48%}
.hero-copy{padding-right:24px}
.hero .eyebrow{font-size:14px;margin-bottom:20px;line-height:1.8}
.hero-kicker{font-size:16px;line-height:1.9;letter-spacing:.05em}
.hero h1{font-size:clamp(44px,4.3vw,60px);line-height:1.6}
.hero-description{font-size:17px;line-height:2.05}
.hero-actions{gap:19px}
.hero-actions .button{font-size:16px;min-height:60px}
.hero-actions .text-link{font-size:15px;line-height:1.8;max-width:none}
.hero-note{font-size:13px;line-height:1.9}
.hero-visual{width:calc(100% - 24px);max-width:520px;height:440px;margin-left:24px;justify-self:end}
.hero-region{gap:24px;align-items:center;padding-top:28px;padding-bottom:30px}
.hero-region>span{font-size:14px;line-height:1.8;letter-spacing:.1em}
.hero-region p{font-size:17px;line-height:2.1;color:var(--navy)}
.hero-region strong{font-weight:850;color:var(--green);white-space:nowrap;background:linear-gradient(transparent 67%,#ffdb0066 67%);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

@media(max-width:1000px){
  .hero .eyebrow{font-size:13px}
  .hero-kicker{font-size:15px}
  .hero h1{font-size:clamp(40px,4.7vw,54px)}
  .hero-description{font-size:16px}
  .hero-visual{height:390px}
  .hero-region{gap:18px;align-items:flex-start}
  .hero-region p{font-size:16px}
}

@media(max-width:900px){
  .hero{display:flex;flex-direction:column;align-items:stretch}
  .hero-copy{padding:0}
  .hero .eyebrow{font-size:14px;margin-bottom:16px}
  .hero-kicker{font-size:14px;margin-bottom:12px}
  .hero h1{font-size:clamp(40px,9.8vw,56px);line-height:1.55;white-space:normal;margin-bottom:20px}
  .hero-description{font-size:15px;line-height:2}
  .hero-actions{display:flex;flex-flow:row wrap;align-items:center;gap:16px 24px;margin-top:24px}
  .hero-actions .button{font-size:14px;padding:14px 20px;min-height:54px;gap:22px}
  .hero-actions .text-link{font-size:14px;gap:12px;max-width:none}
  .hero-note{font-size:12px;margin-top:16px}
  .hero-visual{align-self:center;width:100%;max-width:560px;height:clamp(270px,82vw,370px);margin:28px 0 0}
  .hero-photo{border-radius:65px 10px 10px 10px}
  .hero-region{flex-direction:column;align-items:flex-start;gap:12px;margin-top:0;padding-top:24px;padding-bottom:26px}
  .hero-region>span{font-size:12px}
  .hero-region p{font-size:16px;line-height:2.1}
}

@media(max-width:359px){
  .hero .eyebrow{font-size:13px}
  .hero-description{font-size:14px}
  .hero-note{font-size:11px}
  .hero-region p{font-size:15px}
}

/* Desktop refinement. Keep the approved phone/tablet layout untouched. */
@media(min-width:901px){
  .hero{grid-template-columns:48% 52%}
  .hero .eyebrow{font-size:clamp(14px,1.15vw,16px)}
  .hero-kicker{font-size:clamp(16px,1.3vw,18px)}
  .hero h1{font-size:clamp(46px,5.1vw,72px)}
  .hero-description{font-size:clamp(17px,1.45vw,20px);line-height:2}
  .hero-actions .button{font-size:clamp(16px,1.3vw,18px);min-height:64px}
  .hero-actions .text-link{font-size:17px}
  .hero-note{font-size:14px}
  .hero-visual{justify-self:start;width:calc(100% - 12px);max-width:600px;height:clamp(450px,40vw,510px);margin-left:12px}
}

/* Regional introduction: keep the main catchphrase and photo unchanged. */
.hero .eyebrow{margin-bottom:8px}
.hero-location{font-size:14px;line-height:1.9;color:var(--muted);margin:0 0 22px}
.club-introduction{font-size:16px;line-height:2.1;color:var(--navy);margin:0 0 32px;max-width:1050px}
#guide-title{font-size:clamp(24px,2.6vw,36px);line-height:1.6}
.guide-tagline{font-size:14px;color:var(--muted);line-height:1.9;margin:12px 0 0}
@media(max-width:900px){.hero-location{font-size:13px;margin-bottom:18px}.club-introduction{font-size:15px;margin-bottom:26px}}
@media(max-width:640px){#guide-title{font-size:clamp(23px,5.9vw,28px)}.guide-tagline{font-size:12px}.club-introduction{font-size:14px;line-height:2}}
