/* ===================================================================== Round Hill — Top Section Redesign (v2) Scope: top info bar + navbar + hero + lead form ONLY. Loaded LAST in so it wins the cascade. SEO/GTM/JS untouched. ===================================================================== */ :root { --rh-blue: #2563eb; --rh-blue-2: #1d4ed8; --rh-blue-3: #1e40af; --rh-cyan: #0ea5e9; --rh-cyan-2: #06b6d4; --rh-navy: #0c1929; --rh-navy-2: #07111f; --rh-ink: #0f172a; --rh-ice: #e0f2fe; } /* ============================ TOP INFO BAR ============================ */ header.site-header { /* stays pinned above the navbar (matches the site's fixed layout) */ position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 10002 !important; overflow: hidden !important; background: linear-gradient(90deg, #060e1a 0%, #0c1929 42%, #10243c 100%) !important; border-bottom: 1px solid rgba(37, 99, 235, 0.35) !important; box-shadow: 0 1px 0 rgba(6, 182, 212, 0.18) !important; } /* animated moving mesh grid */ header.site-header::before { content: ""; position: absolute; inset: -2px; background-image: linear-gradient(rgba(56, 189, 248, 0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 189, 248, 0.14) 1px, transparent 1px); background-size: 26px 26px, 26px 26px; animation: rh-grid-pan 16s linear infinite; pointer-events: none; z-index: 0; opacity: 0.55; } /* slow sweeping light */ header.site-header::after { content: ""; position: absolute; top: 0; bottom: 0; width: 42%; left: -50%; background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.16), rgba(37, 99, 235, 0.10), transparent); filter: blur(4px); animation: rh-bar-sweep 7.5s ease-in-out infinite; pointer-events: none; z-index: 0; } header.site-header .container { position: relative; z-index: 1; } @keyframes rh-grid-pan { from { background-position: 0 0, 0 0; } to { background-position: 26px 26px, 26px 26px; } } @keyframes rh-bar-sweep { 0% { left: -50%; } 55% { left: 120%; } 100% { left: 120%; } } .site-header-content { gap: 1.35rem !important; } .site-header-item, .site-header .site-header-text { color: rgba(255, 255, 255, 0.9) !important; letter-spacing: 0.01em; } .site-header [class^="bi-"], .site-header [class*=" bi-"] { color: #38bdf8 !important; } .site-header-phone a, .site-header .site-header-phone a { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.12rem 0.6rem !important; border-radius: 999px; background: linear-gradient(135deg, rgba(14, 165, 233, 0.22), rgba(37, 99, 235, 0.22)); border: 1px solid rgba(56, 189, 248, 0.35); color: #e0f2fe !important; font-weight: 600 !important; } .site-header-phone a:hover { background: #fff; color: var(--rh-blue-2) !important; border-color: #fff; } /* ============================== NAVBAR =============================== */ .navbar { background: linear-gradient(103deg, #17357e 0%, #1e40af 30%, #2563eb 62%, #1d4ed8 100%) !important; box-shadow: 0 12px 30px rgba(7, 17, 31, 0.28) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important; } .navbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, #38bdf8 30%, #22d3ee 50%, #38bdf8 70%, transparent); opacity: 0.85; pointer-events: none; } /* Brand: icon chip + white wordmark */ .navbar-brand { gap: 11px !important; align-items: center !important; } .navbar-brand .logo-wrap { display: inline-flex !important; align-items: center; justify-content: center; width: 50px !important; height: 50px !important; padding: 6px !important; border-radius: 14px !important; background: rgba(255, 255, 255, 0.97) !important; box-shadow: 0 8px 18px rgba(7, 17, 31, 0.28), inset 0 0 0 1px rgba(37, 99, 235, 0.12) !important; flex-shrink: 0; } .navbar-brand .logo-wrap .logo, .navbar-brand .logo { width: 100% !important; height: 100% !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; object-fit: contain !important; border-radius: 0 !important; } .navbar-brand .brand-wordmark { display: block; height: 38px; width: auto; max-width: min(230px, 44vw); object-fit: contain; object-position: left center; filter: brightness(0) invert(1); } /* hide text fallback when the wordmark image is present */ .navbar-brand:has(.brand-wordmark) .navbar-brand-text { display: none !important; } /* Nav links */ .navbar .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.92) !important; font-weight: 500 !important; letter-spacing: 0.01em; border-radius: 9px !important; padding: 0.45rem 0.72rem !important; transition: background 0.2s ease, color 0.2s ease; } .navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link.active { background: rgba(255, 255, 255, 0.16) !important; color: #fff !important; } .navbar .navbar-nav .nav-link.custom-btn { border-radius: 11px !important; border: 1.5px solid rgba(255, 255, 255, 0.9) !important; background: rgba(255, 255, 255, 0.08) !important; color: #fff !important; font-weight: 700 !important; padding: 0.46rem 0.95rem !important; } .navbar .navbar-nav .nav-link.custom-btn:hover { background: #fff !important; color: var(--rh-blue-2) !important; border-color: #fff !important; } .navbar .navbar-nav .nav-link.navbar-call-number { background: #fff !important; color: var(--rh-blue-2) !important; border-color: #fff !important; box-shadow: 0 8px 20px rgba(7, 17, 31, 0.22); } .navbar .navbar-nav .nav-link.navbar-call-number:hover { background: #eff6ff !important; color: var(--rh-blue-3) !important; } .navbar-toggler { border: 1.5px solid rgba(255, 255, 255, 0.6) !important; border-radius: 10px !important; } /* =============================== HERO =============================== */ .hero-section { background: radial-gradient(1100px 560px at 10% 12%, rgba(6, 182, 212, 0.22), transparent 58%), radial-gradient(900px 520px at 92% 18%, rgba(37, 99, 235, 0.30), transparent 55%), linear-gradient(122deg, rgba(6, 12, 22, 0.90) 0%, rgba(12, 25, 41, 0.80) 34%, rgba(29, 78, 216, 0.55) 76%, rgba(14, 165, 233, 0.42) 100%), url("/images/hero/hero-branded.jpg") !important; background-size: cover, cover, cover, cover !important; background-position: center, center, center, center !important; background-repeat: no-repeat !important; padding-top: 132px !important; padding-bottom: 96px !important; } /* overlay element -> subtle dot grid + top/bottom vignette */ .hero-section .section-overlay { background: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.5px) 0 0 / 22px 22px, radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(6, 12, 22, 0.40) 100%) !important; opacity: 1 !important; z-index: 1 !important; } .hero-section .hero-main-title, .hero-section h1.hero-main-title { font-weight: 800 !important; letter-spacing: -0.02em !important; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); } .hero-section .hero-h1-line1 { color: #fff !important; } .hero-section .cd-words-wrapper b { background: linear-gradient(90deg, #67e8f9, #38bdf8 55%, #7dd3fc) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; text-shadow: 0 0 26px rgba(56, 189, 248, 0.35); filter: drop-shadow(0 1px 10px rgba(6, 182, 212, 0.25)); } /* safety: never let the rotating city render invisible */ @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .hero-section .cd-words-wrapper b { background: none !important; -webkit-text-fill-color: #38bdf8 !important; color: #38bdf8 !important; } } .hero-description { color: rgba(255, 255, 255, 0.94) !important; font-size: 1.06rem !important; line-height: 1.7 !important; } /* left-column CTAs — stop the old bouncing animations + marquee */ .hero-buttons .custom-btn.hero-cta-pulse, .hero-buttons .custom-btn.button--atlas, .hero-buttons .custom-btn.button--pan { animation: none !important; } .hero-buttons .marquee { display: none !important; } .hero-buttons { gap: 0.75rem !important; align-items: stretch; } /* new clean CTA buttons */ .hero-buttons .rh-cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.7rem; min-height: 60px; padding: 0.7rem 1.25rem !important; border-radius: 14px !important; text-decoration: none !important; font-weight: 700; line-height: 1.05; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease, color 0.2s ease; will-change: transform; } .hero-buttons .rh-cta .rh-cta-ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; } .hero-buttons .rh-cta .rh-cta-ic svg { width: 20px; height: 20px; display: block; } .hero-buttons .rh-cta .rh-cta-ic svg, .hero-buttons .rh-cta .rh-cta-ic svg path, .hero-buttons .rh-cta .rh-cta-ic svg rect { stroke: currentColor !important; fill: none !important; stroke-width: 2 !important; } .hero-buttons .rh-cta .rh-cta-ic i { font-size: 19px !important; line-height: 1 !important; color: currentColor !important; display: inline-flex !important; } .hero-buttons .rh-cta .rh-cta-ic i::before { vertical-align: middle; } .hero-buttons .rh-cta .rh-cta-tx { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .hero-buttons .rh-cta .rh-cta-tx b { font-size: 1.02rem; font-weight: 800; letter-spacing: 0.01em; } .hero-buttons .rh-cta .rh-cta-tx em { font-style: normal; font-size: 0.76rem; font-weight: 600; opacity: 0.85; } /* primary: Call */ .hero-buttons .rh-cta-call { background: #ffffff !important; color: var(--rh-blue-2) !important; box-shadow: 0 14px 30px rgba(7, 17, 31, 0.30); animation: rh-cta-glow 2.6s ease-in-out infinite; /* glow only, no movement */ } .hero-buttons .rh-cta-call .rh-cta-ic { background: linear-gradient(135deg, #0ea5e9, #2563eb); color: #fff; } .hero-buttons .rh-cta-call .rh-cta-tx b { color: var(--rh-blue-3); } .hero-buttons .rh-cta-call .rh-cta-tx em { color: #2563eb; } /* shine sweep */ .hero-buttons .rh-cta-call::before { content: ""; position: absolute; top: 0; left: -75%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(37, 99, 235, 0.18), transparent); transform: skewX(-18deg); animation: rh-cta-shine 3.6s ease-in-out infinite; } .hero-buttons .rh-cta-call:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(37, 99, 235, 0.4); } /* secondary: Book */ .hero-buttons .rh-cta-book { background: rgba(255, 255, 255, 0.10) !important; color: #fff !important; border: 1.5px solid rgba(255, 255, 255, 0.85); backdrop-filter: blur(4px); } .hero-buttons .rh-cta-book .rh-cta-ic { background: rgba(255, 255, 255, 0.16); color: #fff; } .hero-buttons .rh-cta-book .rh-cta-tx em { color: rgba(255, 255, 255, 0.82); } .hero-buttons .rh-cta-book:hover { transform: translateY(-3px); background: #fff !important; color: var(--rh-blue-2) !important; border-color: #fff; box-shadow: 0 18px 36px rgba(7, 17, 31, 0.32); } .hero-buttons .rh-cta-book:hover .rh-cta-ic { background: linear-gradient(135deg, #0ea5e9, #2563eb); color: #fff; } .hero-buttons .rh-cta-book:hover .rh-cta-tx em { color: #2563eb; } @keyframes rh-cta-glow { 0%, 100% { box-shadow: 0 14px 30px rgba(7, 17, 31, 0.30), 0 0 0 0 rgba(56, 189, 248, 0.0); } 50% { box-shadow: 0 16px 34px rgba(7, 17, 31, 0.34), 0 0 0 6px rgba(56, 189, 248, 0.14); } } @keyframes rh-cta-shine { 0% { left: -75%; } 55% { left: 130%; } 100% { left: 130%; } } @media (prefers-reduced-motion: reduce) { header.site-header::before, header.site-header::after, .hero-buttons .rh-cta-call, .hero-buttons .rh-cta-call::before { animation: none !important; } } /* fallback styling if old markup is still present anywhere */ .hero-buttons .custom-btn:not(.rh-cta):not(.custom-border-btn), .hero-buttons .button--atlas:not(.rh-cta) { background: #ffffff !important; color: var(--rh-blue-2) !important; border-color: #fff !important; border-radius: 12px !important; } .hero-buttons .custom-border-btn:not(.rh-cta) { background: rgba(255, 255, 255, 0.10) !important; border: 1.5px solid rgba(255, 255, 255, 0.85) !important; color: #fff !important; border-radius: 12px !important; } /* ========================= LEAD FORM CARD ========================== */ .hero-quote-stack { max-width: 430px !important; position: relative; z-index: 3 !important; } @media (min-width: 992px) { .hero-quote-stack { margin-left: 0 !important; margin-right: 0 !important; max-width: 410px !important; } } .hero-quick-quote { position: relative; overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, #f5faff 60%, #eaf4ff 100%) !important; border-radius: 20px !important; padding: 0 !important; border: 1px solid rgba(255, 255, 255, 0.7) !important; box-shadow: 0 30px 60px rgba(6, 12, 22, 0.42), 0 0 0 1px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; text-align: left !important; animation: rh-card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; } .hero-quick-quote::before { content: ""; display: block; height: 6px; background: linear-gradient(90deg, #06b6d4, #2563eb 50%, #1d4ed8); } /* card header */ .hero-quote-intro { position: relative; margin: 0 !important; padding: 1.05rem 1.2rem 0.7rem !important; text-align: left !important; background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(6, 182, 212, 0.08)) !important; border-bottom: 1px solid rgba(37, 99, 235, 0.12); } /* "live" badge, top-right of header */ .hero-quote-intro::after { content: "● LIVE"; position: absolute; top: 0.85rem; right: 1rem; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; color: #059669; background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.35); border-radius: 999px; padding: 0.18rem 0.5rem; animation: rh-live 1.8s ease-in-out infinite; } .hero-quote-title { font-size: clamp(1.28rem, 2.4vw, 1.55rem) !important; font-weight: 800 !important; color: var(--rh-ink) !important; margin: 0 0 0.3rem !important; line-height: 1.12 !important; letter-spacing: -0.02em; text-shadow: none !important; } .hero-quote-lead { font-size: 0.84rem !important; line-height: 1.45 !important; color: #334155 !important; margin: 0 0 0.35rem !important; text-shadow: none !important; } .hero-quote-lead strong { color: var(--rh-blue-2) !important; font-weight: 700 !important; } /* trust line -> gold stars + text */ .hero-quote-trust { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; font-size: 0.72rem !important; color: #475569 !important; margin: 0.15rem 0 0 !important; text-shadow: none !important; } .hero-quote-trust::before { content: "★★★★★"; color: #f59e0b; letter-spacing: 0.05em; font-size: 0.82rem; margin-right: 0.15rem; } .hero-quote-trust a { color: var(--rh-blue) !important; font-weight: 700 !important; text-decoration: none !important; } .hero-quote-trust a:hover { text-decoration: underline !important; } /* feature pills -> check badges */ .hero-quote-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; } .hero-quote-pills span { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; font-weight: 700; color: #0e7490; background: rgba(6, 182, 212, 0.12); border: 1px solid rgba(6, 182, 212, 0.3); border-radius: 999px; padding: 0.24rem 0.6rem 0.24rem 0.5rem; } .hero-quote-pills span::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--rh-cyan-2); color: #fff; font-size: 0.6rem; font-weight: 900; } /* form body */ .hero-quick-quote form { padding: 0.95rem 1.2rem 1.2rem; } .hero-quick-quote .field-tight { margin-bottom: 0.6rem !important; } .hero-quick-quote .form-label { display: block !important; font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rh-blue-2) !important; margin: 0 0 0.28rem !important; } .hero-quick-quote .form-label .text-danger { color: #ef4444 !important; text-transform: none; } .hero-quick-quote .form-label .text-muted { color: #94a3b8 !important; font-weight: 600 !important; text-transform: none; letter-spacing: 0; } .hero-quick-quote .form-control { font-size: 0.95rem !important; padding: 0.78rem 0.85rem 0.78rem 2.5rem !important; border-radius: 12px !important; border: 1.5px solid #bfdbfe !important; background-color: #fff !important; background-repeat: no-repeat !important; background-position: 0.8rem center !important; background-size: 18px 18px !important; line-height: 1.3 !important; color: var(--rh-ink) !important; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .hero-quick-quote .form-control::placeholder { color: #9aa8bd !important; } .hero-quick-quote .form-control:focus { border-color: var(--rh-blue) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important; background-color: #fff !important; } /* input icons */ #heroQqName { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E") !important; } #heroQqPhone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 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-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") !important; } #heroQqAddress { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") !important; } #heroQqMsg { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18v3h3l6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.1-.5-.5-2.1 2.6-2.6z'/%3E%3C/svg%3E") !important; } /* submit */ .hero-quick-quote .btn-submit { position: relative; overflow: hidden; width: 100% !important; margin-top: 0.4rem !important; padding: 0.9rem 1rem !important; font-size: 1.02rem !important; font-weight: 800 !important; letter-spacing: 0.01em; border: none !important; border-radius: 13px !important; color: #fff !important; background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 46%, #1d4ed8 100%) !important; box-shadow: 0 12px 26px rgba(37, 99, 235, 0.45) !important; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .hero-quick-quote .btn-submit:not(:disabled)::after { content: " →"; font-weight: 900; } .hero-quick-quote .btn-submit::before { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: skewX(-18deg); transition: left 0.5s ease; } .hero-quick-quote .btn-submit:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 16px 32px rgba(37, 99, 235, 0.52) !important; color: #fff !important; } .hero-quick-quote .btn-submit:hover::before { left: 130%; } .hero-quick-quote .btn-submit:active { transform: translateY(0); } .hero-quick-quote .btn-submit:disabled { opacity: 0.8; } /* privacy reassurance under the form */ #heroQuickQuoteForm::after { content: "🔒 100% free & no obligation · Your info is private"; display: block; margin-top: 0.6rem; text-align: center; font-size: 0.68rem; color: #64748b; } /* Google Places dropdown above everything */ .pac-container { z-index: 100060 !important; border-radius: 10px; box-shadow: 0 16px 40px rgba(7, 17, 31, 0.25); } /* ============================ ANIMATIONS ============================ */ @keyframes rh-card-in { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes rh-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } @media (prefers-reduced-motion: reduce) { .hero-quick-quote { animation: none !important; } .hero-quote-intro::after { animation: none !important; } .hero-quick-quote .btn-submit::before { display: none !important; } } /* ============================== MOBILE ============================== */ @media (max-width: 991px) { .navbar-brand .logo-wrap { width: 40px !important; height: 40px !important; padding: 5px !important; border-radius: 11px !important; } .navbar-brand .brand-wordmark { height: 30px; max-width: 200px; } .hero-quote-stack { max-width: 460px !important; margin-left: auto !important; margin-right: auto !important; } } @media (max-width: 767px) { /* kill horizontal overflow that was clipping the right edge */ html, body { overflow-x: hidden !important; } .hero-section { padding-top: 96px !important; padding-bottom: 40px !important; overflow: hidden !important; } .hero-section .container { max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; } .hero-section .row { margin-left: 0 !important; margin-right: 0 !important; } .hero-section .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } .hero-description { font-size: 0.95rem !important; line-height: 1.6 !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .hero-buttons { flex-direction: column; align-items: stretch; gap: 0.6rem !important; } .hero-buttons .custom-btn, .hero-buttons .rh-cta { width: 100% !important; max-width: none !important; justify-content: center; } .hero-buttons .rh-cta { min-height: 58px; } .hero-quote-stack { max-width: 100% !important; width: 100% !important; margin-top: 1.1rem; } .hero-quick-quote { max-width: 100% !important; border-radius: 18px !important; } .hero-quote-intro { padding: 0.95rem 1rem 0.65rem !important; } .hero-quick-quote form { padding: 0.85rem 1rem 1.05rem; } .hero-quick-quote .form-control { font-size: 16px !important; /* prevents iOS zoom-on-focus */ padding-top: 0.82rem !important; padding-bottom: 0.82rem !important; } .hero-quote-intro::after { top: 0.7rem; right: 0.8rem; } } @media (max-width: 480px) { .navbar-brand .brand-wordmark { height: 26px; max-width: 150px; } .navbar-brand .logo-wrap { width: 36px !important; height: 36px !important; } } /* ===================== SERVICE CARD IMAGE FIT ======================= */ /* Force service-grid images to fully fill their slot (no side gaps). */ .service-card-image { position: relative !important; overflow: hidden !important; display: block !important; width: 100% !important; } /* the anchor wrapping the image is inline by default -> make it fill */ .service-card-image > a { display: block !important; width: 100% !important; height: 100% !important; } .service-card-image img { display: block !important; width: 100% !important; height: 210px !important; max-width: none !important; object-fit: cover !important; object-position: center 38% !important; } @media (max-width: 991px) { .service-card-image img { height: 190px !important; } } @media (max-width: 767px) { .service-card-image img { height: 200px !important; } } /* Branded "team" feature cards fill fully too */ .branded-card img { display: block !important; width: 100% !important; height: 230px !important; max-width: none !important; object-fit: cover !important; object-position: center 40% !important; }