/* MGS Roofing — homepage "gadget" sections (roof color picker, badges decoded, siding materials).
   Each block is self-contained: its classes all start with mgx-<block>. Palette = site tokens, no red. */
:root{--mgx-blue:#0C60A8;--mgx-blue-dk:#084C85;--mgx-blue-lt:#489CD8;--mgx-ink:#0F172A;--mgx-slate:#475569;--mgx-mute:#64748B;--mgx-line:#E2E8F0;--mgx-tint:#EAF2FB;--mgx-navy:#061c2c}
.mgx-wrap{max-width:80rem;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.mgx-wrap{padding:0 1.5rem}}
@media(min-width:1024px){.mgx-wrap{padding:0 2rem}}
.mgx-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mgx-blue)}
.mgx-h2{font-size:1.6rem;line-height:1.15;font-weight:700;color:var(--mgx-ink);letter-spacing:-.01em;margin:.35rem 0 .5rem}
@media(min-width:640px){.mgx-h2{font-size:1.9rem}}
.mgx-sub{color:var(--mgx-slate);font-size:.95rem;line-height:1.55;max-width:34rem}
.mgx-note{font-size:.72rem;color:var(--mgx-mute);line-height:1.45}
.mgx-btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--mgx-blue);color:#fff;font-weight:600;font-size:.9rem;padding:.7rem 1.1rem;border-radius:.6rem;transition:background .2s}
.mgx-btn:hover{background:var(--mgx-blue-dk)}

/* ---------- A. Roof color picker ---------- */
.mgx-color{padding:3.5rem 0;background:linear-gradient(180deg,#fff 0%,var(--mgx-tint) 100%)}

/* ---------- B. Badges decoded (overlap card on navy band) ---------- */
.mgx-badges{position:relative;padding:0 0 3.5rem;background:linear-gradient(180deg,var(--mgx-tint) 0 9rem,#fff 9rem)}
.mgx-badges__band{background:radial-gradient(120% 140% at 85% 0%,#0f4f86 0%,var(--mgx-navy) 60%);color:#fff;padding:3rem 0 7.5rem;clip-path:polygon(0 0,100% 1.6rem,100% 100%,0 100%)}
.mgx-badges__band .mgx-eyebrow{color:#9cc9ee}
.mgx-badges__band .mgx-h2{color:#fff}
.mgx-badges__band .mgx-sub{color:#c6d6e6}
.mgx-badges__head{display:flex;gap:1.5rem;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.mgx-stamp{flex:none;width:7.2rem;height:7.2rem;border-radius:999px;border:3px dashed rgba(255,255,255,.55);display:grid;place-items:center;text-align:center;transform:rotate(-9deg);font-weight:800;font-size:.72rem;line-height:1.15;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.06)}
.mgx-stamp em{display:block;font-style:normal;font-size:1.5rem;color:#9cc9ee;letter-spacing:0}
.mgx-badges__card{position:relative;margin-top:-5.5rem;background:#fff;border-radius:1.25rem;box-shadow:0 30px 60px -30px rgba(6,28,44,.55);border:1px solid var(--mgx-line);overflow:hidden}
.mgx-tabs{display:flex;overflow-x:auto;border-bottom:1px solid var(--mgx-line);scrollbar-width:none}
.mgx-tabs::-webkit-scrollbar{display:none}
.mgx-tab{flex:1 0 auto;padding:1rem 1.2rem;font-size:.86rem;font-weight:700;color:var(--mgx-mute);background:none;border:0;border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:.5rem}
.mgx-tab .lvl{display:inline-grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:999px;background:var(--mgx-tint);color:var(--mgx-blue);font-size:.7rem}
.mgx-tab[aria-selected="true"]{color:var(--mgx-ink);border-bottom-color:var(--mgx-blue)}
.mgx-tab[aria-selected="true"] .lvl{background:var(--mgx-blue);color:#fff}
.mgx-panel{display:grid;gap:1.5rem;padding:1.6rem}
@media(min-width:820px){.mgx-panel{grid-template-columns:1.3fr 1fr;padding:2.2rem}}
.mgx-panel[hidden]{display:none}
.mgx-panel h3{font-size:1.2rem;font-weight:700;color:var(--mgx-ink);margin-bottom:.4rem}
.mgx-panel p{color:var(--mgx-slate);font-size:.93rem;line-height:1.6}
.mgx-ladder{background:var(--mgx-tint);border-radius:1rem;padding:1.1rem 1.2rem}
.mgx-ladder h4{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mgx-blue);margin-bottom:.7rem}
.mgx-rung{display:flex;align-items:center;gap:.6rem;font-size:.85rem;font-weight:600;color:var(--mgx-mute);padding:.4rem 0}
.mgx-rung i{width:1.15rem;height:1.15rem;border-radius:999px;border:2px solid #b8c7d8;flex:none;display:grid;place-items:center}
.mgx-rung.on{color:var(--mgx-ink)}
.mgx-rung.on i{background:var(--mgx-blue);border-color:var(--mgx-blue)}
.mgx-rung.on i::after{content:"";width:.35rem;height:.6rem;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.mgx-ask{display:flex;gap:.8rem;align-items:flex-start;padding:1rem 1.6rem;background:#f8fafc;border-top:1px solid var(--mgx-line);font-size:.85rem;color:var(--mgx-slate)}
.mgx-ask strong{color:var(--mgx-ink)}
.mgx-ask svg{flex:none;width:1.3rem;height:1.3rem;color:var(--mgx-blue);margin-top:.1rem}

/* ---------- C. Siding materials (tilted cards) ---------- */
.mgx-siding{padding:3.5rem 0 3rem;background:#fff;overflow:hidden}
.mgx-siding__row{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1.4rem .3rem 1.2rem;scrollbar-width:none}
.mgx-siding__row::-webkit-scrollbar{display:none}
@media(min-width:820px){.mgx-siding__row{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible}}
.mgx-mat{scroll-snap-align:start;background:#fff;border:1px solid var(--mgx-line);border-radius:1rem;overflow:hidden;box-shadow:0 14px 30px -20px rgba(15,23,42,.45);transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.mgx-mat__body{padding:1rem 1.1rem 1.2rem}
.mgx-mat__body h3{font-size:1rem;font-weight:700;color:var(--mgx-ink)}
.mgx-mat__body p{font-size:.84rem;color:var(--mgx-slate);line-height:1.5;margin:.3rem 0 .6rem}
.mgx-chip{display:inline-block;font-size:.7rem;font-weight:600;color:var(--mgx-blue-dk);background:var(--mgx-tint);border-radius:999px;padding:.2rem .6rem}
.mgx-siding__foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.6rem}
@media print{.mgx-badges__band{clip-path:none}.mgx-mat{transform:none!important}}
@media(min-width:820px){.mgx-siding__foot .mgx-note{visibility:hidden}}
@media(max-width:639px){.mgx-stamp{width:4.6rem;height:4.6rem;font-size:.5rem;position:absolute;right:1rem;top:1.2rem}.mgx-stamp em{font-size:1rem}.mgx-badges__head{position:relative;padding-right:4.6rem}}

/* v2: photo roof picker, photo siding cards, modern service cards */
.mgx-color__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.2rem}
.mgx-color__stage{position:relative;border-radius:1rem;overflow:hidden;aspect-ratio:16/10;background:#b8cde0;box-shadow:0 22px 44px -26px rgba(15,23,42,.55)}
@media(min-width:720px){.mgx-color__stage{aspect-ratio:1200/460}}
.mgx-house{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:32% 50%;opacity:0;transition:opacity .45s ease}
.mgx-house.is-on{opacity:1}
.mgx-color__tag{position:absolute;left:.8rem;bottom:.8rem;z-index:2;background:rgba(255,255,255,.93);backdrop-filter:blur(4px);border-radius:999px;padding:.4rem .9rem;font-size:.8rem;font-weight:700;color:var(--mgx-ink);box-shadow:0 6px 16px -8px rgba(0,0,0,.4)}
.mgx-color__tag span{font-weight:500;color:var(--mgx-mute)}
.mgx-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:1.1rem 0 .8rem}
@media(min-width:640px){.mgx-swatches{grid-template-columns:repeat(5,1fr)}}
@media(min-width:1024px){.mgx-swatches{grid-template-columns:repeat(9,1fr)}}
.mgx-sw{display:flex;flex-direction:column;gap:.4rem;background:#fff;border:1px solid var(--mgx-line);border-radius:.8rem;padding:.35rem .35rem .55rem;cursor:pointer;text-align:left;transition:transform .2s,box-shadow .2s,border-color .2s}
.mgx-sw img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:.5rem}
.mgx-sw b{font-size:.74rem;font-weight:600;color:var(--mgx-ink);line-height:1.2;padding:0 .2rem}
.mgx-sw small{font-size:.6rem;color:var(--mgx-mute);font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:0 .2rem;margin-top:-.25rem}
.mgx-sw:hover{transform:translateY(-2px);box-shadow:0 10px 20px -14px rgba(15,23,42,.5)}
.mgx-sw[aria-pressed="true"]{border-color:var(--mgx-blue);box-shadow:0 0 0 2px var(--mgx-blue)}
.mgx-mat{scroll-snap-align:start;background:#fff;border:1px solid var(--mgx-line);border-radius:1rem;overflow:hidden;box-shadow:0 14px 30px -20px rgba(15,23,42,.45);transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.mgx-mat:hover{transform:translateY(-.3rem);box-shadow:0 22px 40px -20px rgba(15,23,42,.5)}
.mgx-mat__img{position:relative;aspect-ratio:16/10;overflow:hidden;background:#e2e8f0}
.mgx-mat__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.mgx-mat:hover .mgx-mat__img img{transform:scale(1.05)}
.mgx-mat__img span{position:absolute;top:.7rem;left:.7rem;background:#fff;border-radius:999px;font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mgx-blue);padding:.25rem .6rem;box-shadow:0 4px 10px -4px rgba(0,0,0,.35)}
.mgx-svc{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
@media(min-width:1024px){.mgx-svc{grid-template-columns:repeat(4,1fr);gap:1.1rem}}
.mgx-svc__card{display:flex;flex-direction:column;background:#fff;border-radius:1rem;overflow:hidden;border:1px solid var(--mgx-line);box-shadow:0 10px 26px -20px rgba(15,23,42,.5);transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s;color:inherit;text-decoration:none}
.mgx-svc__card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -22px rgba(15,23,42,.55)}
.mgx-svc__img{display:block;aspect-ratio:4/3;overflow:hidden;background:#e2e8f0}
.mgx-svc__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.mgx-svc__card:hover .mgx-svc__img img{transform:scale(1.06)}
.mgx-svc__body{display:flex;flex-direction:column;flex:1;padding:.8rem .85rem .95rem}
@media(min-width:640px){.mgx-svc__body{padding:1rem 1.1rem 1.15rem}}
.mgx-svc__body h3{font-size:.95rem;font-weight:700;color:var(--mgx-ink);line-height:1.25}
@media(min-width:640px){.mgx-svc__body h3{font-size:1.05rem}}
.mgx-svc__body p{font-size:.78rem;color:var(--mgx-slate);line-height:1.45;margin:.3rem 0 .8rem;flex:1}
@media(min-width:640px){.mgx-svc__body p{font-size:.86rem}}
.mgx-svc__btn{align-self:flex-start;display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.02em;color:var(--mgx-blue);background:var(--mgx-tint);border-radius:999px;padding:.4rem .85rem;transition:background .2s,color .2s}
.mgx-svc__card:hover .mgx-svc__btn{background:var(--mgx-blue);color:#fff}
.mgx-svc__card--cta{background:radial-gradient(120% 120% at 100% 0%,#0f4f86 0%,var(--mgx-navy) 70%);border-color:transparent;justify-content:flex-end;min-height:12rem}
.mgx-svc__card--cta h3{color:#fff;font-size:1.1rem}
.mgx-svc__card--cta p{color:#cbd5e1}
.mgx-svc__card--cta .mgx-svc__btn{background:#fff;color:var(--mgx-blue)}
.mgx-svc__card--cta:hover .mgx-svc__btn{background:var(--mgx-blue-lt);color:#fff}
@media(prefers-reduced-motion:reduce){.mgx-house{transition:none}.mgx-svc__card,.mgx-mat,.mgx-svc__img img,.mgx-mat__img img{transition:none}}
.mgx-svc__or{font-size:.72rem;font-weight:600;color:#93c5fd;margin:-.4rem 0 .8rem}
/* v2: "Four Steps" inverted color band */
.mgx-steps{position:relative;overflow:hidden;background:radial-gradient(110% 130% at 100% 0%,#1f7fd0 0%,#0C60A8 38%,#084C85 100%);color:#fff}
.mgx-steps::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 2px,transparent 2px 26px);pointer-events:none}
.mgx-steps>*{position:relative}
.mgx-steps .text-primary{color:#9fd0f5}
.mgx-steps h2,.mgx-steps h3{color:#fff}
.mgx-steps p.text-gray-600,.mgx-steps li p{color:#dbeafe}
.mgx-steps li{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);box-shadow:0 18px 36px -24px rgba(0,0,0,.55);backdrop-filter:blur(6px);transition:transform .25s cubic-bezier(.16,1,.3,1),background .25s}
.mgx-steps li:hover{transform:translateY(-4px);background:rgba(255,255,255,.16)}
.mgx-steps li>span:first-child{color:rgba(255,255,255,.12)}
.mgx-steps li>span.inline-flex{background:#fff;color:#0C60A8}
@media print{.mgx-steps{background:#0C60A8;-webkit-print-color-adjust:exact;print-color-adjust:exact}}