/* =====================================================================
   Unified M360 design layer · shared by meistro360.com, buildings. and contractors.
   Loaded after site.css on every page (and before m360.css on contractors.)
   ===================================================================== */
:root{--hero:#071226;--hero2:#0B1A33}

/* audience bar above the header */
.topbar{background:#050D1C;color:#94A3B8;font:500 12.5px var(--body);border-bottom:1px solid rgba(148,163,184,.14)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:36px}
.topbar a{color:#CBD5E1;text-decoration:none}
.topbar a:hover{color:#fff}
.tb-co{display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-co svg{width:30px;height:auto;aspect-ratio:250/150;flex:none}
.aud{display:flex;gap:4px;flex:none}
.aud a{padding:5px 11px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.aud a[aria-current="true"]{color:#fff;border-color:rgba(103,232,249,.45);background:rgba(34,211,238,.10)}
@media (max-width:520px){.tb-co span{display:none}.tb-co::after{content:"MIS";font-weight:600;letter-spacing:.06em}.aud a{padding:5px 9px}}

/* one header everywhere: navy bar, M360 mark, site tag */
.nav{background:rgba(7,18,38,.95);border-bottom:1px solid rgba(148,163,184,.18)}
.brand svg{width:86px;height:auto;aspect-ratio:400/150}
.brand .site-tag{font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#67E8F9;border-left:1px solid rgba(148,163,184,.35);padding-left:11px;white-space:nowrap}
.menu a,.mega-btn{color:#CBD5E1}
.menu a:hover,.mega-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
.menu a[aria-current="page"]{color:#fff;box-shadow:inset 0 -2px 0 #22D3EE}
.burger{color:#fff;border-color:rgba(255,255,255,.25)}
@media (max-width:1340px){.menu{background:var(--hero)!important;border-bottom-color:rgba(148,163,184,.2)!important}.menu a{border-bottom-color:rgba(148,163,184,.18)!important}.menu a[aria-current="page"]{color:#67E8F9}}
@media (max-width:1860px) and (min-width:1341px){.nav .brand .site-tag{display:inline}}

/* buttons: one primary style everywhere */
.btn-primary{background:linear-gradient(100deg,#0891B2,#2563EB 55%,#7C3AED);color:#fff;border:0;box-shadow:0 10px 30px -12px rgba(37,99,235,.8)}
.btn-primary:hover{box-shadow:0 0 0 4px rgba(34,211,238,.22),0 14px 34px -10px rgba(124,58,237,.75)}
.band .btn-primary{background:#fff;color:var(--navy);box-shadow:0 10px 30px -10px rgba(255,255,255,.35)}

/* footer */
.foot .brand svg{width:96px}
.foot{grid-template-columns:1.4fr 1fr 1fr 1fr}
.foot .fh,.foot h4{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#7DD3FC;margin:0 0 12px}
.legal{border-top:1px solid rgba(148,163,184,.18);margin-top:34px;padding-top:18px;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;font-size:13px;color:#94A3B8}
.legal a{color:#CBD5E1}
@media (max-width:900px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot{grid-template-columns:1fr}}

/* M360 animated mark (buildings home + hub) */
.logo-hero.m360{width:min(100%,300px);margin:0 0 6px -8px}
@media (prefers-reduced-motion:no-preference){.animate .st.z{animation-delay:.8s}}

/* ------------------------------------------------ hub */
.hub-fold{padding-block:clamp(36px,5vw,60px) clamp(40px,5vw,64px);background:radial-gradient(900px 480px at 85% 0%,rgba(124,58,237,.10),transparent 60%),radial-gradient(800px 500px at 0% 100%,rgba(8,145,178,.10),transparent 60%),var(--deep);border-bottom:1px solid var(--line)}
.hub-head{max-width:860px}
.hub-head h1{font-size:clamp(38px,5.4vw,68px);line-height:1.02;margin:10px 0 14px}
.hub-head .lead{max-width:64ch}
.doors2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(24px,3.4vw,40px)}
.door2{position:relative;display:grid;grid-template-rows:auto 1fr;border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);box-shadow:0 24px 60px -36px rgba(11,26,51,.5);transition:transform .2s,box-shadow .2s,border-color .2s;min-width:0}
.door2:hover{transform:translateY(-3px);border-color:rgba(37,99,235,.45);box-shadow:0 30px 70px -34px rgba(37,99,235,.55)}
.door2 .pic{aspect-ratio:16/8;background-size:cover;background-position:center;position:relative}
.door2 .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(7,18,38,.55))}
.door2 .pic .who{position:absolute;left:18px;bottom:14px;z-index:1;font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(7,18,38,.6);border:1px solid rgba(103,232,249,.4);padding:6px 10px;border-radius:999px}
.door2 .body{padding:22px 24px 24px;display:grid;gap:10px;align-content:start}
.door2 h2{font-size:clamp(22px,2.4vw,28px);line-height:1.15}
.door2 p{color:var(--soft);font-size:15.5px}
.door2 ul{list-style:none;margin:2px 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.door2 li{font:500 12px var(--mono);color:var(--soft);background:var(--deep);border:1px solid var(--line);border-radius:999px;padding:5px 10px}
.door2 .go{font:600 15px var(--display);color:var(--blue)}
@media (max-width:820px){.doors2{grid-template-columns:1fr}}
.trust{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;color:var(--soft);font-size:14px;margin-top:22px}
.trust b{color:var(--ink)}
.hub-faces{display:flex;align-items:center}
.hub-faces img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-left:-10px;box-shadow:0 4px 12px -4px rgba(11,26,51,.4)}
.hub-faces img:first-child{margin-left:0}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pillar{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;min-width:0}
.pillar .k{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--live)}
.pillar h3{font-size:19px;margin-top:8px}
.pillar p{color:var(--soft);font-size:15px;margin-top:6px}
@media (max-width:860px){.pillars{grid-template-columns:1fr}}
.prose{max-width:760px}
.prose h2{font-size:22px;margin:30px 0 8px}
.prose p,.prose li{color:var(--soft);font-size:16px;margin-top:8px}
@media (max-width:1640px) and (min-width:1341px){.site-buildings .brand .site-tag{display:none}.site-buildings .menu a{padding:8px 8px}.site-buildings .nav .wrap{gap:16px}}
/* Oct 12 review fixes */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:#fff;color:var(--navy,#0B1A33);padding:10px 14px;border-radius:10px;font-weight:600;box-shadow:0 8px 24px -8px rgba(0,0,0,.4)}
.skip:focus{top:10px}
@media (max-width:1340px){.has-mega .mega-btn{display:none!important}}
.door .go,.door2 .go{color:#0E7490}
.sits .tier.core svg{width:150px}
.contact-doors{display:grid;gap:12px;margin-top:24px}
.door2.slim{grid-template-rows:auto}
.door2.slim .body{padding:18px 20px}
.door2.slim h2{font-size:20px}
.who-k{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#0E7490}
.nav-apply .short{display:none}
@media (max-width:620px){.site-buildings .nav .btn.nav-apply{display:inline-flex;margin-left:auto;order:2;padding:8px 14px;font-size:14px}.site-buildings .nav-apply .long{display:none}.site-buildings .nav-apply .short{display:inline}.site-buildings .nav .burger{order:3;margin-left:10px}.site-buildings .nav .menu{order:4}}
@media (min-width:1341px) and (max-width:1640px){.nav .nav-apply .long{display:none}.nav .nav-apply .short{display:inline}.brand .site-tag{display:none}.site-buildings .menu a{padding-left:8px;padding-right:8px}.site-contractors .menu a,.site-contractors .menu .mega-top{padding-left:8px;padding-right:8px}.site-contractors .nav .wrap{gap:16px}}
@media (min-width:1641px){.nav .wrap,.topbar .wrap{max-width:1360px}}
@media (min-width:1641px){.site-buildings .nav .wrap{gap:14px}}