/* ============================================================
   PittsburghFix — "Steel Truss"
   Pittsburgh carries 446 bridges, more than any city on earth,
   and paints them a single municipal yellow. The palette is that
   yellow against mill graphite; the hairlines are truss geometry.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* Steel, not navy */
    --color-navy:        #1B2127;
    --color-navy-dark:   #10151A;
    --color-navy-light:  #2E3841;
    /* Municipal bridge yellow */
    --color-gold:        #F5C518;
    --color-gold-dark:   #CE9F0C;
    --color-gold-light:  #FFE27A;
    --color-off-white:   #F2F3F4;
    --color-gray-50:     #F2F3F4;
    --color-gray-100:    #E7E9EB;
    --color-gray-200:    #D6DADE;

    --font-display: 'Oswald', 'Inter', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px;
    --radius-xl: 5px; --radius-2xl: 6px;

    --truss: rgba(245,197,24,.30);
    --hair:  rgba(255,255,255,.12);
}

/* ---- Display type: condensed, like bridge signage ---- */
.hero-h1, .page-hero-title, .section-title,
.footer-heading, .logo-text strong, .footer-logo-text strong {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: .005em;
    text-transform: uppercase;
}
.hero-h1, .page-hero-title { font-weight: 700; letter-spacing: .01em; line-height: 1.06; }
.section-title { letter-spacing: .04em; }

/* Small caps utility voice for labels and data */
.section-subtitle, .trust-badge-text, .step-number,
.hero-form-sub, .footer-license, .breadcrumb-list {
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .04em;
}

/* ---- Signature: truss hairlines across the hero ---- */
.hero, .page-hero {
    position: relative;
    background-color: var(--color-navy-dark);
    background-image:
        linear-gradient(var(--truss) 1px, transparent 1px),
        linear-gradient(90deg, var(--truss) 1px, transparent 1px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg stroke='%23F5C518' stroke-opacity='.16' stroke-width='1' fill='none'%3E%3Cpath d='M0 120 L60 0 L120 120'/%3E%3Cpath d='M0 0 L60 120 L120 0'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 120px 120px, 120px 120px, 120px 120px;
    background-position: center;
}
.hero::after, .page-hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: repeating-linear-gradient(90deg,
        var(--color-gold) 0 18px, transparent 18px 30px);
    opacity: .8;
}

/* ---- Structure: rivet-tight cards with hairline edges ---- */
.service-card, .step-card, .brand-chip, .review-card,
.location-card, .hero-form-card, .admin-card, .faq-item {
    border: 1px solid var(--color-gray-200);
    box-shadow: none;
    transition: border-color .18s ease, transform .18s ease;
}
.service-card:hover, .step-card:hover, .location-card:hover, .brand-chip:hover {
    border-color: var(--color-gold);
    transform: translateY(-2px);
}

/* Section rhythm: a single yellow tick, like a survey mark */
.section-header { position: relative; padding-top: 1.15rem; }
.section-header::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 44px; height: 2px; background: var(--color-gold);
}

/* ---- Buttons: flat, engineered ---- */
.btn { border-radius: 3px; font-family: var(--font-display); letter-spacing: .05em;
       text-transform: uppercase; font-weight: 600; }
.btn-gold { background: var(--color-gold); color: #14181C; border: 1px solid var(--color-gold-dark); }
.btn-gold:hover { background: var(--color-gold-light); }
.btn-outline-white { border: 1px solid rgba(255,255,255,.55); }

/* Header & footer: steel plate */
.site-header { border-bottom: 1px solid var(--color-gray-200); }
.site-footer { background: var(--color-navy-dark); border-top: 3px solid var(--color-gold); }
.trust-bar { border-block: 1px solid var(--color-gray-200); background: var(--color-gray-50); }

@media (prefers-reduced-motion: reduce) {
    .service-card, .step-card, .location-card, .brand-chip { transition: none; }
}

/* Footer mark is inline SVG with the original brand hexes baked in —
   retint it from the theme so the whole chrome stays on one palette. */
.logo-icon--footer [fill="#f59e0b"]   { fill: var(--color-gold); }
.logo-icon--footer [fill="#1a2744"]   { fill: var(--color-navy-dark); }
.logo-icon--footer [stroke="#1a2744"] { stroke: var(--color-navy-dark); }
.logo-icon--footer [rx="8"] { rx: 3; }