/* Campaign-only layout. Shared EASN tokens, identity and controls stay unchanged. */
.roofing-hero { padding: 142px 0 64px; background: radial-gradient(ellipse at 92% 30%, #e3edf2 0, transparent 58%), var(--canvas); }
.roofing-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: clamp(40px, 7vw, 100px); }
.roofing-intro h1 { font-size: clamp(2.6rem, 4.5vw, 4.55rem); max-width: 660px; }
.roofing-lede { font-size: 1.18rem; max-width: 570px; margin: 24px 0 28px; }
.roofing-micro { font-size: .9rem; margin-top: 16px; }
.roofing-context { border-top: 1px solid var(--border-strong); margin-top: 34px; padding-top: 24px; max-width: 500px; }
.roofing-context > span { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--primary); }
.roofing-context p { margin-top: 8px; }
.roofing-video { width: 100%; max-width: 355px; margin: 0 auto; padding: 10px; background: #142d3b; border-radius: 20px; box-shadow: var(--shadow-lg); }
.roofing-video-label { display: flex; justify-content: space-between; color: #e1e9ed; padding: 4px 8px 12px; font-size: .64rem; letter-spacing: .06em; }
.roofing-video video { display: block; width: 100%; height: auto; aspect-ratio: 9/16; border-radius: 10px; background: #12222c; }
.roofing-video figcaption { padding: 12px 8px 4px; color: #e1e9ed; font-size: .75rem; line-height: 1.5; }
.roofing-workflow { background: #fff; }
.roofing-section-heading { max-width: 710px; }
.roofing-section-heading > p { margin-top: 20px; max-width: 620px; }
.roofing-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 34px; margin-top: 42px; }
.roofing-steps article { border-top: 2px solid var(--border-strong); padding-top: 22px; }
.roofing-steps article > span { color: var(--primary); font-size: .8rem; text-transform: uppercase; font-weight: 700; letter-spacing: .09em; }
.roofing-steps h3 { margin: 15px 0 12px; }
.roofing-request { background: var(--surface-blue); scroll-margin-top: 105px; }
.roofing-request-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0,1.1fr); gap: 75px; align-items: start; }
.roofing-request-copy > p { margin-top: 22px; }
.roofing-details { margin-top: 34px; }
.roofing-details ul { list-style: disc; padding-left: 20px; margin-top: 14px; color: var(--ink-soft); }
.roofing-details li { margin: 10px 0; }
.roofing-request .contact-form-wrap { padding: 32px; background: white; border-radius: 16px; box-shadow: var(--shadow-sm); }
.roofing-request label span { color: var(--muted); font-weight: 400; }
.roofing-request .form-submit { width: 100%; }
.roofing-request .form-note a { text-decoration: underline; }
.roofing-faq h2 { margin-bottom: 36px; }
@media (max-width: 900px) { .roofing-hero-grid { gap: 34px; grid-template-columns: minmax(0,1fr) minmax(0,.8fr); } .roofing-request-grid { gap: 32px; } .roofing-request .form-row { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .roofing-hero { padding-top: 118px; } .roofing-hero-grid, .roofing-request-grid, .roofing-steps { grid-template-columns: 1fr; } .roofing-intro h1 { font-size: clamp(2.3rem, 9vw, 3.3rem); } .roofing-video { max-width: 355px; margin-top: 10px; } .roofing-context { margin-top: 24px; } .roofing-request .contact-form-wrap { padding: 22px 18px; } .roofing-nav-cta { font-size: .78rem; padding: .65rem .7rem; } #navbar .nav-logo img { width: 112px; } .roofing-lede { font-size: 1.06rem; } .roofing-steps { gap: 28px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }