/* SMG V30.2 Alignment & Control Polish — staging hotfix.
   Fixes: control panel moved to beginning, straight Monaco grid, aligned card blocks, filled empty visual zones. */
:root{
  --smg-v302-gold:#f5d98b;
  --smg-v302-gold-2:#d9a33f;
  --smg-v302-line:rgba(245,217,139,.34);
  --smg-v302-line-soft:rgba(245,217,139,.18);
  --smg-v302-white:#fff7e8;
  --smg-v302-glass:rgba(7,7,8,.86);
}

/* 1) Straight Monaco blueprint grid — no diagonal / crooked square feeling */
html,body{
  overflow-x:hidden!important;
}
body{
  background:
    radial-gradient(circle at 80% 8%,rgba(245,217,139,.14),transparent 28%),
    radial-gradient(circle at 12% 36%,rgba(184,135,50,.10),transparent 34%),
    linear-gradient(90deg,rgba(245,217,139,.045) 1px,transparent 1px),
    linear-gradient(0deg,rgba(245,217,139,.035) 1px,transparent 1px),
    linear-gradient(180deg,#050505 0%,#090807 52%,#030303 100%)!important;
  background-size:auto,auto,96px 96px,96px 96px,auto!important;
  background-position:center top,center top,center top,center top,center top!important;
  transform:none!important;
}

/* Keep all page surfaces visually straight */
main,section,.section,.hero,.panel,.card,.smg-card,.smg-media-card,article,
[class*="card"],[class*="Card"],[class*="panel"],[class*="Panel"],
.wrap,.container,.grid,.cards,[class*="grid"],[class*="Grid"]{
  transform:none!important;
  rotate:0deg!important;
  skew:0deg!important;
  box-sizing:border-box!important;
}

/* 2) Control panel must start near the top, not float over empty lower sections */
.smg-control-dock{
  width:min(1220px,calc(100% - 32px))!important;
  margin:clamp(16px,2.4vw,30px) auto clamp(10px,1.8vw,22px)!important;
  position:relative!important;
  z-index:20!important;
}
.smg-control-dock .smg-executive-control-card{
  position:relative!important;
  inset:auto!important;
  left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:minmax(150px,.45fr) minmax(520px,1.55fr)!important;
  align-items:center!important;
  gap:clamp(14px,2vw,26px)!important;
  border:1px solid var(--smg-v302-line)!important;
  border-radius:26px!important;
  padding:clamp(16px,2vw,24px)!important;
  background:
    linear-gradient(135deg,rgba(8,8,9,.94),rgba(28,20,9,.76)),
    radial-gradient(circle at 88% 20%,rgba(245,217,139,.13),transparent 34%)!important;
  box-shadow:0 24px 74px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,246,210,.10)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
.smg-control-dock .smg-executive-control-card h3{
  margin:0!important;
  font-size:clamp(13px,1.1vw,17px)!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  background:linear-gradient(135deg,#fff6bf,#f5d98b 35%,#d9a33f 70%,#8f5f1f)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  text-shadow:0 8px 28px rgba(0,0,0,.55)!important;
}
.smg-control-dock .smg-control-grid{
  display:grid!important;
  grid-template-columns:repeat(9,minmax(82px,1fr))!important;
  gap:10px!important;
}
.smg-control-dock .smg-control-grid a{
  min-height:42px!important;
  border-radius:999px!important;
  border:1px solid rgba(245,217,139,.38)!important;
  background:rgba(245,217,139,.07)!important;
  color:var(--smg-v302-white)!important;
  -webkit-text-fill-color:var(--smg-v302-white)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  font-weight:800!important;
  font-size:clamp(11px,.82vw,13px)!important;
  text-decoration:none!important;
  line-height:1.1!important;
  box-shadow:inset 0 1px 0 rgba(255,246,210,.08)!important;
}
.smg-control-dock .smg-control-grid a:hover{
  background:linear-gradient(135deg,rgba(245,217,139,.22),rgba(184,135,50,.13))!important;
  color:#fff9d8!important;
  -webkit-text-fill-color:#fff9d8!important;
}

/* If the control card is not yet moved by JS, keep it hidden from lower-left floating overlap */
body:not(.smg-v302-control-ready) > .smg-executive-control-card{
  position:relative!important;
  width:min(1220px,calc(100% - 32px))!important;
  max-width:none!important;
  margin:18px auto!important;
  left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
}

/* 3) Fill large empty spaces with elegant content surfaces / blueprint depth */
section:empty,.section:empty{
  display:none!important;
}
section,.section,.hero,.smg-media-hero,.media-hero{
  overflow:hidden!important;
}
section::after,.section::after,.hero::after,.smg-media-hero::after,.media-hero::after{
  content:"";
  position:absolute;
  inset:auto 4% 4% auto;
  width:min(420px,42vw);
  height:min(260px,28vw);
  pointer-events:none;
  border:1px solid rgba(245,217,139,.09);
  border-radius:28px;
  background:
    linear-gradient(90deg,rgba(245,217,139,.035) 1px,transparent 1px),
    linear-gradient(0deg,rgba(245,217,139,.028) 1px,transparent 1px),
    radial-gradient(circle at 68% 28%,rgba(245,217,139,.06),transparent 36%);
  background-size:64px 64px,64px 64px,auto;
  opacity:.56;
  z-index:0;
}
section > *, .section > *, .hero > *, .smg-media-hero > *, .media-hero > *{position:relative;z-index:1;}

/* 4) Card / square alignment. Every grid item should sit in clean rows */
.grid,.cards,.smg-media-grid,[class*="grid"],[class*="Grid"]{
  display:grid!important;
  align-items:stretch!important;
  justify-items:stretch!important;
  gap:clamp(20px,2.2vw,32px)!important;
}
.grid > *,.cards > *,.smg-media-grid > *,[class*="grid"] > *,[class*="Grid"] > *{
  height:100%!important;
  align-self:stretch!important;
}
.card,.panel,.smg-card,.smg-media-card,.service-card,.property-card,.job-card,article,
[class*="card"],[class*="Card"],[class*="panel"],[class*="Panel"]{
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  min-height:clamp(190px,18vw,300px)!important;
  padding:clamp(24px,2.6vw,38px)!important;
  border-radius:clamp(22px,2vw,32px)!important;
}
.card .btn,.panel .btn,.smg-card .btn,.smg-media-card .btn,article .btn,
.card button,.panel button,.smg-card button,.smg-media-card button,article button{
  margin-top:auto!important;
}

/* 5) Prevent oversized desktop headlines from breaking composition on MacBook-sized screens */
@media (min-width:981px) and (max-width:1440px){
  h1,.hero h1,.smg-display{
    font-size:clamp(56px,7vw,92px)!important;
    line-height:1.02!important;
    max-width:1120px!important;
  }
  .hero,.smg-media-hero,.media-hero{
    min-height:auto!important;
    padding-top:clamp(44px,5vw,76px)!important;
    padding-bottom:clamp(44px,5vw,76px)!important;
  }
  .smg-control-dock .smg-control-grid{grid-template-columns:repeat(6,minmax(92px,1fr))!important;}
}

/* 6) Desktop and laptop: avoid bottom overlap by docked control */
@media (min-width:981px){
  .smg-executive-control-card{
    position:relative!important;
    inset:auto!important;
  }
}

/* 7) Tablet / mobile control becomes clean cards at top */
@media (max-width:980px){
  .smg-control-dock{
    width:calc(100% - 24px)!important;
    margin:14px auto 18px!important;
  }
  .smg-control-dock .smg-executive-control-card{
    grid-template-columns:1fr!important;
    border-radius:24px!important;
    padding:16px!important;
  }
  .smg-control-dock .smg-control-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .smg-control-dock .smg-control-grid a{
    min-height:44px!important;
    font-size:13px!important;
  }
  section::after,.section::after,.hero::after,.smg-media-hero::after,.media-hero::after{
    width:70vw;height:180px;opacity:.32;
  }
}
@media (max-width:620px){
  h1,.hero h1,.smg-display{
    font-size:clamp(38px,11.4vw,58px)!important;
    line-height:1.05!important;
  }
  .grid,.cards,.smg-media-grid,[class*="grid"],[class*="Grid"]{
    grid-template-columns:1fr!important;
  }
  .card,.panel,.smg-card,.smg-media-card,.service-card,.property-card,.job-card,article,
  [class*="card"],[class*="Card"],[class*="panel"],[class*="Panel"]{
    min-height:auto!important;
  }
}