/* Product pages (/products/<slug>), loaded after main.css and legal.css.
   The body copy mirrors the service pop-up (.svc-modal-body) so products read the same everywhere. */

/* Spinning logo sunburst in the header band, top-right, like the pop-up headers */
.page-product .page-head .sunburst { width: 420px; height: 420px; right: -120px; top: -140px; opacity: .08; }
.page-tagline { margin-top: 8px; font-family: var(--font-head); font-weight: 600; font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--orange-600); max-width: 640px; }
.page-product .page-head h1 { font-size: clamp(2rem, 4.4vw, 3rem); }

/* Content card: same typography as the pop-up body */
.product-card {
    padding: 44px 48px; border-radius: var(--radius-lg);
    background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg);
    color: var(--muted);
}
.product-card > p { margin-bottom: 16px; font-size: 1.02rem; line-height: 1.75; }
.product-card h4 {
    margin: 30px 0 14px; padding-top: 24px; border-top: 1px solid var(--line);
    font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-600);
}
.product-card > h4:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.product-card .svc-list { margin-bottom: 18px; }
.product-card .svc-list li { font-size: 1rem; }

/* Call to action */
.product-cta {
    margin-top: 28px; padding: 28px 32px; border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 100%); color: #fff;
}
.product-cta h2 { color: #fff; font-size: 1.35rem; font-weight: 800; }
.product-cta p { margin-top: 6px; color: rgba(255, 255, 255, .78); max-width: 520px; }
.product-cta .modal-contact-btn { flex-shrink: 0; }

/* Other products: the homepage cards, three per row */
.other-products { margin-top: 64px; display: grid; gap: 24px; }
.other-products h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; color: var(--navy); }
.other-products .products-grid { --cols: 3; }

@media (max-width: 1080px) { .page-product .legal .container { max-width: 900px; } }
@media (max-width: 760px) { .other-products .products-grid { --cols: 2; } }
@media (max-width: 680px) {
    .page-product .page-head .sunburst { width: 260px; height: 260px; right: -110px; top: -80px; }
    .product-card { padding: 28px 22px; }
    .product-cta { padding: 24px 22px; }
    .product-cta .modal-contact-btn { width: 100%; }
}
@media (max-width: 520px) { .other-products .products-grid { --cols: 1; } }