/* Start custom CSS for html, class: .elementor-element-41b8699 */*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #1a1a1a; background: #fff; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
/* ── HERO ── */
.hero { position: relative; color: #fff; overflow: hidden; min-height: 480px; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: brightness(0.45); z-index: 0; }
.hero-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,10,0,0.97) 0%, rgba(74,27,12,0.72) 45%, rgba(0,0,0,0.12) 100%); z-index: 1; }
.hero-credit { position: absolute; bottom: 0; right: 0; z-index: 3; font-size: 9px; color: rgba(255,255,255,.38); padding: 3px 7px; background: rgba(0,0,0,.28); }
.hero-content { position: relative; z-index: 2; padding: 2.5rem 2rem 2.5rem; max-width: 860px; margin: 0 auto; width: 100%; }
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1rem; align-items: center; }
.hero-badge { background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.22); color: #3192D0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 13px; border-radius: 20px; font-weight: 600; }
.first-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(250,238,218,.12); color: #fcd9c4; font-size: 11px; font-weight: 600; padding: 4px 13px; border-radius: 20px; border: .5px solid rgba(250,199,117,.3); }
.first-dot { width: 5px; height: 5px; border-radius: 50%; background: #fac775; flex-shrink: 0; }
.hero h1 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 600; line-height: 1.2; margin-bottom: .8rem; color: #fff; }
.hero h1 span { color: #f0997b; }
.hero-sub { font-size: .95rem; color: rgba(255,255,255,.78); max-width: 540px; line-height: 1.65; margin-bottom: 1.6rem; }
.btn-pri { display: inline-block; background: #f0997b; color: #4a1b0c; font-weight: 700; font-size: .9rem; padding: .65rem 1.5rem; border-radius: 7px; margin-right: 10px; margin-bottom: 10px; cursor: pointer; border: none; text-decoration: none; }
.btn-pri:hover { background: #d85a30; color: #fff; }
.btn-out { display: inline-block; background: transparent; color: #fff; font-weight: 600; font-size: .9rem; padding: .65rem 1.5rem; border-radius: 7px; border: 1.5px solid rgba(255,255,255,.4); margin-bottom: 10px; text-decoration: none; }
.btn-out:hover { border-color: #fff; background: rgba(255,255,255,.07); }
/* ── STAT STRIP ── */
.stat-strip { background: #2c0e00; padding: 1rem 2rem; border-top: 1px solid rgba(240,153,123,.18); }
.stat-grid { max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; }
.stat-item { text-align: center; }
.stat-num { font-size: 1.4rem; font-weight: 700; color: #f0997b; display: block; }
.stat-label { font-size: 9.5px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; line-height: 1.4; }
.stat-src { font-size: 8.5px; color: rgba(255,255,255,.28); display: block; margin-top: 1px; }
/* ── SHARED ── */
.wrap { max-width: 860px; margin: 0 auto; padding: 2.25rem 2rem; }
.sec-title { font-size: 1.2rem; font-weight: 700; margin-bottom: .4rem; color: #1a1a1a; }
.sec-sub { font-size: .875rem; color: #555; margin-bottom: 1.5rem; line-height: 1.65; }
.divider { border: none; border-top: 1px solid #e8e8e8; margin: 0 2rem; }
/* ── WHAT CARDS ── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .875rem; }
.wcard { background: #fff; border: 1px solid #e8e8e8; border-radius: 10px; padding: 1rem; }
.wicon { width: 32px; height: 32px; border-radius: 7px; display: flex; align-items: center; justify-content: center; margin-bottom: .6rem; font-size: 16px; }
.wcard h3 { font-size: .875rem; font-weight: 700; margin-bottom: .3rem; color: #1a1a1a; }
.wcard p { font-size: .8rem; color: #555; line-height: 1.55; }
/* ── PRICING ── */
.price-strip { background: #f7f5f0; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; }
.price-inner { max-width: 860px; margin: 0 auto; padding: 1.25rem 2rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: stretch; }
.price-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 10px; padding: 1rem 1.2rem; flex: 1; min-width: 185px; }
.price-amount { font-size: 1.6rem; font-weight: 700; color: #3b6d11; }
.price-label { font-size: .82rem; font-weight: 700; margin: .15rem 0 .2rem; color: #1a1a1a; }
.price-desc { font-size: .77rem; color: #555; line-height: 1.5; }
.price-note { flex: 1; min-width: 165px; display: flex; align-items: center; }
.price-note p { font-size: .8rem; color: #555; line-height: 1.6; }
/* ── REBATES ── */
.rebate-bg { background: #f7f5f0; }
.county-note { background: #fff; border: 1px solid #e8e8e8; border-radius: 10px; padding: 1.1rem; display: flex; gap: 10px; margin-bottom: 1rem; }
.cn-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.county-note h3 { font-size: .875rem; font-weight: 700; margin-bottom: .3rem; color: #1a1a1a; }
.county-note p { font-size: .8rem; color: #555; line-height: 1.55; }
.county-note a { color: #185fa5; text-decoration: underline; }
.state-rebate { background: #eaf3de; border: 1px solid #c0dd97; border-radius: 10px; padding: 1.2rem; margin-bottom: 1rem; }
.sr-head { display: flex; align-items: center; gap: 8px; margin-bottom: .6rem; }
.sr-head h3 { font-size: .95rem; font-weight: 700; color: #3b6d11; }
.state-rebate p { font-size: .82rem; color: #27500a; line-height: 1.65; }
.state-rebate ul { margin: .4rem 0 .6rem 1rem; font-size: .8rem; color: #3b6d11; line-height: 1.8; }
.state-rebate a { font-size: .8rem; color: #27500a; font-weight: 700; text-decoration: underline; }
.csfs-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 10px; padding: 1.1rem; margin-bottom: 1rem; }
.csfs-card h3 { font-size: .875rem; font-weight: 700; margin-bottom: .3rem; color: #1a1a1a; }
.csfs-card p { font-size: .8rem; color: #555; line-height: 1.55; margin-bottom: .5rem; }
.csfs-card a { font-size: .8rem; color: #185fa5; font-weight: 700; text-decoration: underline; }
/* ── RESOURCES ── */
.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .875rem; margin-top: 1.25rem; }
.rcard { background: #fff; border: 1px solid #e8e8e8; border-radius: 10px; padding: 1rem; display: flex; flex-direction: column; gap: .35rem; }
.rtag { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; padding: 2px 9px; border-radius: 20px; display: inline-block; width: fit-content; }
.tag-blue { background: #e6f1fb; color: #0c447c; }
.tag-green { background: #eaf3de; color: #27500a; }
.tag-amber { background: #faeeda; color: #633806; }
.rcard h3 { font-size: .85rem; font-weight: 700; color: #1a1a1a; }
.rcard p { font-size: .78rem; color: #555; line-height: 1.5; flex: 1; }
.rcard a { font-size: .78rem; color: #185fa5; font-weight: 700; text-decoration: underline; }
/* ── PBS ── */
.pbs-section { background: #f7f5f0; }
.pbs-inner { max-width: 860px; margin: 0 auto; padding: 2.25rem 2rem; }
.pbs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.pbs-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 10px; padding: 1.1rem; }
.pbs-play-row { display: flex; align-items: center; gap: 10px; margin-bottom: .65rem; }
.pbs-play { width: 40px; height: 40px; border-radius: 50%; background: #faece7; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pbs-play svg { margin-left: 3px; }
.pbs-play-label { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: #993c1d; font-weight: 700; }
.pbs-card h3 { font-size: .9rem; font-weight: 700; margin-bottom: .35rem; color: #1a1a1a; }
.pbs-card p { font-size: .82rem; color: #555; line-height: 1.58; margin-bottom: .65rem; }
.pbs-watch { display: inline-block; background: #faece7; color: #993c1d; font-size: .8rem; font-weight: 700; padding: 6px 14px; border-radius: 7px; border: 1px solid #f0997b; text-decoration: none; }
.pbs-watch:hover { background: #f0997b; color: #4a1b0c; }
/* ── CTA ── */
.cta-section { position: relative; overflow: hidden; padding: 3.5rem 2rem; text-align: center; color: #fff; }
.cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.cta-overlay { position: absolute; inset: 0; background: rgba(60,15,0,0.65); z-index: 1; }
.cta-inner { position: relative; z-index: 2; max-width: 520px; margin: 0 auto; }
.cta-section h2 { font-size: 1.7rem; font-weight: 700; margin-bottom: .65rem; }
.cta-section p { font-size: .92rem; color: rgba(255,255,255,.82); margin-bottom: 1.6rem; line-height: 1.65; }
/*
============================================================
CTA BUTTONS — wire these to your contact/scheduling page
Replace href="#contact" with your actual contact page URL
e.g. href="/contact" or href="mailto:info@lookpropertyinspection.com"
============================================================
*/
.cta-btn { display: inline-block; background: #fff; color: #993c1d; font-weight: 700; font-size: .9rem; padding: .75rem 2rem; border-radius: 7px; margin: 0 6px 10px; text-decoration: none; }
.cta-btn:hover { background: #faece7; }
.cta-out { display: inline-block; background: transparent; color: #fff; font-weight: 600; font-size: .9rem; padding: .75rem 2rem; border-radius: 7px; border: 1.5px solid rgba(255,255,255,.45); margin: 0 6px 10px; text-decoration: none; }
.cta-out:hover { border-color: #fff; background: rgba(255,255,255,.08); }
/* ── FOOTER ── */
.footer-note { text-align: center; padding: 1.25rem 2rem; font-size: .75rem; color: #888; border-top: 1px solid #e8e8e8; line-height: 1.7; }
@media (max-width: 600px) {
.hero-content { padding: 1.5rem 1.25rem 2rem; }
.wrap, .pbs-inner { padding: 1.75rem 1.25rem; }
.price-inner { padding: 1.1rem 1.25rem; }
.divider { margin: 0 1.25rem; }
.hero h1 { font-size: 1.5rem; }
}
/* ── PRIMARY BUTTONS (Solid Background) ── *//* Targets the Hero and CTA primary buttons */.btn-pri, .cta-btn, .pbs-watch {
background: #3192D0 !important; /* Update to your brand color */
color: #FFFFFF !important; /* Button text color */
border-radius: 7px !important; /* Matches your client's design */
transition: all 0.3s ease !important;
}.btn-pri:hover, .cta-btn:hover, .pbs-watch:hover {
background: #224432 !important; /* Slightly darker/different shade */
color: #FFFFFF !important;
}/* ── OUTLINE BUTTONS (Transparent Background) ── *//* Targets the secondary buttons with borders */.btn-out, .cta-out {
background: transparent !important;
color: #FFFFFF !important; /* Border and text color */
border: 1.5px solid #3192D0 !important;
transition: all 0.3s ease !important;
}.btn-out:hover, .cta-out:hover {
background: rgba(255, 255, 255, 0.1) !important;
border-color: #FFFFFF !important;
}/* ── SPECIAL HIGHLIGHTS ── *//* The client's code uses a specific color for text spans in headings */.hero h1 span, .stat-num {
color: #3192D0 !important;
}/* End custom CSS */