/* Michigan GPT — heartland industrial. Slab serif headings, rust + steel-blue,
   subtle metal texture, marketing-only. Personas 7 + 3 (regional manufacturing). */
/* Design review: Devansh "Dev" Maheshwari-Cole. Brief: pressed-button hardware feel, paper
   texture on the body, twin rivets framing the wordmark, units on every stat. */

:root[data-site="michigangpt"] {
    --mg-bg: #f4efea;
    --mg-surface: #ffffff;
    --mg-fg: #1d2939;
    --mg-muted: #4b5563;
    --mg-accent: #b8541f;
    --mg-accent-deep: #7a330e;
    --mg-steel: #1e3a4f;
    --mg-steel-deep: #142839;
    --mg-rule: #d1bea8;
    --mg-paper: rgba(0,0,0,.025);
    --mg-slab: "Roboto Slab", "Rockwell", "Bookman Old Style", Georgia, serif;
    --mg-sans: "Inter", "Helvetica Neue", system-ui, sans-serif;
}
html[data-site="michigangpt"], body { background: var(--mg-bg); color: var(--mg-fg); }
body {
    font-family: var(--mg-sans); line-height: 1.6; margin: 0;
    -webkit-font-smoothing: antialiased;
    /* Dev: paper texture. Subtle radial corner washes + a barely-there grain. */
    background-image:
        radial-gradient(circle at 20% 0%, rgba(184,84,31,.06), transparent 40%),
        radial-gradient(circle at 80% 100%, rgba(30,58,79,.06), transparent 40%),
        repeating-linear-gradient(0deg, var(--mg-paper) 0 1px, transparent 1px 3px);
    font-feature-settings: "kern", "liga", "tnum";
}

.mg-container { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; }

.mg-header { background: var(--mg-steel); color: #fff; padding: .85rem 0; border-bottom: 3px solid var(--mg-accent); }
.mg-header .mg-container { display: flex; justify-content: space-between; align-items: center; }
.mg-brand {
    color: #fff; text-decoration: none;
    font-family: var(--mg-slab); font-size: 1.2rem;
    letter-spacing: .005em;
    display: inline-flex; align-items: center; gap: .5rem;
}
.mg-brand-strong { color: var(--mg-accent); }
.mg-mitt { font-size: 1.1em; }

.mg-nav a {
    color: rgba(255,255,255,.78); text-decoration: none;
    margin-left: 1.25rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: .08em; font-size: .85rem;
    transition: color .12s ease;
}
.mg-nav a:hover { color: #fff; }
.mg-nav a:focus-visible { outline: 2px solid var(--mg-accent); outline-offset: 4px; }

.mg-main { padding: 0; }
.mg-hero { padding: 5rem 0 4rem; }
h1 {
    font-family: var(--mg-slab); font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 1.04; margin: 0 0 1.25rem; letter-spacing: -.005em;
}
h2 { font-family: var(--mg-slab); letter-spacing: -.005em; }

.mg-accent { color: var(--mg-accent); }
.mg-lede { color: var(--mg-muted); max-width: 60ch; font-size: 1.1rem; }

/* CTA — Dev: hardware button. Pressed depth, depresses on click. */
.mg-btn {
    display: inline-block; padding: .85rem 1.6rem;
    border-radius: 4px; text-decoration: none; font-weight: 700;
    margin-top: 1.5rem;
    text-transform: uppercase; letter-spacing: .06em; font-size: .9rem;
    transition: transform .08s ease, box-shadow .12s ease, background-color .12s ease;
}
.mg-btn-primary {
    background: var(--mg-accent); color: #fff;
    border: 2px solid var(--mg-accent-deep);
    box-shadow: 0 4px 0 var(--mg-accent-deep);
}
.mg-btn-primary:hover { background: #c9612b; }
.mg-btn-primary:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--mg-accent-deep);
}
.mg-btn:focus-visible { outline: 3px solid var(--mg-accent); outline-offset: 3px; }

/* Stripe — Dev: every numeric stat needs a unit label below it. */
.mg-stripe { background: var(--mg-steel); color: #fff; padding: 2.5rem 0; border-top: 3px solid var(--mg-accent); border-bottom: 3px solid var(--mg-accent); }
.mg-stripe-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.5rem; text-align: center;
}
.mg-stripe-grid > div { display: flex; flex-direction: column; gap: .25rem; }
.mg-stripe-grid strong {
    font-family: var(--mg-slab); font-size: 1.8rem; color: var(--mg-accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.005em;
}
.mg-stripe-grid span {
    font-size: .8rem; color: rgba(255,255,255,.78);
    text-transform: uppercase; letter-spacing: .14em;
    font-weight: 500;
}

.mg-services { padding: 4rem 0 5rem; }
.mg-services h2 {
    font-family: var(--mg-slab); font-size: 1.9rem; margin: 0 0 2rem;
    /* Dev: hand-set rule under the section head. */
    border-bottom: 3px double var(--mg-rule);
    padding-bottom: .75rem;
    display: inline-block;
}
.mg-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.mg-grid article {
    background: var(--mg-surface); padding: 1.75rem;
    border-left: 4px solid var(--mg-accent);
    border-radius: 2px;
    box-shadow:
        0 1px 0 var(--mg-rule),
        0 1px 3px rgba(29,41,57,.04),
        0 8px 16px -8px rgba(29,41,57,.08);
    transition: transform .12s ease, box-shadow .15s ease;
}
.mg-grid article:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 var(--mg-rule),
        0 4px 8px rgba(29,41,57,.06),
        0 12px 24px -10px rgba(29,41,57,.12);
}
.mg-grid h3 { font-family: var(--mg-slab); margin: 0 0 .5rem; letter-spacing: -.005em; }
.mg-grid p { color: var(--mg-muted); margin: 0; }

::selection { background: rgba(184,84,31,.32); color: var(--mg-fg); }

/* Footer — Dev: twin rivets. Frame the wordmark. */
.mg-footer {
    background: var(--mg-steel); color: rgba(255,255,255,.78);
    padding: 3rem 0; margin-top: 3rem;
    position: relative;
    border-top: 3px solid var(--mg-accent);
}
.mg-rivets {
    display: flex; justify-content: center; align-items: center;
    gap: 1.25rem; margin-bottom: 1.5rem;
}
.mg-rivet {
    width: 50px; height: 4px;
    background: var(--mg-accent);
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.mg-rivet-label {
    font-family: var(--mg-slab); color: rgba(255,255,255,.9);
    font-size: .85rem; text-transform: uppercase; letter-spacing: .12em;
}
.mg-footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.mg-footer a, .mg-footer .parent-wordmark { color: rgba(255,255,255,.78); }
.mg-footer a:hover, .mg-footer .parent-wordmark:hover { color: var(--mg-accent); }

.skip-to-content {
    position: absolute; left: -9999px;
    background: var(--mg-accent); color: #fff;
    padding: .65rem 1rem; border-radius: 4px;
    font-weight: 700; text-transform: uppercase; letter-spacing: .08em; z-index: 1000;
}
.skip-to-content:focus { left: 1rem; top: 1rem; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}