:root{--cr-blue:#143f8f;--cr-orange:#ff6600;--cr-ink:#1f2530;--cr-light:#f7f8fb} html,body{margin:0;padding:0} body{overflow-x:hidden;background:#fff} .cr-logo-text{display:inline-flex;align-items:center;max-width:230px;min-height:54px;color:#163b86!important;font-family:Roboto Slab,Roboto,Arial,sans-serif;font-size:21px;font-weight:700;line-height:1.05;text-decoration:none!important;letter-spacing:0;text-transform:none} .cmx-location-footer .cr-logo-text{color:#fff!important;max-width:300px;font-size:28px} .cmx-location-header img[src=""],.cmx-location-footer img[src=""]{display:none!important} .cmx-location-header a[href="#"],.cmx-location-footer a[href="#"]{cursor:default} .cr-circle-mark{display:inline-block;width:117px;height:117px;border-radius:50%;background:radial-gradient(circle at 34% 34%,#fff 0 19%,#ff6600 20% 42%,#143f8f 43% 72%,#eef3ff 73% 100%);box-shadow:0 14px 28px rgba(20,63,143,.16)} .cr-media-fallback{width:100%;aspect-ratio:16/9;background-size:cover;background-position:center;border-radius:0} .cmx-background-video-container{display:none!important} .cmx-element-df811db,.cmx-element-4fb4f99{background-size:cover!important;background-position:center!important} .cmx-element-df811db{background-image:linear-gradient(90deg,rgba(8,20,42,.7),rgba(8,20,42,.16)),url('/images/hero/hero-commercial-roofing-toledo-oh-01.jpg')!important} .cmx-element-4fb4f99{background-image:linear-gradient(90deg,rgba(8,20,42,.7),rgba(8,20,42,.16)),url('/images/hero/hero-commercial-roofing-toledo-oh-03.jpg')!important} .cmx-carousel-image,.swiper-slide-bg{background-size:cover!important;background-position:center!important} .cr-captured-card h5 a{color:inherit!important;text-decoration:none!important} .cr-captured-card p{margin:8px 0 0;color:inherit;font-family:Roboto,Arial,sans-serif;font-size:15px;line-height:1.45;letter-spacing:0} .cr-page-hero{min-height:520px;background-size:cover;background-position:center;display:flex;align-items:center;position:relative} .cr-page-hero .cmx-background-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,23,52,.78),rgba(10,23,52,.28))} .cr-page-hero .cmx-container{position:relative;z-index:1;width:100%;max-width:1180px;margin:0 auto;padding:150px 22px 90px} .cr-page-hero h1{max-width:900px;color:#fff;font-family:Roboto Slab,Roboto,Arial,sans-serif;font-size:clamp(42px,6vw,82px);line-height:1.02;margin:0;text-transform:none;letter-spacing:0} .cr-page-hero h6{max-width:760px;color:#fff;font-family:Roboto,Arial,sans-serif;font-size:20px;line-height:1.55;font-weight:400;margin:24px 0 0} .cr-kicker{color:#ff6600!important;font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:0;margin:0 0 18px} .cr-index-section,.cr-detail-section,.cr-related-section{padding:80px 22px;background:#fff} .cr-index-section .cmx-container,.cr-detail-section .cmx-container,.cr-related-section .cmx-container,.cr-cta-band .cmx-container{max-width:1180px;margin:0 auto;width:100%} .cr-index-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} .cr-index-card{background:#fff;border:1px solid rgba(20,63,143,.14);box-shadow:0 18px 48px rgba(20,40,80,.08);min-height:245px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .cr-index-card:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(20,40,80,.16);border-color:#ff6600} .cr-index-card a{display:flex;height:100%;flex-direction:column;text-decoration:none!important;color:#1f2530!important;padding:28px} .cr-index-card span,.cr-related-link{color:#ff6600;font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:0} .cr-index-card h3{font-family:Roboto Slab,Roboto,Arial,sans-serif;color:#143f8f;font-size:24px;line-height:1.2;margin:16px 0 14px} .cr-index-card p{font-size:16px;line-height:1.6;margin:0;color:#333} .cr-copy p{font-size:19px;line-height:1.78;color:#333;margin:0 0 24px} .cr-side-panel{background:#143f8f;color:#fff;padding:34px!important;align-self:flex-start} .cr-side-panel h2{font-family:Roboto Slab,Roboto,Arial,sans-serif;color:#fff;font-size:30px;line-height:1.2;margin:0 0 18px} .cr-side-panel p,.cr-side-panel a{color:#fff!important} .cr-side-panel .cmx-button,.cr-cta-band .cmx-button,.cr-not-found .cmx-button{background:#ff6600;color:#fff!important;text-decoration:none!important;padding:15px 24px;display:inline-flex;margin-top:10px} .cr-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .cr-related-link{display:block;border:1px solid rgba(20,63,143,.14);padding:18px;text-decoration:none!important;background:#f7f8fb;color:#143f8f!important} .cr-cta-band{padding:70px 22px;background:#143f8f;color:#fff} .cr-cta-band h2{font-family:Roboto Slab,Roboto,Arial,sans-serif;color:#fff;font-size:38px;line-height:1.15;margin:0 0 14px} .cr-cta-band p{font-size:18px;line-height:1.6;margin:0;color:#fff} .cr-simple-header{display:flex;justify-content:space-between;align-items:center;padding:24px 32px;border-bottom:1px solid #eee} .cr-not-found{max-width:760px;margin:120px auto;padding:0 22px} @media (max-width:1024px){.cr-index-grid,.cr-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cr-logo-text{font-size:17px;max-width:180px}} @media (max-width:767px){.cr-page-hero{min-height:470px}.cr-page-hero .cmx-container{padding:120px 20px 70px}.cr-index-grid,.cr-related-grid{grid-template-columns:1fr}.cr-detail-section .cmx-container,.cr-cta-band .cmx-container{display:block}.cr-side-panel{margin-top:30px}.cr-logo-text{font-size:15px;min-height:42px;max-width:155px}.cmx-373 .cmx-element.cmx-element-4a06ac0 .cmx-heading-title{font-size:44px!important;line-height:1.08!important;max-width:360px!important;white-space:normal!important;overflow-wrap:normal!important}.cmx-373 .cmx-element.cmx-element-beef31c .cmx-heading-title{max-width:360px!important;white-space:normal!important;overflow-wrap:normal!important}.cr-captured-card p{font-size:14px;line-height:1.4}.cmx-nav-menu--dropdown.cmx-active{display:block!important;opacity:1!important;visibility:visible!important;transform:none!important}.cmx-menu-toggle.cmx-active+.cmx-nav-menu--dropdown{display:block!important}} /* ===== CR MOBILE + HAMBURGER UPGRADE (added by mobile-optimization pass) ===== */ /* Global mobile-safety net */ *,*::before,*::after{box-sizing:border-box} img,iframe,video,svg,canvas,table{max-width:100%} img,video{height:auto} iframe{max-width:100%} .jgynw-h-contact-map iframe,.jgynw-h-footer-map iframe{width:100%;max-width:100%} /* ---- cmx burger drawer: turn it into a clean themed off-canvas panel ---- */ /* Make the burger toggle a comfortable tap target + on-theme */ .cmx-menu-toggle{align-items:center;justify-content:center;width:48px;height:48px;border-radius:8px;color:#143f8f;background:rgba(20,63,143,.08);cursor:pointer} .cmx-menu-toggle svg,.cmx-menu-toggle i{font-size:26px;line-height:1} /* The injected backdrop overlay (created by site.js) */ .cr-nav-overlay{position:fixed;inset:0;background:rgba(8,20,42,.55);opacity:0;visibility:hidden;transition:opacity .28s ease;z-index:99998} .cr-nav-overlay.is-active{opacity:1;visibility:visible} /* The injected in-drawer close (X) button (created by site.js) */ .cr-nav-close{position:absolute;top:14px;right:16px;width:44px;height:44px;display:none;align-items:center;justify-content:center;border:0;border-radius:8px;background:rgba(255,255,255,.14);color:#fff;font-size:30px;line-height:1;cursor:pointer;z-index:2} .cr-nav-close:hover{background:#ff6600} /* Scroll-lock when the drawer is open */ body.cr-menu-open{overflow:hidden} /* Drawer styling only at the breakpoint cmx shows the toggle (<=1024px) */ @media (max-width:1024px){ /* Guarantee: burger visible, desktop horizontal nav hidden on mobile/tablet */ .cmx-nav-menu--toggle .cmx-menu-toggle,.cmx-menu-toggle{display:flex!important} .cmx-nav-menu--main.cmx-nav-menu__container{display:none!important} nav.cmx-nav-menu--dropdown.cmx-nav-menu__container{ position:fixed!important;top:0!important;right:0!important;left:auto!important;bottom:0!important; width:min(86vw,360px)!important;max-width:360px!important;height:100%!important;max-height:100%!important; margin:0!important;padding:72px 0 32px!important; background:#143f8f!important;color:#fff; box-shadow:-18px 0 50px rgba(8,20,42,.45); overflow-y:auto!important;-webkit-overflow-scrolling:touch; transform:translateX(105%)!important;transition:transform .3s ease!important; visibility:hidden;opacity:1!important;z-index:99999!important;display:block!important;border:0!important } nav.cmx-nav-menu--dropdown.cmx-nav-menu__container.cmx-active{transform:translateX(0)!important;visibility:visible} /* show the injected close button inside an open drawer */ nav.cmx-nav-menu--dropdown.cmx-nav-menu__container .cr-nav-close{display:flex} /* drawer link list */ nav.cmx-nav-menu--dropdown.cmx-nav-menu__container>ul.cmx-nav-menu{display:block!important;width:100%;margin:0;padding:0;list-style:none} nav.cmx-nav-menu--dropdown.cmx-nav-menu__container ul.cmx-nav-menu li{display:block;width:100%;border-bottom:1px solid rgba(255,255,255,.12)} nav.cmx-nav-menu--dropdown.cmx-nav-menu__container a.cmx-item, nav.cmx-nav-menu--dropdown.cmx-nav-menu__container a.cmx-sub-item{ display:block;width:100%;padding:16px 26px!important;min-height:52px; color:#fff!important;font-family:Roboto,Arial,sans-serif;font-size:17px;line-height:1.3;text-decoration:none!important;background:transparent } nav.cmx-nav-menu--dropdown.cmx-nav-menu__container a.cmx-item:hover, nav.cmx-nav-menu--dropdown.cmx-nav-menu__container a.cmx-sub-item:hover{background:rgba(255,255,255,.08);color:#ff9d4d!important} /* sub-menus inside the drawer: indent, lighter, collapsed until toggled open */ nav.cmx-nav-menu--dropdown.cmx-nav-menu__container ul.sub-menu{display:none;background:rgba(0,0,0,.16)} nav.cmx-nav-menu--dropdown.cmx-nav-menu__container ul.sub-menu[aria-hidden="false"], nav.cmx-nav-menu--dropdown.cmx-nav-menu__container ul.sub-menu[style*="block"]{display:block} nav.cmx-nav-menu--dropdown.cmx-nav-menu__container ul.sub-menu a{padding-left:42px!important;font-size:15.5px} /* per-item submenu expand button */ nav.cmx-nav-menu--dropdown.cmx-nav-menu__container .sub-menu-toggle{position:absolute;right:8px;margin-top:-50px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;color:#fff;cursor:pointer} nav.cmx-nav-menu--dropdown.cmx-nav-menu__container li{position:relative} } /* keep desktop nav on desktop, drawer + burger hidden above the toggle breakpoint */ @media (min-width:1025px){ .cr-nav-overlay,.cr-nav-close{display:none!important} .cmx-menu-toggle{display:none!important} nav.cmx-nav-menu--dropdown.cmx-nav-menu__container{display:none!important} .cmx-nav-menu--main.cmx-nav-menu__container{display:flex} } /* ---- General responsive stacking for cmx + sd content (<=768px) ---- */ @media (max-width:768px){ .cr-index-section,.cr-detail-section,.cr-related-section{padding:48px 18px} .cr-cta-band{padding:48px 18px} .cr-page-hero h1{font-size:clamp(30px,8vw,46px)} .cr-cta-band h2{font-size:clamp(26px,7vw,34px)} .cr-copy p{font-size:17px;line-height:1.7} /* cmx multi-column rows stack */ .cmx-location-footer .cmx-container{flex-wrap:wrap} /* sd-body content blocks (faithful-clone artifact) become single column + readable */ .sd-two-col{display:block!important} .sd-side{margin-top:28px} .sd-footer-main{display:block!important} .sd-footer-main>div{margin-bottom:22px} .sd-content{padding-left:16px!important;padding-right:16px!important} .sd-interior-hero h1{font-size:clamp(28px,8vw,40px);line-height:1.12} body{font-size:16px} } /* ===== sd-header / sd-body baseline styling (these classes ship with NO css) ===== */ /* Readable, themed defaults so sd-bodied pages + the -oh location stubs are presentable + mobile-safe */ .sd-header{background:#fff;border-bottom:1px solid #e6e9f0} .sd-header-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;flex-wrap:wrap} .sd-mobile-top{display:none} .sd-logo img{max-height:46px;width:auto} .sd-nav-panel{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .sd-tagline{color:#5a6173;font-size:13px;max-width:280px} .sd-nav{display:flex;gap:18px;flex-wrap:wrap} .sd-nav a{color:#143f8f;text-decoration:none;font-weight:600;font-size:15px;padding:8px 4px;display:inline-block;min-height:40px} .sd-nav a:hover{color:#ff6600} .sd-top-button,.sd-red-btn{display:inline-flex;align-items:center;gap:6px;background:#ff6600;color:#fff!important;text-decoration:none;padding:12px 20px;border-radius:6px;font-weight:700;min-height:44px} .sd-top-button:hover,.sd-red-btn:hover{background:#e25800} .sd-menu-button{display:none;align-items:center;justify-content:center;width:48px;height:48px;font-size:26px;line-height:1;background:rgba(20,63,143,.08);color:#143f8f;border:0;border-radius:8px;cursor:pointer} .sd-mobile-nav{display:none;flex-direction:column;background:#143f8f;padding:8px 0} .sd-mobile-nav.is-open{display:flex} .sd-mobile-nav a{color:#fff;text-decoration:none;padding:15px 22px;font-size:17px;border-bottom:1px solid rgba(255,255,255,.12);min-height:52px;display:block} .sd-mobile-nav a:hover{background:rgba(255,255,255,.08);color:#ff9d4d} .sd-interior-hero{background:#0f1a34;color:#fff;padding:64px 20px} .sd-interior-hero>div{max-width:1180px;margin:0 auto} .sd-interior-hero p{color:#ff9d4d;text-transform:uppercase;letter-spacing:.06em;font-size:13px;font-weight:700;margin:0 0 10px} .sd-interior-hero h1{margin:0;font-family:Roboto Slab,Roboto,Arial,sans-serif;font-size:clamp(30px,5vw,52px);line-height:1.05} .sd-content{max-width:1180px;margin:0 auto;padding:48px 20px} .sd-two-col{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:36px;align-items:start} .sd-content p{font-size:17px;line-height:1.75;color:#333;margin:0 0 18px} .sd-content h2{font-family:Roboto Slab,Roboto,Arial,sans-serif;color:#143f8f;font-size:26px;margin:30px 0 14px} .sd-content a{color:#143f8f} .sd-side{background:#143f8f;color:#fff;padding:28px;border-radius:8px} .sd-side h2{color:#fff;margin-top:0} .sd-side p,.sd-side li{color:#fff} .sd-side ul{list-style:none;padding:0;margin:16px 0 0} .sd-side li{padding:4px 0} .faq-block{margin-top:36px} .faq-item{border:1px solid #e6e9f0;border-radius:6px;margin-bottom:10px;overflow:hidden} .faq-q{display:block;width:100%;text-align:left;background:#f7f8fb;border:0;padding:16px 18px;font-size:16px;font-weight:600;color:#143f8f;cursor:pointer;min-height:48px} .faq-item p{padding:0 18px 16px;margin:12px 0 0;color:#333;line-height:1.6} .sd-photo-cta{position:relative;background:#0f1a34;color:#fff;padding:56px 20px;text-align:center} .sd-photo-copy{position:relative;max-width:760px;margin:0 auto} .sd-photo-copy h2{font-family:Roboto Slab,Roboto,Arial,sans-serif;font-size:clamp(24px,5vw,36px);margin:0 0 12px} .sd-footer{background:#0f1a34;color:#fff;padding:48px 20px 24px} .sd-footer-main{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px} .sd-footer-main h3{color:#ff9d4d;font-size:15px;margin:0 0 12px} .sd-footer-main a{display:block;color:#cdd5e6;text-decoration:none;padding:5px 0;font-size:14px} .sd-footer-main a:hover{color:#fff} .sd-footer-logo img{max-height:54px;width:auto} .sd-footer-bottom{max-width:1180px;margin:26px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:#9aa6c0} @media (max-width:1024px){ .sd-nav,.sd-tagline{display:none} .sd-menu-button{display:inline-flex} } @media (max-width:768px){ .sd-header-inner{padding:12px 16px} .sd-interior-hero{padding:44px 16px} .sd-two-col{grid-template-columns:1fr;gap:24px} .sd-footer-main{grid-template-columns:1fr 1fr;gap:20px} .sd-content{padding:36px 16px} } @media (max-width:480px){ .sd-footer-main{grid-template-columns:1fr} } /* ===== END CR MOBILE + HAMBURGER UPGRADE ===== */ /* ============================================================================ CR HOMEPAGE + HEADER/FOOTER + INNER-PAGE REPAIR PASS (additive overrides) Goal: spread out the header, kill giant/overflowing titles, style the rebuilt homepage blocks, and lay out a fluid SEO footer — all WITHIN the captured navy/orange cmx theme. Mobile (<=1024px hamburger) untouched. ============================================================================ */ /* ---------- GLOBAL TITLE OVERFLOW SAFETY (all pages) ---------- The captured hero headings are 70px/900 uppercase and overflow long "... in Toledo, OH" titles. Clamp every hero H1 responsively. These element ids are shared across slug + taxonomy-index + about + contact pages. */ .cmx-element-4a06ac0 .cmx-heading-title, /* slug + taxonomy index hero */ .cmx-element-544b5be .cmx-heading-title, /* about hero */ .cmx-element-38f7278c .cmx-heading-title{ /* contact hero */ font-size:clamp(32px,4.6vw,64px)!important; line-height:1.06!important; overflow-wrap:break-word; word-break:normal; } /* Secondary in-body h1s that the captured theme rendered ~96px (un-clamped) on slug/taxonomy pages (#8408c60 "Roof Scope For This Decision"/"How We Scope...") and about (#34b6eb9, #17e8b20 "clear roof scopes, fewer surprises."). */ .cmx-373 .cmx-element.cmx-element-8408c60 h1, .cmx-373 .cmx-element.cmx-element-8408c60 .cmx-heading-title, .cmx-233 .cmx-element.cmx-element-34b6eb9 .cmx-heading-title, .cmx-233 .cmx-element.cmx-element-17e8b20 .cmx-heading-title{ font-size:clamp(28px,3.6vw,46px)!important;line-height:1.1!important;overflow-wrap:break-word; } /* desktop hero (#f1d09cf big / #ed8872f eyebrow) + mobile hero (#a87c1f9 / #046fda5). Target both the widget AND its inner

/ so the inherited size can't escape. */ .cmx-8 .cmx-element.cmx-element-f1d09cf, .cmx-8 .cmx-element.cmx-element-f1d09cf p, .cmx-8 .cmx-element.cmx-element-a87c1f9, .cmx-8 .cmx-element.cmx-element-a87c1f9 p{ font-size:clamp(34px,5vw,58px)!important;line-height:1.05!important; } .cmx-8 .cmx-element.cmx-element-ed8872f, .cmx-8 .cmx-element.cmx-element-ed8872f p, .cmx-8 .cmx-element.cmx-element-046fda5, .cmx-8 .cmx-element.cmx-element-046fda5 p{ font-size:clamp(20px,2.6vw,32px)!important;line-height:1.15!important; } /* ITEM 4: intro section giant blue title (#46a3b5d, was 48px/68px, overflowed its column). The

inside the text-editor widget keeps its own large size, so target it directly. */ .cmx-8 .cmx-element.cmx-element-46a3b5d, .cmx-8 .cmx-element.cmx-element-46a3b5d h1{ font-size:clamp(26px,3.2vw,44px)!important; line-height:1.12!important; overflow-wrap:break-word;word-break:normal; } /* generic safety net: no heading inside captured content may force horizontal scroll */ .cmx h1,.cmx h2,.cmx h3{overflow-wrap:break-word} /* ---------- IMAGE / CONTENT OVERLAP + OVERSIZE SAFETY (inner pages) ---------- */ .cmx img{max-width:100%;height:auto} .cmx-widget-image img,.cmx-widget-video img{max-width:100%;height:auto} /* captured carousel/gallery tiles must not exceed their cell */ .cmx-carousel-image,.swiper-slide-bg,.cr-media-fallback{max-width:100%} /* ---------- INNER-PAGE HERO SCRIM ---------- Slug/taxonomy (#4fe321a), about (#06bf63d) and contact (#6e121576) heroes carry a background photo but NO overlay div, so the white hero title sat on a bright image with poor contrast (read as "broken / text over image"). Add a navy scrim behind the hero content (theme-safe — same navy the captured bg-color used). */ .cmx-373 .cmx-element.cmx-element-4fe321a, .cmx-233 .cmx-element.cmx-element-06bf63d, .cmx-128 .cmx-element.cmx-element-6e121576{position:relative} .cmx-373 .cmx-element.cmx-element-4fe321a::before, .cmx-233 .cmx-element.cmx-element-06bf63d::before, .cmx-128 .cmx-element.cmx-element-6e121576::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(90deg,rgba(10,23,52,.82),rgba(10,23,52,.42)); } .cmx-373 .cmx-element.cmx-element-4fe321a > .cmx-container, .cmx-233 .cmx-element.cmx-element-06bf63d > .cmx-container, .cmx-128 .cmx-element.cmx-element-6e121576 > .cmx-container{ position:relative;z-index:1; } /* Slug/taxonomy "feature" band (#0f8b57d) puts white columns over a bright lighthouse photo — darken it so the three feature notes + sibling links stay readable. */ .cmx-373 .cmx-element.cmx-element-0f8b57d:not(.cmx-motion-effects-element-type-background){ background-image:linear-gradient(rgba(12,47,110,.86),rgba(12,47,110,.86)),url('/images/service-areas/port-clinton-oh-commercial-roofing-toledo-oh.jpg')!important; background-size:cover!important;background-position:center!important; } /* ============================================================================ ITEM 1 — HEADER: spread out horizontally on desktop (>=1025px) The captured sticky header froze an inline width:756px and splits into four 25% columns (logo / nav / EMPTY / button), which crams everything. Override the frozen width, drop the dead empty column, and let logo+nav+button breathe. ============================================================================ */ /* The captured header section never got a background-color (it was transparent), so the WHITE nav text vanished over white sections when the header stuck. The intended royalelect header is dark navy/charcoal — restore that on all viewports so the nav is always readable, and make the logo white to match. Also: the captured sticky header froze an inline width:756px. On a phone that pushes the burger off-screen, so force the header to the real viewport width on ALL breakpoints (desktop column spread is refined further down at >=1025px). */ header.cmx-134 .cmx-element-17442320{ background-color:#0f1a34!important; width:100%!important;left:0!important;right:0!important; } header.cmx-134 .cr-logo-text{color:#fff!important} header.cmx-134 .cmx-element-17442320.cmx-sticky--active{ box-shadow:0 6px 22px rgba(8,20,42,.28); } /* ---- Mobile/tablet header (<=1024px): logo left, burger right, on the real width ---- */ @media (max-width:1024px){ header.cmx-134 .cmx-element-17442320 > .cmx-container{ display:flex!important;flex-wrap:nowrap;align-items:center;justify-content:space-between; max-width:100%;width:100%;gap:12px; } header.cmx-134 .cmx-element-7bf5f36c{flex:1 1 auto;width:auto!important;min-width:0;} header.cmx-134 .cr-logo-text{color:#fff!important;max-width:none;font-size:16px;line-height:1.1;min-height:0} /* the nav column shrinks to just hold the burger, pinned right */ header.cmx-134 .cmx-element-e96f82{flex:0 0 auto;width:auto!important;margin-left:auto} /* hide the dead empty column + the header CTA button on mobile (CTA lives in the hero + drawer) */ header.cmx-134 .cmx-element-6f0f6ce, header.cmx-134 .cmx-element-d5ce71d{display:none!important} header.cmx-134 .cmx-menu-toggle{margin-left:auto} } @media (min-width:1025px){ /* beat the inline style="width:756px" on BOTH header copies (sticky + spacer) */ header.cmx-134 .cmx-element-17442320{ width:100%!important;left:0!important;right:0!important; } header.cmx-134 .cmx-element-17442320 > .cmx-container{ max-width:1600px;width:100%;margin:0 auto; display:flex;flex-wrap:nowrap;align-items:center;gap:28px; } /* logo: size to content, never wrap to 4 lines; cap width so it can't crowd the nav */ header.cmx-134 .cmx-element-7bf5f36c{width:auto!important;flex:0 1 auto;min-width:0;} header.cmx-134 .cr-logo-text{ max-width:260px;font-size:19px;line-height:1.12;white-space:normal;min-height:0; } /* nav column: take the free space, center its menu */ header.cmx-134 .cmx-element-e96f82{flex:1 1 auto;width:auto!important;min-width:0;} header.cmx-134 .cmx-element-e96f82 .cmx-nav-menu--main{justify-content:center;} /* ALL nav items on one row */ header.cmx-134 .cmx-nav-menu--main > ul.cmx-nav-menu{ display:flex!important;flex-wrap:nowrap!important;align-items:center; justify-content:center;gap:2px;white-space:nowrap; } header.cmx-134 .cmx-nav-menu--main > ul.cmx-nav-menu > li{margin-bottom:0!important;} header.cmx-134 .cmx-element-4997e506 .cmx-nav-menu--main .cmx-item{ padding-left:12px;padding-right:12px;white-space:nowrap; } /* the dead empty 25% column (#6f0f6ce) — collapse it */ header.cmx-134 .cmx-element-6f0f6ce{display:none!important;} /* button column: size to content; keep "Request a Roof Review" on one line */ header.cmx-134 .cmx-element-d5ce71d{width:auto!important;flex:0 0 auto;} header.cmx-134 .cmx-element-8bc5c5a .cmx-button{ white-space:nowrap;padding:13px 22px; } header.cmx-134 .cmx-element-8bc5c5a .cmx-button-text{white-space:nowrap;} /* the captured dropdown