/* MENGED fluid layout system. Loaded after the legacy desktop/mobile sheets. */
:root{
  --mg-fluid-gutter:clamp(18px,3.2vw,64px);
  --mxw:1380px;
  --mxg:var(--mg-fluid-gutter);
}
@media (min-width:1440px){:root{--mxw:1520px}}
@media (min-width:1920px){:root{--mxw:1740px}}
@media (min-width:2560px){:root{--mxw:1900px;--mxg:clamp(64px,4vw,104px)}}

/* Desktop grows with the viewport. A deliberate edge gutter remains at every size. */
@media (min-width:1025px){
  :root{--w:min(var(--mxw),calc(100% - 2 * var(--mxg)))}
  html body .w:not(.prose):not(.rq):not(.contact-page){
    width:min(var(--mxw),calc(100% - 2 * var(--mxg)))!important;
    max-width:var(--mxw)!important;
    margin-inline:auto!important;
  }
  html body .hero .w{width:min(var(--mxw),calc(100% - 2 * var(--mxg)))!important;max-width:var(--mxw)!important}
  html body header#nav{padding-left:max(var(--mxg),calc((100% - var(--mxw))/2))!important;padding-right:max(var(--mxg),calc((100% - var(--mxw))/2))!important}
  #main .bento,#main .grid,#main .stg{grid-template-columns:repeat(auto-fit,minmax(min(100%,285px),1fr))}
}

/* Tablet: keep usable line lengths and allow visual columns to breathe. */
@media (min-width:761px) and (max-width:1024px){
  :root{--w:calc(100% - clamp(40px,7vw,88px))}
  html body #main .w:not(.prose):not(.rq):not(.contact-page),html body #foot .w{
    width:var(--w)!important;max-width:none!important;margin-inline:auto!important;
  }
  #main .group-hero-inner{grid-template-columns:minmax(0,1fr);row-gap:24px;align-items:start}
  #main .group-hero-copy{max-width:760px}
  #main .group-hero-note{max-width:60ch;margin:0;padding:18px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.34)}
  #main .group-hero-note p{max-width:42ch}
  #main .group-hero .intents{margin-top:28px!important}
}

/* Narrow tablets and short laptop windows: stack paired hero content before it feels cramped. */
@media (min-width:761px) and (max-width:900px){
  #main .ch2,#main .bh2,#main .rh2{grid-template-columns:minmax(0,1fr);gap:24px}
  #main .chp{max-width:760px;width:100%;margin-inline:auto}
  #main .bh2>*,#main .rh2>*,#main .ch2>*{min-width:0}
}

/* Phone gutters scale gently from small Android screens to large phones. */
@media (max-width:760px){
  :root{--m-gut:clamp(15px,4.4vw,23px);--m-sec:clamp(40px,8vw,54px)}
  html,body{max-width:100%;overflow-x:clip}
  html body #main .w.w.w,html body #foot .w.w.w{padding-inline:var(--m-gut)!important}
  #main .bento,#main .grid,#main .stg{grid-template-columns:minmax(0,1fr)}
}

/* Images are visual layers, not click shields. Linked parent cards remain clickable. */
#main .hero .bg,#main .th .bg,#main .tmp,#main .ph,#main .chp,#main .st-photo{
  background-color:#e7ebe4;background-position:center;background-size:cover;
}
#main .hero .bg img,#main .th .bg img,#main .tmp img,#main .ph img,#main .chp img,#main .st-photo img{
  display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;pointer-events:none;
}
#main .hero .bg,#main .th .bg{pointer-events:none}
#main :where(.guide-card-photo,.group-service-photo,.service-photo,.tile-photo) img{pointer-events:none;object-fit:cover}
#main :where(.grid,.bento,.stg,.pr4,.group-outcome-grid)>*{min-width:0}
#main :where(.grid,.bento,.stg,.pr4,.group-outcome-grid) img{max-width:100%;height:auto}
#main :where(section,.w,.card,.tile,.guide-card,.stc){min-width:0}

/* Avoid forced clipping at the viewport edge while keeping horizontal rails intentional. */
html,body{max-width:100%}
body{overflow-x:clip}
#main{min-width:0;max-width:100%}
#main :where(h1,h2,h3,p,a,button,small,strong,span){min-width:0}
#main :where(h1,h2,h3,p){overflow-wrap:normal}
#main :where(input,select,textarea,button){max-width:100%}

@media (prefers-reduced-motion:reduce){
  #main .hero .bg img,#main .tmp img,#main .ph img{transition:none!important;animation:none!important}
}