/* Shared opening surfaces for the public landing pages. */
:root {
    --lf-hero-ink: #123638;
    --lf-hero-accent: #08777d;
    --lf-hero-line: rgba(32, 167, 173, .18);
    --lf-hero-surface: linear-gradient(180deg, #fff 0%, #f1f8f8 45%, #fff 100%);
}

/* Keep the navigation and the beginning of the hero on the same white surface. */
body:has(#intro) .garybar-wrapper-lg,
body:has(#intro) .v2-hd,
.finance-header {
    background: #fff !important;
    border-bottom-color: transparent !important;
    box-shadow: none;
}

/* Service pages: remove the outlined inner panel and soften its backdrop. */
html #main > #intro:not(.intro-splash):not(.v2-hero) {
    background: var(--lf-hero-surface) !important;
    padding-top: clamp(12px, 2vw, 24px);
    padding-bottom: clamp(24px, 4vw, 48px);
    border: 0;
    box-shadow: none;
}

html #main > #intro:not(.intro-splash):not(.v2-hero)::before,
html #main > #intro:not(.intro-splash):not(.v2-hero)::after,
html #main > #intro:not(.intro-splash) > .info::before,
html #main > #intro:not(.intro-splash) > .info::after {
    display: none;
}

html #main > #intro:not(.intro-splash) > .info {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none;
    border-radius: 0;
}

#intro:not(.intro-splash) .header-logo-cursive {
    color: var(--lf-hero-ink);
    background: transparent;
    box-shadow: none;
    text-shadow: none;
    border-color: var(--lf-hero-line);
}

#intro:not(.intro-splash) .company-statement {
    color: var(--lf-hero-ink);
    line-height: 1.75;
}

#intro:not(.intro-splash) .company-statement a {
    color: var(--lf-hero-accent);
    font-size: inherit;
    line-height: inherit;
    text-decoration: underline;
    text-underline-offset: .15em;
}

/* The homepage retains its photo, smoke and logo layers. */
#intro.intro-splash .lfx-trust,
#intro.intro-splash .lfx-trust-in {
    background: transparent;
    box-shadow: none;
    border-color: var(--lf-hero-line);
}

/* Gallery and newer page templates use dark-hero text tokens by default. */
html #main > #intro.v2-hero {
    background: var(--lf-hero-surface);
    color: var(--lf-hero-ink);
}

#intro.v2-hero h1 { color: var(--lf-hero-ink); font-weight: 600; line-height: 1.18; }
#intro.v2-hero--slim { padding-block: clamp(28px, 4vw, 56px); }
#intro.v2-hero :is(.v2-lead, .v2-hero-alt, .v2-hero-trustline, .v2-crumb) { color: #365658; }
#intro.v2-hero :is(.v2-eyebrow, .v2-crumb a, .v2-hero-alt a) { color: var(--lf-hero-accent); }
#intro.v2-hero .v2-btn--paper { color: var(--lf-hero-ink); background: #fff; border-color: var(--lf-hero-line); }
#intro.v2-hero .v2-hero-img { box-shadow: 0 12px 32px rgba(8, 55, 58, .12); }
#intro.v2-hero .v2-hero-media::before { border-color: var(--lf-hero-line); }
#intro.v2-hero + .v2-trust { background: #fff; border-color: var(--lf-hero-line); }

/* Campaign pages share the same gentle fade into their first content section. */
html body .refer-hero,
html body .container.hero,
html body > header:has(.header-main) {
    background: var(--lf-hero-surface);
    color: var(--lf-hero-ink);
    border: 0;
    box-shadow: none;
    border-radius: 0;
}

html body .refer-hero {
    width: 100%;
    padding: clamp(24px, 4vw, 48px) 20px;
}

html body > header:has(.header-main) { padding: clamp(24px, 4vw, 48px) 20px; }
html body > header:has(.header-main) + section { background: #fff; }
html body > header .header-main,
html body .refer-hero h1 {
    color: var(--lf-hero-ink);
    font-family: "Montserrat", Arial, sans-serif;
    font-weight: 600;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.2;
    text-shadow: none;
}

html body > header .subheader-main,
html body .refer-hero p { color: #365658; line-height: 1.7; }
.refer-hero + .divider { height: 1px; background: var(--lf-hero-line); box-shadow: none; }

/* Form entry and policy pages have no conventional hero; blend their opening surface. */
body:has(#multi-step-form, #review-form) { background: var(--lf-hero-surface); }
body:has(#multi-step-form, #review-form) #modal {
    background: linear-gradient(180deg, #fff, #f1f8f8);
    border-color: var(--lf-hero-line);
    box-shadow: 0 12px 36px rgba(8, 55, 58, .12);
}
body:has(#multi-step-form, #review-form) #modal .modal-info-content { color: var(--lf-hero-ink); }
#wrong-page { background: var(--lf-hero-surface); color: var(--lf-hero-ink); }
#wrong-page .redirect { background: transparent; border-color: var(--lf-hero-line); box-shadow: none; }
.privacy-policy {
    background: linear-gradient(180deg, #fff 0, #f1f8f8 140px, #fff 340px);
    border-radius: 0;
    padding-top: 28px;
}
.privacy-policy :is(h2, h3) { color: var(--lf-hero-ink); font-weight: 600; line-height: 1.35; }

@media (max-width: 640px) {
    html #main > #intro:not(.intro-splash):not(.v2-hero) { padding-top: 8px; }
    #intro:not(.intro-splash) .company-statement { font-size: 1.25rem; }
}

/* Shared landing-page components, aligned with the eavestrough funnel. */
html body :is(#content > .card, #content .rotating-border > .card, .rr-card, .testimonial-card, .v2-card) {
    background: #fff; border: 1px solid #dce8e8; border-top: 3px solid #20a7ad;
    border-radius: 8px; box-shadow: 0 5px 18px rgba(8,55,58,.04); color: #123638;
}
html body #content .rotating-border { background: transparent; padding: 0; border-radius: 8px; }
html body #content .rotating-border::before, html body #content .rotating-border::after { display: none; }
html body #content .card h2 { font-size: clamp(22px, 2.5vw, 28px); line-height: 1.3; font-weight: 600; color: #123638; }
html body #content .card p { font-size: 16px; line-height: 1.7; color: #365658; }
html body :is(a.button, button.button, .v2-btn, a.btn-primary) {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 12px 20px; box-sizing: border-box;
    background: #08777d !important; color: #fff !important; border: 1px solid #08777d !important;
    border-radius: 6px; box-shadow: none !important; text-shadow: none;
    font-size: 16px; font-weight: 600; line-height: 1.4; text-align: center;
}
html body :is(a.button, button.button, .v2-btn, a.btn-primary):hover { background: #075d62 !important; transform: none !important; }
html body :is(a.button, button.button, .v2-btn, a.btn-primary):focus-visible { outline: 3px solid #20a7ad; outline-offset: 4px; }
html body .v2-btn--paper { background: #fff !important; color: #08777d !important; border-color: #bed5d6 !important; }
html body :is(.testimonials-section, .savings-section, .rr-section) { background: linear-gradient(180deg,#fff,#f1f8f8 45%,#fff); padding-block: clamp(28px,4vw,48px); color: #123638; }
html body :is(.testimonials-section, .savings-section) :is(h2,h3) { color: #123638; line-height: 1.3; font-weight: 600; }
html body .modal-content { border: 1px solid #dce8e8; border-radius: 8px; box-shadow: 0 12px 36px rgba(8,55,58,.12); }
html body .modal-body { color: #243b3d; }
html body .modal-body :is(p,li) { font-size: 16px; line-height: 1.7; }
html body .modal-body :is(p,li) a { font-size: inherit; line-height: inherit; color: #08777d; text-underline-offset: 3px; }
html body .modal-body ul { list-style: disc outside; padding-left: 24px; }
html body .modal-body li { display: list-item; margin-bottom: 10px; padding-left: 0; }
html body .modal-body .lfmb-check { background: #eef8f8; border-color: #20a7ad; border-radius: 8px; }
html body .plain-video img.play-button { width: 72px !important; height: auto !important; object-fit: contain; }
html body :is(.v2-card, .rr-card) p { line-height: 1.7; }
@media (prefers-reduced-motion: reduce) {
    html body :is(a.button, button.button, .v2-btn) { transition: none; }
}
/* Retire the decorative button frames so labels sit on one clear surface. */
html body #main :is(a.button, button.button) {
    background: #08777d !important; background-image: none !important; color: #fff !important;
    border: 1px solid #08777d !important; border-radius: 6px !important;
    box-shadow: none !important; min-height: 44px; padding: 12px 20px;
    display: inline-flex; align-items: center; justify-content: center; line-height: 1.4;
}
html body #main .button::before, html body #main .button::after { display: none !important; }
html body #main .button:hover { background: #075d62 !important; transform: none !important; }
html body .testimonials-carousel .testimonial { background: #fff; border: 1px solid #dce8e8; border-top: 3px solid #20a7ad; border-radius: 8px; padding: 24px; box-shadow: 0 5px 18px rgba(8,55,58,.04); color: #243b3d; }
html body .testimonial-text { font-style: normal; font-size: 16px; line-height: 1.7; }
html body #content .img-ribbon { background: #123638 !important; color: #fff; font-size: 16px; font-weight: 600; letter-spacing: .03em; }
html body #content :is(.best-seller-ribbon,.learn-more-ribbon) { background: #08777d !important; color: #fff; box-shadow: none; }
html body .modal-body :is(h1,h2,h3) { color: #123638; font-weight: 600; line-height: 1.3; }

/* Button wrappers must not retain the old animated frame or roaming icon. */
html body #main .rotating-border:has(> a.button) {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible;
    max-width: 100%;
}
html body #main .rotating-border:has(> a.button)::before,
html body #main .rotating-border:has(> a.button)::after { display: none !important; }
html body #main a.button.explore {
    position: relative;
    width: auto;
    max-width: 100%;
    margin: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    animation: none !important;
    transform: none !important;
}
html body #main .button .tool-icon { display: none !important; animation: none !important; }

/* Introductory links stay readable within continuous prose. */
html body #intro .company-statement a { text-decoration: none !important; }
html body #intro .company-statement a:focus-visible { outline: 2px solid #08777d; outline-offset: 3px; border-radius: 2px; }

/* The action label is sufficient; hide the legacy floating prompt. */
html body #main a.button .cta-click-me { display: none !important; animation: none !important; }

/* Social actions keep their footprint on hover, touch and keyboard focus. */
html body :is(#social, #social-2) > .wrapper { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; max-width:100%; }
html body :is(#social, #social-2) a.button-social { position:relative; float:none; flex:0 0 60px; width:60px!important; height:60px!important; max-width:60px; margin:0; box-sizing:border-box; transition:background-color .2s,color .2s; }
html body :is(#social, #social-2) a.button-social:is(:hover,:focus,:active) { width:60px!important; transform:none!important; }
html body :is(#social, #social-2) .button-social > span { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
html body :is(#social, #social-2) .button-social .icon { width:60px; height:60px; box-sizing:border-box; display:grid; place-items:center; }
html body :is(#social, #social-2) .button-social .icon i { line-height:1; }
html body :is(#social, #social-2) a.button-social:focus-visible { outline:3px solid #08777d; outline-offset:3px; }

/* Keep wide desktop navigation and service introductions on a shared measure. */
@media (min-width:1100px) {
    html body .garybar-wrapper-lg .navbar { width:100%; max-width:1120px; margin-inline:auto; padding-inline:32px; box-sizing:border-box; }
    html body .garybar-wrapper-lg .navbar-container { width:100%; max-width:1056px; margin-inline:auto; }
    html body #main > #intro:not(.intro-splash):not(.v2-hero) { width:100%; max-width:1120px; padding-top:8px; }
    html body #intro:not(.intro-splash):not(.v2-hero) > .info { padding:16px 32px; box-sizing:border-box; }
    html body #intro:not(.intro-splash) .company-statement { width:100%; max-width:820px; padding:0; margin-inline:auto; font-size:26px; line-height:1.65; box-sizing:border-box; }
}

/* Start service titles just below the navigation on every screen size. */
html body #main > #intro:not(.intro-splash):not(.v2-hero) { padding-top:0; }
html body #main > #intro:not(.intro-splash):not(.v2-hero) > .info { padding-top:4px; }

/* Service copy must paint above the decorative flower, never beneath it. */
html body #intro:not(.intro-splash) > .info { isolation:isolate; }
html body #intro:not(.intro-splash) .lffly-flower { z-index:0; }
html body #intro:not(.intro-splash) .lffly-flower svg { opacity:.16!important; }
html body #intro:not(.intro-splash) .company-statement { position:relative; z-index:1; opacity:1!important; color:#123638; mix-blend-mode:normal; }
html body #intro:not(.intro-splash) .company-statement :is(a,b,strong,span,img) { opacity:1!important; mix-blend-mode:normal; }

/* Paint the desktop hero edge to edge; constrain its content, not its backdrop. */
@media (min-width:1100px) {
    html body #main > #intro:not(.intro-splash):not(.v2-hero) { width:100%; max-width:none; box-sizing:border-box; grid-template-columns:minmax(0,1fr); justify-items:center; }
    html body #main > #intro:not(.intro-splash):not(.v2-hero) > .info { width:100%; max-width:1120px; min-width:0; margin-inline:auto; }
}

/* Let the testimonial backdrop fill the page, with a readable centered carousel. */
html body #main > #testimonials.testimonials-section { width:100%; max-width:none; box-sizing:border-box; padding-inline:20px; }
html body #main > #testimonials.testimonials-section::before { inset:0; transform:none; }
html body #testimonials > .container { width:100%; max-width:1120px; margin-inline:auto; padding-inline:0; box-sizing:border-box; }
html body #testimonials .testimonials-content { width:100%; max-width:820px; margin-inline:auto; min-width:0; }
html body #testimonials .testimonials-carousel { width:100%; max-width:100%; min-width:0; }
html body #testimonials .testimonial { padding:28px 52px; box-sizing:border-box; }
@media(max-width:640px) { html body #testimonials .testimonial { padding:24px 40px; } }

/* Give the savings panel the same edge-to-edge backdrop as the hero and reviews. */
html body #main > #savings.savings-section { width:100%; max-width:none; box-sizing:border-box; padding-inline:20px; }
html body #main > #savings.savings-section::before { inset:0; transform:none; }
html body #savings > .container-banner { width:100%; max-width:1120px; margin-inline:auto; box-sizing:border-box; }
html body #savings .savings-content { width:100%; max-width:820px; margin-inline:auto; box-sizing:border-box; }
html body #savings .savings-text { max-width:100%; margin-inline:auto; }

/* Separate the credentials from the social actions. */
html body #intro .license-text { display:block; margin-bottom:12px; }
html body #intro.intro-splash #social { padding-top:12px; }

/* Keep homepage modal price footers concise. */
html body .modal-content .modal-footer .lfpc > span { display:none; }

/* Give service introductions the relaxed reading rhythm of the homepage. */
html body #intro:not(.intro-splash) .company-statement { line-height:2; hyphens:none; -webkit-hyphens:none; word-break:normal; overflow-wrap:break-word; margin-top:0; margin-bottom:32px; }

/* Award badges share responsive cells instead of a shrinking mobile flex column. */
html body #industry-experts > .container { width:100%; min-width:0; box-sizing:border-box; }
html body #industry-experts .expert-logos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; width:100%; max-width:880px; margin:24px auto 0; align-items:center; }
html body #industry-experts .expert-logo { width:100%; min-width:0; margin:0; padding:0; box-sizing:border-box; }
html body #industry-experts .expert-logo a { display:block; width:100%; }
html body #industry-experts .expert-logo img { display:block; width:100%!important; max-width:180px!important; height:clamp(120px,32vw,160px)!important; object-fit:contain; margin-inline:auto; }
@media(min-width:768px) { html body #industry-experts .expert-logos { grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; } }

/* Close the gap between service titles and their statements. */
html body #intro:not(.intro-splash) .lffly-mast--top { order:-2; margin-bottom:0; }

/* The hero container owns the gutters at every breakpoint. */
html body #intro:not(.intro-splash) .company-statement { padding:0; box-sizing:border-box; }