@media (min-width: 992px) { /* ===== Hero estimate form card (column custom class: hero-form-card) ===== */ .hero-form-card { background: #ffffff !important; border-top: 4px solid #53b3c8; border-radius: 4px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); padding: 30px 28px; } /* Form title */ .hero-form-card .zcwf_title, .hero-form-card h1, .hero-form-card h2, .hero-form-card h3 { color: #0d2b4c !important; font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 23px; line-height: 1.2; } /* Field labels */ .hero-form-card label, .hero-form-card .zcwf_col_lab { color: #0d2b4c !important; font-family: 'Source Sans 3', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } /* Text inputs */ .hero-form-card input:not([type=submit]):not([type=reset]):not([type=button]) { background: #fbfcfd !important; border: 1px solid #dde5ec !important; border-radius: 3px; color: #2b3440 !important; padding: 11px 12px; font-size: 15px; width: 100%; box-sizing: border-box; } .hero-form-card input:focus { border-color: #53b3c8 !important; background: #ffffff !important; outline: none; } /* Submit button */ .hero-form-card input[type=submit], .hero-form-card .zcwf_button { background: #53b3c8 !important; color: #ffffff !important; border: none !important; border-radius: 3px; padding: 14px 24px; font-family: 'Source Sans 3', sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; width: 100%; cursor: pointer; } .hero-form-card input[type=submit]:hover, .hero-form-card .zcwf_button:hover { background: #0d2b4c !important; } /* Hide secondary Reset button if CRM injects one */ .hero-form-card input[type=reset] { display: none !important; } /* ===== Header: tighten vertical padding (was 32px/32px) ===== */ .theme-header .zpcontainer { padding-top: 12px !important; padding-bottom: 12px !important; } /* ===== Hero left-column CTA buttons: force 4px border-radius on all four corners (Noah 2026-06-18 PM). The Zoho builder's "border radius 4" input was producing 0px for REQUEST FREE ESTIMATE (no border-radius written to its per-element style at all) and 2px for CALL NOW (per-element style had border-radius:2px, not 4 as set in the UI). This forces 4px on every CTA in the hero's left column without touching the form's submit button. ===== */ .zpsection:has(.hero-form-card) [class*="zpcol-md"]:not(.hero-form-card) a.zpbutton { border-radius: 4px !important; } /* ===== Header nav "REQUEST FREE ESTIMATE" CTA — match render (Kacey 2026-06-15 review). Render: Deep Navy bg, white text, uppercase, modest tracking. Current Zoho theme paints it light cyan with dark text. The selector mirrors Zoho's own selector chain so specificity matches, then !important wins. The "* {color}" rule covers Zoho's inner which holds the text color independently. ===== */ .theme-header .theme-navigation-and-icons .theme-menu-area .theme-menu ul li.menu-highlight-primary > a, .theme-header li.menu-highlight-primary > a { background-color: #0d2b4c !important; background: #0d2b4c !important; border: 0 !important; border-radius: 4px !important; padding: 12px 22px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; color: #ffffff !important; transition: background-color 0.2s ease !important; } .theme-header .theme-navigation-and-icons .theme-menu-area .theme-menu ul li.menu-highlight-primary > a *, .theme-header li.menu-highlight-primary > a * { color: #ffffff !important; } .theme-header .theme-navigation-and-icons .theme-menu-area .theme-menu ul li.menu-highlight-primary > a:hover, .theme-header li.menu-highlight-primary > a:hover { background-color: #53b3c8 !important; background: #53b3c8 !important; color: #ffffff !important; } /* ===== Hero form: PNG-match refinements (gold CTA, rounded inputs, placeholders) ===== */ .hero-form-card input:not([type=submit]):not([type=reset]):not([type=button]) { border-radius: 6px !important; } .hero-form-card input::placeholder { color: #9aa7b2; opacity: 1; } .hero-form-card input[type=submit], .hero-form-card .zcwf_button { background: #fcc852 !important; color: #0d2b4c !important; } .hero-form-card input[type=submit]:hover, .hero-form-card .zcwf_button:hover { background: #0d2b4c !important; color: #ffffff !important; } .hero-form-card input[type=submit] { width: 100% !important; text-transform: uppercase !important; font-weight: 700 !important; letter-spacing: 1px !important; padding: 14px 24px !important; } /* ===== CTA color correction: Deep Navy per locked palette (NO gold/orange — Kacey) ===== */ .hero-form-card input[type=submit], .hero-form-card .zcwf_button { background: #0d2b4c !important; color: #ffffff !important; } .hero-form-card input[type=submit]:hover, .hero-form-card .zcwf_button:hover { background: #53b3c8 !important; color: #ffffff !important; } /* ===== Hero form: labels above inputs (all rows), per PNG ===== */ .hero-form-card ul.zpform-outer li { display: block !important; } .hero-form-card .zpform-label-container, .hero-form-card .zpform-field-container { display: block !important; width: 100% !important; max-width: 100% !important; } .hero-form-card .zpform-label-container { margin-bottom: 5px; } /* keep the hidden Lead Source row hidden (label-above rule un-hid it) */ .hero-form-card ul.zpform-outer li:has(select) { display: none !important; } /* ===== Hero form: compact sizing per PNG (2026-06-12) — refined 2026-06-18 PM per Kacey Jun 15 review (compact spacing, larger icon, +icon→heading gap, header divider). ===== */ .hero-form-card { max-width: 370px !important; margin-left: auto !important; margin-top: 20px !important; padding: 20px 24px !important; align-self: flex-start !important; } /* 2026-06-18 PM (Noah, after Kacey form pass): narrowed 410→370 to match render width; align-self:flex-start + margin-top:20px raises the form so its OUTER (white card) top sits on the same horizontal line as the eyebrow text "BUILT ON 30+ YEARS..." (eyebrow top y=135 = row top 115 + margin 20). Was vertically centered in the hero row, sitting ~95px lower. */ .hero-form-card ul.zpform-outer li { margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 6px !important; } .hero-form-card .zpform-label-container { margin-bottom: 2px !important; line-height: 1.1 !important; } .hero-form-card label { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 1px !important; color: #0d2b4c !important; line-height: 1.1 !important; margin: 0 !important; padding: 0 !important; display: inline-block !important; } /* Placeholder color/weight: previously rgba(255,255,255,0.5) so the placeholder text was invisible on the white form bg. Set to a muted Deep Navy (40% alpha) with normal weight so placeholders read as the render's softer hint text. */ .hero-form-card input::placeholder { color: rgba(13,43,76,0.40) !important; opacity: 1 !important; font-weight: 400 !important; } .hero-form-card input::-webkit-input-placeholder { color: rgba(13,43,76,0.40) !important; opacity: 1 !important; font-weight: 400 !important; } .hero-form-card input:not([type=submit]):not([type=reset]):not([type=button]) { padding: 9px 12px !important; font-size: 14px !important; } .hero-form-card input[type=submit] { padding: 12px 20px !important; font-size: 13px !important; margin-top: 10px !important; } .hero-form-card .zpform-container.zpform-topspace { margin-top: 6px !important; } /* Header: larger icon, more icon→heading gap, subtle divider beneath header — Kacey 2026-06-15 */ #hfc-head { gap: 18px !important; margin-bottom: 14px !important; padding-bottom: 14px !important; border-bottom: 1px solid rgba(13,43,76,0.15) !important; } #hfc-head .hfc-icon { width: 64px !important; height: 64px !important; } #hfc-head .hfc-icon svg, #hfc-head .hfc-icon img { width: 32px !important; height: 32px !important; } #hfc-head .hfc-title { font-size: 19px !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } #hfc-head .hfc-sub { font-size: 13px !important; } #hfc-note { margin-top: 8px !important; } /* ===== FOOTER (theme-footer-area) — Deep Navy premium, spec Section 14 ===== */ .theme-footer-area { background: #001931 !important; padding: 7px 0 26px !important; } /* 2026-06-17: darkened from #0d2b4c -> #001931 to match refinedFooter.png render (Design Standards palette specifies #0d2b4c — render is darker; pending Kacey confirmation that the footer is intentionally deeper than the brand Deep Navy). 2026-06-19: padding-top 56 -> 14 -> 7 (Noah: gap between footer section top edge and the top horizontal divider line was too wide; reduced ~75%, then halved again). */ .theme-footer-area, .theme-footer-area p, .theme-footer-area span, .theme-footer-area li { color: #aab6c2; font-family: 'Source Sans 3', sans-serif; } /* Column section headings (placed as H2) -> small uppercase labels. Phase B 2026-06-17: Oswald -> Montserrat SemiBold 600 per Design Standards. 2026-06-17 added white-space:nowrap so headings stay single-line per render. */ .theme-footer-area h2 { color: #ffffff !important; font-family: 'Montserrat', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 2px !important; line-height: 1.3 !important; margin: 0 0 16px !important; white-space: nowrap !important; } /* Column 1 contact lines placed as H4 (phone, etc.) -> normal body weight */ .theme-footer-area h4 { color: #ffffff !important; font-size: 15px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 0 6px !important; } /* Link / text items in columns */ .theme-footer-area a, .theme-footer-area .zpcol span { color: #aab6c2 !important; font-size: 15px !important; line-height: 2.0; text-decoration: none; transition: color .15s ease; } .theme-footer-area a:hover { color: #ffffff !important; } /* Column 1 overview blurb */ .theme-footer-area p { font-size: 15px; line-height: 1.7; } /* Footer logo */ .theme-footer-area img:not(.custom-icon) { width: 160px !important; height: auto !important; margin-bottom: 14px; } /* ===== RENDER-FIDELITY PASS (Kacey, Jun 11) ===== */ /* Hero: constrain content to centered fixed width (was too wide/stretched) */ .zpsection:has(.hero-form-card) .zpcontainer { max-width: 1160px !important; margin-left: auto !important; margin-right: auto !important; } /* Hero: tighten vertical spacing (was 97/99px) */ .zpsection:has(.hero-form-card) { padding-top: 50px !important; padding-bottom: 50px !important; position: relative; } /* Hero: navy gradient overlay REMOVED 2026-06-17 — gradient is now baked into the approved hero image, overlay was double-darkening */ .zpsection:has(.hero-form-card) > * { position: relative; z-index: 1; } /* Hero H1: substantially larger */ .zpsection:has(.hero-form-card) h1 { font-size: 75px !important; line-height: 1.02 !important; } /* Hero trust indicators CSS REMOVED 2026-06-17 — turned over to builder controls (Noah) */ /* Navigation: Atlantic-blue underline on hover (scrap blue background) */ .theme-header .theme-menu a:hover, .theme-header .theme-menu li:hover > a { background: transparent !important; color: #0d2b4c !important; border-bottom: 2px solid #53b3c8 !important; } /* Reserve underline space in the default state so hover/active no longer shifts the line by 2px (Kacey 2026-06-15: "underline space should exist in both default and hover states"). Excludes the CTA pill (.menu-highlight-primary) which has its own border styling above. Underline is on .theme-menu-name (the text span) — NOT on the — so the line matches the TEXT width only, not the link's full width (which includes a-padding and the dropdown chevron). */ .theme-header .theme-menu > ul > li:not(.menu-highlight-primary) > a { border-bottom: 0 !important; } .theme-header .theme-menu > ul > li:not(.menu-highlight-primary) > a .theme-menu-name { border-bottom: 2px solid transparent !important; display: inline-block !important; line-height: 1.2 !important; padding-bottom: 2px !important; } /* Hover + active overrides — color the .theme-menu-name's bottom border Atlantic Blue. */ .theme-header .theme-menu > ul > li:not(.menu-highlight-primary):hover > a .theme-menu-name, .theme-header .theme-menu > ul > li:not(.menu-highlight-primary) > a:hover .theme-menu-name, .theme-header .theme-menu > ul > li.theme-menu-selected:not(.menu-highlight-primary) > a .theme-menu-name { border-bottom-color: #53b3c8 !important; } /* Also strip the old -level hover and active borders so they don't draw a second full-width line under the text-width line. */ .theme-header .theme-menu > ul > li:not(.menu-highlight-primary):hover > a, .theme-header .theme-menu > ul > li:not(.menu-highlight-primary) > a:hover, .theme-header .theme-menu > ul > li.theme-menu-selected:not(.menu-highlight-primary) > a { border-bottom: 0 !important; background: transparent !important; color: #0d2b4c !important; } /* Equal-spacing flex rule REMOVED 2026-06-19 — it made the menu wider than Zoho's responsive breakpoint and triggered Zoho's "More..." collapse, hiding the CTA. Spacing is now handled by Zoho's native layout (looks visually uniform in practice); the "More" collapse itself is disabled by the JS hoist in HeaderCode.txt. */ /* Sub-menu (dropdown) items: same underline-reserve pattern as parent, applied to the inner text span .theme-menu-content (Kacey 2026-06-21: "child-level dropdown items still shift slightly on rollover"). The generic .theme-menu a:hover rule above paints a 2px border-bottom on hover — without reserving 2px in the default state of sub-menu links, each hovered item bumps 2px and shifts the items below it. Strip the -level border in all three states (overrides the generic rule), then reserve transparent 2px on the inner span, then color it Atlantic Blue on hover/selected. */ .theme-header .theme-menu .theme-sub-menu > li > a, .theme-header .theme-menu .theme-sub-menu > li:hover > a, .theme-header .theme-menu .theme-sub-menu > li > a:hover, .theme-header .theme-menu .theme-sub-menu > li.theme-menu-selected > a { border-bottom: 0 !important; } .theme-header .theme-menu .theme-sub-menu > li > a .theme-menu-content { display: inline-block !important; border-bottom: 2px solid transparent !important; line-height: 1.2 !important; padding-bottom: 2px !important; } .theme-header .theme-menu .theme-sub-menu > li:hover > a .theme-menu-content, .theme-header .theme-menu .theme-sub-menu > li > a:hover .theme-menu-content, .theme-header .theme-menu .theme-sub-menu > li.theme-menu-selected > a .theme-menu-content { border-bottom-color: #53b3c8 !important; } /* Navigation font weight 400 -> 600 (Design Standards doc: Montserrat SemiBold for Navigation; Kacey 2026-06-15 Typography section: "Increase navigation font weight"). Targets top-level nav links + their inner text spans; excludes the CTA pill. */ .theme-header .theme-menu > ul > li:not(.menu-highlight-primary) > a, .theme-header .theme-menu > ul > li:not(.menu-highlight-primary) > a * { font-weight: 600 !important; } /* Navigation: larger logo */ .theme-header img { height: 90px !important; width: auto !important; } /* Hero form header: enlarge house icon (left-aligned layout set in Header Code) */ #hfc-head .hfc-icon { width: 56px !important; height: 56px !important; } #hfc-head .hfc-icon svg { width: 28px !important; height: 28px !important; } #hfc-head { text-align: left !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 14px !important; } /* Form submit button: GOLD bg, navy text, heavier (Kacey Jun 11 — reverses no-orange) */ .hero-form-card input[type=submit], .hero-form-card .zcwf_button { background: #fcc852 !important; color: #0d2b4c !important; font-weight: 800 !important; } .hero-form-card input[type=submit]:hover, .hero-form-card .zcwf_button:hover { background: #fcc852 !important; color: #0d2b4c !important; } /* ===== Section-4 trust band ("PROUDLY SERVING") ===== */ .s4-trust { background: #0d2b4c !important; } .s4-trust, .s4-trust p, .s4-trust span { color: #ffffff !important; } /* Heading line with flanking Atlantic-blue dividers */ .s4-heading { display: flex !important; align-items: center; justify-content: center; gap: 24px; flex-wrap: nowrap; margin: 0; } .s4-heading::before, .s4-heading::after { content: ""; flex: 0 0 auto; width: 90px; height: 2px; background: #53b3c8; } .s4-heading, .s4-heading span { font-family: 'Oswald', sans-serif !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 2px !important; font-size: 20px !important; white-space: nowrap; } /* ===== Section-4 heading: match render (cyan text, lighter, thin muted dividers) ===== */ .s4-trust .s4-heading, .s4-trust .s4-heading span { color: #53b3c8 !important; font-family: 'Source Sans 3', sans-serif !important; font-weight: 300 !important; letter-spacing: 4px !important; font-size: 18px !important; } .s4-heading::before, .s4-heading::after { width: 110px !important; /* 70 -> 110 per Kacey 2026-06-15 "lengthen the divider lines slightly" */ height: 2px !important; background: #53b3c8 !important; /* off-white -> Atlantic Blue per Kacey 2026-06-15 "change the divider lines to Atlantic blue" */ } /* ===== Section-4 item icons (left of each, per Kacey email) — icon size bumped 18->24 per Kacey 2026-06-15 "slightly larger" ===== 2026-08-03: all five data-URIs REPLACED with the exact footer-strip artwork (Assets/Footer Icons/ftr-trst-*.svg, titles stripped, fixed w/h dropped, native viewBoxes kept) per Kacey's icon-consistency item — the homepage band under the hero and the footer trust strip now render IDENTICAL glyphs (was: generic award/shield/wrench/pin set). ic-storm updated too but that item should be REMOVED from the band in the builder (footer already dropped it). Backup: archive/CustomCSS_BACKUP_2026-08-03_1850_pre-s4-icon-swap.txt */ .s4-item { display:flex !important; align-items:center; justify-content:center; gap:10px; } .s4-item::before { content:""; flex:0 0 auto; width:24px; height:24px; background-repeat:no-repeat; background-position:center; background-size:contain; } .ic-heritage::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2034%2044%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%202.5%20C13%205%208%206.5%204%206.5%20L4%2020%20C4%2031%2010%2038%2017%2041.5%20C24%2038%2030%2031%2030%2020%20L30%206.5%20C26%206.5%2021%205%2017%202.5%20Z%22%2F%3E%3Cpath%20d%3D%22M10.5%2021.5%20L15%2026%20L24%2016%22%2F%3E%3C%2Fsvg%3E"); } .ic-licensed::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2044%2056%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11.5%2032%20L8%2053%20L13%2049%20L18%2053%20L21%2034%20Z%22%2F%3E%3Cpath%20d%3D%22M32.5%2032%20L36%2053%20L31%2049%20L26%2053%20L23%2034%20Z%22%2F%3E%3Cpath%20d%3D%22M%2022%207.3%20Q%2026.87%204.4%2029.41%209.47%20Q%2035.07%209.67%2034.46%2015.31%20Q%2039.12%2018.54%2035.56%2022.95%20Q%2037.74%2028.19%2032.35%2029.97%20Q%2031.35%2035.55%2025.86%2034.15%20Q%2022%2038.3%2018.14%2034.15%20Q%2012.65%2035.55%2011.65%2029.97%20Q%206.26%2028.19%208.44%2022.95%20Q%204.88%2018.54%209.54%2015.31%20Q%208.93%209.67%2014.59%209.47%20Q%2017.13%204.4%2022%207.3%20Z%22%2F%3E%3C%2Fsvg%3E"); } .ic-roof::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2044%2044%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2022%20L21%205%20L31%2013.9%20L31%206.5%20L35%206.5%20L35%2017.5%20L40%2022%20L40%2039%20L4%2039%20Z%22%2F%3E%3Cpath%20d%3D%22M13.5%2020%20L21%2013%20L28.5%2020%22%2F%3E%3Cpath%20d%3D%22M18%2039%20L18%2027%20L26%2027%20L26%2039%22%2F%3E%3C%2Fsvg%3E"); } .ic-storm::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2044%2047%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2031%20C%207%2031%204%2027.5%204%2023.5%20C%204%2019.5%207%2016.5%2011%2016.5%20C%2011%2010.5%2017.5%206.5%2023.5%208.5%20C%2027%205.5%2034%207.5%2035%2013.5%20C%2038.5%2014.5%2040%2017.5%2040%2021.5%20C%2040%2026.5%2036%2031%2031%2031%20Z%22%2F%3E%3Cpath%20d%3D%22M24%2015%20L18%2028%20L23%2028%20L19%2044%22%2F%3E%3C%2Fsvg%3E"); } .ic-serving::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2045%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2043%20C%2016%2043%2029.5%2028%2029.5%2015.5%20A%2013.5%2013.5%200%201%200%202.5%2015.5%20C%202.5%2028%2016%2043%2016%2043%20Z%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2215.5%22%20r%3D%226%22%2F%3E%3C%2Fsvg%3E"); } /* ===== Section-4 items: single-line fit (solution #1) — font-size 12->14 per Kacey 2026-06-15 "slightly larger text" ===== */ .s4-item, .s4-item p, .s4-item span { white-space: nowrap !important; font-size: 14px !important; letter-spacing: 0.8px !important; } /* Section-4 navy band — symmetric padding to balance the bottom-weighted feel Kacey flagged 2026-06-15 ("less padding beneath the icon row than above the heading"). 16/16 keeps the heading + items centered in the band while tightening the gap below the hero (Noah 2026-06-19; 32/32 felt too tall). The zero margin-top below cancels Zoho's default 20px on .zpelem-heading inside this section — without it the visible gap above the heading is 36px (16 padding + 20 wrapper margin) vs 16px below items, making the section look top-heavy. With margin zeroed: 16 above, 16 below = truly centered. */ .s4-trust { padding-top: 16px !important; padding-bottom: 16px !important; } .s4-trust .zpelem-heading { margin-top: 0 !important; } /* ===== KERNING PASS + Section-4 heading weight (Jun 13; clamp added 2026-06-23) ===== */ /* Section-4 heading: weight 600, plus FLUID letter-spacing and font-size via clamp() so the long "PROUDLY SERVING HOMEOWNERS & BUSINESSES" text breathes correctly across phone -> desktop without overflowing the narrow viewport at 5px letter-spacing. Desktop result unchanged (18px / 5px ls). */ .s4-trust .s4-heading, .s4-trust .s4-heading span { font-weight: 600 !important; font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem) !important; letter-spacing: clamp(2px, 0.5vw, 5px) !important; } /* Top trust bar: wider kerning (Kacey: too tight) */ #trustbar-4b .tb-left span { letter-spacing: 3px !important; } /* Hero trust indicators letter-spacing REMOVED 2026-06-17 — turned over to builder controls (Noah) */ /* ===== Active (current-page) menu item: underline, not pill (match render) ===== */ .theme-header .theme-menu-selected > a, .theme-header li.theme-menu-selected > a { background: transparent !important; color: #0d2b4c !important; border-radius: 0 !important; border-bottom: 2px solid #53b3c8 !important; padding-left: 4px !important; padding-right: 4px !important; } /* ===== Footer layout fix (Jun 13): even full-width columns + 2-col cities ===== */ .theme-footer-area [class*="zprow"]:has(.foot-areas) { display: flex !important; flex-wrap: wrap; justify-content: space-between; align-items: stretch; /* 2026-06-17: was flex-start; stretch so all columns equal row height -> vertical dividers run full length */ gap: 30px; } .theme-footer-area [class*="zprow"]:has(.foot-areas) > [class*="zpcol"] { flex: 1 1 0 !important; max-width: none !important; width: auto !important; } .theme-footer-area [class*="zprow"]:has(.foot-areas) > .zpcol-md-3 { flex: 1.6 1 0 !important; } /* Service Areas: two-column city list */ .foot-areas { column-count: 2; column-gap: 26px; } /* ===== Footer corrections (Jun 13): tighten item spacing, fix Service Areas ===== */ /* Service Areas is a single comma-separated text block — keep it one column (no mid-word splitting) */ .foot-areas { column-count: 1 !important; } /* give the Service Areas column extra width so the city text reads cleanly */ .theme-footer-area [class*="zprow"]:has(.foot-areas) > [class*="zpcol"]:has(.foot-areas) { flex: 1.7 1 0 !important; } /* Footer custom-icon size (overrides Zoho's hard-coded width/height=160 img attrs) */ .theme-footer-area img.custom-icon { width: 24px !important; height: 24px !important; } /* Hero "Quality Workmanship" house icon nudge REMOVED 2026-06-17 — turned over to builder controls (Noah) */ /* ===== About page headings — scoped to .about-page only (brand Oswald, navy #0d2b4c). Added 2026-06-13. Does NOT affect other pages. ===== */ .about-page h1{font-family:'Oswald',sans-serif!important;font-weight:200!important;font-size:62px!important;text-transform:uppercase!important;line-height:1.1!important;color:#0d2b4c!important;} .about-page h2{font-family:'Oswald',sans-serif!important;font-weight:400!important;font-size:44px!important;text-transform:uppercase!important;line-height:1.1!important;color:#0d2b4c!important;} .about-page h3{font-family:'Oswald',sans-serif!important;font-weight:400!important;font-size:22px!important;text-transform:none!important;line-height:1.2!important;color:#0d2b4c!important;} .about-page h4{font-family:'Oswald',sans-serif!important;font-weight:400!important;font-size:18px!important;text-transform:uppercase!important;line-height:1.25!important;color:#0d2b4c!important;} .about-page h5{font-family:'Oswald',sans-serif!important;font-weight:400!important;font-size:16px!important;text-transform:none!important;line-height:1.25!important;color:#0d2b4c!important;} .about-page h6{font-family:'Oswald',sans-serif!important;font-weight:200!important;font-size:14px!important;text-transform:none!important;line-height:1.25!important;color:#0d2b4c!important;} /* === Hero typography — CSS-locked + fluid via clamp() (2026-06-23) === Single source of truth: CSS. Previously the H1 rule was gated by :not(.font-free) so Noah could swap fonts via a Custom class in the builder. Once Rubik was the agreed font that escape stopped helping and started confusing the implementation (builder font menu fighting CSS). The H1 rule below locks family, weight, and a fluid size — no class-name gate, so the builder's font menu, per-element size, and the wrapper's `font-free` class no longer matter for the H1. h1 + h1 * is used so the rule beats Zoho's per-span size overrides that the builder writes inside the

. `clamp()` makes the H1 scale smoothly from ~30px on a 360px phone to 75px on a desktop without breakpoint stair-steps. Same treatment applied to H2 and hero supporting copy so the whole hero typography is CSS-owned and responsive. */ .zpsection:has(.hero-form-card) .zpelem-heading h1, .zpsection:has(.hero-form-card) .zpelem-heading h1 * { font-family: 'Rubik', sans-serif !important; font-weight: 600 !important; font-size: clamp(1.875rem, 5vw + 0.5rem, 3.9375rem) !important; line-height: 1.05 !important; /* clamp curve: 30px (floor, ≤360px viewport) -> 46px @768 -> 59px @1024 -> 63px (cap, ≥1100px viewports). Cap is 63px to match the AS-RENDERED size that Kacey signed off on (the H1 wrapper was 75px but Zoho's builder per-span sizing override brought the visible text to 63px). Now CSS-locked so the visible text stays at 63px on desktop and scales down smoothly to 30px on a 360px phone. */ } /* 2026-07-02: MID-DESKTOP BAND FIX — at 992–1300px windows the base clamp above still yields ~58–63px while the hero LEFT column shrinks (form card is fixed 370px), so "CONSTRUCTION" broke mid-word ("CONSTRUCTIO / N"). This band-scoped rule scales the homepage H1 40px@992 → 63px@1300 (meets the base curve's 63px cap at 1300, so no jump). :not(.svc-h1) excludes every service/About/Contact hero H1 (they're sized by the svc-h1 rule, clamp(28px,3.6vw,45px), which already fits at these widths). Specificity 0,4,1 beats the base rule's 0,3,1 inside the band only. Desktop-only (≥992) so the existing :has() usage is safe (iOS phones never hit this band). */ @media (min-width:992px) and (max-width:1300px){ .zpsection:has(.hero-form-card) .zpelem-heading:not(.svc-h1) h1, .zpsection:has(.hero-form-card) .zpelem-heading:not(.svc-h1) h1 *{ font-size: clamp(2.5rem, 7.4vw - 33.5px, 3.9375rem) !important; } } .zpsection:has(.hero-form-card) h2, .zpsection:has(.hero-form-card) h2 *{font-family:'Montserrat',sans-serif!important;font-weight:700!important;font-size:clamp(1.375rem, 1.8vw + 0.75rem, 1.875rem)!important;line-height:1.15!important;letter-spacing:.3px!important;color:#ffffff!important;} .zpsection:has(.hero-form-card) .zpelem-text:not(.hero-eyebrow), .zpsection:has(.hero-form-card) .zpelem-text:not(.hero-eyebrow) *{font-family:'Montserrat',sans-serif!important;font-weight:400!important;font-size:clamp(0.9375rem, 0.6vw + 0.75rem, 1.25rem)!important;color:#ffffff!important;} .hero-eyebrow, .hero-eyebrow *{font-family:'Montserrat',sans-serif!important;font-weight:600!important;color:#53B3C8!important;} /* Hero trust indicators typography + icon-size CSS REMOVED 2026-06-17 — turned over to builder controls (Noah) */ /* === Hero LEFT-COLUMN localized scrim (2026-06-17) === Travels with the content (not the image), so H1 / paragraph / trust icons stay legible regardless of where cover-positioned bg image lands across viewport widths. Adjustable: alpha values (0.55 / 0.40 / 0.10) — raise/lower for more/less darkening. */ .zpsection:has(.hero-form-card) .zpcolumn:has(h1){position:relative!important;} .zpsection:has(.hero-form-card) .zpcolumn:has(h1)::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(to right, rgba(13,43,76,0.55) 0%, rgba(13,43,76,0.40) 60%, rgba(13,43,76,0.10) 100%); } .zpsection:has(.hero-form-card) .zpcolumn:has(h1) > *{position:relative;z-index:1;} /* ===== FOOTER Phase A (note 2026-06-17) — heading underline + white body copy + Atlantic-blue contact icons ===== Note: Phase A was lost once when an upstream comment block was left unclosed and the comment-closer (slash-star) swallowed Phase A + Phase C as a single mega-comment until a later comment-closer ended it. The actual restored Phase A rules now live further down in this file (search "Phase A (RESTORED AGAIN"). Do not place comment-close sequences inside comment text. */ /* ===== FOOTER Top CTA Strip — trust items + button polish (2026-06-17) ===== */ /* Cancel the Phase A custom-icon recolor filter inside the CTA strip (icons stay white per render) */ .foot-cta-strip img.custom-icon, .foot-cta-strip img { filter: none !important; } /* Trust icon sizing per render */ .foot-cta-strip img { width: 36px !important; height: 36px !important; margin-bottom: 8px !important; } /* Trust item label: Montserrat + size + tracking + uppercase + 2-line wrap allowed */ .foot-cta-strip h4, .foot-cta-strip .zpicon-heading { font-family: 'Montserrat', sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; text-align: center !important; line-height: 1.3 !important; color: #ffffff !important; } /* Center the icon + heading vertically as a stack inside each cell */ .foot-cta-strip [class*="zpelem"]:has(> img), .foot-cta-strip [class*="zpelem-iconheader"], .foot-cta-strip [class*="zpelem"]:has(h4.zpicon-heading) { text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; } /* Nested trust row: redistribute 5 cells across the full width */ .foot-cta-strip [class*="zprow"] { justify-content: space-between !important; align-items: center !important; gap: 8px !important; } .foot-cta-strip [class*="zprow"] > [class*="zpcol-md-2"] { flex: 1 1 0 !important; max-width: none !important; } /* Button typography: Montserrat */ .foot-cta-strip a.zpbutton { font-family: 'Montserrat', sans-serif !important; } /* Outline button height fix: box-sizing so the 1px white border doesn't add 2px to the height */ .foot-cta-strip a.zpbutton-outline { box-sizing: border-box !important; } /* ===== FOOTER Top CTA Strip — trust label width + wrap fix (2026-06-17) ===== h4 was rendering at 73px wide inside a 127px cell (Zoho default constrains its width), forcing 4-5 line wrap. Force the h4 (and its parent wrappers) to full cell width and reduce letter-spacing slightly so longer labels (REPLACEMENT, SPECIALISTS) fit on the 2nd line. */ .foot-cta-strip h4, .foot-cta-strip .zpicon-heading, .foot-cta-strip [class*="zpelem-iconheader"] { width: 100% !important; max-width: 100% !important; } .foot-cta-strip h4, .foot-cta-strip .zpicon-heading { letter-spacing: 0.5px !important; } /* ===== FOOTER Top CTA Strip — fixes v2 (2026-06-17) ===== */ /* Buttons were wrapping: 236px Primary + 138px Outline + 10px gap = 384px > 350px container. Force no-wrap and tighten padding/font so both fit on one line. */ .foot-cta-strip .zpbutton-group-container { flex-wrap: nowrap !important; } .foot-cta-strip a.zpbutton { padding: 8px 16px !important; font-size: 13px !important; } /* Icon-heading widget structure: .zpicon-container is flex-row by default (icon LEFT of heading). Override to flex-column so icon sits ABOVE heading (matches render), and let the inner wrappers take the full cell width so the h4 has room to wrap to 2 lines instead of 3-4. */ .foot-cta-strip .zpicon-container { flex-direction: column !important; align-items: center !important; } .foot-cta-strip .zpelem-iconheading, .foot-cta-strip .zpicon-container { width: 100% !important; max-width: 100% !important; } /* ===== FOOTER Top CTA Strip — fixes v3 (2026-06-17) — REVERT vertical stack, restore icon-LEFT per render ===== v2 stacked icon ABOVE heading, which is wrong per refinedFooter.png — render shows icon LEFT, text RIGHT. Restore horizontal layout, shrink icon, force h4 to flex:1 so it takes the remaining cell width (was 73px in 127px cell, causing 3+ line wrap). */ .foot-cta-strip .zpicon-container { flex-direction: row !important; align-items: center !important; gap: 8px !important; } .foot-cta-strip h4.zpicon-heading { flex: 1 1 0 !important; text-align: left !important; width: auto !important; max-width: none !important; } .foot-cta-strip img { width: 26px !important; height: 26px !important; margin: 0 !important; flex: 0 0 26px !important; } /* ===== FOOTER Top CTA Strip — WORKING CSS v4 (2026-06-17), supersedes v1/v2/v3 above ===== Tested live via CSS injection on the published page until visual matched refinedFooter.png. Key insights: 1. Each cell has 15px L/R padding from Zoho default -> ate 30px of the 127px cell. Reduced to 2px each side -> ~123px usable. 2. Icon-container is flex-row by default (matches render: icon LEFT of heading). 3. h4 needs min-width:0 inside flex parent or it won't shrink below its content min-content, so flex:1 1 0 has no effect. 4. At 9px Montserrat 700 / 0px letter-spacing / 22px icon / 4px gap, all 5 labels fit in 2 lines (LICENSED & INSURED stays on 1 line — acceptable per render). The earlier rules above are mostly overridden by these but left in place for history. */ .foot-cta-strip [class*="zpelem-col"] { padding-left: 2px !important; padding-right: 2px !important; } .foot-cta-strip .zpicon-container { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 4px !important; width: 100% !important; } .foot-cta-strip .zpicon-container .zpicon { flex: 0 0 22px !important; min-width: 22px !important; } .foot-cta-strip .zpicon-container .zpicon img, .foot-cta-strip .zpicon-container .zpicon svg { width: 22px !important; height: 22px !important; filter: none !important; } .foot-cta-strip h4.zpicon-heading { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: none !important; text-align: left !important; font-family: 'Montserrat', sans-serif !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 0px !important; line-height: 1.25 !important; color: #ffffff !important; text-transform: uppercase !important; } .foot-cta-strip .zpelem-iconheading { width: 100% !important; } /* ===== FOOTER Phase A (RESTORED AGAIN 2026-06-17 18:32 CDT) — heading underline accents ===== These keep getting eaten when comment blocks above lose their closer (slash-star). Inlined here so future edits do not kill them. */ .theme-footer-area h2 { position: relative !important; padding-bottom: 14px !important; } .theme-footer-area h2::after { content: "" !important; position: absolute !important; left: 0 !important; bottom: 0 !important; width: 32px !important; height: 2px !important; background: #53B3C8 !important; /* Atlantic Blue — Noah 2026-06-18 PM: reverted from off-white back to Atlantic Blue to match the heading text color. Kacey has not written a directive switching to the render's brighter blue, so staying on Atlantic Blue from the Design Standards palette. */ } /* ===== FOOTER Phase C (RESTORED AGAIN 2026-06-17 18:32 CDT) — vertical column dividers ===== Scoped to the row containing .foot-areas so it only hits the main columns row, not the top CTA strip or other rows. */ .theme-footer-area [class*="zprow"]:has(.foot-areas) > [class*="zpcol"]:not(:first-child) { position: relative !important; } .theme-footer-area [class*="zprow"]:has(.foot-areas) > [class*="zpcol"]:not(:first-child)::before { content: "" !important; position: absolute !important; left: -15px !important; top: 6px !important; bottom: 6px !important; width: 1px !important; background: rgba(255,255,255,0.3) !important; /* off-white per render (was #53B3C8); render+email+doc-footer-section say match render — flag palette line to Kacey. Noah 2026-06-18 */ } /* ===== FOOTER Top CTA Strip — icon alignment fix (2026-06-17 18:32 CDT) ===== Align icons to top so 1-line items (LICENSED & INSURED) and 2-line items (others) all show icons at the same y-position. */ .foot-cta-strip .zpicon-container { align-items: flex-start !important; } .foot-cta-strip h4.zpicon-heading { padding-top: 2px !important; } /* ===== FOOTER Top CTA Strip — WORKING CSS v5 (2026-06-17 18:42 CDT), supersedes v1-v4 above ===== Tested live via injection. Render-matching: 32px icons, 12px text, all 5 labels on 2 lines, icons top-aligned. Key: shrank outer buttons cell to 280px (was 380px md-4 default), widened trust cell to fill rest -> each trust cell 132px wide, enough room for 2-line wrap at 12px font. */ /* Reallocate outer split: smaller buttons cell, wider trust cell */ .foot-cta-strip > [class*="zpcol-md-4"] { flex: 0 0 280px !important; max-width: 280px !important; } .foot-cta-strip > [class*="zpcol-md-7"] { flex: 1 1 auto !important; max-width: none !important; } /* Compact buttons to fit 280px cell */ .foot-cta-strip a.zpbutton { padding: 8px 12px !important; font-size: 11px !important; letter-spacing: 0.3px !important; } .foot-cta-strip .zpbutton-group-container { gap: 6px !important; } /* Trust strip sizes */ .foot-cta-strip [class*="zpelem-col"] { padding-left: 0 !important; padding-right: 0 !important; } .foot-cta-strip .zpicon-container { align-items: flex-start !important; gap: 8px !important; } .foot-cta-strip .zpicon-container .zpicon { flex: 0 0 32px !important; min-width: 32px !important; } .foot-cta-strip .zpicon-container .zpicon img, .foot-cta-strip .zpicon-container .zpicon svg { width: 32px !important; height: 32px !important; filter: none !important; } .foot-cta-strip h4.zpicon-heading { font-size: 12px !important; letter-spacing: 0.3px !important; line-height: 1.3 !important; padding-top: 0 !important; } /* ===== FOOTER Top CTA Strip — WORKING CSS v6 (2026-06-17 18:52 CDT), supersedes v1-v5 above ===== Tested live via injection. All 5 trust items on 2 lines, buttons sized to render with SVG icons. The static LICENSED & INSURED label is forced to wrap via nth-child(3) max-width (style is 1st child so 3rd is 2nd item). Button cell widened to 480px to fit larger buttons (52px tall, 14px font, icons). */ .foot-cta-strip > [class*="zpcol-md-4"] { flex: 0 0 480px !important; max-width: 480px !important; } .foot-cta-strip > [class*="zpcol-md-7"] { flex: 1 1 auto !important; max-width: none !important; } /* Buttons */ .foot-cta-strip .zpbutton-group-container { gap: 14px !important; flex-wrap: nowrap !important; } .foot-cta-strip a.zpbutton { padding: 14px 26px !important; font-size: 14px !important; letter-spacing: 0.5px !important; min-height: 52px !important; box-sizing: border-box !important; font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; } .foot-cta-strip a.zpbutton-outline { padding: 13px 26px !important; } /* Primary button: right chevron SVG */ .foot-cta-strip a.zpbutton-type-primary::after { content: "" !important; display: inline-block !important; width: 16px !important; height: 16px !important; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-size: contain !important; background-position: center !important; margin-left: 10px !important; font-size: 0 !important; } /* Outline button (Call Now): left phone SVG */ .foot-cta-strip a.zpbutton-outline::before { content: "" !important; display: inline-block !important; width: 18px !important; height: 18px !important; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-size: contain !important; background-position: center !important; margin-right: 6px !important; font-size: 0 !important; } /* Trust strip cells: zero padding, large icons, 14px text on 2 lines */ .foot-cta-strip [class*="zpelem-col"] { padding-left: 0 !important; padding-right: 0 !important; } .foot-cta-strip .zpicon-container { flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 8px !important; width: 100% !important; } .foot-cta-strip .zpicon-container .zpicon { flex: 0 0 32px !important; min-width: 32px !important; } .foot-cta-strip .zpicon-container .zpicon img, .foot-cta-strip .zpicon-container .zpicon svg { width: 32px !important; height: 32px !important; filter: none !important; } .foot-cta-strip h4.zpicon-heading { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: none !important; text-align: left !important; font-family: 'Montserrat', sans-serif !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 1.2px !important; line-height: 1.3 !important; padding-top: 0 !important; color: #ffffff !important; text-transform: uppercase !important; } .foot-cta-strip .zpelem-iconheading { width: 100% !important; } /* LICENSED & INSURED (nth-child(3) — STYLE is 1st child, HERITAGE is 2nd) — force 2-line wrap with max-width */ .foot-cta-strip [class*="zprow"] > [class*="zpelem-col"]:nth-child(3) h4.zpicon-heading { max-width: 130px !important; } /* ===== FOOTER Top CTA Strip — WORKING CSS v7 (2026-06-17 19:00 CDT), supersedes v1-v6 above ===== v6 made buttons + trust wrap to separate rows because the outer .foot-cta-strip flex container had flex-wrap:wrap (Zoho default). This version forces nowrap and shrinks buttons cell to 400px so trust gets ~700px (5 items at ~140px each). */ .foot-cta-strip { flex-wrap: nowrap !important; } .foot-cta-strip > [class*="zpcol-md-4"] { flex: 0 0 400px !important; max-width: 400px !important; } .foot-cta-strip > [class*="zpcol-md-7"] { flex: 1 1 0 !important; max-width: none !important; min-width: 0 !important; } /* Buttons: 50px hard cap, Montserrat */ .foot-cta-strip .zpbutton-group-container { gap: 10px !important; flex-wrap: nowrap !important; } .foot-cta-strip a.zpbutton { padding: 14px 22px !important; font-size: 13px !important; letter-spacing: 0.5px !important; height: 50px !important; min-height: 50px !important; max-height: 50px !important; box-sizing: border-box !important; font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; } .foot-cta-strip a.zpbutton-outline { padding: 13px 22px !important; } .foot-cta-strip a.zpbutton-type-primary::after { content: "" !important; display: inline-block !important; width: 14px !important; height: 14px !important; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-size: contain !important; background-position: center !important; margin-left: 8px !important; font-size: 0 !important; } .foot-cta-strip a.zpbutton-outline::before { content: "" !important; display: inline-block !important; width: 16px !important; height: 16px !important; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-size: contain !important; background-position: center !important; margin-right: 6px !important; font-size: 0 !important; } /* Trust strip: 28px icons, 11px text */ .foot-cta-strip [class*="zpelem-col"] { padding-left: 0 !important; padding-right: 0 !important; } .foot-cta-strip .zpicon-container { flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 6px !important; width: 100% !important; } .foot-cta-strip .zpicon-container .zpicon { flex: 0 0 28px !important; min-width: 28px !important; } .foot-cta-strip .zpicon-container .zpicon img, .foot-cta-strip .zpicon-container .zpicon svg { width: 28px !important; height: 28px !important; filter: none !important; } .foot-cta-strip h4.zpicon-heading { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: none !important; text-align: left !important; font-family: 'Montserrat', sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; line-height: 1.3 !important; padding-top: 0 !important; color: #ffffff !important; text-transform: uppercase !important; } .foot-cta-strip .zpelem-iconheading { width: 100% !important; } /* LICENSED & INSURED (nth-child 3 — style is 1st) force 2-line wrap */ .foot-cta-strip [class*="zprow"] > [class*="zpelem-col"]:nth-child(3) h4.zpicon-heading { max-width: 90px !important; } /* ===== FOOTER Top CTA Strip — WORKING CSS v8 (2026-06-17 19:15 CDT), supersedes v1-v7 above ===== Final state after iteration: - Buttons + 5 trust items on same row (flex-wrap:nowrap) - All 5 trust labels on 2 lines with proper breaks (flex redistribution per nth-child) - HERITAGE label gets
inserted via JS in HeaderCode (force "30+ YEARS / ROOFING HERITAGE" break) - Button text white (override footer-wide grey) - Icon-heading widget vertical alignment fixed (icons at top) - Main column links no-wrap (matches render) The h4 max-width approach proved unreliable because "30+ YEARS ROOFING" and "ROOFING HERITAGE" are nearly same width. */ .foot-cta-strip { flex-wrap: nowrap !important; align-items: flex-start !important; } .foot-cta-strip > [class*="zpcol-md-4"] { flex: 0 0 400px !important; max-width: 400px !important; align-self: flex-start !important; } .foot-cta-strip > [class*="zpcol-md-7"] { flex: 1 1 0 !important; max-width: none !important; min-width: 0 !important; align-self: flex-start !important; } /* Trust cell flex distribution per item — HERITAGE gets more, others less */ .foot-cta-strip [class*="zprow"] > [class*="zpelem-col"]:nth-child(2) { flex: 1.35 1 0 !important; } .foot-cta-strip [class*="zprow"] > [class*="zpelem-col"]:nth-child(3) { flex: 0.75 1 0 !important; } .foot-cta-strip [class*="zprow"] > [class*="zpelem-col"]:nth-child(4) { flex: 0.9 1 0 !important; } .foot-cta-strip [class*="zprow"] > [class*="zpelem-col"]:nth-child(5) { flex: 0.9 1 0 !important; } .foot-cta-strip [class*="zprow"] > [class*="zpelem-col"]:nth-child(6) { flex: 1.1 1 0 !important; } /* Button text WHITE (override inherited grey) */ .foot-cta-strip a.zpbutton, .foot-cta-strip a.zpbutton *, .foot-cta-strip a.zpbutton span { color: #ffffff !important; } /* Trust row alignment - icons at top, all items same y */ .foot-cta-strip [class*="zprow"] { align-items: flex-start !important; } .foot-cta-strip [class*="zprow"] > [class*="zpelem-col"] { align-self: flex-start !important; padding-top: 0 !important; } .foot-cta-strip .zpelem-iconheading { margin-top: 0 !important; padding-top: 0 !important; } /* Main column links no-wrap so "Request Free Estimate" + "Storm Damage Restoration" stay single line per render */ .theme-footer-area [class*="zprow"]:has(.foot-areas) a { white-space: nowrap !important; } /* ===== FOOTER Top CTA Strip — v9 (2026-06-17 19:35 CDT): vertical alignment + top divider line ===== 1. Buttons and trust items now vertically center-aligned on the strip axis (was flex-start). 2. Top horizontal Atlantic-blue divider line added via ::before (replaces Noah's builder spacer element — Noah should remove that builder element). 3. Icon-container changed to align-items: center so icon centers with the 2-line text vertically. */ .foot-cta-strip { align-items: center !important; position: relative !important; padding-top: 20px !important; } .foot-cta-strip::before { content: "" !important; position: absolute !important; top: 0 !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: 100vw !important; max-width: none !important; height: 1px !important; background: rgba(255,255,255,0.3) !important; /* off-white per render; full viewport width 2026-06-18 PM (Noah) — was left:0 right:0 = 1140px content width */ } .foot-cta-strip > [class*="zpcol-md-4"] { align-self: center !important; } .foot-cta-strip > [class*="zpcol-md-7"] { align-self: center !important; } .foot-cta-strip [class*="zprow"] { align-items: center !important; } .foot-cta-strip [class*="zprow"] > [class*="zpelem-col"] { align-self: center !important; } .foot-cta-strip .zpicon-container { align-items: center !important; } /* ===== FOOTER Top CTA Strip — WORKING CSS v10 (restored 2026-06-18, verified vs live) — white-20% top/bottom strip lines (::before/::after); buttons+items on one center axis (zeroed a Zoho .zpelement margin-top:20px in the buttons cell); labels white 600. Trust-row sizing superseded by v11.3 below. Button color left Atlantic (render brighter — pending Kacey). ===== */ .foot-cta-strip { align-items: center !important; position: relative !important; padding-top: 20px !important; padding-bottom: 20px !important; } .foot-cta-strip::before { background: rgba(255,255,255,0.20) !important; top: 0 !important; } .foot-cta-strip::after { content: "" !important; position: absolute !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: 100vw !important; max-width: none !important; bottom: 0 !important; height: 1px !important; background: rgba(255,255,255,0.20) !important; } /* 2026-06-18 PM (Noah): top + bottom CTA-strip lines extended to 100vw (was 1140px content width). */ .foot-cta-strip > [class*="zpcol"] { align-self: center !important; } .foot-cta-strip > [class*="zpcol-md-4"] { display: flex !important; align-items: center !important; } .foot-cta-strip > [class*="zpcol-md-4"] .zpelement { margin-top: 0 !important; } .foot-cta-strip [class*="zprow"] { align-items: center !important; } .foot-cta-strip [class*="zprow"] > [class*="zpelem-col"] { align-self: center !important; position: relative !important; } .foot-cta-strip h4.zpicon-heading, .foot-cta-strip h4.zpicon-heading * { color: #ffffff !important; font-weight: 600 !important; font-size: 11px !important; letter-spacing: 0.4px !important; line-height: 1.35 !important; } .foot-cta-strip .zpicon-container { gap: 8px !important; align-items: center !important; } .foot-cta-strip .zpicon-container .zpicon { flex: 0 0 28px !important; min-width: 28px !important; } .foot-cta-strip .zpicon-container .zpicon img, .foot-cta-strip .zpicon-container .zpicon svg { width: 28px !important; height: 28px !important; } .foot-cta-strip [class*="zprow"] > [class*="zpelem-col"]:has(.zpicon-container)::before { content: "" !important; position: absolute !important; left: 0 !important; top: 50% !important; transform: translateY(-50%) !important; height: 42px !important; width: 1px !important; background: rgba(255,255,255,0.20) !important; } /* ===== FOOTER Top CTA Strip — v11.6 (2026-06-18, verified vs live + render) — FULL-WIDTH spread (justify-content:space-evenly, margin:0); icons 40px (render's ~0.83x button-height ratio; was 32); 2-line labels vertically centered with the icon (h4 align-self:center + margin:0 + container align-items:center) with airy line-height 1.8 to match the render's ~20px line spacing (set in the Oswald block below; was 1.25); the button-group gap was widened to 22px (rule above) to align the inter-button gap with the col1|col2 divider, which narrows the trust cell to ~22px item gaps, so the ::before dividers are re-centered at left:-11px (height 42px); label Oswald weight 400 + letter-spacing 1.3px. Supersedes v11.3/v11.4/v11.5. icon-text gap 4 / font 11px. ===== */ .foot-cta-strip > [class*="zpcol-md-4"] { flex: 0 0 auto !important; max-width: none !important; width: auto !important; } /* v11.6 (2026-06-18): button-group gap 22px (was 10) so the gap between the two buttons widens and its center lands at x≈348 — directly under the col1|col2 vertical divider below. Pushes Call Now + the trust cell right ~12px. */ .foot-cta-strip .zpbutton-group-container { flex-wrap: nowrap !important; gap: 22px !important; } .foot-cta-strip a.zpbutton { white-space: nowrap !important; } .foot-cta-strip > [class*="zpcol-md-7"] { flex: 1 1 0 !important; max-width: none !important; min-width: 0 !important; } .foot-cta-strip [class*="zprow"] { width: 100% !important; gap: 0 !important; align-items: center !important; justify-content: space-evenly !important; flex-wrap: nowrap !important; } .foot-cta-strip [class*="zprow"] > [class*="zpelem-col"]:has(.zpicon-container) { flex: 0 0 auto !important; width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; position: relative !important; } .foot-cta-strip .zpicon-container { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center !important; gap: 4px !important; width: auto !important; } .foot-cta-strip .zpicon-container .zpicon { flex: 0 0 40px !important; min-width: 40px !important; } .foot-cta-strip .zpicon-container .zpicon img, .foot-cta-strip .zpicon-container .zpicon svg { width: 40px !important; height: 40px !important; } .foot-cta-strip h4.zpicon-heading { flex: 0 0 auto !important; width: auto !important; max-width: none !important; text-align: left !important; color: #ffffff !important; font-weight: 600 !important; font-size: 11px !important; letter-spacing: 0px !important; line-height: 1.25 !important; white-space: normal !important; padding: 0 !important; align-self: center !important; margin: 0 !important; } .foot-cta-strip h4.zpicon-heading * { color: #ffffff !important; font-weight: 600 !important; font-size: 11px !important; } .foot-cta-strip [class*="zprow"] > [class*="zpelem-col"]:has(.zpicon-container)::before { content: "" !important; position: absolute !important; left: -11px !important; top: 50% !important; transform: translateY(-50%) !important; width: 1px !important; height: 42px !important; background: rgba(255,255,255,0.25) !important; } /* ===== FOOTER COLUMNS + LABEL FONT (2026-06-18) ===== */ /* Column headings -> Atlantic blue + underline accent back UNDER the heading. (Fixes the stray blue lines at column bottoms too: the h2 was position:static so its absolute ::after underline anchored to the column and dropped to its bottom; position:relative re-anchors it.) */ .theme-footer-area h2 { color: #53b3c8 !important; position: relative !important; padding-bottom: 12px !important; } /* heading TEXT blue too: the text sits in a child that inherited footer gray #aab6c2, so the h2 color alone left the visible text gray while only the ::after underline was blue. Force descendants to Atlantic blue so heading text matches its underline (Noah 2026-06-18; render shows blue headings — overrides the Design doc's "white" footer headings). */ .theme-footer-area h2 * { color: #53b3c8 !important; } /* Trust-strip labels -> Oswald (condensed) 500: lighter + taller. Oswald already loaded in project. (Comes after v11.3 so it overrides the Montserrat there.) */ .foot-cta-strip h4.zpicon-heading, .foot-cta-strip h4.zpicon-heading * { font-family: 'Oswald', sans-serif !important; font-weight: 400 !important; letter-spacing: 1.3px !important; line-height: 1.8 !important; } /* Service Areas + Company column values: first content had 40px top margin vs 20px on the others; normalize each heading-column's first item to 20px so all columns' values start on the same line. (Overrides builder spacing for those elements.) */ .theme-footer-area [class*="zprow"]:has(.foot-areas) > [class*="zpcol"]:has(h2) > div:nth-of-type(2) { margin-top: 20px !important; } /* Raise the column heading block to the top of the vertical dividers: each column's ::before divider starts 6px below the column top, but the .zpelem-heading carried a 20px builder margin-top, leaving the heading ~14px below the divider top. Set it to 6px so the heading text sits even with the divider tops, per the render (Noah 2026-06-18). */ .theme-footer-area [class*="zprow"]:has(.foot-areas) [class*="zpcol"] .zpelem-heading { margin-top: 6px !important; } /* ===== FOOTER COLUMN-1 CONTACT ITEMS — inline icon+text (2026-06-18) ===== The email (info@4broofing.com) is longer than the phone/location values and was wrapping below its envelope icon (icon on line 1, address on line 2). Force the column contact .zpicon-container to never wrap and grow to fit its content, and keep the value text on a single line — so the email reads icon-BESIDE-text like phone/location and the render. Scoped to the columns row (:has(.foot-areas)) so the top trust strip is NOT affected. */ .theme-footer-area [class*="zprow"]:has(.foot-areas) .zpicon-container { flex-wrap: nowrap !important; width: auto !important; max-width: none !important; } .theme-footer-area [class*="zprow"]:has(.foot-areas) .zpicon-container .zpicon-heading, .theme-footer-area [class*="zprow"]:has(.foot-areas) .zpicon-container h4, .theme-footer-area [class*="zprow"]:has(.foot-areas) .zpicon-container p, .theme-footer-area [class*="zprow"]:has(.foot-areas) .zpicon-container a, .theme-footer-area [class*="zprow"]:has(.foot-areas) .zpicon-container span { white-space: nowrap !important; } /* ===== FOOTER Bottom Utility Strip (.foot-util-strip) — 2026-06-18 — copyright (left) + vertical divider + 4 trust badges (icon-beside-label), off-white, social omitted per Noah. Matches render. Grid: copyright = zpcol-md-4, each badge = zpcol-md-2. Reduced col padding + 11px label + flex-wrap:nowrap so the longer labels fit beside the icon (instead of wrapping below). ===== */ /* hide the native authority divider elements in the strip's column (the render's lines are drawn below via border-top instead — the native ones rendered short / mis-ordered below the strip) */ [class*="zpcol"]:has(> .foot-util-strip) > .zpelem-divider { display: none !important; } /* off-white line ABOVE the supporting paragraph (full content width) */ .zpelem-text:has(+ .foot-util-strip) { border-top: 0 !important; position: relative !important; margin-top: 16px !important; margin-left: -15px !important; margin-right: -15px !important; padding-top: 22px !important; } .zpelem-text:has(+ .foot-util-strip)::before { content: "" !important; position: absolute !important; top: 0 !important; left: 50% !important; transform: translateX(-50%) !important; width: 100vw !important; max-width: none !important; height: 1px !important; background: rgba(255,255,255,0.3) !important; pointer-events: none !important; } /* 2026-06-18 PM (Noah): line above authority paragraph extended to 100vw — converted from border-top on the element (1140px content width) to a ::before pseudo so it can span the full viewport. */ /* the strip: vertically center + off-white line BETWEEN the paragraph and the strip (border-top) */ .foot-util-strip { align-items: center !important; border-top: 0 !important; position: relative !important; margin-top: 24px !important; padding-top: 18px !important; } .foot-util-strip::before { content: "" !important; position: absolute !important; top: 0 !important; left: 50% !important; transform: translateX(-50%) !important; width: 100vw !important; max-width: none !important; height: 1px !important; background: rgba(255,255,255,0.3) !important; pointer-events: none !important; } /* 2026-06-18 PM (Noah): line above the bottom utility strip extended to 100vw — same conversion (border-top → ::before pseudo). */ /* 2026-06-18 PM (Noah): "Free Estimates Available" link at the bottom of the logo/contact column -> Atlantic Blue. Sibling label "Licensed & Insured" in the same .zptext stays the footer gray. Targeted by structure: a[href="/contact"] whose parent

also contains a
— this is the only footer link with that shape (the "Contact Us" and "Request Free Estimate" links in the Company column live in

s without a
). */ .theme-footer-area .zptext p:has(br) a[href="/contact"], .theme-footer-area .zptext p:has(br) a[href="/contact"] * { color: #53B3C8 !important; } .foot-util-strip [class*="zpcol"] { padding-left: 5px !important; padding-right: 5px !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Strip row alignment (2026-06-18 PM): Zoho applies margin-top:20px to .zpelem-text and .zpelem-iconheading inside the strip's columns, which pushed content 10px below the row's vertical center and left the divider sitting above the icon/text line. Zeroing those margins lets align-items:center on the strip put copyright text + every badge icon/heading at one y. Then pack all columns left as content-width (no social on the right per Noah) so the badges sit beside the copyright rather than spreading across the full strip. */ .foot-util-strip .zpelem-text, .foot-util-strip .zpelem-iconheading { margin-top: 0 !important; } .foot-util-strip > [class*="zpcol-md-4"] { flex: 0 0 auto !important; width: auto !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; } .foot-util-strip > [class*="zpcol-md-2"] { flex: 0 0 auto !important; width: auto !important; max-width: none !important; padding-left: 28px !important; padding-right: 16px !important; } .foot-util-strip .zptext, .foot-util-strip .zptext * { color: rgba(255,255,255,0.85) !important; font-size: 12px !important; line-height: 1.4 !important; margin: 0 !important; } .foot-util-strip .zpicon-container { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 7px !important; } .foot-util-strip .zpicon { flex: 0 0 auto !important; min-width: 0 !important; } .foot-util-strip .zpicon img, .foot-util-strip .zpicon svg { width: 17px !important; height: 17px !important; } .foot-util-strip h4.zpicon-heading { flex: 0 1 auto !important; min-width: 0 !important; } .foot-util-strip h4.zpicon-heading, .foot-util-strip h4.zpicon-heading * { color: rgba(255,255,255,0.85) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.3px !important; white-space: nowrap !important; margin: 0 !important; line-height: 1.2 !important; } /* vertical divider between the copyright and the first badge (per render) */ .foot-util-strip > [class*="zpcol-md-4"] + [class*="zpcol-md-2"] { position: relative !important; } .foot-util-strip > [class*="zpcol-md-4"] + [class*="zpcol-md-2"]::before { content: "" !important; position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important; width: 1px !important; height: 22px !important; background: rgba(255,255,255,0.3) !important; } } /* ============================================================ PHONE (max-width: 767px) — HERO H1 SIZE OVERRIDE (2026-06-25) The hero H1 "4B Roofing & Construction" has its size baked into inline runs, so Zoho's builder per-device Typography control cannot resize it (changing the heading element does nothing). On phones 63px overflows badly. This rule overrides those inline spans for phones only. - Intentionally OUTSIDE the main @media(min-width:992px) block (it must apply at phone widths). - No :has() — iOS Safari safe. - .font-free is unique to the hero H1 wrapper site-wide, and the homepage has only one H1, so this targets nothing else. - Adjust the 30px value to taste. ============================================================ */ @media (max-width: 767px) { .font-free h1, .font-free h1 * { font-size: 30px !important; line-height: 1.1 !important; } } /* ============================================================ PHONE (max-width: 767px) — FOOTER LINK COLOR (2026-06-25) Below 992px the desktop footer-link rule (#aab6c2) is off, so the footer text-links fall back to the theme color — dark blue on published phones, yellow in the builder. This forces the footer nav + contact links to white on phones (matching the desktop look). - a:not([style]) excludes the one inline-styled footer link, "Free Estimates Available", so its Atlantic-blue accent is kept; every other link (and its inner spans) goes white. - !important so it holds over the theme color on published iOS. - No :has() — iOS Safari safe. ============================================================ */ @media (max-width: 767px) { .theme-footer-area a:not([style]), .theme-footer-area a:not([style]) * { color: #ffffff !important; } } /* ============================================================ PHONE (max-width: 767px) — HERO FORM (mobile) (2026-06-25) On phones the white-card form styling (>=992 only) is off, so the form sits transparent over the dark hero. Three fixes from Noah's iPhone screenshot (FormIssueIphone.png): 1) gap so the CTA buttons (Request Free Estimate / Call Now) aren't touching the form -> margin-top on the card; 2) the "Get Your Fast & Easy Estimate" title is navy by default and unreadable on the dark form -> white; 3) a little top breathing room so the title isn't jammed at the very top -> padding-top on the card. NOTE: #hfc-head is injected by the Header Code JS (published site only), so the title color is NOT previewable in the builder. No :has() — iOS Safari safe. Values are easy to tune. ============================================================ */ @media (max-width: 767px) { .hero-form-card { margin-top: 26px !important; padding-top: 10px !important; } #hfc-head .hfc-title { color: #ffffff !important; } } /* ============================================================ RESPONSIVE TEXT ALIGNMENT — make the builder's per-device align buttons actually work on phone & tablet. (2026-06-25) Zoho bakes alignment as an inline style on the inner

/, which overrides the per-device align CLASS the builder writes when you set alignment in phone/tablet view — so it silently does nothing. These rules re-assert the builder's own per-device align classes with !important so your choice wins. Result: pick any text/heading, switch to phone (or tablet) view, set the alignment, and it sticks — no per-element CSS needed. No :has() — iOS safe. ============================================================ */ @media (max-width: 767px) { .zptext-align-mobile-left, .zptext-align-mobile-left * { text-align: left !important; } .zptext-align-mobile-center, .zptext-align-mobile-center * { text-align: center !important; } .zptext-align-mobile-right, .zptext-align-mobile-right * { text-align: right !important; } .zptext-align-mobile-justify, .zptext-align-mobile-justify * { text-align: justify !important; } .zpheading-align-mobile-left, .zpheading-align-mobile-left * { text-align: left !important; } .zpheading-align-mobile-center, .zpheading-align-mobile-center * { text-align: center !important; } .zpheading-align-mobile-right, .zpheading-align-mobile-right * { text-align: right !important; } } @media (min-width: 768px) and (max-width: 991px) { .zptext-align-tablet-left, .zptext-align-tablet-left * { text-align: left !important; } .zptext-align-tablet-center, .zptext-align-tablet-center * { text-align: center !important; } .zptext-align-tablet-right, .zptext-align-tablet-right * { text-align: right !important; } .zptext-align-tablet-justify, .zptext-align-tablet-justify * { text-align: justify !important; } .zpheading-align-tablet-left, .zpheading-align-tablet-left * { text-align: left !important; } .zpheading-align-tablet-center, .zpheading-align-tablet-center * { text-align: center !important; } .zpheading-align-tablet-right, .zpheading-align-tablet-right * { text-align: right !important; } } /* ============================================================ PHONE (max-width: 767px) — HERO TEXT CENTERING (2026-06-25) The eyebrow ("Built on 30+ Years...") and the "Roofing & Construction Services" text won't center from the builder's phone view because each has an inner

(inline) that beats the per-device align control. Force-center on phones. - Eyebrow targeted by its existing .hero-eyebrow class. - "Roofing & Construction Services" has no custom class, so it is targeted by its Zoho element id. For a cleaner / more durable hook, add a custom class "hero-subhead" to that element in the builder — this rule already includes it. No :has() — iOS Safari safe. ============================================================ */ @media (max-width: 767px) { .hero-eyebrow, .hero-eyebrow *, .hero-subhead, .hero-subhead *, [data-element-id="elm_gslW2csJygHBm4HRGGUFsQ"], [data-element-id="elm_gslW2csJygHBm4HRGGUFsQ"] * { text-align: center !important; } } /* ============================================================ SERVICE-PAGE HERO H1 SIZE — custom class `svc-h1` (2026-06-26) Service-page heroes are cloned from the homepage hero, so their H1 inherits the homepage wordmark's baked Rubik 63px inline spans, which the builder Typography panel can't override. Add the custom class `svc-h1` to a service hero's H1 (Zoho lands it on the .zpelem-heading wrapper) and this rule sizes it correctly at every width while keeping Rubik. The homepage H1 has no `svc-h1`, so it stays the big wordmark. Universal (NOT inside the 992 block) so it fixes phones too. No :has() — iOS Safari safe. Reuse svc-h1 on every service-page hero H1. NOTE (2026-06-26): selector is intentionally high-specificity (.zpsection .zpelem-heading.svc-h1 h1). The homepage hero forces a fluid clamp(...,3.9375rem)=63px !important via ".zpsection:has(.hero-form-card) .zpelem-heading h1 *" (specificity 0,3,1). A plain ".svc-h1 h1" (0,1,1) lost to it, so we match its specificity and win on source order. Verified live → 44px. ============================================================ */ .zpsection .zpelem-heading.svc-h1 h1, .zpsection .zpelem-heading.svc-h1 h1 * { font-size: clamp(28px, 3.6vw, 45px) !important; line-height: 1.15 !important; font-weight: 600 !important; } /* 2026-07-01: added font-weight:600 above. The /about hero H1 was cloned/retyped as Rubik 400 (thin) while every service-page hero H1 is Rubik 600. svc-h1 only controlled size/line-height, so weights diverged. Forcing 600 makes every svc-h1 hero match (service pages already 600 → unchanged; About 400 → 600). Verified live. */ /* ============================================================ SERVICE-PAGE BODY SECTIONS — reusable components (2026-06-26) Apply as Custom class names on builder elements inside service-page content sections: a heading element -> svc-h2; a text element -> svc-body. !important + descendant coverage so they hold over the builder's per-element inline styling. Alignment is left to the builder (the responsive-align fix already makes that work). ============================================================ */ .svc-h2 h1, .svc-h2 h2, .svc-h2 h3, .svc-h2 h4, .svc-h2 h1 *, .svc-h2 h2 *, .svc-h2 h3 *, .svc-h2 h4 * { font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; color: #0D2B4C !important; font-size: clamp(26px, 3vw, 34px) !important; line-height: 1.2 !important; } .svc-body, .svc-body * { font-family: 'Source Sans 3', sans-serif !important; font-size: 18px !important; line-height: 1.75 !important; color: #42566B !important; } /* ============================================================ CONTACT-PAGE FORM CARD — column custom class `contact-form-card` (2026-07-01). Mirrors the hero estimate form (hero-form-card) so the Contact page's Zoho CRM form matches it, but WIDENED for the 8 fields and with the Service-Needed