(also sticky)
Symptoms user reported:
- Homepage: tab doesn't follow scroll (v16 sticky rule was being overridden)
- Other pages: tab crunches into header (top:60px was too tight)
- Sizes differ between homepage and other pages
Fix: unify styling + behavior with strong specificity + !important where
needed. Match the homepage tab's visual size everywhere. Give BOTH more
breathing room from the header so the tab doesn't overlap it. */
/* Homepage tab-wrap — sticky and follows all the way down */
section.est-strip .est-tab-wrap{
position:sticky!important;
top:66px!important;
z-index:44!important;
background:var(--canopy)!important;
padding:0!important;
box-shadow:0 4px 12px rgba(22,49,31,.14);
}
/* Global tab (all pages except homepage) — same look and behavior */
.est-tab-global{
position:sticky!important;
top:66px!important;
z-index:44;
height:0; /* takes no vertical space; tab overhangs below */
display:flex;justify-content:center;
background:transparent;pointer-events:none;
margin-top:0;
}
/* Add a small breathing room below the header to prevent visual crunch */
.est-tab-global::before{
content:"";
position:absolute;
top:-6px;left:0;right:0;height:6px;
pointer-events:none;
}
.est-tab-global .est-tab{
pointer-events:auto;
border-radius:0 0 14px 14px;
margin:0;
box-shadow:0 4px 12px rgba(22,49,31,.22);
/* v27: 30% taller */
padding:17px 24px 18px;
font-size:15px;
font-weight:800;
letter-spacing:.02em;
}
/* Ensure both tabs use identical .est-tab styling */
.est-tab{
display:inline-flex;align-items:center;gap:10px;
background:var(--hivis);color:#fff;
border:none;border-radius:0 0 14px 14px;
padding:17px 24px 18px;
font-family:var(--font);font-weight:800;font-size:15px;letter-spacing:.02em;
cursor:pointer;
transition:background .15s ease,transform .12s ease;
}
.est-tab:hover{background:var(--hivis-dark)}
.est-tab:active{transform:translateY(1px)}
/* ═══ v20 (cont.): On homepage, hide the original est-strip tab-wrap
The global sticky tab now handles the sticky behavior on every page.
The est-strip section still exists (contains the panel), just no visible tab. */
section.est-strip > .est-tab-wrap{
display:none!important;
}
/* ═══ v23: Mobile menu — display all items, scroll cleanly on iOS ═══
v21 tried position:fixed inside the sticky header. On iOS Safari,
fixed-inside-sticky gets clipped to the sticky parent's bounds — that's
why only the first menu item ("Home") was visible in v20.
Fix: keep the menu as a normal in-flow block (like v19), but:
- Use 100dvh so the shrinking iOS URL bar doesn't cut off items
- Add padding-bottom so the sticky footer bar (Call/Text) doesn't
cover the last items
- Do NOT set body{overflow:hidden} — that was blocking iOS scroll
The menu uses overscroll-behavior:contain to prevent underlying page
scroll while the visitor is scrolling inside the menu. */
.mobile-menu.open{
/* End the menu ABOVE the sticky footer bar (~72px) + iPhone safe area,
rather than relying on padding-bottom (which iOS was letting overflow
behind the bar). Anything that doesn't fit scrolls inside the menu. */
max-height:calc(100svh - 60px - 42px - env(safe-area-inset-bottom, 0px));
overflow-y:auto;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
padding-bottom:12px;
}
/* Do NOT lock body overflow — blocks iOS internal scroll */
body.menu-open{overflow:auto!important}
@media(min-width:940px){body.menu-open{overflow:auto}}
/* ═══ v22 (updated for v27): Mobile estimate strip is now position:fixed.
Docked immediately below the taller tab (60 header + 53 tab = 113px). */
.mobile-est-strip{
top:113px!important;
z-index:39!important;
}
/* ═══ v30: Gallery preview marquee — infinite horizontal scroll ═══ */
.gallery-marquee-cta{
padding:36px 0 40px;
background:linear-gradient(180deg,var(--sawgrass) 0%,var(--paper) 100%);
overflow:hidden;
position:relative;
}
.marquee-header{text-align:center;margin-bottom:22px;padding:0 20px}
.marquee-header .eyebrow{margin:0 0 6px;color:var(--pine)}
.marquee-header h2{margin:0 0 14px}
.marquee-header .marquee-cta{
display:inline-flex;align-items:center;gap:8px;
padding:14px 26px;
background:var(--hivis);color:#fff;text-decoration:none;
font-weight:800;font-size:16px;letter-spacing:.02em;
border-radius:12px;
box-shadow:0 6px 16px rgba(219,110,29,.35);
transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.marquee-header .marquee-cta:hover{
background:var(--hivis-dark);
transform:translateY(-2px);
box-shadow:0 10px 22px rgba(219,110,29,.42);
}
.marquee-track{
width:100%;max-width:1100px;margin:0 auto;overflow:hidden;padding:6px 0;
mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.marquee-row{
display:flex;gap:12px;
animation:ss-marquee 55s linear infinite;
width:max-content;
}
.marquee-row:hover{animation-play-state:paused}
.marquee-row a{
display:block;flex-shrink:0;
border-radius:10px;overflow:hidden;
box-shadow:0 4px 12px rgba(22,49,31,.18);
transition:transform .18s ease, box-shadow .18s ease;
}
.marquee-row a:hover{
transform:translateY(-3px) scale(1.02);
box-shadow:0 10px 22px rgba(22,49,31,.28);
}
.marquee-row img{
display:block;width:180px;height:270px;object-fit:cover;
}
@media(max-width:640px){
.marquee-row img{width:140px;height:210px}
.marquee-header h2{font-size:26px}
}
@keyframes ss-marquee{
0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
.marquee-row{animation:none}
.marquee-track{overflow-x:auto}
}
/* ═══ v39: Single scroll container + always-visible close × ═══
Prior modal had nested scroll (modal + fillout-modal-wrap) which
caused the "double scroll" bug where the inner scroll ended before
the outer scroll took over. Fix: single scroll container on the
modal itself. Fillout iframe grows naturally; whole modal scrolls
as one unit. × button sticks to top so it's always visible while
scrolling through a long form. */
.modal-lead-form{
max-width:640px !important;
width:min(100%, 640px);
padding:0 !important;
max-height:92vh;
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
display:block;
position:relative;
}
/* Sticky top strip inside the modal — holds the title and × so they're always visible */
.modal-top-strip{
position:sticky;top:0;z-index:10;
background:var(--pine);
padding:12px 16px;
display:flex;justify-content:space-between;align-items:center;
box-shadow:0 2px 6px rgba(22,49,31,0.18);
}
.modal-top-title{
color:#fff;font-family:var(--font);font-weight:800;
font-size:18px;letter-spacing:.02em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.modal-lead-form .modal-x{
position:relative !important;top:auto !important;right:auto !important;
width:36px;height:36px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,0.15);color:#fff;
border:2px solid rgba(255,255,255,0.4);border-radius:50%;
font-size:22px;font-weight:800;line-height:1;
cursor:pointer;padding:0;flex-shrink:0;
transition:background .12s,border-color .12s;
}
.modal-lead-form .modal-x:hover{background:rgba(255,255,255,0.28);border-color:#fff}
.modal-lead-form h3{margin:0 0 4px;font-size:22px}
.modal-lead-form .modal-sub{margin:0 0 14px;font-size:14px;color:var(--ink-soft)}
.modal-footer-row{
display:flex;align-items:center;justify-content:space-between;
gap:12px;margin:12px 14px 14px;flex-wrap:wrap;
}
.modal-close-btm{
background:var(--paper);color:var(--canopy);
border:2px solid var(--line);border-radius:10px;
padding:8px 14px;font-family:var(--font);font-weight:700;font-size:13px;
cursor:pointer;
transition:border-color .12s,background .12s;
}
.modal-close-btm:hover{border-color:var(--pine);background:#fff}
.modal-lead-form .modal-fine{margin:0;font-size:13px;color:var(--bark)}
.modal-lead-form .modal-fine a{color:var(--pine);font-weight:700}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.modal-overlay{align-items:flex-start!important;padding-top:8px}
.fillout-modal-wrap{
min-height:520px;
padding:0 14px;
background:#fff;
}
.fillout-modal-wrap > div{
width:100%;
min-height:500px;
}
@media(max-width:640px){
.modal-overlay{padding-top:4px}
.modal-lead-form{
max-height:96vh;
}
.modal-top-strip{padding:10px 12px}
.modal-top-title{font-size:16px}
.modal-lead-form .modal-x{width:34px;height:34px;font-size:20px}
.fillout-modal-wrap{min-height:440px;padding:0 12px}
.modal-footer-row{gap:8px;margin:10px 12px 12px}
}
/* ═══ v32: Contact-us page + thank-you page ═══ */
.contact-hero{padding-top:22px;padding-bottom:14px}
.contact-hero h1{margin:0 0 8px}
.contact-lede{font-size:16px;color:var(--ink-soft);margin:0 0 16px;max-width:640px}
.contact-quicklinks{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.contact-quicklinks .btn{flex:0 1 auto;font-size:14px;padding:10px 16px}
.contact-quicklinks .btn-ghost{color:var(--pine)}
.contact-form-section{padding:8px 0 16px;background:transparent}
.fillout-page-wrap{
max-width:880px;margin:0 auto;
background:#fff;
border-radius:14px;
box-shadow:0 6px 20px rgba(22,49,31,.12);
padding:8px;
}
.fillout-page-wrap > div{
width:100%;
min-height:500px;
}
@media(max-width:640px){
.fillout-page-wrap{padding:6px;border-radius:10px}
}
.trust-strip{background:var(--sawgrass);padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-items{display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;gap:14px}
.trust-item{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--canopy);font-size:14.5px}
.trust-item .ti-icon{font-size:20px}
@media(max-width:640px){
.trust-items{gap:12px}
.trust-item{flex:1 1 45%;justify-content:center;font-size:13.5px}
}
.reviews-widget{padding:36px 0;background:var(--paper)}
.reviews-widget h2{margin:0 0 18px}
.reviews-widget .eyebrow{margin:0 0 4px;color:var(--pine)}
.thankyou-hero{text-align:center;padding:60px 0 30px;position:relative}
.ty-close-top{
position:absolute;top:12px;right:16px;
width:44px;height:44px;
display:flex;align-items:center;justify-content:center;
background:var(--paper);color:var(--canopy);
border:2px solid var(--line);border-radius:50%;
font-size:26px;font-weight:800;line-height:1;text-decoration:none;
transition:background .12s,border-color .12s;
}
.ty-close-top:hover{background:#fff;border-color:var(--pine)}
.ty-close-btm{
display:inline-block;margin:20px auto 0;
padding:9px 16px;
background:var(--paper);color:var(--canopy);
border:2px solid var(--line);border-radius:10px;
font-weight:700;font-size:14px;text-decoration:none;
transition:border-color .12s,background .12s;
}
.ty-close-btm:hover{border-color:var(--pine);background:#fff}
.thankyou-icon{font-size:64px;margin-bottom:12px}
.thankyou-hero h1{margin:0 0 12px}
.thankyou-lede{font-size:18px;color:var(--ink-soft);max-width:600px;margin:0 auto 24px}
.thankyou-ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.what-next{list-style:none;padding:0;margin:16px 0 0;counter-reset:step}
.what-next li{position:relative;padding:14px 0 14px 48px;border-bottom:1px solid var(--line);counter-increment:step}
.what-next li:last-child{border-bottom:none}
.what-next li::before{
content:counter(step);
position:absolute;left:0;top:12px;
width:32px;height:32px;border-radius:50%;
background:var(--pine);color:#fff;
display:flex;align-items:center;justify-content:center;
font-weight:800;
}