/*
   SHARED HERO SYSTEM
   One visual language for every Roof Repair Pasadena TX landing and service page.
   The low-contrast shingle pattern references the work itself without competing
   with the emergency CTA.
*/
:root {
    --hero-ink: #061324;
    --hero-navy: #0c2340;
    --hero-blue: #38bdf8;
    --hero-blue-soft: #93c5fd;
    --hero-copy: #d5e2f1;
    --hero-muted: #a9bbcf;
    --hero-action: #ea580c;
    --hero-action-hover: #c2410c;
}

:is(.hero, .svc-hero, .about-hero, .contact-hero-section) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Match the About page's full desktop hero footprint.  Content can still
       extend this safely on pages with a longer headline or description. */
    min-height: 49.25rem;
    padding: clamp(4.5rem, 7vw, 5.75rem) 0 clamp(3.5rem, 5vw, 4.5rem) !important;
    background-color: var(--hero-ink) !important;
    background-image:
        radial-gradient(circle at 15% 5%, rgba(56, 189, 248, .15), transparent 32rem),
        radial-gradient(circle at 88% 88%, rgba(234, 88, 12, .13), transparent 25rem),
        linear-gradient(135deg, var(--hero-navy), var(--hero-ink) 68%) !important;
}

/* A restrained, roof-shingle-like field behind the content. */
:is(.hero, .svc-hero, .about-hero, .contact-hero-section)::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    opacity: .16;
    background-image:
        linear-gradient(30deg, rgba(255,255,255,.12) 1px, transparent 1px),
        linear-gradient(150deg, rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: 48px 28px;
    background-position: 0 0, 24px 14px;
}

/* Remove legacy per-page decorative layers. The shared parent background and
   shingle field above are now the sole background on every hero. */
:is(.svc-hero-glow, .about-hero-glow, .contact-hero-glow),
.svc-hero > .hero-grid,
.about-hero > .hero-grid,
.contact-hero-section > .hero-bg-grid,
.hero::after {
    display: none !important;
}

:is(.hero, .svc-hero, .about-hero, .contact-hero-section) > .container {
    position: relative;
    z-index: 2;
}

.hero > .container > .hero-grid,
.svc-hero > .container > .svc-hero-grid,
.about-hero > .container > .about-hero-inner,
.contact-hero-section > .container > .contact-hero-inner {
    display: block !important;
    max-width: 52rem !important;
    margin: 0 auto !important;
    text-align: center !important;
}

:is(.hero-content, .svc-hero-text, .about-hero-text, .contact-hero-content) {
    max-width: 52rem;
    margin: 0 auto;
}

:is(.hero, .svc-hero, .about-hero, .contact-hero-section) :is(.hero-visual, .svc-hero-visual, .about-hero-img, .contact-hero-media) {
    display: none !important;
}

:is(.hero-badge, .svc-hero-badge, .contact-hero-badge) {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.15rem;
    padding: .42rem .8rem;
    border: 1px solid rgba(147, 197, 253, .34) !important;
    border-radius: 999px;
    background: rgba(14, 50, 87, .72) !important;
    color: var(--hero-blue-soft) !important;
    font-size: .73rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .08em;
    text-transform: uppercase;
}

:is(.hero-badge .pulse, .svc-hero-badge .pulse, .contact-hero-badge .status-dot) {
    background: #22c55e !important;
    box-shadow: 0 0 0 .25rem rgba(34, 197, 94, .12), 0 0 10px #22c55e !important;
}

:is(.hero, .svc-hero, .about-hero, .contact-hero-section) h1,
.contact-hero-title {
    margin: 0 0 1.1rem !important;
    color: #fff !important;
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    font-size: clamp(2.15rem, 4.2vw, 3.6rem) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -.035em !important;
}

:is(.hero, .svc-hero, .about-hero, .contact-hero-section) h1 mark,
.contact-hero-title mark {
    background: linear-gradient(110deg, #bae6fd 0%, var(--hero-blue) 54%, #7dd3fc 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

:is(.hero-desc, .svc-hero-desc, .contact-hero-p, .about-hero-text > p) {
    max-width: 42rem !important;
    margin: 0 auto 1.65rem !important;
    color: var(--hero-copy) !important;
    font-size: clamp(1rem, 1.5vw, 1.075rem) !important;
    line-height: 1.7 !important;
}

.about-hero-text > p + p { margin-top: -.75rem !important; }

:is(.btn-row, .svc-hero-cta) {
    justify-content: center !important;
    align-items: center;
    gap: .8rem !important;
}

:is(.hero, .svc-hero, .about-hero, .contact-hero-section) .btn-cta {
    min-height: 3rem;
    border-color: var(--hero-action) !important;
    background: var(--hero-action) !important;
    box-shadow: 0 8px 20px rgba(234, 88, 12, .22) !important;
}

:is(.hero, .svc-hero, .about-hero, .contact-hero-section) .btn-cta:hover {
    background: var(--hero-action-hover) !important;
    border-color: var(--hero-action-hover) !important;
}

:is(.hero, .svc-hero, .about-hero, .contact-hero-section) :is(.btn-ghost, .btn-outline-white) {
    min-height: 3rem;
    border-color: rgba(255,255,255,.42) !important;
    color: #fff !important;
    background: rgba(255,255,255,.04) !important;
}

:is(.hero-stats, .svc-hero-stats, .contact-hero-stats) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: .7rem !important;
    margin-top: 2rem !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid rgba(191, 219, 254, .22) !important;
}

:is(.hero-stat, .hero-stat-card) {
    min-height: 5.35rem;
    display: grid;
    align-content: center;
    padding: .7rem .45rem !important;
    border: 1px solid rgba(191, 219, 254, .15) !important;
    border-radius: .65rem !important;
    background: rgba(255, 255, 255, .045) !important;
}

:is(.hero-stat-val, .hero-stat-num) {
    margin: 0 !important;
    color: #fb923c !important;
    font-size: clamp(1.05rem, 2vw, 1.3rem) !important;
}

:is(.hero-stat-label, .hero-stat-lbl) {
    margin-top: .22rem !important;
    color: var(--hero-muted) !important;
    font-size: .67rem !important;
    line-height: 1.3;
    letter-spacing: .055em !important;
}

@media (max-width: 767px) {
    :is(.hero, .svc-hero, .about-hero, .contact-hero-section) {
        min-height: 0;
        padding: 3.75rem 0 3.25rem !important;
    }

    .hero > .container > .hero-grid,
    .svc-hero > .container > .svc-hero-grid,
    .about-hero > .container > .about-hero-inner,
    .contact-hero-section > .container > .contact-hero-inner { max-width: 36rem !important; }
    :is(.hero-stats, .svc-hero-stats, .contact-hero-stats) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    :is(.btn-row, .svc-hero-cta) { flex-direction: column; align-items: stretch !important; }
    :is(.btn-row, .svc-hero-cta) .btn { justify-content: center; width: 100%; }
}

/* Every desktop hero uses the About page's shared content measure, typography,
   CTA spacing, and stat-card geometry defined above. */
@media (min-width: 768px) {
    #hero {
        min-height: 49.25rem;
    }

    #trust-bar .container { min-height: 7.5rem; }
    #trust-bar .trust-intro { padding-top: 1.2rem; padding-bottom: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    :is(.hero, .svc-hero, .about-hero, .contact-hero-section) *,
    :is(.hero, .svc-hero, .about-hero, .contact-hero-section) *::before,
    :is(.hero, .svc-hero, .about-hero, .contact-hero-section) *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* Home trust bar — a single proof rail rather than five unrelated chips. */
#trust-bar {
    padding: 0 !important;
    border: 0 !important;
    background: #f8fafc;
    border-bottom: 1px solid #dbe5f0 !important;
}

#trust-bar .container {
    display: grid;
    grid-template-columns: 13.5rem minmax(0, 1fr);
    align-items: stretch;
    min-height: 8.25rem;
}

#trust-bar .trust-intro {
    display: grid;
    align-content: center;
    gap: .35rem;
    padding: 1.5rem 1.6rem 1.5rem 0;
    border-right: 1px solid #dbe5f0;
}

#trust-bar .trust-eyebrow {
    color: #2563eb;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

#trust-bar .trust-intro p {
    margin: 0;
    color: #0c2340;
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.2;
}

#trust-bar .trust-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 !important;
    padding: 0 !important;
}

#trust-bar .trust-chip {
    position: relative;
    display: grid;
    grid-template-columns: 2.45rem minmax(0, 1fr);
    align-items: center;
    gap: .7rem;
    min-width: 0;
    padding: 1.25rem .9rem !important;
    border: 0 !important;
    border-right: 1px solid #e1eaf3;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: background-color .18s ease;
}

#trust-bar .trust-chip:last-child { border-right: 0; }
#trust-bar .trust-chip:hover { transform: none !important; background: #eff6ff !important; }

#trust-bar .trust-chip-icon {
    width: 2.45rem;
    height: 2.45rem;
    border: 1px solid #bfdbfe;
    border-radius: 50%;
    background: #fff;
    box-shadow: none;
}

#trust-bar .trust-chip-icon svg { width: 1.15rem; height: 1.15rem; color: #2563eb; }

#trust-bar .trust-chip-text {
    color: #18324f;
    font-size: .77rem;
    font-weight: 700;
    line-height: 1.28;
}

/* Legal documents need a calm, readable context header—not a conversion-size
   service hero. This also prevents the global #hero minimum height from
   creating a large empty block above policy content. */
#hero.legal-hero {
    min-height: auto !important;
    padding: 3.5rem 0 3rem !important;
    overflow: hidden;
}

#hero.legal-hero .container {
    max-width: 57.5rem;
    text-align: center;
}

#hero.legal-hero .svc-breadcrumb { margin-bottom: 1rem; }
#hero.legal-hero .hero-badge { margin-bottom: .9rem; }
#hero.legal-hero h1 { margin: 0 0 .9rem; }
#hero.legal-hero .hero-desc { margin-bottom: 0 !important; }

@media (max-width: 767px) {
    #hero.legal-hero { padding: 2.7rem 0 2.4rem !important; }
}

/* Services has six proof points and no intro panel. It must use the full
   container rather than the two-column home-page proof rail. */
#trust-bar.trust-bar--services .container {
    display: block;
    min-height: 0;
}

#trust-bar.trust-bar--services .trust-row {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

#trust-bar.trust-bar--services .trust-chip {
    padding: 1.1rem .75rem !important;
}

@media (max-width: 1023px) {
    #trust-bar .container { grid-template-columns: 1fr; }
    #trust-bar .trust-intro { padding: 1.4rem 0 1rem; border-right: 0; }
    #trust-bar .trust-row { border-top: 1px solid #dbe5f0; }
    #trust-bar.trust-bar--services .trust-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    #trust-bar .trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    #trust-bar .trust-chip { padding: 1rem .75rem !important; border-bottom: 1px solid #e1eaf3; }
    #trust-bar .trust-chip:nth-child(2n) { border-right: 0; }
    #trust-bar .trust-chip:last-child { grid-column: 1 / -1; border-bottom: 0; }
    #trust-bar.trust-bar--services .trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    #trust-bar.trust-bar--services .trust-chip:last-child { grid-column: auto; border-bottom: 1px solid #e1eaf3; }
}