section.rosales-hero,
section.hero,
section.contact-hero,
div.rosales-hero,
div.commercial-hero,
div.gutters-hero,
div.siding-hero {
    --primary-color: #13586e;
    --white: #fff;
    --font-antonio: 'Antonio', sans-serif;
    --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

section.rosales-hero,
section.hero {
    font-family: var(--font-system);
    line-height: 1.5;
}

section.contact-hero {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
}

div.rosales-hero,
div.gutters-hero {
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #333;
}

div.commercial-hero,
div.siding-hero {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.5;
    color: #111827;
}

section.rosales-hero:where(:not(.rosales-hero--home)) *,
section.hero * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:where(section.rosales-hero.rosales-hero--home) * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:where(div.rosales-hero, div.commercial-hero, div.gutters-hero, div.siding-hero) * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:where(section.contact-hero) *,
:where(section.contact-hero) *::before,
:where(section.contact-hero) *::after {
    box-sizing: border-box;
}

/*
 * The hero animates itself. It does not wait to be told to.
 *
 * These elements used to sit at opacity:0 until view.js ran its
 * IntersectionObserver callback and added .visible. The hero is above the fold
 * on every page that has one, so the observer fires immediately — but only after
 * DOMContentLoaded, which is behind every blocking script on the page. That put
 * the LCP text's first paint at the end of the script-evaluation chain instead
 * of at first paint, for an animation whose trigger condition is always true.
 *
 * A CSS animation with `both` fill starts at the element's first render frame,
 * so the same 0.6s rise plays with no JavaScript involved and the text is
 * paintable immediately. .visible is still honoured below-hero and by view.js;
 * on these elements it is simply redundant, since the animation's fill state
 * already ends where .visible pointed.
 */
@keyframes rosales-hero-rise {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes rosales-hero-scale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
    section.rosales-hero .fade-in-up,
    section.hero .fade-up {
        animation: rosales-hero-rise 0.6s ease-out both;
    }
    section.rosales-hero.fade-in-scale {
        animation: rosales-hero-scale 0.5s ease-out both;
    }
}

@media (prefers-reduced-motion: reduce) {
    section.rosales-hero .fade-in-up,
    section.rosales-hero.fade-in-scale,
    section.hero .fade-up {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

section.rosales-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 500px;
    max-height: 800px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), var(--rr-hero-bg, url(https://rosalesroofingllc.com/wp-content/uploads/2025/05/Roof.webp));
    background-size: cover;
    background-position: 85% center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

@media (max-width: 768px) {
    section.rosales-hero {
        height: 75vh;
        min-height: 450px;
        max-height: 600px;
        background-position: center center;
    }
}

section.rosales-hero .rosales-hero-content {
    width: 100%;
    max-width: 1140px;
    color: var(--white);
    position: relative;
    z-index: 2;
    padding: 0 20px;
    text-align: left;
}

section.rosales-hero .rosales-hero-badge {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.9);
}

section.rosales-hero.rosales-hero--banner .rosales-hero-badge {
    font-family: var(--font-system);
}

section.rosales-hero .rosales-hero-badge i {
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
}

section.rosales-hero .rosales-hero-title {
    font-family: var(--font-antonio);
    font-size: clamp(40px, 8vw, 80px);
    line-height: 1.1;
    margin-bottom: 20px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -0.02em;
}

section.rosales-hero .rosales-hero-description {
    font-size: 16px;
    line-height: 1.7;
    font-weight: 300;
    max-width: 600px;
    margin-bottom: 40px;
    color: var(--white);
}

section.rosales-hero .rosales-hero-button {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--white);
    background-color: transparent;
    border: 1px solid var(--white);
    padding: 16px 20px;
    text-decoration: none;
    transition: all 0.3s ease;
}

section.rosales-hero .rosales-hero-button:hover {
    background-color: var(--white);
    color: var(--primary-color);
}

/* `fade-in-scale` is an animation hook, not a layout variant. It used to be
   grouped into this rule, which meant any hero that picked up the animation
   silently became a banner. Layout belongs to the --banner modifier only. */
section.rosales-hero.rosales-hero--banner {
    height: auto;
    min-height: auto;
    max-height: none;
    padding: 100px 20px;
    background-position: center;
    color: var(--white);
}

/* The banner and the home hero are the same padded band and must resolve to the
   same height. --home takes 80vh (capped at 800) from 1025px up, so the banner
   does too; without this the two sat ~34px apart on a desktop viewport and read
   as "almost but not quite the same block". */
@media (min-width: 1025px) {
    section.rosales-hero.rosales-hero--banner {
        height: 80vh;
        max-height: 800px;
    }
}

@media (max-width: 768px) {
    section.rosales-hero.rosales-hero--banner {
        padding: 80px 20px;
    }
}

section.rosales-hero.rosales-hero--home {
    position: static;
    width: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    background-size: auto, cover;
    background-position: 0% 0%, 50% 50%;
    color: var(--white);
    text-align: left;
    padding: 100px 20px;
}

section.rosales-hero.rosales-hero--home .rosales-hero-badge {
    font-family: var(--font-system);
}

section.rosales-hero.rosales-hero--home .rosales-hero-button {
    will-change: transform, background-color, color;
    touch-action: manipulation;
}

section.rosales-hero.rosales-hero--home .rosales-hero-button:hover {
    transform: translateZ(0);
}

@media (max-width: 768px) {
    section.rosales-hero.rosales-hero--home {
        height: auto;
        min-height: 0;
        max-height: none;
        background-position: 0% 0%, 50% 50%;
        padding: 80px 20px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    section.rosales-hero.rosales-hero--home {
        height: 80vh;
        height: 80dvh;
        background-position: 75% center;
    }
}

@media (min-width: 1025px) {
    section.rosales-hero.rosales-hero--home {
        height: 80vh;
        max-height: 800px;
    }

    section.rosales-hero.rosales-hero--home .rosales-hero-content {
        padding: 0 15px;
    }
}

section.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), var(--rr-hero-bg, none);
    background-size: cover;
    background-position: center;
    color: var(--white);
    padding: 100px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    section.hero {
        padding: 80px 20px;
    }
}

section.hero .hero-content {
    width: 100%;
    max-width: 1140px;
    color: var(--white);
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

section.hero .hero-badge {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.9);
}

section.hero .hero-badge i {
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
}

section.hero .hero-title {
    font-family: var(--font-antonio);
    font-size: clamp(40px, 8vw, 80px);
    line-height: 1.1;
    margin-bottom: 20px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -0.02em;
}

section.hero .hero-desc {
    font-size: clamp(16px, 4vw, 16px);
    line-height: 1.7;
    font-weight: 300;
    max-width: 600px;
    margin-bottom: 40px;
    color: var(--white);
}

section.hero .hero-btn {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--white);
    background: transparent;
    border: 1px solid var(--white);
    padding: 16px 20px;
    text-decoration: none;
    transition: all 0.3s ease;
}

section.hero .hero-btn:hover {
    background: var(--white);
    color: var(--primary-color);
}

div.rosales-hero,
div.commercial-hero,
div.gutters-hero,
div.siding-hero {
    position: relative;
    width: 100%;
    height: 80vh;
    min-height: 500px;
    max-height: 800px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), var(--rr-hero-bg, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

div.rosales-hero .rosales-hero-content,
div.commercial-hero .commercial-hero-content,
div.gutters-hero .gutters-hero-content,
div.siding-hero .siding-hero-content {
    width: 100%;
    max-width: 1140px;
    color: var(--white);
    position: relative;
    z-index: 2;
    padding: 0 15px;
}

div.rosales-hero .rosales-hero-tagline,
div.commercial-hero .commercial-hero-tagline,
div.gutters-hero .gutters-hero-tagline,
div.siding-hero .siding-hero-tagline {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.9);
}

div.rosales-hero .rosales-hero-tagline svg,
div.commercial-hero .commercial-hero-tagline svg,
div.gutters-hero .gutters-hero-tagline svg,
div.siding-hero .siding-hero-tagline svg {
    margin-right: 10px;
    fill: rgba(255, 255, 255, 0.8);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

div.rosales-hero h1,
div.commercial-hero h1,
div.gutters-hero h1,
div.siding-hero h1 {
    font-family: var(--font-antonio);
    font-size: 80px;
    line-height: 1.1;
    margin-bottom: 20px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -0.02em;
}

div.rosales-hero h2,
div.commercial-hero h2,
div.gutters-hero h2,
div.siding-hero h2 {
    font-size: 16px;
    line-height: 1.7;
    font-weight: 300;
    max-width: 600px;
    margin-bottom: 40px;
    color: var(--white);
}

div.rosales-hero .rosales-btn,
div.commercial-hero .commercial-btn,
div.gutters-hero .gutters-btn,
div.siding-hero .siding-btn {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--white);
    background-color: transparent;
    border: 1px solid var(--white);
    padding: 18px 24px;
    text-decoration: none;
    transition: all 0.3s ease;
}

div.commercial-hero .commercial-btn,
div.siding-hero .siding-btn {
    touch-action: manipulation;
}

div.rosales-hero .rosales-btn:hover,
div.commercial-hero .commercial-btn:hover,
div.gutters-hero .gutters-btn:hover,
div.siding-hero .siding-btn:hover {
    background-color: var(--white);
    color: var(--primary-color);
}

@media (max-width: 1024px) {
    div.rosales-hero h1 {
        font-size: 70px;
    }
}

@media (max-width: 768px) {
    div.rosales-hero {
        height: 70vh;
        min-height: 450px;
    }
    div.rosales-hero h1 {
        font-size: 50px;
    }
    div.rosales-hero h2 {
        font-size: 15px;
    }
}

@media (max-width: 600px) {
    div.rosales-hero {
        height: auto;
        min-height: 500px;
    }
    div.rosales-hero h1 {
        font-size: 40px;
    }
    div.rosales-hero .rosales-hero-content {
        padding: 60px 15px;
    }
}

@media (min-width: 1024px) {
    div.gutters-hero h1 {
        font-size: 80px;
    }
}

@media (max-width: 1024px) {
    div.gutters-hero h1 {
        font-size: 70px;
    }
}

@media (max-width: 768px) {
    div.gutters-hero {
        height: 70vh;
        min-height: 450px;
    }
    div.gutters-hero h1 {
        font-size: 50px;
    }
    div.gutters-hero h2 {
        font-size: 15px;
    }
}

@media (min-width: 480px) {
    div.gutters-hero {
        height: auto;
        min-height: 500px;
    }
    div.gutters-hero .gutters-hero-content {
        padding: 60px 15px;
    }
}

@media (max-width: 480px) {
    div.gutters-hero h1 {
        font-size: 40px;
    }
}

@media (max-width: 767px) {
    div.commercial-hero,
    div.siding-hero {
        height: 60vh;
        min-height: 400px;
    }
    div.commercial-hero .commercial-hero-content,
    div.siding-hero .siding-hero-content {
        padding: 30px 15px;
    }
    div.commercial-hero h1,
    div.siding-hero h1 {
        font-size: clamp(32px, 8vw, 40px);
        line-height: 1.2;
    }
    div.commercial-hero h2,
    div.siding-hero h2 {
        font-size: clamp(14px, 4vw, 15px);
        max-width: 90%;
    }
    div.commercial-hero .commercial-btn,
    div.siding-hero .siding-btn {
        padding: 14px 20px;
    }
}

@media (min-width: 768px) {
    div.commercial-hero h1,
    div.siding-hero h1 {
        font-size: 70px;
    }
}

@media (min-width: 480px) {
    div.commercial-hero,
    div.siding-hero {
        height: auto;
        min-height: 500px;
    }
    div.commercial-hero .commercial-hero-content,
    div.siding-hero .siding-hero-content {
        padding: 60px 15px;
    }
}

@media (min-width: 1024px) {
    div.commercial-hero h1,
    div.siding-hero h1 {
        font-size: 80px;
    }
}

section.contact-hero {
    background-image: linear-gradient(135deg, rgba(19, 88, 110, 0.92), rgba(15, 74, 92, 0.88)), var(--rr-hero-bg, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 20px 100px;
    text-align: center;
    color: #fff;
    position: relative;
}

section.contact-hero::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 80px;
    background: #f9fafb;
    clip-path: ellipse(55% 100% at 50% 100%);
}

section.contact-hero .hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

section.contact-hero h1 {
    font-family: var(--font-antonio);
    font-size: clamp(36px, 6vw, 56px);
    font-weight: 600;
    margin: 0 0 16px 0;
    padding: 0;
    letter-spacing: -0.5px;
    color: #fff;
}

section.contact-hero > p {
    font-size: 18px;
    opacity: 0.9;
    max-width: 550px;
    margin: 0 auto;
    padding: 0;
    line-height: 1.7;
}

@media (max-width: 600px) {
    section.contact-hero {
        padding: 60px 20px 80px;
    }
    section.contact-hero::after {
        height: 50px;
    }
}

/*
 * The hero's own fades are CSS animations now, so they no longer depend on
 * scripting at all. This block still covers the hero variants whose fade classes
 * are declared by other blocks' stylesheets and are still observer-driven — a
 * scripting-disabled client must never be left with invisible hero copy.
 */
@media (scripting: none) {
    div[class$="-hero"] .fade-in-up,
    .hero-content.fade-up {
        opacity: 1;
        transform: none;
    }
}