/* SMG V30.4 Serious Typography & Layout Polish — staging hotfix
   Purpose: professional heading scale, no broken words, no column-like title wrapping, stable desktop/macbook layout. */
:root{
  --smg-v304-gold:#f5d98b;
  --smg-v304-gold2:#d9a33f;
  --smg-v304-white:#fff7e8;
  --smg-v304-muted:rgba(255,247,232,.78);
  --smg-v304-line:rgba(245,217,139,.30);
}

/* 1) Absolutely prevent broken words in premium headings/buttons/cards */
h1,h2,h3,h4,h5,h6,
.hero h1,.hero h2,.hero h3,.h1,.h2,.h3,
.card h1,.card h2,.card h3,.panel h1,.panel h2,.panel h3,
.smg-card h1,.smg-card h2,.smg-card h3,.smg-media-card h1,.smg-media-card h2,.smg-media-card h3,
[class*="title"],[class*="Title"],[class*="heading"],[class*="Heading"],.smg-display,.tag,.btn,button,a{
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
  -webkit-hyphens:none!important;
  text-wrap:balance;
}
p,li,small,span,figcaption,label,input,textarea,select{
  word-break:normal!important;
  overflow-wrap:break-word!important;
  hyphens:none!important;
  -webkit-hyphens:none!important;
}

/* 2) Serious luxury heading scale: elegant, readable, not screaming */
h1,.hero h1,.h1,.smg-display{
  font-size:clamp(42px,5.2vw,82px)!important;
  line-height:1.03!important;
  letter-spacing:-.045em!important;
  max-width:min(980px,100%)!important;
  margin-top:0!important;
}
h2,.section h2,.head h2,.panel h2{
  font-size:clamp(34px,3.6vw,58px)!important;
  line-height:1.06!important;
  letter-spacing:-.035em!important;
  max-width:min(920px,100%)!important;
}
h3,.card h3,.panel h3,.smg-card h3,.smg-media-card h3,article h3{
  font-size:clamp(24px,2.25vw,38px)!important;
  line-height:1.08!important;
  letter-spacing:-.025em!important;
  max-width:100%!important;
}
h4,.card h4,.panel h4,footer h4{
  font-size:clamp(18px,1.4vw,24px)!important;
  line-height:1.14!important;
}

/* 3) Desktop/MacBook hero should fit without cutting or pushing text into narrow columns */
@media (min-width:981px){
  .hero,.section{
    padding-top:clamp(48px,5vw,78px)!important;
    padding-bottom:clamp(48px,5vw,78px)!important;
  }
  .heroGrid,.hero-grid,.split{
    display:grid!important;
    grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr)!important;
    gap:clamp(28px,4vw,64px)!important;
    align-items:center!important;
  }
  .heroGrid > *,.hero-grid > *,.split > *{
    min-width:0!important;
    max-width:100%!important;
  }
  .hero .panel,.hero .card,.hero aside.panel,.hero-grid .card{
    min-width:0!important;
    width:100%!important;
    max-width:460px!important;
    justify-self:end!important;
  }
  .hero .panel h2,.hero .card h2,.hero .panel h3,.hero .card h3,
  aside.panel h2,aside.panel h3{
    font-size:clamp(28px,2.6vw,44px)!important;
    line-height:1.08!important;
    letter-spacing:-.025em!important;
  }
}

/* 4) 13-inch laptop / MacBook Air safety layer */
@media (min-width:981px) and (max-width:1366px){
  h1,.hero h1,.h1,.smg-display{
    font-size:clamp(42px,4.75vw,66px)!important;
    line-height:1.04!important;
    max-width:760px!important;
  }
  h2,.section h2,.head h2,.panel h2{
    font-size:clamp(30px,3.05vw,46px)!important;
  }
  h3,.card h3,.panel h3,.smg-card h3,.smg-media-card h3,article h3{
    font-size:clamp(22px,1.85vw,31px)!important;
  }
  .heroGrid,.hero-grid,.split{
    grid-template-columns:minmax(0,1fr) minmax(300px,.72fr)!important;
    gap:clamp(22px,3vw,42px)!important;
  }
  .hero .panel,.hero .card,.hero aside.panel,.hero-grid .card{
    max-width:380px!important;
  }
  .hero .panel h2,.hero .card h2,.hero .panel h3,.hero .card h3,
  aside.panel h2,aside.panel h3{
    font-size:clamp(24px,2.15vw,34px)!important;
  }
  .card,.panel,.smg-card,.smg-media-card,article,[class*="card"],[class*="Card"],[class*="panel"],[class*="Panel"]{
    padding:clamp(22px,2.2vw,30px)!important;
  }
}

/* 5) Cards/modules: straight, aligned, premium, but not oversized */
.grid,.cards,.smg-media-grid,[class*="grid"],[class*="Grid"]{
  align-items:stretch!important;
  gap:clamp(18px,2vw,28px)!important;
}
.card,.panel,.smg-card,.smg-media-card,.service-card,.property-card,.job-card,article,
[class*="card"],[class*="Card"],[class*="panel"],[class*="Panel"]{
  min-width:0!important;
  overflow:hidden!important;
}
.card p,.panel p,.smg-card p,.smg-media-card p,article p{
  font-size:clamp(15px,1vw,18px)!important;
  line-height:1.55!important;
}

/* 6) Buttons must stay clean and not wrap awkwardly */
.btn,button,.pill,.smg-control-grid a,.actions a,.btnrow a{
  white-space:normal!important;
  text-align:center!important;
  line-height:1.15!important;
}
.actions,.btnrow{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:12px!important;
}

/* 7) Mobile / tablet: strong, readable, no word cutting */
@media (max-width:980px){
  h1,.hero h1,.h1,.smg-display{
    font-size:clamp(38px,10.2vw,60px)!important;
    line-height:1.05!important;
    letter-spacing:-.035em!important;
    max-width:100%!important;
  }
  h2,.section h2,.head h2,.panel h2{
    font-size:clamp(30px,8.4vw,48px)!important;
    line-height:1.08!important;
  }
  h3,.card h3,.panel h3,.smg-card h3,.smg-media-card h3,article h3{
    font-size:clamp(23px,6.6vw,36px)!important;
    line-height:1.1!important;
  }
  .heroGrid,.hero-grid,.split{
    grid-template-columns:1fr!important;
  }
  .hero .panel,.hero .card,.hero aside.panel,.hero-grid .card{
    max-width:none!important;
    justify-self:stretch!important;
  }
}
@media (max-width:420px){
  h1,.hero h1,.h1,.smg-display{
    font-size:clamp(34px,9.4vw,44px)!important;
  }
  h2,.section h2,.head h2,.panel h2{
    font-size:clamp(28px,8vw,40px)!important;
  }
  h3,.card h3,.panel h3,.smg-card h3,.smg-media-card h3,article h3{
    font-size:clamp(22px,6.4vw,32px)!important;
  }
}

/* 8) Fix inline legacy oversized headings without editing every block manually */
[style*="font-size:34px"],[style*="font-size:42px"],[style*="font-size:58px"],[style*="font-size:clamp(36px"]{
  max-width:100%!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}

/* 9) Keep Monaco/SMG background elegant but secondary */
section::after,.section::after,.hero::after{
  opacity:.34!important;
}