/* ============================================================
   MMW-STYLE HERO  (v2 — modeled on makemywebsite.com.au's real hero)

   Measured from the live site (Nov 2026, 1440px):
     background : linear-gradient(#060709 0%, transparent 18%) over a
                  silver/grey wash — the top fades to dark, the body
                  of the hero is a light silver gradient
     disc       : pure white circle, 716px at 1440 viewport, logo at ~60%
     headline   : Montserrat 700, tight tracking, near-black (#1a1a1a)
     line 2     : Montserrat 400, lighter weight, same colour
     accents    : none (the reference's red/grey square accents were
                  never in the frame asset and were removed from ours)
     review card: floating white card, bottom-left, 5.0 + 5 gold stars
                  + "302 reviews"
   ============================================================ */

.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #F7F8FA 0%, #E6E8EB 42%, #D2D5DA 100%);
  padding:0;
  min-height:min(100vh, 860px);
  display:flex;flex-direction:column;justify-content:center;
  isolation:isolate;
}
/* the dark top fade the reference has over its hero */
.hero::before{
  content:'';position:absolute;inset:0 0 auto;height:170px;z-index:1;
  background:linear-gradient(#060709 0%, rgba(6,7,9,.55) 45%, rgba(6,7,9,0) 100%);
  pointer-events:none;
}

/* --- decorative: (none — the red crescent + square accents were removed) --- */

/* --- centre stack: disc, headline, sub --- */
.hero__stage{
  position:relative;z-index:3;
  max-width:var(--maxw);margin:0 auto;width:100%;
  padding:100px var(--gutter) 24px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
/* MMW's hero frame: a black square with a circular cutout, photo inside.
   Our asset hero-frame.png already contains the square + hole + disc. */
.hero__disc{
  width:min(430px,58vw);aspect-ratio:800 / 892;
  margin-bottom:26px;
}
@keyframes discIn{from{opacity:0;transform:scale(.9) translateY(20px);}to{opacity:1;transform:none;}}

.hero__title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(32px,4.2vw,56px);line-height:1.1;
  letter-spacing:-.02em;color:#1A1A1A;
  margin:0 0 10px;max-width:18ch;
  animation:upIn .8s var(--ease) .12s both;
}
.hero__title em{font-style:normal;color:var(--mmw-red);}
.hero__subtitle{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(18px,2.05vw,28px);line-height:1.3;
  letter-spacing:.01em;color:#FFFFFF;
  margin:0 0 22px;max-width:28ch;
  animation:upIn .8s var(--ease) .2s both;
}
.hero__submark{
  display:block;font-family:var(--font-body);font-weight:600;
  font-size:.52em;letter-spacing:.24em;text-transform:uppercase;
  color:#8A8A8A;margin-top:14px;
}
@keyframes upIn{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}

.hero__actions{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  animation:upIn .8s var(--ease) .28s both;
}

/* --- floating review card (bottom-left) --- */
.hero__review{
  position:absolute;left:clamp(16px,3vw,44px);bottom:clamp(96px,12vh,132px);z-index:4;
  background:var(--mmw-white);border-radius:14px;
  box-shadow:0 18px 44px rgba(26,26,26,.16);
  padding:20px 26px;text-align:center;min-width:190px;
  animation:upIn .8s var(--ease) .4s both;
}
.hero__review__g{width:26px;height:26px;margin:0 auto 8px;border-radius:6px;
  background:conic-gradient(#EA4335 0 25%,#4285F4 0 50%,#FBBC05 0 75%,#34A853 0);
  display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:15px;font-family:var(--font-display);}
.hero__review__score{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:4px;}
.hero__review__score b{font-family:var(--font-display);font-size:20px;color:#1A1A1A;}
.hero__review__stars{color:#FBBC05;font-size:19px;letter-spacing:1px;line-height:1;}
.hero__review__count{font-size:12.5px;color:#8A8A8A;letter-spacing:.03em;}

/* --- bottom stat strip --- */
.hero__strip{
  position:relative;z-index:3;
  margin-top:auto;
  background:var(--mmw-black);
  border-top:1px solid rgba(255,255,255,.1);
}
/* MMW's counter row is a bordered box of 4 DIVIDED cells, each with an
   icon + number + label. Ours is the same structure, our numbers. */
.hero__strip__row{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.hero__strip .stat{
  position:relative;
  padding:26px 22px 24px;
  text-align:center;
}
.hero__strip .stat + .stat::before{
  content:'';position:absolute;left:0;top:22%;bottom:22%;
  width:1px;background:rgba(255,255,255,.12);
}
.hero__strip .stat::after{
  content:'';position:absolute;inset:0 0 auto;height:2px;
  background:var(--mmw-red);
  transform:scaleX(0);transform-origin:center;
  transition:transform .45s var(--ease);
}
.hero__strip .stat:hover::after{transform:scaleX(1);}
.hero__strip .stat__num{font-size:clamp(26px,2.7vw,38px);}
.hero__strip .stat__label{color:#7E838B;}

/* --- responsive --- */
@media (max-width:1080px){
  .hero{min-height:auto;}
  .hero__stage{padding:112px var(--gutter) 28px;}
  .hero__disc{width:min(300px,52vw);}
}
@media (max-width:860px){
  .hero__strip__row{grid-template-columns:repeat(2,1fr);gap:26px 18px;}
  
  .hero__review{position:static;margin:26px auto 4px;display:inline-block;}
  .hero__stage{padding-top:112px;}
}
@media (max-width:640px){
  .hero__disc{width:min(230px,62vw);margin-bottom:22px;}
  .hero__title{letter-spacing:-.01em;}
  .hero__actions{gap:11px;}
  .hero__actions .btn{width:100%;}
  .hero__strip__row{padding:26px var(--gutter);}
}