/* HM Builders: homepage hero (Oct 2026). Loaded by index.php only.
   Layout steps: 1100px+ = text + 3-photo collage + badge
                 900-1099 = text + one tall photo
                 under 900 = photo on top, text below (single column)  */

.hm-hero{background:#f8f9fa;color:#64635f;font-family:'TASA Orbiter Variable',Arial,sans-serif}
.hm-hero *,.hm-hero *::before,.hm-hero *::after{box-sizing:border-box}

/* Two columns: 1fr text, 1.4fr photos (matches the 1280 design: 80px sides, 32px top/bottom) */
.hm-hero__inner{max-width:1440px;margin:0 auto;padding:32px var(--hm-pad,clamp(24px,6.25vw,80px));display:grid;grid-template-columns:1fr 1.4fr;align-items:center}

/* ---------- Text side ---------- */
.hm-hero__text{min-width:0;padding-block:28px;padding-inline-end:40px}
.hm-hero__title{margin:0 0 24px;color:#1a1a1a;font-family:'TASA Orbiter Variable',Arial,sans-serif;font-size:clamp(40px,3.75vw,54px);font-weight:500;line-height:1;letter-spacing:0;text-transform:capitalize}
.hm-hero__title span{display:block}
.hm-hero__desc{max-width:399px;margin:0 0 clamp(32px,4.7vw,60px);color:#64635f;font-size:20px;font-weight:400;line-height:1.1;letter-spacing:.5px}

.hm-hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px}
.hm-btn{display:inline-flex;align-items:center;justify-content:center;min-width:147px;min-height:48px;padding:14px 28px;border:1px solid #c9a227;border-radius:100px;font-family:'TASA Orbiter Variable',Arial,sans-serif;font-size:18px;font-weight:500;line-height:1.1;letter-spacing:.6px;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.hm-btn--fill{background:#c9a227;color:#fff}
.hm-btn--fill:hover{background:#b3901f;border-color:#b3901f;color:#fff}
.hm-btn--outline{background:transparent;color:#c9a227}
.hm-btn--outline:hover{background:#c9a227;color:#fff}
.hm-btn:focus-visible,.hm-hero__badge:focus-visible{outline:3px solid #1a365d;outline-offset:3px}

.hm-hero__stats{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.hm-hero__stats li{display:flex;align-items:center;gap:12px}
.hm-hero__star{flex:0 0 44px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#faf3de;color:#c9a227}
.hm-hero__star svg{display:block;width:24px;height:24px}
.hm-hero__stat-text{max-width:200px;font-size:15px;line-height:1.25;letter-spacing:.4px}

/* ---------- Photo side ---------- */
.hm-hero__media{position:relative;width:100%;aspect-ratio:653/519;display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;gap:8px}
.hm-hero__tile{position:relative;margin:0;min-width:0;min-height:0;overflow:hidden;border-radius:24px;background:#e6e9ed}
.hm-hero__tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hm-hero__tile--main{grid-column:1;grid-row:1 / span 2}
.hm-hero__tile--main img{object-position:60% 50%}
.hm-hero__tile--top{grid-column:2;grid-row:1}
.hm-hero__tile--bottom{grid-column:2;grid-row:2}

/* Round badge sits where the three photo edges meet (middle of the 8px gaps) */
.hm-hero__badge{position:absolute;z-index:2;left:calc((100% - 8px) * 1.3 / 2.3 + 4px);top:50%;width:clamp(72px,7.03vw,96px);aspect-ratio:1;display:block;border-radius:50%;transform:translate(-50%,-50%);transition:transform .25s ease}
.hm-hero__badge:hover{transform:translate(-50%,-50%) scale(1.06)}
.hm-hero__badge img{display:block;width:100%;height:100%}

/* ---------- 900-1099: one tall photo next to the text ---------- */
@media (max-width:1099.98px){
  .hm-hero__inner{grid-template-columns:1.1fr .9fr}
  .hm-hero__title{font-size:clamp(36px,4.6vw,48px)}
  .hm-hero__media{aspect-ratio:5/7;grid-template-columns:1fr;grid-template-rows:1fr}
  .hm-hero__tile{border-radius:20px}
  .hm-hero__tile--main{grid-column:1;grid-row:1}
  .hm-hero__tile--top,.hm-hero__tile--bottom,.hm-hero__badge{display:none}
}

/* ---------- Under 900: photo on top, text below ---------- */
@media (max-width:899.98px){
  .hm-hero__inner{grid-template-columns:1fr;gap:32px;padding:24px var(--hm-pad,clamp(20px,5vw,48px)) 48px}
  .hm-hero__media{order:-1;aspect-ratio:2/1}
  .hm-hero__text{padding:0}
  .hm-hero__title{font-size:clamp(32px,6vw,44px)}
  .hm-hero__title span{display:inline}
  .hm-hero__desc{max-width:560px;margin-bottom:32px;font-size:18px;line-height:1.35}
  .hm-hero__btns{margin-bottom:28px}
  .hm-hero__stat-text{max-width:none}
}

/* ---------- Phones ---------- */
@media (max-width:599.98px){
  .hm-hero__inner{gap:28px;padding-top:20px;padding-bottom:40px}
  .hm-hero__media{aspect-ratio:3/2}
  .hm-hero__tile{border-radius:16px}
  .hm-hero__title{font-size:clamp(30px,8.6vw,36px);margin-bottom:16px}
  .hm-hero__desc{font-size:16px;margin-bottom:28px}
  .hm-btn{flex:1 1 147px;min-width:0;padding:13px 20px;font-size:16px}
  .hm-hero__stat-text{font-size:14px}
}
@media (max-width:359.98px){
  .hm-btn{flex-basis:100%}
}

@media (prefers-reduced-motion:reduce){
  .hm-btn,.hm-hero__badge{transition:none}
  .hm-hero__badge:hover{transform:translate(-50%,-50%)}
}